Feat/#352 feature common component yejun

README.md

@@ -105,10 +105,10 @@ https://www.studay.me/
 
 ## 팀원
 
-|                                           Frontend                                           |                                                      Frontend                                                       |                                          Frontend                                          |                                                   
-|:--------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------:|
-| <img width="120" height="120" src="https://avatars.githubusercontent.com/u/106604926?v=4" /> |             <img width="120" height="120" src="https://avatars.githubusercontent.com/u/67894159?v=4" />             |<img width="120" height="120" src="https://avatars.githubusercontent.com/u/85999976?v=4" /> |
-|                            [김희석](https://github.com/HeeSeok-kim)                             |                                         [김유진](https://github.com/eugene028)                                         |                             [김지성](https://github.com/jisung24)                             |
+|                                           Frontend                                           |                                                      Frontend                                                       |                                          Frontend                                          |                                                                   Frontend                                                                   |                             
+|:--------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------:|
+| <img width="120" height="120" src="https://avatars.githubusercontent.com/u/106604926?v=4" /> |             <img width="120" height="120" src="https://avatars.githubusercontent.com/u/67894159?v=4" />             |<img width="120" height="120" src="https://avatars.githubusercontent.com/u/85999976?v=4" /> | <img width="120" height="120" src="https://avatars.githubusercontent.com/u/87467631?s=400&u=eab479ec8fc7538caafa4d162a272a1181f09468&v=4" /> |
+|                            [김희석](https://github.com/HeeSeok-kim)                             |                                         [김유진](https://github.com/eugene028)                                         |                             [김지성](https://github.com/jisung24)                             |                                                     [최예준](https://github.com/CHOIYEJUN)                                                      |
 
 ## 시연영상
 

src/assets/icon/index.tsx

@@ -35,3 +35,4 @@ export { ReactComponent as Spinner } from './Spinner.svg'
 export { ReactComponent as Logo } from './Logo.svg'
 export { ReactComponent as Save } from './Save.svg'
 export { ReactComponent as Marker } from './Marker.svg'
+export { ReactComponent as MyPageIcon } from './MyPageIcon.svg'

src/components/common/button/Button.stories.tsx

@@ -19,7 +19,8 @@ const meta = {
         'Round-blue-500',
         'Round-blue-700',
         'Square',
-        'Floating'
+        'Floating',
+        'Text-Plain'
       ]
     },
     width: {
@@ -78,3 +79,11 @@ export const SquareButton: Story = {
     onClick: () => alert('square clicked!')
   }
 }
+
+export const TextPlainButton: Story = {
+  args: {
+    label: 'Text',
+    buttonType: 'Text-Plain',
+    onClick: () => alert('text clicked!')
+  }
+}

src/components/common/button/Button.tsx

@@ -69,6 +69,8 @@ const Button = ({
         } ${height ? 'h-[56px]' : BUTTON_HEIGHT[height]} ${
           BUTTON_BG_COLOR['blue700']
         } ${BUTTON_TEXT_COLOR['white0']}`
+      : buttonType === 'Text-Plain'
+      ? ``
       : ''
   }
   ${FONT_STYLE['NSK']}

src/components/common/button/ButtonType.ts

@@ -12,6 +12,7 @@ export type ButtonType =
   | 'Floating'
   | 'Plain-disabled'
   | 'Plain-Onboarding-disabled'
+  | 'Text-Plain'
 export type ButtonBorderRadius = 'min' | 'middle' | 'max'
 export type ButtonWidth = 'SW' | 'MW' | 'LW' | 'XLW'
 export type ButtonHeight = 'SH' | 'MH' | 'LH'

src/components/common/icon/Icons.tsx

@@ -34,7 +34,8 @@ import {
   Write,
   Logo,
   Save,
-  Marker
+  Marker,
+  MyPageIcon
 } from '@/assets/icon'
 const Icons = {
   Abacus,
@@ -72,7 +73,8 @@ const Icons = {
   Write,
   Logo,
   Save,
-  Marker
+  Marker,
+  MyPageIcon
 }
 
 export default Icons

src/components/common/new_navigationbar/NewNavigationBar.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react'
+import NewNavigationBar from '@/components/common/new_navigationbar/NewNavigationBar.tsx'
+
+const meta: Meta<typeof NewNavigationBar> = {
+  component: NewNavigationBar,
+  tags: ['autodocs'],
+  title: 'components/NewNavigationBar',
+  argTypes: {
+    selectIcon: {
+      control: 'select'
+    }
+  }
+}
+
+export default meta
+type NewStory = StoryObj<typeof NewNavigationBar>
+
+export const Default: NewStory = {
+  args: {
+    selectIcon: 'Home'
+  }
+}

src/components/common/new_navigationbar/NewNavigationBar.tsx

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import Icon, { IconType } from '@/components/common/icon/Icon.tsx'
+import {
+  NavigationBarProps,
+  NavigationStateType
+} from '@/components/common/new_navigationbar/NewNavigationBarType.ts'
+import {
+  DefaultIconFill,
+  DefaultText,
+  initNavigationList,
+  SelectIconFill,
+  SelectText,
+  SelectIconFillStroke
+} from '@/components/common/new_navigationbar/constants.ts'
+
+const NewNavigationBar = ({ selectIcon }: NavigationBarProps) => {
+  const navigate = useNavigate()
+
+  const [navigationState, setNavigationState] = useState<NavigationStateType[]>(
+    initNavigationList.map((item) => ({
+      ...item,
+      select: item.icon === selectIcon
+    }))
+  )
+
+  useEffect(() => {
+    setNavigationState((prevState) =>
+      prevState.map((item) => ({
+        ...item,
+        select: item.icon === selectIcon
+      }))
+    )
+  }, [selectIcon])
+
+  const handleIconClick = useCallback(
+    (selectedIcon: IconType) => {
+      const updatedNavigationState = navigationState.map((item) => {
+        if (item.icon === selectedIcon) {
+          switch (item.icon) {
+            case 'SearchMap': {
+              navigate('/map')
+              break
+            }
+            case 'Home': {
+              navigate('/')
+
+              break
+            }
+            case 'Info': {
+              navigate('/academies')
+
+              break
+            }
+            case 'Timetable': {
+              navigate('/schedule')
+
+              break
+            }
+            case 'MyPageIcon': {
+              navigate('/myPage')
+
+              break
+            }
+          }
+          return { ...item, select: true }
+        }
+        return { ...item, select: false }
+      })
+
+      setNavigationState(updatedNavigationState)
+    },
+    [navigationState]
+  )
+
+  return (
+    <div
+      className={`flex flex-row w-[390px] h-[81px] bg-white-0 border border-solid border-gray-100 absolute bottom-0`}>
+      {navigationState &&
+        navigationState.map((list, index) => (
+          <div
+            key={index}
+            className={
+              'flex flex-col w-full justify-center items-center cursor-pointer'
+            }
+            data-id={list['icon']}
+            onClick={(e) =>
+              handleIconClick(e.currentTarget.dataset.id as IconType)
+            }>
+            <Icon
+              icon={list['icon']}
+              classStyle={`${
+                list['select']
+                  ? list['icon'] === 'Timetable' ||
+                    list['icon'] === 'Info' ||
+                    list['icon'] === 'SearchMap' ||
+                    list['icon'] === 'MyPageIcon' ||
+                    list['icon'] === 'Home'
+                    ? SelectIconFillStroke
+                    : SelectIconFill
+                  : DefaultIconFill
+              }`}></Icon>
+            <span
+              className={`${
+                list['select'] ? SelectText : DefaultText
+              } font-nsk body-10`}>
+              {list['text']}
+            </span>
+          </div>
+        ))}
+    </div>
+  )
+}
+
+export default NewNavigationBar

src/components/common/new_navigationbar/NewNavigationBarType.ts

@@ -0,0 +1,11 @@
+import { IconType } from '@/components/common/icon/Icon.tsx'
+
+export interface NavigationStateType {
+  icon: IconType
+  text: string
+  select: boolean
+}
+
+export interface NavigationBarProps {
+  selectIcon: 'SearchMap' | 'Home' | 'Timetable' | 'Info' | 'MyPageIcon'
+}