feat(WEB-154): my profile view

components/Modal/Overlay/index.tsx

@@ -0,0 +1,44 @@
+"use client"
+import { useCallback, useLayoutEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import { useHandleKeyPress } from "@/hooks/useHandleKeyPress";
+
+import styles from "./overlay.module.css"
+
+export default function Overlay({ children }: React.PropsWithChildren) {
+  const router = useRouter()
+
+  const handleOnClose = useCallback(() => {
+    return router.back()
+  }, [router])
+
+  const handleOnEscape = useCallback((evt: KeyboardEvent) => {
+    if (evt.code === "Escape") {
+      handleOnClose()
+    }
+  }, [handleOnClose])
+
+  useHandleKeyPress(handleOnEscape)
+
+  useLayoutEffect(() => {
+    // Get original body overflow
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    // Prevent scrolling on mount
+    document.body.style.overflow = 'hidden';
+    // Re-enable scrolling when component unmounts
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []);
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={handleOnClose}
+      role="button"
+    >
+      {children}
+    </div>
+  );
+};

components/Modal/Overlay/overlay.module.css

@@ -0,0 +1,9 @@
+.overlay {
+  background-color: rgba(0, 0, 0, 0.3);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9999;
+}