From 1138350210cb6ee2a42cb8a92f5356e338f3d0ff Mon Sep 17 00:00:00 2001
From: HyeongKyeom Kim <97586683+Brokyeom@users.noreply.github.com>
Date: Tue, 20 Aug 2024 02:49:30 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Toggle=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#113)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Toggle 컴포넌트 애니메이션 추가

* changeset
---
 .changeset/dull-years-dream.md   |  5 +++++
 packages/ui/Control/style.css.ts | 11 ++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/dull-years-dream.md

diff --git a/.changeset/dull-years-dream.md b/.changeset/dull-years-dream.md
new file mode 100644
index 0000000..785ac65
--- /dev/null
+++ b/.changeset/dull-years-dream.md
@@ -0,0 +1,5 @@
+---
+"@sopt-makers/ui": patch
+---
+
+Toggle 컴포넌트 애니메이션 추가
diff --git a/packages/ui/Control/style.css.ts b/packages/ui/Control/style.css.ts
index fed6aba..0a0a1bc 100644
--- a/packages/ui/Control/style.css.ts
+++ b/packages/ui/Control/style.css.ts
@@ -103,6 +103,7 @@ const toggleBase = style({
   border: 'none',
   boxSizing: 'border-box',
   cursor: 'pointer',
+  justifyContent: 'flex-start',
 });
 
 const toggleThumbBase = style({
@@ -110,6 +111,9 @@ const toggleThumbBase = style({
   borderRadius: '9999px',
   backgroundColor: theme.colors.white,
   filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.20))',
+  transform: 'translateX(0)',
+  transition: 'transform 200ms',
+  willChange: 'transform',
 });
 
 export const toggleWrapper = styleVariants({
@@ -118,11 +122,8 @@ export const toggleWrapper = styleVariants({
 });
 
 export const toggleState = styleVariants({
-  true: { justifyContent: 'flex-end', backgroundColor: theme.colors.blue400 },
-  false: {
-    justifyContent: 'flex-start',
-    backgroundColor: theme.colors.gray400,
-  },
+  true: { 'backgroundColor': theme.colors.blue400, '& > span[data-state="true"]': { transform: 'translateX(100%)' } },
+  false: { backgroundColor: theme.colors.gray400 },
 });
 
 export const toggleThumb = styleVariants({