README.md

[ FEPS 1기 🦁 | 1조 Team477 | 최종 프로젝트]

Team477 소개

신은수	윤태현	이보경

목차

1. 목표

2. 프로젝트 소개

• 개발 배경 및 목적, 주요 기능 등
• 개발 기간
• 프로젝트 사용법

3. 기술 스택

• 기술 선정 이유

4. 정보구조도

5. 화면 구성

6. 트러블슈팅

7. 컨벤션

8. 디렉토리 구조

1. 목표

• 짧은 프로젝트 기간으로 인한 MVP 개발 및 동작 우선 구현
• 추후 기능 추가 및 성능 최적화

2. 프로젝트 소개

🔗 beta 바로가기

예체능 분야 대학생들이 자신의 작품을 효과적으로 소개하고 홍보할 수 있는 중앙 집중형 플랫폼

개발 기간

• 1차 개발 : 2023년 12월 2일(월) ~ 2023년 12월 25일(월)
  
• 2차 개발 : 2024년 1월 4일(목) ~ 진행 중

프로젝트 사용법

• 구동법

  $ git clone https://github.com/FESP-TEAM-1/beta-front.git beta-front
  $ cd beta-front
  $ npm install
  $ npm run dev
  

• .env

  VITE_APP_KAKAOMAP_API_KEY=
  VITE_APP_IMAGE_DOMAIN=
  
  VITE_APP_TOSS_PAYMENTS_CLIENT_KEY=
  VITE_APP_TOSS_PAYMENTS_SECRET_KEY=
  
  VITE_APP_API_ENDPOINT=
  

3. 기술 스택

Environment
Package Manager
Development
Communication

기술 선정 이유

1. Vite

• 개발 서버 시작 시간

  • CRA는 Webpack을 사용하여 개발 서버를 시작할 때 모든 모듈을 한 번에 변환하는 반면,
  • Vite는 모듈을 요청할 때마다 동적으로 변환하고 ES 모듈을 사용하여 브라우저에서 직접 로드하기 때문에 서버 시작 시간이 매우 빠름
  • 특히 window 환경에서 빌드 속도가 CRA와 확연하게 차이남

• 환경 설정의 단순화

  • CRA는 설정이 모두 미리 구성되어 있어 편리하지만, 사용자 정의 설정을 추가하려면 eject 과정을 거쳐야 함
  • 반면 Vite는 최소한의 설정으로 alias, eslint 등 사용자 정의 설정을 쉽게 추가할 수 있음

2. Zustand

• Provider 불필요

  • React의 Context API에 의존하지 않기 때문에 불필요한 리렌더링을 최소화할 수 있고 성능 향상에 기여할 수 있음 또한, 개발 과정을 더욱 간결하게 만들 수 있음

• 러닝 커브

  • 짧은 기간 동안 학습하기에 적합함
  • 팀원 모두가 빠르게 적응하고 효율적으로 작업할 수 있음

• 단일 스토어 관리

  • 하나의 스토어에서 개별적인 기능 및 상태를 관리할 수 있음
  • 상태 관리의 복잡성을 줄이고 관리의 효율성을 높여줌

• 경량화된 라이브러리

  • 매우 작은 크기로 프로젝트의 전체적인 크기를 최소화하며 로딩 시간과 성능에 긍정적인 영향을 미침

• 다른 상태 관리 라이브러리

  • Recoil은 업데이트가 드물고 파일 크기가 큼
  • Redux는 다소 복잡한 편
  • Jotai나 Valtio 등은 고려하지 않음

• 결론적으로 짧은 시간 내에 프로젝트를 구현해야 하는 상황과 상태 관리 라이브러리에 대한 팀원들의 경험을 고려하여 간단하면서도 경량화된 Zustand를 선택

3. Tanstack Query

• 효율적인 데이터 캐싱

  • 자동적으로 서버에서 받은 데이터를 캐시하기 때문에 API 요청 수를 줄이고 사용자 경험을 개선

• 쿼리 키를 통한 데이터 관리

  • 각 쿼리는 고유한 키를 가지며 이를 통해 데이터를 쉽게 조회, 업데이트, 무효화할 수 있음

4. 정보구조도

5. 화면 구성

1) 메인 페이지

[메인]	[스토리 업로드]

2) 전시/공연/스포츠 페이지

[전시]	[공연]	[스포츠]

3) 상세 페이지

[정보]	[후기/방명록]

[좋아요]	[예매 - 구글폼]	[예매 - 예매대행]

