feat: init

hooks/use-breakpoints.ts

@@ -0,0 +1,27 @@
+'use client'
+import React from 'react'
+
+export enum MediaType {
+  mobile = 'mobile',
+  tablet = 'tablet',
+  pc = 'pc',
+}
+
+const useBreakpoints = () => {
+  const [width, setWidth] = React.useState(globalThis.innerWidth);
+  const media = (() => {
+    if (width <= 640) return MediaType.mobile;
+    if (width <= 768) return MediaType.tablet;
+    return MediaType.pc;
+  })();
+
+  React.useEffect(() => {
+    const handleWindowResize = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, []);
+
+  return media;
+}
+
+export default useBreakpoints