[#13] 토글 root, thumb 분리 및 css 추가

src/components/common/toggle/Toggle.tsx

@@ -1,14 +1,11 @@
-'use client'
-
-import * as Switch from '@radix-ui/react-switch'
-import { theme } from '@/styles/theme'
-import styled from 'styled-components'
+import ToggleRoot from './ToggleRoot'
+import ToggleThumb from './ToggleThumb'
 
 const Toggle = () => {
   return (
-    <Switch.Root className="SwitchRoot" id="airplane-mode">
-      <Switch.Thumb className="SwitchThumb" />
-    </Switch.Root>
+    <ToggleRoot>
+      <ToggleThumb />
+    </ToggleRoot>
   )
 }
 

src/components/common/toggle/ToggleRoot.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import * as Switch from '@radix-ui/react-switch'
+import { theme } from '@/styles/theme'
+import styled from 'styled-components'
+
+const StyledRoot = styled(Switch.Root)`
+  width: 42px;
+  height: 25px;
+  background-color: ${theme.color.grey200};
+  border-radius: 9999px;
+  position: relative;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &[data-state='checked'] {
+    background-color: ${theme.color.purple700};
+  }
+`
+
+const ToggleRoot = ({ children, ...props }: Switch.PrimitiveButtonProps) => {
+  return <StyledRoot {...props}>{children}</StyledRoot>
+}
+
+export default ToggleRoot

src/components/common/toggle/ToggleThumb.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import * as Switch from '@radix-ui/react-switch'
+import { theme } from '@/styles/theme'
+import styled from 'styled-components'
+
+const StyledThumb = styled(Switch.SwitchThumb)`
+  display: block;
+  width: 21px;
+  height: 21px;
+  background-color: ${theme.color.white};
+  border-radius: 9999px;
+  box-shadow: 0 2px 2px var(--black-a7);
+  transition: transform 300ms;
+  transform: translateX(2px);
+  will-change: transform;
+
+  &[data-state='checked'] {
+    transform: translateX(19px);
+  }
+`
+
+const ToggleThumb = ({ ...props }: Switch.SwitchThumbProps) => {
+  return <StyledThumb {...props} />
+}
+
+export default ToggleThumb