Skip to content

Commit dbd8b4f

Browse files
venise5224venise5224
authored
Merge pull request #98 from codeit9-temporary/feature/folderShare
Feat: 소셜 공유 기능 구현
2 parents 1c0a1ad + e1c436a commit dbd8b4f

File tree

7 files changed

+81
-14
lines changed

7 files changed

+81
-14
lines changed

‎components/modal/modalComponents/ModalShare.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,28 @@
1+
import { handleCopyUrl } from "@/util/copyUrl";
2+
import { handleShareFacebook, handleShareKakao } from "@/util/shareSNS";
13
import ModalShareItem from "./ModalShareItem";
4+
import { useEffect } from "react";
25

36
const ModalShare = () => {
7+
useEffect(() => {
8+
if (!window.Kakao.isInitialized()) {
9+
window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
10+
}
11+
}, []);
12+
413
return (
514
<div className="flex gap-8">
6-
<div>
15+
<div onClick={handleShareKakao}>
716
<ModalShareItem src="/icons/Kakao.svg" text="카카오톡" bg="#FEE500" />
817
</div>
9-
<div>
18+
<div onClick={handleShareFacebook}>
1019
<ModalShareItem
1120
src="/icons/Facebook.svg"
1221
text="페이스북"
1322
bg="#1877F2"
1423
/>
1524
</div>
16-
<div>
25+
<div onClick={handleCopyUrl}>
1726
<ModalShareItem
1827
src="/icons/link.svg"
1928
text="링크 복사"

‎components/modal/modalComponents/ModalShareItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const ModalShareItem = ({
1212
color?: string;
1313
}) => {
1414
return (
15-
<div className="flex flex-col justify-center items-center gap-[10px]">
15+
<div className="flex flex-col justify-center items-center gap-[10px] cursor-pointer hover:scale-105">
1616
<div
1717
style={{ backgroundColor: bg }}
1818
className={`bg-[${bg}] size-[42px] rounded-full flex justify-center items-center`}

‎globals.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
declare global {
2+
interface Window {
3+
Kakao: any;
4+
}
5+
}
6+
7+
export {};

‎pages/_app.tsx‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Footer from "@/components/Layout/Footer";
22
import Header from "@/components/Layout/Header";
33
import "@/styles/globals.css";
44
import type { AppProps } from "next/app";
5+
import Head from "next/head";
56
import { useRouter } from "next/router";
67
import { Toaster } from "react-hot-toast";
78

@@ -10,15 +11,34 @@ export default function App({ Component, pageProps }: AppProps) {
1011
const hidePaths = ["/login", "/signup", "/404"];
1112

1213
return (
13-
<div className="min-h-screen flex flex-col">
14-
<div>
15-
<Toaster />
16-
</div>
17-
{!hidePaths.includes(router.pathname) && <Header />}
18-
<div className="flex-grow">
19-
<Component {...pageProps} />
14+
<>
15+
<Head>
16+
<meta property="og:type" content="website" />
17+
{/* <meta property="og:url" content="https://linkbrary.app" /> 배포 후 실제 도메인으로 변경 필요 */}
18+
<meta property="og:title" content="Linkbrary" />
19+
<meta
20+
property="og:description"
21+
content="나만의 링크를 관리하는 Linkbrary"
22+
/>
23+
<meta property="og:image" content="/images/home_main.png" />
24+
<title>Linkbrary</title>
25+
</Head>
26+
27+
<script
28+
defer
29+
src="https://developers.kakao.com/sdk/js/kakao.min.js"
30+
></script>
31+
32+
<div className="min-h-screen flex flex-col">
33+
<div>
34+
<Toaster />
35+
</div>
36+
{!hidePaths.includes(router.pathname) && <Header />}
37+
<div className="flex-grow">
38+
<Component {...pageProps} />
39+
</div>
40+
{!hidePaths.includes(router.pathname) && <Footer />}
2041
</div>
21-
{!hidePaths.includes(router.pathname) && <Footer />}
22-
</div>
42+
</>
2343
);
2444
}

‎pages/_document.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from "next/document";
22

33
export default function Document() {
44
return (
5-
<Html lang="en">
5+
<Html lang="ko">
66
<Head />
77
<body className="antialiased">
88
<Main />

‎util/copyUrl.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import toast from "react-hot-toast";
2+
import toastMessages from "@/lib/toastMessage";
3+
4+
export const handleCopyUrl = () => {
5+
const currentUrl = window.location.href;
6+
navigator.clipboard.writeText(currentUrl);
7+
toast.success(toastMessages.success.copyLink);
8+
};

‎util/shareSNS.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const handleShareFacebook = () => {
2+
const currentUrl = window.location.href;
3+
const sendUrl = encodeURIComponent(currentUrl);
4+
window.open("http://www.facebook.com/sharer/sharer.php?u=" + sendUrl);
5+
};
6+
7+
export const handleShareKakao = () => {
8+
const { Kakao, location } = window;
9+
if (window.Kakao.isInitialized()) {
10+
Kakao.Share.sendDefault({
11+
objectType: "feed",
12+
content: {
13+
title: "나만의 링크 모음",
14+
description: "나에게 필요한 링크만 모아 두었어요!",
15+
imageUrl: "https://linkbrary-sooty.vercel.app/images/home_main.png", //배포 후 실제 도메인으로 변경 필요
16+
link: {
17+
mobileWebUrl: location.href,
18+
webUrl: location.href,
19+
},
20+
},
21+
});
22+
}
23+
};

0 commit comments

Comments
 (0)