코드잇에서 주관하는 와인 관리 애플리케이션 프로젝트입니다.
🧑💻 프로젝트 소개
사용자가 다양한 와인을 조회하고, 새로운 와인을 등록할 수 있도록 하며 와인의 평균 평점과 최신 리뷰를 확인할 수 있는 기능을 제공합니다.
🗓️ 개발 기간
8 / 29 (목) ~ 9 / 19 (목)
👨👨👦👦 개발자 소개
-
김종화 @KJongHwa : 와인 상세 페이지
-
이형준 @leehj322 : 랜딩 페이지 / 팀장 👑
-
손재헌 @Jaeheon96 : 로그인, 회원가입 페이지
-
장혁수 @hyeoksuJ : 마이 페이지
-
정인재 @Injaeeee : 와인 목록 페이지
📁 프로젝트 구조
📁wine/
│
├── 📁public/
│ ├── 📁images/ # 이미지 파일 폴더
│ └── 📁ic_wine.svg ...
│
├── 📁src/
│ ├── 📁components/ # 재사용 가능한 컴포넌트
│ │ ├── 📁@shared/ # 공통 컴포넌트
│ │ │ ├── GlobalNavBar.tsx
│ │ │ └── Modal.tsx
│ │ ├── 📁auth/ # 로그인, 회원가입 페이지에 들어갈 컴포넌트 모음
│ │ │ ├── AuthLabel.tsx
│ │ │ └── GoogleOauthButton.tsx
│ │ └── 📁wines/ # 와인 목록/상세 페이지에 들어갈 컴포넌트 모음
│ │ ├── AddWine.tsx
│ │ └── WineItemList.tsx
│ │
│ ├── 📁pages/ # Next.js page 라우팅
│ │ └── 📁myprofile/
│ │ └── index.tsx
│ │ └── 📁oauth/
│ │ └── kakao.tsx
│ │ └── 📁signin/
│ │ └── index.tsx
│ │ └── 📁signup/
│ │ └── index.tsx
│ │ └── 📁wines/
│ │ └── [id].tsx
│ │ └── index.tsx
│ │ └── index.tsx
│ │ └── _app.tsx
│ │
│ ├── 📁libs/ # 라이브러리 관련된 세팅 및 함수들 정리하는 폴더
│ │ └── 📁axios/ # axios 관련 세팅 및 api 요청 함수
│ │ └── axiosInstance.ts
│ │ └── 📁auth/
│ │ └── 📁image/
│ │ └── 📁review/
│ │ └── 📁user/
│ │ └── 📁wine/
│ │
│ ├── 📁contexts/ # 전역 상태 관리
│ │
│ ├── 📁hooks/ # 커스텀 React 훅
│ │
│ ├── 📁types/ # 타입 폴더 (DTO 혹은 전역적으로 사용되는 type을 미리 정의)
│ │ # 컴포넌트 props의 경우에는 해당 컴포넌트 위치에 정의
│ │
│ ├── 📁styles/ # 스타일 관련 파일 모음
│ │ └── global.css
│ │
│ ├── 📁constants/ # 상수 폴더
│ │ └── mediaQueryBreakPoint.ts
│ │
│ └── 📁utils/ # 유틸리티 폴더
│
├─ .gitignore
├─ .env.local # 각자 환경에서 별도 생성 필요
├─ .eslintrc.json
├─ .prettierrc.json
├─ next.confing.mjs
├─ tailwind.config.ts
├─ tsconfig.json
│
...생략
💻 개발 환경
| OS | IDE | Version Control | Package Manager | deploy | Community |
|---|---|---|---|---|---|
  |
  |
  |
 |
 |
   |
⚒ 기술 스택
👨🏫 주요 기능
 |
 |
 |
|---|---|---|
| 랜딩 페이지 | 와인 목록 페이지 | 와인 상세 페이지 |
 |
 |
 |
|---|---|---|
| 로그인 페이지 | 회원가입 페이지 | 마이 페이지 |
페이지의 기초적인 기능으로 페이지에서 자체적으로 제공하는 페이지에서 회원가입 및 구글, 카카오로도 로그인을 할 수 있습니다. 와인 상세 페이지와 마이페이지는 로그인을 한 사용자들만 접속할 수 있습니다.
사용자는 모든 와인의 목록을 확인할 수 있으며, 상단카드에서 달마다 평점이 높은 와인들을 추천받을수 있습니다.
와인의 가격대와 평점 및 타입(레드, 화이트, 스파클링 등)으로 취향에 맞는 와인을 필터링할 수 있으며, 원하는 와인의 이름을 직접 검색할 수 있습니다.
사용자는 새로운 와인을 추가할 수 있으며, 이름, 가격, 원산지, 타입 등의 정보를 입력해야 합니다.
각 와인의 이름, 가격, 평균 평점, 최신 리뷰 등의 정보를 제공합니다.
사용자는 와인 상세에서 리뷰를 직접 작성할 수 있으며 별점, 와인의 맛 (바디감, 타닌, 당도, 산미 등), 향등의 정보를 남겨 공유할 수 있습니다.
사용자가 작성했던 후기들이나 등록했던 와인들의 리스트들을 한 눈에 보기 쉽도록 정보들을 제공하며 수정할 수 있습니다. 또한 회원가입할때 생성한 닉네임을 변경할 수 있습니다.
git clone https://github.com/Codeit-FE08-Part3-Team6/wine.git cd wine
프로젝트에서 사용하는 패키지들을 설치합니다.
npm install
다음 명령어를 실행하여 로컬 개발 환경에서 프로젝트를 실행할 수 있습니다.
npm run dev
이후 브라우저에서 http://localhost:3000 으로 접속하여 개발 중인 웹 애플리케이션을 확인할 수 있습니다.
프로덕션 환경에서 사용하기 위해 빌드할 때는 아래 명령어를 사용합니다.
npm run build
그 후, 아래 명령어로 빌드된 파일을 실제로 실행합니다.
npm start
이 프로젝트는 Vercel을 사용하여 배포할 수 있습니다.
GitHub와 연동된 Vercel 계정을 통해 자동으로 배포되며, 코드를 push하면 자동으로 배포 프로세스가 진행됩니다.