Merge pull request #129 from codeit-13-3team/main

feature: product detail page 작업 추후 추가 작업 및 수정 필요

Author: TAEINJEONG

README.md

@@ -1,3 +1,214 @@
-# Mogazoa
+# ✨ MOGAZOA ✨
 
-다양한 분야의 상품에서두 상품을 선택해 비교하는 A/B 테스트 기능을 구현하는 웹 애플리케이션입니다.
+> ### 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 테스트)
+
+- 두 상품 중 하나를 선택하는 투표형 비교 인터페이스
+- 비교 결과에 따른 애니메이션과 승자 표시
+
+### 🛍️ 상품 상세 및 추가 기능
+
+- 무한 스크롤 기반 상품 목록
+- 상품 상세 페이지 → 플러스 버튼 → 상품 추가 모달
+
+### ⭐ 리뷰 및 별점 작성
+
+- 모달 기반 별점 + 텍스트 리뷰 시스템
+- 유저 기반 랭킹 정렬 지원
+
+### 🗂️ 마이페이지 & 팔로우
+
+- 내 정보 / 편집 / 내가 남긴 리뷰 확인 가능
+- 다른 유저 팔로우 / 팔로잉 모달
+
+### 🔗 공유 기능
+
+- 카카오톡 / 링크 공유로 사용자 외부 유입 연결
+
+
+<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)

next.config.ts

@@ -3,7 +3,7 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   /* config options here */
   images: {
-    domains: ['cdn.gukjenews.com', 'example.com'],
+    domains: ['cdn.gukjenews.com', 'example.com', 'cdn.pixabay.com', 'sprint-fe-project.s3.ap-northeast-2.amazonaws.com'],
   },
   reactStrictMode: true,
 };