[SMH-25] Switch 컴포넌트 작업

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm lint
+pnpm lint:fix:all

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm lint:all

package.json

@@ -13,8 +13,8 @@
     "prettier:fix": "prettier 'packages/**/src/**/*.{json,yaml,md,js,ts,tsx}' --write",
     "stylelint": "stylelint './packages/**/src/**/*.{tsx,ts,js}'",
     "stylelint:fix": "stylelint './packages/**/src/**/*.{tsx,ts,js}' --fix",
-    "lint:all": "pnpm lint && pnpm prettier && pnpm lint:style",
-    "lint:fix:all": "pnpm lint:fix && pnpm prettier:fix && pnpm lint:style:fix",
+    "lint:all": "pnpm lint && pnpm prettier && pnpm stylelint",
+    "lint:fix:all": "pnpm lint:fix && pnpm prettier:fix && pnpm stylelint:fix",
     "dev:admin": "pnpm --filter missionary-admin dev",
     "dev:app": "pnpm --filter missionary-app dev",
     "dev:ds": "pnpm --filter design-system dev",

packages/design-system/src/components/switch/index.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { Switch } from '.';
+
+const SwitchContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+
+const StyledSwitch = styled(Switch)<{ checked: boolean }>`
+  position: relative;
+  display: inline-block;
+
+  width: 60px;
+  height: 34px;
+  border-radius: 34px;
+
+  background-color: #ccd3e0;
+
+  cursor: pointer;
+
+  &:hover {
+    background: #667ba3;
+  }
+
+  ${({ checked }) =>
+    checked &&
+    `
+    background-color: #2196f3;
+  `}
+`;
+
+const Slider = styled.span<{ checked: boolean }>`
+  position: absolute;
+
+  border-radius: 34px;
+
+  inset: 0;
+
+  transition: 0.4s;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 4px;
+    left: 4px;
+
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+
+    background-color: #fff;
+
+    transition: 0.4s;
+  }
+
+  ${({ checked }) =>
+    checked &&
+    `
+    &::before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+  `}
+`;
+
+const meta: Meta<typeof Switch> = {
+  component: Switch,
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Primary: Story = {
+  render: (args) =>
+    (() => {
+      const [checked, setChecked] = useState(false);
+
+      return (
+        <SwitchContainer>
+          <StyledSwitch
+            {...args}
+            checked={checked}
+            onChange={(newChecked) => {
+              setChecked(newChecked);
+            }}
+            value={'value'}
+          >
+            <Slider checked={checked} className="slider" />
+          </StyledSwitch>
+        </SwitchContainer>
+      );
+    })(),
+  args: {},
+};

packages/design-system/src/components/switch/index.tsx

@@ -0,0 +1,95 @@
+import React, { createContext, type Ref, useMemo } from 'react';
+import styled from '@emotion/styled';
+import { useControllableState } from '@hooks';
+import { forwardRefWithAs } from '@utils';
+
+const StyledInput = styled.input`
+  display: none;
+`;
+
+export const SwitchActionsContext = createContext<{
+  onChange: (checked: boolean) => void;
+} | null>(null);
+SwitchActionsContext.displayName = 'SwitchActionsContext';
+
+export const SwitchDataContext = createContext<{
+  checked: boolean;
+} | null>(null);
+SwitchDataContext.displayName = 'SwitchDataContext';
+
+interface SwitchProps {
+  defaultChecked?: boolean;
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  value?: string;
+  name?: string;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLInputElement>;
+
+  focus?: boolean;
+}
+export const Switch = forwardRefWithAs(
+  (
+    {
+      defaultChecked = false,
+      checked: controlledChecked,
+      onChange: controlledOnChange,
+      value,
+      disabled,
+      className,
+      children,
+      name,
+      ...props
+    }: SwitchProps,
+    ref?: Ref<HTMLInputElement>,
+  ) => {
+    let [checked, onChange] = useControllableState<boolean>(
+      controlledChecked,
+      controlledOnChange,
+      defaultChecked,
+    );
+
+    const actions = useMemo(
+      () => ({
+        onChange,
+      }),
+      [onChange],
+    );
+    const data = useMemo(
+      () => ({
+        checked,
+      }),
+      [checked],
+    );
+
+    const handleClick = () => {
+      onChange?.(!checked);
+    };
+
+    return (
+      <SwitchActionsContext.Provider value={actions}>
+        <SwitchDataContext.Provider value={data}>
+          <StyledInput
+            readOnly
+            type="checkbox"
+            role="switch"
+            ref={ref}
+            checked={checked}
+            value={value}
+            disabled={disabled}
+            name={name}
+          />
+          <div
+            className={className}
+            onClick={disabled ? undefined : handleClick}
+            {...props}
+          >
+            {children}
+          </div>
+        </SwitchDataContext.Provider>
+      </SwitchActionsContext.Provider>
+    );
+  },
+);