From 9cc6c040134490a167e97979e2c961788205e61f Mon Sep 17 00:00:00 2001 From: cloud0406 Date: Wed, 11 Dec 2024 10:55:45 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20chip=20?= =?UTF-8?q?=ED=98=95=ED=83=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/chip/Chip.stories.tsx | 6 +++--- src/components/chip/Chip.tsx | 14 ++++++++------ tailwind.config.ts | 3 +++ 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/chip/Chip.stories.tsx b/src/components/chip/Chip.stories.tsx index ee2229b9..bd2c1a53 100644 --- a/src/components/chip/Chip.stories.tsx +++ b/src/components/chip/Chip.stories.tsx @@ -29,7 +29,7 @@ export const RoundedLight: Story = { export const SquareOutlined: Story = { args: { text: '오프라인', - variant: 'square-light', + variant: 'square-outlined', }, }; @@ -54,13 +54,13 @@ export const AllStates: Story = {
- +
- +
diff --git a/src/components/chip/Chip.tsx b/src/components/chip/Chip.tsx index 9e3e3a03..af5810ef 100644 --- a/src/components/chip/Chip.tsx +++ b/src/components/chip/Chip.tsx @@ -1,11 +1,13 @@ import { twMerge } from 'tailwind-merge'; const CHIP_VARIANTS = { - 'rounded-filled': 'rounded-full bg-green-light-02 text-green-dark-01', - 'rounded-light': 'rounded-full bg-green-normal-01 text-gray-white', - 'square-light': - 'rounded border border-gray-normal-02 bg-gray-light-01 text-gray-dark-01', - 'square-filled': 'rounded bg-green-dark-01 text-gray-dark-01', + 'rounded-filled': + 'rounded-full bg-green-light-02 text-green-dark-01 font-semibold', + 'rounded-light': + 'rounded-full bg-green-normal-01 text-gray-white font-semibold', + 'square-outlined': + 'rounded-md border border-green-normal-01 bg-gray-white text-green-normal-01', + 'square-filled': 'rounded-md bg-green-normal-01 text-gray-white px-2', } as const; type ChipVariant = keyof typeof CHIP_VARIANTS; @@ -24,7 +26,7 @@ function Chip({ className, }: ChipProps) { const baseStyles = - 'inline-flex items-center justify-center px-2.5 py-1 text-sm font-semibold'; + 'inline-flex items-center justify-center px-2.5 py-1 text-sm font-medium'; const combinedClassName = twMerge( baseStyles, diff --git a/tailwind.config.ts b/tailwind.config.ts index ec01778d..c017cc5e 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -37,6 +37,9 @@ const config: Config = { 'dark-03': '#004c41', darker: '#003b33', }, + blue: { + 'normal-01': '#007AFF', + }, }, }, }, From 72c590c4e5c6e339db5f7ae2cb1bdfc5b3c43d68 Mon Sep 17 00:00:00 2001 From: cloud0406 Date: Wed, 11 Dec 2024 11:11:19 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8[Feat]=20=EB=AA=A8=EC=9E=84=20?= =?UTF-8?q?=EC=B9=A9=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chip/club-chip/ClubChip.stories.tsx | 52 +++++++++++++++++++ src/components/chip/club-chip/ClubChip.tsx | 48 +++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 src/components/chip/club-chip/ClubChip.stories.tsx create mode 100644 src/components/chip/club-chip/ClubChip.tsx diff --git a/src/components/chip/club-chip/ClubChip.stories.tsx b/src/components/chip/club-chip/ClubChip.stories.tsx new file mode 100644 index 00000000..9044d56e --- /dev/null +++ b/src/components/chip/club-chip/ClubChip.stories.tsx @@ -0,0 +1,52 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import ClubChip from './ClubChip'; + +const meta = { + title: 'Components/ClubChip', + component: ClubChip, + parameters: { + layout: 'centered', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Completed: Story = { + args: { + text: '참여완료', + variant: 'completed', + }, +}; + +export const Scheduled: Story = { + args: { + text: '참여예정', + variant: 'scheduled', + }, +}; + +export const Pending: Story = { + args: { + text: '개설대기', + variant: 'pending', + }, +}; + +export const Confirmed: Story = { + args: { + text: '개설확정', + variant: 'confirmed', + }, +}; + +export const AllStates: Story = { + render: () => ( +
+ + + + +
+ ), +}; diff --git a/src/components/chip/club-chip/ClubChip.tsx b/src/components/chip/club-chip/ClubChip.tsx new file mode 100644 index 00000000..a5ae5dd5 --- /dev/null +++ b/src/components/chip/club-chip/ClubChip.tsx @@ -0,0 +1,48 @@ +import Chip from '../Chip'; +import { twMerge } from 'tailwind-merge'; + +type ClubChipVariant = 'completed' | 'scheduled' | 'pending' | 'confirmed'; + +interface ClubChipProps { + text: string; + variant: ClubChipVariant; + className?: string; +} + +function ClubChip({ text, variant, className }: ClubChipProps) { + const getChipVariant = () => { + switch (variant) { + case 'completed': + return 'square-filled'; + case 'scheduled': + return 'square-filled'; + case 'pending': + return 'square-outlined'; + case 'confirmed': + return 'square-filled'; + } + }; + + const getCustomClassName = () => { + switch (variant) { + case 'completed': + return 'bg-gray-normal-01 text-gray-dark-02'; + case 'scheduled': + return 'bg-green-normal-01 text-gray-white'; + case 'pending': + return 'border-blue-normal-01 text-blue-normal-01'; + case 'confirmed': + return 'bg-blue-normal-01 text-gray-white'; + } + }; + + return ( + + ); +} + +export default ClubChip; From 054459120a935cb788e3ce1f5a82c617c0277bc1 Mon Sep 17 00:00:00 2001 From: cloud0406 Date: Wed, 11 Dec 2024 11:11:31 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=85[Test]=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/chip/Chip.test.tsx | 2 +- .../chip/club-chip/ClubChip.test.tsx | 31 +++++++++++++++++++ 2 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 src/components/chip/club-chip/ClubChip.test.tsx diff --git a/src/components/chip/Chip.test.tsx b/src/components/chip/Chip.test.tsx index cb924c0a..0611475d 100644 --- a/src/components/chip/Chip.test.tsx +++ b/src/components/chip/Chip.test.tsx @@ -2,7 +2,7 @@ import Chip from '@/components/chip/Chip'; import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; -describe('TextChip', () => { +describe('Chip', () => { it('텍스트가 올바르게 렌더링되어야 한다', () => { render(); const chip = screen.getByText('테스트'); diff --git a/src/components/chip/club-chip/ClubChip.test.tsx b/src/components/chip/club-chip/ClubChip.test.tsx new file mode 100644 index 00000000..89ea2b7f --- /dev/null +++ b/src/components/chip/club-chip/ClubChip.test.tsx @@ -0,0 +1,31 @@ +import ClubChip from './ClubChip'; +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; + +describe('ClubChip', () => { + it('텍스트가 올바르게 렌더링되어야 한다', () => { + render(); + expect(screen.getByText('참여완료')).toBeInTheDocument(); + }); + + it('모든 variant가 올바르게 렌더링되어야 한다', () => { + const { rerender } = render(); + expect(screen.getByText('테스트')).toBeInTheDocument(); + + rerender(); + expect(screen.getByText('테스트')).toBeInTheDocument(); + + rerender(); + expect(screen.getByText('테스트')).toBeInTheDocument(); + + rerender(); + expect(screen.getByText('테스트')).toBeInTheDocument(); + }); + + it('className prop으로 스타일을 오버라이드할 수 있어야 한다', () => { + render( + , + ); + expect(screen.getByText('테스트')).toHaveClass('custom-class'); + }); +}); From 86722ecdbce1330bc003ab9da24ca9addcd0372c Mon Sep 17 00:00:00 2001 From: cloud0406 Date: Wed, 11 Dec 2024 11:12:26 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=85[Test]=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EA=B2=BD=EB=A1=9C=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/chip/Chip.stories.tsx | 2 +- src/components/chip/club-chip/ClubChip.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/chip/Chip.stories.tsx b/src/components/chip/Chip.stories.tsx index bd2c1a53..65e6d013 100644 --- a/src/components/chip/Chip.stories.tsx +++ b/src/components/chip/Chip.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import Chip from './Chip'; const meta = { - title: 'Components/Chip', + title: 'Components/Chip/Base', component: Chip, parameters: { layout: 'centered', diff --git a/src/components/chip/club-chip/ClubChip.stories.tsx b/src/components/chip/club-chip/ClubChip.stories.tsx index 9044d56e..0ac701c6 100644 --- a/src/components/chip/club-chip/ClubChip.stories.tsx +++ b/src/components/chip/club-chip/ClubChip.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import ClubChip from './ClubChip'; const meta = { - title: 'Components/ClubChip', + title: 'Components/Chip/ClubChip', component: ClubChip, parameters: { layout: 'centered', From 242ca223de59bf01552b1c515d9b1a38dc2bc7f2 Mon Sep 17 00:00:00 2001 From: cloud0406 Date: Wed, 11 Dec 2024 11:15:09 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20text=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=EC=A7=80=EC=A0=95=EB=90=98=EB=8F=84=EB=A1=9D?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chip/club-chip/ClubChip.stories.tsx | 12 +++------ .../chip/club-chip/ClubChip.test.tsx | 26 +++++++++---------- src/components/chip/club-chip/ClubChip.tsx | 12 ++++++--- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/components/chip/club-chip/ClubChip.stories.tsx b/src/components/chip/club-chip/ClubChip.stories.tsx index 0ac701c6..74f41fcc 100644 --- a/src/components/chip/club-chip/ClubChip.stories.tsx +++ b/src/components/chip/club-chip/ClubChip.stories.tsx @@ -14,28 +14,24 @@ type Story = StoryObj; export const Completed: Story = { args: { - text: '참여완료', variant: 'completed', }, }; export const Scheduled: Story = { args: { - text: '참여예정', variant: 'scheduled', }, }; export const Pending: Story = { args: { - text: '개설대기', variant: 'pending', }, }; export const Confirmed: Story = { args: { - text: '개설확정', variant: 'confirmed', }, }; @@ -43,10 +39,10 @@ export const Confirmed: Story = { export const AllStates: Story = { render: () => (
- - - - + + + +
), }; diff --git a/src/components/chip/club-chip/ClubChip.test.tsx b/src/components/chip/club-chip/ClubChip.test.tsx index 89ea2b7f..f511a9a2 100644 --- a/src/components/chip/club-chip/ClubChip.test.tsx +++ b/src/components/chip/club-chip/ClubChip.test.tsx @@ -3,29 +3,27 @@ import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; describe('ClubChip', () => { - it('텍스트가 올바르게 렌더링되어야 한다', () => { - render(); + it('variant에 따라 올바른 텍스트가 렌더링되어야 한다', () => { + render(); expect(screen.getByText('참여완료')).toBeInTheDocument(); }); it('모든 variant가 올바르게 렌더링되어야 한다', () => { - const { rerender } = render(); - expect(screen.getByText('테스트')).toBeInTheDocument(); + const { rerender } = render(); + expect(screen.getByText('참여완료')).toBeInTheDocument(); - rerender(); - expect(screen.getByText('테스트')).toBeInTheDocument(); + rerender(); + expect(screen.getByText('참여예정')).toBeInTheDocument(); - rerender(); - expect(screen.getByText('테스트')).toBeInTheDocument(); + rerender(); + expect(screen.getByText('개설대기')).toBeInTheDocument(); - rerender(); - expect(screen.getByText('테스트')).toBeInTheDocument(); + rerender(); + expect(screen.getByText('개설확정')).toBeInTheDocument(); }); it('className prop으로 스타일을 오버라이드할 수 있어야 한다', () => { - render( - , - ); - expect(screen.getByText('테스트')).toHaveClass('custom-class'); + render(); + expect(screen.getByText('참여완료')).toHaveClass('custom-class'); }); }); diff --git a/src/components/chip/club-chip/ClubChip.tsx b/src/components/chip/club-chip/ClubChip.tsx index a5ae5dd5..500baa9e 100644 --- a/src/components/chip/club-chip/ClubChip.tsx +++ b/src/components/chip/club-chip/ClubChip.tsx @@ -3,13 +3,19 @@ import { twMerge } from 'tailwind-merge'; type ClubChipVariant = 'completed' | 'scheduled' | 'pending' | 'confirmed'; +const CLUB_CHIP_TEXT = { + completed: '참여완료', + scheduled: '참여예정', + pending: '개설대기', + confirmed: '개설확정', +} as const; + interface ClubChipProps { - text: string; variant: ClubChipVariant; className?: string; } -function ClubChip({ text, variant, className }: ClubChipProps) { +function ClubChip({ variant, className }: ClubChipProps) { const getChipVariant = () => { switch (variant) { case 'completed': @@ -38,7 +44,7 @@ function ClubChip({ text, variant, className }: ClubChipProps) { return (