Merge pull request #535 from sparcs-kaist/#377.2-kakaotalk-share-button

#377.2 QR-code/카카오톡/링크복사로 방 공유하기

package.json

@@ -28,6 +28,7 @@
     "react-dom": "^17.0.1",
     "react-ga4": "^1.4.1",
     "react-i18next": "^12.0.0",
+    "react-qr-code": "^2.0.11",
     "react-router-dom": "^5.2.0",
     "recoil": "^0.7.5",
     "socket.io-client": "^4.3.2",

public/index.html

@@ -55,6 +55,10 @@
     <meta property="al:web:url" content="안드로이드 앱 URL" /> -->
 
     <!-- Script -->
+    <script
+      async
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
+    ></script>
     <script src="/env.js"></script>
     <script>
       document.documentElement.addEventListener(

src/components/Link/LinkCopy.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+
+import alertAtom from "atoms/alert";
+import { useSetRecoilState } from "recoil";
+
+type LinkCopyProps = {
+  children: React.ReactNode;
+  value: string;
+  onCopy?: (value: string) => void;
+};
+
+const LinkCopy = ({ children, value, onCopy }: LinkCopyProps) => {
+  const setAlert = useSetRecoilState(alertAtom);
+  const onClick = useCallback(() => {
+    if (!navigator.clipboard) {
+      setAlert("복사를 지원하지 않는 브라우저입니다.");
+      return;
+    }
+    navigator.clipboard.writeText(value);
+    if (onCopy) onCopy(value);
+  }, [value, setAlert, onCopy]);
+  return <a onClick={onClick}>{children}</a>;
+};
+
+export default LinkCopy;

src/components/Link/LinkKakaotalkShare.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback } from "react";
 import { useLocation } from "react-router-dom";
 
 import { kakaoSDKKey } from "loadenv";
