Skip to content

Commit 8cfabfc

Browse files
626-ju626-ju
authored
Merge pull request #141 from codeit-part3-7/626-ju-patch-1
Update README.md
2 parents ccadfdc + 63eec3e commit 8cfabfc

File tree

1 file changed

+172
-24
lines changed

1 file changed

+172
-24
lines changed

‎README.md‎

Lines changed: 172 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,188 @@
1-
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
1+
# 🍷나만의 와인을 찾는 방법, 와인파인더
22

3-
## Getting Started
3+
<img width="1200" height="630" alt="og-image" src="https://github.com/user-attachments/assets/ccf080ed-5bc4-44ca-83cd-fa27f56e58bd" />
44

5-
First, run the development server:
65

7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
6+
당신의 취향에 딱 맞는 와인을 찾고, 다양한 사람들과 와인 경험을 나눠보세요! <br/>
7+
와인파인더는 와인에 대한 정보와 리뷰를 등록하고 탐색할 수 있는 사용자 참여형 와인 커뮤니티입니다.
8+
9+
10+
[👉 서비스 바로가기](https://whyne-fe.vercel.app)
11+
12+
<br/>
13+
14+
# 프로젝트 소개
15+
16+
**와인**은 와인에 대한 다양한 정보를 탐색하고, <br/>
17+
직접 리뷰를 작성하고 공유할 수 있는 와인 정보 기반 커뮤니티 플랫폼입니다. <br/>
18+
19+
로그인을 하면 자신만의 리뷰를 남기거나 새로운 와인을 등록할 수도 있어요!
20+
21+
22+
플레이버 슬라이더, 향미 태그, 그리고 AI 챗봇 추천 기능까지 더해 <br/>
23+
당신의 취향에 딱 맞는 와인을 쉽게 찾을 수 있도록 도와줍니다.
24+
25+
<br/>
26+
27+
# 팀원 소개
28+
29+
<img width="1241" height="420" alt="image" src="https://github.com/user-attachments/assets/ee94a322-e576-403f-804e-f871d2d9bbcb" />
30+
31+
32+
33+
34+
35+
# ✨ 주요 기능
36+
37+
#### 🔍 와인 탐색 & 검색 (AI 챗봇 추천 포함)<br/>
38+
#### 📝 와인 정보 및 리뷰 등록/수정/삭제 (CRUD)<br/>
39+
#### 💬 와인별 리뷰 등록 기능 (텍스트 + 향미 정보)<br/>
40+
#### 🔍 필터·검색·무한스크롤 등 편리한 탐색 기능 제공<br/>
41+
#### 🙋 로그인/회원가입 및 사용자 인증 기반 기능 제공<br/>
42+
43+
<br/>
44+
45+
46+
# 1. 개발 환경
47+
48+
| 항목 | 사용 기술 |
49+
|--------------|-------------------------------|
50+
| 개발 언어 | Typescript, HTML, CSS |
51+
| 코드 에디터 | Visual Studio Code (VSC) |
52+
| 프레임워크 | Next.js 13 |
53+
| 포매터 | ESLint, Prettier |
54+
| 번들링 | Webpack |
55+
| 형상 관리 | Git |
56+
| 스타일링 | Tailwind 3.4 + shadcn/ui |
57+
| 배포 | Vercel |
58+
| 라우팅 | React Router |
59+
| 데이터 패칭 | axios |
60+
| 상태관리 | Zustand, TanStack Query |
61+
62+
<br/>
63+
<br/>
64+
65+
# 2. 채택한 개발 기술과 브랜치 전략
66+
67+
### Next.js 13, Tailwind
68+
- Next.js 13
69+
- 파일 기반 라우팅 구조를 사용해 컴포넌트와 URL 경로가 1:1로 매핑되는 직관적인 구조를 설계할 수 있었습니다.
70+
- getServerSideProps, getStaticProps 등을 통해 페이지 별로 SSR과 SSG를 유연하게 선택할 수 있었습니다.
71+
- pages/api 디렉토리를 통한 API 라우트 작성이 가능해<br/> 인증과정에서 돌아오는 응답에 setCookie를 달아주는 BFF를 추가할 수 있었습니다.
72+
73+
- Tailwind + shadcn/ui
74+
- 유틸리티 기반의 빠른 스타일링과 shadcn/ui의 일관된 컴포넌트 사용해, 빠른 MVP 개발이 가능했습니다.
75+
- 접근성과 디자인 일관성을 지키면서도 cn함수를 통해 유연한 UI 커스터마이징이 가능했습니다.
76+
- Next.js와의 궁합이 좋아 SSR 환경에서도 안정적으로 작동하며,<br/>
77+
실제 사용된 클래스만 빌드 시점에 css로 생성되기 때문에 더 작은 번들로 빠르게 렌더링이 가능했습니다.
78+
79+
### Zustand + React Query
80+
- Zustand를 통해 전역 사용자 상태, 필터 정보 등 페이지 간 공유해야 하는 상태를 간편하게 관리할 수 있었습니다.
81+
82+
- React Query를 통해 캐싱, 에러 처리, 로딩 상태 관리 등 API 통신 최적화가 가능했습니다.
83+
84+
### React Hook Form + zod
85+
86+
- React Hook Form을 사용하여 가볍고 성능 좋은 폼 상태 관리를 구현할 수 있었고, <br/>Zod와의 연동을 통해 스키마 기반 유효성 검사를 적용했습니다.
87+
88+
- 인풋 컴포넌트에 에러 메시지를 바로 표시하고, 사용자 피드백을 직관적으로 제공할 수 있었습니다
89+
90+
### eslint, prettier
91+
- 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
92+
- 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
93+
- 예외 규칙은 팀원들과 협의 후 사용했습니다.
94+
95+
<br>
96+
97+
### 브랜치 전략
98+
99+
| 이름 | 역할 |
100+
|---|---|
101+
|main |배포(프로덕션)용 코드. 항상 안정된 상태 유지 |
102+
|dev | 개발용 통합 브랜치. 여러 기능이 합쳐지는 곳 |
103+
|feature/xxx | 새로운 기능, 작업 단위별 브랜치 |
104+
|fix/xxx | 버그 수정 브랜치 |
105+
|refactor/xxx | 코드 개선 브랜치 |
106+
107+
108+
<br/>
109+
<br/>
110+
111+
# 3. 프로젝트 구조
112+
15113
```
114+
📦src/
115+
├── assets/
116+
├── pages/
117+
│ ├── _app.tsx // 전역 설정 (Providers, 스타일)
118+
│ ├── _document.tsx // HTML 문서 구조
119+
│ ├── index.tsx // 홈페이지
120+
| ├── wines/ // 와인 목록 및 상세 페이지
121+
| ├── my-profile/ // 마이페이지
122+
| ├── signin/ // 로그인 페이지
123+
| ├── signup/ // 회원가입 페이지
124+
| ├── oatuh/ // 소셜 로그인
125+
│ └── api/ // API Routes
126+
├── components/
127+
│ ├── ui/ // shadcn/ui 컴포넌트
128+
│ ├── common/ // 공통 컴포넌트
129+
│ └── ...
130+
├── lib/
131+
│ ├── utils.ts // 유틸리티 함수
132+
│ ├── api.ts // API 클라이언트 (axios)
133+
│ └── auth.ts // 인증 관련
134+
├── stores/ // Zustand 스토어
135+
├── hooks/ // 커스텀 훅 (TanStack Query)
136+
├── styles/
137+
│ └── globals.css // Tailwind CSS
138+
└── types/ // TypeScript 타입 정의
139+
```
140+
141+
<br/>
142+
<br/>
143+
144+
# 4. 페이지별 기능
145+
146+
## [초기화면]
147+
148+
- 초기 진입 시 스플래쉬 이미지를 넣어 gnb가 업데이트 되는 모습을 가렸습니다.
149+
- framer motion을 통해 애니메이션을 적용해 사용자에게 부드러운 첫 인상을 제공했습니다.
150+
151+
gif추가
152+
16153

17-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
154+
## [로그인/회원가입]
18155

19-
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
156+
- 로그인, 회원가입이 가능한 공간입니다.
157+
- 미리 스타일이 적용된 인풋과 rhf를 연결해 유효성 검사를 수행하고 유저에게 즉각적인 피드백을 줍니다.
158+
- 로그인 성공 시 setCookie헤더가 달린 응답을 받아 유저의 엑세스토큰과 리프레쉬 토큰을 쿠키에 저장합니다.
159+
- 카카오 소셜로그인을 지원합니다.
20160

21-
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
161+
gif 추가
22162

23-
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
163+
## [마이 프로필 페이지]
24164

25-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
165+
- 프로필 이미지와 닉네임을 변경할 수 있는 공간입니다.
166+
- 본인이 작성한 리뷰와 와인을 확인할 수 있습니다.
167+
- 해당 페이지에서 본인이 작성한 리뷰와 와인들을 수정, 삭제할 수 있습니다.
26168

27-
## Learn More
169+
gif추가
28170

29-
To learn more about Next.js, take a look at the following resources:
171+
## [와인 목록 페이지]
30172

31-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
32-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
173+
- 등록된 와인을 조회할 수 있는 공간입니다.
174+
- 검색 바와 필터를 통해 원하는 조건의 와인을 찾을 수 있습니다.
175+
- 상단의 추천와인을 통해 평점이 높은 와인을 추천받을 수 있습니다.
176+
- 와인 등록하기 버튼을 통해 새로운 와인을 등록할 수 있습니다.
177+
- 와인 카드를 클릭해 와인 상세페이지로 이동할 수 있습니다.
33178

34-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
179+
gif추가
35180

36-
## Deploy on Vercel
181+
## [와인 상세 페이지]
37182

38-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
183+
- 와인의 기본 정보와 해당 와인에 달린 리뷰들을 확인할 수 있는 공간입니다.
184+
- 평균 별점이 표시되고, 리뷰하기 버튼을 통해 리뷰를 새롭게 등록할 수 있습니다.
185+
- 관심있는 리뷰는 열어서 상세하게 볼 수 있고, 좋아요를 할 수 있습니다.
186+
- 본인이 작성한 리뷰는 수정 및 삭제가 가능합니다.
39187

40-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
188+
git추가

0 commit comments

Comments
 (0)