WHYNE은 사용자가 다양한 와인 리뷰를 확인하고, 구매 여부를 쉽게 판단할 수 있는 와인 리뷰 플랫폼입니다.
주어진 요구사항을 충족하는 것을 넘어, 경쟁력 있는 특별한 UI / UX를 도입하고, 사용자에게 최적의 와인 선택 경험을 제공하는 것
| 팀원 | 역할 | 담당 기능 및 공통 컴포넌트 |
|---|---|---|
| 김준열 | 팀장 | - 프로젝트 셋팅 - 랜딩 페이지 - 와인 상세 페이지 - taste 컴포넌트 - 리뷰 등록/수정 모달 - 무한스크롤 - 토스트 |
| 서지권 | 팀원 | - 마이페이지(내가 쓴 후기) - 헤더 컴포넌트 - 드롭다운 컴포넌트 - chip 컴포넌트 - Flavor 컴포넌트 - 프로필 컴포넌트 - 검색 필터 컴포넌트 - 챗봇 |
| 이연수 | 팀원 | - notion 문서화 및 배너 제작, 디자인 수정 - 아이콘 컴포넌트 - 버튼 컴포넌트 - 별점 컴포넌트 - 카드 컴포넌트 - 캐러셀 컴포넌트 - 마이페이지(내가 등록한 와인) - 와인 목록 페이지(이 달의 추천 와인, 와인 항목) - 스켈레톤 UI - 폰트 최적화 |
| 황휘태 | 팀원 | - 로그인 페이지 - 회원가입 페이지 - next.js middleware - 와인 등록/수정하기 모달 - 삭제하기 모달 - 인풋 컴포넌트 - 와인 타입 컴포넌트 - 에러 바운더리 - 이미지 최적화 |
원활한 소통을 위해 매일 진행하며, 의미 없는 시간이 되지 않도록 노션 문서화로 기록합니다.
| 요일 | 시간 |
|---|---|
| 월요일 | 15:00 |
| 화요일 ~ 일요일 | 13:30 |
실시간 이슈 공유를 위해 ZEP 플랫폼을 활용한 온라인 모각코 진행
매일 09:00 ~ 18:00
main→ 배포develop→ 통합 브랜치feature/*,design/*,chore/*→ 작업 브랜치 → PR → develop → main
| 구분 | 사용 기술 | 비고 |
|---|---|---|
| Framework | Next.js (v15), React (v19) | 메인 프레임워크, App Router 기반 |
| Language | TypeScript (v5) | 정적 타입 시스템 |
| Styling | Tailwind CSS, tailwind-merge | 반응형 및 유틸리티 클래스 관리 |
| Server State / Data Fetching | React Query (TanStack v5), Axios | 서버 데이터 캐싱 및 API 통신 |
| Form Handling | React Hook Form | 입력값 검증 및 폼 상태 관리 |
| UI / Animation | GSAP, Swiper, React Toastify, React Loading Skeleton | 인터랙션, 캐러셀, 알림, 로딩 처리 |
| Chat UI | Chat UI Kit (chatscope) | 챗봇 인터페이스 구성 |
| Utility | Lodash, clsx, class-variance-authority | 유틸 함수 및 클래스 병합 |
| Authentication / Cookie | cookies-next | 로그인 상태 및 쿠키 관리 |
| Build / Deploy | Vercel | 정적 배포 및 CI/CD 환경 |
| Design System / Docs | Storybook, Chromatic | 컴포넌트 문서화 및 시각 테스트 |
| Quality / Linting | ESLint, Prettier, Husky, lint-staged | 코드 품질 및 커밋 훅 관리 |
| Collaboration | GitHub, Notion, Figma, Discoard, Zep | 버전 관리 및 협업 툴 |
- Vercel 배포
- Chromatic으로 Storybook 배포 (develop 기준)
- README: 프로젝트 개요 / 기술 스택 / 실행 방법
- Wiki: 세부 규칙, 가이드 문서, 브랜치 룰
- Notion: 회의록, 멘토링 피드백, 참고 자료
- GitHub Project: 일정 / TODO 관리
# 패키지 설치
npm install
# 개발 서버 실행
npm run dev
# 스토리북 실행
npm run storybook
# 환경 변수 설정 (.env 예시)
NEXT_PUBLIC_API_URL=http://localhost:4000src
┣ api # 서버와 통신하는 API 함수 모음
┣ app # Next.js App Router 관련 페이지/라우트 파일
┣ assets # 이미지, 폰트, 아이콘 등 정적 리소스
┣ components # 재사용 가능한 UI 컴포넌트
┣ context # React Context 관련 전역 상태 관리
┣ hooks # 커스텀 훅 모음
┣ providers # 전역 Provider 설정 (예: ThemeProvider, QueryClientProvider 등)
┣ types # 전역 타입 정의 (TypeScript 인터페이스, 타입)
┗ utils # 공통 유틸리티 함수
