프로젝트 소개 및 개요

SHOW in Seoul은 서울시 문화행사 정보와 그에 대한 후기를 한눈에 볼 수 있는 모바일 서비스입니다.

문화 행사 공공 API를 활용하여 매일 업데이트되는 행사 정보를 볼 수 있으며

지역구, 취향에 따른 카테고리를 선택하여 원하는 정보만 필터링하여 보다 쉽고 편리하게 행사 정보를 확인할 수 있습니다.

🔗배포 URL : test

🔒Test ID : test

🔓Test PW : test

목차

1. 팀원 소개
2. 역할 분담
3. 기술 및 개발 환경
4. 폴더 구조
5. 주요 기능
6. UI
7. 페이지 기능

1. 팀원 소개

김도경	김소진	오세원	유재영
d-charlie-kim	kimSojinn	sewon-O	zxxng

2. 역할 분담

3. 기술 및 개발환경

✨ Front-end :

✨ Back-end : 제공된 API 사용

✨ Design :

✨ 협업 :

[정보 구조도]

[개발 환경]

코드 충돌을 줄이고 브랜치 관리가 용이한 Git Flow 방식을 사용하여 페이지/기능 별 브랜치를 만들고 각자 작업 브랜치를 따로 생성하여, 페이지 브랜치로 PR 및 Merge를 진행합니다.

[커밋 컨벤션]

커밋 유형	설명
Feat	새로운 기능, 특징 추가
Fix	버그해결, 수정
Docs	문서에 관련된 내용, 문서 수정
Style	스타일링
Refactor	리팩토링
Test	테스트 코드 수정, 누락된 테스트를 추가할 때, 리팩토링 테스트 추가
Chore	자잘한 수정에 대한 커밋
Remove	어떤 요소 혹은 파일을 삭제했을 때
Build	npm 등 설치 실행 관련
Init	최초 세팅

4. 폴더 구조

📁

+---public
|       favicon.ico
|       index.html
|
\---src
    |   App.js
    |   index.js
    |
    +---API
    |       Comment.jsx
    |       GetShowAPI.jsx
    |       Image.jsx
    |       Like.jsx
    |       PostAPI.jsx
    |       Profile.jsx
    |       useFollow.jsx
    |       useProfile.jsx
    |       User.jsx
    |
    +---Assets
    |   +---Icon
    |   |   |
    |   |   \---skeleton
    |   |
    |   \---Img
    |
    +---Atom
    |       atom.jsx
    |
    +---Components
    |   +---Article
    |   |       Content.jsx
    |   |       FeedContents.jsx
    |   |       ShowDetailInfo.jsx
    |   |       ShowDetailTopBar.jsx
    |   |       TotalCount.jsx
    |   |
    |   +---Category
    |   |       CategoryHeader.jsx
    |   |       CategoryPeriod.jsx
    |   |
    |   +---Common
    |   |   |   BottomNav.jsx
    |   |   |   Button.jsx
    |   |   |   Error.jsx
    |   |   |   InputBox.jsx
    |   |   |   Profile.jsx
    |   |   |   ProfileImageEdit.jsx
    |   |   |   ProfileInfoEdit.jsx
    |   |   |   Skeleton.jsx
    |   |   |   TopBar.jsx
    |   |   |   TopBarBtn.jsx
    |   |   |   TopBtn.jsx
    |   |   |
    |   |   \---Post
    |   |           Post.jsx
    |   |           PostContent.jsx
    |   |           PostContentButtons.jsx
    |   |           PostHeader.jsx
    |   |           PostLayoutButtons.jsx
    |   |
    |   +---Login
    |   |       Login.jsx
    |   |       SignUp.jsx
    |   |
    |   +---Modal
    |   |       Alert.jsx
    |   |       Modal.jsx
    |   |
    |   +---Post
    |   |       Comments.jsx
    |   |       CommentsForm.jsx
    |   |
    |   +---Profile
    |   |       AreaTag.jsx
    |   |       CategoryTags.jsx
    |   |       InterestsTag.jsx
    |   |       ProfileInterests.jsx
    |   |       ProfileTags.jsx
    |   |
    |   \---Search
    |           SearchContent.jsx
    |           SearchInput.jsx
    |
    +---Hook
    |       useAtomReset.jsx
    |       useDataFiltering.jsx
    |       useScrollToTop.jsx
    |       useTokenCheck.jsx
    |
    +---Pages
    |       CategoryPage.jsx
    |       ErrorPage.jsx
    |       LoginPage.jsx
    |       MainPage.jsx
    |       PostDetailPage.jsx
    |       PostEditPage.jsx
    |       PostingPage.jsx
    |       PostPage.jsx
    |       ProfileDetailPage.jsx
    |       ProfileEditPage.jsx
    |       ProfileSettingPage.jsx
    |       SearchPage.jsx
    |       ShowDetailPage.jsx
    |       SignupPage.jsx
    |       SplashPage.jsx
    |
    +---Route
    |       RequireAuth.jsx
    |
    +---Styles
    |       GlobalStyle.jsx
    |       LayoutStyle.jsx
    |
    \---Utils
            showDetailFunction.jsx

• API/ : API
• Assets/ : 이미지, 아이콘
• Atom/ : 상태 관리
• Components/ : 컴포넌트
• Components/Common/ : 공통 컴포넌트
• Hook/ : 커스텀 훅
• Pages/ : 각 페이지 구현
• Style/ : globalstyle, 공통 스타일

5. 주요 기능

🔒 로그인 / 회원가입

• 로그인
• 회원가입
• 취향 태그 선택
• 유효성 검사
• 토큰 검증

📎 카테고리

• 선택한 분야와 지역구에 따른 필터링 기능

📃 피드

• 게시글 업로드
• 행사 상세 페이지

🔍 검색

• 행사 검색

🖼 게시글

• 게시글 수정, 삭제
• 댓글 게시, 삭제
• 좋아요

👨🏿‍🤝‍👨🏼프로필

• 로그아웃
• 프로필 수정
• 프로필 이미지 선택

6. UI

7. 페이지 기능

1) 홈

🔗 [splash]	🔗 [로그인 페이지]	🔗 [회원가입 페이지]	🔗 [프로필 설정]

🔗 [카테고리 페이지]	🔗 [검색]	🔗 [메인 페이지]	🔗 [행사 상세 페이지]

2) 게시판 & 프로필

🔗 [후기 작성 페이지]	🔗 [후기 게시판 페이지]	🔗 [후기 상세]

🔗 [마이 프로필 페이지]	🔗 [다른 유저 프로필 페이지]	🔗 [프로필 수정]

3) 후기 수정/삭제 & 좋아요

🔗 [후기 수정]	🔗 [후기 삭제]	🔗 [로그아웃 ]

🔗 [댓글 작성]	🔗 [댓글 삭제]	🔗 [좋아요]