SP-530 사이드바 컴포넌트 구현

src/Components/Sidebar/Sidebar.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Sidebar } from './Sidebar';
+import { reactRouterParameters } from 'storybook-addon-remix-react-router';
+
+const meta = {
+  component: Sidebar,
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+/** 프로필 설정 탭이 활성화된 상태 */
+export const ActiveProfile: Story = {
+  parameters: {
+    reactRouter: reactRouterParameters({
+      routing: [
+        {
+          path: '/mypage',
+          useStoryElement: true,
+        },
+      ],
+    }),
+  },
+};

src/Components/Sidebar/Sidebar.tsx

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { Tab } from './Tab';
+import { PropsWithChildren } from 'react';
+import { ROUTES } from '@/Constants/route';
+
+export const Sidebar = () => {
+  return (
+    <Navigation>
+      <TabGroup name="회원 정보">
+        <Tab title="회원 정보" to={ROUTES.MYPAGE.HOME} />
+        <Tab title="스터디원이 남긴 나의 리뷰" to={ROUTES.MYPAGE.REVIEWS} />
+        <Tab title="임시 저장된 글" to={ROUTES.MYPAGE.SAVED} />
+      </TabGroup>
+      <TabGroup name="설정">
+        <Tab title="프로필 설정" to={ROUTES.MYPAGE.PROFILE_SETTINGS} />
+        <Tab title="알림 권한 설정" to={ROUTES.MYPAGE.NOTIFICATIONS_SETTINGS} />
+      </TabGroup>
+      <TabGroup name="알림">
+        <Tab title="루도가 알려요" to={ROUTES.MYPAGE.NOTIFICATIONS} />
+      </TabGroup>
+    </Navigation>
+  );
+};
+
+const Navigation = styled.nav`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px 32px;
+  border-radius: 12px;
+  background: ${({ theme }) => theme.color.white};
+`;
+
+const TabGroup = ({ name, children }: PropsWithChildren<{ name: string }>) => {
+  return (
+    <TabGroupInner>
+      <TabGroupInnerText>{name}</TabGroupInnerText>
+      {children}
+    </TabGroupInner>
+  );
+};
+
+const TabGroupInner = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const TabGroupInnerText = styled.div`
+  align-self: stretch;
+  color: ${({ theme }) => theme.color.black2};
+  font-size: 18px;
+  font-family: Pretendard500;
+  font-weight: 500;
+  line-height: 32px;
+`;

src/Components/Sidebar/Tab.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tab } from './Tab';
+import { reactRouterParameters } from 'storybook-addon-remix-react-router';
+
+const meta = {
+  component: Tab,
+  args: {
+    title: '프로필 설정',
+    to: '/mypage/settings/profile',
+  },
+} satisfies Meta<typeof Tab>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+/** 현재 페이지에 보여지는 탭일 때 */
+export const Active: Story = {
+  parameters: {
+    reactRouter: reactRouterParameters({
+      routing: [
+        {
+          path: '/mypage/settings/profile',
+          useStoryElement: true,
+        },
+      ],
+    }),
+  },
+};

src/Components/Sidebar/Tab.tsx

@@ -0,0 +1,35 @@
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+export interface TabProps {
+  /** 탭 이름 */
+  title: string;
+
+  /** 선택되었을 떼 열릴 탭 라우트 */
+  to?: string;
+}
+
+/** 사이드바의 여러 탭 중 하나를 표현하는 컴포넌트 */
+export const Tab = ({ title, to }: TabProps) => {
+  return <NavLink to={to}>{({ isActive }) => <Box $active={isActive}>{title}</Box>}</NavLink>;
+};
+
+const Box = styled.div<{
+  $active: boolean;
+}>`
+  color: ${({ theme, $active }) => ($active ? theme.color.purple1 : theme.color.black3)};
+  font-size: 16px;
+  font-family: Pretendard600;
+  font-weight: 600;
+  line-height: 16px;
+  padding: 16px;
+  background: ${({ theme, $active }) => $active && theme.color.purple2};
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: ${({ theme }) => theme.color.white};
+    background: ${({ theme }) => theme.color.purple1};
+  }
+`;