From d8ebd9099036d98604002b0068d94e8121245ebf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=EB=AF=BC=EC=98=A4?= <jbj338033@gmail.com>
Date: Tue, 10 Dec 2024 11:05:19 +0900
Subject: [PATCH] feat: optimize school activity button

---
 .../home/SchoolActivityButton/index.tsx       | 263 ++++++++++++++----
 .../home/SchoolActivityButton/style.ts        |  69 ++++-
 2 files changed, 263 insertions(+), 69 deletions(-)

diff --git a/src/components/home/SchoolActivityButton/index.tsx b/src/components/home/SchoolActivityButton/index.tsx
index 636d4e1..36ef8f2 100644
--- a/src/components/home/SchoolActivityButton/index.tsx
+++ b/src/components/home/SchoolActivityButton/index.tsx
@@ -1,104 +1,215 @@
-import { useState } from "react";
+import { useState, useCallback, memo, useEffect, useRef } from "react";
 import { IoArrowForward } from "react-icons/io5";
 import { BiCodeAlt, BiMath } from "react-icons/bi";
 import { HiOutlineAcademicCap } from "react-icons/hi";
 import { DiDatabase } from "react-icons/di";
-import * as S from "./style";
-import { AnimatePresence } from "framer-motion";
 import { AiFillRobot } from "react-icons/ai";
+import { AnimatePresence } from "framer-motion";
+import * as S from "./style";
 
+// Types
 interface Activity {
-  id: string;
-  name: string;
-  description: string;
-  path: string;
-  icon: JSX.Element;
+  readonly id: string;
+  readonly name: string;
+  readonly description: string;
+  readonly path: string;
+  readonly icon: JSX.Element;
 }
 
-const activities: Activity[] = [
+interface ActivityItemProps extends Omit<Activity, "id"> {
+  onClick?: () => void;
+}
+
+// Constants
+const EMPHASIS_THRESHOLD = 0.9; // 90% for emphasis
+
+// Animation variants
+const menuVariants = {
+  hidden: { opacity: 0, y: 20, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 0.2 },
+  },
+  exit: {
+    opacity: 0,
+    y: 20,
+    scale: 0.95,
+    transition: { duration: 0.2 },
+  },
+};
+
+const arrowVariants = {
+  hidden: { opacity: 0, x: 0 },
+  visible: { opacity: 1, x: 4 },
+};
+
+const emphasisVariants = {
+  normal: {
+    scale: 1,
+    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+  },
+  emphasis: {
+    scale: 1.05,
+    boxShadow: "0 8px 12px rgba(0, 0, 0, 0.15)",
+    transition: {
+      duration: 0.3,
+      ease: "easeOut",
+    },
+  },
+};
+
+const activities: readonly Activity[] = [
   {
     id: "narsha",
     name: "나르샤",
     description: "교내 IT 프로젝트",
     path: "/narsha",
-    icon: <BiCodeAlt size={20} />,
+    icon: <BiCodeAlt size={20} aria-hidden="true" />,
   },
   {
     id: "database",
     name: "데이터베이스 수업",
     description: "데이터베이스 수업 프로젝트",
     path: "/database",
-    icon: <DiDatabase size={20} />,
+    icon: <DiDatabase size={20} aria-hidden="true" />,
   },
   {
     id: "algorithm",
     name: "자료구조 수업",
     description: "자료구조 수업 프로젝트",
     path: "/algorithm",
-    icon: <HiOutlineAcademicCap size={20} />,
+    icon: <HiOutlineAcademicCap size={20} aria-hidden="true" />,
   },
   {
     id: "ai",
     name: "인공지능 수업",
     description: "인공지능 수업 프로젝트",
     path: "/ai",
-    icon: <AiFillRobot size={20} />,
+    icon: <AiFillRobot size={20} aria-hidden="true" />,
   },
   {
     id: "math",
     name: "수학 수업",
     description: "수학 수업 프로젝트",
     path: "/math",
-    icon: <BiMath size={20} />,
+    icon: <BiMath size={20} aria-hidden="true" />,
   },
 ];
 
