From 19bbdd388be1f0a6785abcdfcc206888254dd3dc Mon Sep 17 00:00:00 2001 From: mincheol Date: Sat, 21 Dec 2024 20:22:38 +0900 Subject: [PATCH] =?UTF-8?q?[=EA=B9=80=EB=AF=BC=EC=B2=A0]=201.=20recipe/cre?= =?UTF-8?q?ate=20url=EC=9D=84=20=EC=9D=B4=EC=9A=A9=ED=95=98=EB=A9=B4=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=B0=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EA=B0=80=EB=8A=A5.=202.=20recipe=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1=20(=EC=B6=94=ED=9B=84?= =?UTF-8?q?=20=EC=A0=84=EC=B2=B4=20read=20=EC=83=9D=EC=84=B1=20=ED=95=A0?= =?UTF-8?q?=20=EC=98=88=EC=A0=95)=203.=20=EC=9E=84=EC=8B=9C=20=EC=95=84?= =?UTF-8?q?=EB=AC=B4=20=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1221 --- .github/ISSUE_TEMPLATE/bug_report.md | 24 ++ .github/ISSUE_TEMPLATE/feature_request.md | 16 ++ .github/pull_request_template.md | 34 +++ src/App.jsx | 34 ++- src/assets/image/noimage.jpg | Bin 0 -> 6997 bytes src/components/recipe/default.jsx | 0 src/pages/recipe/Recipe.jsx | 40 +++ src/pages/recipe/addRecipe.jsx | 317 ++++++++++++++++++++++ src/sources/api/recipeAPI.jsx | 18 ++ 9 files changed, 469 insertions(+), 14 deletions(-) create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md create mode 100644 .github/pull_request_template.md create mode 100644 src/assets/image/noimage.jpg create mode 100644 src/components/recipe/default.jsx create mode 100644 src/pages/recipe/Recipe.jsx create mode 100644 src/pages/recipe/addRecipe.jsx create mode 100644 src/sources/api/recipeAPI.jsx 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 ( - - - }> - - }/> - {/* } /> */} - - - - - ) -} + return ( + + + }> + + }/> + {/* } /> */} + + + } /> + } /> + + -export default App + + + ) +} +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 0000000000000000000000000000000000000000..110d7700e1d815ddad26cfc8d82dde060c71d353 GIT binary patch literal 6997 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 literal 0 HcmV?d00001 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 ( + <> +

๋ ˆ์‹œํ”ผ ํŽ˜์ด์ง€

+
    +
  • + +
    • +
+ + ) +} + +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 ( +
+
+

๋ ˆ์‹œํ”ผ ์‚ฌ์ง„ : + + + +

+
+
+

๋ ˆ์‹œํ”ผ ์ด๋ฆ„ : + +

+
+ + +
+

์กฐ๋ฆฌ ์‹œ๊ฐ„ : + +

+
+ +
+

๋ ˆ์‹œํ”ผ ๊ฐ„๋‹จํ•œ ๋‚ด์šฉ : + +

+
+
+

์นดํ…Œ๊ณ ๋ฆฌ : + +

+
+
+

์œ ์ € ๋ฒˆํ˜ธ: + +

+
+ + + {/* ๋‹จ๊ณ„๋ณ„ ์ž…๋ ฅ */} + + + {request.recipeSteps.map((step, index) => ( +
+

์Šคํ… {index + 1} : + handleStepChange(e, index)} + placeholder={`์Šคํ… ${index + 1}`} + /> +

+ {/* ์ˆจ๊ฒจ์ง„ ํŒŒ์ผ ์„ ํƒ ์ž…๋ ฅ */} + handleRecipeStepSourcesChange(e, index)} + style={{display: 'none'}} // ์ˆจ๊ธฐ๊ธฐ + /> + + + + + {/* ๋ผ๋ฒจ์„ ํด๋ฆญํ•˜๋ฉด ํŒŒ์ผ ์ฐฝ ์—ด๊ธฐ */} + + +
+

+ +
+ ))} + + + + +
+ ); +}; \ 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