Feat: TopNavigation 컴포넌트 구현

src/components/common/chips/Chips.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chips from './Chips'
+
+const meta: Meta<typeof Chips> = {
+  component: Chips,
+  tags: ['autodocs'],
+  title: 'components/Chips',
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    isSelected: {
+      control: 'select',
+      options: [true, false]
+    }
+  }
+}
+export default meta
+type Story = StoryObj<typeof Chips>
+
+export const Default: Story = {
+  render: (args) => <Chips label={args.label} isSelected={args.isSelected} />
+}

src/components/common/chips/Chips.tsx

@@ -0,0 +1,18 @@
+interface ChipsProps {
+  label: string
+  isSelected: boolean
+}
+const Chips = ({ label, isSelected }: ChipsProps) => {
+  return (
+    <div
+      className={`rounded-[100px] font-semibold text-lg cursor-pointer flex justify-center items-center border-2 w-20 h-10 ${
+        isSelected
+          ? 'bg-green-5 text-green-50 border-green-50'
+          : 'bg-transparent border-gray-20'
+      }`}>
+      {label}
+    </div>
+  )
+}
+
+export default Chips

src/components/common/icon/Icon.tsx

@@ -2,12 +2,15 @@ import Icons from './Icons'
 export type IconType = keyof typeof Icons
 
 export interface IconProps {
-  icon: IconType
+  icon?: IconType
   classStyle?: string
   onClick?: () => void
 }
 
 const Icon = ({ icon, classStyle, onClick }: IconProps) => {
+  if (!icon) {
+    return null
+  }
   const SvgIcon = Icons[icon]
   return <SvgIcon className={classStyle} onClick={onClick} />
 }

src/components/common/standardButton/StandardButton.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import StandardButton from './StandardButton'
+
+const meta: Meta<typeof StandardButton> = {
+  component: StandardButton,
+  tags: ['autodocs'],
+  title: 'components/StandardButton',
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    state: {
+      control: 'select',
+      options: ['disabled', 'enabled']
+    },
+    style: {
+      control: 'select',
+      options: ['outlined', 'filled']
+    }
+  }
+}
+export default meta
+type Story = StoryObj<typeof StandardButton>
+
+export const Default: Story = {
+  render: (args) => (
+    <StandardButton label={args.label} state={args.state} style={args.style} />
+  )
+}

src/components/common/standardButton/StandardButton.tsx

@@ -0,0 +1,25 @@
+interface StandardButtonProps {
+  label: string
+  state: 'disabled' | 'enabled'
+  style: 'outlined' | 'filled'
+}
+const StandardButton = ({ label, state, style }: StandardButtonProps) => {
+  return (
+    <div
+      className={`rounded-[8px] cursor-pointer flex justify-center items-center font-medium border border-1 w-full h-full px-[0px] py-[10px] ${
+        state === 'enabled'
+          ? // enabled
+            style === 'filled'
+            ? 'bg-green-50 text-white-0 border-green-50'
+            : 'bg-transparent text-green-50 border-green-50'
+          : // disabled
+          style === 'filled'
+          ? 'bg-gray-10 text-gray-50 border-gray-50'
+          : 'bg-transparent text-gray-40 border-gray-40'
+      }`}>
+      {label}
+    </div>
+  )
+}
+
+export default StandardButton

src/components/common/topNavigation/TopNavigation.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import TopNavigation from './TopNavigation'
+import Icons from '../icon/Icons'
+
+const iconNames = [...Object.keys(Icons), undefined] as (
+  | keyof typeof Icons
+  | undefined
+)[]
+
+const meta: Meta<typeof TopNavigation> = {
+  component: TopNavigation,
+  tags: ['autodocs'],
+  title: 'components/TopNavigation',
+  argTypes: {
+    title: {
+      control: 'text'
+    },
+    type: {
+      control: 'select',
+      options: ['left', 'center']
+    },
+    icon1: {
+      control: 'select',
+      options: iconNames
+    },
+    icon2: {
+      control: 'select',
+      options: iconNames
+    },
+    icon3: {
+      control: 'select',
+      options: iconNames
+    }
+    // icon1: {
+    //   control: 'select',
+    //   options: ['SideBar', 'Alarm', undefined]
+    // },
+    // icon2: {
+    //   control: 'select',
+    //   options: ['SideBar', 'Alarm', undefined]
+    // },
+    // icon3: {
+    //   control: 'select',
+    //   options: ['SideBar', 'Alarm', undefined]
+    // }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof TopNavigation>
+
+export const Default: Story = {
+  render: (args) => (
+    <TopNavigation
+      title={args.title}
+      type={args.type}
+      icon1={args.icon1}
+      icon2={args.icon2}
+      icon3={args.icon3}
+    />
+  )
+}

src/components/common/topNavigation/TopNavigation.tsx

@@ -0,0 +1,44 @@
+import Icon, { IconType } from '../icon/Icon'
+
+interface TopNavigationProps {
+  title: string
+  type: 'left' | 'center'
+  //   icon1: 'SideBar' | 'Alarm' | undefined
+  //   icon2: 'SideBar' | 'Alarm' | undefined
+  //   icon3: 'SideBar' | 'Alarm' | undefined
+  icon1: IconType | undefined
+  icon2: IconType | undefined
+  icon3: IconType | undefined
+}
+const TopNavigation = ({
+  title,
+  type,
+  icon1,
+  icon2,
+  icon3
+}: TopNavigationProps) => {
+  return (
+    <div
+      className={`fixed flex flex-row items-center font-semibold left-[50%] z-10 top-0 translate-x-[-50%] w-full h-[60px] bg-white-0 text-black-800 px-[22px] border-b-[1px] border-gray-5`}>
+      <Icon icon={'BackPush'} classStyle={'cursor-pointer ml-3'} />
+      {type === 'left' ? (
+        <>
+          <div className={'ml-7'}>{title}</div>
+          <div
+            className={`flex flex-row justify-center items-center absolute right-8 float-right`}>
+            <Icon icon={icon1} classStyle={'cursor-pointer mr-2'} />
+            <Icon icon={icon2} classStyle={'cursor-pointer mr-2'} />
+            <Icon icon={icon3} classStyle={'cursor-pointer'} />
+          </div>
+        </>
+      ) : (
+        <div className={`absolute left-1/2 transform -translate-x-1/2`}>
+          {title}
+        </div>
+      )}
+      {/* <div className={`flex flex-row`}>{title}</div> */}
+    </div>
+  )
+}
+
+export default TopNavigation

tailwind.config.js

@@ -47,7 +47,7 @@ export default {
         r200: 'rgba(244,244,244,1)'
       },
       gray: {
-        5: '#F2F2F2',
+        5: '#F7F7F7',
         10: '#E4E4E4',
         20: '#D4D3D3',
         30: '#C7C7C7',