HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
프로그래머스 프론트엔드 데브코스 2기
프로그래머스 프론트엔드 데브코스 2기
/
💫
루카스팀
/
1차 기획서

1차 기획서

상태
완료
날짜
Jun 8, 2022
담당자
아래의 노션 페이지에 자유 형식으로 작성
🤞🏻
중간 프로젝트
 

기획서

1. 프로젝트 주제

FF(Fashion Feedback) - 예비 인싸들을 위한 패션 피드백 서비스

2. 페이지 기획 / 요구 사항

  • 로그인 페이지
    • 사용자는 로그인을 할 수 있다.
      • Input : email, password
      • button: 로그인, 회원 가입
 
  • 회원 가입 페이지
    • 사용자는 회원 가입을 할 수 있다.
      • Input : email, 닉네임, 비밀번호, 비밀번호 확인
      • button: 회원 가입
 
  • 메인 페이지
    • header (검색 창, 로그인, 로그아웃, 프로필 아이콘, 알람 아이콘)
      • 로그인 페이지로 링크(비 인증 사용자만)해준다.
        프로필 페이지, 로그아웃, 알람 페이지로 링크(인증 사용자만)해준다.
        메인 페이지로 링크해준다.
        사용자, 포스트 검색할 수 있다.(토글을 통해 사용자 / 포스트 카테고리 선택)
    • nav bar (면접, 데이트, 출근, 일상, 운동, 경조사, 기타)
      • 선택한 카테고리의 포스트 목록을 보여준다.
    • carousel (홈페이지 주제 배너 or 실시간 베스트 포스트)
      • 사이트에 대한 설명 배너를 달아준다.
        베스트 좋아요 포스트 배너를 달아준다.
    • 포스트 목록 (무한 스크롤 구현)
      • 사용자는 채널에 올라온 글을 볼 수 있다.
        스크롤을 맨 위로 올려주는 버튼을 추가한다.
        글 작성하기(인증 사용자만) 버튼을 추가한다.
    • footer(저작권)
      • 저작권을 표시해 준다.
 
  • 알람 페이지
    • 좋아요, 댓글, DM에 대한 알람 목록을 보여준다.
      팔로우한 사람의 포스트를 알려준다(?)
 
  • 프로필 페이지 (본인, 타 사용자)
    • 프로필 이미지, 닉네임, 등록된 추가정보(나이, 키, 몸무게), 작성 글, 팔로워, 팔로우, 온라인 여부(해당 프로필 사용자의 온라인 여부)
      본인 프로필이 아닐 경우 팔로우를 할 수 있는 기능 추가한다.
      본인 프로필일 경우 팔로우, 팔로잉 한 사람 목록 보여주는 기능 추가한다.
       
  • 프로필 수정
    • 프로필 사진을 수정한다.
      비밀번호를 수정한다.
      닉네임을 수정한다.
      나이를 등록 혹은 수정한다.
      키를 등록 혹은 수정한다.
      몸무게를 등록 혹은 수정한다.
 
  • 상세 게시글( 모달 )
    • 글쓴이 정보(닉네임, 프로필 사진)와 등록된 추가 정보(나이, 키, 몸무게)를 보여준다.
      포스트를 좋아요 할 수 있다(인증 사용자만).
      포스트에 댓글을 남길 수 있다(인증 사용자만).
 
  • 글 작성 페이지
    • 제목, 본문 내용, 사진 ( 최대 5장까지 업로드 가능 ), 해시 태그 입력한다.
 
  • 글 수정 페이지
    • 기존에 썼던 글이 불러 와지고, 그 중 자신이 수정할 내용을 수정하고 저장한다.
 
  • 404 페이지
    • 엉뚱한 페이지에 접속하면 404 페이지를 보여준다.
 
  • DM 페이지 ( 후순위, 선택 구현 사항 )
    • 다른 사용자에게 메시지를 보낼 수 있다.
      다른 사람들과 나눈 메시지 목록을 볼 수 있다
      메시지 대화 내역을 볼 수 있다
 

3. 컨텐츠 목록

타켓층 : 옷을 잘 못 입는 예비 인싸들
  1. 포스트 - 상황에 따른 옷차림에 대해 고민을 포스트로 올리고, 댓글과 좋아요를 통해 피드백
    1. 면접, 데이트, 출근, 일상, 운동, 경조사, 기타 등의 카테고리로 구분한다.
    2. 실시간 포스트
    3. 팔로우한 사람의 포스트 목록
  1. 자랑글
    1. 상위 순위의 자랑글 포스트를 메인 carousel에서 보여준다.
    2. 좋은 패션을 보면서 자극을 받고 유저 유입을 유도한다
  1. 후기(후 순위 구현) - 피드백 이후에 대한 후기 글
 

4. 기술 스택

  • 프론트엔드 - React / emotion / storybook
  • 디자인 - figma
  • 버전 관리 - github
  • 코드 포매팅 - eslint(airbnb) + prettier
 

메인 컬러

후보
  • #6667AB