feat: style 사용 변경

YAPP-Github · Dec 30, 2023 · c7ee38a · c7ee38a
1 parent 96d1358
commit c7ee38a
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import { useToast } from '@/src/stores/toastStore';
 
-import { toast } from './style.css';
+import * as styles from './style.css';
 
 const Toast = () => {
   const { toastData, hideToast } = useToast();
@@ -20,7 +20,7 @@ const Toast = () => {
   }, [hideToast, isToastVisible, type]);
 
   return (
-    <div className={toast({ isActive: isToastVisible })} role="alert">
+    <div className={styles.toast({ isActive: isToastVisible })} role="alert">
       <span>{message}</span>
     </div>
   );

diff --git a/src/components/Toast/style.css.ts b/src/components/Toast/style.css.ts
@@ -8,7 +8,7 @@ export const toast = recipe({
   base: [
     modalLayer,
     sprinkles({
-      fontSize: '14/Body/Regular',
+      typography: '14/Body/Regular',
     }),
     {
       backgroundColor: theme.colors['Dim/70'],

diff --git a/src/styles/sprinkles.css.ts b/src/styles/sprinkles.css.ts
@@ -4,7 +4,7 @@ import { COLORS, TYPOGRAPHY } from './tokens';
 
 const fontProperties = defineProperties({
   properties: {
-    fontSize: TYPOGRAPHY,
+    typography: TYPOGRAPHY,
   },
 });