feat(xdesign-story): Component Switch 구현

services/xdesign-story/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+import { useRef, useState } from 'react';
+import { Switch } from '.';
+
+export default {
+    title: 'Components/Switch',
+    component: Switch,
+};
+
+const Background = styled.div`
+    display: flex;
+`;
+
+export const Default: React.VFC = () => {
+    const [isOn, setIsOn] = useState<boolean>(false);
+    const ref = useRef(null);
+    const onClick = () => {
+        setIsOn(!isOn);
+    };
+
+    return (
+        <Background>
+            <Switch isOn={isOn} onClick={onClick} disabled={false} ref={ref} />
+            <Switch isOn={false} onClick={onClick} disabled={true} />
+            <Switch isOn={true} onClick={onClick} disabled={true} />
+        </Background>
+    );
+};

services/xdesign-story/src/components/Switch/Switch.tsx

@@ -0,0 +1,55 @@
+import React, { useRef } from 'react';
+import styled from '@emotion/styled';
+import { SwitchProps } from './Switch.types';
+
+const SWITCH_WIDTH = 56;
+const SWITCH_HEIGHT = 32;
+const SWITCH_PADDING = 1;
+const SWITCH_TRANSITION_TIME = '0.1s';
+
+const SwitchContainer = styled.button<SwitchProps>`
+    position: relative;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    opacity: ${(props) => (props.disabled ? 0.4 : 1)};
+    width: ${SWITCH_WIDTH}px;
+    height: ${SWITCH_HEIGHT}px;
+    border-radius: ${SWITCH_HEIGHT}px;
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: ${SWITCH_TRANSITION_TIME};
+    background-color: ${(props) =>
+        props.isOn ? props.theme.color.lightTheme.Secondary : props.theme.color.lightTheme.Outline};
+    > .circle {
+        position: absolute;
+        top: ${SWITCH_PADDING}px;
+        left: ${(props) =>
+            props.isOn
+                ? `${SWITCH_WIDTH - SWITCH_HEIGHT + SWITCH_PADDING}px`
+                : `${SWITCH_PADDING}px`};
+        width: ${SWITCH_HEIGHT - SWITCH_PADDING * 2}px;
+        height: ${SWITCH_HEIGHT - SWITCH_PADDING * 2}px;
+        border-radius: 50%;
+        background: white;
+        transition: ${SWITCH_TRANSITION_TIME};
+    }
+`;
+
+export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(function Switch(props, ref) {
+    const handleContainerClick = () => {
+        if (!props.disabled) {
+            props.onClick();
+            if (typeof ref !== 'function') {
+                ref?.current?.click();
+            }
+        }
+    };
+
+    return (
+        <SwitchContainer onClick={handleContainerClick} disabled={props.disabled} isOn={props.isOn}>
+            <div className="circle" />
+            <input type="checkbox" style={{ display: 'none' }} ref={ref} />
+        </SwitchContainer>
+    );
+});

services/xdesign-story/src/components/Switch/Switch.types.ts

@@ -0,0 +1,10 @@
+export interface SwitchProps {
+    /** on/off 여부*/
+    isOn: boolean;
+
+    /** 클릭 이벤트 */
+    onClick: () => void;
+
+    /** 활성화/비활성화 여부 */
+    disabled: boolean;
+}

services/xdesign-story/src/components/Switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch.types';