From ad9ec7f867454574e71e5a87febf436a67e382c3 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 12:15:22 +0900 Subject: [PATCH 01/13] =?UTF-8?q?setting:=20font=20pretendard=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tailwind-config/shared-styles.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/tailwind-config/shared-styles.css b/packages/tailwind-config/shared-styles.css index fdab2dff..b9707b23 100644 --- a/packages/tailwind-config/shared-styles.css +++ b/packages/tailwind-config/shared-styles.css @@ -1,3 +1,4 @@ +@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); @import 'tailwindcss'; /* Head */ @@ -230,8 +231,22 @@ @layer base { html { - font-family: system-ui, sans-serif; font-size: 62.5%; + padding: 0; + border: 0; + vertical-align: baseline; + } + + body { + font-family: + 'Pretendard', + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + Arial, + sans-serif; } } From 86bf4e3ef9f3b63037c1dbe34c24d8bf84bc1312 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 12:15:56 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20base=20card=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=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 --- .../design-system/src/components/card/BaseCard.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 packages/design-system/src/components/card/BaseCard.tsx diff --git a/packages/design-system/src/components/card/BaseCard.tsx b/packages/design-system/src/components/card/BaseCard.tsx new file mode 100644 index 00000000..543f9695 --- /dev/null +++ b/packages/design-system/src/components/card/BaseCard.tsx @@ -0,0 +1,13 @@ +interface BaseCardProps { + children: React.ReactNode; +} + +const BaseCard = ({ children }: BaseCardProps) => { + return ( +
+ {children} +
+ ); +}; + +export default BaseCard; From 6fdaeccc3daa50958f894d4ffeeebc46fe4a6688 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 12:16:28 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20bookmark=20card=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=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 --- .../src/components/card/MyBookMark.tsx | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 packages/design-system/src/components/card/MyBookMark.tsx diff --git a/packages/design-system/src/components/card/MyBookMark.tsx b/packages/design-system/src/components/card/MyBookMark.tsx new file mode 100644 index 00000000..815599f3 --- /dev/null +++ b/packages/design-system/src/components/card/MyBookMark.tsx @@ -0,0 +1,51 @@ +import { Icon } from '@/icons'; +import BaseCard from './BaseCard'; + +interface MyBookMarkProps { + title: string; + content?: string; + category: string; + imageUrl?: string; + date?: string; +} + +const MyBookMark = ({ + title, + content, + category, + imageUrl, + date, +}: MyBookMarkProps) => { + return ( + +
+ +
+ +
+

+ {content} +

+ +
+

{title}

+ +
+ + {category && ( + + {category} + + )} + +

+ {date || '2025.08.09'} +

+
+ + ); +}; + +export default MyBookMark; From 8afc7056c1c6dd904cd441fe2de7cd21df566e5e Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 12:16:52 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat:=20remind=20card=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=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 --- .../src/components/card/RemindCard.tsx | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 packages/design-system/src/components/card/RemindCard.tsx diff --git a/packages/design-system/src/components/card/RemindCard.tsx b/packages/design-system/src/components/card/RemindCard.tsx new file mode 100644 index 00000000..6b6c7c38 --- /dev/null +++ b/packages/design-system/src/components/card/RemindCard.tsx @@ -0,0 +1,53 @@ +import { Icon } from '@/icons'; +import BaseCard from './BaseCard'; + +interface RemindCardProps { + title: string; + content?: string; + category: string; + imageUrl?: string; + timeRemaining?: string; +} + +const RemindCard = ({ + title, + content, + category, + imageUrl, + timeRemaining, +}: RemindCardProps) => { + return ( + +
+ + + {timeRemaining || '4시간 30분'} + + 이후에 사라져요 +
+ +
+ +
+ +
+
+

{title}

+ +
+ +

+ {content} +

+ + + {category} + +
+ + ); +}; + +export default RemindCard; From 31196a663cf0e44d771e30c7a620f153e5e85a75 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 12:17:12 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat:=20card=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=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 --- .../src/components/card/Card.tsx | 48 +++++++++++++++++++ .../design-system/src/components/index.ts | 3 +- 2 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 packages/design-system/src/components/card/Card.tsx diff --git a/packages/design-system/src/components/card/Card.tsx b/packages/design-system/src/components/card/Card.tsx new file mode 100644 index 00000000..ae55c3c3 --- /dev/null +++ b/packages/design-system/src/components/card/Card.tsx @@ -0,0 +1,48 @@ +import MyBookMark from './MyBookMark'; +import RemindCard from './RemindCard'; + +interface CardProps { + type: 'remind' | 'bookmark'; + title: string; + content?: string; + category: string; + imageUrl?: string; + timeRemaining?: string; + date?: string; +} + +const Card = ({ + type, + title, + content, + category, + imageUrl, + timeRemaining, + date, +}: CardProps) => { + return ( + <> + {type === 'remind' && ( + + )} + + {type === 'bookmark' && ( + + )} + + ); +}; + +export default Card; diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts index ffe13dde..13952c90 100644 --- a/packages/design-system/src/components/index.ts +++ b/packages/design-system/src/components/index.ts @@ -1,3 +1,4 @@ export { default as Button } from './button/Button'; -export { Switch } from './switch/switch'; +export { default as Card } from './card/Card'; export { default as Input } from './input/Input'; +export { Switch } from './switch/switch'; From cbdd37704dbcb75536ba9d3555b39aceb68b52d4 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 12:17:47 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20card=20story=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/card/Card.stories.tsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 packages/design-system/src/components/card/Card.stories.tsx diff --git a/packages/design-system/src/components/card/Card.stories.tsx b/packages/design-system/src/components/card/Card.stories.tsx new file mode 100644 index 00000000..7b5a68f8 --- /dev/null +++ b/packages/design-system/src/components/card/Card.stories.tsx @@ -0,0 +1,61 @@ +import { Meta, StoryObj } from '@storybook/react-vite'; +import Card from './Card'; + +const meta: Meta = { + title: 'Components/Card', + component: Card, + tags: ['autodocs'], + parameters: { + layout: 'centered', + }, + argTypes: { + type: { + control: 'inline-radio', + options: ['remind', 'bookmark'], + description: '카드의 종류를 선택합니다.', + }, + title: { control: 'text' }, + content: { control: 'text' }, + category: { control: 'text' }, + imageUrl: { control: 'text' }, + timeRemaining: { + control: 'text', + if: { arg: 'type', eq: 'remind' }, + }, + date: { + control: 'text', + if: { arg: 'type', eq: 'bookmark' }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Remind: Story = { + name: '타입: 리마인드 카드', + args: { + type: 'remind', + title: '리마인드 카드 타이틀입니다. 두 줄까지 표시될 수 있습니다.', + content: + '여기는 컨텐츠 내용입니다. 사용자가 북마크한 아티클의 일부나 메모가 표시됩니다. 이 내용도 두 줄로 제한됩니다.', + category: '카테고리', + timeRemaining: '3시간 25분', + imageUrl: + 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=2070&auto=format&fit=crop', + }, +}; + +export const BookMark: Story = { + name: '타입: 북마크 카드', + args: { + type: 'bookmark', + title: '북마크 카드 타이틀입니다. 길어지면 두 줄까지 표시됩니다.', + content: + '북마크 카드 컨텐츠입니다. 역시 이 내용도 두 줄까지 표시되도록 설정되어 있습니다. 길이를 확인하기 위한 텍스트입니다.', + category: '디자인', + date: '2025.08.26', + imageUrl: + 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=2070&auto=format&fit=crop', + }, +}; From 97abd10c40b1bf116c83b1a04d025596f2d362b9 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 12:34:07 +0900 Subject: [PATCH 07/13] =?UTF-8?q?chore:=20bookmark=20naming=EC=97=90=20car?= =?UTF-8?q?d=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design-system/src/components/card/Card.tsx | 4 ++-- .../card/{MyBookMark.tsx => MyBookmarkCard.tsx} | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) rename packages/design-system/src/components/card/{MyBookMark.tsx => MyBookmarkCard.tsx} (90%) diff --git a/packages/design-system/src/components/card/Card.tsx b/packages/design-system/src/components/card/Card.tsx index ae55c3c3..06cf4c87 100644 --- a/packages/design-system/src/components/card/Card.tsx +++ b/packages/design-system/src/components/card/Card.tsx @@ -1,4 +1,4 @@ -import MyBookMark from './MyBookMark'; +import MyBookmarkCard from './MyBookmarkCard'; import RemindCard from './RemindCard'; interface CardProps { @@ -33,7 +33,7 @@ const Card = ({ )} {type === 'bookmark' && ( - { +}: MyBookmarkCardProps) => { return (
@@ -48,4 +48,4 @@ const MyBookMark = ({ ); }; -export default MyBookMark; +export default MyBookmarkCard; From ff4db9c6cfb5fc330c1e773ae31e96f85b48145a Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 15:07:13 +0900 Subject: [PATCH 08/13] =?UTF-8?q?setting:=20design-system=20d.ts=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 --- packages/design-system/src/vite-env.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/design-system/src/vite-env.d.ts diff --git a/packages/design-system/src/vite-env.d.ts b/packages/design-system/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/packages/design-system/src/vite-env.d.ts @@ -0,0 +1 @@ +/// From e7d6f4fda3fdbdc810dd044053a2d61b26a0ab02 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 15:07:44 +0900 Subject: [PATCH 09/13] =?UTF-8?q?chore:=20card=20story=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/card/Card.stories.tsx | 74 ++++++++++++++++--- 1 file changed, 65 insertions(+), 9 deletions(-) diff --git a/packages/design-system/src/components/card/Card.stories.tsx b/packages/design-system/src/components/card/Card.stories.tsx index 7b5a68f8..9198c87d 100644 --- a/packages/design-system/src/components/card/Card.stories.tsx +++ b/packages/design-system/src/components/card/Card.stories.tsx @@ -33,13 +33,12 @@ export default meta; type Story = StoryObj; export const Remind: Story = { - name: '타입: 리마인드 카드', + name: 'type: remind', args: { type: 'remind', - title: '리마인드 카드 타이틀입니다. 두 줄까지 표시될 수 있습니다.', - content: - '여기는 컨텐츠 내용입니다. 사용자가 북마크한 아티클의 일부나 메모가 표시됩니다. 이 내용도 두 줄로 제한됩니다.', - category: '카테고리', + title: '리마인드 카드 타이틀', + content: '리마인드 컨텐츠 내용입니다.', + category: '개발', timeRemaining: '3시간 25분', imageUrl: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=2070&auto=format&fit=crop', @@ -47,15 +46,72 @@ export const Remind: Story = { }; export const BookMark: Story = { - name: '타입: 북마크 카드', + name: 'type: bookmark', args: { type: 'bookmark', - title: '북마크 카드 타이틀입니다. 길어지면 두 줄까지 표시됩니다.', - content: - '북마크 카드 컨텐츠입니다. 역시 이 내용도 두 줄까지 표시되도록 설정되어 있습니다. 길이를 확인하기 위한 텍스트입니다.', + title: '북마크 카드 타이틀', + content: '북마크 컨텐츠 내용입니다.', category: '디자인', date: '2025.08.26', imageUrl: 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=2070&auto=format&fit=crop', }, }; + +export const LongTextSideBySide: Story = { + name: 'case: Long Text', + render: () => ( +
+ + +
+ ), +}; + +export const NoImageSideBySide: Story = { + name: 'case: No imageUrl', + render: () => ( +
+ + +
+ ), +}; + +export const NoCategoryBookmark: Story = { + name: 'case: No category (bookmark)', + args: { + type: 'bookmark', + title: '북마크 카드 타이틀', + content: '북마크 컨텐츠 내용입니다.', + date: '2025.08.26', + imageUrl: + 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=2070&auto=format&fit=crop', + }, +}; From 452c320ce393855ca02591be8d99eb04a4cbe60d Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 15:08:15 +0900 Subject: [PATCH 10/13] =?UTF-8?q?feat:=20card=20no=20image=20case=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/assets/chippi_no_image.svg | 9 ++++++ .../src/components/card/MyBookmarkCard.tsx | 29 ++++++++++++------- .../src/components/card/RemindCard.tsx | 21 +++++++++----- 3 files changed, 41 insertions(+), 18 deletions(-) create mode 100644 packages/design-system/src/assets/chippi_no_image.svg diff --git a/packages/design-system/src/assets/chippi_no_image.svg b/packages/design-system/src/assets/chippi_no_image.svg new file mode 100644 index 00000000..ba83fc8b --- /dev/null +++ b/packages/design-system/src/assets/chippi_no_image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/design-system/src/components/card/MyBookmarkCard.tsx b/packages/design-system/src/components/card/MyBookmarkCard.tsx index 487d6390..75280f08 100644 --- a/packages/design-system/src/components/card/MyBookmarkCard.tsx +++ b/packages/design-system/src/components/card/MyBookmarkCard.tsx @@ -1,4 +1,5 @@ import { Icon } from '@/icons'; +import chippiNoImage from '../../assets/chippi_no_image.svg'; import BaseCard from './BaseCard'; interface MyBookmarkCardProps { @@ -18,31 +19,37 @@ const MyBookmarkCard = ({ }: MyBookmarkCardProps) => { return ( -
- +
+ {imageUrl ? ( + + ) : ( + 이미지 없을 경우 logo + )}
-

- {content} -

- -
+

{title}

-
+

+ {content} +

+ {category && ( {category} )} -

- {date || '2025.08.09'} -

+

{date}

); diff --git a/packages/design-system/src/components/card/RemindCard.tsx b/packages/design-system/src/components/card/RemindCard.tsx index 6b6c7c38..603e3aab 100644 --- a/packages/design-system/src/components/card/RemindCard.tsx +++ b/packages/design-system/src/components/card/RemindCard.tsx @@ -1,4 +1,5 @@ import { Icon } from '@/icons'; +import chippiNoImage from '../../assets/chippi_no_image.svg'; import BaseCard from './BaseCard'; interface RemindCardProps { @@ -20,20 +21,26 @@ const RemindCard = ({
- - {timeRemaining || '4시간 30분'} - + {timeRemaining || '-'} 이후에 사라져요
-
- +
+ {imageUrl ? ( + + ) : ( + 이미지 없을 경우 logo + )}
-
+

{title}

-
From 4a059f04c36608c101db8e7f8744fb97b2fd49fc Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 26 Aug 2025 15:18:31 +0900 Subject: [PATCH 11/13] =?UTF-8?q?feat:=20margin=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EB=B0=8F=20story=20description=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../design-system/src/components/card/Card.stories.tsx | 7 +++++++ .../design-system/src/components/card/MyBookmarkCard.tsx | 2 +- packages/design-system/src/components/card/RemindCard.tsx | 8 ++++---- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/design-system/src/components/card/Card.stories.tsx b/packages/design-system/src/components/card/Card.stories.tsx index 9198c87d..f6668132 100644 --- a/packages/design-system/src/components/card/Card.stories.tsx +++ b/packages/design-system/src/components/card/Card.stories.tsx @@ -7,6 +7,13 @@ const meta: Meta = { tags: ['autodocs'], parameters: { layout: 'centered', + docs: { + description: { + component: + '**Card** 컴포넌트는 리마인드 카드와 북마크 카드 두 가지 유형을 지원합니다.
' + + '**`remind`**, **`bookmark`** 중 type을 선택하여 사용할 수 있으며 이에 따라 다른 인터페이스를 제공합니다..', + }, + }, }, argTypes: { type: { diff --git a/packages/design-system/src/components/card/MyBookmarkCard.tsx b/packages/design-system/src/components/card/MyBookmarkCard.tsx index 75280f08..bf887259 100644 --- a/packages/design-system/src/components/card/MyBookmarkCard.tsx +++ b/packages/design-system/src/components/card/MyBookmarkCard.tsx @@ -39,7 +39,7 @@ const MyBookmarkCard = ({
-

+

{content}

diff --git a/packages/design-system/src/components/card/RemindCard.tsx b/packages/design-system/src/components/card/RemindCard.tsx index 603e3aab..9246b311 100644 --- a/packages/design-system/src/components/card/RemindCard.tsx +++ b/packages/design-system/src/components/card/RemindCard.tsx @@ -21,7 +21,9 @@ const RemindCard = ({
- {timeRemaining || '-'} + + {timeRemaining || '-'} + 이후에 사라져요
@@ -44,11 +46,9 @@ const RemindCard = ({
- -

+

{content}

- {category} From 97457424dcccf98dc5ac0881c1c5a5699a6e0ca2 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Wed, 27 Aug 2025 02:20:36 +0900 Subject: [PATCH 12/13] =?UTF-8?q?refactor:=20=EB=8D=94=EB=B3=B4=EA=B8=B0?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20aria-label=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/card/MyBookmarkCard.tsx | 11 ++++++++--- .../design-system/src/components/card/RemindCard.tsx | 10 ++++++++-- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/design-system/src/components/card/MyBookmarkCard.tsx b/packages/design-system/src/components/card/MyBookmarkCard.tsx index bf887259..d7a9eadf 100644 --- a/packages/design-system/src/components/card/MyBookmarkCard.tsx +++ b/packages/design-system/src/components/card/MyBookmarkCard.tsx @@ -5,7 +5,7 @@ import BaseCard from './BaseCard'; interface MyBookmarkCardProps { title: string; content?: string; - category: string; + category?: string; imageUrl?: string; date?: string; } @@ -19,7 +19,7 @@ const MyBookmarkCard = ({ }: MyBookmarkCardProps) => { return ( -
+
{imageUrl ? ( ) : ( @@ -34,7 +34,11 @@ const MyBookmarkCard = ({

{title}

-
@@ -43,6 +47,7 @@ const MyBookmarkCard = ({ {content}

+ {/* TODO: 카테고리 컴포넌트로 교체 */} {category && ( {category} diff --git a/packages/design-system/src/components/card/RemindCard.tsx b/packages/design-system/src/components/card/RemindCard.tsx index 9246b311..55a9fce9 100644 --- a/packages/design-system/src/components/card/RemindCard.tsx +++ b/packages/design-system/src/components/card/RemindCard.tsx @@ -27,7 +27,7 @@ const RemindCard = ({ 이후에 사라져요
-
+
{imageUrl ? ( ) : ( @@ -42,13 +42,19 @@ const RemindCard = ({

{title}

-

{content}

+ + {/* TODO: 카테고리 컴포넌트로 교체 */} {category} From dc158646c3f707a10429145042c3aaf9b07cb720 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Wed, 27 Aug 2025 02:27:35 +0900 Subject: [PATCH 13/13] =?UTF-8?q?refactor:=20card=202=EA=B0=9C=20type=20ne?= =?UTF-8?q?ver=EB=A1=9C=20=ED=99=95=EC=8B=A4=ED=95=9C=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=20=EB=B6=84=EA=B8=B0=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/card/Card.tsx | 59 ++++++++----------- .../src/components/card/MyBookmarkCard.tsx | 2 +- .../src/components/card/RemindCard.tsx | 4 +- 3 files changed, 27 insertions(+), 38 deletions(-) diff --git a/packages/design-system/src/components/card/Card.tsx b/packages/design-system/src/components/card/Card.tsx index 06cf4c87..d5e4f30b 100644 --- a/packages/design-system/src/components/card/Card.tsx +++ b/packages/design-system/src/components/card/Card.tsx @@ -1,46 +1,35 @@ import MyBookmarkCard from './MyBookmarkCard'; import RemindCard from './RemindCard'; -interface CardProps { - type: 'remind' | 'bookmark'; +type BaseProps = { title: string; content?: string; - category: string; + category?: string; imageUrl?: string; - timeRemaining?: string; - date?: string; -} - -const Card = ({ - type, - title, - content, - category, - imageUrl, - timeRemaining, - date, -}: CardProps) => { +}; + +type RemindProps = BaseProps & { + type: 'remind'; + timeRemaining: string; + date?: never; +}; + +type BookmarkProps = BaseProps & { + type: 'bookmark'; + date: string; + timeRemaining?: never; +}; + +export type CardProps = RemindProps | BookmarkProps; + +const Card = (props: CardProps) => { + const { type } = props; + return ( <> - {type === 'remind' && ( - - )} - - {type === 'bookmark' && ( - - )} + {type === 'remind' && } + + {type === 'bookmark' && } ); }; diff --git a/packages/design-system/src/components/card/MyBookmarkCard.tsx b/packages/design-system/src/components/card/MyBookmarkCard.tsx index d7a9eadf..4d2a641c 100644 --- a/packages/design-system/src/components/card/MyBookmarkCard.tsx +++ b/packages/design-system/src/components/card/MyBookmarkCard.tsx @@ -7,7 +7,7 @@ interface MyBookmarkCardProps { content?: string; category?: string; imageUrl?: string; - date?: string; + date: string; } const MyBookmarkCard = ({ diff --git a/packages/design-system/src/components/card/RemindCard.tsx b/packages/design-system/src/components/card/RemindCard.tsx index 55a9fce9..8b2e8125 100644 --- a/packages/design-system/src/components/card/RemindCard.tsx +++ b/packages/design-system/src/components/card/RemindCard.tsx @@ -5,9 +5,9 @@ import BaseCard from './BaseCard'; interface RemindCardProps { title: string; content?: string; - category: string; + category?: string; imageUrl?: string; - timeRemaining?: string; + timeRemaining: string; } const RemindCard = ({