From ddae4388d2954e8b7707aaa6ab8044efbde64054 Mon Sep 17 00:00:00 2001
From: chaduhwan <enghks2973@naver.com>
Date: Mon, 13 May 2024 06:17:28 +0900
Subject: [PATCH] =?UTF-8?q?[#13]=20=ED=86=A0=EA=B8=80=20root,=20thumb=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20css=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/toggle/Toggle.tsx      | 13 ++++------
 src/components/common/toggle/ToggleRoot.tsx  | 24 +++++++++++++++++
 src/components/common/toggle/ToggleThumb.tsx | 27 ++++++++++++++++++++
 3 files changed, 56 insertions(+), 8 deletions(-)
 create mode 100644 src/components/common/toggle/ToggleRoot.tsx
 create mode 100644 src/components/common/toggle/ToggleThumb.tsx

diff --git a/src/components/common/toggle/Toggle.tsx b/src/components/common/toggle/Toggle.tsx
index a8f1189..b6f8110 100644
--- a/src/components/common/toggle/Toggle.tsx
+++ b/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>
   )
 }
 
diff --git a/src/components/common/toggle/ToggleRoot.tsx b/src/components/common/toggle/ToggleRoot.tsx
new file mode 100644
index 0000000..ded62b3
--- /dev/null
+++ b/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
diff --git a/src/components/common/toggle/ToggleThumb.tsx b/src/components/common/toggle/ToggleThumb.tsx
new file mode 100644
index 0000000..49b6104
--- /dev/null
+++ b/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