Feat: #107 헤더에 전역 상태 적용

PoodingDev · Dec 3, 2024 · 882ad72 · 882ad72
1 parent 648d513
commit 882ad72
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -6,7 +6,7 @@ import { useAuth } from "../context/AuthContext";
 
 export default function Header() {
   const navigate = useNavigate();
-  const { isLoggedIn, setLoggedIn, userInfo } = useAuth();
+  const { loggedIn, setLoggedIn, userInfo } = useAuth(); // loggedIn으로 수정
   const [isView, setIsView] = useState(false);
 
   const setView = () => {
@@ -20,6 +20,7 @@ export default function Header() {
   };
 
   useEffect(() => {
+    // localStorage에서 토큰 확인
     const token = localStorage.getItem("token");
     if (token) {
       setLoggedIn(true);
@@ -36,7 +37,7 @@ export default function Header() {
         alt="Evento"
         onClick={() => navigate("/calendar")}
       />
-      {!isLoggedIn ? (
+      {!loggedIn ? (
         <button
           className="h-[2.5rem] w-[5rem] rounded-[0.5rem] bg-eventoPurple text-[0.95rem] font-semibold text-white hover:bg-eventoPurple/80 active:bg-eventoPurpleLight active:text-eventoPurple/80"
           onClick={() => navigate("/login")}
@@ -46,21 +47,21 @@ export default function Header() {
       ) : (
         <FontAwesomeIcon
           icon={faUser}
-          className="text-2xl text-[#4F378B]"
+          className="cursor-pointer text-2xl text-eventoPurpleDark"
           onClick={setView}
         />
       )}
-      {isView && isLoggedIn && (
+      {isView && loggedIn && (
         <div className="bg-event absolute right-[1rem] top-[4rem] z-10 flex h-[13em] w-[10rem] flex-col items-center justify-center rounded-[1rem] border-solid border-eventoPurpleLight bg-zinc-100 text-eventoblack">
           <FontAwesomeIcon
             icon={faUser}
-            className="mb-[1rem] mt-[0.5rem] text-[1.5rem] text-[#4F378B]"
+            className="mb-[1rem] mt-[0.5rem] text-[1.5rem] text-eventoPurpleDark"
           />
           <p className="mb-[1.4rem] text-center text-[1.25rem] font-medium">
-            {userInfo?.user_name || "Evento1"}
+            {userInfo?.user_name || "Guest"}
           </p>
           <button
-            className="mb-[0.3rem] h-[2rem] w-[7rem] rounded-[0.5rem] text-[0.95rem] font-semibold hover:bg-eventoPurpleLight hover:text-eventoPurple"
+            className="mb-[0.3rem] h-[2rem] w-[7rem] cursor-pointer rounded-[0.5rem] text-[0.95rem] font-semibold hover:bg-eventoPurpleLight hover:text-eventoPurple"
             onClick={() => {
               setView();
               navigate("/profile");
@@ -69,7 +70,7 @@ export default function Header() {
             내 프로필
           </button>
           <button
-            className="h-[2rem] w-[7rem] rounded-[0.5rem] text-[0.95rem] font-semibold hover:bg-lightRed hover:text-darkRed"
+            className="h-[2rem] w-[7rem] cursor-pointer rounded-[0.5rem] text-[0.95rem] font-semibold hover:bg-lightRed hover:text-darkRed"
             onClick={handleLogout}
           >
             로그아웃

diff --git a/src/pages/LoginPostCode.jsx b/src/pages/LoginPostCode.jsx
@@ -27,12 +27,14 @@ export default function LoginPostCode() {
         // 토큰 저장
         localStorage.setItem("token", token);
 
-        // 사용자 정보
+        // 사용자 정보 가져오기
         const userInfo = await fetchUserInfo(token);
-        console.log("User ID:", userInfo.user_id);
+        console.log("User Info:", userInfo);
+
         // 전역 상태 업데이트
         setLoggedIn(true);
         setUserInfo(userInfo);
+
         // 캘린더 화면으로 이동
         navigate("/calendar");
       } catch (error) {