#05 냉장고 필터링

src/assets/css/Ingredient/userIngredient/UsersIngredient.module.css

@@ -1,5 +1,3 @@
-/* UserIngredient.module.css */
-
 .container {
     padding: 1rem;
     background-color: #f0fff0; /* 연한 녹색 배경 */
@@ -13,3 +11,76 @@
     gap: 1rem; /* 카드 간격 */
 }
 
+.header {
+    display: flex;
+    flex-direction: column; /* 수직으로 배치 */
+    align-items: center; /* 수평 가운데 정렬 */
+    justify-content: center; /* 수직 가운데 정렬 */
+    margin-bottom: 1rem; /* 제목과 카드 간격 추가 */
+    padding: 0 1rem;
+}
+
+.header h1 {
+    font-size: 1.8rem;
+    color: #333;
+    margin: 0 0 0.5rem; /* 아래 간격 추가 */
+}
+
+.filterDropdown {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    border: 1px solid #ddd; /* 드롭다운 테두리 */
+    border-radius: 5px; /* 모서리 둥글게 */
+    cursor: pointer;
+    background-color: #ffffff; /* 드롭다운 배경 */
+    color: #333; /* 텍스트 색상 */
+    transition: border-color 0.3s ease;
+}
+
+.filterDropdown:focus {
+    outline: none;
+    border-color: #28a745; /* 초록색 테두리 */
+}
+
+.filterDropdown:hover {
+    border-color: #28a745; /* 호버 시 테두리 색상 */
+}
+
+.filters {
+    display: flex;
+    gap: 1rem; /* 필터 간 간격 */
+    align-items: center;
+}
+
+.filterDropdown {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: #ffffff;
+    color: #333;
+    transition: border-color 0.3s ease;
+}
+
+.favoriteButton {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: #ffffff;
+    color: #333;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.favoriteButton.active {
+    background-color: #28a745; /* 활성화 상태 */
+    color: white; /* 텍스트 색상 */
+    border-color: #28a745;
+}
+
+.favoriteButton:hover {
+    background-color: #218838; /* Hover 시 어두운 초록색 */
+    color: white;
+}

src/components/ingredient/userIngredient/UsersIngredient.jsx

@@ -1,17 +1,26 @@
-import { useEffect, useState } from "react"
-import { getUsersIngredient } from "../../../sources/api/IngredientAPI"
-import UsersIngredientItem from "./UsersIngredientItem"
-import style from '../../../assets/css/Ingredient/userIngredient/UsersIngredient.module.css'
+import { useEffect, useState } from "react";
+import { getUsersIngredient } from "../../../sources/api/IngredientAPI";
+import UsersIngredientItem from "./UsersIngredientItem";
+import style from '../../../assets/css/Ingredient/userIngredient/UsersIngredient.module.css';
 
 function UserIngredient() {
-    const [usersIngredientList, setUserIngredientList] = useState([])
+    const [usersIngredientList, setUserIngredientList] = useState([]); // 전체 재료 목록
+    const [filteredIngredients, setFilteredIngredients] = useState([]); // 필터링된 재료 목록
+    const [category, setCategory] = useState("전체"); // 선택된 카테고리
+    const [showFavoritesOnly, setShowFavoritesOnly] = useState(false); // 즐겨찾기 필터 상태
+
+    const categories = [
+        "전체", "채소", "과일", "육류", "해산물", "유제품",
+        "계란", "장류", "소스", "음료", "곡물", "견과류",
+        "반찬", "완제품"
+    ];
 
     useEffect(() => {
         const fetchIngredients = async () => {
             try {
-                const data = await getUsersIngredient();
-                setUserIngredientList(data); // 상태 업데이트
-                console.log(usersIngredientList); // 가져온 데이터 확인
+                const data = await getUsersIngredient(); // 서버 데이터 호출
+                setUserIngredientList(data); // 전체 데이터 설정
+                setFilteredIngredients(data); // 초기 필터링 데이터 설정
             } catch (err) {
                 console.error(err);
             }
@@ -20,17 +29,58 @@ function UserIngredient() {
         fetchIngredients(); // 비동기 작업 호출
     }, []);
 
-    return(
+    useEffect(() => {
+        let filtered = usersIngredientList;
+
+        // 카테고리 필터링
+        if (category !== "전체") {
+            filtered = filtered.filter(
+                (ingredient) => ingredient.ingredientCategory === category
+            );
+        }
+
+        // 즐겨찾기 필터링
+        if (showFavoritesOnly) {
+            filtered = filtered.filter((ingredient) => ingredient.bookmarked === true);
+        }
+
+        setFilteredIngredients(filtered);
+    }, [category, showFavoritesOnly, usersIngredientList]);
+
+    return (
         <div className={style.container}>
-            <h1>내 냉장고</h1>
+            <div className={style.header}>
+                <h1>내 냉장고</h1>
+                <div className={style.filters}>
+                    <select
+                        value={category}
+                        onChange={(e) => setCategory(e.target.value)}
+                        className={style.filterDropdown}
+                    >
+                        {categories.map((cat) => (
+                            <option key={cat} value={cat}>
+                                {cat}
+                            </option>
+                        ))}
+                    </select>
+                    <button
+                        className={`${style.favoriteButton} ${showFavoritesOnly ? style.active : ''}`}
+                        onClick={() => setShowFavoritesOnly(!showFavoritesOnly)}
+                    >
+                        {showFavoritesOnly ? "즐겨찾기 ✓" : "즐겨찾기"}
+                    </button>
+                </div>
+            </div>
             <div className={style.cardContainer}>
-            {usersIngredientList.map(ingredient =>
-                <UsersIngredientItem key=
-                    {ingredient.ingredientMyRefrigeratorPk} userIngredient={ingredient} />
-            )}
+                {filteredIngredients.map((ingredient) => (
+                    <UsersIngredientItem
+                        key={ingredient.ingredientMyRefrigeratorPk}
+                        userIngredient={ingredient}
+                    />
+                ))}
             </div>
         </div>
-    )
+    );
 }
 
-export default UserIngredient
+export default UserIngredient;

src/components/ingredient/userIngredient/UsersIngredientItem.jsx

@@ -14,6 +14,7 @@ function UsersIngredientItem({ userIngredient }) {
 
         // 서버로 상태 업데이트 (필요시)
         updateIngredientBookmark(1, isBookmarked, userIngredient)
+        userIngredient.bookmarked = !userIngredient.bookmarked
     };
 
     console.log(userIngredient);