TIL #28 스탠다드반 React 숙련주차 개인과제-2

하루 하나씩 작성하는 TIL #28

4번까지는 진행을 해 둔 상태라 (5)부터 이어서 작성하겠다.

---

(5) 홈 화면 UI: 배너 및 헤더 파트 UI 구현

// src/pages/Home.jsx
import React from 'react';
import styled from 'styled-components';

const Banner = styled.div`
  background-color: #007bff;
  color: white;
  padding: 20px;
  text-align: center;
`;

const Header = styled.header`
  background-color: #f8f9fa;
  padding: 20px;
  text-align: center;
`;

function Home() {
  return (
    <div>
      <Banner>
        <h1>개인 지출 관리 애플리케이션</h1>
        <p>월별 지출을 간편하게 관리하세요.</p>
      </Banner>
      <Header>
        <h2>월 선택</h2>
        {/* 월 선택 탭 구현 */}
      </Header>
      {/* 나머지 UI 요소 구현 */}
    </div>
  );
}

export default Home;

일단 위와 같이 뼈대를 짜준 뒤,

월 선택 탭을 구현해 보도록 하겠다.

function Home() {
  const [selectedMonth, setSelectedMonth] = useState(null);

  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

  const handleMonthClick = (month) => {
    setSelectedMonth(month);
  };

우선 import를 해준 뒤,

import React, { useState } from 'react'

초기 값으론 null 값을 받도록 하고, 각 월을 배열로 받아준다.
month를 클릭 시 , 클릭된 월을 selectedMonth 상태로 설정한다.

return에선

    {months.map((month, index) => (
      <MonthTab key={index} active={selectedMonth === month} onClick={() => handleMonthClick(month)}>
        {month}
      </MonthTab>

months 배열을 순회하며 각 month를 MonthTab 컴포넌트로 렌더링해준다.

key={index}는 각 MonthTab 컴포넌트에 고유한 식별자를 부여한다.

index는 map 메서드에서 제공하는 현재 항목의 인덱스이다.

스타일로는,

const MonthTab = styled.button`
  background-color: ${({ active }) => (active ? '#007bff' : 'transparent')};
  color: ${({ active }) => (active ? 'white' : 'black')};
  border: none;
  padding: 10px 20px;
  margin: 0 5px;
  cursor: pointer;
  font-size: 16px;
`;

active prop을 통해 버튼의 상태에 따라 다른 스타일을 적용.

---

(6) 홈 화면 UI: Dummy Data(fakeData.json)를 이용한 리스트 UI 구현

강의 자료에서 주어진 fakeData파일을 그대로 사용하였다.

import fakeData from '../fakeData.json';

  <div>
        {fakeData.map((item, index) => (
          <ListItem key={index}>
            <p>날짜: {item.date}</p>
            <p>항목: {item.item}</p>
            <p>금액: {item.amount}</p>
            <p>내용: {item.description}</p>
          </ListItem>
        ))}
      </div>

---

💜0524 여기까지 진행 완료