사이드 프로젝트 MenuMate를 만들면서 지금까지의 작업 상황을 중간 정리하는 글입니다.
작업 상황
1. 기본 UI 제작
메인 로고, 검색창 UI, 검색 결과 카드 UI 제작
2026.03.16 - [개인 프로젝트 MenuMate] - MenuMate 검색창 UI 설계
추후 CSS 수정 작업 및 디자인 변경 작업 할 예정(좀 더 보기 좋게)
2. 검색 상태 관리 설계
검색 관련 컴포넌트를 UI 담당 컴포넌트 SearchBar와 검색 상태, 로직 담당 컴포넌트 SearchSection으로 나눠 관심사를 분리
2026.03.19 - [개인 프로젝트 MenuMate] - MenuMate 검색 상태, 로직 담당 컴포넌트 SearchSection 설계
MenuMate 검색 상태, 로직 담당 컴포넌트 SearchSection 설계
SearchBar는 프레젠테이셔널 컴포넌트입니다. 검색 상태와 제출 로직을 담당하는 컴포넌트인 SearchSection을 설계한 과정을 정리한 글입니다. 검색 상태 inputValue: 입력 중인 값submittedKeyword: 검색 확정
dev-in96.tistory.com
2026.03.19 - [개인 프로젝트 MenuMate] - MenuMate SearchSection 상태 추가 및 수정
3. 식약처 조리식품의 레시피 DB를 활용한 API 연결 작업
API 호출 테스트 결과, 예상보다 많은 필드가 제시되었지만 실제로 쓸 필드만 꺼내 씀
mapper 작성 전에 응답 구조를 TypeScript로 읽기 쉽게 만들어 둠
mapper 파일을 만들어 매핑 처리
빈값처리 및 이미지 fallback 처리
앞으로의 작업
1. 상세 페이지 구현
현재는 검색 기능을 사용하면 해당 요리의 이미지, 이름, 요리 유형, 관련 해시 태그 정도의 간단한 정보만 담긴 검색결과 카드 형태로만 결과가 나오고 있습니다. 이제 해당 검색결과 카드를 통해 해당 요리의 상세 정보, 레시피 등을 담은 상세 페이지를 구현해야 합니다.
2. UI 손보기
현재 기능 구현 중심으로 작업을 이어나가고 있지만 최종 결과물에서는 사용시 불편하지 않고 보기 좋은 UI를 만들고자 하기에 UI 디자인 수정 작업을 할 것입니다.
'개인 프로젝트 MenuMate' 카테고리의 다른 글
| MenuMate 외부 API Raw타입 정규화 과정 정리, 레시피 페이지 조회 흐름 요약 (0) | 2026.03.30 |
|---|---|
| MenuMate 레시피 페이지(검색 결과 상세 페이지) 고민 사항들 (0) | 2026.03.26 |
| 오픈 API 문서를 읽을 때 주의할 점 (0) | 2026.03.23 |
| MenuMate SearchSection 상태 추가 및 수정 (0) | 2026.03.19 |
| MenuMate 검색 상태, 로직 담당 컴포넌트 SearchSection 설계 (0) | 2026.03.19 |