#04 레시피 상세 조회 페이지

src/App.jsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom"
 import Layout from "./pages/layouts/Layout"
 import Ingredient from "./pages/ingredient/Ingregdient"
 import Recipe from "./pages/recipe/Recipe"
+import RecipeDetail from "./pages/recipe/RecipeDetail"
 import {AddRecipe} from "./pages/recipe/AddRecipe"
 import Join from "./pages/user/Join"
 
@@ -17,6 +18,7 @@ function App() {
                     <Route path="recipe" >
                         <Route index element={<Recipe/>} />
                         <Route path='create' element={<AddRecipe/>} />
+                        <Route path=':recipePk' element={<RecipeDetail/>}/>
                     </Route>
                     <Route path="join" element={<Join/>} />
                 </Route>

src/components/recipe/recipeItem.jsx

@@ -1,10 +1,10 @@
-import recipeImage from "../../assets/image/recipeimage.png"
+import defaultRecipeImg from "../../assets/image/recipeimage.png"
 
 const RecipeItem = ({ recipe }) => {
+    const imgSrc = recipe.recipeSource.length!==0?recipe.recipeSource[0].recipeSourceSave:defaultRecipeImg
     return (
         <div >
-            <img src={recipeImage} alt="Default Recipe Image" style={{ width: '100px', height: 'auto' }} />
-            <p>사진:{recipe.recipeSource}</p>
+            <img src={`${imgSrc}`} alt="Recipe Image" style={{ width: '100px', height: 'auto' }} />
             <h3>이름:{recipe.recipeName}</h3>
             <p>내용:{recipe.recipeContent}</p>
             <p>조리시간:{recipe.recipeCookingTime}(단위)</p>

src/pages/recipe/Recipe.jsx

@@ -1,8 +1,7 @@
 import { useEffect, useState,useCallback } from "react"
 import { getRecipeList } from "../../sources/api/recipeAPI.jsx";
 import {Route, useNavigate} from "react-router-dom";
-import { AddRecipe} from "./addRecipe.jsx";
-import RecipeItem from "../../components/recipe/recipeItem.jsx"
+import RecipeItem from "../../components/recipe/RecipeItem.jsx"
 import "../../assets/css/recipe/recipe.css"
 
 function Recipe() {
@@ -43,5 +42,4 @@ function Recipe() {
         </>
     )
 }
-
 export default Recipe

src/pages/recipe/RecipeDetail.jsx

@@ -0,0 +1,59 @@
+import { useParams } from 'react-router-dom'
+import { useEffect, useState,useCallback } from "react"
+import { getRecipeDetail } from "../../sources/api/recipeAPI.jsx";
+import defaultRecipeImg from "../../assets/image/recipeimage.png"
+
+
+function RecipeDetail() {
+    const { recipePk } = useParams()
+    const [recipeDetail, setRecipeDetail] = useState({})
+    useEffect(() => {
+        const fetchRecipes = async () => {
+            try {
+                const data = await getRecipeDetail(recipePk);
+                console.log("recipeDetail",data); 
+                setRecipeDetail(data); 
+            } catch (err) {
+                console.error(err);
+            }
+        };
+        fetchRecipes();
+    }, [recipePk]);
+
+    const recipeImage = 
+        recipeDetail.recipeSource && recipeDetail.recipeSource.length > 0
+            ? recipeDetail.recipeSource[0]
+            : defaultRecipeImg;
+
+    return (
+        <>
+        <h1>레시피 상세조회 페이지</h1>
+        <div>
+            <img src={recipeImage} alt="레시피 이미지" />
+            <h3>이름:{recipeDetail.recipeName}</h3>
+            <p>내용:{recipeDetail.recipeContent}</p>
+            <p>조리시간:{recipeDetail.recipeCookingTime}(단위)</p>
+            <p>난이도:{recipeDetail.recipeDifficulty}</p>
+            <p>조회수:{recipeDetail.recipeViews}</p>
+            <p>재료</p>
+            {recipeDetail.ingredients && recipeDetail.ingredients.map(ingredient => (<p key={ingredient.ingredientPk}>{ingredient.ingredientName}</p>))}
+            <p>요리과정</p>
+            {recipeDetail.recipeStep && 
+            recipeDetail.recipeStep.map((step, index) => (
+                <div key={step.recipeStepOrder}>
+                    <p>Step {index + 1}: {step.recipeStepContent}</p>
+                    {step.recipeStepSource && (
+                        <img
+                            src={step.recipeStepSource}
+                            alt={`Step ${index + 1}`}
+                        />
+                    )}
+                </div>
+            ))}
+
+        </div>
+        </>
+    )
+}
+
+export default RecipeDetail

src/sources/api/recipeAPI.jsx

@@ -4,6 +4,12 @@ export const API_URL_HOST = "http://localhost:8080";
 
 const prefix = `${API_URL_HOST}/recipe`;
 
+export const getRecipeDetail = async (recipePk) => {
+    const url = `${prefix}/${recipePk}`
+    const res = await axios.get(url)
+    return res.data
+}
+
 export const getRecipeList = async () => {
     const url = `${prefix}`;
     const res = await axios.get(url);