WINE은 사용자가 다양한 와인에 대한 리뷰를 보고 구매 여부를 판단해보고, 구매 여부를 판단해볼 수 있는 플랫폼입니다. 와인의 종류, 맛, 가격대, 별점을 기반으로 리뷰를 작성할 수 있고, 다양한 필터를 적용해서 와안을 골라 볼 수 있는 기능도 포함됩니다.
프로젝트 기간: 2025.11.15 ~ 2025.12.04프로젝트 주제 선정 및 진행 계획 수립: 2025.11.15 ~ 2025.11.18프로젝트 배포: 2025.11.27팀 소통 및 일정 관리: Discord로 소통 | GitHub Issue로 진행 상황 파악
 |
 |
 |
 |
| 이경하 | 최수빈 | 조대원 | 김동영 |
팀장 | FE |
팀원 | FE |
팀원 | FE |
팀원 | FE |
|
인프라·초기 세팅 및 글로벌 스타일 변수 설정 Modal 시스템 및 내부컴포넌트 Scale, Filter, ImageInput 컴포넌트 내 프로필 페이지 |
Button, Input, SearchInput, textarea 공통 컴포넌트 SelectBox 기능 컴포넌트 랜딩, 회원가입, 로그인 페이지 |
DropDown, Badge, Chip, Profile 공통 컴포넌트 별점, Card 등 기능 컴포넌트 공통 레이아웃 및 헤더 컴포넌트 와인 목록 페이지, 와인 상세 페이지 |
Radio 공용 컴포넌트 |
- 프레임워크 :
Next.js 15 (App Router) - 라이브러리 :
React - 개발 언어 :
TypeScript - 스타일링 :
SCSS - 데이터 통신 :
Axios - 상태 관리 :
Zustand - UI 컴포넌트 :
React-Slick
- 패키지 매니저 :
npm - 빌드 엔진 :
Webpack (via Next.js)
- 린트 :
ESLint - 포맷팅 :
Prettier
- 프로덕션 배포 :
Vercel
- 코드 버전 & 이슈 관리 :
GitHub - 팀 소통 :
Discord - 문서화 :
Notion - 프로젝트 디자인 도안 :
Figma
- 이 프로젝트는 Next.js App Router 구조를 기준으로, 라우팅(app)과 UI 구성 요소(components)의 역할을 명확히 분리하여 설계했습니다.
- 공통적으로 재사용되는 UI와 도메인에 종속적인 UI를 구분하여, 공통 컴포넌트는 components/common, 도메인 컴포넌트는 components/features에서 관리함으로써 재사용성과 확장성을 동시에 고려했습니다.
- 스타일(styles), 타입(types), 유틸 함수(utils)를 각각 독립적인 폴더로 분리해 관심사를 명확히 나누고 유지보수 비용을 최소화했습니다.
- 페이지 단위에서는 화면 구성과 흐름에 집중하고, 비즈니스 로직과 UI 구현은 하위 컴포넌트로 위임하여 페이지의 책임을 명확하게 유지하도록 설계했습니다.
📁 src
├─ 📁 app # Next.js App Router 기반 라우팅
│ ├─ 📁 (auth) # 인증 관련 라우트 그룹 (signin, signup)
│ ├─ 📁 (home) # 메인 랜딩 페이지
│ ├─ 📁 (main) # 서비스 핵심 기능 영역
│ ├─ 📁 admin # 관리자 페이지
│ ├─ 📄 layout.tsx # 전역 레이아웃
│ └─ 📄 fonts.ts # 폰트 설정 관리
│
├─ 📁 assets # 정적 리소스 관리
│ ├─ 📁 icons # 공통 아이콘 이미지
│ ├─ 📁 images # 페이지별 이미지 리소스
│ └─ 📄 index.ts # 에셋 export 관리
│
├─ 📁 components # 재사용 가능한 컴포넌트 모음
│ ├─ 📁 common # 도메인과 무관한 공통 UI 컴포넌트
│ └─ 📁 features # 도메인(와인) 기반 기능 컴포넌트
│
├─ 📁 constants # 고정 값 및 옵션 상수 정의
├─ 📁 hooks # 커스텀 React 훅
├─ 📁 libs # 외부 라이브러리 설정 (axios 등)
├─ 📁 provider # Context Provider 관리
├─ 📁 styles # 전역 스타일 및 SCSS 설정
├─ 📁 types # TypeScript 타입 정의
└─ 📁 utils # 공통 유틸 함수 모음