Switch 컴포넌트 구현이 Figma 명세를 따르도록 수정

.changeset/old-students-raise.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Fix Switch component implementation to follow Bezier Figma spec

packages/bezier-react/src/components/Forms/Switch/Switch.stories.tsx

@@ -4,23 +4,42 @@ import base from 'paths.macro'
 import { Meta, Story } from '@storybook/react'
 
 /* Internal dependencies */
-import { getTitle } from 'Utils/storyUtils'
+import { getObjectFromEnum, getTitle } from 'Utils/storyUtils'
 import Switch from './Switch'
-import SwitchProps from './Switch.types'
+import type SwitchProps from './Switch.types'
+import { SwitchSize } from './Switch.types'
 
 export default {
   title: getTitle(base),
   component: Switch,
   argTypes: {
-    onClick: { action: 'onClick' },
+    size: {
+      control: {
+        type: 'radio',
+        options: getObjectFromEnum(SwitchSize),
+      },
+    },
+    checked: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    onClick: {
+      action: 'onClick',
+    },
   },
 } as Meta
 
 const Template: Story<SwitchProps> = ({ ...otherSwitchProps }) => <Switch {...otherSwitchProps} />
 
 export const Primary = Template.bind({})
 Primary.args = {
-  size: 16,
+  size: SwitchSize.M,
   checked: true,
   disabled: false,
 }

packages/bezier-react/src/components/Forms/Switch/Switch.styled.ts

@@ -1,46 +1,77 @@
 /* Internal dependencies */
 import { styled } from 'Foundation'
-import { WrapperProps, ContentProps } from './Switch.types'
+import DisabledOpacity from 'Constants/DisabledOpacity'
+import type SwitchProps from './Switch.types'
+import { SwitchSize } from './Switch.types'
 
-const PADDING = 4
+const PADDING = 3
+
+const SWITCH_WIDTH: Record<SwitchSize, number> = {
+  [SwitchSize.M]: 36,
+  [SwitchSize.S]: 30,
+}
+
+const SWITCH_HEIGHT: Record<SwitchSize, number> = {
+  [SwitchSize.M]: 24,
+  [SwitchSize.S]: 20,
+}
+
+const SWITCH_HANDLE_WIDTH_HEIGHT: Record<SwitchSize, number> = {
+  [SwitchSize.M]: 18,
+  [SwitchSize.S]: 14,
+}
+
+interface WrapperProps extends Required<SwitchProps> {}
 
-/* eslint-disable @typescript-eslint/indent */
 export const Wrapper = styled.div<WrapperProps>`
   position: relative;
-  width: ${props => props.size * 2}px;
-  height: ${props => props.size + PADDING}px;
-  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
-  background-color:
-    ${props => (
-      props.checked
-        ? props.foundation?.theme?.['bgtxt-green-normal']
-        : props.foundation?.theme?.['bg-black-dark']
-    )};
-  border-radius: ${props => (props.size + PADDING) / 2}px;
-  opacity: ${props => (props.disabled ? '.2' : 'initial')};
-  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'opacity'])};
+
+  width: ${({ size }) => SWITCH_WIDTH[size]}px;
+  height: ${({ size }) => SWITCH_HEIGHT[size]}px;
+
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+
+  background-color: ${({ checked, foundation }) => (
+    checked
+      ? foundation?.theme?.['bgtxt-green-normal']
+      : foundation?.theme?.['bg-black-dark']
+  )};
+
+  ${({ foundation }) => foundation?.rounding?.round12}
+  opacity: ${({ disabled }) => (disabled ? DisabledOpacity : 'initial')};
 
   &:hover {
-    background-color:
-      ${props => (
-        props.checked
-          ? props.foundation?.theme?.['bgtxt-green-dark']
-          : props.foundation?.theme?.['bg-black-dark']
-      )};
+    background-color: ${({ checked, foundation }) => (
+    checked
+      ? foundation?.theme?.['bgtxt-green-dark']
+      : foundation?.theme?.['bg-black-dark']
+  )};
   }
+
+  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'opacity'])};
 `
