최종 기획서

🏕️ Campers

🔍 서비스 설명

📝 기획 배경

🚀 타겟층

• 캠핑에 관심이 많은 사람

• 캠핑에 대해 소통하고 싶은 사람

⚙️ 기능 구현

메인 페이지

• Header, main, 하단 nav 구조

• 검색기능 button으로 (Search Page 이동)

• Icon 컴포넌트 : 홈, 커스텀 아이콘(마이페이지(로그인 후)↔ 로그인(로그인 전))

• 다크모드

• 게시물 0 ~8 총 9개 Posts → Post

• 무한스크롤로 게시물 더 보기 가능

• 전체 지도 볼 수 있는 Icon

• 포스트 생성 아이콘 (createPost)

• 유저 목록 아이콘 (페이지 이동 예정)

Search Page

• 포스트 검색 → 관련된 포스트를 보여준다

PostDetail

• Post 상세 정보를 보여준다. (이미지, 댓글 등)

• 작성자 정보 또한 보여줘야함

• 댓글 작성 및 수정, 삭제 가능 (자신것만)

• 추천 클릭 가능

• 지도 위치를 북마크 (카카오 api 사용)

• swipe로 이미지 넘기기

👭 유저 스토리

로그인(1차) - 태호

• 사용자는 회원 기능을 이용하기 위해 로그인 할 수 있다.

• 사용자는 본인의 회원정보를 잃어버린 경우 회원정보 찾기 페이지로 이동할 수 있다.

• 사용자는 인증되지 않았을 경우 회원가입 페이지로 이동한다.

• 사용자가 로그인 정보를 형식에 맞추지 않은 경우 에러메시지를 표시한다.

• 소셜(카카오, 구글) 로그인이 가능하도록 한다.

• 자동 로그인이 가능하도록 한다.

회원가입(1차) - 원석

• 사용자는 회원 기능을 이용하기 위해 회원 가입을 할 수 있다.

• 사용자가 이미 인증된 사용자일 경우 중복을 알리기 위해 경고메시지를 표시한다.

• 사용자는 형식에 맞지 않는 정보를 입력할 경우 사용자에게 알려주기위해 에러메시지를 표시한다.

• 사용자는 회원가입에 성공할 경우 로그인을 위해 로그인 페이지로 이동한다.

• 소셜 아이디로 회원가입 가능하도록 하기

게시판(1차) - 성래

• 사용자는 전체 게시글을 조회할 수 있다.

• 사용자는 더 많은 게시글을 조회하기 위해 스크롤 통해 숨겨진 게시글 들을 확인할 수 있다.

• 사용자는 전체 게시글을 자신이 원하는 기준으로 필터링을 하여 정보를 얻을 수 있다. (좋아요 순 등)

• 사용자는 캠핑에 대한 후기를 보기 위해 다른 유저의 게시물을 클릭할 수 있다.

• 인증된 사용자는 다른 사용자들에게 정보를 공유하기 위해 포스트 생성할 수 있다.

• 인증된 사용자는 자신의 포스트에 이미지를 업로드할 수 있다.

게시글(1차) - 정호 & 범진

• 인증된 사용자는 자신의 포스트에 이미지를 삭제하거나 수정하여 업데이트 할 수 있다.

• 인증된 사용자는 포스트 정보를 수정하기 위해 포스트를 재업로드 할 수 있다.

• 인증된 사용자는 자신의 작성한 포스트를 삭제할 수 있다.

• 인증된 사용자는 나의 포스트에 다른 사용자의 댓글에 답장을 남길 수 있다.

• 인증된 사용자는 소통하기 위해 다른 유저의 게시물에 댓글을 남길 수 있다.

• 인증된 사용자는 게시물을 추천하기 위해 유저의 게시물에 좋아요(추천)를 남길 수 있다.

• 인증된 사용자는 해당 유저의 포스트를 최신글의 업데이트를 추적하기 위해 다른 유저를 팔로우할 수 있다.

