From cdd31240d80bd004f226e9f9747a931e88db558f Mon Sep 17 00:00:00 2001
From: Shin Hyuk Jun <tlsgurwns123@naver.com>
Date: Wed, 13 Mar 2024 10:56:29 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20organization=20=EC=9D=B4=EB=A9=94?=
 =?UTF-8?q?=EC=9D=BC=20=EC=B4=88=EB=8C=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.js                           |  4 +-
 frontend/src/Component/Auth/AuthPage.js       | 14 ++--
 frontend/src/Component/Auth/LoginPage.js      |  6 +-
 .../src/Component/Utils/EmailTokenHandler.js  | 66 +++++++++++++++++++
 4 files changed, 77 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/Component/Utils/EmailTokenHandler.js

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 727b527e..afb995c4 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -6,7 +6,8 @@ import SignupPage from "./Component/Auth/SignupPage";
 import NotePage from "./Component/Note/NotePage";
 import UserProfileEdit from "./Component/Auth/UserProfileEdit";
 import Page from "./Component/Page/Page";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import EmailTokenHandler from "./Component/Utils/EmailTokenHandler";
+import { BrowserRouter, Routes, Route, Navigate  } from "react-router-dom";
 
 export default function App() {
   return (
@@ -21,6 +22,7 @@ export default function App() {
           <Route path="/logout" element={<Mainpage />} />
           <Route path="/about" element={<Mainpage />} />
           <Route path="/organization/:id/*" element={<NotePage />} />
+          <Route path="/organization/invitation/approve" element={<EmailTokenHandler />} />
           <Route path="/organization/:id/:id" element={<Page />} />
         </Routes>
       </BrowserRouter>
diff --git a/frontend/src/Component/Auth/AuthPage.js b/frontend/src/Component/Auth/AuthPage.js
index 1a793c3e..9c38f36a 100644
--- a/frontend/src/Component/Auth/AuthPage.js
+++ b/frontend/src/Component/Auth/AuthPage.js
@@ -18,10 +18,7 @@ function AuthPage() {
         <BookImage src={book1} alt="Book" />
       </ImageWrapper>
       <AuthBox>
-        <ToMain
-          style={{ fontSize: "30px", fontWeight: "bold", marginBottom: "30px" }}
-          onClick={() => {alert("로그인 안하면 에러날 수 있음");navigate("/main");}}
-        >
+        <ToMain>
           ShareNote
         </ToMain>
         <LoginBtn onClick={() => navigate("/login")}>로그인</LoginBtn>
@@ -61,12 +58,9 @@ const AuthBox = styled.div`
 `;
 
 const ToMain = styled.div`
-  cursor: pointer;
-
-  &:hover {
-    color: #202632;
-    text-decoration: underline;
-  }
+  font-size: 30px;
+  font-weight: bold;
+  margin-bottom: 30px;
 `;
 
 const LoginBtn = styled.button`
diff --git a/frontend/src/Component/Auth/LoginPage.js b/frontend/src/Component/Auth/LoginPage.js
index 9ba395ca..f0d10741 100644
--- a/frontend/src/Component/Auth/LoginPage.js
+++ b/frontend/src/Component/Auth/LoginPage.js
@@ -20,19 +20,20 @@ const LoginPage = () => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-  
+
     if (password === "" || email === "") {
       alert("이메일(ID)과 비밀번호를 모두 입력해주세요.");
       return;
     }
   
     try {
+      const token = localStorage.getItem('token');
       const response = await fetch("/api/user/login", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ email, password }),
+        body: JSON.stringify({ email, password, token }),
       });
   
       // Content-Type 헤더를 체크하여 응답 타입 판별
@@ -45,6 +46,7 @@ const LoginPage = () => {
           localStorage.setItem("userId", userId); // 백엔드로부터 받은 유저 (고유)아이디
           localStorage.setItem("nickname", name); // 백엔드로부터 받은 유저 닉네임
           localStorage.setItem("email", email); // 로그인한 아이디
+          localStorage.removeItem("token");
           navigate("/main");
         }
       } else {
diff --git a/frontend/src/Component/Utils/EmailTokenHandler.js b/frontend/src/Component/Utils/EmailTokenHandler.js
new file mode 100644
index 00000000..b8420e69
--- /dev/null
+++ b/frontend/src/Component/Utils/EmailTokenHandler.js
@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { useLocation, Navigate } from 'react-router-dom';
+import toastr from "toastr";
+import "toastr/build/toastr.css";
+
+const isLoggedIn = () => {
+  const userId = localStorage.getItem('userId');
+  return !!userId; // userId가 있으면 true, 없으면 false 반환
+};
+
+const EmailTokenHandler = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    // URL에서 token 값을 읽어옵니다.
+    const urlParams = new URLSearchParams(location.search);
+    const token = urlParams.get('token');
+
+    if (token) { 
+      localStorage.setItem('token', token);
+    }
+
+    if (isLoggedIn){
+      fetchEmailInvitationToken();
+    }
+  }, [location]);
+
+  const fetchEmailInvitationToken = async () => {
+    try {
+      const userId = localStorage.getItem('userId');
+      const token = localStorage.getItem('token');
+      console.log(userId);
+      console.log(token);
+      const response = await fetch("/api/user/organization/invitation/accept", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ userId, token }),
+      });
+
+      const contentType = response.headers.get('content-type');
+
+      if (response.ok) {
+        if (contentType && contentType.includes('text/plain')) {
+          localStorage.removeItem("token");
+          const responseMessage = await response.text();
+          toastr.success(responseMessage);
+        }
+      }
+    } catch (error) {
+      console.error("Error: ", error);
+      localStorage.removeItem("token");
+      toastr.error("에러가 발생했습니다.");
+    }
+  }
+
+  if (isLoggedIn()) {
+    return <Navigate to="/main" />;
+  } else {
+    toastr.info("로그인 후 초대가 자동 수락됩니다.");
+    return <Navigate to="/login" />;
+  }
+};
+
+export default EmailTokenHandler;