Merge pull request #9 from peauty/feature/PEAUTY-44

[PEAUTY-44] 선택 후 이동이 가능한 컴포넌트 생성

src/assets/svg/Arrow.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+
+const Arrow = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 12 24"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.1569 12.7109L4.49994 18.3679L3.08594 16.9539L8.03594 12.0039L3.08594 7.05389L4.49994 5.63989L10.1569 11.2969C10.3444 11.4844 10.4497 11.7387 10.4497 12.0039C10.4497 12.2691 10.3444 12.5234 10.1569 12.7109Z"
+      fill="#E1E1E1"
+    />
+  </svg>
+);
+
+export default Arrow;

src/assets/svg/index.ts

@@ -1,3 +1,4 @@
 export { default as AppBarBack } from "./AppBarBack";
 export { default as Favicon } from "./Favicon";
 export { default as Logo } from "./Logo";
+export { default as Arrow } from "./Arrow";

src/components/global/SubMenu/SubMenu.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { SubMenu, SubMenuProps} from './SubMenu';
+import { BrowserRouter } from 'react-router-dom';
+
+export default {
+  title: 'Components/SubMenu',
+  component: SubMenu,
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
+  argTypes: {
+    text: { control: 'text', description: '공지사항 텍스트' },
+    to: { control: 'text', description: '이동할 페이지 URL' },
+  },
+} as Meta;
+
+const Template: StoryFn<SubMenuProps> = (args) => <SubMenu {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  text: '공지사항 보기',
+  to: '/notice',
+};
+
+export const CustomText = Template.bind({});
+CustomText.args = {
+  text: '설정 페이지로 이동',
+  to: '/settings',
+};

src/components/global/SubMenu/SubMenu.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { Arrow } from '../../../assets/svg'; 
+import { useNavigate } from 'react-router-dom'; 
+import styled from 'styled-components';
+import theme from '../../../style/theme'; 
+ export interface SubMenuProps {
+  text: string; // 공지사항 텍스트
+  to: string; // 이동할 페이지 URL 
+}
+
+const StyledSubMenu = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 16px;
+  color: ${theme.colors.black100};
+  justify-content: space-between;  
+`;
+
+const Text = styled.span`
+  white-space: nowrap; 
+  font-size: 16px;
+  color: ${theme.colors.black100};
+`;
+
+export function SubMenu({ text, to }: SubMenuProps) {
+  const navigate = useNavigate(); 
+  const handleClick = () => {
+    navigate(to); // to에 지정된 URL로 이동
+  };
+
+  return (
+    <StyledSubMenu onClick={handleClick}>
+      <Text>{text}</Text>
+      <Arrow width="15px" height="27px" />
+    </StyledSubMenu>
+  );
+}