Skip to content

Commit

Permalink
feat: 선택 후 이동이 가능한 컴포넌트 생성
Browse files Browse the repository at this point in the history
  • Loading branch information
jissssu committed Nov 19, 2024
1 parent 01d7e9e commit b4e22bc
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 0 deletions.
34 changes: 34 additions & 0 deletions src/components/global/SubMenu/SubMenu.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react';
import { Meta, StoryFn } from '@storybook/react';
import { SubMenu, SubMenuProps } from './SubMenu';

Check failure on line 3 in src/components/global/SubMenu/SubMenu.stories.tsx

View workflow job for this annotation

GitHub Actions / type-check

Module '"./SubMenu"' declares 'SubMenuProps' locally, but it is not exported.
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} />;

Check failure on line 22 in src/components/global/SubMenu/SubMenu.stories.tsx

View workflow job for this annotation

GitHub Actions / type-check

Parameter 'args' implicitly has an 'any' type.

export const Default = Template.bind({});
Default.args = {
text: '공지사항 보기',
to: '/notice',
};

export const CustomText = Template.bind({});
CustomText.args = {
text: '설정 페이지로 이동',
to: '/settings',
};
38 changes: 38 additions & 0 deletions src/components/global/SubMenu/SubMenu.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<StyledSubMenu onClick={handleClick}>
<Text>{text}</Text>
<Arrow width="15px" height="27px" />
</StyledSubMenu>
);
}

0 comments on commit b4e22bc

Please sign in to comment.