-/* eslint-enable @typescript-eslint/indent */
+
+interface ContentProps extends SwitchProps {
+  size: NonNullable<SwitchProps['size']>
+  checked: NonNullable<SwitchProps['checked']>
+}
 
 export const Content = styled.div<ContentProps>`
+  position: absolute;
+  top: ${PADDING}px;
+  left: ${PADDING}px;
+
+  width: ${({ size }) => SWITCH_HANDLE_WIDTH_HEIGHT[size]}px;
+  height: ${({ size }) => SWITCH_HANDLE_WIDTH_HEIGHT[size]}px;
+  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};
+  ${({ foundation }) => foundation?.rounding?.round12}
   ${({ foundation }) => foundation?.elevation?.ev2()};
-  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['transform'])};
+
+  transform: ${({ checked, size }) => (
+    checked
+      ? `translateX(${SWITCH_WIDTH[size] - SWITCH_HANDLE_WIDTH_HEIGHT[size] - (PADDING * 2)}px)`
+      : 'initial'
+  )};
 
-  position: absolute;
-  top: ${PADDING / 2}px;
-  left: ${PADDING / 2}px;
-  width: ${props => props.size}px;
-  height: ${props => props.size}px;
-  background-color: ${props => props.foundation?.theme?.['bgtxt-absolute-white-dark']};
-  border-radius: 50%;
-  transform: ${props => (props.checked ? `translateX(${props.size - PADDING}px)` : 'initial')};
+  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['transform'])};
 `

packages/bezier-react/src/components/Forms/Switch/Switch.test.tsx

@@ -4,9 +4,11 @@ import { fireEvent } from '@testing-library/react'
 
 /* Internal dependencies */
 import { LightFoundation } from 'Foundation'
+import DisabledOpacity from 'Constants/DisabledOpacity'
 import { render } from 'Utils/testUtils'
 import Switch, { SWITCH_TEST_ID, SWITCH_HANDLE_TEST_ID } from './Switch'
 import type SwitchProps from './Switch.types'
+import { SwitchSize } from './Switch.types'
 
 describe('Switch', () => {
   const renderComponent = (props?: Partial<SwitchProps>) => render(
@@ -20,38 +22,48 @@ describe('Switch', () => {
       const switchHandleComponent = getByTestId(SWITCH_HANDLE_TEST_ID)
 
       expect(switchComponent).toHaveStyle('position: relative')
-      expect(switchComponent).toHaveStyle('width: 32px')
-      expect(switchComponent).toHaveStyle('height: 20px')
+      expect(switchComponent).toHaveStyle('width: 36px')
+      expect(switchComponent).toHaveStyle('height: 24px')
       expect(switchComponent).toHaveStyle('cursor: pointer')
       expect(switchComponent).toHaveStyle(`background-color: ${LightFoundation.theme['bg-black-dark']}`)
-      expect(switchComponent).toHaveStyle('border-radius: 10px')
+      expect(switchComponent).toHaveStyle('border-radius: 12px')
       expect(switchComponent).toHaveStyle('opacity: initial')
       expect(switchHandleComponent).toHaveStyle('position: absolute')
-      expect(switchHandleComponent).toHaveStyle('top: 2px')
-      expect(switchHandleComponent).toHaveStyle('left: 2px')
-      expect(switchHandleComponent).toHaveStyle('width: 16px')
-      expect(switchHandleComponent).toHaveStyle('height: 16px')
+      expect(switchHandleComponent).toHaveStyle('top: 3px')
+      expect(switchHandleComponent).toHaveStyle('left: 3px')
+      expect(switchHandleComponent).toHaveStyle('width: 18px')
+      expect(switchHandleComponent).toHaveStyle('height: 18px')
       expect(switchHandleComponent).toHaveStyle(`background-color: ${LightFoundation.theme['bgtxt-absolute-white-dark']}`)
-      expect(switchHandleComponent).toHaveStyle('border-radius: 50%')
+      expect(switchHandleComponent).toHaveStyle('border-radius: 12px')
       expect(switchHandleComponent).toHaveStyle('transform: initial')
     })
   })
 
   describe('specify size props', () => {
-    it('should render Switch with given size', () => {
+    it('should render Switch with size M', () => {
+      const { getByTestId } = renderComponent({
+        size: SwitchSize.M,
+      })
+      const switchComponent = getByTestId(SWITCH_TEST_ID)
+      const switchHandleComponent = getByTestId(SWITCH_HANDLE_TEST_ID)
+
+      expect(switchComponent).toHaveStyle('width: 36px')
+      expect(switchComponent).toHaveStyle('height: 24px')
+      expect(switchHandleComponent).toHaveStyle('width: 18px')
+      expect(switchHandleComponent).toHaveStyle('height: 18px')
+    })
+
+    it('should render Switch with size S', () => {
       const { getByTestId } = renderComponent({
-        size: 16,
+        size: SwitchSize.S,
       })
       const switchComponent = getByTestId(SWITCH_TEST_ID)
       const switchHandleComponent = getByTestId(SWITCH_HANDLE_TEST_ID)
 
-      expect(switchComponent).toHaveStyle('width: 32px')
+      expect(switchComponent).toHaveStyle('width: 30px')
       expect(switchComponent).toHaveStyle('height: 20px')
-      expect(switchComponent).toHaveStyle('border-radius: 10px')
-      expect(switchHandleComponent).toHaveStyle('top: 2px')
-      expect(switchHandleComponent).toHaveStyle('left: 2px')
-      expect(switchHandleComponent).toHaveStyle('width: 16px')
-      expect(switchHandleComponent).toHaveStyle('height: 16px')
+      expect(switchHandleComponent).toHaveStyle('width: 14px')
+      expect(switchHandleComponent).toHaveStyle('height: 14px')
     })
   })
 
@@ -95,7 +107,7 @@ describe('Switch', () => {
       })
       const switchComponent = getByTestId(SWITCH_TEST_ID)
 
-      expect(switchComponent).toHaveStyle('opacity: .2')
+      expect(switchComponent).toHaveStyle(`opacity: ${DisabledOpacity}`)
     })
   })
 

