feat(ui) navigation 컴포넌트 제작

src/components/atoms/AppBar/AppBar.stories.tsx

@@ -9,13 +9,11 @@ const meta = {
   argTypes: { onClickOption: {action: 'clicked'}},
   decorators: [
     (Story) => (
-      <>
         <BrowserRouter>
           <Routes>
             <Route path="*" element={<Story/>}/>
           </Routes>
         </BrowserRouter>
-      </>
     ),
   ],
 } satisfies Meta<typeof AppBar>;

src/components/atoms/AppBar/index.tsx

@@ -10,6 +10,13 @@ import { useNavigate } from "react-router-dom";
 
 type AppBarType = 'logoWithAlarm' | 'backPush' | 'backPushWithMenu'
 
+/**
+ * @param variant AppBar의 type을 나타냄 'logoWithAlarm' | 'backPush' | 'backPushWithMenu'
+ * @param label 'backPush' | 'backPushWithMenu' 사용 시 Appbar에 나타날 문구
+ * @param beforeUrl (optional) BackArrow를 통하여 이동할 url (기본값은 뒤로가기)
+ * @param onClickOption 두번째 버튼을 눌렀을 때 발생할 이벤트를 넘겨주는 함수
+ */
+
 interface AppBarProps {
     variant : AppBarType;
     label?: string;
@@ -25,9 +32,7 @@ export const AppBar = ({
 }: AppBarProps) => {
     const navigate = useNavigate();
     const onClickBackBar = () => {
-        beforeUrl ? navigate(beforeUrl, {
-            state: { direction : 'navigate-pop'}
-        }) : navigate(-1)
+        beforeUrl ? navigate(beforeUrl) : navigate(-1)
     }
     const onClickLogo = () => {
         navigate('/')

src/components/atoms/Navigationbar/index.tsx

@@ -0,0 +1,57 @@
+import styled from "@emotion/styled"
+import { theme } from "@styles/theme"
+import { NavLink } from "react-router-dom"
+import openEye from "../../../assets/icons/openEye.svg";
+
+export const Navigationbar = () => {
+    return (
+        <Wrapper>
+            <NavBtn>
+                <img src={openEye}/>
+            </NavBtn>
+
+
+            <NavBtn>
+                <img src={openEye}/>
+            </NavBtn>
+
+
+            <NavBtn>
+                <img src={openEye}/>
+            </NavBtn>
+            <NavBorder/>
+        </Wrapper>
+    )
+}
+
+const Wrapper = styled.nav`
+    display: flex;
+    border-radius: 30px;
+    width: 200px;
+    height: 50px;
+    position: relative;
+    background-color: ${theme.palette.background};
+    border: 1px solid ${theme.palette.gray_800};
+    filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.12)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.24));
+`
+const NavBtn = styled.button`
+    flex-grow: 1
+    z-index: 1;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    position : relative;
+    .active{
+        transform: translate3d(0, -.8em , 0);
+    }
+`
+
+const NavBorder = styled.div`
+    position: absolute;    
+    background-color: ${theme.palette.background};
+    left:0;
+    bottom: 99%;
+
+`

src/components/atoms/Navigationbar/navigation.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BrowserRouter, Routes } from 'react-router-dom';
+import { Navigationbar } from '.';
+
+const meta =  {
+  title: 'Atom/Navigationbar',
+  component: Navigationbar,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Navigationbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Navigation: Story = {
+
+};