#04 레시피 전체 조회

src/assets/css/recipe/recipe.css

@@ -0,0 +1,4 @@
+.recipe-wrapper {
+    display: flex;
+    gap: 20px;
+}

src/components/recipe/recipeItem.jsx

@@ -0,0 +1,17 @@
+import recipeImage from "../../assets/image/recipeimage.png"
+
+const RecipeItem = ({ recipe }) => {
+    return (
+        <div >
+            <img src={recipeImage} alt="Default Recipe Image" style={{ width: '100px', height: 'auto' }} />
+            <p>사진:{recipe.recipeSource}</p>
+            <h3>이름:{recipe.recipeName}</h3>
+            <p>내용:{recipe.recipeContent}</p>
+            <p>조리시간:{recipe.recipeCookingTime}(단위)</p>
+            <p>난이도:{recipe.recipeDifficulty}</p>
+            <p>조회수:{recipe.recipeViews}</p>
+        </div>
+    );
+};
+
+export default RecipeItem

src/pages/recipe/Recipe.jsx

@@ -2,6 +2,8 @@ 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 "../../assets/css/recipe/recipe.css"
 
 function Recipe() {
     const [recipeList, setRecipeList] = useState([])
@@ -11,8 +13,8 @@ function Recipe() {
         const fetchRecipes = async () => {
             try {
                 const data = await getRecipeList();
+                console.log("recipeList",data); // 가져온 데이터 확인
                 setRecipeList(data); // 상태 업데이트
-                console.log(recipeList); // 가져온 데이터 확인
             } catch (err) {
                 console.error(err);
             }
@@ -28,6 +30,11 @@ function Recipe() {
     return (
         <>
             <h1>레시피 페이지</h1>
+            <div className="recipe-wrapper">
+                {recipeList.map((recipe) => (
+                    <RecipeItem key={recipe.recipePk} recipe={recipe} />
+                ))}
+            </div>
             <ul>
                 <li>
                     <button onClick={handleAdd}>add button</button>

src/pages/recipe/addRecipe.jsx

@@ -62,6 +62,7 @@ export const AddRecipe = () => {
     // 파일 업로드 처리
     const handleRecipeSourcesChange = (e) => {
         setRecipeSources(Array.from(e.target.files)); // 여러 파일을 배열로 추가
+        console.log(Array.from(e.target.files))
     };