packages/bezier-react/src/components/Forms/Switch/Switch.tsx

@@ -9,7 +9,8 @@ import React, {
 
 /* Internal dependencies */
 import useFormFieldProps from 'Components/Forms/useFormFieldProps'
-import SwitchProps from './Switch.types'
+import type SwitchProps from './Switch.types'
+import { SwitchSize } from './Switch.types'
 import * as Styled from './Switch.styled'
 
 export const SWITCH_TEST_ID = 'bezier-react-switch'
@@ -20,7 +21,7 @@ function Switch(
     testId = SWITCH_TEST_ID,
     handleTestId = SWITCH_HANDLE_TEST_ID,
     checked = false,
-    size = 16,
+    size = SwitchSize.M,
     onClick,
     ...rest
   }: SwitchProps,

packages/bezier-react/src/components/Forms/Switch/Switch.types.ts

@@ -2,25 +2,22 @@
 import type { MouseEvent } from 'react'
 
 /* Internal dependencies */
-import type { BezierComponentProps, SizeProps, DisableProps, AdditionalTestIdProps } from 'Types/ComponentProps'
+import type { BezierComponentProps, SizeProps, AdditionalTestIdProps } from 'Types/ComponentProps'
 import type { FormComponentProps } from 'Components/Forms/Form.types'
 
+export enum SwitchSize {
+  M = 'm',
+  S = 's',
+}
+
 interface SwitchOptions {
   checked?: boolean
   onClick?: (checked: boolean, event: MouseEvent) => void
 }
 
 export default interface SwitchProps extends
   BezierComponentProps,
-  SizeProps<number>,
+  SizeProps<SwitchSize>,
   FormComponentProps,
   AdditionalTestIdProps<'handle'>,
   SwitchOptions {}
-
-type StyledSwitchProps = Required<SizeProps<number> & Omit<SwitchOptions, 'onClick'>>
-
-export interface WrapperProps extends
-  StyledSwitchProps,
-  Required<DisableProps> {}
-
-export interface ContentProps extends StyledSwitchProps {}

packages/bezier-react/src/components/Forms/Switch/index.ts

@@ -1,10 +1,9 @@
 import Switch from './Switch'
 import type SwitchProps from './Switch.types'
-
-export type {
-  SwitchProps,
-}
+import { SwitchSize } from './Switch.types'
 
 export {
   Switch,
+  type SwitchProps,
+  SwitchSize,
 }