feat(global) project init

app/public/hooks/screenSizeTrigger.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+const screenSize = new Map<string, number>(
+    [
+        [ 'sm', 640 ],
+        [ 'md', 768 ],
+        [ 'lg', 1024 ],
+        [ 'xl', 1280 ],
+        [ '2xl', 2536 ]
+    ]
+);
+
+export const useScreenSizeTrigger = (size: number | string) => {
+    const criticalSize = (typeof size === 'string') ? (screenSize.get(size) ?? 768) : size;
+
+    const [ isCritical, setIsCritical ] = useState(false);
+    useEffect(() => {
+        const updateMobileWidth = () => {
+            if (window.innerWidth < criticalSize) {
+                setIsCritical(true);
+            } else {
+                setIsCritical(false);
+            }
+        };
+        updateMobileWidth();
+        window.addEventListener('resize', updateMobileWidth);
+        return () => {
+            window.removeEventListener('resize', updateMobileWidth);
+        };
+
+    });
+
+    return isCritical;
+
+};

app/public/hooks/useScroll.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+const useScroll = () => {
+    const [ isScrolledX, setIsScrolledX ] = useState(false);
+    const [ isScrolledY, setIsScrolledY ] = useState(false);
+    const [ scrollX, setScrollX ] = useState(0);
+    const [ scrollY, setScrollY ] = useState(0);
+
+    const handleScroll = () => {
+        const x = window.scrollX;
+        const y = window.scrollY;
+
+        setScrollX(x);
+        setScrollY(y);
+        setIsScrolledX(x > 0);
+        setIsScrolledY(y > 0);
+    };
+
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll);
+
+        // Cleanup listener on unmount
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+    return [ isScrolledX, isScrolledY, scrollX, scrollY ];
+};
+
+export default useScroll;