✨Feat(#313): 스테디 상세 페이지에 연락수단 클립보드 기능 추가

src/app/(steady)/steady/detail/[id]/page.tsx

@@ -18,6 +18,7 @@ import promoteSteady from "@/services/steady/promoteSteady";
 import type { SteadyDetailsType } from "@/services/types";
 import getMyProfile from "@/services/user/getMyProfile";
 import Button, { buttonSize } from "@/components/_common/Button";
+import ContactTag from "@/components/_common/ContactTag";
 import Dropdown from "@/components/_common/Dropdown";
 import Icon from "@/components/_common/Icon";
 import { AlertModal, InfoModal, UserModal } from "@/components/_common/Modal";
@@ -407,7 +408,7 @@ const SteadyDetailPage = ({ params }: { params: { id: string } }) => {
               </div>
             </div>
           </div>
-          <div className="flex w-full max-lg:flex-col max-lg:gap-10 xl:flex-row">
+          <div className="grid w-full items-center max-sm:grid-cols-1 max-sm:gap-10 sm:grid-cols-1 sm:gap-10 md:grid-cols-2 md:gap-10 lg:grid-cols-2 lg:gap-25 xl:grid-cols-4">
             <div className="flex w-full">
               <div className="flex w-225 items-center gap-10">
                 <div className={steadyDetailTagItems}>진행 방식</div>
@@ -436,6 +437,12 @@ const SteadyDetailPage = ({ params }: { params: { id: string } }) => {
                 </div>
               </div>
             </div>
+            <div className="flex w-full">
+              <div className="flex w-225 items-center gap-10">
+                <div className={steadyDetailTagItems}>연락 수단</div>
+                <ContactTag contactUrl={steadyDetailsData.contact} />
+              </div>
+            </div>
           </div>
           <div className="flex w-full gap-10 max-lg:mt-10">
             <div className={steadyDetailTagItems}>기술 스택</div>

src/app/(user-menu)/mysteady/page.tsx

@@ -4,13 +4,12 @@ import { Fragment } from "react";
 import InfiniteScroll from "react-infinite-scroller";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { useToast } from "@/components/ui/use-toast";
 import { cn } from "@/lib/utils";
-import { CopyIcon } from "@radix-ui/react-icons";
-import { Badge, Separator } from "@radix-ui/themes";
+import { Separator } from "@radix-ui/themes";
 import { format } from "date-fns";
 import type { MySteadyContentType } from "@/services/types";
 import Button, { buttonSize } from "@/components/_common/Button";
+import ContactTag from "@/components/_common/ContactTag";
 import Dropdown from "@/components/_common/Dropdown";
 import Icon from "@/components/_common/Icon";
 import { AlertModal } from "@/components/_common/Modal";
@@ -40,7 +39,6 @@ const MySteadyPage = () => {
     direction: "desc",
   });
   const ref = useScrollTo<HTMLDivElement>({ top: 0 }, [search]);
-  const { toast } = useToast();
 
   const renderIcon = (steady: MySteadyContentType) => {
     if (search === "finished") {
@@ -109,22 +107,6 @@ const MySteadyPage = () => {
     }
   };
 
-  const handleCopyClipBoard = async (text: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      toast({
-        description: "연락 수단 복사 성공!",
-        variant: "green",
-      });
-    } catch (error) {
-      toast({
-        description: "연락 수단 복사 실패!",
-        variant: "red",
-      });
-      console.error("복사에 실패했습니다.");
-    }
-  };
-
   return (
     <div className="flex flex-col max-sm:w-400 sm:w-500 md:w-600 lg:w-800 xl:w-1000">
       <div className="flex items-center justify-between">
@@ -174,18 +156,7 @@ const MySteadyPage = () => {
                       </div>
                     </Link>
                     <div className="flex items-center justify-center gap-20">
-                      <Badge
-                        color={"indigo"}
-                        size={"2"}
-                      >
-                        <button
-                          className="flex items-center gap-10"
-                          onClick={() => handleCopyClipBoard(steady.contact)}
-                        >
-                          <div>연락 수단</div>
-                          <CopyIcon />
-                        </button>
-                      </Badge>
+                      <ContactTag contactUrl={steady.contact} />
                       <div className="text-bold max-w-fit text-15 text-st-gray-100 max-sm:hidden">
                         {steady.isLeader ? "생성일: " : "참여일: "}
                         {format(new Date(steady.joinedAt), "yyyy.MM.dd")}

src/components/_common/ContactTag/index.tsx

@@ -0,0 +1,24 @@
+import { CopyIcon } from "@radix-ui/react-icons";
+import { Badge } from "@radix-ui/themes";
+import useCopySteadyContact from "@/hooks/useCopySteadyContact";
+
+const ContactTag = ({ contactUrl }: { contactUrl: string }) => {
+  const { copySteadyContact } = useCopySteadyContact();
+
+  return (
+    <Badge
+      color={"indigo"}
+      size={"2"}
+    >
+      <button
+        className="flex items-center gap-10"
+        onClick={() => copySteadyContact(contactUrl)}
+      >
+        <div>연락 수단</div>
+        <CopyIcon />
+      </button>
+    </Badge>
+  );
+};
+
+export default ContactTag;

src/hooks/useCopySteadyContact.ts

@@ -0,0 +1,25 @@
+import { useToast } from "@/components/ui/use-toast";
+
+const useCopySteadyContact = () => {
+  const { toast } = useToast();
+
+  const copySteadyContact = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast({
+        description: "연락 수단 복사 성공!",
+        variant: "green",
+      });
+    } catch (error) {
+      toast({
+        description: "연락 수단 복사 실패!",
+        variant: "red",
+      });
+      console.error("복사에 실패했습니다.");
+    }
+  };
+
+  return { copySteadyContact };
+};
+
+export default useCopySteadyContact;