feat: enhance modal

package.json

@@ -11,13 +11,15 @@
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
+    "@icons-pack/react-simple-icons": "^13.11.2",
     "@tailwindcss/vite": "^4.0.3",
     "clsx": "^2.1.1",
     "gsap": "^3.12.7",
     "i18next": "^23.7.16",
     "i18next-browser-languagedetector": "^7.2.0",
     "jotai": "^2.11.3",
     "lottie-react": "^2.4.1",
+    "lucide-react": "^0.574.0",
     "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/pages/memberspage/modal.tsx

@@ -1,10 +1,17 @@
+import { useGSAP } from "@gsap/react";
+import { SiGithub } from "@icons-pack/react-simple-icons";
+import gsap from "gsap";
+import { Maximize2, Minus, X } from "lucide-react";
+import { useCallback, useEffect, useRef } from "react";
 import ReactDOM from "react-dom";
 import { useTranslation } from "react-i18next";
 import cn from "src/utils/cn";
 
 import { Member } from "../../store/members";
 import { roleLabels, roleStyles } from "./roles";
 
+const DURATION = 0.2;
+
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -13,38 +20,107 @@ interface ModalProps {
 
 const Modal = ({ isOpen, onClose, member }: ModalProps) => {
   const { t, i18n } = useTranslation("main");
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      if (!overlayRef.current || !contentRef.current) return;
+      gsap.fromTo(
+        overlayRef.current,
+        { opacity: 0 },
+        { opacity: 1, duration: DURATION, ease: "power2.out" },
+      );
+      gsap.fromTo(
+        contentRef.current,
+        { opacity: 0, scale: 0.95 },
+        {
+          opacity: 1,
+          scale: 1,
+          duration: DURATION,
+          ease: "power2.out",
+        },
+      );
+    },
+    { dependencies: [isOpen] },
+  );
+
+  const handleClose = useCallback(() => {
+    if (!overlayRef.current || !contentRef.current) {
+      onClose();
+      return;
+    }
+
+    gsap
+      .timeline({
+        onComplete: onClose,
+      })
+      .to(contentRef.current, {
+        opacity: 0,
+        scale: 0.95,
+        duration: DURATION,
+        ease: "power2.in",
+      })
+      .to(
+        overlayRef.current,
+        { opacity: 0, duration: DURATION, ease: "power2.in" },
+        "<",
+      );
+  }, [onClose]);
+
+  useEffect(() => {
+    if (isOpen) {
+      const handleEsc = (e: KeyboardEvent) => {
+        if (e.key === "Escape") handleClose();
+      };
+
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      window.addEventListener("keydown", handleEsc);
+      return () => {
+        document.body.style.overflow = originalOverflow;
+        window.removeEventListener("keydown", handleEsc);
+      };
+    }
+  }, [isOpen, handleClose]);
+
   if (!isOpen) return null;
 
   return ReactDOM.createPortal(
     <div
+      ref={overlayRef}
       className="fixed inset-0 flex items-center justify-center z-50 bg-black/50 backdrop-blur-sm"
-      onClick={() => onClose()}
+      onClick={handleClose}
     >
       <div
-        className="bg-white rounded-xl w-[700px] max-w-[90vw] h-[500px] max-h-[90vh] relative shadow-2xl overflow-hidden border border-gray-300"
+        ref={contentRef}
+        className="bg-white rounded-xl w-[700px] max-w-[90vw] h-[500px] max-h-[90vh] relative shadow-2xl overflow-hidden border border-gray-300 flex flex-col"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="bg-gray-100 px-6 py-4 border-b border-border relative">
-          <div className="flex items-center gap-2">
+        <div className="flex-shrink-0 bg-gray-100 px-6 py-4 border-b border-border relative">
+          <div className="group flex items-center gap-2">
             <button
-              className="w-3 h-3 bg-red-500 rounded-full hover:bg-red-600 transition-colors duration-200 group relative"
-              onClick={onClose}
+              className="size-3.5 bg-red-500 rounded-full hover:bg-red-600 transition-colors duration-200 relative flex items-center justify-center"
+              onClick={handleClose}
             >
-              <span className="absolute inset-0 flex items-center justify-center text-red-800 text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                ×
-              </span>
+              <X
+                className="size-2.5 text-red-900 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                strokeWidth={3}
+              />
             </button>
 
-            <div className="w-3 h-3 bg-yellow-500 rounded-full hover:bg-yellow-600 transition-colors duration-200 group relative">
-              <span className="absolute inset-0 flex items-center justify-center text-yellow-800 text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                −
-              </span>
+            <div className="size-3.5 bg-yellow-500 rounded-full hover:bg-yellow-600 transition-colors duration-200 relative flex items-center justify-center">
+              <Minus
+                className="size-2.5 text-amber-900 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                strokeWidth={3}
+              />
             </div>
 
-            <div className="w-3 h-3 bg-green-500 rounded-full hover:bg-green-600 transition-colors duration-200 group relative">
-              <span className="absolute inset-0 flex items-center justify-center text-green-800 text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                +
-              </span>
+            <div className="size-3.5 bg-green-500 rounded-full hover:bg-green-600 transition-colors duration-200 relative flex items-center justify-center">
+              <Maximize2
+                className="size-2.5 text-green-900 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                strokeWidth={3}
+              />
             </div>
           </div>
 
@@ -55,8 +131,8 @@ const Modal = ({ isOpen, onClose, member }: ModalProps) => {
           </div>
         </div>
 
-        <div className="p-8">
-          <div className="flex flex-col lg:flex-row gap-6">
+        <div className="flex-1 min-h-0 overflow-y-auto p-8">
+          <div className="flex flex-col sm:flex-row gap-6">
             <div className="flex-shrink-0">
               <div className="size-45 bg-gray-50 rounded-xl shadow-sm border border-border overflow-hidden">
                 <img
@@ -88,9 +164,10 @@ const Modal = ({ isOpen, onClose, member }: ModalProps) => {
                     href={`https://github.com/${member.githubID}`}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-blue-600 hover:text-blue-800 font-medium hover:underline transition-colors duration-200"
+                    className="flex items-center gap-2 text-blue-600 hover:text-blue-800 font-medium hover:underline transition-colors duration-200"
                   >
-                    @{member.githubID}
+                    <SiGithub className="w-4 h-4 shrink-0" />
+                    <span>@{member.githubID}</span>
                   </a>
                 </div>
 

yarn.lock

@@ -473,6 +473,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@icons-pack/react-simple-icons@npm:^13.11.2":
+  version: 13.11.2
+  resolution: "@icons-pack/react-simple-icons@npm:13.11.2"
+  peerDependencies:
+    react: ^16.13 || ^17 || ^18 || ^19
+  checksum: 7184be40bad5e520eb12f90d6c1a5dfceee9a354eabbc2365e173929e10b109a56b8e3b764d3ae1cfc7dad8a71f00b074b1a20833b572bc1107ffbbc62592e87
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -3559,6 +3568,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^0.574.0":
+  version: 0.574.0
+  resolution: "lucide-react@npm:0.574.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 26170dd92143a88f749c831c5fa0369841243ef39190b879288d49eb0b6d8ad6add5ce9919e74d2dc70c7937b763ae103914dd76e63d212b6b7ba1b87107eb24
+  languageName: node
+  linkType: hard
+
 "make-fetch-happen@npm:^14.0.3":
   version: 14.0.3
   resolution: "make-fetch-happen@npm:14.0.3"
@@ -4442,6 +4460,7 @@ __metadata:
   resolution: "sample-front@workspace:."
   dependencies:
     "@gsap/react": ^2.1.2
+    "@icons-pack/react-simple-icons": ^13.11.2
     "@tailwindcss/vite": ^4.0.3
     "@types/eslint": ^8.56.2
     "@types/node": ^20.11.5
@@ -4462,6 +4481,7 @@ __metadata:
     i18next-browser-languagedetector: ^7.2.0
     jotai: ^2.11.3
     lottie-react: ^2.4.1
+    lucide-react: ^0.574.0
     prettier: ^3.2.4
     react: ^18.2.0
     react-dom: ^18.2.0