프로젝트 소개
집밥도감 
•
한 줄 설명 : 요리를 하고 싶지만 요리가 어려운 사용자들에게 쉽게 레시피를 안내하는 서비스
•
상세설명 : 초보자들이 쉽게 요리를 배울 수 있도록 경험치와 레벨업 요소를 도입한 레시피 제공 서비스입니다. 인기/추천 레시피부터 냉장고 재료 활용 레시피까지 다양한 요리를 재미있게 탐험할 수 있습니다. 로그인, 스크랩, 마이페이지 등 사용자 맞춤 기능도 포함된 웹앱입니다.
•
개발인원 : 프론트엔드 개발자 4명 + UXUI 디자이너 2명
•
개발 기간 : 2024년 10월 19일 → 2024년 11월 21일
•
테스트 ID : test@test.com / Password : test1234
담당 역할
1) 담당 페이지 및 기능
1.
a.
스크랩 아이콘 클릭 시 스크랩 폴더에 저장
b.
폴더명 입력 시 스크랩 폴더 생성 후 저장
c.
스크랩 한 페이지에서 “편집” 누르면 supabase DB까지 모두 삭제
d.
한 페이지 당 8개의 레시피 보여도록 페이지네이션 작업
e.
Zustand, TanStack Query 상태관리
2.
a.
프로필 (사진, 자기소개, 닉네임) 수정 및 삭제 createPortal 로 모달 구현
b.
나만의 레시피 / 댓글 작성 시 경험치에 따른 랭킹 업데이트
c.
사용자가 작성한 글, 댓글 Tab-menu 및 페이지네이션으로 구현
2) 일정관리 및 문서화
•
Notion, Trello, 기능명세서 등을 활용하여 전체 일정 체크 및 팀 공유
•
회의록 작성 및 보고
•
LightHouse 성능 최적화 보고서 작성
•
발표 자료 준비 및 발표 진행 (중간발표자료 총괄 / 최종발표 PPT 제작)
아키텍처
ERD
트러블슈팅
1.
2.
성과
•
마이페이지 렌더링 속도 개선 : FCP는 0.8s에서 0.3s로, LCP는 4.7s에서 2.6s로 절반 이상 개선
•
Lighthouse 점수 증가 : 적용 전 65점에서 81점으로 약 25% 점수 향상
•
공통 컴포넌트 사용으로 모든 페이지에서 동일한 레이아웃과 동작을 유지