✨[Feat] 프로필 url 공유하기 추가 및 sns 공유하기 #286

package.json

@@ -20,6 +20,7 @@
     "@fullcalendar/react": "^6.1.15",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-query-devtools": "^5.61.3",
+    "@types/kakao-js-sdk": "^1.39.5",
     "@types/react-datepicker": "^4.19.5",
     "date-fns": "^2.30.0",
     "fabric": "^6.4.3",
@@ -38,7 +39,6 @@
   "devDependencies": {
     "@types/fabric": "^5.3.9",
     "@types/jsonwebtoken": "^9.0.7",
-    "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "10.4.20",

src/app/admin/components/preview/components/preview.tsx

@@ -1,4 +1,5 @@
-import React, { SetStateAction } from "react";
+"use client";
+import React, { SetStateAction, useState } from "react";
 
 import ProfileBox from "@app/admin/components/profile-box";
 import BlockList from "@app/components/page/block-list";
@@ -7,11 +8,13 @@ interface Props {
   setIsOpen?: React.Dispatch<SetStateAction<boolean>>;
 }
 const Preview = ({ setIsOpen }: Props) => {
+  const [userId, setUserId] = useState<string>("");
   return (
     <div className="mx-auto max-w-2xl">
-      <ProfileBox />
-      <BlockList setIsOpen={setIsOpen} />
+      <ProfileBox userId={userId} />
+      <BlockList setIsOpen={setIsOpen} setUserId={setUserId} />
     </div>
+    // <div className="absolute left-1/2 top-[45%] flex h-3/4 w-[30rem] -translate-x-1/2 -translate-y-1/2 transform flex-col gap-4 rounded-3xl bg-slate-333 p-6">
   );
 };
 

src/app/admin/components/profile-box.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useEffect } from "react";
 import { twMerge } from "tailwind-merge";
 import Link from "next/link";
 import Image from "next/image";
@@ -8,9 +8,23 @@ import { usePathname } from "next/navigation";
 import HomeMenu from "@app/admin/components/home-menu";
 import { ClientRoute } from "@config/route";
 
