[ BETA - 대학생 공연/전시 정보공유 플랫폼 ]

팀원 소개

신은수	윤태현	이보경

1. 목표

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

2. 프로젝트 소개

🔗 beta 바로가기

테스트 아이디

일반 유저

ID : user

PW : !user1234

관리자 유저

ID : admin

PW : !admin1234

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

개발 기간

1차 개발 : 2023년 12월 2일(월) ~ 2023년 12월 25일(월)

2차 개발 : 2024년 1월 4일(목) ~ 2024년 2월 3일(토)
- 버그 수정
- 리팩터링
- 최적화

프로젝트 사용법

구동법

$ 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=

.env.development
```
VITE_APP_API_ENDPOINT=
```
.env.production
```
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. 역할분담

6. 화면 구성

1) 메인 페이지

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

메인페이지
- 현재 진행중인 공연/전시의 배너(최신순 5개)를 볼 수 있다.
- 사람들이 업로드한 공연/전시와 관련된 스토리를 확인할 수 있다.
- 현재 진행 중인 공연/전시를 날짜별로 확인할 수 있다.
스토리업로드
- 일반 회원만 스토리를 업로드 할 수 있다.
- 사진과 태그를 입력하여 스토리를 업로드 할 수 있다.

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

[전시]	[공연]

날짜, 지역, 진행상황(진행중, 종료, 예정), 카테고리 등으로 필터링해서 전시/공연 정보를 확인 할 수 있다.

3) 상세 페이지

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

정보 탭: 공연/전시 제목, 주최 대학 및 학과, 기간, 장소, 소개글 등을 확인 할 수 있다.
후기/방명록 탭: 공연/전시 감상 후기 및 방명록을 작성할 수 있다.

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

공연/전시에 좋아요를 누를 수 있다.
예매는 구글폼으로 예매하는 것과 본 사이트에서 직접 예매하는 방법이 있다.

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

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

자신의 프로필을 수정할 수 있다.
자신이 좋아요를 누른 공연/전시를 확인할 수 있으며 공연/전시카드를 클릭하면 해당 공연/전시의 상세정보페이지로 이동한다.
자신이 남긴 후기/방명록을 확인할 수 있고 이를 삭제할 수 있다. 자신이 남긴 후기/방명록을 클릭 시 해당 공연/전시의 상세정보페이지 후기/방명록 탭으로 이동한다.

[예매 관리]	[스토리]

자신이 예매한 공연/전시 목록을 확인할 수 있다. 이를 클릭 시 해당 공연/전시에 대한 정보가 뜨고 예매를 취소할 수도 있다.
자신이 작성한 스토리를 확인할 수 있고 이를 삭제할 수 있다.

5) 마이 페이지 - 관리자

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

관리자는 자신의 프로필을 수정할 수 있다.
관리자는 자신의 공연/전시를 어떤 회원이 예매했는지 확인할 수 있다.

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

관리자는 자신이 어떤 공연/전시 게시글을 적었는지 리스트를 확인할 수 있다. 또한 해당 게시글에 대한 댓글을 확인하고 삭제할 수 있다.
관리자는 공연/전시 게시글을 작성할 수 있다. (사진업로드, 공연/전시 대학 및 학과, 공연/전시 기간, 장소, 소개글, 예매 여부, 구글폼 예매/예매대행 등을 작성할 수 있다)
관리자는 공연/전시 게시글을 수정하거나 삭제할 수 있다.

7. 트러블슈팅

📍 해결한 트러블슈팅 보러가기

🕹️ 해결 중인 트러블슈팅 보러가기

8. 컨벤션

📕 커밋 컨벤션

📘 코드 컨벤션

9. 디렉토리 구조

📦BETA-FRONTEND
 ┣ 📂public
 ┃ ┗ 📜favicon.ico
 ┣ 📂src
 ┃ ┣ 📂apis
 ┃ ┃ ┣ 📂image
 ┃ ┃ ┃ ┗ 📜getBannerImages.ts
 ┃ ┃ ┣ 📂like
 ┃ ┃ ┃ ┣ 📜deleteLike.ts
 ┃ ┃ ┃ ┗ ...
 ┃ ┃ ┣ 📂reservation
 ┃ ┃ ┃ ┣ 📜deleteReservation.ts
 ┃ ┃ ┃ ┗ ...
 ┃ ┃ ┣ 📂review
 ┃ ┃ ┃ ┣ 📜deleteAdminReview.ts
 ┃ ┃ ┃ ┗ ...
 ┃ ┃ ┣ 📂show
 ┃ ┃ ┃ ┣ 📜deleteAdminShow.ts
 ┃ ┃ ┃ ┗ ...
 ┃ ┃ ┣ 📂story
 ┃ ┃ ┃ ┣ 📜deleteStory.ts
 ┃ ┃ ┃ ┗ ...
 ┃ ┃ ┣ 📂user
 ┃ ┃ ┃ ┣ 📜getDuplicateIdCheck.ts
 ┃ ┃ ┃ ┗ ...
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂assets
 ┃ ┃ ┣ 📜arrow.svg
 ┃ ┃ ┗ ...
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂common
 ┃ ┃ ┃ ┣ 📂BasicCard
 ┃ ┃ ┃ ┃ ...
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂detail
 ┃ ┃ ┃ ┣ 📂Banner
 ┃ ┃ ┃ ┃ ...
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂layouts
 ┃ ┃ ┃ ┣ 📂ButtonAfterLogin
 ┃ ┃ ┃ ┃ ...
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂main
 ┃ ┃ ┃ ┣ 📂Banner
 ┃ ┃ ┃ ┃ ...
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂mainConcert
 ┃ ┃ ┃ ┣ 📂ConertListSection
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂mainExhibition
 ┃ ┃ ┃ ┣ 📂ExhibitionListSection
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┗ 📂mypage
 ┃ ┃ ┃ ┣ 📂admin
 ┃ ┃ ┃ ┃ ┣ 📂ImageInputSection
 ┃ ┃ ┃ ┃ ┃ ...
 ┃ ┃ ┃ ┣ 📂Profile
 ┃ ┃ ┃ ┃ ┗ 📜Profile.tsx
 ┃ ┃ ┃ ┣ 📂user
 ┃ ┃ ┃ ┃ ┣ 📂LikeItem
 ┃ ┃ ┃ ┃ ┃ ┗ 📜LikeItem.tsx
 ┃ ┃ ┃ ┃ ┃ ...
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂data
 ┃ ┃ ┗ 📜univList.json
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📜useApiError.tsx
 ┃ ┃ ┃ ┃  ...
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📂Detail
 ┃ ┃ ┣ 📂Error
 ┃ ┃ ┣ 📂Login
 ┃ ┃ ┣ 📂Main
 ┃ ┃ ┣ 📂MainConcert
 ┃ ┃ ┣ 📂MainExhibition
 ┃ ┃ ┣ 📂Mypage
 ┃ ┃ ┃ ┣ 📂admin
 ┃ ┃ ┃ ┃ ┣ 📂PostManage
 ┃ ┃ ┃ ┃ ...
 ┃ ┃ ┃ ┣ 📂user
 ┃ ┃ ┃ ┃ ┣ 📂LikeManage
 ┃ ┃ ┃ ┃ ┃ ...
 ┃ ┃ ┃ ┣ 📜Mypage.module.css
 ┃ ┃ ┃ ┗ 📜Mypage.tsx
 ┃ ┃ ┣ 📂PayFail
 ┃ ┃ ┣ 📂PaySuccess
 ┃ ┃ ┗ 📂Signup
 ┃ ┣ 📂routes
 ┃ ┃ ┣ 📜PrivateRoute.tsx
 ┃ ┃ ┗ 📜Router.tsx
 ┃ ┣ 📂stores
 ┃ ┃ ┣ 📜useShowIdStore.ts
 ┃ ┃ ┃ ...
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂styles
 ┃ ┃ ┣ 📜global.css
 ┃ ┃ ┣ 📜payment.css
 ┃ ┃ ┗ 📜toast.css
 ┃ ┣ 📂types
 ┃ ┃ ┣ 📜addressSearchType.ts
 ┃ ┃ ┃ ...
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂utils
 ┃ ┃ ┣ 📜appendResultToFormData.ts
 ┃ ┃ ┃ ...
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📜App.tsx
 ┃ ┣ 📜main.tsx
 ┃ ┗ 📜vite-env.d.ts
 ┣ 📜.env
 ┣ 📜.env.development
 ┣ 📜.env.production
 ┣ 📜.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

Name		Name	Last commit message	Last commit date
Latest commit History 1,037 Commits
.github		.github
public		public
src		src
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.prettierrc.cjs		.prettierrc.cjs
README.md		README.md
index.html		index.html
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
svg.d.ts		svg.d.ts
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

FESP-TEAM-1/beta-frontend

Folders and files

Latest commit

History

Repository files navigation

[ BETA - 대학생 공연/전시 정보공유 플랫폼 ]

팀원 소개

목차

1. 목표

2. 프로젝트 소개

3. 기술 스택

4. 정보구조도

5. 역할분담

6. 화면 구성

7. 트러블슈팅

8. 컨벤션

9. 디렉토리 구조

1. 목표

2. 프로젝트 소개

🔗 beta 바로가기

테스트 아이디

일반 유저

관리자 유저

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

개발 기간

프로젝트 사용법

3. 기술 스택

기술 선정 이유

1. Vite

2. Zustand

3. Tanstack Query

4. 정보구조도

5. 역할분담

6. 화면 구성

1) 메인 페이지

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

3) 상세 페이지

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

5) 마이 페이지 - 관리자

7. 트러블슈팅

8. 컨벤션

📕 커밋 컨벤션

📘 코드 컨벤션

9. 디렉토리 구조

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Languages

Packages