일반 게시글 상세페이지 공유하기 UI 추가

src/app/(route)/list/[id]/_components/PostDetail/_internal/PostDetailBody/PostDetailBody.tsx

@@ -1,6 +1,6 @@
 import { formatNumber } from "@/utils";
-import { CategoryType, ItemStatus } from "@/types";
 import { Icon } from "@/components";
+import { CategoryType, ItemStatus } from "@/types";
 import { NoticeChip } from "@/app/(route)/notice/_components";
 import PostChipSection from "../PostChipSection/PostChipSection";
 import { LABELS } from "../../LABELS";

src/app/(route)/list/[id]/_components/PostDetailTopHeader/PostDetailTopHeader.tsx

@@ -1,14 +1,22 @@
 "use client";
 
+import { useState } from "react";
 import { DetailHeader } from "@/components";
+import PostShare from "../PostShare/PostShare";
 
 const PostDetailTopHeader = () => {
+  const [openShareModal, setOpenShareModal] = useState(false);
+
   return (
-    <DetailHeader>
-      <DetailHeader.Star isActive />
-      <DetailHeader.Share />
-      <DetailHeader.Menu />
-    </DetailHeader>
+    <>
+      <DetailHeader>
+        <DetailHeader.Star isActive />
+        <DetailHeader.Share onClick={() => setOpenShareModal(true)} />
+        <DetailHeader.Menu />
+      </DetailHeader>
+
+      <PostShare isOpen={openShareModal} onClose={() => setOpenShareModal(false)} />
+    </>
   );
 };
 

src/app/(route)/list/[id]/_components/PostShare/PostShare.tsx

@@ -0,0 +1,80 @@
+import Image from "next/image";
+import { Button, PopupLayout } from "@/components";
+import { SHARE, ShareId } from "./SHARE";
+
+interface PostShareProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const PostShare = ({ isOpen, onClose }: PostShareProps) => {
+  const handleShareClick = (id: ShareId) => {
+    switch (id) {
+      case "kakao":
+        // kakaoShare();
+        break;
+      case "native":
+        // nativeShare();
+        break;
+      case "copy":
+        // copyLink();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <PopupLayout isOpen={isOpen} onClose={onClose} className="min-h-[305px] space-y-12 px-5 py-10">
+      <section className="gap-5 flex-col-center">
+        <h2 className="text-h3-semibold text-layout-header-default">게시글 공유하기</h2>
+        <div className="w-full gap-[18px] flex-center">
+          {SHARE.map((item) => (
+            <ShareOptionButton
+              key={item.name}
+              src={item.src}
+              name={item.name}
+              onClick={() => handleShareClick(item.id)}
+            />
+          ))}
+        </div>
+      </section>
+
+      <Button aria-label="닫기" onClick={onClose} variant="outlined" className="min-h-11 w-full">
+        닫기
+      </Button>
+    </PopupLayout>
+  );
+};
+
+export default PostShare;
+
+const ShareOptionButton = ({
+  src,
+  name,
+  onClick,
+}: {
+  src: string;
+  name: string;
+  onClick: () => void;
+}) => {
+  return (
+    <button
+      aria-label={name}
+      type="button"
+      className="select-none gap-2 flex-col-center"
+      onClick={onClick}
+    >
+      <Image
+        src={src}
+        alt=""
+        width={60}
+        height={60}
+        draggable={false}
+        priority
+        className="rounded-full"
+      />
+      <span className="text-body2-semibold text-neutral-normal-default">{name}</span>
+    </button>
+  );
+};

src/app/(route)/list/[id]/_components/PostShare/SHARE.ts

@@ -0,0 +1,7 @@
+export const SHARE = [
+  { id: "kakao", src: "/share/share-kakao.svg", name: "카카오톡" },
+  { id: "native", src: "/share/share-native.svg", name: "공유하기" },
+  { id: "copy", src: "/share/share-copy.svg", name: "링크 복사" },
+] as const;
+
+export type ShareId = (typeof SHARE)[number]["id"];

src/app/(route)/list/[id]/_components/index.ts

@@ -1,3 +1,4 @@
 export { default as CommentForm } from "./CommentForm/CommentForm";
 export { default as PostDetail } from "./PostDetail/PostDetail";
 export { default as SimilarItemsSection } from "./SimilarItemsSection/SimilarItemsSection";
+export { default as PostShare } from "./PostShare/PostShare";