-const ProfileBox = () => {
+import { copyText } from "../../../lib/copy";
+
+interface Props {
+  userId: string;
+}
+const ProfileBox = ({ userId }: Props) => {
   const pathname = usePathname();
   const isAdmin = pathname === "/admin";
+  const shareUrl = `https://linkle-nine.vercel.app/profile/${userId}`;
+
+  // 카카오 로직은 도메인 주소가 필요..
+  // const handleShearToKakao = () => {
+  //   const { Kakao, location } = window;
+  //   Kakao.Share.sendScrap({
+  //     requestUrl: location.href,
+  //   });
+  // };
 
   return (
     <>
@@ -27,17 +41,19 @@ const ProfileBox = () => {
         aria-labelledby="profile-name"
         role="region"
       >
-        <div
+        <button
+          id={"kakaotalk-sharing-btn"}
+          type={"button"}
+          onClick={() => copyText(shareUrl)}
           className="absolute left-2 top-3 h-8 w-8 rounded-full border-2 sm:left-3 sm:top-4 sm:h-10 sm:w-10 md:h-12 md:w-12"
-          aria-hidden="true"
         >
           <Image
             src={"/assets/icons/icon_share.png"}
             alt="프로필 공유 아이콘"
             fill
             className="p-1.5 sm:p-2"
           />
-        </div>
+        </button>
         <Link
           href={ClientRoute.PROFILE.DETAIL}
           aria-label="momomoc 프로필 페이지로 이동"
@@ -55,7 +71,7 @@ const ProfileBox = () => {
             className="mt-2 text-base font-bold underline sm:text-lg"
             id="profile-name"
           >
-            momomoc
+            {userId}
           </span>
         </Link>
         {!isAdmin && <HomeMenu />}

src/app/components/page/block-list.tsx

@@ -25,20 +25,27 @@ const PreviewEvent = dynamic(
 );
 
 interface Props {
+  setUserId: React.Dispatch<React.SetStateAction<string>>;
   setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
-const BlockList = ({ setIsOpen }: Props) => {
+const BlockList = ({ setIsOpen, setUserId }: Props) => {
   const pathname = usePathname();
-  const userId = pathname.split("/")[pathname.length - 1];
+  const splitPathName = pathname.split("/");
+  const userId = splitPathName[splitPathName.length - 1];
   const isAdmin = pathname.includes("admin");
   const [blocks, setBlocks] = useState<Block[]>([]);
+  useEffect(() => {
+    setUserId(userId);
+  }, [pathname]);
 
   useEffect(() => {
     getBlocks().then();
   }, []);
 
   async function getBlocks() {
     const blockApis = await adminApiInstance;
+    if (!isAdmin && !userId) return;
+    console.log(userId);
     const response = userId
       ? await blockApis.getProfileBlocks(userId)
       : await blockApis.getBlocks();

src/app/layout.tsx

@@ -3,9 +3,14 @@ import { cookies } from "next/headers";
 
 import { ThemeToggle } from "@components/common/ui/theme-toggle";
 import ReactQueryProvider from "@components/providers/React-Query-Provider";
+
 //styles
 import "@styles/global.css";
 import "@styles/common.css";
+import Script from "next/script";
+import React from "react";
+
+import KakaoScript from "../utils/kakao-script";
 
 export const metadata: Metadata = {
   title: {
@@ -39,6 +44,11 @@ export const metadata: Metadata = {
 };
 type Theme = "light" | "dark" | undefined;
 
+declare global {
+  interface Window {
+    Kakao: any;
+  }
+}
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -54,6 +64,7 @@ export default function RootLayout({
           <ThemeToggle cookieTheme={theme} />
         </ReactQueryProvider>
       </body>
+      <KakaoScript />
     </html>
   );
 }

src/lib/copy.tsx

@@ -0,0 +1,8 @@
+export const copyText = async (textToCopy: string) => {
+  try {
+    await navigator.clipboard.writeText(textToCopy);
+    alert("프로필 주소가 클립보드에 복사되었어요\n 친구들에게 공유해보세요😊");
+  } catch (err) {
+    console.error("Copy failed: ", err);
+  }
+};

src/utils/kakao-script.tsx

@@ -0,0 +1,90 @@
+"use client";
+import React from "react";
+import Script from "next/script";
+
+const KakaoScript = () => {
+  const onLoad = () => {
+    if (typeof window === undefined) return;
+    window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JS_KEY);
+    window.Kakao.Share.createDefaultButton({
+      container: "#kakaotalk-sharing-btn",
+      objectType: "feed",
+      content: {
+        title: "오늘의 디저트",
+        description: "아메리카노, 빵, 케익",
+        imageUrl:
+          "https://mud-kage.kakao.com/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg",
+        link: {
+          mobileWebUrl: "https://developers.kakao.com",
+          webUrl: "https://developers.kakao.com",
+        },
+      },
+      itemContent: {
+        profileText: "Kakao",
+        profileImageUrl:
+          "https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png",
+        titleImageUrl:
+          "https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png",
+        titleImageText: "Cheese cake",
+        titleImageCategory: "Cake",
+        items: [
+          {
+            item: "Cake1",
+            itemOp: "1000원",
+          },
+          {
+            item: "Cake2",
+            itemOp: "2000원",
+          },
+          {
+            item: "Cake3",
+            itemOp: "3000원",
+          },
+          {
+            item: "Cake4",
+            itemOp: "4000원",
+          },
+          {
+            item: "Cake5",
+            itemOp: "5000원",
+          },
+        ],
+        sum: "Total",
+        sumOp: "15000원",
+      },
+      social: {
+        likeCount: 10,
+        commentCount: 20,
+        sharedCount: 30,
+      },
+      buttons: [
+        {
+          title: "웹으로 이동",
+          link: {
+            mobileWebUrl: "https://developers.kakao.com",
+            webUrl: "https://developers.kakao.com",
+          },
+        },
+        {
+          title: "앱으로 이동",
+          link: {
+            mobileWebUrl: "https://developers.kakao.com",
+            webUrl: "https://developers.kakao.com",
+          },
+        },
+      ],
+    });
+  };
+  return (
+    <Script
+      id={"kakao-sdk"}
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
+      integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmEc1VDxu4yyC7wy6K1Hs90nka"
+      crossOrigin="anonymous"
+      async
+      onLoad={onLoad}
+    />
+  );
+};
+
+export default KakaoScript;