feat: 레시피 상세/조리 단계를 목업 대신 실제 백엔드 연동으로 교체

RecipeDetailPage·CookingStepsPage가 lib/recipes.ts의 하드코딩된 3개 목업 대신
POST /recommend(recipe_id 포함) 응답으로 재료 분류(필수/생략가능)와 조리 단계를
채우도록 변경. RecipeDetailPage에 로딩/에러 상태 UI를 추가하고, 조리 시작 시
받아온 steps/name을 라우터 state로 다음 페이지에 전달해 재요청을 줄인다.

Author: kallin1

src/lib/api.ts

@@ -72,9 +72,35 @@ export interface RecipeSummaryDto {
   missing_ingredients: string[];
 }
 
+export interface SubstituteDto {
+  ingredient_name: string;
+  substitute_name: string;
+  note: string | null;
+  allergy_conflict: boolean;
+}
+
+export interface ClassificationDto {
+  required: string[];
+  optional: string[];
+  reason: string | null;
+}
+
+export interface RecipeDetailDto {
+  recipe_id: string;
+  name: string;
+  cooking_time: number | null;
+  difficulty: string | null;
+  category: string | null;
+  cooking_method: string | null;
+  missing_ingredients: string[];
+  classification: ClassificationDto | null;
+  substitutes: SubstituteDto[];
+  cooking_steps: string[];
+}
+
 export interface RecommendResponseDto {
   recipes: RecipeSummaryDto[];
-  detail: unknown | null;
+  detail: RecipeDetailDto | null;
   message: string;
 }
 
@@ -129,11 +155,16 @@ export function getAllergens(): Promise<AllergenDto[]> {
 export async function recommend(
   ingredientIds: string[],
   allergenIds: string[],
+  recipeId?: string,
 ): Promise<RecommendResponseDto> {
   const response = await fetch(`${API_URL}/recommend`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ ingredient_ids: ingredientIds, allergen_ids: allergenIds }),
+    body: JSON.stringify({
+      ingredient_ids: ingredientIds,
+      allergen_ids: allergenIds,
+      ...(recipeId ? { recipe_id: recipeId } : {}),
+    }),
   });
   if (!response.ok) {
     throw new Error(`레시피 추천 요청이 실패했어요 (${response.status})`);

src/lib/recipes.ts

@@ -1,17 +1,29 @@
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { PrimaryButton } from '../components/PrimaryButton';
 import { useVoiceRecorder } from '../hooks/useVoiceRecorder';
 import { askTuiStream } from '../lib/askTuiStream';
+import { recommend } from '../lib/api';
 import { transcribeAudio } from '../lib/googleStt';
-import { getRecipe } from '../lib/recipes';
-import { getAllergies, getSelectedRecipe, getSelectedRecipeId } from '../lib/storage';
+import {
+  getAllergies,
+  getIngredients,
+  getSelectedRecipe,
+  getSelectedRecipeId,
+} from '../lib/storage';
 import { colors, shadow } from '../theme';
 
+interface CookingStepsNavState {
+  steps?: string[];
+  name?: string;
+}
+
 export function CookingStepsPage() {
   const navigate = useNavigate();
-  const [recipeName, setRecipeName] = useState('두부계란덮밥');
-  const [steps, setSteps] = useState<string[]>([]);
+  const location = useLocation();
+  const navState = (location.state as CookingStepsNavState | null) ?? null;
+  const [recipeName, setRecipeName] = useState(navState?.name ?? getSelectedRecipe());
+  const [steps, setSteps] = useState<string[]>(navState?.steps ?? []);
   const [stepIndex, setStepIndex] = useState(0);
   const [question, setQuestion] = useState('');
   const [isAsking, setIsAsking] = useState(false);
@@ -22,10 +34,22 @@ export function CookingStepsPage() {
   const recorder = useVoiceRecorder();
 
   useEffect(() => {
-    const name = getSelectedRecipe();
-    setRecipeName(name);
-    setSteps(getRecipe(name).steps);
-  }, []);
+    if (navState?.steps?.length) return;
+
+    const ingredientIds = getIngredients().map((i) => i.id);
+    const allergenIds = getAllergies().selected.map((a) => a.id);
+    const recipeId = getSelectedRecipeId();
+
+    recommend(ingredientIds, allergenIds, recipeId)
+      .then((result) => {
+        if (!result.detail) return;
+        setRecipeName(result.detail.name);
+        setSteps(result.detail.cooking_steps);
+      })
+      .catch(() => {
+        // 조리 단계를 못 불러와도 화면은 유지하고, 아래 질문 기능은 계속 쓸 수 있게 둔다.
+      });
+  }, [navState]);
 
   const total = steps.length || 1;
   const isLast = stepIndex >= total - 1;

src/pages/CookingStepsPage.tsx

@@ -3,22 +3,88 @@ import { useNavigate } from 'react-router-dom';
 import iconFaceChef from '../assets/icon-face-chef.png';
 import { BackHeader } from '../components/BackHeader';
 import { PrimaryButton } from '../components/PrimaryButton';
-import { getRecipe, type Recipe } from '../lib/recipes';
-import { getSelectedRecipe } from '../lib/storage';
+import { recommend, type RecipeDetailDto } from '../lib/api';
+import { getAllergies, getIngredients, getSelectedRecipe, getSelectedRecipeId } from '../lib/storage';
 import { colors, shadow } from '../theme';
 
 export function RecipeDetailPage() {
   const navigate = useNavigate();
-  const [recipeName, setRecipeName] = useState('두부계란덮밥');
-  const [recipe, setRecipe] = useState<Recipe | null>(null);
+  const [recipeName, setRecipeName] = useState(getSelectedRecipe());
+  const [detail, setDetail] = useState<RecipeDetailDto | null>(null);
+  const [phase, setPhase] = useState<'loading' | 'done' | 'error'>('loading');
+  const [error, setError] = useState('');
 
   useEffect(() => {
-    const name = getSelectedRecipe();
-    setRecipeName(name);
-    setRecipe(getRecipe(name));
+    const ingredientIds = getIngredients().map((i) => i.id);
+    const allergenIds = getAllergies().selected.map((a) => a.id);
+    const recipeId = getSelectedRecipeId();
+
+    recommend(ingredientIds, allergenIds, recipeId)
+      .then((result) => {
+        if (!result.detail) {
+          throw new Error('레시피 상세 정보를 불러오지 못했어요.');
+        }
+        setDetail(result.detail);
+        setRecipeName(result.detail.name);
+        setPhase('done');
+      })
+      .catch((err) => {
+        setError(err instanceof Error ? err.message : '레시피 상세 정보를 불러오지 못했어요.');
+        setPhase('error');
+      });
   }, []);
 
-  const steps = recipe?.steps ?? [];
+  const steps = detail?.cooking_steps ?? [];
+  const requiredIngredients = detail?.classification?.required ?? detail?.missing_ingredients ?? [];
+  const optionalIngredients = detail?.classification?.optional ?? [];
+
+  if (phase === 'loading') {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+        <BackHeader title="레시피 상세" onBack={() => navigate('/recipes/loading')} maxWidth={560} />
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 14,
+            color: colors.textMuted,
+          }}
+        >
+          레시피 정보를 불러오는 중이에요..
+        </div>
+      </div>
+    );
+  }
+
+  if (phase === 'error') {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+        <BackHeader title="레시피 상세" onBack={() => navigate('/recipes/loading')} maxWidth={560} />
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 12,
+            padding: '0 24px',
+            textAlign: 'center',
+          }}
+        >
+          <div style={{ fontSize: 15, color: colors.allergyText, wordBreak: 'keep-all' }}>{error}</div>
+          <div
+            onClick={() => navigate('/recipes/loading')}
+            style={{ fontSize: 13, fontWeight: 800, color: colors.teal, cursor: 'pointer' }}
+          >
+            다시 시도하기
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
@@ -68,7 +134,7 @@ export function RecipeDetailPage() {
               borderRadius: 999,
             }}
           >
