feat: 로그인 상태를 유지한 채 관리자 페이지로 이동하는 기능 추가 (#455)

frontend/manage/src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom";
+import { Redirect, Route, Switch, useHistory, useLocation } from "react-router-dom";
 import { ConditionalRoute } from "./components/HOC/ConditionalRoute";
 import Nav from "./components/organisms/Nav";
 import Home from "./components/pages/Home";
@@ -10,14 +10,25 @@ import ProjectDetail from "./components/pages/ProjectDetail";
 import ScriptPublishingPage from "./components/pages/ScriptPublishing";
 import Statistics from "./components/pages/Statistics";
 import UserProfile from "./components/pages/UserProfile";
-import { ROUTE } from "./constants";
+import { COOKIE_KEY, ROUTE } from "./constants";
 import { useUser } from "./hooks";
+import { setCookie } from "./utils/cookie";
 
 const App = () => {
+  const location = useLocation();
+  const history = useHistory();
+  const path = location.pathname;
+  const urlSearchParam = new URLSearchParams(location.search);
+  const accessToken = urlSearchParam.get(COOKIE_KEY.ATK);
   const { user, isLoading, logout } = useUser();
 
+  if (accessToken) {
+    setCookie(COOKIE_KEY.ATK, accessToken);
+    history.push(path);
+  }
+
   return (
-    <Router>
+    <>
       <Nav user={user} logout={logout} />
       <Switch>
         <Route exact path={ROUTE.HOME} component={Home} />
@@ -35,7 +46,7 @@ const App = () => {
         <ConditionalRoute path={ROUTE.MY_PROJECT} component={MyProject} condition={!!user || isLoading} />
         <Redirect to={ROUTE.HOME} />
       </Switch>
-    </Router>
+    </>
   );
 };
 export default App;

frontend/manage/src/components/pages/ScriptPublishing/index.tsx

@@ -20,7 +20,7 @@ const scriptCode = (projectSecretKey: string) => `
         var $document = document;
 
         var $script = $document.createElement("script");
-        $script.src = "${REPLY_MODULE_BASE_URL}.js";
+        $script.src = "${REPLY_MODULE_BASE_URL}/embed.js";
         $script.defer = true;
 
         $document.head.appendChild($script);

frontend/manage/src/hooks/useUser.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useQuery, useQueryClient } from "react-query";
 import { COOKIE_KEY, QUERY, REACT_QUERY_KEY } from "../constants";
 import { User } from "../types/user";
 import { deleteCookie, setCookie } from "../utils/cookie";

frontend/manage/src/index.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from "react-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
+import { BrowserRouter } from "react-router-dom";
 import App from "./App";
 import GlobalStyles from "./styles/GlobalStyles";
 
@@ -14,7 +15,9 @@ const queryClient = new QueryClient({
 ReactDOM.render(
   <QueryClientProvider client={queryClient}>
     <GlobalStyles />
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </QueryClientProvider>,
   document.getElementById("root")
 );

frontend/reply-module/src/components/organisms/Footer/index.tsx

@@ -1,12 +1,12 @@
 import { Container, CopyRight, Logo, LogoButton, ServiceName } from "./styles";
 import darassLogoSVG from "../../../assets/svg/darass-logo.svg";
-import { MANAGE_PAGE_BASE_URL } from "../../../constants/api";
+import { getManagePageURLWithToken } from "../../../utils/getManagePageURLWithToken";
 
 const Footer = () => {
   return (
     <Container>
       <CopyRight>&copy; Emergency Escape</CopyRight>
-      <LogoButton href={MANAGE_PAGE_BASE_URL} target="_blank" rel="noopener noreferrer">
+      <LogoButton href={getManagePageURLWithToken()} target="_blank" rel="noopener noreferrer">
         <Logo src={darassLogoSVG} alt="darass-logo" />
         <ServiceName>Darass</ServiceName>
       </LogoButton>

frontend/reply-module/src/components/pages/CommentArea/index.tsx

@@ -4,11 +4,20 @@ import { INITIAL_PAGE_PARAM } from "../../../constants/comment";
 import { ORDER_BUTTON } from "../../../constants/orderButton";
 import { useGetAllComments, useGetProject, useUser } from "../../../hooks";
 import { AlertError } from "../../../utils/Error";
+import { getManagePageURLWithToken } from "../../../utils/getManagePageURLWithToken";
 import { postScrollHeightToParentWindow } from "../../../utils/postMessage";
 import Avatar from "../../atoms/Avatar";
 import CommentInput from "../../organisms/CommentInput";
 import Footer from "../../organisms/Footer";
-import { CommentList, Container, LoginMethod, LoginMethodWrapper, LogOut, UserAvatarOption } from "./styles";
+import {
+  CommentList,
+  Container,
+  LoginMethod,
+  LoginMethodWrapper,
+  UserAvatarOption,
+  UserAvatarOptionButton,
+  UserAvatarOptionLink
+} from "./styles";
 
 const CommentArea = () => {
   const urlParams = new URLSearchParams(window.location.search);
@@ -88,9 +97,14 @@ const CommentArea = () => {
       />
       <UserAvatarOption user={user}>
         {user ? (
-          <LogOut type="button" onClick={logout}>
-            로그아웃
-          </LogOut>
+          <>
+            <UserAvatarOptionLink href={getManagePageURLWithToken("/user")} target="_blank" rel="noopener noreferrer">
+              내 정보
+            </UserAvatarOptionLink>
+            <UserAvatarOptionButton type="button" onClick={logout}>
+              로그아웃
+            </UserAvatarOptionButton>
+          </>
         ) : (
           <>
             <LoginMethodWrapper onClick={onLogin}>

frontend/reply-module/src/components/pages/CommentArea/styles.ts

@@ -18,18 +18,18 @@ export const LoginMethodWrapper = styled.div`
   align-items: center;
 `;
 
-export const LoginMethod = styled.button`
-  margin-left: 0.5rem;
-  font-weight: 700;
-  background-color: transparent;
+export const UserAvatarOption = styled(UserAvatarOptionComponent)`
+  margin-left: auto;
+  margin-bottom: 1.5rem;
 `;
 
-export const LogOut = styled.button`
+export const UserAvatarOptionButton = styled.button`
   font-weight: 700;
   background-color: transparent;
 `;
 
-export const UserAvatarOption = styled(UserAvatarOptionComponent)`
-  margin-left: auto;
-  margin-bottom: 1.5rem;
+export const LoginMethod = styled(UserAvatarOptionButton)`
+  margin-left: 0.5rem;
 `;
+
+export const UserAvatarOptionLink = styled(UserAvatarOptionButton.withComponent("a"))``;

frontend/reply-module/src/utils/getManagePageURLWithToken.ts

@@ -0,0 +1,12 @@
+import { MANAGE_PAGE_BASE_URL } from "../constants/api";
+import { COOKIE_KEY } from "../constants/cookie";
+import { getCookie } from "./cookie";
+
+export const getManagePageURLWithToken = (path = "") => {
+  const accessToken = getCookie(COOKIE_KEY.ATK);
+  if (!accessToken) {
+    return MANAGE_PAGE_BASE_URL;
+  }
+
+  return `${MANAGE_PAGE_BASE_URL}${path}?${COOKIE_KEY.ATK}=${accessToken}`;
+};