Merge pull request #111 from tukcomCD2024/Frontend#109/이메일초대링크동작

feat: organization 이메일 초대

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>

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`

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 {

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;