style: mobile 버전에만 노출되게 수정

YAPP-Github · Jul 5, 2023 · dd70126 · dd70126
1 parent 105ef3a
commit dd70126
Showing 1 changed file with 27 additions and 12 deletions.
diff --git a/src/components/BottomButton/BottomButton.css.ts b/src/components/BottomButton/BottomButton.css.ts
@@ -1,18 +1,33 @@
 import { style } from '@vanilla-extract/css';
-import { themeTokens } from '@/styles/theme.css';
+import { themeTokens, screenMQ } from '@/styles/theme.css';
+import { fontVariant } from '@/styles/variant.css';
 
 const { space, zIndices, color } = themeTokens;
 
 export const wrapper = style({
-  position: 'fixed',
-  left: space.none,
-  bottom: space.none,
-  right: space.none,
-  display: 'flex',
-  zIndex: zIndices.sticky,
-  width: '100%',
-  height: '82px',
-  backgroundColor: color.white,
-  flexDirection: 'row',
-  padding: '8Px 20px 20px',
+  display: 'none',
+  '@media': {
+    [screenMQ.m]: {
+      display: 'inline-block',
+      position: 'fixed',
+      left: space.none,
+      bottom: space.none,
+      right: space.none,
+      zIndex: zIndices.sticky,
+      width: '100%',
+      backgroundColor: color.white,
+      flexDirection: 'row',
+      padding: `${space.none} ${space.xl} ${space.xl}`,
+    },
+  },
+});
+export const error = style({
+  marginTop: space.xl,
+  display: 'block',
+  color: color.red500,
+  ...fontVariant.label3,
+});
+
+export const button = style({
+  marginTop: space.sm,
 });