feat: Toggle 컴포넌트 애니메이션 추가 (#113)

* feat: Toggle 컴포넌트 애니메이션 추가 * changeset
sopt-makers · Aug 19, 2024 · 1138350 · 1138350
1 parent 02023a2
commit 1138350
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/.changeset/dull-years-dream.md 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
@@ -103,13 +103,17 @@ const toggleBase = style({
   border: 'none',
   boxSizing: 'border-box',
   cursor: 'pointer',
+  justifyContent: 'flex-start',
 });
 
 const toggleThumbBase = style({
   display: 'block',
   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({