From 10623f98dc890129c94160d8649aa34b9fc8adb7 Mon Sep 17 00:00:00 2001 From: Taew00k Date: Mon, 13 Jan 2025 15:50:46 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Button/pageBtn/pageBtn.css.ts | 16 ++++++++++++++++ src/components/common/Button/pageBtn/pageBtn.tsx | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 src/components/common/Button/pageBtn/pageBtn.css.ts create mode 100644 src/components/common/Button/pageBtn/pageBtn.tsx diff --git a/src/components/common/Button/pageBtn/pageBtn.css.ts b/src/components/common/Button/pageBtn/pageBtn.css.ts new file mode 100644 index 0000000..c833f88 --- /dev/null +++ b/src/components/common/Button/pageBtn/pageBtn.css.ts @@ -0,0 +1,16 @@ +import theme from '@styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const currentPageNumStyle = style({ + color: theme.COLORS.white, + backgroundColor: theme.COLORS.gray10, + borderRadius: 24, + width: '2.6rem', + height: '2.6rem', + ...theme.FONTS.c2R14, +}); + +export const pageNumStyle = style({ + color: theme.COLORS.gray10, + ...theme.FONTS.c2R14, +}); diff --git a/src/components/common/Button/pageBtn/pageBtn.tsx b/src/components/common/Button/pageBtn/pageBtn.tsx new file mode 100644 index 0000000..8b21388 --- /dev/null +++ b/src/components/common/Button/pageBtn/pageBtn.tsx @@ -0,0 +1,16 @@ +import { currentPageNumStyle, pageNumStyle } from './pageBtn.css'; + +interface PageBtnProps { + pageNum: number; + currentPageNum: number; +} + +const PageBtn = ({ pageNum, currentPageNum }: PageBtnProps) => { + return ( + + ); +}; + +export default PageBtn; From 7f9cdbe665c4f2fce3ae9a91298c4c52dd88109a Mon Sep 17 00:00:00 2001 From: Taew00k Date: Mon, 13 Jan 2025 16:22:07 +0900 Subject: [PATCH 2/6] =?UTF-8?q?style:=20css=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.tsx | 3 + src/App.tsx | 9 ++- .../common/Button/pageBtn/pageBtn.css.ts | 25 ++++++--- .../common/Button/pageBtn/pageBtn.tsx | 4 +- src/stories/pageBtn.stories.ts | 56 +++++++++++++++++++ 5 files changed, 85 insertions(+), 12 deletions(-) create mode 100644 src/stories/pageBtn.stories.ts diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 817ac3c..a1f7b05 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,4 +1,7 @@ import type { Preview } from '@storybook/react'; +import '../src/styles/fonts.css'; +import '../src/styles/global.css'; +import '../src/styles/reset.css'; const preview: Preview = { parameters: { diff --git a/src/App.tsx b/src/App.tsx index bb37647..6927a3b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,12 @@ +import PageBtn from '@components/common/Button/pageBtn/pageBtn'; + const App = () => { - return
; + return ( +
+ + +
+ ); }; export default App; diff --git a/src/components/common/Button/pageBtn/pageBtn.css.ts b/src/components/common/Button/pageBtn/pageBtn.css.ts index c833f88..e8ba8ce 100644 --- a/src/components/common/Button/pageBtn/pageBtn.css.ts +++ b/src/components/common/Button/pageBtn/pageBtn.css.ts @@ -1,16 +1,23 @@ import theme from '@styles/theme.css'; -import { style } from '@vanilla-extract/css'; +import { styleVariants } from '@vanilla-extract/css'; -export const currentPageNumStyle = style({ - color: theme.COLORS.white, - backgroundColor: theme.COLORS.gray10, - borderRadius: 24, +const commonPageNumStyles = { width: '2.6rem', height: '2.6rem', ...theme.FONTS.c2R14, -}); +}; -export const pageNumStyle = style({ - color: theme.COLORS.gray10, - ...theme.FONTS.c2R14, +const pageBtnStyles = styleVariants({ + current: { + ...commonPageNumStyles, + color: theme.COLORS.white, + borderRadius: 24, + backgroundColor: theme.COLORS.gray10, + }, + default: { + ...commonPageNumStyles, + color: theme.COLORS.gray10, + }, }); + +export default pageBtnStyles; diff --git a/src/components/common/Button/pageBtn/pageBtn.tsx b/src/components/common/Button/pageBtn/pageBtn.tsx index 8b21388..e2111ad 100644 --- a/src/components/common/Button/pageBtn/pageBtn.tsx +++ b/src/components/common/Button/pageBtn/pageBtn.tsx @@ -1,4 +1,4 @@ -import { currentPageNumStyle, pageNumStyle } from './pageBtn.css'; +import pageBtnStyles from './pageBtn.css'; interface PageBtnProps { pageNum: number; @@ -7,7 +7,7 @@ interface PageBtnProps { const PageBtn = ({ pageNum, currentPageNum }: PageBtnProps) => { return ( - ); diff --git a/src/stories/pageBtn.stories.ts b/src/stories/pageBtn.stories.ts new file mode 100644 index 0000000..b865fcb --- /dev/null +++ b/src/stories/pageBtn.stories.ts @@ -0,0 +1,56 @@ +import PageBtn from '@components/common/Button/pageBtn/pageBtn'; +import type { Meta, StoryObj } from '@storybook/react'; + +interface PageBtnProps { + pageNum: number; + currentPageNum: number; +} + +const meta: Meta = { + title: 'Common/PageBtn', // 스토리북에서 표시될 경로 + component: PageBtn, + parameters: { + layout: 'centered', // 컴포넌트를 가운데 정렬 + }, + argTypes: { + pageNum: { + control: { type: 'number' }, + description: 'The number displayed on the button', + }, + currentPageNum: { + control: { type: 'number' }, + description: 'The current active page number', + }, + }, + args: { + pageNum: 1, + currentPageNum: 1, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const Page1Active: Story = { + args: { + pageNum: 1, + currentPageNum: 1, + }, +}; + +export const Page2Active: Story = { + args: { + pageNum: 2, + currentPageNum: 2, + }, +}; + +export const Page3Inactive: Story = { + args: { + pageNum: 3, + currentPageNum: 1, + }, +}; From b319d0911ec3aa0a189a1cd8eccd9f5cfbc4556d Mon Sep 17 00:00:00 2001 From: Taew00k Date: Mon, 13 Jan 2025 16:44:04 +0900 Subject: [PATCH 3/6] =?UTF-8?q?remove:=20app=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=20=EC=BD=94=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/App.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 6927a3b..bb37647 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,5 @@ -import PageBtn from '@components/common/Button/pageBtn/pageBtn'; - const App = () => { - return ( -
- - -
- ); + return
; }; export default App; From 4235809cf78891242da74e64072e864c9a9ef3cd Mon Sep 17 00:00:00 2001 From: Taew00k Date: Tue, 14 Jan 2025 01:39:20 +0900 Subject: [PATCH 4/6] =?UTF-8?q?rename:=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/{Button => buttons}/Button.tsx | 0 src/components/common/{Button => buttons}/button.css.ts | 0 src/components/common/{Button => buttons}/pageBtn/pageBtn.css.ts | 0 src/components/common/{Button => buttons}/pageBtn/pageBtn.tsx | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename src/components/common/{Button => buttons}/Button.tsx (100%) rename src/components/common/{Button => buttons}/button.css.ts (100%) rename src/components/common/{Button => buttons}/pageBtn/pageBtn.css.ts (100%) rename src/components/common/{Button => buttons}/pageBtn/pageBtn.tsx (100%) diff --git a/src/components/common/Button/Button.tsx b/src/components/common/buttons/Button.tsx similarity index 100% rename from src/components/common/Button/Button.tsx rename to src/components/common/buttons/Button.tsx diff --git a/src/components/common/Button/button.css.ts b/src/components/common/buttons/button.css.ts similarity index 100% rename from src/components/common/Button/button.css.ts rename to src/components/common/buttons/button.css.ts diff --git a/src/components/common/Button/pageBtn/pageBtn.css.ts b/src/components/common/buttons/pageBtn/pageBtn.css.ts similarity index 100% rename from src/components/common/Button/pageBtn/pageBtn.css.ts rename to src/components/common/buttons/pageBtn/pageBtn.css.ts diff --git a/src/components/common/Button/pageBtn/pageBtn.tsx b/src/components/common/buttons/pageBtn/pageBtn.tsx similarity index 100% rename from src/components/common/Button/pageBtn/pageBtn.tsx rename to src/components/common/buttons/pageBtn/pageBtn.tsx From 2edffc38609d1f9ef586b667d8514cd3409fef82 Mon Sep 17 00:00:00 2001 From: Taew00k Date: Tue, 14 Jan 2025 01:52:15 +0900 Subject: [PATCH 5/6] =?UTF-8?q?rename:=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pageBtn/pageBtn.css.ts | 0 .../{buttons => button}/pageBtn/pageBtn.tsx | 0 src/components/common/buttons/Button.tsx | 28 ------- src/components/common/buttons/button.css.ts | 83 ------------------- src/stories/Button.stories.ts | 67 --------------- src/stories/pageBtn.stories.ts | 2 +- 6 files changed, 1 insertion(+), 179 deletions(-) rename src/components/common/{buttons => button}/pageBtn/pageBtn.css.ts (100%) rename src/components/common/{buttons => button}/pageBtn/pageBtn.tsx (100%) delete mode 100644 src/components/common/buttons/Button.tsx delete mode 100644 src/components/common/buttons/button.css.ts delete mode 100644 src/stories/Button.stories.ts diff --git a/src/components/common/buttons/pageBtn/pageBtn.css.ts b/src/components/common/button/pageBtn/pageBtn.css.ts similarity index 100% rename from src/components/common/buttons/pageBtn/pageBtn.css.ts rename to src/components/common/button/pageBtn/pageBtn.css.ts diff --git a/src/components/common/buttons/pageBtn/pageBtn.tsx b/src/components/common/button/pageBtn/pageBtn.tsx similarity index 100% rename from src/components/common/buttons/pageBtn/pageBtn.tsx rename to src/components/common/button/pageBtn/pageBtn.tsx diff --git a/src/components/common/buttons/Button.tsx b/src/components/common/buttons/Button.tsx deleted file mode 100644 index d76891f..0000000 --- a/src/components/common/buttons/Button.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import buttonStyle from './button.css'; - -interface ButtonProps { - variant?: 'primary' | 'secondary' | 'tertiary' | 'outline'; - size?: 'xLarge' | 'large' | 'medium'; - isDisabled?: boolean; - label: string; -} - -const Button = ({ - variant = 'primary', - size = 'medium', - isDisabled = false, - label, - ...props -}: ButtonProps) => { - return ( - - ); -}; - -export default Button; diff --git a/src/components/common/buttons/button.css.ts b/src/components/common/buttons/button.css.ts deleted file mode 100644 index 90a1209..0000000 --- a/src/components/common/buttons/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/stories/Button.stories.ts b/src/stories/Button.stories.ts deleted file mode 100644 index 047c7af..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'); diff --git a/src/stories/pageBtn.stories.ts b/src/stories/pageBtn.stories.ts index b865fcb..5c6b205 100644 --- a/src/stories/pageBtn.stories.ts +++ b/src/stories/pageBtn.stories.ts @@ -1,4 +1,4 @@ -import PageBtn from '@components/common/Button/pageBtn/pageBtn'; +import PageBtn from '@components/common/button/pageBtn/pageBtn'; import type { Meta, StoryObj } from '@storybook/react'; interface PageBtnProps { From 51499463590790377df61de9f8d975797749c580 Mon Sep 17 00:00:00 2001 From: Taew00k Date: Tue, 14 Jan 2025 01:56:33 +0900 Subject: [PATCH 6/6] =?UTF-8?q?style:=20pageNum=20=EB=B3=80=EC=88=98?= =?UTF-8?q?=EB=AA=85=20pageIndex=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 --- src/components/common/button/pageBtn/pageBtn.tsx | 9 +++++---- src/stories/pageBtn.stories.ts | 16 ++++++++-------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/common/button/pageBtn/pageBtn.tsx b/src/components/common/button/pageBtn/pageBtn.tsx index e2111ad..902a907 100644 --- a/src/components/common/button/pageBtn/pageBtn.tsx +++ b/src/components/common/button/pageBtn/pageBtn.tsx @@ -1,14 +1,15 @@ import pageBtnStyles from './pageBtn.css'; interface PageBtnProps { - pageNum: number; + pageIndex: number; currentPageNum: number; } -const PageBtn = ({ pageNum, currentPageNum }: PageBtnProps) => { +const PageBtn = ({ pageIndex, currentPageNum }: PageBtnProps) => { return ( - ); }; diff --git a/src/stories/pageBtn.stories.ts b/src/stories/pageBtn.stories.ts index 5c6b205..c7798b3 100644 --- a/src/stories/pageBtn.stories.ts +++ b/src/stories/pageBtn.stories.ts @@ -2,18 +2,18 @@ import PageBtn from '@components/common/button/pageBtn/pageBtn'; import type { Meta, StoryObj } from '@storybook/react'; interface PageBtnProps { - pageNum: number; + pageIndex: number; currentPageNum: number; } const meta: Meta = { - title: 'Common/PageBtn', // 스토리북에서 표시될 경로 + title: 'Common/Button/PageBtn', component: PageBtn, parameters: { - layout: 'centered', // 컴포넌트를 가운데 정렬 + layout: 'centered', }, argTypes: { - pageNum: { + pageIndex: { control: { type: 'number' }, description: 'The number displayed on the button', }, @@ -23,7 +23,7 @@ const meta: Meta = { }, }, args: { - pageNum: 1, + pageIndex: 1, currentPageNum: 1, }, }; @@ -36,21 +36,21 @@ export const Default: Story = {}; export const Page1Active: Story = { args: { - pageNum: 1, + pageIndex: 1, currentPageNum: 1, }, }; export const Page2Active: Story = { args: { - pageNum: 2, + pageIndex: 2, currentPageNum: 2, }, }; export const Page3Inactive: Story = { args: { - pageNum: 3, + pageIndex: 3, currentPageNum: 1, }, };