Feat: 내 냉장고

src/App.jsx

@@ -3,7 +3,6 @@ import Layout from "./pages/layouts/Layout"
 import Ingredient from "./pages/ingredient/Ingregdient"
 import Recipe from "./pages/recipe/Recipe"
 import {AddRecipe} from "./pages/recipe/AddRecipe"
-import UsersIngredientItem from "./components/ingredient/UsersIngredientItem"
 
 function App() {
     return (

src/assets/css/Ingredient/ingredient/Ingredient.module.css

@@ -0,0 +1,5 @@
+/* Ingredient.module.css */
+.userIngredient {
+    border: 3px solid black;
+    background-color: lightgreen;
+}

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

@@ -0,0 +1,15 @@
+/* UserIngredient.module.css */
+
+.container {
+    padding: 1rem;
+    background-color: #f0fff0; /* 연한 녹색 배경 */
+    text-align: center;
+}
+
+.cardContainer {
+    display: flex;
+    flex-wrap: wrap; /* 줄바꿈 허용 */
+    justify-content: flex-start; /* 카드들을 왼쪽 정렬 */
+    gap: 1rem; /* 카드 간격 */
+}
+

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

@@ -0,0 +1,102 @@
+.card {
+    width: 260px; /* 가로 길이 */
+    height: auto; /* 세로 길이 자동 조정 */
+    background-color: #ffffff; /* 카드 배경 */
+    padding: 0.5rem; /* 내부 여백 최소화 */
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; /* 상단, 중단, 하단 영역 분리 */
+    text-align: left;
+    position: relative; /* 전체 카드 내부 배치 */
+    transition: all 0.3s ease;
+}
+
+.card img {
+    border-radius: 10px;
+    height: 120px; /* 이미지 높이 */
+    width: 100%;
+    object-fit: cover; /* 이미지 비율 유지 */
+    margin-bottom: 0; /* 이미지와 텍스트 간격 제거 */
+}
+
+/* 즐겨찾기 버튼과 수량 영역 */
+.favoriteAndQuantity {
+    display: flex;
+    justify-content: space-between; /* 좌우로 배치 */
+    align-items: center;
+    margin-top: -30px; /* 이미지와 겹치도록 조정 */
+    padding: 0; /* 좌우 여백 제거 */
+}
+
+.favoriteButton {
+    display: flex; /* Flexbox로 내부 정렬 */
+    align-items: center; /* 세로 가운데 정렬 */
+    justify-content: center; /* 가로 가운데 정렬 */
+    background-color: rgba(207, 205, 205, 0.7); /* 반투명 배경 */
+    border: none;
+    font-size: 0.9rem; /* 별 크기 조정 */
+    cursor: pointer;
+    border-radius: 50%; /* 버튼을 동그랗게 */
+    width: 1.5rem; /* 버튼 너비 */
+    height: 1.5rem; /* 버튼 높이 */
+    padding: 0; /* 내부 여백 제거 */
+    margin-top: 2px;
+}
+
+.favoriteButton:hover {
+    background-color: rgb(66, 55, 55)/* Hover 시 색상 변경 */
+}
+
+
+
+/* 수량 표시 */
+.quantity {
+    background-color: rgba(207, 205, 205, 0.7); /* 반투명 배경 */
+    color: black;
+    padding: 0.2rem 0.4rem; /* 여백 조정 */
+    border-radius: 5px;
+    font-size: 0.85rem; /* 텍스트 크기 조정 */
+}
+
+/* 카드 텍스트 섹션 */
+.details {
+    font-size: 0.85rem;
+    color: #666;
+    margin-top: 0.1rem; /* 텍스트 간격 최소화 */
+    line-height: 1.4;
+}
+
+.details strong {
+    color: #333;
+    font-weight: bold;
+}
+
+.title {
+    font-size: 1rem;
+    font-weight: bold;
+    margin: 0.2rem 0; /* 이미지와 이름 간격 최소화 */
+    text-align: center;
+}
+
+/* 사용하기 버튼 */
+.useButton {
+    align-self: flex-end; /* 오른쪽 정렬 */
+    background-color: rgba(207, 205, 205, 1);
+    color: black;
+    font-weight: 500;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    position: absolute; /* 오른쪽 하단 고정 */
+    bottom: 10px;
+    right: 10px;
+    z-index: 5; /* 다른 요소와 겹치지 않도록 */
+}
+
+.useButton:hover {
+    background-color: rgb(179, 178, 178);
+}

src/assets/css/main.module.css

@@ -0,0 +1,10 @@
+@font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+* {
+    font-family: Pretendard-Regular;
+}

src/components/ingredient/userIngredient/UsersIngredient.jsx

@@ -0,0 +1,36 @@
+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([])
+
+    useEffect(() => {
+        const fetchIngredients = async () => {
+            try {
+                const data = await getUsersIngredient();
+                setUserIngredientList(data); // 상태 업데이트
+                console.log(usersIngredientList); // 가져온 데이터 확인
+            } catch (err) {
+                console.error(err);
+            }
+        };
+
+        fetchIngredients(); // 비동기 작업 호출
+    }, []);
+
+    return(
+        <div className={style.container}>
+            <h1>내 냉장고</h1>
+            <div className={style.cardContainer}>
+            {usersIngredientList.map(ingredient =>
+                <UsersIngredientItem key=
+                    {ingredient.ingredientMyRefrigeratorPk} userIngredient={ingredient} />
+            )}
+            </div>
+        </div>
+    )
+}
+
+export default UserIngredient

src/components/ingredient/userIngredient/UsersIngredientItem.jsx

@@ -0,0 +1,47 @@
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+import style from '../../../assets/css/Ingredient/userIngredient/UsersIngredientItem.module.css';
+
+function UsersIngredientItem({ userIngredient }) {
+    return (
+        <Card className={style.card}>
+            <div className={style.imageWrapper}>
+                <img
+                    src={userIngredient.image || 'https://cdn.mindgil.com/news/photo/202211/75510_16178_5715.jpg'}
+                    alt={userIngredient.ingredientName}
+                    className={style.image}
+                />
+                <div className={style.favoriteAndQuantity}>
+                    <button
+                        className={style.favoriteButton}
+                        onClick={() => console.log(`${userIngredient.ingredientName} 즐겨찾기 클릭됨`)}
+                    >
+                        ⭐
+                    </button>
+                    <div className={style.quantity}>
+                        수량: {userIngredient.ingredientAmount || 0}
+                    </div>
+                </div>
+            </div>
+            <Card.Body className={style.body}>
+                <Card.Title className={style.title}>
+                    {userIngredient.ingredientName || '재료명'}
+                </Card.Title>
+                <Card.Text className={style.details}>
+                    <div><strong>유통기한:</strong> {userIngredient.expirationDate || '알 수 없음'}</div>
+                    <div><strong>남은 일수:</strong> {userIngredient.remainExpirationDate || 0}</div>
+                    <div><strong>보관 방법:</strong> {userIngredient.ingredientStorage || '보관 방법 미정'}</div>
+                </Card.Text>
+                <Button
+                    variant="success"
+                    className={style.useButton}
+                    onClick={() => console.log(`${userIngredient.ingredientName} 사용하기 클릭됨`)}
+                >
+                    사용하기
+                </Button>
+            </Card.Body>
+        </Card>
+    );
+}
+
+export default UsersIngredientItem;

src/main.jsx

@@ -1,5 +1,7 @@
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
+import './assets/css/main.module.css'
+
 
 createRoot(document.getElementById('root')).render(
   <>

src/pages/ingredient/Ingregdient.jsx

@@ -1,32 +1,15 @@
-import { useEffect, useState } from "react"
-import { getUsersIngredient } from "../../sources/api/IngredientAPI"
-import UsersIngredientItem from "../../components/ingredient/UsersIngredientItem";
+import UsersIngredient from "../../components/ingredient/userIngredient/UsersIngredient"
+import style from '../../assets/css/ingredient/ingredient/Ingredient.module.css'
 
-function Ingredient() {
-    const [usersIngredientList, setUserIngredientList] = useState([])
-
-    useEffect(() => {
-        const fetchIngredients = async () => {
-            try {
-                const data = await getUsersIngredient();
-                setUserIngredientList(data); // 상태 업데이트
-                console.log(usersIngredientList); // 가져온 데이터 확인
-            } catch (err) {
-                console.error(err);
-            }
-        };
-
-        fetchIngredients(); // 비동기 작업 호출
-    }, []);
 
+function Ingredient() {
+    console.log(style);
     return (
         <>
             <h1>재료 페이지</h1>
-
-            {usersIngredientList.map(ingredient =>
-                <UsersIngredientItem key=
-                    {ingredient.ingredientMyRefrigeratorPk} userIngredient={ingredient} />
-            )}
+            <div className={style.userIngredient}>
+                <UsersIngredient />
+            </div>
         </>
     )
 }