From 025a6727ddbb7f0ec526abb8f4f035b84fa43677 Mon Sep 17 00:00:00 2001 From: nijuy Date: Mon, 18 Sep 2023 12:46:04 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat(component):=20Badge.type.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 * 컴포넌트 제작을 위한 type.ts 추가 --- src/components/Badge/Badge.type.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/components/Badge/Badge.type.ts diff --git a/src/components/Badge/Badge.type.ts b/src/components/Badge/Badge.type.ts new file mode 100644 index 0000000..22291a5 --- /dev/null +++ b/src/components/Badge/Badge.type.ts @@ -0,0 +1,18 @@ +export enum BadgeColor { + Mono = 'mono', + Lime = 'lime', + Green = 'green', + Emerald = 'emerald', + Aqua = 'aqua', + Blue = 'blue', + Indigo = 'indigo', + Violet = 'violet', + Purple = 'purple', + Pink = 'pink', +} + +export interface BadgeProps { + color?: BadgeColor; + children?: string; + leftIcon?: React.ReactNode; +} From fa39f9ab48a663117ce7e18ef1a503b4601778a4 Mon Sep 17 00:00:00 2001 From: nijuy Date: Mon, 18 Sep 2023 12:48:17 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat(component):=20Badge.style.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 * 컴포넌트 제작을 위한 styled.div 생성 --- src/components/Badge/Badge.style.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/Badge/Badge.style.ts diff --git a/src/components/Badge/Badge.style.ts b/src/components/Badge/Badge.style.ts new file mode 100644 index 0000000..cc55375 --- /dev/null +++ b/src/components/Badge/Badge.style.ts @@ -0,0 +1,19 @@ +import { styled } from 'styled-components'; + +import { SemanticColor } from '../..'; + +interface StyledBadgeProps { + backgroundColor: SemanticColor; +} +export const StyledBadge = styled.div` + display: flex; + gap: 4px; + align-items: center; + width: fit-content; + height: 24px; + padding: 0 var(--padding); + border-radius: 2px; + background-color: ${({ theme, backgroundColor }) => theme.color[backgroundColor]}; + + ${({ theme }) => theme.typo.caption1}; +`; From a5986cf653a32ce78dfc9d3464bef223008cdd2f Mon Sep 17 00:00:00 2001 From: nijuy Date: Mon, 18 Sep 2023 12:49:24 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat(component):=20Badge=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 컴포넌트 추가 --- src/components/Badge/Badge.tsx | 42 ++++++++++++++++++++++++++++++++++ src/components/Badge/index.ts | 2 ++ 2 files changed, 44 insertions(+) create mode 100644 src/components/Badge/Badge.tsx create mode 100644 src/components/Badge/index.ts diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx new file mode 100644 index 0000000..74591ad --- /dev/null +++ b/src/components/Badge/Badge.tsx @@ -0,0 +1,42 @@ +import { IconContext, SemanticColor } from '../..'; + +import { StyledBadge } from './Badge.style'; +import { BadgeProps, BadgeColor } from './Badge.type'; + +const backgroundColorMap: { [key in BadgeColor]: SemanticColor } = { + [BadgeColor.Mono]: 'monoItemBG', + [BadgeColor.Lime]: 'limeItemBG', + [BadgeColor.Green]: 'greenItemBG', + [BadgeColor.Emerald]: 'emeraldItemBG', + [BadgeColor.Aqua]: 'aquaItemBG', + [BadgeColor.Blue]: 'blueItemBG', + [BadgeColor.Indigo]: 'indigoItemBG', + [BadgeColor.Violet]: 'violetItemBG', + [BadgeColor.Purple]: 'purpleItemBG', + [BadgeColor.Pink]: 'pinkItemBG', +} as const; + +function Badge({ color = BadgeColor.Mono, children = 'Badge', leftIcon }: BadgeProps) { + return ( + + {leftIcon && ( + + {leftIcon} + + )} + {children} + + ); +} + +export { Badge }; diff --git a/src/components/Badge/index.ts b/src/components/Badge/index.ts new file mode 100644 index 0000000..59d8ec6 --- /dev/null +++ b/src/components/Badge/index.ts @@ -0,0 +1,2 @@ +export { Badge } from './Badge'; +export type { BadgeProps } from './Badge.type'; From d246a3be1d62b5776f91b7ffbed9c7ebeb958767 Mon Sep 17 00:00:00 2001 From: nijuy Date: Mon, 18 Sep 2023 12:52:02 +0900 Subject: [PATCH 4/7] =?UTF-8?q?docs(component):=20Badge.stories.tsx=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 * 컴포넌트 테스트를 위한 스토리 2개 추가 --- src/components/Badge/Badge.stories.tsx | 34 ++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/components/Badge/Badge.stories.tsx diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx new file mode 100644 index 0000000..ff9cdf7 --- /dev/null +++ b/src/components/Badge/Badge.stories.tsx @@ -0,0 +1,34 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { IcGroundLine } from '@/style'; + +import { Badge } from './Badge'; + +const meta: Meta = { + title: 'Atoms/Badge', + component: Badge, + parameters: { + layout: 'centered', + }, +}; +export default meta; + +const BadgeStory = ({ ...badgeProps }) => { + return ; +}; + +type Story = StoryObj; +export const withIcon: Story = { + args: { + children: 'Badge', + leftIcon: , + }, + render: BadgeStory, +}; + +export const withoutIcon: Story = { + args: { + children: 'Badge', + }, + render: BadgeStory, +}; From 3b010a7532903ac92252ad876e8f5c507466c6cf Mon Sep 17 00:00:00 2001 From: nijuy Date: Wed, 27 Sep 2023 17:38:49 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20BadgeProps=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EC=9D=98=20children=20=EC=86=8D=EC=84=B1=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * BadgeProps 타입의 children 속성을 string에서 React.ReactNode 타입으로 변경했습니다. --- src/components/Badge/Badge.type.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Badge/Badge.type.ts b/src/components/Badge/Badge.type.ts index 22291a5..633bf22 100644 --- a/src/components/Badge/Badge.type.ts +++ b/src/components/Badge/Badge.type.ts @@ -13,6 +13,6 @@ export enum BadgeColor { export interface BadgeProps { color?: BadgeColor; - children?: string; + children?: React.ReactNode; leftIcon?: React.ReactNode; } From 42a58025263df17285ddcabe98cb5f8bed8ec711 Mon Sep 17 00:00:00 2001 From: nijuy Date: Sun, 1 Oct 2023 22:34:17 +0900 Subject: [PATCH 6/7] =?UTF-8?q?feat:=20SemanticBGColor=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * BadgeProps 타입의 color (배경색) 속성을 SemanticBGColor 타입으로 수정 --- src/components/Badge/Badge.tsx | 21 ++++----------------- src/components/Badge/Badge.type.ts | 15 ++------------- 2 files changed, 6 insertions(+), 30 deletions(-) diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 74591ad..4bf5dea 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -1,28 +1,15 @@ -import { IconContext, SemanticColor } from '../..'; +import { IconContext } from '../..'; import { StyledBadge } from './Badge.style'; -import { BadgeProps, BadgeColor } from './Badge.type'; +import { BadgeProps } from './Badge.type'; -const backgroundColorMap: { [key in BadgeColor]: SemanticColor } = { - [BadgeColor.Mono]: 'monoItemBG', - [BadgeColor.Lime]: 'limeItemBG', - [BadgeColor.Green]: 'greenItemBG', - [BadgeColor.Emerald]: 'emeraldItemBG', - [BadgeColor.Aqua]: 'aquaItemBG', - [BadgeColor.Blue]: 'blueItemBG', - [BadgeColor.Indigo]: 'indigoItemBG', - [BadgeColor.Violet]: 'violetItemBG', - [BadgeColor.Purple]: 'purpleItemBG', - [BadgeColor.Pink]: 'pinkItemBG', -} as const; - -function Badge({ color = BadgeColor.Mono, children = 'Badge', leftIcon }: BadgeProps) { +function Badge({ color = 'monoItemBG', children = 'Badge', leftIcon }: BadgeProps) { return ( {leftIcon && ( Date: Sun, 1 Oct 2023 22:56:03 +0900 Subject: [PATCH 7/7] =?UTF-8?q?style:=20path=20alias=20=EC=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 상대경로로 적혀있는 import문을 path alias에 맞게 수정 --- src/components/Badge/Badge.style.ts | 2 +- src/components/Badge/Badge.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Badge/Badge.style.ts b/src/components/Badge/Badge.style.ts index cc55375..7112d7f 100644 --- a/src/components/Badge/Badge.style.ts +++ b/src/components/Badge/Badge.style.ts @@ -1,6 +1,6 @@ import { styled } from 'styled-components'; -import { SemanticColor } from '../..'; +import { SemanticColor } from '@/style'; interface StyledBadgeProps { backgroundColor: SemanticColor; diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 4bf5dea..91a5846 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -1,4 +1,4 @@ -import { IconContext } from '../..'; +import { IconContext } from '@/style'; import { StyledBadge } from './Badge.style'; import { BadgeProps } from './Badge.type';