Merge pull request #63 from Team-Remini/feat/#60

Feat/#60/URL 공유 기능 추가
Team-Remini · Dec 18, 2023 · 55f7943 · 55f7943
2 parents e2b1c11 + 007c3c6
commit 55f7943
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,15 @@
       http-equiv="Content-Security-Policy"
       content="upgrade-insecure-requests"
     />
+
+    <!-- URL 프리뷰를 위한 Open Graph 메타 태그 추가 -->
+    <meta property="og:title" content="REMINI" />
+    <meta property="og:description" content="맞춤 회고 유형 추천 및 가이드" />
+    <meta
+      property="og:image"
+      content="https://github.com/Team-Remini/Remini-Public-img/assets/104755384/a5efebb5-3655-4b01-9dcf-f77da70e988a"
+    />
+    <meta property="og:url" content="https://remini.vercel.app/" />
     <title>REMINI</title>
   </head>
   <body>

diff --git a/src/components/Modal/ShareModal.tsx b/src/components/Modal/ShareModal.tsx
@@ -1,9 +1,18 @@
 import React from "react";
 import ModalWrap from "./ModalWrap.tsx";
 
-//공유 확인 모달
 const ShareModal: React.FC<{ closeModal: () => void }> = ({ closeModal }) => {
-  const closeAndStay = () => {
+  const copyUrlToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      console.log("클립보드 복사 성공");
+    } catch (error) {
+      console.error("클립보드 복사에 실패했습니다.", error);
+    }
+  };
+
+  const copyAndStay = () => {
+    copyUrlToClipboard();
     closeModal();
     document.body.style.overflow = "";
   };
@@ -13,7 +22,7 @@ const ShareModal: React.FC<{ closeModal: () => void }> = ({ closeModal }) => {
       <h1>회고의 URL이 복사되었어요! </h1>
       <p>URL을 공유해보세요.</p>
       <div className="btn_container">
-        <button className="main_btn" onClick={closeAndStay}>
+        <button className="main_btn" onClick={copyAndStay}>
           확인
         </button>
       </div>

diff --git a/src/pages/Complete/CompleteWriting.tsx b/src/pages/Complete/CompleteWriting.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
-import { Navigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { Header } from "../../components/Header";
 import styled from "styled-components";
 import AAR from "../../components/CompleteWriting/AAR";