feat: 컴포넌트 switch 구현

Author: inung1004

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

@@ -0,0 +1,24 @@
+import { Switch } from '.';
+import { useState } from 'react';
+
+export default {
+    title: 'components/Switch',
+    component: Switch,
+};
+
+export const Default = () => {
+    const [isOn1, setIsOn1] = useState<boolean>(false);
+    const [isOn2, setIsOn2] = useState<boolean>(false);
+
+    return (
+        <>
+            <h3>{`${isOn1}`}</h3>
+            <Switch isOn={isOn1} onClick={() => setIsOn1(!isOn1)} isActive={true} />
+            <br />
+            <h3>비활성화되었을 시 40%의 alpha 값을 가집니다.</h3>
+            <Switch isOn={isOn2} onClick={() => setIsOn2(!isOn2)} isActive={false} />
+            <br />
+            <Switch isOn={!isOn2} onClick={() => setIsOn2(!isOn2)} isActive={false} />
+        </>
+    );
+};

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

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+import { color } from '@/foundations';
+import { SwitchProps } from './Switch.types';
+
+interface SwitchContainerProps {
+    isActive: boolean;
+}
+
+const SwitchContainer = styled.div<SwitchContainerProps>`
+    position: relative;
+    cursor: pointer;
+    opacity: ${(props) => (props.isActive ? 1 : 0.4)};
+    > .wrapper {
+        width: 56px;
+        height: 32px;
+        border-radius: 30px;
+        background: ${color.lightTheme.Outline};
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    > .switch--checked {
+        background: ${color.lightTheme.Secondary};
+        transition: 0.5s;
+    }
+    > .circle {
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background: white;
+        transition: 0.5s;
+    }
+    > .switch--checked {
+        left: 25px;
+        transition: 0.5s;
+    }
+`;
+
+export const Switch = ({ isOn, onClick, isActive }: SwitchProps) => {
+    return (
+        <SwitchContainer onClick={isActive ? onClick : () => {}} isActive={isActive}>
+            <div className={`wrapper ${isOn ? 'switch--checked' : null}`} />
+            <div className={`circle ${isOn ? 'switch--checked' : null}`} />
+        </SwitchContainer>
+    );
+};

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+
+export interface SwitchProps extends HTMLAttributes<HTMLElement> {
+    isOn: boolean;
+    onClick: () => void;
+    isActive: boolean;
+}

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

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