refactor(Header): tv() 의존성 제거 및 인라인 스타일 적용

Author: KyeongJooni

src/shared/ui/Header/Header.tsx

@@ -1,11 +1,8 @@
 import { Logo } from '@shared/assets/logo';
 import { Button } from '@shared/ui/Button/Button';
-import { headerVariants } from '@shared/ui/Header/Header.variants';
 import { UserMenu } from '@shared/ui/Header/UserMenu';
+import { cn } from '@shared/utils/cn';
 import type { ComponentPropsWithoutRef } from 'react';
-import type { VariantProps } from 'tailwind-variants';
-
-const { base, rightSection, innerSection, navItem } = headerVariants();
 
 const NAV_ITEMS = [
   { id: 'buy', label: '구매하기' },
@@ -15,14 +12,13 @@ const NAV_ITEMS = [
   { id: 'mypage', label: '마이페이지' },
 ] as const;
 
-export type HeaderProps = Omit<ComponentPropsWithoutRef<'header'>, 'children'> &
-  VariantProps<typeof headerVariants> & {
-    isLoggedIn?: boolean;
-    user?: { profileImage?: string; nickname?: string };
-    onLoginClick?: () => void;
-    onMyPageClick?: () => void;
-    onLogoutClick?: () => void;
-  };
+export type HeaderProps = Omit<ComponentPropsWithoutRef<'header'>, 'children'> & {
+  isLoggedIn?: boolean;
+  user?: { profileImage?: string; nickname?: string };
+  onLoginClick?: () => void;
+  onMyPageClick?: () => void;
+  onLogoutClick?: () => void;
+};
 
 export const Header = ({
   className,
@@ -34,12 +30,18 @@ export const Header = ({
   ...props
 }: HeaderProps) => {
   return (
-    <header {...props} className={base({ className })}>
+    <header
+      {...props}
+      className={cn(
+        'mx-auto flex w-full max-w-[1440px] items-center justify-between bg-white px-[120px] py-(--margin-l)',
+        className
+      )}
+    >
       <Logo />
-      <div className={rightSection()}>
-        <nav className={innerSection()}>
+      <div className="flex items-center gap-[93px]">
+        <nav className="flex items-center gap-[56px]">
           {NAV_ITEMS.map((item) => (
-            <span key={item.id} className={navItem()}>
+            <span key={item.id} className="typo-body-1 cursor-pointer text-center text-gray-900">
               {item.label}
             </span>
           ))}

src/shared/ui/Header/UserMenu.tsx

@@ -1,19 +1,9 @@
 import { CaretDownMdIcon } from '@shared/assets/icons';
 import { Button } from '@shared/ui/Button/Button';
-import { headerVariants } from '@shared/ui/Header/Header.variants';
 import { Profile } from '@shared/ui/Profile/Profile';
+import { cn } from '@shared/utils/cn';
 import { useEffect, useRef, useState } from 'react';
 
-const {
-  userMenuButton,
-  userMenuIcon,
-  userMenuDropdown,
-  userMenuDropdownInner,
-  userMenuDropdownInfo,
-  userMenuDropdownName,
-  userMenuDropdownLink,
-} = headerVariants();
-
 export type UserMenuProps = {
   profileImage?: string;
   nickname?: string;
@@ -59,29 +49,31 @@ export const UserMenu = ({
     <div ref={containerRef} className="relative">
       <button
         type="button"
-        className={userMenuButton()}
+        className="flex cursor-pointer items-center gap-[6px]"
         onClick={() => setIsOpen((prev) => !prev)}
         aria-expanded={isOpen}
         aria-haspopup="menu"
       >
         <Profile size="sm" image={profileImage} />
-        <CaretDownMdIcon className={userMenuIcon({ className: isOpen ? 'rotate-180' : '' })} />
+        <CaretDownMdIcon
+          className={cn('text-gray-400 transition-transform duration-200', isOpen && 'rotate-180')}
+        />
       </button>
 
       {isOpen && (
         <div
           role="menu"
           aria-label="사용자 메뉴"
-          className={userMenuDropdown({ className: 'absolute top-full right-0 mt-2' })}
+          className="rounded-m absolute top-full right-0 mt-2 inline-flex h-[235px] items-center gap-[10px] bg-white p-[17px_32px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
         >
-          <div className={userMenuDropdownInner()}>
-            <div className={userMenuDropdownInfo()}>
-              <span className={userMenuDropdownName()}>{nickname}님</span>
+          <div className="flex w-[163px] flex-col items-start gap-[45px]">
+            <div className="flex flex-col items-start gap-[17px] self-stretch">
+              <span className="typo-body-2 self-stretch text-gray-900">{nickname}님</span>
             </div>
             <button
               type="button"
               role="menuitem"
-              className={userMenuDropdownLink()}
+              className="typo-caption-1 cursor-pointer self-stretch border-none bg-transparent p-0 text-left text-gray-500"
               onClick={onMyPageClick}
             >
               마이페이지