#03 즐겨찾기

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}

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