feat: use Toggle component in GenerateFormLinkBottomSheet

src/shared/ui/Toggle/Toggle.module.css

@@ -0,0 +1,7 @@
+.Input {
+  display: none;
+}
+
+.Label {
+  cursor: pointer;
+}

src/shared/ui/Toggle/Toggle.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from './Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  component: Toggle,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

src/shared/ui/Toggle/Toggle.tsx

@@ -0,0 +1,11 @@
+import { ToggleOff, ToggleOn } from 'src/shared/ui/icons';
+import styles from './Toggle.module.css';
+
+export const Toggle = ({ checked, onToggle }: { checked?: boolean; onToggle: (value: boolean) => void }) => {
+  return (
+    <label className={styles.Label}>
+      {checked ? <ToggleOn /> : <ToggleOff />}
+      <input className={styles.Input} type={'checkbox'} checked={checked} onChange={() => onToggle(!checked)} />
+    </label>
+  );
+};

src/shared/ui/icons/ToggleOff.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgToggleOff = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={48} height={24} fill="none" viewBox="0 0 48 24" {...props}>
+    <rect width={48} height={24} fill="#EBEAEB" rx={12} />
+    <circle cx={12} cy={12} r={9} fill="#AFAAB1" />
+  </svg>
+);
+export default SvgToggleOff;

src/shared/ui/icons/ToggleOn.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgToggleOn = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={48} height={24} fill="none" viewBox="0 0 48 24" {...props}>
+    <rect width={48} height={24} fill="#EBEAEB" rx={12} />
+    <circle cx={36} cy={12} r={9} fill="#D752FF" />
+  </svg>
+);
+export default SvgToggleOn;

src/shared/ui/icons/index.ts

@@ -14,4 +14,6 @@ export { default as Minus } from './Minus';
 export { default as Plus } from './Plus';
 export { default as Refresh } from './Refresh';
 export { default as Share } from './Share';
+export { default as ToggleOff } from './ToggleOff';
+export { default as ToggleOn } from './ToggleOn';
 export { default as UncheckedRadio } from './UncheckedRadio';

src/widgets/GenerateFormLink/GenerateFormLinkBottomSheet.tsx

@@ -7,6 +7,7 @@ import { Link, Refresh } from 'src/shared/ui/icons';
 import { Button } from 'src/shared/ui/Button/Button';
 import { Theme } from 'src/shared/styles/constants';
 import { IconBoxButton } from '../../shared/ui/IconBoxButton/IconBoxButton';
+import { Toggle } from 'src/shared/ui/Toggle/Toggle';
 
 export const GenerateFormLinkBottomSheet = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
   return (
@@ -62,7 +63,7 @@ const GenerateFormBottomSheetContent = () => {
         <h3>링크 설정</h3>
         <div className={styles.LinkConfig}>
           <p>기존 링크 활성화</p>
-          <input type={'checkbox'} checked={isOpen} onClick={onToggleLinkOpen} />
+          <Toggle onToggle={onToggleLinkOpen} checked={isOpen} />
         </div>
         <div className={styles.LinkConfig}>
           <p>새로운 링크 생성</p>