검색(2차) -

• 사용자는 자신이 얻고 싶은 정보를 조회하기 위해 검색할 수 있다.

• 사용자는 특정한 사용자를 조회하기 위해 검색할 수 있다.

지도(2차) -

• 인증된 사용자는 등록된 글의 캠핑장 위치를 지도로 한 눈에 파악할 수 있다.

• 인증된 사용자는 자신 의 포스트에 캠핑장 위치에 대한 정보를 저장할 수 있다.

유저 정보(2차) -

• 인증된 사용자는 전에 입력한 자신의 정보를 수정할 수 있다.

• 인증된 사용자는 자신이 올린 전체 게시글을 확인할 수 있다.

• 인증된 사용자는 모든 사용자의 info에 접근해 정보를 조회할 수 있다.

알람(2차) -

• 인증된 사용자는 헤더바에서 알림을 확인할 수 있다.

• 인증된 사용자는 알림을 통해 메세지가 왔음을 알 수 있다.

• 인증된 사용자는 알림을 통해 자신의 게시글에 좋아요 혹은 댓글이 달렸음을 알 수 있다.

팔로우 목록(2차) -

• 인증된 사용자는 팔로우(내가 팔로우 한 사람) 목록을 보여줄 수 있다.

• 인증된 사용자는 팔로우(나를 팔로우하는 사람) 목록을 볼 수 있다.

• 인증된 사용자는 현재 접속중인 유저에 대한 목록 실시간으로 확인할 수 있다.

예외처리(2차) -

• 사용자가 잘못된 접근 시 404 페이지를 보여준다.

기타

• 사용자는 다크 or 라이트 모드를 사용할 수 있다.

추가사항

와이어 프레임

라우터 구조

/ -> homePage

/search -> searchPage
	/search?title=~
	/searcg?fullname=~

/join -> signUpPage
/create -> posterSignUpPage

/poster/:id -> posterDetailPage

/my -> myPage
	/my/:id -> myPage(특정유저)

/user -> userPage
	/user/followers -> 팔로우 목록
	/user/following -> 팔로잉 목록
	/user/chat -> 전체 채팅 목록

/chat/:id -> 특정 채팅 페이지
/map -> 맵 페이지

초기 파일 구조

src
│
├── pages
│   ├── MainPage
│   ├── LoginPage
│   ├── SignUpPage
│   ├── SearchPage
│   ├── CreatePostPage
│   ├── UserProfilePage
│   ├── UserListPage
│   ├── UserEditPage
│   ├── ChatListPage
│   └── ChatPage
├── components
|    │
|    ├── Common
|    │     ├─ Header
|    │     ├─ Nav
|    │     ├─ Text
|    │     ├─ Icon
|    │     ├─ Image
|    │     ├─ Bar
|    │     ├─ Space
|    │     ├─ Input
|    │     ├─ Form
|    |     └─ Box
|    |     └─ List
|    |
|    |-- Post
|    |    |-- PostList
|    |    |-- PostCard
|    |    |-- PostSearch
|    |    |-- PostDetail
|    |-- User
|    |    |-- UserList
|    |    |-- UserCard
|    |-- Chat
|         |-- ChatList
|         |-- ChatView
├── apis
├── constants
├── types
├── router
└-- hooks

기술 스택

• react

• react-router

• @tanstack-query

• react-hook-form

• typescript

• chakra ui
• @chakra-ui/react

• emotion
• @emotion/react
• @emotion/styled

• framer-motion

• axios

• husky

• lint-staged

• commitlint
• @commitlint/cli
• @commitlint/config-conventional

• eslint

• prettier

계획

convention

Branch

• []/[issue number]-[branch rule]

Code(index.tsx)

• 예시 코드

• 이벤트 핸들 함수는 handle.. 이벤트 전달은 on…
setState정의는 함수 최상단에
useEffect는 함수 최 하단에 정의
util 함수 정의시 util함수는 util 폴더에 넣기