기본 틀 제작 및 날짜 설정

 

프로그램을 제작하기에 앞서 가장 먼저 파워포인트를 활용하여 대략적인 틀을 작성하였다.

 

여러 웹 사이트 디자인 툴이 있었지만 대략적인 틀만 잡고 수정해나갈 것이기에 가장 간략하게 제작하였다.

 

이후 이를 App.js를 통해 구현하였다.

 

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [currentDate, setCurrentDate] = useState(new Date());

  // 해당 월의 일 수 계산 함수
  const getDaysInMonth = (year, month) => {
    return new Date(year, month + 1, 0).getDate();
  };

  // 달력 그리드를 생성하는 함수
  const generateCalendar = () => {
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();
    const today = currentDate.getDate();
    const daysInMonth = getDaysInMonth(year, month);
    const firstDayOfMonth = new Date(year, month, 1).getDay();
    const calendarGrid = [];

    // 첫 주 빈 칸 채우기 (달이 시작하는 요일에 맞춰 칸 비우기)
    for (let i = 0; i < firstDayOfMonth; i++) {
      calendarGrid.push(<div className="calendar-day empty" key={`empty-${i}`}></div>);
    }

    // 날짜 채우기
    for (let day = 1; day <= daysInMonth; day++) {
      calendarGrid.push(
      <div key={day} className="calendar-cell">
        <div className="day-number">{day}</div>
        <div className="spending-amount">0 ₩</div>
      </div>
      );
    }

    return calendarGrid;
  };

  return (
    <div className="app-grid">
      {/* Sidebar */}
      <aside className="sidebar">
        <h2>카드 사용 내역</h2>
        <div className="transaction-list">
          {/* 여기에 동적으로 카드 내역 추가 */}
          <div className="transaction">
            (24.10.07) ~~~원 ~~~카드
          </div>
          <div className="transaction">
            (24.10.08) ~~~원 ~~~카드
          </div>
          <div className="total">총합</div>
        </div>
        <div className="card-selector">카드 선택 UI</div>
      </aside>

      {/* Calendar Section */}
      <section className="calendar-section">
        <header className="calendar-header">
          {currentDate.getFullYear()}년 {currentDate.getMonth() + 1}월
        </header>
        <div className="calendar-grid">
          {generateCalendar()}
        </div>
      </section>

      {/* Footer */}
      <footer className="footer">
        편의성 UI 배치 (환경설정, 프로필 관리, 테마 관리)
      </footer>
    </div>
  );
}

export default App;

지금까지 구현된 부분은 현재의 날짜에 맞는 달을 불러오고 해당 달력의 날짜와 소비액을 표시할 수 있도록 하였다.

 

또한, 

 

기본 UI 및 날짜 기능 있음.

css를 이용하여 마우스를 올리면 현재 어느 날짜를 가리키고 있는지 표시되도록 하였다.

 

아래는 해당 css다.

 

/* 전체 레이아웃을 위한 그리드 설정 */
.app-grid {
    display: grid;
    grid-template-columns: 20% 1fr; /* 사이드바는 20%, 달력은 나머지 */
    grid-template-rows: auto 1fr auto; /* 헤더, 콘텐츠(달력), 푸터 */
    height: 100vh;
    gap: 10px;
  }
  
  /* 사이드바 */
  .sidebar {
    grid-row: 1 / 4; /* 사이드바는 모든 행을 차지 */
    background-color: #3366cc;
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .transaction-list {
    flex-grow: 1;
  }
  
  .transaction {
    margin-bottom: 10px;
  }
  
  .total {
    font-weight: bold;
    margin-top: auto;
  }
  
  .card-selector {
    background-color: #ffcc00;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
  }
  
  /* 달력 섹션 */
  .calendar-section {
    grid-row: 2 / 3; /* 달력은 가운데에 위치 */
    display: flex;
    flex-direction: column;
  }
  
  .calendar-header {
    background-color: #66cc33;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
  }
  
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7열 달력 */
    grid-template-rows: repeat(5, 1fr);    /* 5행 달력 */
    gap: 5px;
    padding: 10px;
  }
  
  .calendar-day {
    background-color: #e0e0e0;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    font-weight: bold;
  }
  
  /* 푸터 */
  .footer {
    grid-column: 1 / 3; /* 푸터는 전체 넓이를 차지 */
    background-color: #3366cc;
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold;
  }

/*달력 설정*/
.calendar-container {
    width: 100%;
    max-width: 600px;
    min-height: 300px;
    margin: 0 auto;
    text-align: center;
  }
  
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7일 주 */
    gap: 5px;
  }
  
  .calendar-header {
    font-weight: bold;
    background-color: #4CAF50;
    color: white;
    padding: 10px;
  }
  
  .calendar-cell {
    border: 1px solid #ddd;
    padding: 10px;
    min-height: 100px;
    text-align: center;
    position: relative; /* absolute 포지셔닝을 위해 relative 추가 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .spending-amount {
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    color: rgb(53, 8, 8);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 중앙에 배치 */
  }
  
  .day-number {
    font-size: 14px;
    font-weight: bold;
    color: #666;
    position: absolute;
    bottom: 5px; /* 우측 하단에 배치 */
    right: 5px;
  }
  
  .calendar-cell:hover {
    background-color: #9c9c9c;
    border: black;
  }
  
  .calendar-cell.empty {
    background-color: #f1f1f1;
  }