4) 마이 페이지 - 일반회원

[프로필 수정]	[좋아요]	[후기/방명록]

[예매 관리]	[스토리]

5) 마이 페이지 - 관리자

[프로필 수정]	[예매 관리]

[게시글 관리]	[게시글 업로드]	[게시글 수정/삭제]

6. 트러블슈팅

color-thief 라이브러리

text to base64

이미지 최적화

7. 컨벤션

📕 커밋 컨벤션

📘 코드 컨벤션

8. 디렉토리 구조

📦BETA-FRONTEND
 ┣ 📂public
 ┃ ┗ 📜favicon.ico
 ┣ 📂src
 ┃ ┣ 📂apis
 ┃ ┃ ┣ 📜deleteCancelShow.ts
 ┃ ┃ ┣  ...
 ┃ ┣ 📂assets
 ┃ ┃ ┣ 📜arrow.svg
 ┃ ┃ ┣  ...
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂common
 ┃ ┃ ┃ ┣ 📂BasicCard
 ┃ ┃ ┃ ┃ ┣ 📜BasicCard.module.css
 ┃ ┃ ┃ ┃ ┗ 📜BasicCard.tsx
 ┃ ┃ ┃ ┃ ...
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂layouts
 ┃ ┃ ┣ 📂detail
 ┃ ┃ ┣ 📂main
 ┃ ┃ ┣ 📂mypage
 ┃ ┣ 📂data
 ┃ ┃ ┗ 📜univList.json
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┣ 📜useAuth.tsx
 ┃ ┃ ┣ 📜useFilterSlide.tsx
 ┃ ┃ ┣ 📜useInputs.tsx
 ┃ ┃ ┗ 📜usePreventScroll.tsx
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📂Detail
 ┃ ┃ ┃ ┣ 📜DetailPage.tsx
 ┃ ┃ ┃ ┗ 📜DetaiPage.module.css
 ┃ ┃ ┣ 📂Error
 ┃ ┃ ┣ 📂Login
 ┃ ┃ ┣ 📂Main
 ┃ ┃ ┣ 📂MainConcert
 ┃ ┃ ┣ 📂MainExhibition
 ┃ ┃ ┣ 📂Mypage
 ┃ ┃ ┃ ┣ 📂admin
 ┃ ┃ ┃ ┃ ┣ 📂PostManage
 ┃ ┃ ┃ ┃ ┃ ┣ 📜PostManagePage.module.css
 ┃ ┃ ┃ ┃ ┃ ┗ 📜PostManagePage.tsx
 ┃ ┃ ┃ ┃ ┗ ...
 ┃ ┃ ┃ ┣ 📂ProfilePage
 ┃ ┃ ┃ ┣ 📂user
 ┃ ┃ ┃ ┃ ┣ 📂LikeManage
 ┃ ┃ ┃ ┃ ┃ ┣ 📜LikeManagePage.module.css
 ┃ ┃ ┃ ┃ ┃ ┗ 📜LikeManagePage.tsx
 ┃ ┃ ┃ ┃ ┗ ...
 ┃ ┃ ┃ ┣ 📜Mypage.module.css
 ┃ ┃ ┃ ┗ 📜Mypage.tsx
 ┃ ┃ ┣ 📂PayFail
 ┃ ┃ ┣ 📂PaySuccess
 ┃ ┃ ┣ 📂Signup
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂stores
 ┃ ┃ ┣ 📜useCarouselDragStore.ts
 ┃ ┃ ┗ ...
 ┃ ┣ 📂types
 ┃ ┃ ┣ 📜addressSearchType.ts
 ┃ ┃ ┣ ...
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂utils
 ┃ ┃ ┣ 📜base64ToBytes.ts
 ┃ ┃ ┃ ...
 ┃ ┃ ┗ index.ts
 ┃ ┣ 📜App.tsx
 ┃ ┣ 📜global.css
 ┃ ┣ 📜main.tsx
 ┃ ┣ 📜PrivateRoute.tsx
 ┃ ┣ 📜Router.tsx
 ┃ ┣ 📜toast.css
 ┃ ┗ 📜vite-env.d.ts
 ┣ 📜.env
 ┣ 📜.eslintrc.cjs
 ┣ 📜.gitignore
 ┣ 📜.prettierrc.cjs
 ┣ 📜index.html
 ┣ 📜netlify.toml
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┣ 📜svg.d.ts
 ┣ 📜tsconfig.json
 ┣ 📜tsconfig.node.json
 ┗ 📜vite.config.ts