Merge pull request #539 from sparcs-kaist/dev

Main branch update from Dev branch

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

@@ -33,7 +33,32 @@
     />
     <!-- <link rel="apple-touch-startup-image" href="/startup.png" /> -->
 
+    <!-- Open Graph : Web -->
+    <meta property="og:url" content="%PUBLIC_URL%" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Taxi" />
+    <meta
+      property="og:description"
+      content="KAIST 구성원들의 택시 동승 인원 모집을 위한 서비스"
+    />
+    <meta property="og:image" content="%PUBLIC_URL%/graph.png" />
+    <meta property="og:locale" content="ko_KR" />
+    <meta property="og:locale:alternate" content="en_US" />
+    <!-- TODO : Open Graph : iOS -->
+    <!-- <meta property="al:ios:url" content=" ios 앱 URL" />
+    <meta property="al:ios:app_store_id" content="ios 앱스토어 ID" /> 
+    <meta property="al:ios:app_name" content="ios 앱 이름" />  -->
+    <!-- TODO : Open Graph : Android -->
+    <!-- <meta property="al:android:url" content="안드로이드 앱 URL" />
+    <meta property="al:android:app_name" content="안드로이드 앱 이름" />
+    <meta property="al:android:package" content="안드로이드 패키지 이름" /> 
+    <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

@@ -0,0 +1,65 @@
+import { useCallback } from "react";
+import { useLocation } from "react-router-dom";
+
+import { kakaoSDKKey } from "loadenv";
+
+type LinkKakaotalkShareProps = {
+  children: React.ReactNode;
+  title?: string;
+  description?: string;
+  buttonText?: string;
+  buttonTo?: string;
+  partNum?: number;
+};
+
+const LinkKakaotalkShare = ({
+  children,
+  title = "Taxi",
+  description = "KAIST 구성원들의 택시 동승 인원 모집을 위한 서비스",
+  buttonText = "사이트로 이동",
+  buttonTo: _buttonTo,
+  partNum,
+}: LinkKakaotalkShareProps) => {
+  const { pathname, search } = useLocation();
+  const buttonTo = _buttonTo ?? pathname + search;
+
+  const onClick = useCallback(() => {
+    const kakao = window.Kakao;
+    const { origin: webUrl } = window.location;
+    if (!kakao) {
+      console.error("Kakao SDK is not loaded.");
+      return;
+    }
+    if (!kakaoSDKKey) {
+      console.error("Kakao SDK key is not set.");
+      return;
+    }
+    if (!kakao.isInitialized()) {
+      kakao.init(kakaoSDKKey);
+    }
+    kakao.Share.sendDefault({
+      objectType: "feed",
+      content: {
+        title,
+        description,
+        imageUrl: `${webUrl}/graph.png`,
+        imageWidth: 1024,
+        imageHeight: 500,
+        link: { webUrl, mobileWebUrl: webUrl },
+      },
+      social: { subscriberCount: partNum ?? 0 },
+      buttons: [
+        {
+          title: buttonText,
+          link: {
+            mobileWebUrl: `${webUrl}${buttonTo}`,
+            webUrl: `${webUrl}${buttonTo}`,
+          },
+        },
+      ],
+    });
+  }, [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>
   );
 };