#03 재료(내 냉장고)

package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.5.0",
     "axios": "^1.7.9",
+    "bootstrap": "^5.3.3",
     "react": "^18.3.1",
+    "react-bootstrap": "^2.10.7",
     "react-dom": "^18.3.1",
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.28.0"

src/App.jsx

@@ -1,9 +1,20 @@
-function App() {
+import { BrowserRouter, Routes, Route } from "react-router-dom"
+import Layout from "./pages/layouts/Layout"
+import Ingredient from "./pages/ingredient/Ingregdient"
+import UsersIngredientItem from "./components/ingredient/UsersIngredientItem"
 
+function App() {
   return (
-    <h1>
-      test
-    </h1>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout/>}>
+          <Route path="ingredient">
+            <Route index element={<Ingredient/>}/>
+            {/* <Route path=':ingredientMyRefrigeratorPk' element={<UsersIngredientItem/>} /> */}
+          </Route>
+        </Route>
+      </Routes>
+    </BrowserRouter>
   )
 }
 

src/components/ingredient/UsersIngredientItem.jsx

@@ -0,0 +1,34 @@
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+
+function UsersIngredientItem({ userIngredient }) {
+    console.log(userIngredient);
+    return (
+        <Card style={{ width: '16rem', margin: '1rem', border: '1px solid black'}}>
+            <Card.Img 
+                variant="top" 
+                src={userIngredient.image || 'https://via.placeholder.com/150'} 
+                alt={userIngredient.ingredientName}
+            />
+            <Card.Body>
+                <Card.Title style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
+                    {userIngredient.ingredientName || '재료명'}
+                </Card.Title>
+                <Card.Text>
+                    <div><strong>유통기한:</strong> {userIngredient.expirationDate || '알 수 없음'}</div>
+                    <div><strong>남은 일수:</strong> {userIngredient.remainExpirationDate}</div>
+                    <div><strong>남은 양:</strong> {userIngredient.ingredientAmount || '0'}</div>
+                    <div><strong>보관 방법:</strong> {userIngredient.ingredientStorage|| '보관 방법 미정'}</div>
+                </Card.Text>
+                <Button 
+                    variant="success" 
+                    onClick={() => console.log(`${userIngredient.ingredientName} 사용하기 클릭됨`)}
+                >
+                    사용하기
+                </Button>
+            </Card.Body>
+        </Card>
+    );
+}
+
+export default UsersIngredientItem;

src/components/main/Footer.jsx

@@ -0,0 +1,7 @@
+function Footer() {
+    return(
+        <h1>Footer</h1>
+    )
+}
+
+export default Footer

src/components/main/Header.jsx

@@ -0,0 +1,7 @@
+function Header() {
+    return(
+        <h1>ReciPick Header</h1>
+    )
+}
+
+export default Header

src/pages/ingredient/Ingregdient.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react"
+import { getUsersIngredient } from "../../sources/api/IngredientAPI"
+import UsersIngredientItem from "../../components/ingredient/UsersIngredientItem";
+
+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(); // 비동기 작업 호출
+    }, []);
+
+    return (
+        <>
+            <h1>재료 페이지</h1>
+
+            {usersIngredientList.map(ingredient =>
+                <UsersIngredientItem key=
+                    {ingredient.ingredientMyRefrigeratorPk} userIngredient={ingredient} />
+            )}
+        </>
+    )
+}
+
+export default Ingredient

src/pages/layouts/Layout.jsx

@@ -0,0 +1,15 @@
+import {Outlet} from 'react-router-dom'
+import Header from '../../components/main/Header'
+import Footer from '../../components/main/Footer'
+
+function Layout() {
+    return(
+        <>
+            <Header/>
+            <Outlet/>
+            <Footer/>
+        </>
+    )
+}
+
+export default Layout

src/sources/api/IngredientAPI.js

@@ -0,0 +1,19 @@
+import axios from "axios";
+
+const BASE_URL = 'http://localhost:8080/ingredient'
+
+export async function getUsersIngredient() {
+    try {
+        const response = await axios({
+            url: `${BASE_URL}`,
+            method: 'get',
+            params: {
+                userPk: 1,
+            },
+        });
+        return response.data; // 데이터를 반환
+    } catch (err) {
+        console.error(err);
+        throw err; // 호출자에게 에러 전달
+    }
+}