feat(QYOG-165): 로그인 이후 헤더 화면 UI 수정

src/components/UI/Header/Header.tsx

@@ -16,13 +16,13 @@ import { accessTokenAtom } from "@/globalState";
 import { authSocialAPI } from "@/apis";
 
 import Logo from "@/assets/main/logo.png";
-import { Row } from "@/components/Layouts";
+import { Column, Row } from "@/components/Layouts";
 import { Button } from "@/components/Design";
 import { WhatIF } from "@/components/Utilities";
-import { LoginButton } from "./private";
+import { LoginButton, LoggedIn } from "./private";
 
 export default function Header({}: {}) {
-  const { isLoggedIn, logout } = useAuth();
+  const { isLoggedIn } = useAuth();
   const router = useRouter();
 
   const [accessToken, setAccessToken] = useAtom(accessTokenAtom);
@@ -170,16 +170,7 @@ export default function Header({}: {}) {
             </Row.li>
           }
         >
-          <Row.li>
-            <Button.Text
-              onClick={logout}
-              typoSize="Head5"
-              typoColor="neutral_60"
-              hoverTypoColor="neutral_90"
-            >
-              로그아웃
-            </Button.Text>
-          </Row.li>
+          <LoggedIn />
         </WhatIF>
       </Row.ul>
     </S.Container>

src/components/UI/Header/private/LoggedIn.tsx

@@ -0,0 +1,49 @@
+/*
+ * Created on Sun Jun 02 2024
+ *
+ * Copyright (c) 2024 Your Company
+ */
+
+import styled from "@emotion/styled";
+import Image from "next/image";
+
+import { Column, Row } from "@/components/Layouts";
+import { useAuth } from "@/hooks";
+import { Button } from "@/components/Design";
+
+import woni_happy from "@/assets/woni/woni_happy.png";
+
+export default function LoggedIn() {
+  const { logout } = useAuth();
+
+  return (
+    <Wrapper gap={12}>
+      <Column gap={6}>
+        <Button.Text
+          typoSize="Head12"
+          typoColor="neutral_50"
+          hoverTypoColor="neutral_70"
+        >
+          내 정보
+        </Button.Text>
+        <Button.Text
+          typoSize="Head12"
+          typoColor="neutral_50"
+          onClick={logout}
+          hoverTypoColor="neutral_70"
+        >
+          로그아웃
+        </Button.Text>
+      </Column>
+      <div css={{ position: "relative", minWidth: "32px", minHeight: "32px" }}>
+        <Image src={woni_happy} alt="woni_happy" fill quality={30} />
+      </div>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled(Row.li)`
+  border-radius: 20px;
+  border: 2px solid ${({ theme }) => theme.color.primary_60};
+  padding: 9px 14px;
+`;

src/components/UI/Header/private/index.ts

@@ -5,3 +5,4 @@
  */
 
 export { default as LoginButton } from "./LoginButton";
+export { default as LoggedIn } from "./LoggedIn";