From 0700eecefca5e770a2ca99620a6cdaee6744880a Mon Sep 17 00:00:00 2001
From: yunjaeeun <yunjaeeun12@naver.com>
Date: Sun, 22 Dec 2024 00:08:36 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=A6=90=EA=B2=A8=EC=B0=BE=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

즐겨찾기 등록, 삭제 구현

Resolves: #03
---
 .../userIngredient/UsersIngredientItem.jsx    | 20 +++++++++--
 src/sources/api/IngredientAPI.js              | 36 +++++++++++++++++++
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/components/ingredient/userIngredient/UsersIngredientItem.jsx b/src/components/ingredient/userIngredient/UsersIngredientItem.jsx
index 94edd45..f57431c 100644
--- a/src/components/ingredient/userIngredient/UsersIngredientItem.jsx
+++ b/src/components/ingredient/userIngredient/UsersIngredientItem.jsx
@@ -1,8 +1,22 @@
 import Button from 'react-bootstrap/Button';
 import Card from 'react-bootstrap/Card';
 import style from '../../../assets/css/Ingredient/userIngredient/UsersIngredientItem.module.css';
+import React, { useState } from 'react';
+import { updateIngredientBookmark } from '../../../sources/api/IngredientAPI';
 
 function UsersIngredientItem({ userIngredient }) {
+    const [isBookmarked, setIsBookmarked] = useState(userIngredient.bookmarked || false);
+
+    const toggleBookmark = () => {
+        const newBookmarkState = !isBookmarked;
+        setIsBookmarked(newBookmarkState); // 즐겨찾기 상태 업데이트
+        
+
+        // 서버로 상태 업데이트 (필요시)
+        updateIngredientBookmark(1, isBookmarked, userIngredient)
+    };
+
+    console.log(userIngredient);
     return (
         <Card className={style.card}>
             <div className={style.imageWrapper}>
@@ -13,10 +27,10 @@ function UsersIngredientItem({ userIngredient }) {
                 />
                 <div className={style.favoriteAndQuantity}>
                     <button
-                        className={style.favoriteButton}
-                        onClick={() => console.log(`${userIngredient.ingredientName} 즐겨찾기 클릭됨`)}
+                        className={`${style.favoriteButton} ${isBookmarked ? style.active : ''}`} // 즐겨찾기 상태에 따른 스타일
+                        onClick={toggleBookmark}
                     >
-                        ⭐
+                        {isBookmarked ? '⭐' : '☆'} {/* 상태에 따른 아이콘 */}
                     </button>
                     <div className={style.quantity}>
                         수량: {userIngredient.ingredientAmount || 0}
diff --git a/src/sources/api/IngredientAPI.js b/src/sources/api/IngredientAPI.js
index 098c72b..4fb5435 100644
--- a/src/sources/api/IngredientAPI.js
+++ b/src/sources/api/IngredientAPI.js
@@ -16,4 +16,40 @@ export async function getUsersIngredient() {
         console.error(err);
         throw err; // 호출자에게 에러 전달
     }
+}
+
+export function updateIngredientBookmark(userPk, isBookmarked, ingredient) {
+    if (!isBookmarked) {
+        axios({
+            url: `${BASE_URL}/bookmark/regist`,
+            method: 'post',
+            data: {
+                userPk: userPk,
+                ingredientMyRefrigeratorPk: ingredient.ingredientMyRefrigeratorPk
+            }
+        })
+        .then((res) => {
+            console.log(res);
+            console.log("추가됨");
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    } else {
+        axios({
+            url: `${BASE_URL}/bookmark/delete`,
+            method: 'delete',
+            data: {
+                userPk: userPk,
+                ingredientBookmarkPk: ingredient.ingredientBookmarkPk
+            }
+        })
+        .then((res) => {
+            console.log(res);
+            console.log("삭제됨");
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    }
 }
\ No newline at end of file