feat: 로그인 상태에 따른 헤딩바 변형 (#10)

src/components/layout/HeaderLogoBar.jsx

+import React from "react";
 import LogoIcon from "../icons/LogoIcon";
+import useAuthStore from "../../store/authStore";
 
 const HeaderLogoBar = () => {
+  const { user } = useAuthStore(); // Zustand에서 user 상태 가져오기
+
   return (
-    <div className="flex items-center justify-start w-full h-16 px-4 bg-white">
+    <div className="flex items-center justify-between w-full h-16 px-4 bg-white">
+      {/* 왼쪽: 로고와 앱 이름 */}
       <div className="flex items-center">
         <LogoIcon width={32} height={32} />
         <span className="title-1">YANAWA</span>
       </div>
+
+      {/* 오른쪽: 사용자 이름 */}
+      <div className="flex items-center">
+        <span className="text-gray-600 label-1">
+          {user ? `${user.name}` : "guest"} 님
+        </span>
+      </div>
     </div>
   );
 };

src/components/layout/HeaderNav.jsx

@@ -2,10 +2,12 @@ import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import Button from "../Button";
 import LogoIcon from "../icons/LogoIcon";
+import useAuthStore from "../../store/authStore";
 
 export default function HeaderNav() {
   const navigate = useNavigate();
   const [isMobile, setIsMobile] = useState(false);
+  const { user } = useAuthStore(); // Zustand에서 user 상태 가져오기
 
   useEffect(() => {
     const checkMobile = () => setIsMobile(window.innerWidth <= 768);
@@ -18,6 +20,7 @@ export default function HeaderNav() {
   const navigateToHome = () => navigate("/");
   const navigateToChattingList = () => navigate("/chattinglist");
   const navigateToLogin = () => navigate("/login");
+  const navigateToMyPage = () => navigate("/mypage");
 
   return (
     <header className="bg-white shadow-md">
@@ -47,20 +50,14 @@ export default function HeaderNav() {
                 size="icon"
                 theme="black"
                 icon={<LogoIcon fillColor="#ffffff" />}
-                onClick={navigateToLogin}
+                onClick={user ? navigateToMyPage : navigateToLogin} // 조건부 이동
               />
             </>
           ) : (
             <>
-              <Button
-                size="icon"
-                theme="pink"
-                icon={<LogoIcon fillColor="#ffffff" />}
-                onClick={navigateToHome}
-              />
               <Button
                 size="lg"
-                theme="purple"
+                theme="pink"
                 icon={<LogoIcon fillColor="#ffffff" />}
                 onClick={navigateToHome}
               >
@@ -68,7 +65,7 @@ export default function HeaderNav() {
               </Button>
               <Button
                 size="lg"
-                theme="indigo"
+                theme="purple"
                 icon={<LogoIcon fillColor="#ffffff" />}
                 onClick={navigateToTimeTable}
               >
@@ -82,6 +79,16 @@ export default function HeaderNav() {
               >
                 번개채팅방
               </Button>
+              {user ? (
+                <Button
+                  size="lg"
+                  theme="black"
+                  icon={<LogoIcon fillColor="#ffffff" />}
+                  onClick={navigateToMyPage}
+                >
+                  마이페이지
+                </Button>
+              ) : (
                 <Button
                   size="lg"
                   theme="black"
@@ -90,6 +97,7 @@ export default function HeaderNav() {
                 >
                   로그인
                 </Button>
+              )}
             </>
           )}
         </div>

src/store/authStore.js

@@ -3,6 +3,7 @@ import { getSessionInfo, logout } from "../api/auth";
 
 const useAuthStore = create((set) => ({
   user: null, // 사용자 정보
+  // user: { name: "윤석찬", email: "ysc0731@ajou.ac.kr" }, // 사용자 정보
 
   // 세션 정보 가져오기
   fetchSession: async () => {