[Feat] layout header 로그인 버튼 UI 추가 및 랜더링 분기 처리

src/components/layout/header/cow-bell/index.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link';
+
+import { Icon } from '@/components/icon';
+import { cn } from '@/lib/utils';
+import { useNotification } from '@/providers';
+
+export const CowBell = () => {
+  const { unReadCount, receivedNewNotification } = useNotification();
+
+  return (
+    <Link href={'/notification'} className='flex-center relative h-10 w-10'>
+      <Icon
+        id='bell-read'
+        className={cn(
+          'size-10 text-gray-700 transition-colors duration-200',
+          receivedNewNotification && 'animate-ring text-mint-500',
+        )}
+      />
+      {unReadCount > 0 && (
+        <>
+          <span
+            className={cn(
+              'bg-mint-300 absolute top-1 right-1.75 aspect-square size-3.5 rounded-full',
+              receivedNewNotification && 'animate-ping',
+            )}
+          />
+          <span className='bg-mint-500 text-mono-white text-text-2xs-semibold flex-center absolute top-1 right-1.75 aspect-square size-3.5 rounded-full'>
+            {unReadCount}
+          </span>
+        </>
+      )}
+    </Link>
+  );
+};

src/components/layout/header/header-login/index.tsx

@@ -0,0 +1,9 @@
+import Link from 'next/link';
+
+export const HeaderLogin = () => {
+  return (
+    <Link href={'/login'} className='text-text-sm-semibold px-2 py-1 text-gray-500'>
+      로그인
+    </Link>
+  );
+};

src/components/layout/header/index.tsx

@@ -1,55 +1,22 @@
 'use client';
+
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 
 import { Icon } from '@/components/icon';
-import { cn } from '@/lib/utils';
-import { useAuth, useNotification } from '@/providers';
+import { CowBell } from '@/components/layout/header/cow-bell';
+import { HeaderLogin } from '@/components/layout/header/header-login';
+import { useAuth } from '@/providers';
 
 export const Header = () => {
   const { isAuthenticated } = useAuth();
-  const { unReadCount, receivedNewNotification } = useNotification();
-  const router = useRouter();
-
-  const onLogoClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-    router.push('/');
-  };
 
   return (
     <header className={`sticky top-0 z-100 w-full bg-white`}>
       <nav className='flex-between px-4 py-2'>
-        <Link href={'/'} onClick={onLogoClick}>
+        <Link href={'/'}>
           <Icon id='wego-logo' width={92} height={40} />
         </Link>
-        <div className='flex-center gap-2'>
-          <Link
-            href={'/notification'}
-            prefetch={isAuthenticated}
-            className='flex-center relative h-10 w-10'
-          >
-            <Icon
-              id='bell-read'
-              className={cn(
-                'size-10 text-gray-700 transition-colors duration-200',
-                receivedNewNotification && 'animate-ring text-mint-500',
-              )}
-            />
-            {unReadCount > 0 && (
-              <>
-                <span
-                  className={cn(
-                    'bg-mint-300 absolute top-1 right-1.75 aspect-square size-3.5 rounded-full',
-                    receivedNewNotification && 'animate-ping',
-                  )}
-                />
-                <span className='bg-mint-500 text-mono-white text-text-2xs-semibold flex-center absolute top-1 right-1.75 aspect-square size-3.5 rounded-full'>
-                  {unReadCount}
-                </span>
-              </>
-            )}
-          </Link>
-        </div>
+        <div className='flex-center gap-2'>{isAuthenticated ? <CowBell /> : <HeaderLogin />}</div>
       </nav>
     </header>
   );

src/providers/provider-auth/index.tsx

@@ -23,7 +23,7 @@ interface Props {
 }
 
 export const AuthProvider = ({ children, hasRefreshToken }: Props) => {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState(hasRefreshToken);
 
   // 초기값 설정
   // 페이지가 새로고침 될 때 accessToken이 없으면 refresh 시도, state update 실행