#592 공유하기 링크의 OG image URL 수정

src/components/Link/LinkKakaotalkShare.tsx

@@ -7,6 +7,7 @@ type LinkKakaotalkShareProps = {
   children: React.ReactNode;
   title?: string;
   description?: string;
+  imageUrl?: string;
   buttonText?: string;
   buttonTo?: string;
   partNum?: number;
@@ -16,6 +17,7 @@ const LinkKakaotalkShare = ({
   children,
   title = "Taxi",
   description = "KAIST 구성원들의 택시 동승 인원 모집을 위한 서비스",
+  imageUrl,
   buttonText = "사이트로 이동",
   buttonTo: _buttonTo,
   partNum,
@@ -42,7 +44,7 @@ const LinkKakaotalkShare = ({
       content: {
         title,
         description,
-        imageUrl: `${webUrl}/graph.png`,
+        imageUrl: imageUrl || `${webUrl}/graph.png`,
         imageWidth: 1024,
         imageHeight: 500,
         link: { webUrl, mobileWebUrl: webUrl },

src/components/ModalPopup/Body/BodyRoomShare.tsx

@@ -12,6 +12,7 @@ import { getLocationName } from "tools/trans";
 
 import CheckIcon from "@mui/icons-material/Check";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { ogServer } from "loadenv";
 import { ReactComponent as KakaoTalkLogo } from "static/assets/KakaoTalkLogo.svg";
 
 type ButtonShareProps = {
@@ -119,6 +120,7 @@ const BodyRoomShare = ({ roomInfo, height }: BodyRoomShareProps) => {
           )} → ${getLocationName(roomInfo.to, i18n.language)}, ${date2str(
             roomInfo.time
           )}`}
+          imageUrl={ogServer ? `ogServer/${roomInfo._id}.png` : undefined}
           buttonText="확인하기"
           buttonTo={pathForShare}
           partNum={roomInfo.part.length}

src/components/Skeleton/ChannelTalkProvider/index.tsx

@@ -16,7 +16,7 @@ const ChannelTalkProvider = () => {
   const error = useRecoilValue(errorAtom);
 
   useEffect(() => {
-    if (loginInfo) {
+    if (channelTalkPluginKey && loginInfo) {
       ChannelService.updateUser({
         profile: {
           name: loginInfo?.name,
@@ -27,12 +27,14 @@ const ChannelTalkProvider = () => {
   }, [loginInfo]);
 
   useEffect(() => {
-    ChannelService.boot({
-      pluginKey: channelTalkPluginKey,
-      // login 페이지와 error 페이지에서는 채널톡 버튼을 띄웁니다.
-      hideChannelButtonOnBoot: !pathname.startsWith("/login") && !error,
-      customLauncherSelector: ".popup-channeltalk",
-    });
+    if (channelTalkPluginKey) {
+      ChannelService.boot({
+        pluginKey: channelTalkPluginKey,
+        // login 페이지와 error 페이지에서는 채널톡 버튼을 띄웁니다.
+        hideChannelButtonOnBoot: !pathname.startsWith("/login") && !error,
+        customLauncherSelector: ".popup-channeltalk",
+      });
+    }
   }, [pathname, error]);
   return null;
 };

src/components/Skeleton/FirebaseMessagingProvider.tsx

@@ -30,14 +30,22 @@ const FirebaseMessagingProvider = () => {
         return;
       }
 
+      if (!firebaseApp || !firebaseConfig) return;
+
       // 브라우저가 FCM을 지원하는 경우 FCM 서버로부터 deviceToken을 발급받습니다.
       const firebaseMessaging = getMessaging(firebaseApp);
       const newDeviceToken = await getToken(firebaseMessaging);
 
       // 환경변수가 주입된 서비스 워커를 새로 등록합니다.
-      const firebaseConfigUrlParams = new URLSearchParams(
-        firebaseConfig
-      ).toString();
+      const firebaseConfigUrlParams = new URLSearchParams({
+        apiKey: firebaseConfig.apiKey,
+        authDomain: firebaseConfig.authDomain,
+        projectId: firebaseConfig.projectId,
+        storageBucket: firebaseConfig.storageBucket,
+        messagingSenderId: firebaseConfig.messagingSenderId,
+        appId: firebaseConfig.appId,
+        measurementId: firebaseConfig.measurementId,
+      }).toString();
       await navigator.serviceWorker.register(
         `/firebase-messaging-sw.js?${firebaseConfigUrlParams}`
       );

src/index.js

@@ -1,4 +1,57 @@
-import App from "App";
+import { Suspense } from "react";
+import { CookiesProvider } from "react-cookie";
 import ReactDOM from "react-dom";
+import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
+import routes from "routes";
+
+import Loading from "components/Loading";
+import ModalProvider from "components/Modal/ModalProvider";
+import Skeleton from "components/Skeleton";
+import AlertProvider from "components/Skeleton/AlertProvider";
+import CSSVariablesProvider from "components/Skeleton/CSSVariablesProvider";
+import ChannelTalkProvider from "components/Skeleton/ChannelTalkProvider";
+import FirebaseMessagingProvider from "components/Skeleton/FirebaseMessagingProvider";
+import FlutterEventCommunicationProvider from "components/Skeleton/FlutterEventCommunicationProvider";
+import GoogleAnalyticsProvier from "components/Skeleton/GoogleAnalyticsProvier";
+import I18nextProvider from "components/Skeleton/I18nextProvider";
+import ScrollRestoration from "components/Skeleton/ScrollRestoration";
+import SocketToastProvider from "components/Skeleton/SocketToastProvider";
+import VirtualKeyboardDetector from "components/Skeleton/VirtualKeyboardDetector";
+
+import "./App.css";
+import "./Font.css";
+
+import { RecoilRoot } from "recoil";
+
+const App = () => {
+  return (
+    <CookiesProvider>
+      <RecoilRoot>
+        <Router>
+          <I18nextProvider />
+          <ScrollRestoration />
+          <CSSVariablesProvider />
+          <VirtualKeyboardDetector />
+          <ChannelTalkProvider />
+          <GoogleAnalyticsProvier />
+          <FirebaseMessagingProvider />
+          <FlutterEventCommunicationProvider />
+          <SocketToastProvider />
+          <AlertProvider />
+          <ModalProvider />
+          <Skeleton>
+            <Suspense fallback={<Loading center />}>
+              <Switch>
+                {routes.map((route) => (
+                  <Route key={route.path} {...route} />
+                ))}
+              </Switch>
+            </Suspense>
+          </Skeleton>
+        </Router>
+      </RecoilRoot>
+    </CookiesProvider>
+  );
+};
 
 ReactDOM.render(<App />, document.getElementById("root"));

src/loadenv.ts

@@ -0,0 +1,17 @@
+import dotenv from "dotenv";
+import { FirebaseConfig } from "types/env";
+
+dotenv.config();
+
+const env = { ...process.env, ...window["env"] };
+
+export const nodeEnv = env.NODE_ENV; // automatically provided
+export const backServer = env.REACT_APP_BACK_URL; // required
+export const ioServer = env.REACT_APP_IO_URL ?? backServer; // optional (주어지지 않은 경우 REACT_APP_BACK_URL로 설정)
+export const ogServer = env.REACT_APP_OG_URL; // optional
+export const s3BaseUrl = env.REACT_APP_S3_URL; // required
+export const channelTalkPluginKey = env.REACT_APP_CHANNELTALK_PLUGIN_KEY; // optional
+export const kakaoSDKKey = env.REACT_APP_KAKAO_SDK_KEY; // optional
+export const gaTrackingId = env.REACT_APP_GA_TRACKING_ID; // optional
+export const firebaseConfig: Nullable<FirebaseConfig> =
+  env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG); // optional

src/pages/Chatting/Header/FullChatHeader.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { useEffect, useRef, useState } from "react";
-import { useHistory } from "react-router";
+import { useHistory } from "react-router-dom";
 
 import { useR2state } from "hooks/useReactiveState";
 

src/types/env.d.ts

@@ -0,0 +1,28 @@
+type Env = {
+  REACT_APP_BACK_URL: string;
+  REACT_APP_IO_URL?: string;
+  REACT_APP_OG_URL?: string;
+  REACT_APP_S3_URL: string;
+  REACT_APP_CHANNELTALK_PLUGIN_KEY?: string;
+  REACT_APP_KAKAO_SDK_KEY?: string;
+  REACT_APP_GA_TRACKING_ID?: string;
+  REACT_APP_FIREBASE_CONFIG?: string;
+};
+
+export type FirebaseConfig = {
+  apiKey: string;
+  authDomain: string;
+  projectId: string;
+  storageBucket: string;
+  messagingSenderId: string;
+  appId: string;
+  measurementId: string;
+  dinamicLink: {
+    host: string;
+    androidPacakgeName: string;
+    iosAppBundleId: string;
+    appStoreId: string;
+  };
+};
+
+export default Env;

src/types/global.d.ts

@@ -1,5 +1,7 @@
 import { CSSProperties } from "react";
 
+import Env from "./env";
+
 export {};
 
 declare global {
@@ -71,6 +73,7 @@ declare global {
     flutter_inappwebview: {
       callHandler: (name: string, ...args: any[]) => Promise<any>;
     };
+    env: Env;
     Kakao: any;
   }
 }