반응형 레이아웃 기능 구현

frontend/hooks/useBreakpoint.ts

@@ -0,0 +1,45 @@
+/**
+ * 반응형 브레이크포인트 감지 훅
+ */
+
+import { useState, useEffect } from "react";
+import { Breakpoint, BREAKPOINTS } from "@/types/responsive";
+
+/**
+ * 현재 윈도우 크기에 따른 브레이크포인트 반환
+ */
+export function useBreakpoint(): Breakpoint {
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>("desktop");
+
+  useEffect(() => {
+    const updateBreakpoint = () => {
+      const width = window.innerWidth;
+
+      if (width >= BREAKPOINTS.desktop.minWidth) {
+        setBreakpoint("desktop");
+      } else if (width >= BREAKPOINTS.tablet.minWidth) {
+        setBreakpoint("tablet");
+      } else {
+        setBreakpoint("mobile");
+      }
+    };
+
+    // 초기 실행
+    updateBreakpoint();
+
+    // 리사이즈 이벤트 리스너 등록
+    window.addEventListener("resize", updateBreakpoint);
+
+    return () => window.removeEventListener("resize", updateBreakpoint);
+  }, []);
+
+  return breakpoint;
+}
+
+/**
+ * 현재 브레이크포인트의 컬럼 수 반환
+ */
+export function useGridColumns(): number {
+  const breakpoint = useBreakpoint();
+  return BREAKPOINTS[breakpoint].columns;
+}