Merge branch 'develop' into feature/QA

Author: huuitae

README.md

@@ -1,58 +1,148 @@
-# Wine
-(프로젝트 설명)
-
-## 목표
-- 목표: 프로젝트 완성
-
-## 팀원 정보 및 역할
-- 준열: 팀 리딩, 랜딩 페이지, 와인 상세 페이지
-- 휘태: 로그인, 회원가입, 리뷰 남기기/와인 등록하기 모달
-- 연수: 마이페이지(내가 등록한 와인), notion 문서화
-- 지권: 마이페이지(내가 쓴 후기)
-- 정훈: 와인 목록 페이지
-
-> [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki)
-
-## Core Time
-- 데일리 스크럼  
-  - 월요일: 오후 3시  
-  - 화요일 일요일: 오후 1시 30분 (20~30분 진행)
-- 집중 코딩 (모각코)  
-  - 9:00 ~ 18:00 (zep 활용)
- 
-> [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki)
-
-## Branch 전략
+# 🍷 WHYNE
+<div><img width="1800" height="600" alt="image" src="https://github.com/user-attachments/assets/cd2abace-5bfc-4243-ad41-b7944bbd4f45" /></div>
+
+
+<br>
+
+## 📖 프로젝트 소개
+> WHYNE은 사용자가 다양한 와인 리뷰를 확인하고, 구매 여부를 쉽게 판단할 수 있는 와인 리뷰 플랫폼입니다.
+
+
+<br>
+
+## 🎯 목표
+
+> 주어진 요구사항을 충족하는 것을 넘어, 경쟁력 있는 특별한 UI / UX를 도입하고, 사용자에게 최적의 와인 선택 경험을 제공하는 것
+
+<br>
+
+## 👥 팀 소개
+
+<span align="right">
+  
+  🔗 [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki)
+
+</span>
+
+<div align="center">
+  
+|팀장 |팀원 |팀원 |팀원 |
+|:---:|:---:|:---:|:---:|
+| <div style="border: 1px solid #ddd; border-radius: 10px; padding: 20px; background: white;"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Dove.png" width="80" height="80" alt="🕊️"/><br><b><a href="https://github.com/junye0l">김준열</a></b><br><img src="https://img.shields.io/badge/ISTJ-50C878?style=for-the-badge&logoColor=white" alt="ISTJ"/><br><code>FE</code></div> | <div style="border: 1px solid #ddd; border-radius: 10px; padding: 20px; background: white;"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Bat.png" width="80" height="80" alt="🦇"/><br><b><a href="https://github.com/wlrnjs">서지권</a></b><br><img src="https://img.shields.io/badge/INTJ-5C0091?style=for-the-badge&logoColor=white" alt="INTJ"/><br><code>FE</code></div> | <div style="border: 1px solid #ddd; border-radius: 10px; padding: 20px; background: white;"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Baby%20Chick.png" width="80" height="80" alt="🐣"/><br><b><a href="https://github.com/suuuuya">이연수</a></b><br><img src="https://img.shields.io/badge/INFP-9B59B6?style=for-the-badge&logoColor=white" alt="INFP"/><br><code>FE</code></div> | <div style="border: 1px solid #ddd; border-radius: 10px; padding: 20px; background: white;"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Black%20Cat.png" width="80" height="80" alt="🐈‍⬛"/><br><b><a href="https://github.com/Imhwitae">황휘태</a></b><br><img src="https://img.shields.io/badge/ISTJ-E74C3C?style=for-the-badge&logoColor=white" alt="ISTJ"/><br><code>FE</code></div> |
+
+</div>
+
+<br>
+
+## 🐜 역할 분담
+
+<span align="right">
+  
+  🔗 [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki)
+
+</span>
+
+| 팀원 | 역할 | 담당 기능 및 공통 컴포넌트 |
+| --- | --- | --- |
+| 김준열 | 팀장 | - 프로젝트 셋팅 <br> - 랜딩 페이지 <br> - 와인 상세 페이지 <br> - taste 컴포넌트 <br> - 리뷰 등록/수정 모달 <br> - 무한스크롤 <br> - 토스트 |
+| 서지권 | 팀원 | - 마이페이지(내가 쓴 후기)<br> - 헤더 컴포넌트 <br> - 드롭다운 컴포넌트<br> - chip 컴포넌트<br> - Flavor 컴포넌트<br> - 프로필 컴포넌트<br> - 검색 필터 컴포넌트<br> - 챗봇 |
+| 이연수 | 팀원 | - notion 문서화 및 배너 제작, 디자인 수정<br>- 아이콘 컴포넌트<br>- 버튼 컴포넌트<br>- 별점 컴포넌트<br>- 카드 컴포넌트<br>- 캐러셀 컴포넌트<br>- 마이페이지(내가 등록한 와인)<br>- 와인 목록 페이지(이 달의 추천 와인, 와인 항목)<br>- 스켈레톤 UI<br>- 폰트 최적화|
+| 황휘태 | 팀원 | - 로그인 페이지<br>- 회원가입 페이지<br>- next.js middleware<br>- 와인 등록/수정하기 모달<br>- 삭제하기 모달<br>- 인풋 컴포넌트<br>- 와인 타입 컴포넌트<br>- 에러 바운더리<br>- 이미지 최적화 |
+
+<br>
+
+## 📌 데일리 팀 스크럼
+> 원활한 소통을 위해 매일 진행하며, 의미 없는 시간이 되지 않도록 **노션 문서화**로 기록합니다.
+
+#### 🗓️ 시간표
+
+|      요일       |   시간    |
+| :-------------: | :-------: |
+|     월요일      | **15:00** |
+| 화요일 ~ 일요일 | **13:30** |
+
+<br>
+
+## ⏰ Core Time
+> 실시간 이슈 공유를 위해 ZEP 플랫폼을 활용한 온라인 모각코 진행
+
+#### 🕘 시간
+매일 09:00 ~ 18:00
+
+<br>
+
+## ⛓️ Branch 전략
+
+
+<span align="right">
+  
+  🔗 [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki/%EB%B8%8C%EB%9E%9C%EC%B9%98-%EC%BB%A8%EB%B2%A4%EC%85%98)
+
+</span>
+
 - `main` → 배포
 - `develop` → 통합 브랜치
 - `feature/*`, `design/*`, `chore/*` → 작업 브랜치 → PR → develop → main
 
