요청사항

• 팬레터 CRUD 구현 (작성, 조회, 수정, 삭제)
• 아티스트별 게시물 조회 기능 구현 (Home - Read)
• 원하는 아티스트에게 팬레터 등록 구현 (Home - Create)
• 팬레터 상세 화면 구현 (Detail - Read)
• 상세화면에서 팬레터 내용 수정 구현 (Detail - Update)
• 상세화면에서 팬레터 삭제 구현 (Detail - Delete)

브랜치

과제는 Props Drilling → Context API → Redux 순으로 각각 별도의 브랜치를 만들어 제출해야 합니다.
props-drilling 브랜치에서는 context나 redux 없이 useState만으로 상태관리해서 코드를 작성합니다.
context 브랜치에서는 props-drilling으로 작업한 코드에서 react context API를 사용하여 전역상태를 이용한 코드로 리팩터링합니다
redux 브랜치에서는 context api로 전역상태를 관리한 코드를 모두 redux 라이브러리를 이용한 코드로 리팩터링합니다.

와이어프레임

그러하다

라우터

export const fanPageRoute = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      {
        path: "/member/",
        element: (
          <ReduxProvider>
            <PageMember />
          </ReduxProvider>
        ),
        children: [
          {
            path: ":name",
            element: null
          },
          {
            path: ":name/:letterId",
            element: <LetterDetailPage />
          }
        ]
      },
      { path: "/music", element: <>music</> }
    ]
  }
]);

공통 레이아웃 밑에 member에서 팬레터를 보낼 수 있도록 짜뒀다.
home페이지는 제작 예정 뮤직도 그러하다.

목표

• 스타일드컴포넌트 난잡하지않게 사용하기(이미난잡함)
• ui에 신경써서 페이지를 구성 할 것 (상호작용이 있는 것과 아닌 것의 확실한 구분)
• 애니메이션좀 넣어볼것
• 글씨의 폰트 및 그림자 등에 신경 써볼것

#오늘의에너지 #Git