1. 프로젝트 주제
FF(Fashion Feedback) - 예비 인싸들을 위한 패션 피드백 서비스
2. 페이지 기획 / 요구 사항
- 로그인 페이지
- Input : email, password
- button: 로그인, 회원 가입
사용자는 로그인을 할 수 있다.
- 회원 가입 페이지
- Input : email, 닉네임, 비밀번호, 비밀번호 확인
- button: 회원 가입
사용자는 회원 가입을 할 수 있다.
- 메인 페이지
- header (검색 창, 로그인, 로그아웃, 프로필 아이콘, 알람 아이콘)
- nav bar (면접, 데이트, 출근, 일상, 운동, 경조사, 기타)
- carousel (홈페이지 주제 배너 or 실시간 베스트 포스트)
- 포스트 목록 (무한 스크롤 구현)
- footer(저작권)
로그인 페이지로 링크(비 인증 사용자만)해준다.
프로필 페이지, 로그아웃, 알람 페이지로 링크(인증 사용자만)해준다.
메인 페이지로 링크해준다.
사용자, 포스트 검색할 수 있다.(토글을 통해 사용자 / 포스트 카테고리 선택)
선택한 카테고리의 포스트 목록을 보여준다.
사이트에 대한 설명 배너를 달아준다.
베스트 좋아요 포스트 배너를 달아준다.
사용자는 채널에 올라온 글을 볼 수 있다.
스크롤을 맨 위로 올려주는 버튼을 추가한다.
글 작성하기(인증 사용자만) 버튼을 추가한다.
저작권을 표시해 준다.
- 알람 페이지
좋아요, 댓글, DM에 대한 알람 목록을 보여준다.
팔로우한 사람의 포스트를 알려준다(?)
- 프로필 페이지 (본인, 타 사용자)
프로필 이미지, 닉네임, 등록된 추가정보(나이, 키, 몸무게), 작성 글, 팔로워, 팔로우, 온라인 여부(해당 프로필 사용자의 온라인 여부)
본인 프로필이 아닐 경우 팔로우를 할 수 있는 기능 추가한다.
본인 프로필일 경우 팔로우, 팔로잉 한 사람 목록 보여주는 기능 추가한다.
- 프로필 수정
프로필 사진을 수정한다.
비밀번호를 수정한다.
닉네임을 수정한다.
나이를 등록 혹은 수정한다.
키를 등록 혹은 수정한다.
몸무게를 등록 혹은 수정한다.
- 상세 게시글( 모달 )
글쓴이 정보(닉네임, 프로필 사진)와 등록된 추가 정보(나이, 키, 몸무게)를 보여준다.
포스트를 좋아요 할 수 있다(인증 사용자만).
포스트에 댓글을 남길 수 있다(인증 사용자만).
- 글 작성 페이지
제목, 본문 내용, 사진 ( 최대 5장까지 업로드 가능 ), 해시 태그 입력한다.
- 글 수정 페이지
기존에 썼던 글이 불러 와지고, 그 중 자신이 수정할 내용을 수정하고 저장한다.
- 404 페이지
엉뚱한 페이지에 접속하면 404 페이지를 보여준다.
- DM 페이지 ( 후순위, 선택 구현 사항 )
다른 사용자에게 메시지를 보낼 수 있다.
다른 사람들과 나눈 메시지 목록을 볼 수 있다
메시지 대화 내역을 볼 수 있다
3. 컨텐츠 목록
타켓층 : 옷을 잘 못 입는 예비 인싸들
- 포스트 - 상황에 따른 옷차림에 대해 고민을 포스트로 올리고, 댓글과 좋아요를 통해 피드백
- 면접, 데이트, 출근, 일상, 운동, 경조사, 기타 등의 카테고리로 구분한다.
- 실시간 포스트
- 팔로우한 사람의 포스트 목록
- 자랑글
- 상위 순위의 자랑글 포스트를 메인 carousel에서 보여준다.
- 좋은 패션을 보면서 자극을 받고 유저 유입을 유도한다
- 후기(후 순위 구현) - 피드백 이후에 대한 후기 글
4. 기술 스택
- 프론트엔드 - React / emotion / storybook / react-feather (svg icon) / react-query, useSWR (data fetching)
- 디자인 - figma
- 버전 관리 - github
- 코드 포매팅 - eslint(airbnb) + prettier
메인 컬러
후보
- #6667AB
- #8C8EB8