← 갤러리로 돌아가기레시피요리블로그
이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.
데모 보러 가기🛠️ 개발 가이드
원본 레시피 앱의 실제 색상 토큰과 레이아웃을 그대로 가져와 디자인 동일성을 확보한 데모예요.
기술 스택
Next.jsReact원본 색상·레이아웃 이식
핵심 구현 포인트
- 원본의 테라코타(#C94B2A) 등 실제 색상 토큰을 그대로 옮겨왔어요.
- 재료 매칭률은 보유 재료와 레시피 재료명을 정규화(공백 제거·소문자화)해서 비교해요.
- 2구 동시 조리 시간은 병렬로 처리 가능한 스텝을 버너별로 나눠 최댓값으로 계산해요.
이렇게 만들면 돼요
- 원본 mockRecipes/mockBlogPosts(TypeScript)를 JS로 변환해요.
- 재료 이름 정규화 + 매칭 알고리즘을 작성해요.
- 냉장고 · 레시피 · 블로그 3개 탭으로 화면을 구성해요.
참고 파일
components/gallery/FlavorSyncDemo.jsxdata/flavorsyncRecipes.jsdata/flavorsyncBlog.js