fix. 미디어쿼리 구간 추가 정의

Made-with: Cursor

layers/composables/useBreakpoints.ts

@@ -6,6 +6,7 @@ export const BREAKPOINTS = {
   sm: 768,
   md: 1024,
   lg: 1440,
+  xl: 1920,
 } as const
 
 /**
@@ -13,14 +14,19 @@ export const BREAKPOINTS = {
  */
 export const useResponsiveBreakpoints = () => {
   const breakpoints = useBreakpoints(BREAKPOINTS)
-  const isXs = breakpoints.smaller('sm') // < 768
+  const isXs = breakpoints.smaller('sm') // x < 768
   const isSm = breakpoints.between('sm', 'md') // 768 <= x < 1024
   const isMd = breakpoints.between('md', 'lg') // 1024 <= x < 1440
-  const isLg = breakpoints.greaterOrEqual('lg') // >= 1440
+  const isLg = breakpoints.greaterOrEqual('lg') // x >= 1440
 
   const isMobile = breakpoints.smaller('md') // < 1024
   const isDesktop = breakpoints.greaterOrEqual('md') // >= 1024
 
+  const isAboveSm = breakpoints.greaterOrEqual('sm') // x >= 768
+  const isAboveMd = breakpoints.greaterOrEqual('md') // x >= 1024
+  const isAboveLg = breakpoints.greaterOrEqual('lg') // x >= 1440
+  const isAboveXl = breakpoints.greaterOrEqual('xl') // x >= 1920
+
   return computed(() => ({
     isXs: isXs.value,
     isSm: isSm.value,
@@ -28,6 +34,10 @@ export const useResponsiveBreakpoints = () => {
     isLg: isLg.value,
     isMobile: isMobile.value,
     isDesktop: isDesktop.value,
+    isAboveSm: isAboveSm.value,
+    isAboveMd: isAboveMd.value,
+    isAboveLg: isAboveLg.value,
+    isAboveXl: isAboveXl.value,
   }))
 }
 

tailwind.config.ts

@@ -9,11 +9,12 @@ export default {
   theme: {
     extend: {
       screens: {
-        xxs: '0px', // 0px ~ 359px
-        xs: '360px', // Mobile: 360px ~ 767px
-        sm: '768px', // Tablet: 768px ~ 1023px
-        md: '1024px', // PC: 1024px ~ 1439px
+        xxs: '0px', // 0px+
+        xs: '360px', // Mobile: 360px+
+        sm: '768px', // Tablet: 768px+
+        md: '1024px', // PC: 1024px+
         lg: '1440px', // Large PC: 1440px+
+        xl: '1920px', // Extra Large PC: 1920px+
       },
       colors: {
         'theme-foreground': 'var(--foreground)',