[#13] css 사이즈 및 애니메이션 조정

primus-teoSprint · May 12, 2024 · 56d38d0 · 56d38d0
1 parent ddae438
commit 56d38d0
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/components/common/toggle/ToggleRoot.tsx b/src/components/common/toggle/ToggleRoot.tsx
@@ -5,8 +5,8 @@ import { theme } from '@/styles/theme'
 import styled from 'styled-components'
 
 const StyledRoot = styled(Switch.Root)`
-  width: 42px;
-  height: 25px;
+  width: 58px;
+  height: 31px;
   background-color: ${theme.color.grey200};
   border-radius: 9999px;
   position: relative;

diff --git a/src/components/common/toggle/ToggleThumb.tsx b/src/components/common/toggle/ToggleThumb.tsx
@@ -6,17 +6,16 @@ import styled from 'styled-components'
 
 const StyledThumb = styled(Switch.SwitchThumb)`
   display: block;
-  width: 21px;
-  height: 21px;
+  width: 25px;
+  height: 25px;
   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);
+    transform: translateX(30px);
   }
 `