-const ActivityItem = ({
-  name,
-  description,
-  path,
-  icon,
-}: Omit<Activity, "id">) => {
-  const [showArrow, setShowArrow] = useState(false);
+const ActivityItem = memo(
+  ({ name, description, path, icon, onClick }: ActivityItemProps) => {
+    const [showArrow, setShowArrow] = useState(false);
 
-  return (
-    <S.Item
-      to={path}
-      onMouseEnter={() => setShowArrow(true)}
-      onMouseLeave={() => setShowArrow(false)}
-      whileHover={{ scale: 1.02 }}
-      whileTap={{ scale: 0.98 }}
-    >
-      <S.IconBox>{icon}</S.IconBox>
-      <S.Content>
-        <S.Name>{name}</S.Name>
-        <S.ItemDescription>{description}</S.ItemDescription>
-      </S.Content>
-      <S.Arrow
-        animate={{
-          opacity: showArrow ? 1 : 0,
-          x: showArrow ? 4 : 0,
-        }}
-        initial={false}
+    return (
+      <S.Item
+        to={path}
+        onMouseEnter={() => setShowArrow(true)}
+        onMouseLeave={() => setShowArrow(false)}
+        onClick={onClick}
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.98 }}
+        role="link"
+        aria-label={`${name} - ${description}`}
       >
-        <IoArrowForward />
-      </S.Arrow>
-    </S.Item>
-  );
-};
+        <S.IconBox>{icon}</S.IconBox>
+        <S.Content>
+          <S.Name>{name}</S.Name>
+          <S.ItemDescription>{description}</S.ItemDescription>
+        </S.Content>
+        <S.Arrow
+          variants={arrowVariants}
+          animate={showArrow ? "visible" : "hidden"}
+          initial={false}
+        >
+          <IoArrowForward aria-hidden="true" />
+        </S.Arrow>
+      </S.Item>
+    );
+  }
+);
+
+ActivityItem.displayName = "ActivityItem";
 
 const SchoolActivityButton = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const [showEmphasis, setShowEmphasis] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const hasShownEmphasis = useRef(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const windowHeight = window.innerHeight;
+      const documentHeight = document.documentElement.scrollHeight;
+      const scrollTop = window.scrollY;
+      const progress = scrollTop / (documentHeight - windowHeight);
+
+      setScrollProgress(progress);
+
+      if (progress >= EMPHASIS_THRESHOLD && !hasShownEmphasis.current) {
+        setShowEmphasis(true);
+        hasShownEmphasis.current = true;
+
+        setTimeout(() => {
+          setShowEmphasis(false);
+        }, 3000);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    handleScroll(); // Initial check
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+    setShowEmphasis(false);
+  }, []);
+
+  const handleItemClick = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        buttonRef.current &&
+        !buttonRef.current.contains(e.target as Node) &&
+        isOpen
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleEscape);
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      window.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
 
   return (
     <S.Container>
       <AnimatePresence>
         {isOpen && (
           <S.Menu
-            initial={{ opacity: 0, y: 20, scale: 0.95 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: 20, scale: 0.95 }}
-            transition={{ duration: 0.2 }}
+            variants={menuVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            role="dialog"
+            aria-label="School Activities Menu"
           >
             <S.Header>
               <S.Title>School Activities</S.Title>
@@ -106,25 +217,55 @@ const SchoolActivityButton = () => {
                 학교 생활과 관련된 다양한 활동들을 소개합니다.
               </S.Description>
             </S.Header>
-            <S.List>
+            <S.List role="list">
               {activities.map((activity) => (
-                <ActivityItem key={activity.id} {...activity} />
+                <ActivityItem
+                  key={activity.id}
+                  {...activity}
+                  onClick={handleItemClick}
+                />
               ))}
             </S.List>
           </S.Menu>
         )}
       </AnimatePresence>
-      <S.Button
-        onClick={() => setIsOpen(!isOpen)}
-        isOpen={isOpen}
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
-      >
-        <HiOutlineAcademicCap size={20} />
-        <span>School Activities</span>
-      </S.Button>
+      <S.ButtonWrapper>
+        {showEmphasis && (
+          <S.EmphasisHint
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+          >
+            클릭해서 더 많은 활동을 확인해보세요!
+          </S.EmphasisHint>
+        )}
+        <S.Button
+          ref={buttonRef}
+          onClick={handleToggle}
+          isOpen={isOpen}
+          visibility={scrollProgress}
+          animate={{
+            ...(scrollProgress >= EMPHASIS_THRESHOLD
+              ? emphasisVariants.emphasis
+              : emphasisVariants.normal),
+            transition: {
+              type: "spring",
+              stiffness: 260,
+              damping: 20,
+            },
+          }}
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          aria-expanded={isOpen}
+          aria-haspopup="dialog"
+          initial={{ opacity: 1, scale: 1 }}
+        >
+          <HiOutlineAcademicCap size={20} aria-hidden="true" />
+          <span>School Activities</span>
+        </S.Button>
+      </S.ButtonWrapper>
     </S.Container>
   );
 };
 
-export default SchoolActivityButton;
+export default memo(SchoolActivityButton);
diff --git a/src/components/home/SchoolActivityButton/style.ts b/src/components/home/SchoolActivityButton/style.ts
index 0efe35d..39f1f28 100644
--- a/src/components/home/SchoolActivityButton/style.ts
+++ b/src/components/home/SchoolActivityButton/style.ts
@@ -9,6 +9,37 @@ export const Container = styled.div`
   z-index: 100;
 `;
 
+export const ButtonWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end; // 오른쪽 정렬로 변경
+`;
+
+export const EmphasisHint = styled(motion.div)`
+  position: absolute;
+  top: -48px;
+  right: 0; // 오른쪽 정렬로 변경
+  transform: none; // transform 제거
+  background: ${({ theme }) => theme.colors.primary.main};
+  color: ${({ theme }) => theme.colors.text.inverse};
+  padding: ${({ theme }) => `${theme.spacing.xs} ${theme.spacing.md}`};
+  border-radius: ${({ theme }) => theme.borderRadius.md};
+  font-size: ${({ theme }) => theme.fontSize.sm};
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  white-space: nowrap;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+  z-index: 1;
+
+  @media (max-width: 768px) {
+    width: auto;
+    right: 0;
+    font-size: ${({ theme }) => theme.fontSize.xs};
+    padding: ${({ theme }) => `${theme.spacing.xxs} ${theme.spacing.sm}`};
+  }
+`;
+
 export const Menu = styled(motion.div)`
   position: absolute;
   bottom: 80px;
@@ -58,7 +89,11 @@ export const IconBox = styled.div`
   width: 40px;
   height: 40px;
   border-radius: ${({ theme }) => theme.borderRadius.md};
-  background: linear-gradient(135deg, ${({ theme }) => theme.colors.primary.main}, ${({ theme }) => theme.colors.primary.light});
+  background: linear-gradient(
+    135deg,
+    ${({ theme }) => theme.colors.primary.main},
+    ${({ theme }) => theme.colors.primary.light}
+  );
   color: ${({ theme }) => theme.colors.text.inverse};
   flex-shrink: 0;
 `;
@@ -67,6 +102,7 @@ export const Arrow = styled(motion.div)`
   color: ${({ theme }) => theme.colors.primary.main};
   font-size: ${({ theme }) => theme.fontSize.md};
   flex-shrink: 0;
+  transition: transform 0.2s ease;
 `;
 
 export const Content = styled.div`
@@ -101,16 +137,22 @@ export const Item = styled(motion(Link))`
   border-radius: ${({ theme }) => theme.borderRadius.md};
   background: ${({ theme }) => theme.colors.background.alt};
   border: 1px solid ${({ theme }) => theme.colors.border.light};
-  transition: ${({ theme }) => theme.transition.normal};
+  transition: all 0.2s ease;
 
   &:hover {
     background: ${({ theme }) => theme.colors.background.paper};
     border-color: ${({ theme }) => theme.colors.border.default};
+    transform: translateX(4px);
+
+    ${Arrow} {
+      transform: translateX(4px);
+    }
   }
 `;
 
 interface ButtonProps {
   isOpen: boolean;
+  visibility?: number;
 }
 
 export const Button = styled(motion.button)<ButtonProps>`
@@ -118,24 +160,35 @@ export const Button = styled(motion.button)<ButtonProps>`
   align-items: center;
   gap: ${({ theme }) => theme.spacing.xs};
   padding: ${({ theme }) => `${theme.spacing.sm} ${theme.spacing.lg}`};
-  background: ${({ theme, isOpen }) => 
+  background: ${({ theme, isOpen }) =>
     isOpen ? theme.colors.primary.main : theme.colors.background.paper};
-  color: ${({ theme, isOpen }) => 
+  color: ${({ theme, isOpen }) =>
     isOpen ? theme.colors.text.inverse : theme.colors.text.primary};
-  border: 1px solid ${({ theme, isOpen }) => 
-    isOpen ? theme.colors.primary.main : theme.colors.border.light};
+  border: 1px solid
+    ${({ theme, isOpen }) =>
+      isOpen ? theme.colors.primary.main : theme.colors.border.light};
   border-radius: ${({ theme }) => theme.borderRadius.full};
   font-size: ${({ theme }) => theme.fontSize.md};
   font-weight: ${({ theme }) => theme.fontWeight.medium};
   cursor: pointer;
   backdrop-filter: blur(20px);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-  transition: ${({ theme }) => theme.transition.normal};
+  box-shadow: ${({ visibility = 0 }) =>
+    `0 ${4 + visibility * 4}px ${16 + visibility * 16}px rgba(0, 0, 0, ${
+      0.2 + visibility * 0.2
+    })`};
+  transition: all 0.3s ease;
+  transform: scale(${({ visibility = 0 }) => 0.9 + visibility * 0.1});
+  opacity: ${({ visibility = 0 }) => Math.min(1, visibility * 2)};
 
   &:hover {
     background: ${({ theme, isOpen }) =>
       isOpen ? theme.colors.primary.hover : theme.colors.background.alt};
     border-color: ${({ theme, isOpen }) =>
       isOpen ? theme.colors.primary.hover : theme.colors.border.default};
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
   }
 `;