@@ -9,6 +9,7 @@ type LinkKakaotalkShareProps = {
   description?: string;
   buttonText?: string;
   buttonTo?: string;
+  partNum?: number;
 };
 
 const LinkKakaotalkShare = ({
@@ -17,25 +18,14 @@ const LinkKakaotalkShare = ({
   description = "KAIST 구성원들의 택시 동승 인원 모집을 위한 서비스",
   buttonText = "사이트로 이동",
   buttonTo: _buttonTo,
+  partNum,
 }: LinkKakaotalkShareProps) => {
   const { pathname, search } = useLocation();
   const buttonTo = _buttonTo ?? pathname + search;
 
-  useEffect(() => {
-    // kakaotalk SDK script 추가
-    const script = document.createElement("script");
-    script.src = "https://developers.kakao.com/sdk/js/kakao.js";
-    script.async = true;
-    document.body.appendChild(script);
-
-    return () => {
-      // kakaotalk SDK script 제거
-      document.body.removeChild(script);
-    };
-  }, []);
   const onClick = useCallback(() => {
     const kakao = window.Kakao;
-    const webUrl = "https://taxi.sparcs.org";
+    const { origin: webUrl } = window.location;
     if (!kakao) {
       console.error("Kakao SDK is not loaded.");
       return;
@@ -53,8 +43,11 @@ const LinkKakaotalkShare = ({
         title,
         description,
         imageUrl: `${webUrl}/graph.png`,
+        imageWidth: 1024,
+        imageHeight: 500,
         link: { webUrl, mobileWebUrl: webUrl },
       },
+      social: { subscriberCount: partNum ?? 0 },
       buttons: [
         {
           title: buttonText,
@@ -65,8 +58,8 @@ const LinkKakaotalkShare = ({
         },
       ],
     });
-  }, [title, description, buttonTo]);
-  return <div onClick={onClick}>{children}</div>;
+  }, [title, description, buttonText, buttonTo, partNum]);
+  return <a onClick={onClick}>{children}</a>;
 };
 
 export default LinkKakaotalkShare;

src/components/ModalPopup/NotificationGuide.tsx → src/components/ModalPopup/Body/BodyNotificationGuide.tsx

@@ -1,6 +1,6 @@
 import theme from "tools/theme";
 
-const NotificationGuide = () => {
+const BodyNotificationGuide = () => {
   const styleGuide = {
     ...theme.font12,
     color: theme.gray_text,
@@ -42,4 +42,4 @@ const NotificationGuide = () => {
   );
 };
 
-export default NotificationGuide;
+export default BodyNotificationGuide;

src/components/ModalPopup/PrivacyPolicy.tsx → src/components/ModalPopup/Body/BodyPrivacyPolicy.tsx

@@ -1,6 +1,6 @@
 import theme from "tools/theme";
 
-const PrivacyPolicy = () => {
+const BodyPrivacyPolicy = () => {
   const styleBox = {
     padding: "0 24px 0 16px",
     borderRadius: "10px",
@@ -230,4 +230,4 @@ const PrivacyPolicy = () => {
   );
 };
 
-export default PrivacyPolicy;
+export default BodyPrivacyPolicy;

src/components/ModalPopup/ModalReport/ReportList.tsx → src/components/ModalPopup/Body/BodyReport.tsx

@@ -3,38 +3,46 @@ import { useTranslation } from "react-i18next";
 import DottedLine from "components/DottedLine";
 import Empty from "components/Empty";
 
-import { ReportOptionType } from "./ReportOption";
-
 import { date2str } from "tools/moment";
 import theme from "tools/theme";
 
-type ReportListProps = {
-  option: ReportOptionType;
+type BodyReportProps = {
+  option: "Reporting" | "Reported";
   selectedReportHistory: Array<any>;
 };
 
-const ReportList = (props: ReportListProps) => {
+const ReportList = (props: BodyReportProps) => {
   const { t } = useTranslation("mypage");
-  const styleBox: CSS = {
+
+  const styleContainer = {
+    display: "flex",
+    flexDirection: "column" as any,
+    overflow: "auto",
+    borderRadius: "12px",
+    minHeight: "240px",
+    height: "calc(100vh - 480px)",
+    rowGap: "8px",
+  };
+  const styleBox = {
     display: "flex",
-    flexDirection: "column",
+    flexDirection: "column" as any,
     padding: "10px 12px",
     borderRadius: "12px",
     rowGap: "6px",
     boxShadow: theme.shadow_gray_button_inset,
     backgroundColor: theme.gray_background,
   };
-  const styleRow: CSS = {
+  const styleRow = {
     display: "flex",
-    flexWrap: "nowrap",
+    flexWrap: "nowrap" as any,
     columnGap: "8px",
   };
   const styleProperty = {
     ...theme.font12,
     color: theme.gray_text,
     minWidth: "58px",
   };
-  const styleInfo: CSS = {
+  const styleInfo = {
     ...theme.font12,
   };
   const getTypeText = (type: string) => {
@@ -54,37 +62,37 @@ const ReportList = (props: ReportListProps) => {
     );
   }
   return (
-    <>
+    <div css={styleContainer}>
       {props.selectedReportHistory.map((report) => {
         return (
-          <div key={report._id} style={styleBox}>
-            <div style={styleRow}>
+          <div key={report._id} css={styleBox}>
+            <div css={styleRow}>
               <div style={styleProperty}>{t("page_report.reason")}</div>
               <div style={{ ...styleInfo, color: theme.purple }}>
                 {getTypeText(report.type)}
               </div>
             </div>
             <DottedLine direction="row" margin="2px 0" />
             {props.option === "Reporting" && (
-              <div style={styleRow}>
+              <div css={styleRow}>
                 <div style={styleProperty}>{t("nickname")}</div>
                 <div style={styleInfo}>{report.reportedId.nickname}</div>
               </div>
             )}
-            <div style={styleRow}>
+            <div css={styleRow}>
               <div style={styleProperty}>{t("page_report.date")}</div>
               <div style={styleInfo}>{date2str(report.time)}</div>
             </div>
             {report.type === "etc-reason" && (
-              <div style={styleRow}>
+              <div css={styleRow}>
                 <div style={styleProperty}>{t("page_report.etc_reason")}</div>
                 <div style={styleInfo}>{report.etcDetail}</div>
               </div>
             )}
           </div>
         );
       })}
-    </>
+    </div>
   );
 };