-> [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki/%EB%B8%8C%EB%9E%9C%EC%B9%98-%EC%BB%A8%EB%B2%A4%EC%85%98)
+<br>
+
+## 🧩 기술 스택
+
+<span align="right">
+  
+  🔗 [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D)
+
+</span>
+
+
+| 구분 | 사용 기술 | 비고 |
+|------|------------|------|
+| **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 | 버전 관리 및 협업 툴 |
 
-## 기술 스택
-- Next.js, React, TypeScript
-- Tailwind CSS
-- Storybook
-- husky + lint-staged
-- Vercel (배포)
+<br>
 
-> [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D)
+## 🤖 깃허브 액션
 
-## 깃허브 액션
-- Vercel 배포  
-- Chromatic으로 Storybook 배포 (develop 기준)  
+<span align="right">
+  
+  🔗 [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki/%EA%B9%83%ED%97%88%EB%B8%8C-%EC%95%A1%EC%85%98)
 
-> [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki/%EA%B9%83%ED%97%88%EB%B8%8C-%EC%95%A1%EC%85%98)
+</span>
+
+- Vercel 배포
+- Chromatic으로 Storybook 배포 (develop 기준)
+
+<br>
+
+## 🗒️ 프로젝트 관리
+
+<span align="right">
+  
+  🔗 [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B4%80%EB%A6%AC)
+
+</span>
 
