From 01d7e9e3c44c9a40d514657b77ed9c770fc8d541 Mon Sep 17 00:00:00 2001 From: jissssu Date: Tue, 19 Nov 2024 09:47:38 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20arrow.svg=20=ED=8C=8C=EC=9D=BC=20ts?= =?UTF-8?q?x=EB=A1=9C=20=EB=B3=80=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svg/Arrow.svg | 3 +++ src/assets/svg/Arrow.tsx | 20 ++++++++++++++++++++ src/assets/svg/index.ts | 1 + 3 files changed, 24 insertions(+) create mode 100644 public/svg/Arrow.svg create mode 100644 src/assets/svg/Arrow.tsx diff --git a/public/svg/Arrow.svg b/public/svg/Arrow.svg new file mode 100644 index 00000000..0e76aca1 --- /dev/null +++ b/public/svg/Arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/Arrow.tsx b/src/assets/svg/Arrow.tsx new file mode 100644 index 00000000..b845bf25 --- /dev/null +++ b/src/assets/svg/Arrow.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import type { SVGProps } from "react"; + +const Arrow = (props: SVGProps) => ( + + + +); + +export default Arrow; diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 63ffbe5c..644b442a 100644 --- a/src/assets/svg/index.ts +++ b/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"; \ No newline at end of file From b4e22bcfaa0409135dc1206786f35052e39fc537 Mon Sep 17 00:00:00 2001 From: jissssu Date: Tue, 19 Nov 2024 09:49:05 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=20=ED=9B=84=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9D=B4=20=EA=B0=80=EB=8A=A5=ED=95=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global/SubMenu/SubMenu.stories.tsx | 34 +++++++++++++++++ src/components/global/SubMenu/SubMenu.tsx | 38 +++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 src/components/global/SubMenu/SubMenu.stories.tsx create mode 100644 src/components/global/SubMenu/SubMenu.tsx diff --git a/src/components/global/SubMenu/SubMenu.stories.tsx b/src/components/global/SubMenu/SubMenu.stories.tsx new file mode 100644 index 00000000..72a3c4f3 --- /dev/null +++ b/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) => ( + + + + ), + ], + argTypes: { + text: { control: 'text', description: '공지사항 텍스트' }, + to: { control: 'text', description: '이동할 페이지 URL' }, + }, +} as Meta; + +const Template: StoryFn = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + text: '공지사항 보기', + to: '/notice', +}; + +export const CustomText = Template.bind({}); +CustomText.args = { + text: '설정 페이지로 이동', + to: '/settings', +}; diff --git a/src/components/global/SubMenu/SubMenu.tsx b/src/components/global/SubMenu/SubMenu.tsx new file mode 100644 index 00000000..e6a260ba --- /dev/null +++ b/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'; +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 ( + + {text} + + + ); +} From b85dcec36797ae091a8bf75178500b01a735a49a Mon Sep 17 00:00:00 2001 From: jissssu Date: Tue, 19 Nov 2024 10:27:40 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=85=20export=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/global/SubMenu/SubMenu.stories.tsx | 2 +- src/components/global/SubMenu/SubMenu.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/global/SubMenu/SubMenu.stories.tsx b/src/components/global/SubMenu/SubMenu.stories.tsx index 72a3c4f3..1b06d04e 100644 --- a/src/components/global/SubMenu/SubMenu.stories.tsx +++ b/src/components/global/SubMenu/SubMenu.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Meta, StoryFn } from '@storybook/react'; -import { SubMenu, SubMenuProps } from './SubMenu'; +import { SubMenu, SubMenuProps} from './SubMenu'; import { BrowserRouter } from 'react-router-dom'; export default { diff --git a/src/components/global/SubMenu/SubMenu.tsx b/src/components/global/SubMenu/SubMenu.tsx index e6a260ba..8447c7c0 100644 --- a/src/components/global/SubMenu/SubMenu.tsx +++ b/src/components/global/SubMenu/SubMenu.tsx @@ -3,7 +3,7 @@ import { Arrow } from '../../../assets/svg'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import theme from '../../../style/theme'; -interface SubMenuProps { + export interface SubMenuProps { text: string; // 공지사항 텍스트 to: string; // 이동할 페이지 URL }