🌱 G2G

지역 생산자와 소비자를 바로 잇는 직거래 플랫폼

---

배포 주소

➡️ Production 배포 URL: https://frontend-g2g.vercel.app/

서비스 소개

중간 유통 단계를 줄여 생산자는 더 높은 수익을, 소비자는 더 신선한 상품을 받을 수 있어 모두에게 이득이 되는 구조를 목표로 합니다.

---

🔍 주요 기능

🌿 1. 상품 탐색 & 검색

• 카테고리별 상품 탐색

• 키워드 기반 검색

• 인기 상품 / 최신 상품 목록 제공

🍎 2. 상품 상세 정보 제공

• 옵션 선택

• 가격, 원산지, 상세 설명

• 실제 구매 후기 및 이미지

🧑‍🌾 3. 마이페이지

• 주문 내역 조회

• 찜한 상품 목록

• 내가 작성한 후기

• 장바구니 관리

🔐 4. 회원가입 & 인증

• 이메일 인증 기반 회원가입

• 로그인 / 로그아웃

• 토큰 기반 인증 처리

🎯 서비스 목적

• 지역 생산자의 판로 확대

• 소비자에게 신선·고품질 상품 제공

• 유통 비용 감소로 가격 경쟁력 확보

• 지역 경제 활성화 기여

---

메인, 검색 페이지

상세페이지

회원가입 및 로그인 페이지

마이페이지(주문, 찜, 후기, 장바구니)

시연 영상

2025-11-20.10.online-video-cutter.com.online-video-cutter.com.mp4

개발 서버 실행 방법

패키지 설치

npm install

실행

npm run dev

아키텍처

팀원 소개

황찬진	이슬비
FrontEnd	FrontEnd

기술 스택

언어 및 라이브러리
통신 클라이언트
API 모킹
코드 컨벤션

---

팀 컨벤션

Git Convention

• 작업 단위 이슈 및 PR 생성
• PR 코드리뷰 및 승인 필수

1. 적절한 커밋 접두사 작성
2. 커밋 메시지 내용 작성
3. 내용 뒤에 이슈 (#이슈 번호)와 같이 작성하여 이슈 연결

접두사	설명
feat :	새로운 기능 구현
fix :	버그 수정
docs :	문서 추가 및 수정
refactor :	코드 리팩토링
test :	테스트
design :	UI 관련 디자인 작업
Chore :	빌드, 환경 설정
remove :	사용하지 않는 코드나 파일 제거
style :	기능 변경 없는 스타일 수정

프로젝트 구조

src
├─ api           # 서버 통신 모듈
├─ assets        # 이미지, 아이콘, 로고 등 정적 자산
├─ routes        # 라우팅
├─ components    # UI 및 페이지 구성 컴포넌트
├─ constants     # 상수 정의
├─ shared        # 재사용 가능한 리소스
├─ foundations   # 전역 스타일
├─ hooks         # 커스텀 훅
├─ mocks         # MSW
├─ pages         # 라우팅 페이지 컴포넌트
├─ stores        # 상태 관리
├─ types         # 타입 정의
└─ utils         # 유틸리티 함수