feat. GR_GALLERY_03 템플릿 제작

layers/composables/useBreakpoints.ts

@@ -1,11 +1,23 @@
+const BREAKPOINTS = {
+  xs: 360,
+  sm: 768,
+  md: 1024,
+  lg: 1440,
+} as const
+
 /**
- * 반응형 브레이크포인트 계산 헬퍼
+ * 확실한 반응형 브레이크포인트 헬퍼 (useWindowSize 기반)
  */
-export const useResponsiveBreakpoints = () => {
-  return useBreakpoints({
-    xs: 360, // Mobile: 360px ~ 767px
-    sm: 768, // Tablet: 768px ~ 1023px
-    md: 1024, // PC: 1024px ~ 1439px
-    lg: 1440, // Large PC: 1440px+
-  })
+export const useResponsiveBreakpointsReliable = () => {
+  const { width } = useWindowSize()
+
+  return computed(() => ({
+    xs: width.value >= BREAKPOINTS.xs,
+    sm: width.value >= BREAKPOINTS.sm,
+    md: width.value >= BREAKPOINTS.md,
+    lg: width.value >= BREAKPOINTS.lg,
+    isMobile: width.value < BREAKPOINTS.md,
+    isTablet: width.value >= BREAKPOINTS.sm && width.value < BREAKPOINTS.md,
+    isDesktop: width.value >= BREAKPOINTS.md,
+  }))
 }