From 030b924e5e65378956aeee354e1c6907db47e7dd Mon Sep 17 00:00:00 2001 From: LeeGukgeon Date: Mon, 23 Dec 2024 04:31:39 +0900 Subject: [PATCH 1/6] recipe pages --- src/assets/css/recipe/Recipe.module.css | 30 ++++++++++++ src/assets/css/recipe/RecipeDetail.module.css | 48 +++++++++++++++++++ src/assets/css/recipe/RecipeItem.module.css | 25 ++++++++++ src/assets/css/recipe/recipe.css | 4 -- src/components/recipe/recipeItem.jsx | 8 ++-- src/pages/recipe/Recipe.jsx | 24 +++++----- src/pages/recipe/RecipeDetail.jsx | 39 +++++++++------ 7 files changed, 144 insertions(+), 34 deletions(-) create mode 100644 src/assets/css/recipe/Recipe.module.css create mode 100644 src/assets/css/recipe/RecipeDetail.module.css create mode 100644 src/assets/css/recipe/RecipeItem.module.css delete mode 100644 src/assets/css/recipe/recipe.css diff --git a/src/assets/css/recipe/Recipe.module.css b/src/assets/css/recipe/Recipe.module.css new file mode 100644 index 0000000..8afe2dd --- /dev/null +++ b/src/assets/css/recipe/Recipe.module.css @@ -0,0 +1,30 @@ +.recipewrapper { + display: flex; + max-width: 880px; /* 최대 너비 992px */ + margin: 0 auto; + gap: px; + flex-wrap: wrap; /* 줄 바꿈 허용 */ + justify-content:space-between;; /* 카드 간의 간격 조절 */ + gap: 16px; /* 카드 간의 간격 */ + padding: 8px; /* 컨테이너 내부 여백 */ +} +.title { + text-align: center; +} +.actions { + display: flex; + width: 880px; +} +.actions input { + border-radius: 5px; + flex-grow: 1; + margin-right: 20px; + border: 1px solid rgb(220,220,220); + padding:10px 0px; +} +.actions button{ + padding:5px; + margin:0px 5px; + border-radius: 5px; + border: 1px solid rgb(220,220,220); +} \ No newline at end of file diff --git a/src/assets/css/recipe/RecipeDetail.module.css b/src/assets/css/recipe/RecipeDetail.module.css new file mode 100644 index 0000000..6b25b57 --- /dev/null +++ b/src/assets/css/recipe/RecipeDetail.module.css @@ -0,0 +1,48 @@ + +.imgdivcontainer { + display:flex; + margin:0 auto; + width: 992px; + height: 400px; +} +.imgdiv{ + margin:20px 0px; + text-align: center; + padding: 30px 30px; + border: 1px solid rgb(220,220,220); + border-radius: 10px; + width: 400px; + height: 360px; +} +.information { + margin:20px; + margin-right: 0px; + flex-grow:1; + border: 1px solid rgb(220,220,220); + border-radius: 10px; + padding:40px 30px; +} +.information p{ + margin:5px; +} + +.information div{ + text-align: right; +} +.information button{ + padding:5px; + border: 1px solid rgb(220,220,220); + border-radius: 5px; +} + +.container { + padding: 40px 50px; + border: 1px solid rgb(220,220,220); + border-radius: 10px; + max-width: 992px; + margin:0px auto; + margin-bottom: 50px; +} +.container p { + text-align: left; +} \ No newline at end of file diff --git a/src/assets/css/recipe/RecipeItem.module.css b/src/assets/css/recipe/RecipeItem.module.css new file mode 100644 index 0000000..4565651 --- /dev/null +++ b/src/assets/css/recipe/RecipeItem.module.css @@ -0,0 +1,25 @@ +.card { + width: 200px; + height: 300px; + padding: 30px; + background-color: #f0f0f0; /* 카드 배경색 */ + border: 1px solid #ccc; /* 카드 테두리 */ + border-radius: 8px; /* 카드 모서리 둥글게 */ + display: flex; /* 카드 내용을 정렬할 때 유용 */ + flex-direction: column; + +} + +.card p { + text-align: left; + margin: 0; /* p 태그의 기본 margin을 제거하여 깔끔하게 왼쪽 정렬 */ +} +.card h3 { + text-align: center; +} +.card img { + margin:auto; + width: 100%; /* 카드 너비에 맞게 이미지 크기 조정 */ + height: auto; /* 이미지 비율 유지 */ + object-fit: cover; /* 이미지 비율을 유지하면서 공간을 채움 */ + } diff --git a/src/assets/css/recipe/recipe.css b/src/assets/css/recipe/recipe.css deleted file mode 100644 index 8a3bd0a..0000000 --- a/src/assets/css/recipe/recipe.css +++ /dev/null @@ -1,4 +0,0 @@ -.recipe-wrapper { - display: flex; - gap: 20px; -} \ No newline at end of file diff --git a/src/components/recipe/recipeItem.jsx b/src/components/recipe/recipeItem.jsx index fd68ffc..fd43815 100644 --- a/src/components/recipe/recipeItem.jsx +++ b/src/components/recipe/recipeItem.jsx @@ -1,12 +1,12 @@ import defaultRecipeImg from "../../assets/image/recipeimage.png" - +import style from "../../assets/css/recipe/RecipeItem.module.css" const RecipeItem = ({ recipe }) => { const imgSrc = recipe.recipeSource.length!==0?recipe.recipeSource[0].recipeSourceSave:defaultRecipeImg return ( -
+
+

{recipe.recipeName}

Recipe Image -

이름:{recipe.recipeName}

-

내용:{recipe.recipeContent}

+

{recipe.recipeContent}

조리시간:{recipe.recipeCookingTime}(단위)

난이도:{recipe.recipeDifficulty}

조회수:{recipe.recipeViews}

diff --git a/src/pages/recipe/Recipe.jsx b/src/pages/recipe/Recipe.jsx index b3298b6..74806bb 100644 --- a/src/pages/recipe/Recipe.jsx +++ b/src/pages/recipe/Recipe.jsx @@ -2,9 +2,8 @@ import { useEffect, useState,useCallback } from "react" import { getRecipeList } from "../../sources/api/recipeAPI.jsx"; import {Link, Route, useNavigate} from "react-router-dom"; import { AddRecipe} from "./addRecipe.jsx"; -import {Route, useNavigate} from "react-router-dom"; import RecipeItem from "../../components/recipe/RecipeItem.jsx" -import "../../assets/css/recipe/recipe.css" +import style from "../../assets/css/recipe/recipe.module.css" function Recipe() { @@ -31,17 +30,20 @@ function Recipe() { navigate("/recipe/create"); },[navigate]) + const handleRecommand = useCallback(() => { + navigate(`/recipe/recommend/${userPk}`); + },[navigate]) + return ( <> -

레시피 페이지

-
- - - 맞춤 레시피 보기 - -
-
+

레시피 페이지

+
+
+ + + + +
{recipeList.map((recipe) => ( ))} diff --git a/src/pages/recipe/RecipeDetail.jsx b/src/pages/recipe/RecipeDetail.jsx index 56646b1..c86ce12 100644 --- a/src/pages/recipe/RecipeDetail.jsx +++ b/src/pages/recipe/RecipeDetail.jsx @@ -2,7 +2,7 @@ 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" - +import style from "../../assets/css/recipe/RecipeDetail.module.css" function RecipeDetail() { const { recipePk } = useParams() @@ -20,24 +20,34 @@ function RecipeDetail() { fetchRecipes(); }, [recipePk]); - const recipeImage = + const imgSrc = recipeDetail.recipeSource && recipeDetail.recipeSource.length > 0 - ? recipeDetail.recipeSource[0] + ? recipeDetail.recipeSource[0].recipeSourceSave : defaultRecipeImg; return ( <> -

레시피 상세조회 페이지

-
- 레시피 이미지 -

이름:{recipeDetail.recipeName}

-

내용:{recipeDetail.recipeContent}

-

조리시간:{recipeDetail.recipeCookingTime}(단위)

-

난이도:{recipeDetail.recipeDifficulty}

-

조회수:{recipeDetail.recipeViews}

-

재료

- {recipeDetail.ingredients && recipeDetail.ingredients.map(ingredient => (

{ingredient.ingredientName}

))} -

요리과정

+
+
+

{recipeDetail.recipeName}

+ Recipe Image +
+
+
+ + + +
+

내용 {recipeDetail.recipeContent}

+

조리시간 {recipeDetail.recipeCookingTime}(단위)

+

난이도 {recipeDetail.recipeDifficulty}

+

조회수 {recipeDetail.recipeViews}

+

재료

+ {recipeDetail.ingredients && recipeDetail.ingredients.map(ingredient => (

{ingredient.ingredientName}

))} +
+
+
+

요리과정

{recipeDetail.recipeStep && recipeDetail.recipeStep.map((step, index) => (
@@ -50,7 +60,6 @@ function RecipeDetail() { )}
))} -
) From e329d387b75c8faf48d84da2ed0df43a1c2bfde2 Mon Sep 17 00:00:00 2001 From: LeeGukgeon Date: Mon, 23 Dec 2024 07:26:18 +0900 Subject: [PATCH 2/6] recipe read --- src/pages/recipe/RecipeDetail.jsx | 2 +- src/pages/recipe/UpdateRecipe.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/recipe/RecipeDetail.jsx b/src/pages/recipe/RecipeDetail.jsx index b096501..59d1606 100644 --- a/src/pages/recipe/RecipeDetail.jsx +++ b/src/pages/recipe/RecipeDetail.jsx @@ -54,7 +54,7 @@ function RecipeDetail() {

Step {index + 1}: {step.recipeStepContent}

{step.recipeStepSource && ( {`Step )} diff --git a/src/pages/recipe/UpdateRecipe.jsx b/src/pages/recipe/UpdateRecipe.jsx index e6272c5..4fcfbdc 100644 --- a/src/pages/recipe/UpdateRecipe.jsx +++ b/src/pages/recipe/UpdateRecipe.jsx @@ -244,7 +244,7 @@ export const UpdateRecipe = () => { const files = await convertUrlsToFiles([ [ step.recipeStepSource.recipeStepSourceSave, - step.recipeStepSource.recipeSourceFileName, + step.recipeStepSource.recipeStepSourceFileName, ], ]); return files.length > 0 ? files : null; // 변환 성공 시 파일 반환 From 70fda304cbed0b0d5505494a23bc12019a10d71e Mon Sep 17 00:00:00 2001 From: LeeGukgeon Date: Mon, 23 Dec 2024 08:51:19 +0900 Subject: [PATCH 3/6] recipe with style --- src/assets/css/recipe/Recipe.module.css | 3 +++ src/assets/css/recipe/RecipeItem.module.css | 4 +++- src/components/recipe/recipeItem.jsx | 7 ++++++- src/pages/recipe/Recipe.jsx | 17 +++++++++++---- src/pages/recipe/RecipeDetail.jsx | 23 +++++++++++++++++---- src/pages/recipe/addRecipe.jsx | 3 +++ src/sources/api/recipeAPI.jsx | 6 ++++++ 7 files changed, 53 insertions(+), 10 deletions(-) diff --git a/src/assets/css/recipe/Recipe.module.css b/src/assets/css/recipe/Recipe.module.css index 8afe2dd..fac3f3e 100644 --- a/src/assets/css/recipe/Recipe.module.css +++ b/src/assets/css/recipe/Recipe.module.css @@ -22,6 +22,9 @@ border: 1px solid rgb(220,220,220); padding:10px 0px; } +.actions input:focus { + outline: none; +} .actions button{ padding:5px; margin:0px 5px; diff --git a/src/assets/css/recipe/RecipeItem.module.css b/src/assets/css/recipe/RecipeItem.module.css index 4565651..3302861 100644 --- a/src/assets/css/recipe/RecipeItem.module.css +++ b/src/assets/css/recipe/RecipeItem.module.css @@ -9,7 +9,9 @@ flex-direction: column; } - +.card:hover { + background-color: #e0e0e0; +} .card p { text-align: left; margin: 0; /* p 태그의 기본 margin을 제거하여 깔끔하게 왼쪽 정렬 */ diff --git a/src/components/recipe/recipeItem.jsx b/src/components/recipe/recipeItem.jsx index fd43815..abf2669 100644 --- a/src/components/recipe/recipeItem.jsx +++ b/src/components/recipe/recipeItem.jsx @@ -1,9 +1,14 @@ import defaultRecipeImg from "../../assets/image/recipeimage.png" import style from "../../assets/css/recipe/RecipeItem.module.css" +import { useNavigate } from "react-router-dom"; const RecipeItem = ({ recipe }) => { + const navigate = useNavigate() const imgSrc = recipe.recipeSource.length!==0?recipe.recipeSource[0].recipeSourceSave:defaultRecipeImg + const toRecipe = ()=>{ + navigate(`/recipe/${recipe.recipePk}`) + } return ( -
+

{recipe.recipeName}

Recipe Image

{recipe.recipeContent}

diff --git a/src/pages/recipe/Recipe.jsx b/src/pages/recipe/Recipe.jsx index 74806bb..84f8377 100644 --- a/src/pages/recipe/Recipe.jsx +++ b/src/pages/recipe/Recipe.jsx @@ -8,10 +8,20 @@ import style from "../../assets/css/recipe/recipe.module.css" function Recipe() { const [recipeList, setRecipeList] = useState([]) + const [search, setSearch] = useState("") const navigate = useNavigate(); const userPk = localStorage.getItem('userPk'); //userPk 를 어떻게 처리할지에 따라 바꿀듯합니다. - + const onChangeSearch = (e)=>{ + setSearch(e.target.value) + } + const getFilterdData = () =>{ + if(search===""){ + return recipeList + } + return recipeList.filter((recipe=>recipe.recipeName.includes(search))) + } + const filteredRecipeList = getFilterdData() useEffect(() => { const fetchRecipes = async () => { try { @@ -33,18 +43,17 @@ function Recipe() { const handleRecommand = useCallback(() => { navigate(`/recipe/recommend/${userPk}`); },[navigate]) - return ( <>

레시피 페이지

- +
- {recipeList.map((recipe) => ( + {filteredRecipeList.map((recipe) => ( ))}
diff --git a/src/pages/recipe/RecipeDetail.jsx b/src/pages/recipe/RecipeDetail.jsx index 59d1606..b0394a3 100644 --- a/src/pages/recipe/RecipeDetail.jsx +++ b/src/pages/recipe/RecipeDetail.jsx @@ -1,12 +1,27 @@ -import { useParams } from 'react-router-dom' +import { useParams,useNavigate } from 'react-router-dom' import { useEffect, useState,useCallback } from "react" -import { getRecipeDetail } from "../../sources/api/recipeAPI.jsx"; +import { getRecipeDetail,deleteRecipe } from "../../sources/api/recipeAPI.jsx"; import defaultRecipeImg from "../../assets/image/recipeimage.png" import style from "../../assets/css/recipe/RecipeDetail.module.css" function RecipeDetail() { const { recipePk } = useParams() const [recipeDetail, setRecipeDetail] = useState({}) + const navigate = useNavigate(); + const toUpdate = useCallback(() => { + navigate(`/recipe/${recipePk}/update`); + },[navigate]) + const toDelete = useCallback(() => { + const handleDelete = async () => { + try { + await deleteRecipe(recipePk); + navigate("/recipe"); + } catch (err) { + console.error(err); + } + }; + handleDelete(); // 비동기 함수 호출 + }, [recipePk, navigate]); useEffect(() => { const fetchRecipes = async () => { try { @@ -35,8 +50,8 @@ function RecipeDetail() {
- - + +

내용 {recipeDetail.recipeContent}

조리시간 {recipeDetail.recipeCookingTime}(단위)

diff --git a/src/pages/recipe/addRecipe.jsx b/src/pages/recipe/addRecipe.jsx index 5868b57..808eee3 100644 --- a/src/pages/recipe/addRecipe.jsx +++ b/src/pages/recipe/addRecipe.jsx @@ -1,6 +1,7 @@ import { useState,useEffect } from 'react'; import { createRecipe,recipeCategory } from "../../sources/api/recipeAPI.jsx"; +import { useNavigate } from 'react-router-dom'; const initialState = { recipeName: '', @@ -28,6 +29,7 @@ export const AddRecipe = () => { const [ingredients, setIngredients] = useState([]); // 추가된 재료 목록 const [ingredientInputTrue,setIngredientInputTrue] = useState("") const [ingredientInputFalse,setIngredientInputFalse] = useState("") + const navigate = useNavigate(); const defaultUrl = "https://amzn-ap-s3-demo-bucket1-refrigerator-storage.s3.ap-southeast-2.amazonaws.com/noimage.jpg"; const handleClickAdd = () => { @@ -55,6 +57,7 @@ export const AddRecipe = () => { createRecipe(formData) .then(res => { + alert("레시피가 추가되었습니다") console.log(res); setResult(res); diff --git a/src/sources/api/recipeAPI.jsx b/src/sources/api/recipeAPI.jsx index 63843e5..11c9d47 100644 --- a/src/sources/api/recipeAPI.jsx +++ b/src/sources/api/recipeAPI.jsx @@ -23,6 +23,12 @@ export const createRecipe = async (recipe) => { return res.data; } +export const deleteRecipe = async (recipePk) => { + console.log(recipePk,"번 레시피 delete 함수 실행") + const url = `${prefix}`; + await axios.delete(url,{params:{recipePk}}) +} + export const recipeCategory = async () => { const url = `${prefix}/category`; const res = await axios.get(url); From 5729e67cea29c0ae457d8437e3b1bef99243dd2b Mon Sep 17 00:00:00 2001 From: LeeGukgeon Date: Mon, 23 Dec 2024 17:39:07 +0900 Subject: [PATCH 4/6] temp --- src/App.jsx | 2 ++ src/assets/css/recipe/RecipeDetail.module.css | 8 +++-- src/components/recipe/recipeItem.jsx | 34 ++++++++++++++++++- src/pages/recipe/Recipe.jsx | 5 ++- src/pages/recipe/RecipeDetail.jsx | 2 +- src/pages/recipe/RecipeLiked.jsx | 33 ++++++++++++++++++ src/sources/api/recipeAPI.jsx | 6 ++++ 7 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 src/pages/recipe/RecipeLiked.jsx diff --git a/src/App.jsx b/src/App.jsx index e49f894..9b3bc87 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,6 +8,7 @@ import Join from "./pages/user/Join" import Login from "./pages/user/Login" import RecipeRecommend from "./pages/recipe/RecipeRecommend" import {UpdateRecipe} from "./pages/recipe/UpdateRecipe.jsx" +import RecipeLiked from "./pages/recipe/RecipeLiked.jsx" function App() { return ( @@ -20,6 +21,7 @@ function App() { } /> + } /> } /> } /> }/> diff --git a/src/assets/css/recipe/RecipeDetail.module.css b/src/assets/css/recipe/RecipeDetail.module.css index 6b25b57..0554606 100644 --- a/src/assets/css/recipe/RecipeDetail.module.css +++ b/src/assets/css/recipe/RecipeDetail.module.css @@ -36,6 +36,7 @@ } .container { + text-align: center; padding: 40px 50px; border: 1px solid rgb(220,220,220); border-radius: 10px; @@ -43,6 +44,7 @@ margin:0px auto; margin-bottom: 50px; } -.container p { - text-align: left; -} \ No newline at end of file +.container h2 { + margin-bottom:30px; +} + diff --git a/src/components/recipe/recipeItem.jsx b/src/components/recipe/recipeItem.jsx index abf2669..bf3d042 100644 --- a/src/components/recipe/recipeItem.jsx +++ b/src/components/recipe/recipeItem.jsx @@ -1,20 +1,52 @@ import defaultRecipeImg from "../../assets/image/recipeimage.png" import style from "../../assets/css/recipe/RecipeItem.module.css" import { useNavigate } from "react-router-dom"; +import { useEffect, useState } from "react"; +import axios from 'axios' + const RecipeItem = ({ recipe }) => { const navigate = useNavigate() + const userPk = localStorage.getItem('userPk'); + const imgSrc = recipe.recipeSource.length!==0?recipe.recipeSource[0].recipeSourceSave:defaultRecipeImg const toRecipe = ()=>{ navigate(`/recipe/${recipe.recipePk}`) } + const [liked, setLiked] = useState(false); // 초기 좋아요 상태 + const handleToggleLike = async (e) => { + e.stopPropagation() + try { + const response = await axios.post(`http://localhost:8080/recipe/reaction`, { + recipePk:recipe.recipePk, + userPk:1, + likeStatus:false + }); + console.log(response.data) + setLiked(!liked) + } catch (error) { + console.error("Failed to toggle like:", error); + } + }; return (

{recipe.recipeName}

Recipe Image

{recipe.recipeContent}

-

조리시간:{recipe.recipeCookingTime}(단위)

+

조리시간:{recipe.recipeCookingTime}분

난이도:{recipe.recipeDifficulty}

조회수:{recipe.recipeViews}

+
); }; diff --git a/src/pages/recipe/Recipe.jsx b/src/pages/recipe/Recipe.jsx index 84f8377..ac6b02a 100644 --- a/src/pages/recipe/Recipe.jsx +++ b/src/pages/recipe/Recipe.jsx @@ -43,6 +43,9 @@ function Recipe() { const handleRecommand = useCallback(() => { navigate(`/recipe/recommend/${userPk}`); },[navigate]) + const handleLike = useCallback(() => { + navigate(`/recipe/liked/${userPk}`); + },[navigate]) return ( <>

레시피 페이지

@@ -51,7 +54,7 @@ function Recipe() { - +
{filteredRecipeList.map((recipe) => ( diff --git a/src/pages/recipe/RecipeDetail.jsx b/src/pages/recipe/RecipeDetail.jsx index b0394a3..43474fb 100644 --- a/src/pages/recipe/RecipeDetail.jsx +++ b/src/pages/recipe/RecipeDetail.jsx @@ -54,7 +54,7 @@ function RecipeDetail() {

내용 {recipeDetail.recipeContent}

-

조리시간 {recipeDetail.recipeCookingTime}(단위)

+

조리시간 {recipeDetail.recipeCookingTime}분

난이도 {recipeDetail.recipeDifficulty}

조회수 {recipeDetail.recipeViews}

재료

diff --git a/src/pages/recipe/RecipeLiked.jsx b/src/pages/recipe/RecipeLiked.jsx new file mode 100644 index 0000000..8ea49ff --- /dev/null +++ b/src/pages/recipe/RecipeLiked.jsx @@ -0,0 +1,33 @@ +import { useParams,useNavigate } from 'react-router-dom' +import { useState,useEffect } from 'react' +import { getLikedRecipes } from '../../sources/api/recipeAPI'; +import RecipeItem from '../../components/recipe/RecipeItem'; +import style from "../../assets/css/recipe/recipe.module.css" +function RecipeLiked() { + const { userPk } = useParams() + const [likedRecipeList, setLikedRecipeList] = useState([]) + useEffect(() => { + const fetchRecipes = async () => { + try { + const data = await getLikedRecipes(userPk); + + console.log("LikedRecipeList",data); // 가져온 데이터 확인 + setLikedRecipeList(data); // 상태 업데이트 + } catch (err) { + console.error(err); + } + }; + fetchRecipes(); // 비동기 작업 호출 + }, []); + return( + <> +

좋아요한 레시피 페이지

+
+ {likedRecipeList.map((recipe) => ( + + ))} +
+ + ) +} +export default RecipeLiked \ No newline at end of file diff --git a/src/sources/api/recipeAPI.jsx b/src/sources/api/recipeAPI.jsx index 11c9d47..b18ff12 100644 --- a/src/sources/api/recipeAPI.jsx +++ b/src/sources/api/recipeAPI.jsx @@ -41,6 +41,12 @@ export const getRecommendedRecipes = async (userPk) => { return res.data; } +export const getLikedRecipes = async (userPk) => { + const url = `${prefix}/liked?userPk=${userPk}`; + const res = await axios.get(url); + return res.data +} + export const updateRecipe = async (recipe) => { const url = `${prefix}`; const res = await axios.put(url,recipe); From 96d468cd97b8d0c050543cd814fcb736cf65fe99 Mon Sep 17 00:00:00 2001 From: LeeGukgeon Date: Mon, 23 Dec 2024 17:46:22 +0900 Subject: [PATCH 5/6] temp --- src/App.jsx | 6 ------ src/pages/recipe/Recipe.jsx | 8 +------- src/sources/api/recipeAPI.jsx | 4 +--- 3 files changed, 2 insertions(+), 16 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 11039cb..c94f703 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,14 +7,11 @@ import {AddRecipe} from "./pages/recipe/AddRecipe" import Join from "./pages/user/Join" import Login from "./pages/user/Login" import RecipeRecommend from "./pages/recipe/RecipeRecommend" -<<<<<<< HEAD import {UpdateRecipe} from "./pages/recipe/UpdateRecipe.jsx" import RecipeLiked from "./pages/recipe/RecipeLiked.jsx" -======= import Logout from "./components/user/Logout" import PublicOnlyRoute from "./components/auth/PublicOnlyRoute" import RecipeRandom from "./pages/recipe/RecipeRandom" ->>>>>>> 0f7ffa7e9516556e811f0e86be46b139d4389386 function App() { return ( @@ -31,11 +28,8 @@ function App() { } /> } /> }/> -<<<<<<< HEAD } /> -======= }/> ->>>>>>> 0f7ffa7e9516556e811f0e86be46b139d4389386 } /> } /> diff --git a/src/pages/recipe/Recipe.jsx b/src/pages/recipe/Recipe.jsx index f3a76d9..a17ec3e 100644 --- a/src/pages/recipe/Recipe.jsx +++ b/src/pages/recipe/Recipe.jsx @@ -85,13 +85,7 @@ function Recipe() { const handleLike = useCallback(() => { navigate(`/recipe/liked/${userPk}`); },[navigate]) - - const handleRecommand = useCallback(() => { - navigate(`/recipe/recommend/${userPk}`); - },[navigate]) - const handleLike = useCallback(() => { - navigate(`/recipe/liked/${userPk}`); - },[navigate]) + return ( <>

레시피 페이지

diff --git a/src/sources/api/recipeAPI.jsx b/src/sources/api/recipeAPI.jsx index dde40aa..0e334aa 100644 --- a/src/sources/api/recipeAPI.jsx +++ b/src/sources/api/recipeAPI.jsx @@ -41,7 +41,6 @@ export const getRecommendedRecipes = async (userPk) => { return res.data; } -<<<<<<< HEAD export const getLikedRecipes = async (userPk) => { const url = `${prefix}/liked?userPk=${userPk}`; const res = await axios.get(url); @@ -52,11 +51,10 @@ export const updateRecipe = async (recipe) => { const url = `${prefix}`; const res = await axios.put(url,recipe); return res.data; +} -======= export const getRandomRecipe = async () => { const url = `${prefix}/random`; const res = await axios.get(url); return res.data; ->>>>>>> 0f7ffa7e9516556e811f0e86be46b139d4389386 } \ No newline at end of file From 0e3e1ec260cf2026f0d6a91e860c666a4a741abe Mon Sep 17 00:00:00 2001 From: LeeGukgeon Date: Mon, 23 Dec 2024 18:12:37 +0900 Subject: [PATCH 6/6] recipelike --- src/components/recipe/recipeItem.jsx | 5 ++--- src/pages/recipe/Recipe.jsx | 6 +++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/recipe/recipeItem.jsx b/src/components/recipe/recipeItem.jsx index bf3d042..a0d6976 100644 --- a/src/components/recipe/recipeItem.jsx +++ b/src/components/recipe/recipeItem.jsx @@ -4,9 +4,8 @@ import { useNavigate } from "react-router-dom"; import { useEffect, useState } from "react"; import axios from 'axios' -const RecipeItem = ({ recipe }) => { +const RecipeItem = ({ recipe,userPk }) => { const navigate = useNavigate() - const userPk = localStorage.getItem('userPk'); const imgSrc = recipe.recipeSource.length!==0?recipe.recipeSource[0].recipeSourceSave:defaultRecipeImg const toRecipe = ()=>{ @@ -18,7 +17,7 @@ const RecipeItem = ({ recipe }) => { try { const response = await axios.post(`http://localhost:8080/recipe/reaction`, { recipePk:recipe.recipePk, - userPk:1, + userPk:userPk, likeStatus:false }); console.log(response.data) diff --git a/src/pages/recipe/Recipe.jsx b/src/pages/recipe/Recipe.jsx index a17ec3e..4b6e4f1 100644 --- a/src/pages/recipe/Recipe.jsx +++ b/src/pages/recipe/Recipe.jsx @@ -81,10 +81,10 @@ function Recipe() { const handleRecommand = useCallback(() => { navigate(`/recipe/recommend/${userPk}`); - },[navigate]) + },[navigate,userPk]) const handleLike = useCallback(() => { navigate(`/recipe/liked/${userPk}`); - },[navigate]) + },[navigate,userPk]) return ( <> @@ -97,7 +97,7 @@ function Recipe() {
{filteredRecipeList.map((recipe) => ( - + ))}