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

루카스 팀 프로젝트 정리

1. 프로젝트 주제

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

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

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

3. 팀원 별 역할 분담

  • 김지은 : 로그인, 회원가입, 프로필, 프로필 변경 페이지
  • 나호석 : 글 작성, 글 수정, 404 페이지
  • 유창헌 : 메인 페이지, 알람페이지
  • 임재현 : 상세 페이지(모달)

4. 기술 스택

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

5. 프로젝트 결과

Github : https://github.com/prgrms-fe-devcourse/FEDC2_FF_Lucas
배포사이트 : https://fashion-feedback.netlify.app/
 

💦 프로젝트 진행하며 어려웠던 점

기획 / 디자인
  • 서비스를 기획하면서 고려해야 할 점이 생각보다 많아서 복잡했던 것 같습니다.
  • 기획한 서비스를 효율적으로 사용할 수 있고 깔끔해 보이는 디자인으로 만드는 것이 어려웠습니다.
  • 처음 기획서에서 작성한 기능들보다 더 많은 기능들이 필요했고, 이로 인해 일정 관리 부분이 어려워졌던 것 같습니다
  • 각 페이지의 공통적인 레이아웃을 잡기 힘들었던 것 같습니다
협업
  • 코드 컨벤션에 대한 부분을 정했지만 구체적으로 잡고 시작하지 않아서 개발을 진행하면서 코드 스타일이 다르다는 점을 몇 가지 발견하게 되었습니다.(function ↔ arrow function, flex↔grid, export default 방법 등.. )
개발
  • 충돌이 너무 무서웠습니다.
  • airbnb eslint가 생각보다 빡빡했던 것 같습니다.
  • react-query를 사용했지만 라이브러리의 의도나 목적에 부합하지 않게 단순 api 함수만 사용했고, 제대로 응용해서 쓰진 못했던 것 같습니다.
  • 처음엔 rebase merge를 하며 충돌이 자주 일어나면서 해결에 많은 시간을 쏟아서 아쉬웠습니다.
  • 리액트 훅 및 커스텀 훅을 제대로 이해하지 못하고 사용해서 다른 로직을 생각하느라 시간이 오래 걸렸습니다.
프로젝트 관리
  • 이슈, 브랜치, PR, Github 프로젝트 등을 세팅했지만 사실상 프로젝트 탭은 잘 사용하지 못했던 것 같습니다.
  • 특정 버그가 발생하거나 추가적인 기능 개발이 필요하게 되면 시간이 더 많이 필요하게 되면서 일정 관리에 스트레스를 받게 된 것 같습니다.
문서화
  • 시간이 촉박해서 프로젝트를 진행하며 생겼던 문제들이나 에러 처리에 대해 문서로 정리를 제대로 하지 못했던 것 같습니다.
 

🤔 프로젝트 진행하며 아쉬웠던 점

기획 / 디자인
  • 다크 모드 구현하고 싶었는데 못해서 아쉬웠습니다.
협업
  • 코드 리뷰가 활발하게 진행되지 않았던 것 같습니다.
개발
  • TypeScript를 적용하지 못해서 아쉬웠습니다.
  • 기본적인 컨벤션은 정했지만 세부적인 코드 스타일은 정하지 않아서 통일성을 갖지 못해 아쉬웠습니다.
  • 테스트 코드를 작성해보고 싶었는데 일정이 안돼서 아쉬웠습니다.
  • api를 각 팀에 맞춤으로 적용하기 어렵기에 애로 사항이 있었습니다.
  • 반응형 웹사이트를 구현하지 못해서 아쉬웠습니다.
프로젝트 관리
  • 일정을 체계적으로 관리하지 못해서 시간이 부족하다는 느낌이 든 것 같습니다.
  • 팀장을 돌아가면서 하다보니 일정을 주도적으로 신경 써줄 사람이 없어서 진도가 빠르게 나가지 못한 부분도 있는 것 같습니다.
 

🤔 TODO LIST

미구현 페이지
  • 메인 페이지
      • 토글을 통해 사용자 / 포스트 카테고리 선택
  • 알림 페이지
      • 팔로우한 사람의 포스트를 알려준다(?)
  • 프로필 페이지
      • 팔로워, 팔로우, 온라인 여부(해당 프로필 사용자의 온라인 여부)
      본인 프로필일 경우 팔로우, 팔로잉 한 사람 목록 보여주는 기능 추가한다
  • 상세 페이지(모달)
      • 글쓴이의 등록된 추가 정보(나이, 키, 몸무게)를 보여준다
  • DM 페이지 및 기능
  • 자랑글 & 후기 (후 순위 구현)
  • 캐러셀
      • 베스트 좋아요 포스트 배너를 달아준다
  • Spinner
  • 모바일 반응형
  • 디자인 개선
  • 테스트 코드
  • 타입 스크립트
  • 렌더링 최적화
 

🤔 Q&A

  • 모바일 기준 레이아웃 먼저 기획하고 데탑으로 이동하는 게 맞았는지 궁금합니다.
  • 모달의 이미지가 길거나 넓을 시까지 고려한 비율 및 크기 잡는 게 어려웠습니다. 일반적으로 이미지가 너무 길거나 넓은 비율일때 적절하게 맞추는 방법이 있는지 궁금합니다.
  • 현재 api가 이미지를 한 개만 올릴 수 있도록 설계되어 있는데 다른 팀의 경우 s3를 통해 다른 링크로 이미지를 여러 개 올리시는 팀도 있었는데 혹시 다른 추천하는 방법이 있는지도 궁금합니다.
  • 현재 사이트에서 전체 포스트를 불러온 페이지를 볼때 스크롤을 길게 하다보면 화면 렌더링이 늦게 되는 경우가 있던데 이 경우는 원래 이미지가 많은 페이지 렌더링할 때 그런것인지 아니면 최적화를 하지 않아서 그런 것인지 궁금합니다.
  • lint와 prettier 설정은 같이 설정 했는데 코딩 스타일은 어디까지 통일 시켜야하고 어떻게 맞추는지 궁금합니다. prettier와 상관 없이 줄 간격이라던가 {} 사용하는 위치가 다를 때가 있어서 코드 스타일의 통일성이 떨어져 보였습니다. 이 정도 차이는 괜찮은지 궁금합니다.
  • 저희가 issue를 생성하고 이슈 번호에 따라 브랜치를 파서 작업을 했는데 사소한 버그 고칠 때도 매번 이슈를 파고 브랜치를 파고 작업해야하는 건지 궁금합니다.
  • 눈에 띄게 빨리 개선됐으면 하는 기능, 디자인이 있는지 궁금합니다.