diff --git a/src/assets/css/Ingredient/userIngredient/UsersIngredient.module.css b/src/assets/css/Ingredient/userIngredient/UsersIngredient.module.css index 40d0741..991e216 100644 --- a/src/assets/css/Ingredient/userIngredient/UsersIngredient.module.css +++ b/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; +} \ No newline at end of file diff --git a/src/components/ingredient/userIngredient/UsersIngredient.jsx b/src/components/ingredient/userIngredient/UsersIngredient.jsx index d39af9a..8de30f9 100644 --- a/src/components/ingredient/userIngredient/UsersIngredient.jsx +++ b/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 (
-

내 냉장고

+
+

내 냉장고

+
+ + +
+
- {usersIngredientList.map(ingredient => - - )} + {filteredIngredients.map((ingredient) => ( + + ))}
- ) + ); } -export default UserIngredient \ No newline at end of file +export default UserIngredient; diff --git a/src/components/ingredient/userIngredient/UsersIngredientItem.jsx b/src/components/ingredient/userIngredient/UsersIngredientItem.jsx index f57431c..6a6e8bb 100644 --- a/src/components/ingredient/userIngredient/UsersIngredientItem.jsx +++ b/src/components/ingredient/userIngredient/UsersIngredientItem.jsx @@ -14,6 +14,7 @@ function UsersIngredientItem({ userIngredient }) { // 서버로 상태 업데이트 (필요시) updateIngredientBookmark(1, isBookmarked, userIngredient) + userIngredient.bookmarked = !userIngredient.bookmarked }; console.log(userIngredient);