diff --git a/src/components/layout/HeaderLogoBar.jsx b/src/components/layout/HeaderLogoBar.jsx index 0b8aef801a89cb09855afc002deaa5380165a417..4e08f2d392214ed7a1b08fd7d378b233d9c0a1a2 100644 --- a/src/components/layout/HeaderLogoBar.jsx +++ b/src/components/layout/HeaderLogoBar.jsx @@ -1,12 +1,24 @@ +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> ); }; diff --git a/src/components/layout/HeaderNav.jsx b/src/components/layout/HeaderNav.jsx index e1d5d5d0752f038959b76dfb78d7b77e78e5d0c0..2dba5ad2a38664ba6d05d5462cd1f71d719c40fa 100644 --- a/src/components/layout/HeaderNav.jsx +++ b/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,14 +79,25 @@ export default function HeaderNav() { > 번개채팅방 </Button> - <Button - size="lg" - theme="black" - icon={<LogoIcon fillColor="#ffffff" />} - onClick={navigateToLogin} - > - 로그인 - </Button> + {user ? ( + <Button + size="lg" + theme="black" + icon={<LogoIcon fillColor="#ffffff" />} + onClick={navigateToMyPage} + > + 마이페이지 + </Button> + ) : ( + <Button + size="lg" + theme="black" + icon={<LogoIcon fillColor="#ffffff" />} + onClick={navigateToLogin} + > + 로그인 + </Button> + )} </> )} </div> diff --git a/src/store/authStore.js b/src/store/authStore.js index 2bf688c2b0e49580e5173bddafd74f4dd589ba8c..1d1223be9a0c5fda04df8865f53e3e606e5a1cbd 100644 --- a/src/store/authStore.js +++ b/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 () => {