fix: 터치 이벤트 별 style 변경, 깨지는 버튼 수정, 토스트 메세지 빠르게 사라지게 수정, 지도페이지 햄버거 메뉴 삭제

src/components/common/button/Button.tsx

@@ -72,6 +72,21 @@ const Button = ({
       : ''
   }
   ${FONT_STYLE['NSK']}
+  ${
+    buttonType === 'Plain-blue'
+      ? 'hover:bg-blue-500 hover:text-white-0 focus:bg-blue-500 focus:text-white-0 focus:outline-none'
+      : ''
+  }
+  ${
+    buttonType === 'Plain-red'
+      ? 'hover:bg-red-400 hover:text-white-0 foucs: bg-red-400 focus:text-white-0'
+      : ''
+  }
+  ${
+    buttonType === 'Round-blue-500'
+      ? 'hover:bg-blue-700 hover:text-white-0 focus:bg-blue-700 focus:text-white-0 focus:outline-none'
+      : ''
+  }
   `
   return (
     <button

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/header/Header.tsx

@@ -76,6 +76,20 @@ const Header = ({
             </span>
             <span className={'mx-[20px] font-nsk subHead-18'}>{pageTitle}</span>
           </div>
+        ) : headerType === 'Map' ? (
+          <>
+            <div className={'flex flex-row items-center'}>
+              <Icon
+                icon={'Logo'}
+                classStyle={'w-[50px] cursor-pointer'}
+                onClick={() => navigate('/')}
+              />
+              <span className={'mx-[30px] font-nsk subHead-18'}>
+                {pageTitle}
+              </span>
+            </div>
+            <div className={'flex items-center justify-between'}></div>
+          </>
         ) : (
           ''
         )}

src/components/common/header/HeaderType.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-type HeaderType = 'BackPush' | 'Logo' | 'Close' | 'CloseWithTitle'
+type HeaderType = 'BackPush' | 'Logo' | 'Close' | 'CloseWithTitle' | 'Map'
 export interface HeaderProps {
   headerType: HeaderType
   pageTitle?: string

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/toast/index.tsx

@@ -3,7 +3,7 @@ const Toast = () => {
   return (
     <ToastContainer
       position={'top-center'}
-      autoClose={1500}
+      autoClose={700}
       closeButton={false}
       newestOnTop
       hideProgressBar={true}

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

src/routes/index.tsx

@@ -99,7 +99,7 @@ export const router = createBrowserRouter(
           path: 'map',
           element: (
             <>
-              <Header headerType={'Logo'} pageTitle={'학원 지도'} />
+              <Header headerType={'Map'} pageTitle={'학원 지도'} />
               <MapPage />
             </>
           )

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',