From 9c490eaee168495b1c56d36f82e3978b80aa4bf2 Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Fri, 14 Jul 2023 17:34:15 +0900 Subject: [PATCH 1/4] Refactor: loadenv --- .../Skeleton/ChannelTalkProvider/index.tsx | 16 +++++++----- src/loadenv.js | 26 ------------------- src/loadenv.ts | 17 ++++++++++++ src/types/global.d.ts | 1 + 4 files changed, 27 insertions(+), 33 deletions(-) delete mode 100644 src/loadenv.js create mode 100644 src/loadenv.ts diff --git a/src/components/Skeleton/ChannelTalkProvider/index.tsx b/src/components/Skeleton/ChannelTalkProvider/index.tsx index 59b82bc46..a75b3ad72 100644 --- a/src/components/Skeleton/ChannelTalkProvider/index.tsx +++ b/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; }; diff --git a/src/loadenv.js b/src/loadenv.js deleted file mode 100644 index 8936ef4e8..000000000 --- a/src/loadenv.js +++ /dev/null @@ -1,26 +0,0 @@ -import dotenv from "dotenv"; - -dotenv.config(); - -const env = { ...process.env, ...window["env"] }; - -const nodeEnv = env.NODE_ENV; -const backServer = env.REACT_APP_BACK_URL; -const ioServer = env.REACT_APP_IO_URL ?? backServer; -const s3BaseUrl = env.REACT_APP_S3_URL; -const channelTalkPluginKey = env.REACT_APP_CHANNELTALK_PLUGIN_KEY; -const kakaoSDKKey = env.REACT_APP_KAKAO_SDK_KEY; -const gaTrackingId = env.REACT_APP_GA_TRACKING_ID; -const firebaseConfig = - env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG); - -export { - nodeEnv, - backServer, - ioServer, - s3BaseUrl, - channelTalkPluginKey, - kakaoSDKKey, - gaTrackingId, - firebaseConfig, -}; diff --git a/src/loadenv.ts b/src/loadenv.ts new file mode 100644 index 000000000..a786ee5f0 --- /dev/null +++ b/src/loadenv.ts @@ -0,0 +1,17 @@ +import dotenv from "dotenv"; + +dotenv.config(); + +const env = { ...process.env, ...window["env"] }; + +export const nodeEnv: string = env.NODE_ENV; // automatically provided +export const backServer: string = env.REACT_APP_BACK_URL; // required +export const ioServer: Nullable = env.REACT_APP_IO_URL ?? backServer; // optional +export const ogServer: Nullable = env.REACT_APP_OG_URL; // optional +export const s3BaseUrl: string = env.REACT_APP_S3_URL; // required +export const channelTalkPluginKey: Nullable = + env.REACT_APP_CHANNELTALK_PLUGIN_KEY; // optional +export const kakaoSDKKey: Nullable = env.REACT_APP_KAKAO_SDK_KEY; // optional +export const gaTrackingId: Nullable = env.REACT_APP_GA_TRACKING_ID; // optional +export const firebaseConfig: Nullable = + env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG); // optional diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 0959d889c..720d2a040 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -71,6 +71,7 @@ declare global { flutter_inappwebview: { callHandler: (name: string, ...args: any[]) => Promise; }; + env: any; Kakao: any; } } From 216bc5ba204141fef7949e17fcb8702a6c3e507b Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Fri, 14 Jul 2023 18:21:10 +0900 Subject: [PATCH 2/4] Add: imageUrl prop to LinkKakaotalkShare --- src/App.js | 56 ------------------- src/components/Link/LinkKakaotalkShare.tsx | 4 +- .../ModalPopup/Body/BodyRoomShare.tsx | 2 + .../Skeleton/FirebaseMessagingProvider.tsx | 14 ++++- src/index.js | 55 +++++++++++++++++- src/loadenv.ts | 19 ++++++- 6 files changed, 86 insertions(+), 64 deletions(-) delete mode 100644 src/App.js diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 1bf8b620f..000000000 --- a/src/App.js +++ /dev/null @@ -1,56 +0,0 @@ -import { Suspense } from "react"; -import { CookiesProvider } from "react-cookie"; -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 ( - - - - - - - - - - - - - - - - }> - - {routes.map((route) => ( - - ))} - - - - - - - ); -}; - -export default App; diff --git a/src/components/Link/LinkKakaotalkShare.tsx b/src/components/Link/LinkKakaotalkShare.tsx index e37ff11a7..5cf0cf12b 100644 --- a/src/components/Link/LinkKakaotalkShare.tsx +++ b/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 }, diff --git a/src/components/ModalPopup/Body/BodyRoomShare.tsx b/src/components/ModalPopup/Body/BodyRoomShare.tsx index 8161b001f..2af36dce9 100644 --- a/src/components/ModalPopup/Body/BodyRoomShare.tsx +++ b/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} diff --git a/src/components/Skeleton/FirebaseMessagingProvider.tsx b/src/components/Skeleton/FirebaseMessagingProvider.tsx index 3cf379afc..82c41fe71 100644 --- a/src/components/Skeleton/FirebaseMessagingProvider.tsx +++ b/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}` ); diff --git a/src/index.js b/src/index.js index e764b6744..8a83f60a6 100644 --- a/src/index.js +++ b/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 ( + + + + + + + + + + + + + + + + }> + + {routes.map((route) => ( + + ))} + + + + + + + ); +}; ReactDOM.render(, document.getElementById("root")); diff --git a/src/loadenv.ts b/src/loadenv.ts index a786ee5f0..91133b6c3 100644 --- a/src/loadenv.ts +++ b/src/loadenv.ts @@ -6,12 +6,25 @@ const env = { ...process.env, ...window["env"] }; export const nodeEnv: string = env.NODE_ENV; // automatically provided export const backServer: string = env.REACT_APP_BACK_URL; // required -export const ioServer: Nullable = env.REACT_APP_IO_URL ?? backServer; // optional +export const ioServer: string = env.REACT_APP_IO_URL ?? backServer; // optional (주어지지 않은 경우 REACT_APP_BACK_URL로 설정) export const ogServer: Nullable = env.REACT_APP_OG_URL; // optional export const s3BaseUrl: string = env.REACT_APP_S3_URL; // required export const channelTalkPluginKey: Nullable = env.REACT_APP_CHANNELTALK_PLUGIN_KEY; // optional export const kakaoSDKKey: Nullable = env.REACT_APP_KAKAO_SDK_KEY; // optional export const gaTrackingId: Nullable = env.REACT_APP_GA_TRACKING_ID; // optional -export const firebaseConfig: Nullable = - env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG); // optional +export const firebaseConfig: Nullable<{ + apiKey: string; + authDomain: string; + projectId: string; + storageBucket: string; + messagingSenderId: string; + appId: string; + measurementId: string; + dinamicLink: { + host: string; + androidPacakgeName: string; + iosAppBundleId: string; + appStoreId: string; + }; +}> = env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG); // optional From 2e88121dd76c3b9c3aaa6066b0f2056a750dee6c Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Fri, 14 Jul 2023 22:35:05 +0900 Subject: [PATCH 3/4] Fix: import "react-router-dom" --- src/pages/Chatting/Header/FullChatHeader.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/Chatting/Header/FullChatHeader.jsx b/src/pages/Chatting/Header/FullChatHeader.jsx index c31408999..5646c4e8b 100644 --- a/src/pages/Chatting/Header/FullChatHeader.jsx +++ b/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"; @@ -84,6 +84,9 @@ const Header = (props) => { return () => window.removeEventListener("resize", resizeEvent); }, [props.info]); + console.log("!!"); + console.log(history); + return (
setOpen(false)} /> From ee78acf7adf5f3b94f28017aec2b03404dbd7f9e Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Wed, 19 Jul 2023 16:43:23 +0900 Subject: [PATCH 4/4] Remove: console.log --- src/loadenv.ts | 35 ++++++-------------- src/pages/Chatting/Header/FullChatHeader.jsx | 3 -- src/types/env.d.ts | 28 ++++++++++++++++ src/types/global.d.ts | 4 ++- 4 files changed, 42 insertions(+), 28 deletions(-) create mode 100644 src/types/env.d.ts diff --git a/src/loadenv.ts b/src/loadenv.ts index 91133b6c3..5ffd5633a 100644 --- a/src/loadenv.ts +++ b/src/loadenv.ts @@ -1,30 +1,17 @@ import dotenv from "dotenv"; +import { FirebaseConfig } from "types/env"; dotenv.config(); const env = { ...process.env, ...window["env"] }; -export const nodeEnv: string = env.NODE_ENV; // automatically provided -export const backServer: string = env.REACT_APP_BACK_URL; // required -export const ioServer: string = env.REACT_APP_IO_URL ?? backServer; // optional (주어지지 않은 경우 REACT_APP_BACK_URL로 설정) -export const ogServer: Nullable = env.REACT_APP_OG_URL; // optional -export const s3BaseUrl: string = env.REACT_APP_S3_URL; // required -export const channelTalkPluginKey: Nullable = - env.REACT_APP_CHANNELTALK_PLUGIN_KEY; // optional -export const kakaoSDKKey: Nullable = env.REACT_APP_KAKAO_SDK_KEY; // optional -export const gaTrackingId: Nullable = env.REACT_APP_GA_TRACKING_ID; // optional -export const firebaseConfig: Nullable<{ - apiKey: string; - authDomain: string; - projectId: string; - storageBucket: string; - messagingSenderId: string; - appId: string; - measurementId: string; - dinamicLink: { - host: string; - androidPacakgeName: string; - iosAppBundleId: string; - appStoreId: string; - }; -}> = env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG); // optional +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 = + env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG); // optional diff --git a/src/pages/Chatting/Header/FullChatHeader.jsx b/src/pages/Chatting/Header/FullChatHeader.jsx index 5646c4e8b..1998c64e1 100644 --- a/src/pages/Chatting/Header/FullChatHeader.jsx +++ b/src/pages/Chatting/Header/FullChatHeader.jsx @@ -84,9 +84,6 @@ const Header = (props) => { return () => window.removeEventListener("resize", resizeEvent); }, [props.info]); - console.log("!!"); - console.log(history); - return (
setOpen(false)} /> diff --git a/src/types/env.d.ts b/src/types/env.d.ts new file mode 100644 index 000000000..9499f5ac3 --- /dev/null +++ b/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; diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 720d2a040..e69f66b0c 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -1,5 +1,7 @@ import { CSSProperties } from "react"; +import Env from "./env"; + export {}; declare global { @@ -71,7 +73,7 @@ declare global { flutter_inappwebview: { callHandler: (name: string, ...args: any[]) => Promise; }; - env: any; + env: Env; Kakao: any; } }