Merge pull request #32 from geulDa/feat/#17/header-components

✨Feat: header components 구현

Author: jjangminii

src/pages/index.tsx

@@ -1,18 +1,19 @@
+import { ControlBar, Header } from '@/shared/components';
 import { Icon } from '@/shared/icons';
 
 export default function Home() {
   return (
     <>
       <div className='flex flex-col items-center justify-center  min-h-screen py-2 bg-gray-50'>
         <main className='flex flex-col items-center justify-center w-full flex-1 px-4 sm:px-20 text-center'>
+          <Header onClick={() => {}} className='' title={'글다'} />
+          <ControlBar isLoggedIn={false} onLogin={() => {}} userName={''} />
+          <ControlBar isLoggedIn={true} userName='홍길동' onLogin={() => {}} />
           <h1 className='text-4xl sm:text-6xl font-extrabold text-gray-900 mb-4'>
             초기 세팅 완료
             <Icon name='User' color='mint-600' />
           </h1>
-          <Icon name='CalendarBlank' size={200} color='gray-900' />
-          <Icon name='User' size={200} color='blue-400' />
-          <Icon name='User' size={200} color='red-300' />
-          <Icon name='User' size={200} color='red-300' />
+
           <p className='mt-3 text-lg sm:text-2xl text-gray-600'>
             Next.js(Page Router) + TS + Tailwind + Axios
           </p>

src/shared/components/header/ControlBar.tsx

@@ -0,0 +1,71 @@
+import { Icon } from '@/shared/icons';
+import { cn } from '@/shared/lib';
+import { cva } from 'class-variance-authority';
+
+interface ControlBarProps {
+  isLoggedIn: boolean;
+  onLogin: () => void;
+  userName: string;
+  className?: string;
+}
+
+const rightStyle = cva('flex items-center gap-[0.6rem] transition w-[7.8rem]', {
+  variants: {
+    state: {
+      loggedIn: 'text-mint-600',
+      guest: 'text-gray-400 hover:text-gray-600',
+    },
+  },
+  defaultVariants: { state: 'guest' },
+});
+
+const ControlBar = ({
+  onLogin,
+  isLoggedIn,
+  userName = '글다',
+  className,
+}: ControlBarProps) => {
+  const rightState = isLoggedIn ? 'loggedIn' : ('guest' as const);
+  const iconColor = isLoggedIn ? 'mint-600' : ('gray-400' as const);
+
+  return (
+    <header className={cn('bg-none w-full h-[5.4rem]', className)} role='group'>
+      <div className='h-full grid grid-cols-[auto_1fr_auto] items-center gap-[1.2rem]'>
+        <div
+          className='w-[7.8rem] h-[5.4rem] rounded-[0.6rem] bg-gray-200'
+          aria-hidden
+        />
+
+        <h1 className='justify-self-center text-headline-sm-serif font-[400] leading-[2.4rem] tracking-[0.015rem] text-gray-900'>
+          글다
+        </h1>
+        {isLoggedIn ? (
+          <div className={cn(rightStyle({ state: rightState }), 'min-w-0')}>
+            <Icon name='User' size={24} color={iconColor} />
+            <span
+              className='text-body-md w-[5.3rem] truncate block'
+              aria-label={`${userName}님`}
+            >
+              {userName}님
+            </span>
+          </div>
+        ) : (
+          <button
+            type='button'
+            onClick={(e) => {
+              e.stopPropagation();
+              onLogin?.();
+            }}
+            className={rightStyle({ state: rightState })}
+            aria-label='Log In'
+          >
+            <Icon name='User' size={24} color={iconColor} />
+            <span className='text-body-md'>Log In</span>
+          </button>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default ControlBar;

src/shared/components/header/Header.tsx

@@ -0,0 +1,55 @@
+import { Icon } from '@/shared/icons';
+import { cn } from '@/shared/lib';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+interface HeaderProps {
+  title: string;
+  onClick: () => void;
+  className?: string;
+  color?: VariantProps<typeof headerStyle>['color'];
+}
+
+const headerStyle = cva(
+  'w-full h-[11.8rem] px-[1.6rem] pb-[1.8rem] pt-[7.6rem] fixed top-0 left-0 right-0 z-[100]',
+  {
+    variants: {
+      color: {
+        mint300: 'bg-mint-300',
+        mint50: 'bg-mint-50',
+      },
+    },
+    defaultVariants: {
+      color: 'mint300',
+    },
+  },
+);
+
+const Header = ({ title, onClick, color, className }: HeaderProps) => {
+  return (
+    <header className={cn(headerStyle({ color }), className)}>
+      <div className='mx-auto h-[2.4rem] grid grid-cols-[auto_1fr_auto] items-center text-mint-900'>
+        <button
+          type='button'
+          aria-label='뒤로가기'
+          onClick={onClick}
+          className='grid place-items-center w-[2.4rem] h-[2.4rem]'
+        >
+          <Icon name='Caret' size={24} color='mint-900' />
+        </button>
+
+        <h1
+          className={cn(
+            'justify-self-center',
+            'text-title-md font-[600] leading-[2.4rem] tracking-[0.015rem]',
+          )}
+        >
+          {title}
+        </h1>
+
+        <div aria-hidden className='w-[2.4rem] h-[2.4rem]' />
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/shared/components/index.ts

@@ -0,0 +1,2 @@
+export { default as Header } from './header/Header';
+export { default as ControlBar } from './header/ControlBar';