diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..1588f65
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,24 @@
+---
+name: 🐛 Bug Report
+about: 버그를 보고합니다
+title: "[Bug] "
+labels: bug
+assignees: ''
+---
+
+## 🐞 버그 설명
+- 버그에 대해 간단히 설명해주세요.
+
+## ✅ 재현 방법
+- 버그를 재현하려면 다음 단계를 따르세요:
+  1. [예: 페이지 이동 경로]
+  2. [예: 특정 버튼 클릭]
+  3. [예: 기대되는 결과]
+
+## 🖥 환경 정보
+- OS: [Windows, macOS, Linux 등]
+- Browser: [Chrome, Firefox 등]
+- Version: [앱/브라우저 버전]
+
+## 📸 스크린샷
+- 버그를 보여주는 스크린샷을 추가해주세요 (필요한 경우).
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..9880a67
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,16 @@
+---
+name: ✨ Feature Request
+about: 새로운 기능을 요청합니다
+title: "[Feature] "
+labels: enhancement
+assignees: ''
+---
+
+## 🌟 기능 설명
+- 추가하고 싶은 기능이나 변경 사항을 간략히 설명해주세요.
+
+## 🤔 이유
+- 이 기능이 왜 필요한지, 어떤 문제를 해결하는지 설명해주세요.
+
+## 📋 추가 정보
+- 기능과 관련된 참고 자료나 추가 정보를 포함해주세요.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000..3d75a26
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,34 @@
+## 📋 요약
+- 이 Pull Request의 목적과 주요 변경 사항을 간략히 설명해주세요.
+
+## 🛠 변경 사항
+- 이번 Pull Request에서 작업한 주요 변경 사항은 다음과 같습니다:
+  - [x] 새로운 기능 추가 또는 버그 수정
+  - [x] 코드 리팩토링 또는 최적화
+  - [x] 문서 업데이트
+
+## 🔗 관련 이슈
+- 이 PR로 해결되는 이슈: #[이슈 번호]
+- 관련된 이슈: #[이슈 번호]
+
+## 📸 스크린샷 또는 GIF (해당되는 경우)
+- UI 변경이 있는 경우 변경 사항을 보여주는 스크린샷이나 GIF를 추가해주세요.
+
+## ✅ 체크리스트
+- [ ] 코드가 정상적으로 동작하는지 테스트했습니다.
+- [ ] 관련 문서를 작성하거나 업데이트했습니다. (해당되는 경우)
+- [ ] 변경 사항을 반영한 테스트 코드를 추가했습니다.
+- [ ] 모든 테스트가 성공적으로 통과했습니다.
+
+## 🛡 테스트 방법
+- 변경 사항을 확인하기 위한 테스트 방법을 단계별로 작성해주세요:
+  1. 브랜치를 로컬로 가져옵니다.
+  2. 아래 명령어를 사용해 애플리케이션 또는 테스트를 실행합니다:
+     ```
+     # 예시 명령어
+     ./run_tests.sh
+     ```
+  3. 예상 동작이나 출력 결과를 확인합니다.
+
+## 📚 추가 참고 사항
+- 이 PR과 관련해 리뷰어가 알아야 할 추가 내용이 있다면 작성해주세요.
diff --git a/src/App.jsx b/src/App.jsx
index 90d4bac..0bfc956 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,21 +1,27 @@
 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 {AddRecipe} from "./pages/recipe/AddRecipe"
 import UsersIngredientItem from "./components/ingredient/UsersIngredientItem"
 
 function App() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Layout/>}>
