From a7275ba06277f60b5e576288a5fc69194293f7fd Mon Sep 17 00:00:00 2001 From: bykbyk0401 Date: Mon, 13 Jan 2025 19:07:18 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=97=90=EC=84=9C=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EA=B8=B0=EB=B0=98=20=EA=B8=B0=EB=B3=B8=20=ED=85=8C?= =?UTF-8?q?=EB=A7=88=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/TextButton/TextButton.tsx | 24 ++++++ .../common/TextButton/textButton.css.ts | 53 ++++++++++++ src/stories/textButton.stories.ts | 84 +++++++++++++++++++ 3 files changed, 161 insertions(+) create mode 100644 src/components/common/TextButton/TextButton.tsx create mode 100644 src/components/common/TextButton/textButton.css.ts create mode 100644 src/stories/textButton.stories.ts diff --git a/src/components/common/TextButton/TextButton.tsx b/src/components/common/TextButton/TextButton.tsx new file mode 100644 index 0000000..dd16c4c --- /dev/null +++ b/src/components/common/TextButton/TextButton.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import textButtonStyle from './textButton.css'; + +interface TextButtonProps extends React.ButtonHTMLAttributes { + theme: 'lightGray' | 'gray'; + state: 'default' | 'pressed'; + size: 'small' | 'medium'; + leftIcon?: React.FC>; + rightIcon?: React.FC>; + text: string; +} + +const TextButton = ({ theme, state, size, text, ...props }: TextButtonProps) => { + return ( + + ); +}; + +export default TextButton; diff --git a/src/components/common/TextButton/textButton.css.ts b/src/components/common/TextButton/textButton.css.ts new file mode 100644 index 0000000..3fdba73 --- /dev/null +++ b/src/components/common/TextButton/textButton.css.ts @@ -0,0 +1,53 @@ +import theme from '@styles/theme.css'; +import { recipe } from '@vanilla-extract/recipes'; + +const textButtonStyle = recipe({ + base: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + gap: '0.3rem', + backgroundColor: 'transparent', + border: 'none', + }, + + variants: { + theme: { + lightGray: { + ...theme.FONTS.c6R13, + }, + gray: { + ...theme.FONTS.b8M15, + }, + }, + state: { + default: {}, + pressed: {}, + }, + size: { + small: { height: '3.3rem' }, + medium: { height: '4.4rem' }, + }, + }, + + compoundVariants: [ + { + variants: { theme: 'lightGray', state: 'default' }, + style: { color: theme.COLORS.gray5 }, + }, + { + variants: { theme: 'lightGray', state: 'pressed' }, + style: { color: theme.COLORS.gray9 }, + }, + { + variants: { theme: 'gray', state: 'default' }, + style: { color: theme.COLORS.gray7 }, + }, + { + variants: { theme: 'gray', state: 'pressed' }, + style: { color: theme.COLORS.gray10 }, + }, + ], +}); + +export default textButtonStyle; diff --git a/src/stories/textButton.stories.ts b/src/stories/textButton.stories.ts new file mode 100644 index 0000000..09d1edc --- /dev/null +++ b/src/stories/textButton.stories.ts @@ -0,0 +1,84 @@ +import TextButton from '@components/common/TextButton/TextButton'; +import type { Meta, StoryObj } from '@storybook/react'; + +interface TextButtonProps extends React.ButtonHTMLAttributes { + theme: 'lightGray' | 'gray'; + state: 'default' | 'pressed'; + size: 'small' | 'medium'; + text: string; +} + +const meta = { + title: 'Common/TextButton', + component: TextButton, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: { + theme: { + control: { type: 'radio' }, + options: ['lightGray', 'gray'], + }, + state: { + control: { type: 'radio' }, + options: ['default', 'pressed'], + }, + size: { + control: { type: 'radio' }, + options: ['small', 'medium'], + }, + text: { + control: { type: 'text' }, + }, + }, + args: { + theme: 'lightGray', + state: 'default', + size: 'medium', + text: 'Sample TextButton', + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +const createTextButtonStory = ( + theme: TextButtonProps['theme'], + state: TextButtonProps['state'], + size: TextButtonProps['size'], + text: string, +) => ({ + args: { theme, state, size, text }, +}); + +export const LightGrayDefaultSmall: Story = createTextButtonStory( + 'lightGray', + 'default', + 'small', + 'LightGray Default Small', +); + +export const LightGrayPressedMedium: Story = createTextButtonStory( + 'lightGray', + 'pressed', + 'medium', + 'LightGray Pressed Medium', +); + +export const GrayDefaultSmall: Story = createTextButtonStory( + 'gray', + 'default', + 'small', + 'Gray Default Small', +); + +export const GrayPressedMedium: Story = createTextButtonStory( + 'gray', + 'pressed', + 'medium', + 'Gray Pressed Medium', +); From db75020f6bb8418f48cd17168a99edaeb1cb4286 Mon Sep 17 00:00:00 2001 From: bykbyk0401 Date: Mon, 13 Jan 2025 21:02:45 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EC=A2=8C=EC=9A=B0=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/TextButton/TextButton.tsx | 22 +++++++++--- .../common/TextButton/textButton.css.ts | 16 ++++++++- src/stories/textButton.stories.ts | 36 +++++++++++-------- 3 files changed, 53 insertions(+), 21 deletions(-) diff --git a/src/components/common/TextButton/TextButton.tsx b/src/components/common/TextButton/TextButton.tsx index dd16c4c..dfcf380 100644 --- a/src/components/common/TextButton/TextButton.tsx +++ b/src/components/common/TextButton/TextButton.tsx @@ -1,3 +1,4 @@ +import Icon from '@assets/svgs'; import React from 'react'; import textButtonStyle from './textButton.css'; @@ -6,17 +7,28 @@ interface TextButtonProps extends React.ButtonHTMLAttributes theme: 'lightGray' | 'gray'; state: 'default' | 'pressed'; size: 'small' | 'medium'; - leftIcon?: React.FC>; - rightIcon?: React.FC>; + leftIcon?: keyof typeof Icon; + rightIcon?: keyof typeof Icon; text: string; } -const TextButton = ({ theme, state, size, text, ...props }: TextButtonProps) => { +const TextButton = ({ + theme, + state, + size, + text, + leftIcon, + rightIcon, + ...props +}: TextButtonProps) => { + const LeftIconComponent = leftIcon ? Icon[leftIcon] : null; + const RightIconComponent = rightIcon ? Icon[rightIcon] : null; + return ( ); }; diff --git a/src/components/common/TextButton/textButton.css.ts b/src/components/common/TextButton/textButton.css.ts index 3fdba73..b356e97 100644 --- a/src/components/common/TextButton/textButton.css.ts +++ b/src/components/common/TextButton/textButton.css.ts @@ -15,9 +15,21 @@ const textButtonStyle = recipe({ theme: { lightGray: { ...theme.FONTS.c6R13, + '& svg': { + width: '1.3rem', + height: '1.3rem', + }, + '& svg path': { + stroke: 'currentColor', + }, }, gray: { ...theme.FONTS.b8M15, + padding: '0 0.7rem', + '& svg': { + width: '2rem', + height: '2rem', + }, }, }, state: { @@ -45,7 +57,9 @@ const textButtonStyle = recipe({ }, { variants: { theme: 'gray', state: 'pressed' }, - style: { color: theme.COLORS.gray10 }, + style: { + color: theme.COLORS.gray10, + }, }, ], }); diff --git a/src/stories/textButton.stories.ts b/src/stories/textButton.stories.ts index 09d1edc..e585318 100644 --- a/src/stories/textButton.stories.ts +++ b/src/stories/textButton.stories.ts @@ -1,3 +1,5 @@ +// textButton.stories.tsx +import Icon from '@assets/svgs'; import TextButton from '@components/common/TextButton/TextButton'; import type { Meta, StoryObj } from '@storybook/react'; @@ -5,6 +7,8 @@ interface TextButtonProps extends React.ButtonHTMLAttributes theme: 'lightGray' | 'gray'; state: 'default' | 'pressed'; size: 'small' | 'medium'; + leftIcon?: keyof typeof Icon; + rightIcon?: keyof typeof Icon; text: string; } @@ -15,6 +19,7 @@ const meta = { layout: 'centered', }, tags: ['autodocs'], + argTypes: { theme: { control: { type: 'radio' }, @@ -31,12 +36,23 @@ const meta = { text: { control: { type: 'text' }, }, + leftIcon: { + control: { type: 'select' }, + options: Object.keys(Icon), + }, + rightIcon: { + control: { type: 'select' }, + options: Object.keys(Icon), + }, }, + args: { theme: 'lightGray', state: 'default', size: 'medium', text: 'Sample TextButton', + leftIcon: undefined, + rightIcon: undefined, }, } satisfies Meta; @@ -51,8 +67,10 @@ const createTextButtonStory = ( state: TextButtonProps['state'], size: TextButtonProps['size'], text: string, + leftIcon?: keyof typeof Icon, + rightIcon?: keyof typeof Icon, ) => ({ - args: { theme, state, size, text }, + args: { theme, state, size, text, leftIcon, rightIcon }, }); export const LightGrayDefaultSmall: Story = createTextButtonStory( @@ -62,23 +80,11 @@ export const LightGrayDefaultSmall: Story = createTextButtonStory( 'LightGray Default Small', ); -export const LightGrayPressedMedium: Story = createTextButtonStory( - 'lightGray', - 'pressed', - 'medium', - 'LightGray Pressed Medium', -); - -export const GrayDefaultSmall: Story = createTextButtonStory( - 'gray', - 'default', - 'small', - 'Gray Default Small', -); - export const GrayPressedMedium: Story = createTextButtonStory( 'gray', 'pressed', 'medium', 'Gray Pressed Medium', + 'IcnSmallHeart', + 'IcnSmallHeart', ); From 7277ab209910d8e2277233ca747da6cab0109549 Mon Sep 17 00:00:00 2001 From: bykbyk0401 Date: Mon, 13 Jan 2025 21:23:58 +0900 Subject: [PATCH 03/10] =?UTF-8?q?fix:=20=ED=81=B4=EB=A6=AD=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20boolean=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/TextButton/TextButton.tsx | 10 +++-- src/stories/textButton.stories.ts | 43 +++++++++++-------- 2 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/components/common/TextButton/TextButton.tsx b/src/components/common/TextButton/TextButton.tsx index dfcf380..9689ee3 100644 --- a/src/components/common/TextButton/TextButton.tsx +++ b/src/components/common/TextButton/TextButton.tsx @@ -5,7 +5,7 @@ import textButtonStyle from './textButton.css'; interface TextButtonProps extends React.ButtonHTMLAttributes { theme: 'lightGray' | 'gray'; - state: 'default' | 'pressed'; + clicked?: boolean; size: 'small' | 'medium'; leftIcon?: keyof typeof Icon; rightIcon?: keyof typeof Icon; @@ -14,18 +14,22 @@ interface TextButtonProps extends React.ButtonHTMLAttributes const TextButton = ({ theme, - state, + clicked, size, text, leftIcon, rightIcon, + onClick, ...props }: TextButtonProps) => { const LeftIconComponent = leftIcon ? Icon[leftIcon] : null; const RightIconComponent = rightIcon ? Icon[rightIcon] : null; return ( - - ); -}; - -export default Button; diff --git a/src/components/common/Button/button.css.ts b/src/components/common/Button/button.css.ts deleted file mode 100644 index 90a1209..0000000 --- a/src/components/common/Button/button.css.ts +++ /dev/null @@ -1,83 +0,0 @@ -import theme from '@styles/theme.css'; -import { recipe } from '@vanilla-extract/recipes'; - -const buttonStyle = recipe({ - base: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - ...theme.FONTS.b9R15, - - border: 'none', - borderRadius: '8px', - - whiteSpace: 'nowrap', - - cursor: 'pointer', - - ':disabled': { - backgroundColor: theme.COLORS.gray3, - color: theme.COLORS.white, - - cursor: 'default', - }, - }, - - variants: { - color: { - primary: { - color: theme.COLORS.white, - backgroundColor: theme.COLORS.primary400, - - '&:hover': { - backgroundColor: theme.COLORS.primary400, - }, - }, - secondary: { - color: '#6D77FF', - backgroundColor: '#F3F5FF', - - '&:hover': { - backgroundColor: '#E3E8FF', - }, - }, - tertiary: { - color: '#525866', - backgroundColor: '#F8F8FB', - - '&:hover': { - backgroundColor: '#ECECF1', - }, - }, - outline: { - color: '#525866', - backgroundColor: '#FFFFFF', - - '&:hover': { - backgroundColor: '#F8F8FB', - }, - }, - }, - - size: { - xLarge: { - padding: '1.6rem 1.4rem', - }, - - large: { - padding: '1.4rem', - }, - - medium: { - padding: '1.2rem 1.4rem', - }, - }, - }, - - defaultVariants: { - color: 'primary', - size: 'medium', - }, -}); - -export default buttonStyle; diff --git a/src/components/common/TextButton/TextButton.tsx b/src/components/common/button/textButton/TextButton.tsx similarity index 100% rename from src/components/common/TextButton/TextButton.tsx rename to src/components/common/button/textButton/TextButton.tsx diff --git a/src/components/common/TextButton/textButton.css.ts b/src/components/common/button/textButton/textButton.css.ts similarity index 100% rename from src/components/common/TextButton/textButton.css.ts rename to src/components/common/button/textButton/textButton.css.ts diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts index 047c7af..fff5118 100644 --- a/src/stories/Button.stories.ts +++ b/src/stories/Button.stories.ts @@ -1,4 +1,4 @@ -import Button from '@components/common/Button/Button'; +import Button from '@components/common/button/Button'; import type { Meta, StoryObj } from '@storybook/react'; import { ButtonHTMLAttributes } from 'react'; diff --git a/src/stories/textButton.stories.ts b/src/stories/textButton.stories.ts index a655a01..ebb0fda 100644 --- a/src/stories/textButton.stories.ts +++ b/src/stories/textButton.stories.ts @@ -1,5 +1,5 @@ import Icon from '@assets/svgs'; -import TextButton from '@components/common/TextButton/TextButton'; +import TextButton from '@components/common/button/textButton/TextButton'; import type { Meta, StoryObj } from '@storybook/react'; interface TextButtonProps extends React.ButtonHTMLAttributes { From e18d327de4b2888faff8d2408a5873879b314640 Mon Sep 17 00:00:00 2001 From: bykbyk0401 Date: Tue, 14 Jan 2025 00:30:52 +0900 Subject: [PATCH 05/10] =?UTF-8?q?rename:=20=EC=98=88=EC=8B=9C=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/Button.stories.ts | 67 ----------------------------------- 1 file changed, 67 deletions(-) delete mode 100644 src/stories/Button.stories.ts diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts deleted file mode 100644 index fff5118..0000000 --- a/src/stories/Button.stories.ts +++ /dev/null @@ -1,67 +0,0 @@ -import Button from '@components/common/button/Button'; -import type { Meta, StoryObj } from '@storybook/react'; -import { ButtonHTMLAttributes } from 'react'; - -interface ButtonProps extends ButtonHTMLAttributes { - variant?: 'primary' | 'secondary' | 'tertiary' | 'outline'; - size?: 'xLarge' | 'large' | 'medium'; - isDisabled?: boolean; - label: string; -} - -const meta = { - title: 'Common/Button', // 스토리북에서 컴포넌트가 표시되는 경로 (실제 컴포넌트랑 이름 같게 하기) - component: Button, // 스토리를 만들 컴포넌트 이름 - parameters: { - layout: 'centered', // 스토리를 가운데 정렬하여 표시 - }, - tags: ['autodocs'], - argTypes: { - variant: { - control: { type: 'radio' }, - options: ['primary', 'secondary', 'tertiary', 'outline'], - }, - size: { - control: { type: 'radio' }, - options: ['xLarge', 'large', 'medium'], - }, - isDisabled: { - control: { type: 'boolean' }, - }, - label: { - control: { type: 'text' }, - }, - }, - args: { - variant: 'primary', - size: 'medium', - isDisabled: false, - label: 'Button', - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; - -const createButtonStory = (variant: ButtonProps['variant'], label: string) => ({ - args: { - variant, - label, - }, - argsType: { - variant: { - control: false, - }, - }, -}); - -export const Primary: Story = createButtonStory('primary', 'Primary Button'); - -export const Secondary: Story = createButtonStory('secondary', 'Secondary Button'); - -export const Tertiary: Story = createButtonStory('tertiary', 'Tertiary Button'); - -export const Outline: Story = createButtonStory('outline', 'Outline Button'); From 7602c8763271627fd480fa0cf7743ef14506a844 Mon Sep 17 00:00:00 2001 From: bykbyk0401 Date: Tue, 14 Jan 2025 01:32:04 +0900 Subject: [PATCH 06/10] =?UTF-8?q?fix:=20Button=EC=97=90=EC=84=9C=20Btn?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TextButton.tsx => textBtn/TextBtn.tsx} | 12 +++++----- .../textBtn.css.ts} | 4 ++-- ...xtButton.stories.ts => textBtn.stories.ts} | 22 +++++++++---------- 3 files changed, 19 insertions(+), 19 deletions(-) rename src/components/common/button/{textButton/TextButton.tsx => textBtn/TextBtn.tsx} (68%) rename src/components/common/button/{textButton/textButton.css.ts => textBtn/textBtn.css.ts} (95%) rename src/stories/{textButton.stories.ts => textBtn.stories.ts} (74%) diff --git a/src/components/common/button/textButton/TextButton.tsx b/src/components/common/button/textBtn/TextBtn.tsx similarity index 68% rename from src/components/common/button/textButton/TextButton.tsx rename to src/components/common/button/textBtn/TextBtn.tsx index 9689ee3..6924819 100644 --- a/src/components/common/button/textButton/TextButton.tsx +++ b/src/components/common/button/textBtn/TextBtn.tsx @@ -1,9 +1,9 @@ import Icon from '@assets/svgs'; import React from 'react'; -import textButtonStyle from './textButton.css'; +import textBtnStyle from './textBtn.css'; -interface TextButtonProps extends React.ButtonHTMLAttributes { +interface TextBtnProps extends React.ButtonHTMLAttributes { theme: 'lightGray' | 'gray'; clicked?: boolean; size: 'small' | 'medium'; @@ -12,7 +12,7 @@ interface TextButtonProps extends React.ButtonHTMLAttributes text: string; } -const TextButton = ({ +const TextBtn = ({ theme, clicked, size, @@ -21,13 +21,13 @@ const TextButton = ({ rightIcon, onClick, ...props -}: TextButtonProps) => { +}: TextBtnProps) => { const LeftIconComponent = leftIcon ? Icon[leftIcon] : null; const RightIconComponent = rightIcon ? Icon[rightIcon] : null; return (