#09 재료기반 레시피 추천

src/App.jsx

@@ -5,6 +5,7 @@ import Recipe from "./pages/recipe/Recipe"
 import RecipeDetail from "./pages/recipe/RecipeDetail"
 import {AddRecipe} from "./pages/recipe/AddRecipe"
 import Join from "./pages/user/Join"
+import RecipeRecommend from "./pages/recipe/RecipeRecommend"
 
 function App() {
     return (
@@ -18,6 +19,7 @@ function App() {
                     <Route path="recipe" >
                         <Route index element={<Recipe/>} />
                         <Route path='create' element={<AddRecipe/>} />
+                        <Route path='recommend/:userPk' element={<RecipeRecommend/>} />
                         <Route path=':recipePk' element={<RecipeDetail/>}/>
                     </Route>
                     <Route path="join" element={<Join/>} />

src/components/main/Header.jsx

@@ -13,6 +13,7 @@ function Header() {
             <nav className={style.nav}>
                 <a href="/">홈</a>
                 <a href="/ingredient">내 냉장고</a>
+                <a href="/recipe">레시피</a>
                 <a href="/ingredient">즐겨찾기</a>
             </nav>
         </header>

src/pages/recipe/Recipe.jsx

@@ -1,12 +1,17 @@
 import { useEffect, useState,useCallback } from "react"
 import { getRecipeList } from "../../sources/api/recipeAPI.jsx";
+import {Link, Route, useNavigate} from "react-router-dom";
+import { AddRecipe} from "./addRecipe.jsx";
 import {Route, useNavigate} from "react-router-dom";
 import RecipeItem from "../../components/recipe/RecipeItem.jsx"
 import "../../assets/css/recipe/recipe.css"
 
+
 function Recipe() {
     const [recipeList, setRecipeList] = useState([])
     const navigate = useNavigate();
+    const userPk = localStorage.getItem('userPk');
+    //userPk 를 어떻게 처리할지에 따라 바꿀듯합니다.
 
     useEffect(() => {
         const fetchRecipes = async () => {
@@ -29,16 +34,19 @@ function Recipe() {
     return (
         <>
             <h1>레시피 페이지</h1>
+            <div>
+                <button onClick={handleAdd}>레시피 추가</button>
+                <Link to={`/recipe/recommend/${userPk}`}
+                      className="ml-4 px-4 py-2 bg-blue-500 text-white rounded">
+                    맞춤 레시피 보기
+                </Link>
+            </div>
             <div className="recipe-wrapper">
                 {recipeList.map((recipe) => (
                     <RecipeItem key={recipe.recipePk} recipe={recipe} />
                 ))}
             </div>
-            <ul>
-                <li>
-                    <button onClick={handleAdd}>add button</button>
-                </li>
-            </ul>
+
         </>
     )
 }

src/pages/recipe/RecipeRecommend.css

@@ -0,0 +1,112 @@
+.recipe-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.recipe-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: transform 0.2s ease;
+}
+
+.recipe-card:hover {
+  transform: translateY(-5px);
+}
+
+.recipe-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.recipe-content {
+  padding: 1.5rem;
+}
+
+.recipe-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.5rem;
+}
+
+.recipe-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.match-rate {
+  color: #3FA2F6;
+  font-weight: 600;
+}
+
+.expiry-warning {
+  background: #ffebeb;
+  color: #ff4d4d;
+  padding: 0.5rem;
+  border-radius: 6px;
+  font-size: 0.9rem;
+}
+
+.view-recipe-btn {
+  width: 100%;
+  background: #96C9F4;
+  color: white;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 6px;
+  margin-top: 1rem;
+  cursor: pointer;
+  /* transition: background 0.2s ease; */
+}
+
+.view-recipe-btn:hover {
+  background: #3FA2F6;
+}
+
+/* RecipeRecommend.css에 추가 */
+.ingredients-section {
+    background: #f8f9fa;
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+.ingredients-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.ingredient-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    background: white;
+    border: 1px solid #e0e0e0;
+}
+
+.ingredient-tag.necessary {
+    border-color: #3FA2F6;
+    color: #3FA2F6;
+}
+
+.ingredient-tag.optional {
+    border-color: #96C9F4;
+    color: #96C9F4;
+}
+
+.necessary-badge {
+    background: #3FA2F6;
+    color: white;
+    font-size: 0.75rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: 10px;
+    margin-left: 0.5rem;
+}

src/pages/recipe/RecipeRecommend.jsx

@@ -0,0 +1,94 @@
+// RecipeRecommend.jsx
+import { useEffect, useState } from "react";
+import { getRecommendedRecipes } from "../../sources/api/recipeAPI";
+import { API_URL_HOST } from "../../sources/api/recipeAPI";
+import defaultImage from "../../assets/image/default.gif";
+import './RecipeRecommend.css';
+import { useParams } from "react-router-dom";
+
+function RecipeRecommend() {
+    const [recommendedRecipes, setRecommendedRecipes] = useState([]);
+    const {userPk} = useParams();
+
+    useEffect(() => {
+        const fetchRecommendedRecipes = async () => {
+            try {
+                const data = await getRecommendedRecipes(userPk);
+                setRecommendedRecipes(data);
+            } catch (err) {
+                console.error("레시피 추천 로드 실패:", err);
+            }
+        };
+
+        fetchRecommendedRecipes();
+    }, [userPk]);
+
+    return (
+        <div className="container mx-auto">
+            <h1 className="text-3xl font-bold text-center my-8" style={{color: '#3FA2F6'}}>
+                맞춤 레시피 추천
+            </h1>
+
+            <div className="recipe-grid">
+                {recommendedRecipes.map(recipe => (
+                    <div key={recipe.recipePk} className="recipe-card">
+                        <img 
+                            src={recipe.mainImages?.length > 0 
+                                ? `${API_URL_HOST}/${recipe.mainImages[0].filePath}`
+                                : defaultImage}
+                            alt={recipe.recipeName}
+                            className="recipe-image"
+                        />
+
+                        <div className="recipe-content">
+                            <h3 className="recipe-title">{recipe.recipeName}</h3>
+                            <p className="text-gray-600 mb-4">{recipe.recipeContent}</p>
+
+                            <div className="ingredients-section mb-4">
+                                <h4 className="font-semibold mb-2">필요한 재료</h4>
+                                <div className="ingredients-grid">
+                                    {recipe.ingredients.map((ingredient, index) => (
+                                        <span 
+                                            key={index}
+                                            className={`ingredient-tag ${ingredient.necessary ? 'necessary' : 'optional'}`}
+                                        >
+                                            {ingredient.ingredientName}
+                                            {ingredient.necessary && 
+                                                <span className="necessary-badge">필수</span>
+                                            }
+                                        </span>
+                                    ))}
+                                </div>
+                            </div>
+
+                            <div className="recipe-info">
+                                <div className="flex justify-between">
+                                    <span>조리 시간</span>
+                                    <span>{recipe.recipeCookingTime}분</span>
+                                </div>
+
+                                <div className="flex justify-between">
+                                    <span>재료 매칭률</span>
+                                    <span className="match-rate">{recipe.matchRate.toFixed(1)}%</span>
+                                </div>
+
+                                {recipe.remainExpirationDays <= 3 && (
+                                    <div className="expiry-warning">
+                                        ⚠️ {recipe.urgentIngredientName} 
+                                        {recipe.remainExpirationDays}일 남음
+                                    </div>
+                                )}
+                            </div>
+
+                            <button className="view-recipe-btn">
+                                레시피 보기
+                            </button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default RecipeRecommend;

src/sources/api/recipeAPI.jsx

@@ -21,4 +21,10 @@ export const createRecipe = async (recipe) => {
     const url = `${prefix}`;
     const res = await axios.post(url, recipe);
     return res.data;
+}
+
+export const getRecommendedRecipes = async (userPk) => {
+    const url = `${prefix}/recommend?userPk=${userPk}`;
+    const res = await axios.get(url);
+    return res.data;
 }