merge: useSwitch 스타일링방식 vanilla-extract로 변경/README 업데이트 (#23)

merge: useSwitch 스타일링방식 vanilla-extract로 변경/README 업데이트 (#23)

README.md

@@ -157,6 +157,24 @@ function App() {
 
 `removeValue (function)`: A function that removes values related to the current key from the local storage.
 
+### useSwitch
+
+You can declaratively manage a Switch (or Toggle) component using useSwitch.
+
+#### Function Arguments
+
+You can determine the initial on/off state of the toggle through `defaultValue`.
+
+#### Return Values
+
+`isOn` (default `false`) : Indicates the state of the switch. If the switch is on, it returns `true`; otherwise, it returns `false`.
+
+`on` : Turns the switch to the on state.
+
+`off` : Turns the switch to the off state.
+
+`toggle` : Reverses the current state of the switch.
+
 ## Animation
 
 The animation of this package is based on ClassName by default.

src/stories/useSwitch/Switch.css.ts

@@ -0,0 +1,68 @@
+import { ComplexStyleRule, style } from '@vanilla-extract/css';
+
+/* The switch - the box around the slider */
+export const switchLabel = style({
+  position: 'relative',
+  display: 'inline-block',
+  width: 60,
+  height: 34,
+});
+
+export const switchCirble: ComplexStyleRule = {
+  position: 'absolute',
+  content: '',
+  height: 26,
+  width: 26,
+  left: 4,
+  bottom: 4,
+  backgroundColor: 'white',
+  WebkitTransition: '.4s',
+  transition: '.4s',
+};
+
+/* Hide default HTML checkbox */
+export const switchInput = style({
+  opacity: 0,
+  width: 0,
+  height: 0,
+});
+
+/* The slider */
+export const baseSlider = style({
+  position: 'absolute',
+  cursor: 'pointer',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: '#ccc',
+  WebkitTransition: '.4s',
+  transition: '.4s',
+  '::before': {
+    ...switchCirble,
+  },
+});
+
+export const checkedSlider = style({
+  backgroundColor: '#2196F3',
+  position: 'absolute',
+  cursor: 'pointer',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  '::before': {
+    ...switchCirble,
+    transform: 'translateX(26px)',
+    WebkitTransform: 'translateX(26px)',
+    msTransform: 'translateX(26px)',
+  },
+});
+
+/* Rounded sliders */
+export const round = style({
+  borderRadius: 34,
+  '::before': {
+    borderRadius: '50%',
+  },
+});

src/stories/useSwitch/Switch.tsx

@@ -1,7 +1,6 @@
 import useSwitch from '../../useSwitch/useSwitch';
 import React, { ChangeEventHandler } from 'react';
-
-import './Switch.css';
+import { baseSlider, checkedSlider, round, switchInput, switchLabel } from './Switch.css';
 
 export default function Switch() {
   const sw = useSwitch(false);
@@ -11,9 +10,9 @@ export default function Switch() {
   };
 
   return (
-    <label className="switch">
-      <input type="checkbox" checked={sw.isOn} onChange={handleChangeSwitch} />
-      <span className="slider round"></span>
+    <label className={switchLabel}>
+      <input type="checkbox" checked={sw.isOn} onChange={handleChangeSwitch} className={switchInput} />
+      <span className={`${sw.isOn ? checkedSlider : baseSlider} ${round}`}></span>
       check
     </label>
   );