[#13] 토글 공통 컴포넌트 구현

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-switch": "^1.0.3",
     "@tanstack/react-query": "^5.34.1",
     "axios": "^1.6.8",
     "dayjs": "^1.11.11",

src/components/common/toggle/Toggle.tsx

@@ -0,0 +1,12 @@
+import ToggleRoot from './ToggleRoot'
+import ToggleThumb from './ToggleThumb'
+
+const Toggle = () => {
+  return (
+    <ToggleRoot>
+      <ToggleThumb />
+    </ToggleRoot>
+  )
+}
+
+export default Toggle

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: 58px;
+  height: 31px;
+  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,26 @@
+'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: 25px;
+  height: 25px;
+  background-color: ${theme.color.white};
+  border-radius: 9999px;
+  transition: transform 300ms;
+  transform: translateX(2px);
+  will-change: transform;
+
+  &[data-state='checked'] {
+    transform: translateX(30px);
+  }
+`
+
+const ToggleThumb = ({ ...props }: Switch.SwitchThumbProps) => {
+  return <StyledThumb {...props} />
+}
+
+export default ToggleThumb