Feat: useOutsideClick 훅 추가 후 headerMenu & LinkCard 에 추가

components/HeaderMenu.tsx

@@ -5,13 +5,19 @@ import Link from "next/link";
 import SubmitButton from "./SubMitButton";
 import { useRouter } from "next/router";
 import useAuthStore from "@/store/useAuthStore";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import Dropdown from "./Dropdown";
+import useOutsideClick from "@/hooks/useOutsideClick";
 
 const HeaderMenu = () => {
   const { user, logout } = useAuthStore();
   const [isOpen, setIsOpen] = useState(false);
   const router = useRouter();
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  useOutsideClick(dropdownRef, () => {
+    setIsOpen(false);
+  });
 
   const dropdownItems = [
     {
@@ -57,6 +63,7 @@ const HeaderMenu = () => {
           <div
             className="flex items-center gap-[6px] text-[14px] leading-[16.71px] font-normal cursor-pointer"
             onClick={() => setIsOpen(!isOpen)}
+            ref={dropdownRef}
           >
             <Image src={Profile} width={28} height={28} alt="프로필" />
             <span className="hidden md:block lg:block">{user?.name}</span>

components/Link/LinkCard.tsx

@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
-import { putLinkFavorite } from "@/lib/api/link";
 import { useLinkCardStore } from "@/store/useLinkCardStore";
 import { ensureAbsoluteUrl } from "@/lib/utils";
 import timeAgo from "@/util/timeAgo";
 import Image from "next/image";
 import Dropdown from "../Dropdown";
 import useModalStore from "@/store/useModalStore";
+import useOutsideClick from "@/hooks/useOutsideClick";
 
 interface LinkCardProps {
   info: {
@@ -24,19 +24,25 @@ const LinkCard = ({ info }: LinkCardProps) => {
   const [isSubscribed, setIsSubscribed] = useState(info.favorite || false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { isOpen, openModal } = useModalStore();
+
   const { updateFavorite } = useLinkCardStore();
 
   const formattedDate = info.createdAt?.slice(0, 10).replace(/-/g, ".");
   const createdTime = timeAgo(info.createdAt);
 
   const router = useRouter();
   const isFavoritePage = router.pathname === "/favorite";
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
 
   // 모달이 열릴 때 드롭다운 닫기
   useEffect(() => {
     if (isOpen) setIsDropdownOpen(false);
   }, [isOpen]);
 
+  useOutsideClick(dropdownRef, () => {
+    setIsDropdownOpen(false);
+  });
+
   // 즐겨찾기 버튼 클릭 시 호출되는 함수
   const handleFavoriteToggle = async () => {
     setIsSubscribed((prev) => !prev);
@@ -103,7 +109,7 @@ const LinkCard = ({ info }: LinkCardProps) => {
           </span>
           {/* isFavoritePage일 때만 케밥 버튼 렌더링 */}
           {!isFavoritePage && (
-            <div className="relative">
+            <div className="relative" ref={dropdownRef}>
               <button
                 className="relative w-[21px] h-[17px]"
                 onClick={toggleDropdown}

hooks/useOutsideClick.tsx

@@ -0,0 +1,18 @@
+import { useEffect, RefObject } from "react";
+
+const useOutsideClick = (ref: RefObject<HTMLElement>, callback: () => void) => {
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        callback();
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [ref, callback]);
+};
+
+export default useOutsideClick;