Refector: 로그인됐을 경우 gnb userInfo 리팩토링

GnbUserInfo 분리

co-kkiri/src/components/commons/Gnb/Gnb.styled.ts

@@ -60,6 +60,31 @@ export const PostButton = styled.div`
   }
 `;
 
+export const UserInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  cursor: pointer;
+
+  img {
+    border-radius: 50%;
+  }
+`;
+
+export const ProfileImg = styled.img`
+  width: 3.6rem;
+  height: 3.6rem;
+  object-fit: cover;
+`;
+
+export const Nickname = styled.div`
+  ${typography.font14Medium}
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+`;
+
 export const SignButton = styled.button`
   ${typography.font14Medium};
   &:hover {

co-kkiri/src/components/commons/Gnb/GnbUserInfo.tsx

@@ -0,0 +1,24 @@
+import { IMAGES } from "@/constants/images";
+import * as S from "./Gnb.styled";
+
+interface GnbUserInfoProps {
+  user: {
+    id: number;
+    nickname: string;
+    profileImageUrl: string;
+  };
+  onClick: () => void;
+}
+
+export default function GnbUserInfo({ user, onClick }: GnbUserInfoProps) {
+  return (
+    <S.UserInfoWrapper onClick={onClick}>
+      {user.profileImageUrl ? (
+        <S.ProfileImg src={user.profileImageUrl} alt="프로필 사진" />
+      ) : (
+        <img src={IMAGES.profileImg.src} alt={IMAGES.profileImg.alt} />
+      )}
+      <S.Nickname>{user.nickname}</S.Nickname>
+    </S.UserInfoWrapper>
+  );
+}

co-kkiri/src/components/commons/Gnb/index.tsx

@@ -1,17 +1,17 @@
-import { useState } from "react";
 import { Link } from "react-router-dom";
 import * as S from "./Gnb.styled";
 import { ROUTER_PATH } from "@/lib/path";
 import { ICONS } from "@/constants/icons";
 import { IMAGES } from "@/constants/images";
-import UserInfo from "../UserInfo";
 import UserPopover from "../UserPopover";
 import AuthModal from "@/components/modals/AuthModal";
 import useOpenToggle from "@/hooks/useOpenToggle";
 import useAuthModalToggleStore from "@/stores/authModalToggle";
+import GnbUserInfo from "./GnbUserInfo";
 
 interface GnbProps {
   user?: {
+    id: number;
     nickname: string;
     profileImageUrl: string;
   };
@@ -45,7 +45,7 @@ export default function Gnb({ user, onSideBarClick }: GnbProps) {
             <S.PostButton>스터디 모집하기</S.PostButton>
           </Link>
           {user ? (
-            <UserInfo user={user} onClick={handlePopoverOpen} />
+            <GnbUserInfo user={user} onClick={handlePopoverOpen} />
           ) : (
             <S.SignButton onClick={toggleAuthModal}>로그인/회원가입</S.SignButton>
           )}

co-kkiri/src/components/commons/UserPopover.tsx

@@ -34,8 +34,6 @@ const { typography, mediaQueries, color, boxShadow, zIndex } = DESIGN_TOKEN;
 const Container = styled.div<{ $isPopoverOpen: boolean }>`
   ${zIndex.popover}
   display: ${({ $isPopoverOpen }) => ($isPopoverOpen ? "block" : "none")};
-  opacity: ${({ $isPopoverOpen }) => ($isPopoverOpen ? 1 : 0)};
-  transition: opacity 0.2s ease-in-out;
   position: absolute;
   right: 4rem;
 

co-kkiri/src/layouts/Navigation.tsx

@@ -6,10 +6,8 @@ import Gnb from "@/components/commons/Gnb";
 import SideBar from "@/components/commons/SideBar";
 import { useWindowSize } from "usehooks-ts";
 import { slideIn, slideOut } from "@/utils/animation";
-import { useState } from "react";
 
 export default function Navigation() {
-  const [isOpen, setIsOpen] = useState(false);
   const isSideBarOpen = useSideBarStore((state) => state.isSideBarOpen);
   const toggleSideBar = useSideBarStore((state) => state.toggleSideBar);
 
@@ -25,8 +23,8 @@ export default function Navigation() {
       <Gnb onSideBarClick={handleSideBar} />
       <SideBarWrapper $isOpen={isSideBarOpen}>
         {isSideBarOpen && isTabletOrMobile && <SideBar onClick={handleSideBar} onClose={handleSideBar} />}
+        {!isTabletOrMobile && <SideBar onClose={() => {}} />}
       </SideBarWrapper>
-      <SideBarWrapper $isOpen={isSideBarOpen}>{!isTabletOrMobile && <SideBar onClose={() => {}} />}</SideBarWrapper>
       <OutletWrapper $isOpen={isSideBarOpen}>
         <Outlet />
       </OutletWrapper>