#09 맞춤 레시피 추천

src/pages/recipe/Recipe.jsx

@@ -7,46 +7,89 @@ import "../../assets/css/recipe/recipe.css"
 
 
 function Recipe() {
-    const [recipeList, setRecipeList] = useState([])
+    const [recipeList, setRecipeList] = useState([]);
     const navigate = useNavigate();
-    const userPk = localStorage.getItem('userPk');
-    //userPk 를 어떻게 처리할지에 따라 바꿀듯합니다.
+    const [userPk, setUserPk] = useState(null);
+
+    useEffect(() => {
+        // token에서 userPk 추출
+        const checkLogin = () => {
+            const token = localStorage.getItem('token');
+
+            if (!token) {
+                alert('로그인이 필요한 서비스입니다.');
+                navigate('/login');
+                return;
+            }
+
+            try {
+                const payload = token.split(".")[1];
+                const decoded = JSON.parse(atob(payload));
+                const extractedUserPk = decoded.username; 
+
+                if (!extractedUserPk) {
+                    alert('사용자 정보를 찾을 수 없습니다.');
+                    navigate('/login');
+                    return;
+                }
+
+                setUserPk(extractedUserPk);
+            } catch (error) {
+                console.error("Failed to decode token:", error);
+                alert('로그인 정보가 유효하지 않습니다.');
+                navigate('/login');
+            }
+        };
+
+        checkLogin();
+    }, [navigate]);
 
     useEffect(() => {
         const fetchRecipes = async () => {
             try {
                 const data = await getRecipeList();
-                console.log("recipeList",data); // 가져온 데이터 확인
-                setRecipeList(data); // 상태 업데이트
+                console.log("recipeList", data);
+                setRecipeList(data);
             } catch (err) {
                 console.error(err);
             }
         };
 
-        fetchRecipes(); // 비동기 작업 호출
-    }, []);
+        if (userPk) {  // userPk가 있을 때만 레시피 목록 가져오기
+            fetchRecipes();
+        }
+    }, [userPk]);  // userPk가 변경될 때마다 실행
 
     const handleAdd = useCallback(() => {
+        if (!userPk) {
+            alert('로그인이 필요한 서비스입니다.');
+            navigate('/login');
+            return;
+        }
         navigate("/recipe/create");
-    },[navigate])
+    }, [navigate, userPk]);
 
     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>
+                {userPk && (
+                    <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>
-
         </>
-    )
+    );
 }
+
 export default Recipe

src/pages/recipe/RecipeRecommend.jsx

@@ -3,7 +3,7 @@ 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 '../../assets/css/recipe/RecipeRecommend.css'
 import { useParams } from "react-router-dom";
 
 function RecipeRecommend() {
@@ -75,7 +75,7 @@ function RecipeRecommend() {
                                 {recipe.remainExpirationDays <= 3 && (
                                     <div className="expiry-warning">
                                         ⚠️ {recipe.urgentIngredientName} 
-                                        {recipe.remainExpirationDays}일 남음
+                                         {recipe.remainExpirationDays} 일 남음
                                     </div>
                                 )}
                             </div>