-          <Route path="ingredient">
-            <Route index element={<Ingredient/>}/>
-            {/* <Route path=':ingredientMyRefrigeratorPk' element={<UsersIngredientItem/>} /> */}
-          </Route>
-        </Route>
-      </Routes>
-    </BrowserRouter>
-  )
-}
+    return (
+        <BrowserRouter>
+            <Routes>
+                <Route path="/" element={<Layout/>}>
+                    <Route path="ingredient">
+                        <Route index element={<Ingredient/>}/>
+                        {/* <Route path=':ingredientMyRefrigeratorPk' element={<UsersIngredientItem/>} /> */}
+                    </Route>
+                    <Route path="recipe" >
+                        <Route index element={<Recipe/>} />
+                        <Route path='create' element={<AddRecipe/>} />
+                    </Route>
+                </Route>
 
-export default App
+            </Routes>
+        </BrowserRouter>
+    )
+}
+export default App
\ No newline at end of file
diff --git a/src/assets/image/noimage.jpg b/src/assets/image/noimage.jpg
new file mode 100644
index 0000000..110d770
Binary files /dev/null and b/src/assets/image/noimage.jpg differ
diff --git a/src/components/recipe/default.jsx b/src/components/recipe/default.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/recipe/Recipe.jsx b/src/pages/recipe/Recipe.jsx
new file mode 100644
index 0000000..b965de2
--- /dev/null
+++ b/src/pages/recipe/Recipe.jsx
@@ -0,0 +1,40 @@
+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";
+
+function Recipe() {
+    const [recipeList, setRecipeList] = useState([])
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const fetchRecipes = async () => {
+            try {
+                const data = await getRecipeList();
+                setRecipeList(data); // 상태 업데이트
+                console.log(recipeList); // 가져온 데이터 확인
+            } catch (err) {
+                console.error(err);
+            }
+        };
+
+        fetchRecipes(); // 비동기 작업 호출
+    }, []);
+
+    const handleAdd = useCallback(() => {
+        navigate("/recipe/create");
+    },[navigate])
+
+    return (
+        <>
+            <h1>레시피 페이지</h1>
+            <ul>
+                <li>
+                    <button onClick={handleAdd}>add button</button>
+                </li>
+            </ul>
+        </>
+    )
+}
+
+export default Recipe
\ No newline at end of file
diff --git a/src/pages/recipe/addRecipe.jsx b/src/pages/recipe/addRecipe.jsx
new file mode 100644
index 0000000..f04c1e3
--- /dev/null
+++ b/src/pages/recipe/addRecipe.jsx
@@ -0,0 +1,317 @@
+
+import { useState } from 'react';
+import { createRecipe } from "../../sources/api/recipeAPI.jsx";
+
+const initialState = {
+    recipeName: '',
+    recipeCookingTime: 0,
+    recipeDifficulty: 0,
+    recipeContent: '',
+    recipeSteps: [],
+    recipeCategoryPk: 0,
+    userPk: 0,
+};
+
+export const AddRecipe = () => {
+
+    const [request, setRequest] = useState({ ...initialState });
+
+    const [recipeSources, setRecipeSources] = useState([]);
+
+    const [recipeStepSources, setRecipeStepSources] = useState([]);
+
+    const [result, setResult] = useState(null);
+
+    const defaultUrl = 'https://picsum.photos/200/300';
+    const handleClickAdd = () => {
+
+        const formData = new FormData();
+
+        // request 기본 글은 그냥 추가
+        formData.append("request",new Blob([JSON.stringify(request)],{type:"application/json"}));
+
+        // recipeSources 파일 배열 추가
+        recipeSources.forEach(file => {
+            formData.append(`recipeSources`, file); // 같은 이름으로 서버에 전달
+        });
+
+        // recipeStepSources 추가
+        recipeStepSources.forEach((files, stepIndex) => {
+            if(files) {
+                files.forEach(file => {
+                    formData.append(`recipeStepSources`, file);
+                })
+            }
+        });
+
+        createRecipe(formData)
+            .then(res => {
+                console.log(res);
+                setResult(res);
+
+                // 사용 후 초기화
+                setRequest({ ...initialState });
+                setRecipeSources([]);
+                setRecipeStepSources([]);
+            })
+            .catch(err => {
+                console.log(err);
+            });
+    };
+
+    // 파일 업로드 처리
+    const handleRecipeSourcesChange = (e) => {
+        setRecipeSources(Array.from(e.target.files)); // 여러 파일을 배열로 추가
+    };
+
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setRequest(prevState => ({
+            ...prevState,
+            [name]: value,
+        }));
+    };
+
+    const addStep =  (index) => {
+        setRequest((prevState) => {
+            const updatedSteps = [...prevState.recipeSteps];
+            const newStep = {
+                recipeStepOrder: index + 2,
+                recipeStepContent: '',
+            };
+
+            updatedSteps.splice(index + 1, 0, newStep); // 클릭된 스텝 아래 삽입
+
+            // 전체 순서 업데이트
+            const updatedOrderedSteps = updatedSteps.map((step, idx) => ({
+                ...step,
+                recipeStepOrder: idx + 1, // 순서 재정렬
+            }));
+
+            return {
+                ...prevState,
+                recipeSteps: updatedOrderedSteps,
+            };
+        });
+
+        // recipeStepSources에도 빈 값 추가
+        setRecipeStepSources((prevSources) => {
+            const updatedSources = [...prevSources];
+            updatedSources.splice(index + 1, 0, null); // 클릭된 스텝 아래에 빈 값 삽입
+            return updatedSources;
+        });
+
+    };
+
+    const removeStep =  (index) => {
+        setRequest((prevState) => {
+            const updatedSteps = [...prevState.recipeSteps];
+            updatedSteps.splice(index, 1); // 해당 인덱스 스텝 삭제
+
+            // 순서 재정렬
+            const updatedOrderedSteps = updatedSteps.map((step, idx) => ({
+                ...step,
+                recipeStepOrder: idx + 1,
+            }));
+
+            return {
+                ...prevState,
+                recipeSteps: updatedOrderedSteps,
+            };
+        });
+
+        // recipeStepSources에서도 해당 인덱스의 이미지 삭제
+        setRecipeStepSources((prevSources) => {
+            const updatedSources = [...prevSources];
+            updatedSources.splice(index, 1); // 해당 인덱스 삭제
+            return updatedSources;
+        });
+    };
+
+    const handleStepChange = (e, index) => {
+        const { name, value } = e.target;
+        setRequest(prevState => {
+            const updatedSteps = [...prevState.recipeSteps];
+            updatedSteps[index] = { ...updatedSteps[index], [name]: value };
+            return {
+                ...prevState,
+                recipeSteps: updatedSteps,
+            };
+        });
+    };
+
+    const handleRecipeStepSourcesChange = (e, index) => {
+        const files = Array.from(e.target.files||[]); // 업로드된 파일 리스트
+
+        setRecipeStepSources((prevSources) => {
+            const updatedSources = [...prevSources];
+            updatedSources[index] = files.length > 0 ? files : null; // 파일이 있으면 업데이트, 없으면 null
+            return updatedSources;
+        });
+    };
+
+    const printRecipeStepSources = () => {
+        console.log(recipeStepSources);
+    }
+    return (
+        <div className={"border-2 border-sky-200 mt-10 m-2 p-4"}>
+            <div className={"flex justify-center items-center"}>
+                <p> 레시피 사진 :
+                    <input
+                        id="recipe-file-upload"
+                        type="file"
+                        multiple
+                        onChange={handleRecipeSourcesChange}
+                        placeholder="레시피 이미지 업로드"
+                        style={{display: 'none'}}
+                    />
+                    <label htmlFor="recipe-file-upload" style={{cursor: "pointer"}}>
+                        {recipeSources.length > 0 ? (
+                            <img
+                                src={URL.createObjectURL(recipeSources[0])} // 첫 번째 파일 미리보기
+                                alt="레시피 이미지"
+                                style={{
+                                    width: "100px",
+                                    height: "100px",
+                                    objectFit: "cover",
+                                    border: "1px solid #ccc",
+                                    borderRadius: "6px",
+                                }}
+                            />
+                        ) : (
+                            <img
+                                style={{
+                                    width: "100px",
+                                    height: "100px",
+                                    border: "2px dashed gray",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    fontSize: "12px",
+                                    color: "gray",
+
+                                }}
+                                src={defaultUrl}
+                            >
+                            </img>
+                        )}
+                    </label>
+
+                </p>
+            </div>
+            <div className={"flex justify-center items-center"}>
+                <p> 레시피 이름 :
+                    <input
+                        type="text"
+                        name="recipeName"
+                        value={request.recipeName}
+                        onChange={handleInputChange}
+                        placeholder="레시피 이름"
+                    />
+                </p>
+            </div>
+
+
+            <div className={"flex justify-center items-center"}>
+                <p> 조리 시간 :
+                    <input
+                        type="number"
+                        name="recipeCookingTime"
+                        value={request.recipeCookingTime}
+                        onChange={handleInputChange}
+                        placeholder="조리 시간(분)"
+                    />
+                </p>
+            </div>
+
+            <div className={"flex justify-center items-center"}>
+                <p> 레시피 간단한 내용 :
+                    <input
+                        type="text"
+                        name="recipeContent"
+                        value={request.recipeContent}
+                        onChange={handleInputChange}
+                        placeholder="레시피 내용"
+                    />
+                </p>
+            </div>
+            <div className={"flex justify-center items-center"}>
+                <p> 카테고리 :
+                    <input
+                        type="number"
+                        name="recipeCategoryPk"
+                        value={request.recipeCategoryPk}
+                        onChange={handleInputChange}
+                        placeholder="카테고리 PK"
+                    />
+                </p>
+            </div>
+            <div className={"flex justify-center items-center"}>
+                <p> 유저 번호:
+                    <input
+                        type="number"
+                        name="userPk"
+                        value={request.userPk}
+                        onChange={handleInputChange}
+                        placeholder="유저 PK"
+                    />
+                </p>
+            </div>
+
+
+            {/* 단계별 입력 */}
+            <button onClick={async() => await addStep(-1)}>스텝 추가</button>
+
+            {request.recipeSteps.map((step, index) => (
+                <div key={index} className="flex justify-center items-center">
+                    <p> 스텝 {index + 1} :
+                        <input
+                            type="text"
+                            name="recipeStepContent"
+                            value={step.recipeStepContent || ''}
+                            onChange={(e) => handleStepChange(e, index)}
+                            placeholder={`스텝 ${index + 1}`}
+                        />
+                        <div>
+                            {/* 숨겨진 파일 선택 입력 */}
+                            <input
+                                id={`step-file-${index}`} // 각 스텝마다 고유 ID 할당
+                                type="file"
+                                accept="image/*"
+                                multiple
+                                onChange={(e) => handleRecipeStepSourcesChange(e, index)}
+                                style={{display: 'none'}} // 숨기기
+                            />
+
+                            <button type="button" onClick={() => addStep(index)}>스텝 추가</button>
+                            <button type="button" onClick={() => removeStep(index)}> 해당 스텝 삭제</button>
+
+                            {/* 라벨을 클릭하면 파일 창 열기 */}
+                            <label htmlFor={`step-file-${index}`} style={{cursor: 'pointer'}}>
+                                <img
+                                    src={recipeStepSources[index] ? URL.createObjectURL(recipeStepSources[index][0]) : defaultUrl}
+                                    alt="스텝 이미지"
+                                    style={{
+                                        width: '100px',
+                                        height: '100px',
+                                        objectFit: 'cover',
+                                        border: '1px solid #ccc',
+                                        borderRadius: '6px',
+                                        cursor: 'pointer',
+                                    }}
+                                />
+                            </label>
+
+                        </div>
+                    </p>
+
+                </div>
+            ))}
+
+
+            <button onClick={handleClickAdd}>레시피 추가</button>
+            <button onClick={printRecipeStepSources}>순서 확인</button>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/sources/api/recipeAPI.jsx b/src/sources/api/recipeAPI.jsx
new file mode 100644
index 0000000..21404ce
--- /dev/null
+++ b/src/sources/api/recipeAPI.jsx
@@ -0,0 +1,18 @@
+import axios from "axios";
+
+export const API_URL_HOST = "http://localhost:8080";
+
+const prefix = `${API_URL_HOST}/recipe`;
+
+export const getRecipeList = async () => {
+    const url = `${prefix}`;
+    const res = await axios.get(url);
+    return res.data;
+}
+
+export const createRecipe = async (recipe) => {
+    console.log(recipe);
+    const url = `${prefix}`;
+    const res = await axios.post(url, recipe);
+    return res.data;
+}
\ No newline at end of file