diff --git a/src/assets/css/default.css b/src/assets/css/default.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/assets/css/recipe/recipe.css b/src/assets/css/recipe/recipe.css
new file mode 100644
index 0000000..8a3bd0a
--- /dev/null
+++ b/src/assets/css/recipe/recipe.css
@@ -0,0 +1,4 @@
+.recipe-wrapper {
+    display: flex;
+    gap: 20px;
+}
\ No newline at end of file
diff --git a/src/assets/image/recipeimage.png b/src/assets/image/recipeimage.png
new file mode 100644
index 0000000..55c5d9d
Binary files /dev/null and b/src/assets/image/recipeimage.png differ
diff --git a/src/components/recipe/default.jsx b/src/components/recipe/default.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/recipe/recipeItem.jsx b/src/components/recipe/recipeItem.jsx
new file mode 100644
index 0000000..dacd80f
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/pages/recipe/Recipe.jsx b/src/pages/recipe/Recipe.jsx
index b965de2..54cedb9 100644
--- a/src/pages/recipe/Recipe.jsx
+++ b/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>
diff --git a/src/pages/recipe/addRecipe.jsx b/src/pages/recipe/addRecipe.jsx
index f04c1e3..d0988ba 100644
--- a/src/pages/recipe/addRecipe.jsx
+++ b/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))
     };