1. 내 차 만들기

1.1. 레이아웃

• Header.tsx, NavBar.tsx, Footer.tsx, → components/common 폴더에 각각 넣고 3개 묶어서 components/layout 폴더에서 관리
  • Header.tsx: 모두 정적(static)으로 관리
  • NavBar.tsx: 라우팅 경로 보고 useParams() 이용해서 현재 경로 파악하여 스타일 적용
  • Footer.tsx: 버튼 같은건 정적으로 만들고 선택한 옵션이나 가격 같은 정보는 전역 상태 관리
• 왼쪽, 오른쪽 화살표 버튼 common 컴포넌트로 관리
  • PrevButton.tsx, NextButton.tsx
  • props: width, height, onClick

1.2. 트림/색상

• TrimCard.tsx → components/common
  • props: name, price, description, hasEngineInfo, power, torque
• MyCarImageBox.tsx → components/common
  • props: images, hasOption
• MyCarDescription.tsx
  • props: title, price, hasTag, tags

1.3. 선택옵션

• SelectOptionImageBox.tsx
  • props: image, 나머진 미정
• SelectOptionDescription.tsx
  • props: title, price, tags
• SelectOptionDetail.tsx
  • props: optionList
• OptionCardContainer.tsx
  • props: selectedOption
  • OptionCategory.tsx
    • props: selectedOption
  • SelectOptionCard.tsx
    • props: selectedOption, optionList, onClick
  • DefaultOptionCard.tsx
    • props: optionList