✨ feat: 헤더 컴포넌트 퍼블리싱 #5

src/components/layout/container/container.tsx

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils/cn';
+import { ElementType, ReactNode } from 'react';
+
+interface Props {
+  as?: ElementType;
+  className?: string;
+  children: ReactNode;
+}
+
+export const Wrapper = ({ children }: { children: ReactNode }) => {
+  return <div className='flex min-h-screen flex-col flex-nowrap'>{children}</div>;
+};
+
+const Container = ({ as: Component = 'main', className, children }: Props) => {
+  const isMain = Component === 'main';
+
+  return (
+    <Component
+      className={cn(
+        'relative z-[1]',
+        'mx-auto w-full max-w-[1028px] px-3',
+        'tablet:px-8',
+        isMain && 'grow',
+        className
+      )}
+    >
+      {children}
+    </Component>
+  );
+};
+export default Container;

src/components/layout/container/index.ts

@@ -0,0 +1 @@
+export { default as Container, Wrapper } from './container';

src/components/layout/header/header.tsx

@@ -0,0 +1,49 @@
+import logo from '@/assets/images/logo.svg';
+import { Icon } from '@/components/ui';
+import { cn } from '@/lib/utils/cn';
+import Image from 'next/image';
+import Link from 'next/link';
+
+const Header = () => {
+  return (
+    <header
+      className={cn(
+        'flex flex-wrap items-center justify-between gap-x-8 gap-y-4',
+        'max-w-[1094px] px-5 py-[10px]',
+        'tablet:flex-nowrap tablet:px-8 tablet:py-[15px]'
+      )}
+    >
+      <div
+        className={cn('relative h-[30px] w-[84px] shrink-0', 'tablet:h-[40px] tablet:w-[112px]')}
+      >
+        <Image src={logo} alt='더 줄게' className='object-contain' fill priority />
+      </div>
+      <div className={cn('relative order-1 w-full grow', 'tablet:order-none')}>
+        <Icon
+          iconName='search'
+          iconSize='rg'
+          className='absolute ml-3 mt-3 bg-gray-400'
+          ariaLabel='검색'
+        />
+        <input
+          type='text'
+          id='shopSearchKeyWord'
+          name='shopSearchKeyWord'
+          className={cn(
+            'w-full rounded-xl bg-gray-100 p-3 pl-10 text-body-s',
+            'focus:outline-red-300'
+          )}
+          placeholder='가게 이름으로 찾아보세요 '
+        />
+      </div>
+      <nav className={cn('flex shrink-0 gap-4 text-body-m font-bold', 'desktop:gap-10')}>
+        <Link href={`/`}>로그인</Link>
+        <Link href={`/`}>회원가입</Link>
+        <button>
+          <Icon iconName='notificationOff' iconSize='rg' bigScreenSize='md' ariaLabel='알림' />
+        </button>
+      </nav>
+    </header>
+  );
+};
+export default Header;

src/components/layout/header/index.ts

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

src/components/layout/index.ts

@@ -0,0 +1,2 @@
+export { Container, Wrapper } from './container';
+export { Header } from './header';

src/components/ui/icon/icon.tsx

@@ -1,11 +1,12 @@
-import { forwardRef } from 'react';
-import { cn } from '@/lib/utils/cn';
 import { ICONS, ICON_SIZES, type IconName, type IconSize } from '@/constants/icon';
+import { cn } from '@/lib/utils/cn';
+import { forwardRef } from 'react';
 interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
   iconName: IconName;
-  iconSize?: IconSize;
+  iconSize?: IconSize; // 모바일 기본 사이즈
+  bigScreenSize?: IconSize; // PC에서 사이즈 다를때 사용
   className?: string;
-  ariaLabel?: string;
+  ariaLabel: string; // 접근성 라벨
 }
 
 /**
@@ -16,14 +17,15 @@ interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
  */
 
 const Icon = forwardRef<HTMLSpanElement, IconProps>(
-  ({ iconName, iconSize = 'md', className, ariaLabel, ...props }, ref) => {
+  ({ iconName, iconSize = 'md', bigScreenSize, className, ariaLabel, ...props }, ref) => {
     const url = ICONS[iconName];
     const size = ICON_SIZES[iconSize];
+    const bigSize = bigScreenSize ? `tablet:${ICON_SIZES[bigScreenSize]}` : '';
 
     return (
       <span
         ref={ref}
-        className={cn('ic', size, className)}
+        className={cn('ic bg-black', size, bigSize, className)}
         style={{
           maskImage: `url(${url})`,
           WebkitMaskImage: `url(${url})`,

src/pages/_app.tsx

@@ -1,8 +1,8 @@
+import { Container, Header, Wrapper } from '@/components/layout';
 import '@/styles/fonts.css';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
-
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
@@ -11,7 +11,12 @@ export default function App({ Component, pageProps }: AppProps) {
         <link rel='icon' href='/favicon.ico' sizes='any' />
         <link rel='icon' href='/favicon.png' type='image/png' sizes='192x192' />
       </Head>
-      <Component {...pageProps} />
+      <Wrapper>
+        <Header />
+        <Container>
+          <Component {...pageProps} />
+        </Container>
+      </Wrapper>
     </>
   );
 }

src/stories/DesignTokens/Typography.stories.tsx

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/nextjs';
 
 const texts = [
-  { name: 'caption', label: 'Caption text', size: 12 },
-  { name: 'body-s', label: 'Body Small', size: 14 },
-  { name: 'body-m', label: 'Body Medium', size: 16 },
-  { name: 'body-l', label: 'Body Large', size: 16 },
+  { name: 'caption', label: 'Caption', size: 12 },
+  { name: 'body-s', label: 'Body-2 regular', size: 14 },
+  { name: 'body-m', label: 'Body-1 bold', size: 16 },
+  { name: 'body-l', label: 'Body-1 regular', size: 16 },
   { name: 'modal', label: 'Modal text', size: 18 },
-  { name: 'heading-s', label: 'Heading Small', size: 20 },
-  { name: 'heading-m', label: 'Heading Medium', size: 24 },
-  { name: 'heading-l', label: 'Heading Large', size: 28 },
+  { name: 'heading-s', label: 'h3', size: 20 },
+  { name: 'heading-m', label: 'h2', size: 24 },
+  { name: 'heading-l', label: 'h1', size: 28 },
 ];
 
 const meta: Meta = {
@@ -23,7 +23,7 @@ export const TextStyles: Story = {
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
       {texts.map(t => (
         <p key={t.name} className={`text-${t.name}`}>
-          text-{t.name} : {t.size}px - 가나다 ABC abc 123
+          text-{t.name} : {t.size}px - 피그마 기준: {t.label}
         </p>
       ))}
     </div>