Skip to content

PETSTIVAL/petstival-frontend

Repository files navigation

🐶 PETSTIVAL 🎉

반려동물과 함께 참여할 수 있는 페스티벌 정보를 모아서 확인하고, 페스티벌 관련 커머셜 상품을 구매할 수 있는 쇼핑 플랫폼

🗓️ 프로젝트 일정: 2024년 10월 18일 - 2024년 11월 7일 (3주)

image

⛳️ Project Overview (프로젝트 배경 및 기획의도)

  • 최근 반려가구 추이가 증가함에 따라 페스티벌 관련된 행사도 전국 곳곳에서 열리고 있습니다.
  • 따라서 현재 분산되어 있는 반려견과 함께할 수 있는 축제 정보를 제공합니다.
  • 이를 통해 반려견과 함께할 수 있는 페스티벌 문화를 확산하고 지역 경제 활성화를 기대합니다.
  • 더불어 축제와 관련된 상품을 기획하고 판매하는 커머스 서비스까지 도입하여 반려견 동반 페스티벌 시장확보를 통한 수익모델을 구축할 수 있습니다.
  • 궁극적으로 일상 속에 반려견 문화가 자리잡을 수 있도록 기대합니다.

🌈 Team Members (팀원 및 팀 소개)

김다연 김영동 신혜민 유성현 최명지
개발리드, FE FE, Data 팀장, PL FE, BE FE
✨ 프론트엔드 개발 리드
✨ 결제 및 취소 기능 구현
✨ 상품 주문 전체 플로우 구현
주문, 결제 관련 페이지 구현
홈페이지, 인증 팝업창 구현
페스티벌 관련 페이지 구현
마이페이지 구현
✨ 공공 데이터 API 연동
✨ DB 데이터 생성
견종 검색 자동완성 기능 구현
주소 검색 API 배송지 입력 구현
페스티벌 참여 신청 기능 구현
페스티벌 상세 페이지 구현
✨ 전체 프로젝트 리드
✨ 전체 UI 디자인
✨ 반려견 프로필 기능 구현
개발 환경 세팅
ERD 작성 및 DB 세팅
전체 페이지 퍼블리싱
장바구니, 주문하기 기능 구현
✨ 소셜 로그인 기능 구현
✨ QR 인증 기능 구현
로그아웃, 회원탈퇴 구현
DB 유저 생성 기능 구현
로그인 페이지 구현
QR-Scanner 페이지 구현
✨ 장바구니 기능 구현
✨ 장바구니 페이지 구현
UI 와이어프레임 디자인
쇼핑 관련 페이지 구현
페스티벌 신청 목록 페이지 구현

팀프로젝트 노션 및 피그마


🪐 주요 기능 및 서비스 구조도

image image

💫 서비스 화면 및 기능소개

1. 로그인/로그아웃 화면

image

2. 반려견 등록 페이지

image

3. 쇼핑 페이지

image image image

4. 결제 페이지

image image

5. 펫스티벌 조회 페이지

image

6. 펫스티벌 참여 인증 페이지

image

🛠️ 기술 스택 및 아키텍쳐 구조도

image image

🧩 DB 설계 및 FE 프로젝트 구조

image
project/
├── supabase/                # Supabase Edge Function 모음
│   ├── functions/  
│   ├──├── _shared/ 
│   ├──├── payment-cancel/
│   ├──├── payment/
├── src/
│   ├── assets/              # 이미지, 폰트 등 정적 파일
│   ├── components/          # UI 컴포넌트 모음
│   ├── stories/             # 디자인 재사용이 가능한 UI 컴포넌트 및 storybook 배포 파일 모음
│   ├── hooks/               # 커스텀 훅 모음
│   ├── service/             # Supabase Client 및 DB 관련 파일 모음
│   ├── pages/               # 각 페이지 컴포넌트 모음
│   ├── App.js               
│   ├── index.js             
│   package-lock.json    
│   package.json         
├── .gitignore               
└── README.md                

🪄 커밋 컨벤션

기본 구조

type(영문): subject(한글)

type 종류

커밋 태그 설명 예시
feat 새로운 기능 추가 feat: …
fix 버그 수정 fix: …
style HTML, CSS로 UI 구현 시 작성 style: 로그인 페이지 UI 구현
refactor 코드 리팩토링 refactor: update login logic
docs 문서 (README, 템플릿) 수정 docs: …
test 테스트 코드 test: …
build 빌드 관련 파일 수정 build: …
ci CI 설정 파일 수정 ci: …
pref 성능 개선 pref: …
chore 의존성 추가 등 기타 작업 chore: …

😍 프로젝트 회고

image

About

LG U+ 유레카 프론트엔드 최우수상 종합 프로젝트

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •