사용자의 상태와 취향을 받아 메뉴와 근처 맛집을 추천하는 서비스. 메인페이지와 추천 플로우 전체를 맡았고, 페이지 폴더에 뭉쳐 있던 코드를 9개월에 걸쳐 FSD 구조로 옮겼습니다.
메인 추천 화면
온보딩 5단계
위치 기반 맛집OVERVIEW
무엇을 먹을지 정하지 못하는 사람에게 메뉴를 골라주고, 근처에서 그 메뉴를 파는 가게까지 이어주는 서비스입니다. 4인 팀에서 프론트엔드로 참여해 메인페이지와 추천 플로우 전체를 맡았고, 9개월 동안 구조·서버 상태·정책 세 축을 정리했습니다.
MY SCOPE
온보딩 5단계에서 추천 결과, 메뉴 상세, 랜덤 추천까지 이어지는 화면 전체를 구현했습니다.
Geolocation 으로 위치를 받아 근처 가게를 찾는 화면과 권한 거부 경로를 처리했습니다.
페이지 폴더에 뭉쳐 있던 코드를 네 단계에 걸쳐 shared · entities · widgets 계층으로 옮겼습니다.
페이지마다 흩어져 있던 fetch 를 TanStack Query 기반 도메인 훅으로 모았습니다.
TROUBLESHOOTING
TAKEAWAYS
구조를 바꾸는 일은 한 번에 끝내려 하면 리뷰도 병합도 불가능해집니다. 내 소유 영역 → shared 전면 이동 → 중복 정리 → 계층 분리 순으로 네 번에 나눠 옮겼고, 특히 “중복 정리”를 구조 이동 뒤로 미룬 판단이 맞았습니다. 구조가 잡히기 전에는 무엇이 진짜 중복인지 알 수 없었습니다.
규칙을 도구로 강제하지 않으면 컨벤션은 샙니다. FSD 의 단방향 의존을 문서와 코드리뷰로만 지켰더니 이동 기간 중 임시 폴더가 오래 남았습니다. 지금이라면 ESLint 의 import 경계 규칙을 먼저 켜고 이동을 시작하겠습니다.
상태는 “어디서 왔는가”로 나누는 게 맞습니다. 서버에서 온 데이터를 전역 스토어에 넣기 시작하면 무효화 시점을 사람이 관리하게 됩니다. 서버 데이터는 Query, 온보딩 진행도·모달 열림 같은 클라이언트 상태는 Zustand 로 경계를 그었습니다.