Merge pull request #128 from codeit-13-3team/juha399-patch-2

Update README.md

Author: TAEINJEONG

README.md

@@ -1,70 +1,214 @@
-**MOGAZOA**는 다양한 분야의 상품을 A/B 테스트 방식으로 비교하고, 사용자 리뷰 및 별점을 통해 데이터를 시각화하는 웹 기반 비교 플랫폼입니다.  
+# ✨ MOGAZOA ✨
 
+> ### Would you compare with us?
+>
+> ![선호하는 상품의 리뷰와 데이터를 통해 인사이트를 얻을 수 있습니다  리뷰 및 랭킹 기능으로 다른 사람들의 선택을 확인해 보세요!](https://github.com/user-attachments/assets/47b2a33c-f7fb-4f7b-b500-2b618680a31d)
+
+## 프로젝트 소개
+
+### A/B 테스트 기반 상품 비교 플랫폼 사이트, 모가조아(MOGAZOA)
+
+－ “ 다양한 상품 뿐만 아니라 음악, 식당, 여행지, 전자기기, 강의 등 비교가능한 사이트입니다”
+
+－ “A/B 테스트 형식으로 비교하여, 사용자 맞춤형 선택을 돕는 **데이터 기반 상품비교 플랫폼**입니다”
+
+－“**사용자 친화성** , **데이터 공유** 서비스, **UI/UX 흐름 등**을 고려하였습니다“
+<br>
+
+---
+## 🧭 배포 주소
+
+👉 [https://mogazoa.vercel.app](https://mogazoa.vercel.app/)
+
+
+
+## 🗂️ 프로젝트 일정 및 문서 관리
+
+👉 [Notion_Project Plan & Resources](https://scientific-purchase-29c.notion.site/1d7bbd03168181859b0afb9b63e0927b)
+ 
+
+---
+## 🎯 프로젝트 지향점 🎯
+
+### 프로젝트 목표
+- 다양한 상품에 대해 **사용자 참여형 A/B 테스트** 기능 제공
+- **Zustand 전역 상태관리** 및 **무한 스크롤**, **공통 컴포넌트 설계** 등 실무 유사 구조 경험
+
+### **사용자 경험성 고려**
+
+- 베타 테스트를 통한 **검색 / 비교 / 리뷰 / 랭킹**까지 이어지는 UX 흐름 설계
+- 단순 기능 개발보다 사용자 경험성 고려 (베타 테스트를 통한 **UI 흐름**, **페이지 이탈 경로 체크** 등)
+
+### **소프트스킬 강화**
+
+- **마일스톤**을 통한 프로젝트 일정 관리 및 정리
+- **데일리스크럼**과 **KPT회고**, PR 리뷰 등 협업 툴 활용
+
+### **문제 해결 능력 향상**
+
+
+- KPT 회고를 통한 문제해결 중심의 사고/능력 향상 
+- PR 코드 리뷰 및 피드백 반영
+- 의견 반영 과정에서 문제 해결 능력 향상
+ 
+---
 
 
 ## ✨ 주요 기능 (Features)
 
--  **회원가입 및 로그인**  
-  일반 로그인 / 소셜 로그인(카카오) / 간편 회원가입 기능 제공
+### 🧑‍💻 회원가입 및 로그인
 
--  **상품 비교 기능 (A/B 테스트 방식)**  
-  두 상품 중 하나를 선택하는 비교 시스템  
-  비교 결과에 따라 승패가 시각적으로 구분되는 애니메이션 효과
+- 일반 로그인 / 소셜 로그인(카카오)
+- 간편 회원가입 (닉네임 기반)
 
--  **상품 상세 페이지 및 추가**  
-  무한 스크롤 기반 상품 목록  
-  상품 별 상세 페이지 + 상품 추가/편집/삭제 기능
+### 🔍 상품 비교 (A/B 테스트)
 
--  **리뷰 및 별점 작성**  
-  리뷰 모달을 통한 사용자 의견 수집  
-  별점 기반 랭킹 시스템 포함
+- 두 상품 중 하나를 선택하는 투표형 비교 인터페이스
+- 비교 결과에 따른 애니메이션과 승자 표시
 
--  **검색 & 정렬 기능**  
-  키워드 기반 검색 기능 구현  
-  상품명 기준 정렬 필터
+### 🛍️ 상품 상세 및 추가 기능
 
--  **마이페이지 & 유저 팔로우**  
-  내 프로필 관리 및 다른 유저 팔로우/팔로잉 모달 기능
+- 무한 스크롤 기반 상품 목록
+- 상품 상세 페이지 → 플러스 버튼 → 상품 추가 모달
 
+### ⭐ 리뷰 및 별점 작성
 
+- 모달 기반 별점 + 텍스트 리뷰 시스템
+- 유저 기반 랭킹 정렬 지원
 
-## 🛠️ 기술 스택 (Tech Stack)
+### 🗂️ 마이페이지 & 팔로우
 
-| 영역         | 툴 |
-|--------------|-----------|
-| **Frontend** | Next.js 13 / TypeScript / React Query / Zustand / Tailwind |
-| **Auth**     | localStorage / Kakao OAuth |
-| **Deploy**   | Vercel |
-| **Design**   | Figma / Notion|
-| **기타**     | ESLint / Prettier / GitHub Actions |
+- 내 정보 / 편집 / 내가 남긴 리뷰 확인 가능
+- 다른 유저 팔로우 / 팔로잉 모달
 
+### 🔗 공유 기능
 
-## 📁 폴더 구조
+- 카카오톡 / 링크 공유로 사용자 외부 유입 연결
 
-/src
-├── api/         
-├── assets/       
-├── components/   
-├── context/    
-├── hooks/          
-├── lib/         
-├── pages/        
-├── stores/        
-├── styles/      
-├── types/         
-
-기타 루트 파일
-├── .eslintrc.js / .prettierrc      
-├── next.config.ts / tsconfig.json  
-├── tailwind.config.js             
-├── build.sh                  
-
-## 팀원 소개
-
-정태인: 	프로젝트 초기 세팅, 홈, 배포 등
-신주하:	공통 헤더/검색창, UI 흐름 설계 등
-정종우:	회원가입, API 연동, 소셜 로그인 등
-임지혜:	공통 모달창, 이미지 업로더, 리뷰 시스템 등
-황준호:	공통 드롭다운, 유저 관련 모달 등
-이재혁:	상품 상세 페이지, 버튼 컴포넌트 등 UI 구현 등
 
+<br>
+
+---
+
+## 🧠 유저 플로우 
+
+![스크린샷 2025-05-23 143931](https://github.com/user-attachments/assets/5d5f3f4a-e7b2-4193-bdce-8c13a98b14e6)👇🏼
+
+
+![스크린샷 2025-05-23 143917](https://github.com/user-attachments/assets/03005828-f65c-4b24-8688-85393e97f3ad)👉🏼
+
+
+---
+
+## 🛠️ 기술 스택 (Tech Stack) 
+
+### 💻 Frontend
+
+<img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white"> <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white"> <img src="https://img.shields.io/badge/React_Query-FF4154?style=for-the-badge&logo=reactquery&logoColor=white"> <img src="https://img.shields.io/badge/Zustand-000000?style=for-the-badge&logo=Zustand&logoColor=white"> <img src="https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white">
+
+### 🔐 Auth
+
+<img src="https://img.shields.io/badge/localStorage-cccccc?style=for-the-badge"> <img src="https://img.shields.io/badge/Kakao_OAuth-FFCD00?style=for-the-badge&logo=KakaoTalk&logoColor=000000">
+
+### 🚀 Deploy
+
+<img src="https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white">
+
+### 🎨 Design
+
+<img src="https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white"> <img src="https://img.shields.io/badge/Notion-000000?style=for-the-badge&logo=notion&logoColor=white">
+
+### 🧰 Tooling
+
+<img src="https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white"> <img src="https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=white">
+
+
+<br>
+
+--- 
+
+## 🧩 폴더 구조 (Folder Structure)
+
+```bash
+/src
+├── api/
+├── assets/
+├── components/
+├── context/
+├── hooks/
+├── lib/
+├── pages/
+├── stores/
+├── styles/
+├── types/
+
+# etc
+├── .eslintrc.js / .prettierrc
+├── next.config.ts / tsconfig.json
+├── tailwind.config.js
+├── build.sh
+
+```
+
+---
+
+<h2>👍 팀원 소개</h2>
+
+<table>
+  <tr>
+    <td align="center">
+      <b>정태인 (팀장)</b><br />
+      프로젝트 초기 세팅<br />
+      홈 화면 / 배포 / 발표<br />
+      팀미팅 리드 및 R&R 분배<br />
+      (팀 흐름 중심 설계)
+    </td>
+    <td align="center">
+      <b>신주하</b><br />
+      헤더 / 검색창 등 공통 UI<br />
+      404 페이지 / 회의 기록<br />
+      발표 자료 및 영상, PPT 제작<br />
+      (템플릿 및 문서 중심 제작)
+    </td>
+     </tr>
+     <tr>
+    <td align="center">
+      <b>정종우</b><br />
+      회원가입 페이지 <br /> SNS API 연동<br />
+      담당자와 API 커뮤니케이션<br />
+      (백엔드 데이터 연계 담당)
+    </td>
+    <td align="center">
+      <b>임지혜</b><br />
+      공통 모달창<br /> 이미지 업로더<br />
+      텍스트 박스 / 리뷰 기능<br />
+      (모달창, 공통 컴포넌트 담당)
+    </td>
+    </tr>
+    <tr>
+    <td align="center">
+      <b>황준호</b><br />
+      드롭다운 창 / 공통 UI<br />
+      유저 편집 및 모달창 담당<br />
+      (모달 및 드롭다운 담당)
+    </td>
+    <td align="center">
+      <b>이재혁</b><br />
+      상품 상세 페이지<br />
+      UI 컴포넌트 구현<br />
+      (버튼 중심 기능 담당)
+    </td>
+  </tr>
+</table>
+
+<br>
+
+---
+
+## 📝 라이센스
+
+**본 프로젝트는 상업적 사용이 허가되지 않습니다.**
+
+<br>
+
+> Designed & Engineered by Team3 (2025/04~2025/05)