fix(responsive style): 반응형 규격 변경

Team-INSERT · Apr 13, 2024 · 9ab6e18 · 9ab6e18
1 parent e5098ce
commit 9ab6e18
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/app/coin/TradeHistory.css.ts b/app/coin/TradeHistory.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme, screen } from "@/styles";
 import StyleVariantsType from "@/types/styleVariants.interface";
 import { style, styleVariants } from "@vanilla-extract/css";
 
@@ -20,7 +20,7 @@ export const hgroup = style({
   ...flex.VERTICAL,
 
   "@media": {
-    "screen and (max-width: 480px)": {
+    [`screen and (max-width: ${screen.phone})`]: {
       ...flex.COLUMN_CENTER,
     },
   },

diff --git a/app/coin/style.css.ts b/app/coin/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme, screen } from "@/styles";
 import StyleVariantsType from "@/types/styleVariants.interface";
 import { style, styleVariants } from "@vanilla-extract/css";
 
@@ -15,7 +15,7 @@ export const utilityBox = style({
   ...flex.VERTICAL,
 
   "@media": {
-    "screen and (max-width: 480px)": {
+    [`screen and (max-width: ${screen.phone})`]: {
       ...flex.COLUMN_FLEX,
     },
   },
@@ -64,7 +64,7 @@ export const tradeToggleBase = style({
   ...flex.CENTER,
 
   "@media": {
-    "screen and (max-width: 480px)": {
+    [`screen and (max-width: ${screen.phone})`]: {
       width: "30%",
     },
   },
@@ -133,7 +133,7 @@ export const chartHeader = style({
   ...flex.BETWEEN,
 
   "@media": {
-    "screen and (max-width: 480px)": {
+    [`screen and (max-width: ${screen.phone})`]: {
       ...flex.COLUMN_FLEX,
     },
   },