<aside>
https://www.figma.com/design/KKEgdM0NWLI4kSqEpdR3RB/WHYNE[BBB]?node-id=6-1760&t=WYBbUP8ZghAQ6fo6-0[https://www.figma.com/design/lS2fTk43WQNQikYuukEFKe/파트3-4팀-피](https://www.figma.com/design/lS2fTk43WQNQikYuukEFKe/파트3-4팀-피그마?node-id=3336-2&t=O11gebJWLc20z8Px-1)코드잇 원본 시안 팀 시안
기수/팀 별 루트 URL
https://winereview-api.vercel.app/{기수}-{팀}/
</aside>
<aside>
<aside>
| 담당자명 | 작업 |
|---|---|
| @동영 김 | Radio |
| @경하 이 | Modal 시스템, 폰트, 색상, next.js 설치 및 깃 연동, Scale, Modal 내부, Filter, ImageInput, 내 프로필 페이지, Radio(리팩토링), Flavor |
| @댕 | DropDown(Compound Pattern), Badge, Chip, 별점, Card(2), 레이아웃&헤더&프로필, 와인 목록 페이지, 와인 상세 페이지, Card(1) |
| @수빈 최 | Button, Input, SearchInput, textarea, SelectBox, 랜딩, 회원가입, 로그인 페이지(정적 UI+기능) |
| </aside> |
1차 분량: 공용 컴포넌트
2차 분량: 레이아웃&헤더&프로필 / Modal 내부&Filter / Card&Flavor / 랜딩, 회원가입, 로그인 페이지(정적 UI만)
3차 분량: 랜회로 페이지 / 와인목록 페이지 / 와인상세 페이지 / 내 프로필 페이지
src/
├── app/ # Next.js App Router용 루트
├── components/ # 컴포넌트 모음
│ ├── common/ # ── 공통 컴포넌트 (프로젝트 전체에서 사용하는 범용 컴포넌트)
│ └── features/ # ── feature-scoped 컴포넌트(특정 기능(도메인)에 종속적인 컴포넌트)
├── constants/ # 프로젝트 전체에서 공통으로 쓰는 변하지 않는 값들(상수)
├── hooks/ # 커스텀 훅들(useFetch, useDebounce 등) — 재사용성 높은 훅
├── libs/ # 외부 라이브러리 래퍼(axios 인스턴스, api client, logger 등)
├── types/ # 전역 타입 선언(공용 인터페이스, DTO 타입 등)
├── utils/ # 유틸 함수(포맷터, 날짜유틸, 헬퍼 함수 등)
└── styles/ # 전역 SCSS(variables, mixins, reset, globals.scss 등)
├── globals.scss # ── 프로젝트 전체에 적용되는 CSS 초기값(여기 import)
└── variables.scss # ── 색상/spacing/폰트 등 전역 변수
└── reset.scss # ── 기본 스타일 제거
<aside>
src/components/common/
├─ Button/
│ ├─ Button.tsx # 프리젠테이션 컴포넌트 (props: size, variant, onClick)
│ └─ Button.module.scss
├─ Icon/
│ ├─ Icon.tsx
│ └─ Icon.module.scss
├─ Input/
│ ├─ Input.tsx
│ └─ Input.module.scss
└─ Modal/
├─ Modal.tsx
└─ Modal.module.scss
권장 규칙 (common):
<aside>
목적: 특정 도메인(예: reviews, auth, dashboard 등)에 국한된 UI 컴포넌트 모음. 이 컴포넌트들은 보통 그 기능의 로직(데이터 바인딩)과 가까이 있어야 함
src/components/features/Reviews/
├─ ReviewList.tsx # 리뷰 리스트 렌더링(리스트 전용 UI)
├─ ReviewItem.tsx # 하나의 리뷰 아이템 UI
├─ ReviewFilter.tsx # 필터 UI(정렬, 태그 등)
└─ Review.module.scss
권장 규칙 (features):