-            <span>⏱ {recipe?.time}</span>
+            <span>⏱ {detail?.cooking_time != null ? `${detail.cooking_time}분` : '-'}</span>
             <span>·</span>
             <span>{steps.length}단계</span>
           </div>
@@ -86,8 +152,8 @@ export function RecipeDetailPage() {
           <div style={{ fontSize: 13, fontWeight: 700, color: colors.navy, marginBottom: 12 }}>
             필요한 재료
           </div>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-            {(recipe?.ingredients ?? []).map((item) => (
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: optionalIngredients.length ? 16 : 0 }}>
+            {requiredIngredients.map((item) => (
               <div
                 key={item}
                 style={{
@@ -103,6 +169,30 @@ export function RecipeDetailPage() {
               </div>
             ))}
           </div>
+          {optionalIngredients.length > 0 && (
+            <>
+              <div style={{ fontSize: 13, fontWeight: 700, color: colors.navy, marginBottom: 12 }}>
+                생략 가능한 재료
+              </div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                {optionalIngredients.map((item) => (
+                  <div
+                    key={item}
+                    style={{
+                      padding: '8px 14px',
+                      borderRadius: 999,
+                      background: colors.bg,
+                      color: colors.textMuted,
+                      fontSize: 13,
+                      fontWeight: 700,
+                    }}
+                  >
+                    {item}
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
         </div>
 
         <div
@@ -145,7 +235,9 @@ export function RecipeDetailPage() {
           </div>
         </div>
 
-        <PrimaryButton onClick={() => navigate('/cooking/steps')}>
+        <PrimaryButton
+          onClick={() => navigate('/cooking/steps', { state: { steps, name: recipeName } })}
+        >
           요리 시작하기
         </PrimaryButton>
       </div>