Feat[#THKV-119] : NavProfile 리디자인 적용 및 Header 구현

src/app/(root)/layout.tsx

@@ -1,8 +1,10 @@
+import Header from '@/components/common/Header';
 import Navbar from '@/components/common/Navbar';
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className='flex min-h-screen'>
+      <Header />
       <Navbar />
       <main className='flex-grow bg-white-200 p-6 pt-12'>{children}</main>
     </div>

src/components/common/Header/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import Image from 'next/image';
+import NavProfile from '@/components/common/NavProfile';
+import { useMounted } from '@/hooks/useMounted';
+import { useUserStore } from '@/stores/useUserStore';
+
+const Header = () => {
+  const isMounted = useMounted();
+  const username = useUserStore((state) => state.username);
+
+  return (
+    <header className='fixed top-0 z-10 flex w-full flex-row items-center justify-between border border-b-gray-100 bg-white-100 px-6 py-4'>
+      <Image
+        src='/imgs/header-logo.png'
+        width={66}
+        height={48}
+        alt='header logo'
+      />
+      <NavProfile name={isMounted ? username : ''} />
+    </header>
+  );
+};
+
+export default Header;

src/components/common/Icon/assets/ArrowNext.tsx

@@ -11,15 +11,16 @@ const ArrowNext = ({
       width={width}
       height={height}
       viewBox='0 0 24 24'
+      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M9.86321 6.2636C10.2147 5.91213 10.7845 5.91213 11.136 6.2636L16.236 11.3636C16.5875 11.7151 16.5875 12.2849 16.236 12.6364L11.136 17.7364C10.7845 18.0879 10.2147 18.0879 9.86321 17.7364C9.51174 17.3849 9.51174 16.8151 9.86321 16.4636L14.3268 12L9.86321 7.5364C9.51174 7.18492 9.51174 6.61508 9.86321 6.2636Z'
-        stroke='none'
-        fill={color}
+        d='M8.25 4.5L15.75 12L8.25 19.5'
+        stroke={color}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
       />
     </svg>
   );

src/components/common/Icon/assets/index.ts

@@ -47,7 +47,7 @@ export const iconMap: Record<string, IconMapEntry> = {
   arrowUp: { type: 'stroke', file: Arrowup },
   arrowDown: { type: 'stroke', file: ArrowDown },
   arrowPrev: { type: 'fill', file: ArrowPrev },
-  arrowNext: { type: 'fill', file: ArrowNext },
+  arrowNext: { type: 'stroke', file: ArrowNext },
   arrowPrevBlock: { type: 'fill', file: ArrowPrevBlock },
   arrowNextBlock: { type: 'fill', file: ArrowNextBlock },
   dashboard: {

src/components/common/NavProfile/index.tsx

@@ -1,17 +1,21 @@
 import Badge from '@/components/common/Badge';
 import Icon from '@/components/common/Icon';
+import { Subtitle2Black, TableBodyTypo } from '@/components/common/Typography';
 
 const NavProfile = ({ name = '냠냠' }: { name: string }) => {
   return (
-    <button className='flex h-[90px] w-full items-center justify-between px-10 py-6'>
-      <Badge imageSrc='/imgs/pi-gon-ping.jpg' />
-      <div className='flex flex-col gap-[2px]'>
-        <span className='text-nowrap text-xs text-gray-600'>
-          다시 만나 기뻐요🐭
-        </span>
-        <span className='text-sm text-dark-100'>{name}님</span>
+    <button className='flex w-[238px] items-center justify-between gap-2'>
+      <Badge
+        // TODO: 추후 이미지 변경 필요
+        imageSrc='/imgs/pi-gon-ping.jpg'
+        size={40}
+        className='border border-grey-100'
+      />
+      <div className='flex items-center justify-center gap-2'>
+        <TableBodyTypo>다시 만나 기뻐요!</TableBodyTypo>
+        <Subtitle2Black>{name}님</Subtitle2Black>
       </div>
-      <Icon name='arrowNext' color='black' className='hover:stroke-dark-200' />
+      <Icon name='arrowNext' color='black' />
     </button>
   );
 };

src/components/common/Typography/index.tsx

@@ -43,6 +43,11 @@ export const InfoCardTypo = customTypography('span', {
   color: 'black',
 });
 
+export const Subtitle2Black = customTypography('span', {
+  type: 'Subtitle2',
+  color: 'black',
+});
+
 export const Label1White = customTypography('span', {
   type: 'label1',
   color: 'white',

src/hooks/useMounted.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export const useMounted = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return isMounted;
+};