From 1e3141fdefc9b785fa6f2afaf49158814cfa448c Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 18:23:08 +0900 Subject: [PATCH 01/11] =?UTF-8?q?fix:=20StarChip=20=EB=B9=84=ED=99=9C?= =?UTF-8?q?=EC=84=B1=20=EB=B3=84=20=EC=83=89=EC=83=81=EC=9D=84=20fill.alte?= =?UTF-8?q?rnative=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../character-management/ui/StarChip/StarChip.styles.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/features/character-management/ui/StarChip/StarChip.styles.ts b/src/features/character-management/ui/StarChip/StarChip.styles.ts index 2e507691..479dc7dd 100644 --- a/src/features/character-management/ui/StarChip/StarChip.styles.ts +++ b/src/features/character-management/ui/StarChip/StarChip.styles.ts @@ -18,6 +18,5 @@ export const Star = styled(SvgStar)<{ $active: boolean }>` color: ${({ $active }) => $active ? getToken('fg.accent-yellow.normal') - : // HACK: 비활성 별 색상(구 gray[100]=#d2d4d5)에 대응하는 semantic 토큰이 없어 근사값 사용 - getToken('fg.inverse.neutral')}; + : getToken('fill.alternative')}; `; From ca3b07f1262b3c30e85e14ff2489e5bb6629b764 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 19:28:48 +0900 Subject: [PATCH 02/11] =?UTF-8?q?feat:=20NameChip=20onClick=20=EC=A7=80?= =?UTF-8?q?=EC=9B=90,=20ExpenseAmountInput=20=ED=80=B5=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=EC=9D=84=20NameChip=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/ExpenseAmountInput/ExpenseAmountInput.tsx | 16 ++++++---------- .../design-system/ui/NameChip/NameChip.styles.ts | 7 +++++++ .../design-system/ui/NameChip/NameChip.tsx | 12 ++++++++++-- 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/features/expense-management/ui/ExpenseAmountInput/ExpenseAmountInput.tsx b/src/features/expense-management/ui/ExpenseAmountInput/ExpenseAmountInput.tsx index 82ffa042..8c836450 100644 --- a/src/features/expense-management/ui/ExpenseAmountInput/ExpenseAmountInput.tsx +++ b/src/features/expense-management/ui/ExpenseAmountInput/ExpenseAmountInput.tsx @@ -2,10 +2,10 @@ import { useState } from 'react'; import { ActionArea, BottomSheet, - Button, Input, Keypad, KeyValue, + NameChip, PriceDisplay, } from '@/shared/design-system/ui'; import { @@ -86,18 +86,14 @@ function ExpenseAmountInput({ {QUICK_ADD_BUTTONS.map(({ label, amount }) => ( - + /> ))} - + ` gap: ${getToken('gap.1')}; border-radius: ${getToken('radius.full')}; white-space: nowrap; + ${({ $clickable }) => + $clickable && + css` + border: none; + cursor: pointer; + `} ${({ $size }) => sizeStyles[$size]} ${({ $variant }) => variantStyles[$variant]} `; diff --git a/src/shared/design-system/ui/NameChip/NameChip.tsx b/src/shared/design-system/ui/NameChip/NameChip.tsx index 43d46248..bfa4c795 100644 --- a/src/shared/design-system/ui/NameChip/NameChip.tsx +++ b/src/shared/design-system/ui/NameChip/NameChip.tsx @@ -1,3 +1,4 @@ +import type { MouseEventHandler } from 'react'; import * as S from './NameChip.styles'; // HACK : ExpenseTimelineContent 에서 사용하는 NameChip이 정의되어 있지 않아서 임의로 black variant를 추가함. @@ -8,13 +9,20 @@ interface NameChipProps { label: string; variant?: NameChipVariant; size?: NameChipSize; + onClick?: MouseEventHandler; } function NameChip(props: NameChipProps) { - const { label, variant = 'selected', size = 'm' } = props; + const { label, variant = 'selected', size = 'm', onClick } = props; return ( - + {label} ); From 316c85dc9bed89452212be957c0bfdd777d1449c Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 19:35:03 +0900 Subject: [PATCH 03/11] =?UTF-8?q?refactor:=20NameChip=EC=9D=84=20Chip?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=A6=AC=EB=84=A4=EC=9D=B4=EB=B0=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ExpenseAmountInput/ExpenseAmountInput.tsx | 6 ++-- .../SettlementSummary/SettlementSummary.tsx | 4 +-- .../ui/ExpenseTimelineContent/index.tsx | 4 +-- .../Chip.stories.tsx} | 23 ++++++------- .../Chip.styles.ts} | 4 +-- src/shared/design-system/ui/Chip/Chip.tsx | 32 +++++++++++++++++++ src/shared/design-system/ui/Chip/index.ts | 2 ++ .../design-system/ui/NameChip/NameChip.tsx | 32 ------------------- src/shared/design-system/ui/NameChip/index.ts | 2 -- src/shared/design-system/ui/index.ts | 3 +- 10 files changed, 54 insertions(+), 58 deletions(-) rename src/shared/design-system/ui/{NameChip/NameChip.stories.tsx => Chip/Chip.stories.tsx} (65%) rename src/shared/design-system/ui/{NameChip/NameChip.styles.ts => Chip/Chip.styles.ts} (95%) create mode 100644 src/shared/design-system/ui/Chip/Chip.tsx create mode 100644 src/shared/design-system/ui/Chip/index.ts delete mode 100644 src/shared/design-system/ui/NameChip/NameChip.tsx delete mode 100644 src/shared/design-system/ui/NameChip/index.ts diff --git a/src/features/expense-management/ui/ExpenseAmountInput/ExpenseAmountInput.tsx b/src/features/expense-management/ui/ExpenseAmountInput/ExpenseAmountInput.tsx index 8c836450..0aa6b5d5 100644 --- a/src/features/expense-management/ui/ExpenseAmountInput/ExpenseAmountInput.tsx +++ b/src/features/expense-management/ui/ExpenseAmountInput/ExpenseAmountInput.tsx @@ -5,7 +5,7 @@ import { Input, Keypad, KeyValue, - NameChip, + Chip, PriceDisplay, } from '@/shared/design-system/ui'; import { @@ -86,14 +86,14 @@ function ExpenseAmountInput({ {QUICK_ADD_BUTTONS.map(({ label, amount }) => ( - handleQuickAdd(amount)} /> ))} - + {memberExpenses.map((member) => ( - {expense.groupMembers.map((name) => ( - + ))} diff --git a/src/shared/design-system/ui/NameChip/NameChip.stories.tsx b/src/shared/design-system/ui/Chip/Chip.stories.tsx similarity index 65% rename from src/shared/design-system/ui/NameChip/NameChip.stories.tsx rename to src/shared/design-system/ui/Chip/Chip.stories.tsx index 4bfba40d..da888c3e 100644 --- a/src/shared/design-system/ui/NameChip/NameChip.stories.tsx +++ b/src/shared/design-system/ui/Chip/Chip.stories.tsx @@ -1,19 +1,19 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { NameChip } from './NameChip'; -import type { NameChipVariant, NameChipSize } from './NameChip'; +import { Chip } from './Chip'; +import type { ChipVariant, ChipSize } from './Chip'; -const VARIANTS: NameChipVariant[] = [ +const VARIANTS: ChipVariant[] = [ 'selected', 'unselected', 'disabled', 'red', 'black', ]; -const SIZES: NameChipSize[] = ['m', 's']; +const SIZES: ChipSize[] = ['m', 's']; -const meta: Meta = { - title: 'Components/NameChip', - component: NameChip, +const meta: Meta = { + title: 'Components/Chip', + component: Chip, tags: ['autodocs'], argTypes: { variant: { @@ -36,7 +36,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = {}; @@ -50,12 +50,7 @@ export const Showcase: Story = { > {size} {VARIANTS.map((variant) => ( - + ))} ))} diff --git a/src/shared/design-system/ui/NameChip/NameChip.styles.ts b/src/shared/design-system/ui/Chip/Chip.styles.ts similarity index 95% rename from src/shared/design-system/ui/NameChip/NameChip.styles.ts rename to src/shared/design-system/ui/Chip/Chip.styles.ts index 36f12a13..48d87dc4 100644 --- a/src/shared/design-system/ui/NameChip/NameChip.styles.ts +++ b/src/shared/design-system/ui/Chip/Chip.styles.ts @@ -5,7 +5,7 @@ import { applyTypography, } from '@/shared/design-system'; -interface StyledNameChipProps { +interface StyledChipProps { $variant: 'selected' | 'unselected' | 'disabled' | 'red' | 'black'; $size: 'm' | 's'; $clickable?: boolean; @@ -53,7 +53,7 @@ const variantStyles = { `, }; -export const Chip = styled.div` +export const ChipRoot = styled.div` display: inline-flex; align-items: center; justify-content: center; diff --git a/src/shared/design-system/ui/Chip/Chip.tsx b/src/shared/design-system/ui/Chip/Chip.tsx new file mode 100644 index 00000000..180b10de --- /dev/null +++ b/src/shared/design-system/ui/Chip/Chip.tsx @@ -0,0 +1,32 @@ +import type { MouseEventHandler } from 'react'; +import * as S from './Chip.styles'; + +// HACK : ExpenseTimelineContent 에서 사용하는 Chip이 정의되어 있지 않아서 임의로 black variant를 추가함. +type ChipVariant = 'selected' | 'unselected' | 'disabled' | 'red' | 'black'; +type ChipSize = 'm' | 's'; + +interface ChipProps { + label: string; + variant?: ChipVariant; + size?: ChipSize; + onClick?: MouseEventHandler; +} + +function Chip(props: ChipProps) { + const { label, variant = 'selected', size = 'm', onClick } = props; + + return ( + + {label} + + ); +} + +export { Chip }; +export type { ChipProps, ChipVariant, ChipSize }; diff --git a/src/shared/design-system/ui/Chip/index.ts b/src/shared/design-system/ui/Chip/index.ts new file mode 100644 index 00000000..f8c964b4 --- /dev/null +++ b/src/shared/design-system/ui/Chip/index.ts @@ -0,0 +1,2 @@ +export { Chip } from './Chip'; +export type { ChipProps, ChipVariant, ChipSize } from './Chip'; diff --git a/src/shared/design-system/ui/NameChip/NameChip.tsx b/src/shared/design-system/ui/NameChip/NameChip.tsx deleted file mode 100644 index bfa4c795..00000000 --- a/src/shared/design-system/ui/NameChip/NameChip.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { MouseEventHandler } from 'react'; -import * as S from './NameChip.styles'; - -// HACK : ExpenseTimelineContent 에서 사용하는 NameChip이 정의되어 있지 않아서 임의로 black variant를 추가함. -type NameChipVariant = 'selected' | 'unselected' | 'disabled' | 'red' | 'black'; -type NameChipSize = 'm' | 's'; - -interface NameChipProps { - label: string; - variant?: NameChipVariant; - size?: NameChipSize; - onClick?: MouseEventHandler; -} - -function NameChip(props: NameChipProps) { - const { label, variant = 'selected', size = 'm', onClick } = props; - - return ( - - {label} - - ); -} - -export { NameChip }; -export type { NameChipProps, NameChipVariant, NameChipSize }; diff --git a/src/shared/design-system/ui/NameChip/index.ts b/src/shared/design-system/ui/NameChip/index.ts deleted file mode 100644 index 16086b1f..00000000 --- a/src/shared/design-system/ui/NameChip/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { NameChip } from './NameChip'; -export type { NameChipProps, NameChipVariant, NameChipSize } from './NameChip'; diff --git a/src/shared/design-system/ui/index.ts b/src/shared/design-system/ui/index.ts index 5cf32d89..017348c2 100644 --- a/src/shared/design-system/ui/index.ts +++ b/src/shared/design-system/ui/index.ts @@ -19,7 +19,8 @@ export { Keypad } from './Keypad'; export type { KeyValue } from './Keypad'; export { Modal } from './Modal'; export type { ModalProps } from './Modal'; -export { NameChip } from './NameChip'; +export { Chip } from './Chip'; +export type { ChipProps, ChipVariant, ChipSize } from './Chip'; export { PaidChip } from './PaidChip'; export type { PaidChipStatus } from './PaidChip'; export type { HeaderProps } from './Header'; From 2d77e2c95eae794dc8c402c105b3a4aed6f43fd1 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 19:37:59 +0900 Subject: [PATCH 04/11] =?UTF-8?q?storybook:=20Chip=20AsButton=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../design-system/ui/Chip/Chip.stories.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/shared/design-system/ui/Chip/Chip.stories.tsx b/src/shared/design-system/ui/Chip/Chip.stories.tsx index da888c3e..8406da67 100644 --- a/src/shared/design-system/ui/Chip/Chip.stories.tsx +++ b/src/shared/design-system/ui/Chip/Chip.stories.tsx @@ -57,3 +57,27 @@ export const Showcase: Story = { ), }; + +export const AsButton: Story = { + render: () => ( +
+ {SIZES.map((size) => ( +
+ {size} + {VARIANTS.map((variant) => ( + alert(`${variant} 클릭`)} + /> + ))} +
+ ))} +
+ ), +}; From 109bc0ea320d272b8ec29fb5690c31c59dddedb5 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 19:54:57 +0900 Subject: [PATCH 05/11] =?UTF-8?q?fix:=20=EC=9E=A0=EA=B8=B4=20=EC=BA=90?= =?UTF-8?q?=EB=A6=AD=ED=84=B0=20=EC=B9=B4=EB=93=9C=20border=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20=EC=A0=81=EC=9A=A9,=20opacity,=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=83=89=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../character-management/ui/CharacterItem/index.styles.ts | 3 ++- src/features/character-management/ui/CharacterItem/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/features/character-management/ui/CharacterItem/index.styles.ts b/src/features/character-management/ui/CharacterItem/index.styles.ts index 42f1096c..d35e000a 100644 --- a/src/features/character-management/ui/CharacterItem/index.styles.ts +++ b/src/features/character-management/ui/CharacterItem/index.styles.ts @@ -28,7 +28,8 @@ export const LockedCharacterCard = styled(CardContainerBase)` padding-bottom: 2.25rem; /* 의도적으로 토큰으로 정의되지 않은 값 사용 */ padding-left: ${getToken('padding.5')}; padding-right: ${getToken('padding.5')}; - border: 1px dashed #d2d4d5; /* HACK: 토큰에 정의되어 있지 않아 임시로 하드코딩함 */ + border: 1px dashed ${getToken('border.normal')}; + opacity: 0.5; `; export const CharacterImage = styled.img` diff --git a/src/features/character-management/ui/CharacterItem/index.tsx b/src/features/character-management/ui/CharacterItem/index.tsx index 5257a6bb..341951ea 100644 --- a/src/features/character-management/ui/CharacterItem/index.tsx +++ b/src/features/character-management/ui/CharacterItem/index.tsx @@ -6,8 +6,8 @@ import * as S from './index.styles'; function LockedCharacterCard() { return ( - {/* HACK : 정의되지 않은 토큰이라 #D2D4D5를 그대로 사용 */} - + {/* HACK: gray.90(#c7c9cb)에 대응하는 아이콘용 semantic 토큰 없음 */} + ); } From 4c1e01b20b48ba950a15bf1ced7e78192042d258 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 19:59:31 +0900 Subject: [PATCH 06/11] =?UTF-8?q?fix:=20ExpenseMemberItem=20=EB=B9=84?= =?UTF-8?q?=ED=99=9C=EC=84=B1=20=EC=83=89=EC=83=81=EC=9D=84=20fg.normal-di?= =?UTF-8?q?sable=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/expenseDetail/ui/ExpenseMemberItem/index.style.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/expenseDetail/ui/ExpenseMemberItem/index.style.ts b/src/pages/expenseDetail/ui/ExpenseMemberItem/index.style.ts index e52bd95a..1a37fb51 100644 --- a/src/pages/expenseDetail/ui/ExpenseMemberItem/index.style.ts +++ b/src/pages/expenseDetail/ui/ExpenseMemberItem/index.style.ts @@ -146,11 +146,7 @@ export const TextButtonWrapper = styled.button<{ $isActive: boolean }>` align-items: center; cursor: pointer; color: ${({ $isActive }) => - $isActive - ? getToken('fg.primary.normal') - : getToken( - 'fill.normal-disable' - )}; /* HACK: #ACAFB2로 정의된 토큰이 없어 의미상 유사한 토큰을 임의로 사용함 */ + $isActive ? getToken('fg.primary.normal') : getToken('fg.normal-disable')}; > svg { display: ${({ $isActive }) => ($isActive ? 'block' : 'none')}; } From d30f19ca1cb696f673f6bf47e9e90eda2643626a Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 20:05:05 +0900 Subject: [PATCH 07/11] =?UTF-8?q?refactor:=20Chip=20black=20variant=20HACK?= =?UTF-8?q?=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/design-system/ui/Chip/Chip.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/shared/design-system/ui/Chip/Chip.tsx b/src/shared/design-system/ui/Chip/Chip.tsx index 180b10de..ccda80c0 100644 --- a/src/shared/design-system/ui/Chip/Chip.tsx +++ b/src/shared/design-system/ui/Chip/Chip.tsx @@ -1,7 +1,6 @@ import type { MouseEventHandler } from 'react'; import * as S from './Chip.styles'; -// HACK : ExpenseTimelineContent 에서 사용하는 Chip이 정의되어 있지 않아서 임의로 black variant를 추가함. type ChipVariant = 'selected' | 'unselected' | 'disabled' | 'red' | 'black'; type ChipSize = 'm' | 's'; From cc9aa9496e593258ae20b1aadd75d7d2dc91fbbf Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 20:39:47 +0900 Subject: [PATCH 08/11] =?UTF-8?q?feat:=20Input=20helpText=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20error=20=EC=83=81=ED=83=9C=20danger=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../design-system/ui/Input/Input.stories.tsx | 20 ++++++++++++ .../design-system/ui/Input/Input.styles.ts | 32 ++++++++++++++++++- src/shared/design-system/ui/Input/Input.tsx | 14 +++++++- 3 files changed, 64 insertions(+), 2 deletions(-) diff --git a/src/shared/design-system/ui/Input/Input.stories.tsx b/src/shared/design-system/ui/Input/Input.stories.tsx index 1c28cfed..ed3cc2fb 100644 --- a/src/shared/design-system/ui/Input/Input.stories.tsx +++ b/src/shared/design-system/ui/Input/Input.stories.tsx @@ -15,6 +15,7 @@ const meta: Meta = { label: { control: 'text' }, required: { control: 'boolean' }, placeholder: { control: 'text' }, + helpText: { control: 'text' }, value: { control: 'text' }, }, args: { @@ -56,6 +57,25 @@ export const Showcase: Story = { ), }; +export const WithHelpText: Story = { + render: () => ( +
+ {STATES.map((state) => ( + + ))} +
+ ), +}; + export const PriceVariant: Story = { render: () => (
` + ${applyTypography('typography.caption.xsmall')} + font-weight: ${getTypographyToken('typography.caption.small-medium') + .fontWeight}; + color: ${({ $state }) => + $state === 'error' ? getToken('fg.accent-red.normal') : '#444950'}; +`; diff --git a/src/shared/design-system/ui/Input/Input.tsx b/src/shared/design-system/ui/Input/Input.tsx index 225e201d..466112ad 100644 --- a/src/shared/design-system/ui/Input/Input.tsx +++ b/src/shared/design-system/ui/Input/Input.tsx @@ -1,5 +1,6 @@ import { useId, forwardRef } from 'react'; import type { ReactNode, ChangeEventHandler, InputHTMLAttributes } from 'react'; +import SvgSystemDanger from '@/shared/assets/svgs/icon/SystemDanger'; import * as S from './Input.styles'; type InputState = 'default' | 'error' | 'disabled'; @@ -11,6 +12,7 @@ interface InputProps state?: InputState; variant?: InputVariant; trailingIcon?: ReactNode; + helpText?: string; value?: string; onChange?: ChangeEventHandler; } @@ -24,6 +26,7 @@ const Input = forwardRef(function Input( state = 'default', variant = 'default', trailingIcon, + helpText, value, onChange, onClick, @@ -67,7 +70,16 @@ const Input = forwardRef(function Input( )} - {/* TODO: 헬프텍스트 - 디자인 확정 후 추가 예정 */} + {helpText && variant === 'default' && ( + + {state === 'error' && ( + + + + )} + {helpText} + + )} ); }); From d0185ef15d745d3e3555a8bc3905fab487ecc739 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 20:58:46 +0900 Subject: [PATCH 09/11] =?UTF-8?q?design:=20=EB=B2=84=ED=8A=BC=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit radius 변경 --- src/shared/design-system/ui/Button/Button.styles.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/shared/design-system/ui/Button/Button.styles.ts b/src/shared/design-system/ui/Button/Button.styles.ts index 174d999c..39e3bd90 100644 --- a/src/shared/design-system/ui/Button/Button.styles.ts +++ b/src/shared/design-system/ui/Button/Button.styles.ts @@ -10,15 +10,18 @@ const sizeStyles = { medium: css` padding: ${getToken('padding.4')} ${getToken('padding.5')}; ${applyTypography('typography.body.medium-semibold')} + border-radius: ${getToken('radius.lg')}; `, small: css` padding: ${getToken('padding.3')} ${getToken('padding.5')}; ${applyTypography('typography.body.small-semibold')} + border-radius: ${getToken('radius.lg')}; `, xsmall: css` height: 1.75rem; padding: 0 ${getToken('padding.4')}; ${applyTypography('typography.caption.small-medium')} + border-radius: ${getToken('radius.md')}; `, }; @@ -64,7 +67,6 @@ export const Button = styled.button` justify-content: center; align-items: center; gap: ${getToken('gap.2')}; - border-radius: ${getToken('radius.full')}; border: none; cursor: pointer; white-space: nowrap; From f56b497f9f964c6b7acf605f503fa578c02d659c Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 20:59:28 +0900 Subject: [PATCH 10/11] =?UTF-8?q?docs:=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/Button/Button.stories.tsx | 50 +++++-------------- 1 file changed, 12 insertions(+), 38 deletions(-) diff --git a/src/shared/design-system/ui/Button/Button.stories.tsx b/src/shared/design-system/ui/Button/Button.stories.tsx index d37bfd30..1e0fdeda 100644 --- a/src/shared/design-system/ui/Button/Button.stories.tsx +++ b/src/shared/design-system/ui/Button/Button.stories.tsx @@ -43,35 +43,28 @@ type Story = StoryObj; export const Default: Story = {}; +const gridStyle = { + display: 'grid', + gridTemplateColumns: '3rem repeat(6, auto)', + gap: 8, + alignItems: 'center', + justifyItems: 'start', +} as const; + export const Showcase: Story = { render: () => (
-
+
{VARIANTS.map((variant) => ( - + {variant} ))} - disabled + disabled
{SIZES.map((size) => ( -
+
{size} {VARIANTS.map((variant) => (
), }; - -export const Disabled: Story = { - render: () => ( -
- {VARIANTS.map((variant) => ( - - ))} -
- ), -}; From 09b0c5af9de0d117e07b4f7189c6548272ed4fc6 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Sun, 7 Jun 2026 21:23:37 +0900 Subject: [PATCH 11/11] =?UTF-8?q?chore:=20main=20=EB=B8=8C=EB=9E=9C?= =?UTF-8?q?=EC=B9=98=20push=20=EC=8B=9C=20Storybook=20=EC=9E=90=EB=8F=99?= =?UTF-8?q?=20=EB=B0=B0=ED=8F=AC=20=ED=8A=B8=EB=A6=AC=EA=B1=B0=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 Co-Authored-By: Claude Sonnet 4.6 --- .github/workflows/publish-storybook.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/publish-storybook.yml b/.github/workflows/publish-storybook.yml index 0cd1b212..0257e326 100644 --- a/.github/workflows/publish-storybook.yml +++ b/.github/workflows/publish-storybook.yml @@ -2,6 +2,9 @@ name: Publish Storybook # https://www.chromatic.com/docs/github-actions/ on: + push: + branches: + - main workflow_dispatch: inputs: pr_number: