From 62dcd4d4d0d9a41223e0b9758a5218cec57c11c7 Mon Sep 17 00:00:00 2001 From: gahyeon Date: Mon, 13 Jan 2025 17:01:47 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=ED=81=90=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.tsx | 4 +++ .../curation/CurationCard/CurationCard.tsx | 24 ++++++++++++++ .../curation/CurationCard/curationCard.css.ts | 31 +++++++++++++++++++ 3 files changed, 59 insertions(+) create mode 100644 src/components/curation/CurationCard/CurationCard.tsx create mode 100644 src/components/curation/CurationCard/curationCard.css.ts diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 817ac3c..a9f784b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,3 +1,7 @@ +import '../src/styles/fonts.css'; +import '../src/styles/global.css'; +import '../src/styles/reset.css'; + import type { Preview } from '@storybook/react'; const preview: Preview = { diff --git a/src/components/curation/CurationCard/CurationCard.tsx b/src/components/curation/CurationCard/CurationCard.tsx new file mode 100644 index 0000000..4947556 --- /dev/null +++ b/src/components/curation/CurationCard/CurationCard.tsx @@ -0,0 +1,24 @@ +import * as styles from './curationCard.css'; + +interface CurationCardProps { + bgImage: string; + title: string; + subtitle: string; + onClick: () => void; +} + +const CurationCard = ({ bgImage, title, subtitle, onClick }: CurationCardProps) => { + return ( + + ); +}; + +export default CurationCard; diff --git a/src/components/curation/CurationCard/curationCard.css.ts b/src/components/curation/CurationCard/curationCard.css.ts new file mode 100644 index 0000000..592a8c0 --- /dev/null +++ b/src/components/curation/CurationCard/curationCard.css.ts @@ -0,0 +1,31 @@ +import theme from '@styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const CardContainer = style({ + width: '28.5rem', + height: '26.8rem', + borderRadius: '8px', + overflow: 'hidden', + border: 'none', + backgroundSize: 'cover', + backgroundPosition: 'center', + display: 'flex', + alignItems: 'flex-end', + + padding: '1.6rem', + color: theme.COLORS.white, +}); + +export const textbox = style({ + display: 'flex', + flexDirection: 'column', + textAlign: 'start', +}); + +export const title = style({ + ...theme.FONTS.h3Sb18, +}); + +export const subtitle = style({ + ...theme.FONTS.b9R15, +}); From a29ccc87f0d2c1a8fa3ae4c7e7aec6a37986ac79 Mon Sep 17 00:00:00 2001 From: gahyeon Date: Mon, 13 Jan 2025 17:02:37 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=ED=81=90=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=B9=B4=EB=93=9C=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/CurationCard.stories.ts | 37 +++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/stories/CurationCard.stories.ts diff --git a/src/stories/CurationCard.stories.ts b/src/stories/CurationCard.stories.ts new file mode 100644 index 0000000..870e0d0 --- /dev/null +++ b/src/stories/CurationCard.stories.ts @@ -0,0 +1,37 @@ +import CurationCard from '@components/curation/CurationCard/CurationCard'; +import type { Meta, StoryObj } from '@storybook/react'; + +const meta = { + title: 'Curation/CurationCard', + component: CurationCard, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: { + bgImage: { + control: { type: 'text' }, + }, + title: { + control: { type: 'text' }, + }, + subtitle: { + control: { type: 'text' }, + }, + onClick: { + action: 'clicked', + }, + }, + args: { + bgImage: 'https://img.danawa.com/images/descFiles/6/110/5109431_agiLaciMHn_1659098198501.jpeg', + title: '고양이 있는 절 봤어?', + subtitle: '용문사에 있는 고양이 좀 봐. 귀엽지?', + onClick: () => alert('click !'), + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; From cddbcc9039d0c5a6eed26aa4fcceea15f2860b8c Mon Sep 17 00:00:00 2001 From: gahyeon Date: Mon, 13 Jan 2025 17:36:24 +0900 Subject: [PATCH 3/7] =?UTF-8?q?chore:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/curation/CurationCard/CurationCard.tsx | 2 +- src/components/curation/CurationCard/curationCard.css.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/curation/CurationCard/CurationCard.tsx b/src/components/curation/CurationCard/CurationCard.tsx index 4947556..f93bb4e 100644 --- a/src/components/curation/CurationCard/CurationCard.tsx +++ b/src/components/curation/CurationCard/CurationCard.tsx @@ -10,7 +10,7 @@ interface CurationCardProps { const CurationCard = ({ bgImage, title, subtitle, onClick }: CurationCardProps) => { 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/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'); From 2b876eedc8f48486c993a2b571559368ebdd732e Mon Sep 17 00:00:00 2001 From: gahyeon Date: Tue, 14 Jan 2025 00:41:11 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore:=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/CurationCard.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/CurationCard.stories.ts b/src/stories/CurationCard.stories.ts index c07e35d..870e0d0 100644 --- a/src/stories/CurationCard.stories.ts +++ b/src/stories/CurationCard.stories.ts @@ -1,4 +1,4 @@ -import CurationCard from '@components/curation/curationCard/CurationCard'; +import CurationCard from '@components/curation/CurationCard/CurationCard'; import type { Meta, StoryObj } from '@storybook/react'; const meta = { From d349312a686ecff2e47bcf8c4115b03590edc8ca Mon Sep 17 00:00:00 2001 From: gahyeon Date: Tue, 14 Jan 2025 00:47:08 +0900 Subject: [PATCH 7/7] =?UTF-8?q?delete:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20css=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/curation/CurationCard/curationCard.css.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/curation/CurationCard/curationCard.css.ts b/src/components/curation/CurationCard/curationCard.css.ts index 2538346..6da18c3 100644 --- a/src/components/curation/CurationCard/curationCard.css.ts +++ b/src/components/curation/CurationCard/curationCard.css.ts @@ -6,7 +6,6 @@ export const cardContainer = style({ height: '26.8rem', borderRadius: '8px', overflow: 'hidden', - border: 'none', backgroundSize: 'cover', backgroundPosition: 'center', display: 'flex',