Merge pull request #20 from YAPP-Github/feat/#19

[FEAT] 공통 Top bar 컴포넌트 구현

Author: jaeml06

src/shared/ui/top-bar/TopBar.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import TopBar from './TopBar';
+
+const meta: Meta<typeof TopBar> = {
+  title: 'Shared/UI/TopBar',
+  component: TopBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    leftIcon: {
+      control: 'select',
+      options: [
+        undefined,
+        'arrow_prev',
+        'arrow_next',
+        'ic_hamburger',
+        'ic_menu_close',
+        'ic_refresh',
+      ],
+    },
+    rightIcon: {
+      control: 'select',
+      options: [
+        undefined,
+        'arrow_prev',
+        'arrow_next',
+        'ic_hamburger',
+        'ic_menu_close',
+        'ic_refresh',
+      ],
+    },
+    iconColor: { control: 'color' },
+  },
+  args: {
+    onLeftClick: () => console.log('Left clicked'),
+    onRightClick: () => console.log('Right clicked'),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: '페이지 제목',
+  },
+};
+
+export const WithBack: Story = {
+  args: {
+    title: '페이지 제목',
+    leftIcon: 'arrow_prev',
+  },
+};
+
+export const WithBackAndAction: Story = {
+  args: {
+    title: '페이지 제목',
+    leftIcon: 'arrow_prev',
+    rightIcon: 'ic_menu_close',
+  },
+};
+
+export const OnlyIcons: Story = {
+  args: {
+    leftIcon: 'ic_hamburger',
+    rightIcon: 'ic_refresh',
+  },
+};
+
+export const LongTitle: Story = {
+  args: {
+    leftIcon: 'arrow_prev',
+    title:
+      '엄청나게 긴 페이지 제목입니다 엄청나게 긴 페이지 제목입니다 확인해보세요',
+    rightIcon: 'ic_menu_close',
+  },
+};

src/shared/ui/top-bar/TopBar.tsx

@@ -0,0 +1,71 @@
+import { HTMLAttributes } from 'react';
+
+import { IconName } from '../../assets/icons';
+import Icon from '../icon/Icon';
+
+interface TopBarProps extends HTMLAttributes<HTMLElement> {
+  title?: string;
+  leftIcon?: IconName;
+  onLeftClick?: () => void;
+  rightIcon?: IconName;
+  onRightClick?: () => void;
+  className?: string;
+  /**
+   * 좌우 아이콘의 색상을 지정합니다.
+   * 현재는 일관된 스타일 유지를 위해 동일한 색상을 적용하지만, 추후 확장이 필요하면 개별 로직으로 분리할 수 있습니다.
+   */
+  iconColor?: string;
+}
+
+export default function TopBar({
+  title,
+  leftIcon,
+  onLeftClick,
+  rightIcon,
+  onRightClick,
+  className,
+  iconColor,
+  ...props
+}: TopBarProps) {
+  return (
+    <header
+      className={`bg-gray-0 relative flex h-14 w-full shrink-0 items-center justify-between px-1 ${
+        className || ''
+      }`}
+      {...props}
+    >
+      {/* 좌측 아이콘 영역 - 터치 타겟 확보를 위해 고정 크기 사용 */}
+      <div className='flex h-12 w-12 items-center justify-center'>
+        {leftIcon && (
+          <button
+            type='button'
+            onClick={onLeftClick}
+            className='flex h-full w-full items-center justify-center rounded-full p-2 active:bg-gray-100'
+            aria-label='Left Action'
+          >
+            <Icon name={leftIcon} size={24} color={iconColor} />
+          </button>
+        )}
+      </div>
+
+      {/* 제목 영역 - 완벽한 중앙 정렬을 위해 absolute 포지셔닝 사용 */}
+      <h1 className='text-title-7 absolute top-1/2 left-1/2 max-w-[calc(100%-120px)] -translate-x-1/2 -translate-y-1/2 truncate text-center text-gray-900'>
+        {title}
+      </h1>
+
+      {/* 우측 아이콘 영역 - 터치 타겟 확보를 위해 고정 크기 사용 */}
+      <div className='flex h-12 w-12 items-center justify-center'>
+        {rightIcon && (
+          <button
+            type='button'
+            onClick={onRightClick}
+            className='flex h-full w-full items-center justify-center rounded-full p-2 active:bg-gray-100'
+            aria-label='Right Action'
+          >
+            <Icon name={rightIcon} size={24} color={iconColor} />
+          </button>
+        )}
+      </div>
+    </header>
+  );
+}

src/shared/ui/top-bar/index.ts

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