Feature/#11 네비게이션 바, 헤더 구현

src/components/Header/index.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Header from './index';
+
+const meta = {
+  title: 'Components/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+  tags: ['autodocs'],
+  args: {
+    onSettingsClick: () => {
+      console.log('Settings clicked');
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex h-full items-start">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithoutSettings: Story = {
+  args: {
+    showSettings: false,
+  },
+};

src/components/Header/index.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { SettingsIcon, SymbolLogoIcon } from '@/components/Icons/index';
+
+interface HeaderProps {
+  showSettings?: boolean;
+  onSettingsClick?: () => void;
+}
+
+function HeaderLogo() {
+  return (
+    <div className="flex items-center">
+      <SymbolLogoIcon width={40} height={20} />
+    </div>
+  );
+}
+
+function HeaderSettingsButton({ onClick }: { onClick?: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="group flex items-center justify-center"
+      aria-label="설정"
+    >
+      <SettingsIcon
+        width={20}
+        height={20}
+        className="text-[var(--color-grey-normal)] transition-colors group-hover:text-[var(--color-grey-normal-hover)] group-active:text-[var(--color-grey-normal-active)]"
+      />
+    </button>
+  );
+}
+
+export default function Header({ showSettings = true, onSettingsClick }: HeaderProps) {
+  return (
+    <header className="fixed top-0 right-0 left-0 z-50">
+      <div className="mx-auto flex max-w-[var(--layout-width)] items-center justify-between px-5 py-4">
+        <HeaderLogo />
+        {showSettings && <HeaderSettingsButton onClick={onSettingsClick} />}
+      </div>
+    </header>
+  );
+}

src/components/Icons/index.ts

@@ -0,0 +1,28 @@
+// Navigation Icons
+export { default as CalendarIcon } from '@/assets/icons/ic_calendar.svg';
+export { default as AnalysisIcon } from '@/assets/icons/ic_analysis.svg';
+export { default as ChatIcon } from '@/assets/icons/ic_chat.svg';
+export { default as CalculateIcon } from '@/assets/icons/ic_calculate.svg';
+export { default as MyIcon } from '@/assets/icons/ic_my.svg';
+
+// Action Icons
+export { default as CheckIcon } from '@/assets/icons/ic_check.svg';
+export { default as ClosedIcon } from '@/assets/icons/ic_closed.svg';
+export { default as CopyIcon } from '@/assets/icons/ic_copy.svg';
+export { default as DownloadIcon } from '@/assets/icons/ic_download.svg';
+export { default as EditIcon } from '@/assets/icons/ic_edit.svg';
+export { default as InfoIcon } from '@/assets/icons/ic_info.svg';
+
+// Arrow Icons
+export { default as LeftArrowIcon } from '@/assets/icons/ic_leftarrow.svg';
+export { default as RightArrowIcon } from '@/assets/icons/ic_rightarrow.svg';
+
+// Date Icons
+export { default as DateIcon } from '@/assets/icons/ic_date.svg';
+
+// Settings Icons
+export { default as SettingsIcon } from '@/assets/icons/ic_settings.svg';
+export { default as SettingsArrowIcon } from '@/assets/icons/ic_settings_arrow.svg';
+
+// Logo Icons
+export { default as SymbolLogoIcon } from '@/assets/icons/symbol_logo.svg';