-## 프로젝트 관리
 - README: 프로젝트 개요 / 기술 스택 / 실행 방법
 - Wiki: 세부 규칙, 가이드 문서, 브랜치 룰
 - Notion: 회의록, 멘토링 피드백, 참고 자료
 - GitHub Project: 일정 / TODO 관리
 
-> [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B4%80%EB%A6%AC)
+<br>
+
+## ⚙️ 실행 방법
 
-## 실행 방법
 ```bash
 # 패키지 설치
 npm install
@@ -67,7 +157,15 @@ npm run storybook
 NEXT_PUBLIC_API_URL=http://localhost:4000
 ```
 
-## 폴더 구조
+<br>
+
+## 📂 폴더 구조
+
+<span align="right">
+  
+  🔗 [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki/%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0)
+
+</span>
 
 ```bash
 src
@@ -81,9 +179,12 @@ src
  ┣ types        # 전역 타입 정의 (TypeScript 인터페이스, 타입)
  ┗ utils        # 공통 유틸리티 함수
 ```
-> [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki/%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0)
 
-## 바로가기
-- [배포 바로가기](https://google.com/)
-- [스토리북 바로가기](https://68d3998e0b054d1207706cbb-tzevsxkvcq.chromatic.com/?path=/docs/my-profile-accountitem--docs)
-- [Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki)
+<br>
+
+## 🔎 바로가기
+
+
+- [🚀 배포 바로가기](https://wine-phi-olive.vercel.app/)
+- [✨ 스토리북 바로가기](https://68d3998e0b054d1207706cbb-rwsgeadjmd.chromatic.com/?path=/story/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%B8%ED%8C%85-%ED%8F%B0%ED%8A%B8-%EC%BB%AC%EB%9F%AC--font-color)
+- [📖 Wiki 바로가기](https://github.com/Team-3-2/Wine/wiki)

src/app/register/[id]/page.tsx

@@ -42,7 +42,7 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
   return (
     <div
       className={cn(
-        "bg-gray-200 bg-[url('/images/common/bg-main.png')] bg-cover bg-no-repeat px-[16px] py-[35px]",
+        "flex-center min-h-screen bg-gray-200 bg-[url('/images/common/bg-main.png')] bg-cover bg-no-repeat px-[16px] py-[35px]",
         "tablet:py-[70px]",
         "pc:py-[70px]"
       )}

src/app/reviews/[reviewId]/edit/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import { useRouter, useParams } from "next/navigation";
 import { useEffect } from "react";
 import ReviewFormClient from "@/app/wines/[id]/_components/wine-review-form/review-form-client";
@@ -16,8 +17,20 @@ export default function EditPage() {
   if (!reviewId) return null;
 
   return (
-    <main className="min-h-screen bg-gray-100 bg-[url('/images/common/bg-main.png')] bg-cover bg-no-repeat">
-      <section className="container mx-auto flex max-w-[460px] flex-col gap-10 py-12 pt-24 tablet:max-w-[740px] pc:max-w-[1020px]">
+    <main
+      className={cn(
+        "flex-center min-h-screen bg-gray-200 bg-[url('/images/common/bg-main.png')] bg-cover bg-no-repeat py-[35px]",
+        "tablet:py-[70px]",
+        "pc:py-[70px]"
+      )}
+    >
+      <section
+        className={cn(
+          "container mt-[60px] flex flex-col gap-10 rounded-2xl bg-white px-[16px] py-8",
+          "tablet:max-w-[480px]",
+          "pc:max-w-[480px]"
+        )}
+      >
         <h1 className="text-heading-lg">리뷰 수정</h1>
         <ReviewFormClient
           reviewId={reviewId}

src/app/reviews/[reviewId]/write/page.tsx

@@ -19,7 +19,7 @@ export default function WritePage() {
   return (
     <main
       className={cn(
-        "min-h-screen bg-gray-100 bg-[url('/images/common/bg-main.png')] bg-cover bg-no-repeat py-[35px]",
+        "flex-center min-h-screen bg-gray-200 bg-[url('/images/common/bg-main.png')] bg-cover bg-no-repeat py-[35px]",
         "tablet:py-[70px]",
         "pc:py-[70px]"
       )}

src/app/wines/[id]/_components/wine-detail/wine-detail-content.tsx

@@ -40,12 +40,10 @@ const WineDetailContent = ({ wineId }: WineDetailContentProps) => {
 
   return (
     <main className="min-h-screen bg-white">
-      {/* 헤더 */}
       <section className="rounded-b-none bg-[url('/images/wines/bg-recommended.png')] bg-cover bg-repeat pt-[60px] tablet:rounded-b-none tablet:pt-[70px] pc:rounded-b-[88px] pc:pt-[70px]">
         <WineHeader wine={wine} />
       </section>
 
-      {/* 맛/향 섹션 */}
       <section className="mb-0 mt-12 bg-white tablet:mb-0 tablet:mt-16 pc:mb-12 pc:mt-16">
         <div className="container">
           <div className="flex flex-col gap-12 tablet:gap-20 pc:flex-row pc:gap-32">
@@ -66,12 +64,10 @@ const WineDetailContent = ({ wineId }: WineDetailContentProps) => {
         </div>
       </section>
 
-      {/* 구분선 */}
       <div className="container">
         <hr className="mt-[-5px] border-t border-gray-300 tablet:mt-0 pc:mt-0" />
       </div>
 
-      {/* 리뷰 섹션 */}
       <section className="bg-white pb-12 pt-14 tablet:pt-14 pc:pt-14">
         <div className="container">
           <ReviewSection

src/app/wines/[id]/_components/wine-review-form/review-form.tsx

@@ -38,7 +38,6 @@ export default function ReviewForm({
     image: wineImage,
   } = wine;
 
-  // 상태 관리
   const [rating, setRating] = useState(0);
   const [content, setContent] = useState("");
   const [selectedAromas, setSelectedAromas] = useState<AromaKey[]>([]);
@@ -68,7 +67,6 @@ export default function ReviewForm({
     }
   }, [initialData]);
 
-  // 맛 변경 핸들러
   const handleTasteChange = (index: number, newLevel: GaugeLevel) => {
     const newTastes = [...tastes];
     newTastes[index].data = newLevel;
@@ -114,7 +112,6 @@ export default function ReviewForm({
 
     if (hasError) return;
 
-    // 데이터 생성
     const reviewData: ReviewBase = {
       rating,
       lightBold: tastes[0].data,
@@ -140,15 +137,12 @@ export default function ReviewForm({
         className
       )}
     >
-      {/* 모든 컨텐츠 */}
       <div className="flex flex-col gap-8">
-        {/* 와인 정보 */}
         <div>
           <WineInfo name={wineName} region={wineRegion} image={wineImage} />
           <div className="mt-4 border-t border-gray-300" />
         </div>
 
-        {/* 별점 선택 */}
         <div className="flex items-center gap-4">
           <label className="text-body-sm text-gray-500">별점 선택</label>
           <RatingInput
@@ -158,7 +152,6 @@ export default function ReviewForm({
           />
         </div>
 
-        {/* 후기 입력 */}
         <div>
           <textarea
             value={content}
@@ -189,7 +182,6 @@ export default function ReviewForm({
           </div>
         </div>
 
-        {/* 와인의 맛 */}
         <div>
           <label className="mb-4 block text-heading-md">
             와인의 맛은 어떤가요?
@@ -201,7 +193,6 @@ export default function ReviewForm({
           />
         </div>
 
-        {/* 향 선택 */}
         <div className="tablet:pb-12 pc:pb-12">
           <label className="mb-4 block text-heading-md">
             기억에 남는 향이 있나요?
@@ -219,7 +210,6 @@ export default function ReviewForm({
           </div>
         </div>
 
-        {/* 버튼 */}
         <PageModalBtnWrapper>
           <Button
             onClick={handleSubmit}