[Fan Mail Box] 제작 프로젝트 #2 - 컴포넌트 분리

와이어프레임

메인 페이지

세부 페이지

컴포넌트 구조

1. App.jsx

• GlobalStyle : 공통 styled-components & reset.css
• Header : 헤더
• Router : 페이지 라우팅
  • Home : 메인 페이지
  • Detail : 상세 페이지

2. Home

• MainPage
  • AddMailSection : 팬레터 추가 Section
    • ArtistList : 아티스트 목록
    • AddForm : 팬레터 추가 Form
      • InputField : 닉네임
      • InputField : 내용
      • SelectField : 받는 사람
      • ButtonField : [등록] 버튼
  • MailListSection : 팬레터 출력 Section
    • Mail : 팬레터가 존재할 때 출력
    • NoMail : 팬레터가 존재하지 않을 때 출력

3. Detail

• DetailPage
  • ArtistPhotoSection : 아티스트 사진 출력 Section
  • MailDetailSection : 팬레터 상세 정보 Section
    • MailDetail : 메일 상세 정보
      • WriterInfoContainer : 작성자 정보
        • Avatar : 아바타
        • WriterInfo
          • Nickname : 닉네임
          • Date : 날짜
      • ReceiverInfoContainer : 받는 사람
      • FullMailContent / EditMailArea : 내용 / 내용 수정
      • ButtonField
        • FullMailContent : 수정 / 삭제
        • EditMailArea : 수정완료 / 취소