From c19da706a54fcfa69e38c3f9446c066915474a83 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 1 Aug 2024 00:37:10 +0000 Subject: [PATCH 1/4] Create draft PR for #229 From eaa46ab4d0768cf293ab599df14c05627a2f93c8 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Thu, 1 Aug 2024 11:33:37 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20ToggleSwitch=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ToggleSwitch/ToggleSwitch.stories.tsx | 82 +++++++++++++++++++ .../components/common/ToggleSwitch/index.tsx | 20 +++++ .../components/common/ToggleSwitch/style.ts | 60 ++++++++++++++ 3 files changed, 162 insertions(+) create mode 100644 frontend/src/components/common/ToggleSwitch/ToggleSwitch.stories.tsx create mode 100644 frontend/src/components/common/ToggleSwitch/index.tsx create mode 100644 frontend/src/components/common/ToggleSwitch/style.ts diff --git a/frontend/src/components/common/ToggleSwitch/ToggleSwitch.stories.tsx b/frontend/src/components/common/ToggleSwitch/ToggleSwitch.stories.tsx new file mode 100644 index 000000000..ba50e9ead --- /dev/null +++ b/frontend/src/components/common/ToggleSwitch/ToggleSwitch.stories.tsx @@ -0,0 +1,82 @@ +import { useArgs } from '@storybook/preview-api'; +import type { Meta, StoryObj } from '@storybook/react'; +import ToggleSwitch from './index'; + +const meta: Meta = { + title: 'Components/ToggleSwitch', + component: ToggleSwitch, + parameters: { + layout: 'centered', + docs: { + description: { + component: 'ToggleSwitch 컴포넌트는 스위치를 토글할 수 있는 기능을 제공합니다.', + }, + }, + }, + tags: ['autodocs'], + argTypes: { + isChecked: { + description: '스위치의 체크 상태를 나타냅니다.', + control: { type: 'boolean' }, + table: { + type: { summary: 'boolean' }, + }, + }, + isDisabled: { + description: '스위치의 활성화 상태를 나타냅니다.', + control: { type: 'boolean' }, + table: { + type: { summary: 'boolean' }, + }, + }, + onChange: { + description: '스위치 상태 변경 시 호출되는 콜백 함수입니다.', + action: 'changed', + table: { + type: { summary: '() => void' }, + }, + }, + }, + decorators: [ + (Child, context) => { + const [args, updateArgs] = useArgs(); + + const handleChange = () => { + updateArgs({ isChecked: !context.args.isChecked }); + }; + + return ( + + ); + }, + ], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + isChecked: false, + }, +}; + +export const Disabled: Story = { + args: { + isChecked: false, + isDisabled: true, + }, +}; + +Default.parameters = { + docs: { + description: { + story: 'ToggleSwitch 컴포넌트의 기본 상태입니다.', + }, + }, +}; diff --git a/frontend/src/components/common/ToggleSwitch/index.tsx b/frontend/src/components/common/ToggleSwitch/index.tsx new file mode 100644 index 000000000..2b06b896d --- /dev/null +++ b/frontend/src/components/common/ToggleSwitch/index.tsx @@ -0,0 +1,20 @@ +import S, { StyleProps } from './style'; + +interface ToggleSwitchProps extends StyleProps { + onChange: () => void; +} + +export default function ToggleSwitch({ isChecked, isDisabled, onChange }: ToggleSwitchProps) { + return ( + + + + ); +} diff --git a/frontend/src/components/common/ToggleSwitch/style.ts b/frontend/src/components/common/ToggleSwitch/style.ts new file mode 100644 index 000000000..318dbfb34 --- /dev/null +++ b/frontend/src/components/common/ToggleSwitch/style.ts @@ -0,0 +1,60 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +export interface StyleProps { + isChecked: boolean; + isDisabled: boolean; +} + +const Switch = styled.div` + width: 5rem; + --parent-width: 5rem; + aspect-ratio: 5/3; + + background-color: ${({ isChecked, theme }) => + isChecked ? theme.baseColors.purplescale[600] : theme.baseColors.grayscale[100]}; + outline: 0.2rem solid + ${({ isChecked, theme }) => (isChecked ? theme.baseColors.purplescale[600] : theme.baseColors.grayscale[700])}; + border-radius: 99rem; + + display: flex; + align-items: center; + + padding: 0.3rem; + --parent-padding: 0.3rem; + + cursor: pointer; + transition: background-color 0.3s; + + ${({ isDisabled, theme }) => + isDisabled && + css({ + backgroundColor: theme.baseColors.grayscale[400], + outline: `0.2rem solid ${theme.baseColors.grayscale[500]}`, + })} +`; + +const Knob = styled.div` + height: 100%; + aspect-ratio: 1/1; + background-color: ${({ isChecked, theme }) => + isChecked ? theme.baseColors.grayscale[200] : theme.baseColors.grayscale[700]}; + border-radius: 50%; + + transform: ${({ isChecked }) => + isChecked ? 'translate(calc(var(--parent-width) - var(--parent-padding)*2 - 100%))' : 'translate(0)'}; + transition: transform 0.2s; + + ${({ isDisabled, theme }) => + isDisabled && + css({ + backgroundColor: theme.baseColors.grayscale[700], + })} +`; + +const S = { + Switch, + Knob, +}; + +export default S; From 39d53dc196416130071637a5b4019011f5596fbc Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Thu, 1 Aug 2024 13:20:33 +0900 Subject: [PATCH 3/4] =?UTF-8?q?chore:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EA=B2=BD=EB=A1=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/DateInput/DateInput.stories.tsx | 2 +- .../src/components/common/QuestionBox/QuestionBox.stories.tsx | 2 +- .../src/components/common/ToggleSwitch/ToggleSwitch.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/DateInput/DateInput.stories.tsx b/frontend/src/components/common/DateInput/DateInput.stories.tsx index 77e9b9105..73d2b0111 100644 --- a/frontend/src/components/common/DateInput/DateInput.stories.tsx +++ b/frontend/src/components/common/DateInput/DateInput.stories.tsx @@ -4,7 +4,7 @@ import formatDate from '@utils/formatDate'; import DateInput from './index'; const meta: Meta = { - title: 'Common/DateInput', + title: 'Common/Input/DateInput', component: DateInput, parameters: { layout: 'centered', diff --git a/frontend/src/components/common/QuestionBox/QuestionBox.stories.tsx b/frontend/src/components/common/QuestionBox/QuestionBox.stories.tsx index fe1b9f055..e93a6cfbe 100644 --- a/frontend/src/components/common/QuestionBox/QuestionBox.stories.tsx +++ b/frontend/src/components/common/QuestionBox/QuestionBox.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import QuestionBox from '.'; const meta: Meta = { - title: 'Common/QuestionBox', + title: 'Components/QuestionBox', component: QuestionBox, parameters: { layout: 'centered', diff --git a/frontend/src/components/common/ToggleSwitch/ToggleSwitch.stories.tsx b/frontend/src/components/common/ToggleSwitch/ToggleSwitch.stories.tsx index ba50e9ead..a91334563 100644 --- a/frontend/src/components/common/ToggleSwitch/ToggleSwitch.stories.tsx +++ b/frontend/src/components/common/ToggleSwitch/ToggleSwitch.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import ToggleSwitch from './index'; const meta: Meta = { - title: 'Components/ToggleSwitch', + title: 'Common/ToggleSwitch', component: ToggleSwitch, parameters: { layout: 'centered', From c018ca1038e551dcd0304057539c900ce58feb9f Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Thu, 1 Aug 2024 13:20:59 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20outline-offset=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20=EB=B0=8F=20=EC=83=81=EC=88=98=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/ToggleSwitch/style.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/common/ToggleSwitch/style.ts b/frontend/src/components/common/ToggleSwitch/style.ts index 318dbfb34..92983df71 100644 --- a/frontend/src/components/common/ToggleSwitch/style.ts +++ b/frontend/src/components/common/ToggleSwitch/style.ts @@ -7,8 +7,10 @@ export interface StyleProps { } const Switch = styled.div` - width: 5rem; --parent-width: 5rem; + --parent-padding: 0.3rem; + + width: var(--parent-width); aspect-ratio: 5/3; background-color: ${({ isChecked, theme }) => @@ -20,12 +22,11 @@ const Switch = styled.div` display: flex; align-items: center; - padding: 0.3rem; - --parent-padding: 0.3rem; + padding: var(--parent-padding); cursor: pointer; transition: background-color 0.3s; - + outline-offset: -0.1rem; ${({ isDisabled, theme }) => isDisabled && css({