[TIL] 팀프로젝트 회고

• 프로젝트 명 : CookHub 🌿

 

• 프로젝트 소개 : CookHub는 사용자들이 요리와 관련된 정보를 쉽게 찾고, 🔍 요리법에 대한 리뷰를 댓글로 남길 수 있는 사이트를 제공

• 다양한 요리 레시피 제공: 사용자들은 다양한 요리 레시피를 탐색할 수 있다.
• 사용자 참여: 사용자들은 요리 레시피에 대해서 다른 사람들과 의견을 공유할 수 있다.
• 직관적인 사용자 인터페이스: 리액트와 Next.js를 사용하여 사용자 친화적인 인터페이스를 제공한다.

 

• 개발 기간 :  2024.03.18 ~ 2024.03.25 (8일)

 

• 개발 환경 

• 🚀 Stacks

: html, css, typeScript, React

 

• 🛠  Tools

: Figma, Git

 

• 👥  Collaboration

: GitHub, Notion, Slack

 

• 📂 Packages & Libraries

: Yarn, TailWind CSS, React Query, Next.js, Supabase, Zustand

 

 

 

 

 

[  🗒️ 구현 항목  ]

 

 

 

• 🏷️ 회원가입 페이지

 

 

회원가입 페이지에서는 닉네임, 이메일, 비밀번호를 사용하여 회원가입을 할 수 있고, .

닉네임은 자릿수를 검사, 이메일은 이메일 형식을 검사, 비밀번호는 숫자와 영어의 조합과 자릿수를 검사한다.

 

 

 

 

• 🏷️ 로그인 페이지

 

 

 

 

로그인 페이지에서는 가입했던 이메일과 비밀번호를 입력하여 로그인이 가능하다.
이메일 형식을 확인하여 형식과 맞지 않을 경우에 경고창을 띄웁니다.

 

 

 

 

 

 

• 🏷️ 메인 페이지

 

 

 

 

로그인을 하지않은 사용자와 로그인한 사용자 모두 메인 페이지에 접근이 가능하다.
메인 페이지에서는 레시피를 검색할 수 있고, 2가지 항목으로 나뉘어 레시피가 뜬다.

 

 

 

 

 

 

사용자들에게 랜덤으로 제공하는 '추천 레시피'를 보여준다.

 

 

 

 

 

• 🏷️ 카테고리별 페이지

 

 

로그인을 하지않은 사용자와 로그인한 사용자 모두 카테고리 페이지에 접근이 가능하게했고,

카테고리 페이지에서는 요리 종류와 칼로리를 기준으로 사용자가 원하는 레시피를 쉽게 찾을 수 있도록 필터링 기능을 제공한다.

검색창에 키워드를 검색하면 해당 키워드를 포함하는 레시피를 띄운다.

전체 검색 버튼을 누르거나 헤더의 카테고리별 페이지를 눌러 전체 레시피를 검색할 수 있다.

 

 

 

 

 

 

 

• 🏷️ 레시피 상세 페이지

 

 

 

 

로그인을 하지않은 사용자와 로그인한 사용자 모두 레시피 상세 페이지에 접근이 가능하다.

메인 페이지, 카테고리 페이지에서 레시피를 클릭하면 상세 페이지로 넘어간다.

 

 

 

 

해당 레시피의 이름, 해쉬태그, 영양성분, 재료를 띄워 보여준다.

스크랩하기를 눌러 레시피를 스크랩할 수 있다.

 

 

 

 

 

레시피에 대한 리뷰를 남길 수 있게 댓글 기능을 추가하였다.

댓글 기능은 로그인한 사용자만 달 수 있으며, 로그인하지 않고 댓글을 달려고 할 시,

알림창을 띄우고 로그인 페이지로 이동한다.

댓글 총 갯수를 카운트하여 몇 개의 댓글이 달렸는지 한 눈에 파악할 수 있다.

댓글 작성자에게만 수정, 삭제 버튼이 보인다.

 

 

 

 

 

• 🏷️ 마이 페이지

 

 

 

로그인한 사용자만 마이 페이지에 접근이 가능한다.
마이 페이지에서는 기본 이미지, 가입했던 이메일과 닉네임을 보여준다.
댓글을 작성했던 레시피로 이동할 수 있다.

 

수정버튼을 눌러 이미지와 닉네임을 변경할 수 있습니다.

 

 

 

 

 

[  Keep - 현재 만족하고 있는 부분  ]

• Issue, PR, Projects를 활용하여 버전 관리가 용이하고 충돌 발생 횟수가 적어짐
• 깃허브의 Projects를 활용하여 프로젝트의 진행 상태를 팀원 모두가 공유하여 진행을 원활하게 할 수 있었다.
• 대용량 API 데이터를 DB에 넣을 수 있게 되어 구현이 많이 편해짐
• SQL 기반의 백엔드 서비스를 이용할 수 있게 됨
• SQL 함수를 생성하여 React 컴포넌트에서 다루는 방법을 배움
• 기획했던 기능의 대부분을 구현하는데 성공함

 

 

[  Problem - 불편하게 느끼는 부분  ]

• UX(User Experience) 관점에서 아쉬웠던 부분
  • 페이지네이션 기능
  • 사용자 친화적이지 않은 에러 메시지 출력
  • 카테고리 중복설정 기능
• UI(User Interface) 관점에서 아쉬웠던 부분
  • 댓글 작성 시, 작성한 날짜와 시간을 표시하지 못함
  • 댓글 작성 시, 아바타를 불러오지 못함
  • 반응형 CSS를 구현하지 못함
• Next.js의 강점인 SSR을 활용하지 못함
• Supabase를 활용한 인증/인가를 잘못된 방식(LocalStorage의 access_token 활용)으로 구현함
• 소셜 로그인을 구현하고 싶었지만 구현하지 못함
• 커밋 메시지, PR 메시지 형태를 통일하지 못함

 

 

[  Try - Problem에 대한 해결책, 당장 실행 가능한 것  ]

• 에러 메시지 출력 내용 변경
• 데이터를 fetch하는 과정을 서버 컴포넌트에서 실행할 수 있도록 설정함