From 5168b18abf9bf4c7a3414bae66803c3a53f9365e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A4=ED=9D=AC=EC=A4=80?= <yhj0566@naver.com>
Date: Mon, 23 Dec 2024 03:30:37 +0900
Subject: [PATCH] =?UTF-8?q?=20Refactor=20:=20=EB=A7=9E=EC=B6=A4=20?=
 =?UTF-8?q?=EB=A0=88=EC=8B=9C=ED=94=BC=20=EC=B6=94=EC=B2=9C=201.=20url=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20token=20=EC=97=90=EC=84=9C=20u?=
 =?UTF-8?q?serPk=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0=20,=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=EC=8B=9C=20=EC=9D=B4=EC=9A=A9=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5=20=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?Related=20to=20#09?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css}/recipe/RecipeRecommend.css           |  0
 src/pages/recipe/Recipe.jsx                   | 71 +++++++++++++++----
 src/pages/recipe/RecipeRecommend.jsx          |  4 +-
 3 files changed, 59 insertions(+), 16 deletions(-)
 rename src/{pages => assets/css}/recipe/RecipeRecommend.css (100%)

diff --git a/src/pages/recipe/RecipeRecommend.css b/src/assets/css/recipe/RecipeRecommend.css
similarity index 100%
rename from src/pages/recipe/RecipeRecommend.css
rename to src/assets/css/recipe/RecipeRecommend.css
diff --git a/src/pages/recipe/Recipe.jsx b/src/pages/recipe/Recipe.jsx
index 96b9f3a..05a76d3 100644
--- a/src/pages/recipe/Recipe.jsx
+++ b/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
\ No newline at end of file
diff --git a/src/pages/recipe/RecipeRecommend.jsx b/src/pages/recipe/RecipeRecommend.jsx
index 95aa74b..0f5f471 100644
--- a/src/pages/recipe/RecipeRecommend.jsx
+++ b/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>