Merge pull request #115 from tukcomCD2024/Frontend#114/이메일초대_수정

feat: 이메일 초대 수정
tukcomCD2024 · Mar 13, 2024 · 9d697e1 · 9d697e1
2 parents aa9262e + 61e0129
commit 9d697e1
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 80 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -15,7 +15,7 @@ export default function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<AuthPage />} />
-          <Route path="/main" element={<Mainpage />} />
+          <Route path="/main/*" element={<Mainpage />} />
           <Route path="/login" element={<LoginPage />} />
           <Route path="/signup" element={<SignupPage />} />
           <Route path="/editProfile" element={<UserProfileEdit />} />

diff --git a/frontend/src/Component/Auth/LoginPage.js b/frontend/src/Component/Auth/LoginPage.js
@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
+import toastr from "toastr";
+import "toastr/build/toastr.css";
+
 import GoogleLoginBtn from "../../image/googleLoginBtn.png";
 
 const LoginPage = () => {
@@ -46,7 +49,10 @@ const LoginPage = () => {
           localStorage.setItem("userId", userId); // 백엔드로부터 받은 유저 (고유)아이디
           localStorage.setItem("nickname", name); // 백엔드로부터 받은 유저 닉네임
           localStorage.setItem("email", email); // 로그인한 아이디
-          localStorage.removeItem("token");
+          if (token != undefined){
+            localStorage.removeItem('token');
+            toastr.success("초대 수락 완료!");
+          }
           navigate("/main");
         }
       } else {
@@ -64,7 +70,8 @@ const LoginPage = () => {
   };
   return (
     <Container>
-      <ContentWrapper>
+    <ContentWrapper>
+      <form onSubmit={handleSubmit}> {/* 폼 요소 추가 */}
         <p style={{ fontWeight: "bold", fontSize: "25px" }}>로그인</p>
         <Email_InputWrapper>
           이메일
@@ -86,24 +93,26 @@ const LoginPage = () => {
             value={password}
           />
         </Password_InputWrapper>
-        <LoginBtn onClick={handleSubmit}>로그인</LoginBtn>
-        <IsNotUser>
-          <p style={{ display: "inline", margin: "0", marginRight: "8px" }}>
-            <small>회원이 아니신가요?</small>
-          </p>
-          <SignupBtn onClick={() => navigate("/signup")}>
-            <small>회원가입하기</small>
-          </SignupBtn>
-        </IsNotUser>
-        <GoogleLoginBtnContainer>
-          <GoogleLoginImg
-            src={GoogleLoginBtn}
-            alt="Google Login Button"
-            onClick={() => navigate("/signup")}
-          />
-        </GoogleLoginBtnContainer>
-      </ContentWrapper>
-    </Container>
+        <LoginBtn type="submit">로그인</LoginBtn>
+      </form>
+      <IsNotUser>
+        <p style={{ display: "inline", margin: "0", marginRight: "8px" }}>
+          <small>회원이 아니신가요?</small>
+        </p>
+        <SignupBtn onClick={() => navigate("/signup")}>
+          <small>회원가입하기</small>
+        </SignupBtn>
+      </IsNotUser>
+      <GoogleLoginBtnContainer>
+        <GoogleLoginImg
+          src={GoogleLoginBtn}
+          alt="Google Login Button"
+          onClick={() => navigate("/signup")}
+        />
+      </GoogleLoginBtnContainer>
+    </ContentWrapper>
+  </Container>
+
   );
 };
 

diff --git a/frontend/src/Component/Auth/SignupPage.js b/frontend/src/Component/Auth/SignupPage.js
@@ -115,54 +115,56 @@ const SignupPage = () => {
   return (
     <Container>
       <ContentWrapper>
-        <p style={{ fontWeight: "bold", fontSize: "25px" }}>회원가입</p>
-        <Email_InputWrapper>
-          이메일(ID)
-          <Email_Input
-            name="email"
-            type="text"
-            placeholder="이메일을 입력하세요."
-            onChange={handleInputChange} // 이 부분을 추가
-            value={email}
-          />
-          <Email_Duplicate_CheckBtn onClick={handleEmailDuplicateCheck}>
-            중복확인
-          </Email_Duplicate_CheckBtn>
-        </Email_InputWrapper>
-        <Nickname_InputWrapper>
-          닉네임
-          <Nickname_Input
-            name="nickname"
-            type="text"
-            placeholder="닉네임을 입력하세요."
-            onChange={handleInputChange}
-            value={nickname}
-          />
-          <Nickname_Duplicate_CheckBtn onClick={handleNicknameDuplicateCheck}>
-            중복확인
-          </Nickname_Duplicate_CheckBtn>{" "}
-        </Nickname_InputWrapper>
-        <Password_InputWrapper>
-          비밀번호
-          <Password_Input
-            name="password" // 올바른 name 속성 값으로 변경
-            type="password"
-            placeholder="비밀번호를 입력해주세요."
-            value={password}
-            onChange={handleInputChange} // 이 부분을 추가
-          />
-        </Password_InputWrapper>
-        <Passwordcheck_InputWrapper>
-          비밀번호 확인
-          <Passwordcheck_Input
-            name="passwordCheck" // 올바른 name 속성 값으로 변경
-            type="password"
-            placeholder="비밀번호를 한 번 더 입력해주세요."
-            value={passwordCheck}
-            onChange={handleInputChange} // 이 부분을 추가}
-          />
-        </Passwordcheck_InputWrapper>
-        <SignupBtn onClick={handleSubmit}>회원가입</SignupBtn>
+        <form onSubmit={handleSubmit}>
+          <p style={{ fontWeight: "bold", fontSize: "25px" }}>회원가입</p>
+          <Email_InputWrapper>
+            이메일(ID)
+            <Email_Input
+              name="email"
+              type="text"
+              placeholder="이메일을 입력하세요."
+              onChange={handleInputChange}
+              value={email}
+            />
+            <Email_Duplicate_CheckBtn onClick={handleEmailDuplicateCheck}>
+              중복확인
+            </Email_Duplicate_CheckBtn>
+          </Email_InputWrapper>
+          <Nickname_InputWrapper>
+            닉네임
+            <Nickname_Input
+              name="nickname"
+              type="text"
+              placeholder="닉네임을 입력하세요."
+              onChange={handleInputChange}
+              value={nickname}
+            />
+            <Nickname_Duplicate_CheckBtn onClick={handleNicknameDuplicateCheck}>
+              중복확인
+            </Nickname_Duplicate_CheckBtn>{" "}
+          </Nickname_InputWrapper>
+          <Password_InputWrapper>
+            비밀번호
+            <Password_Input
+              name="password"
+              type="password"
+              placeholder="비밀번호를 입력해주세요."
+              value={password}
+              onChange={handleInputChange}
+            />
+          </Password_InputWrapper>
+          <Passwordcheck_InputWrapper>
+            비밀번호 확인
+            <Passwordcheck_Input
+              name="passwordCheck"
+              type="password"
+              placeholder="비밀번호를 한 번 더 입력해주세요."
+              value={passwordCheck}
+              onChange={handleInputChange}
+            />
+          </Passwordcheck_InputWrapper>
+          <SignupBtn type="submit">회원가입</SignupBtn>
+        </form>
         <HomeBtn onClick={() => navigate("/")}>
           <small>홈으로 돌아가기</small>
         </HomeBtn>

diff --git a/frontend/src/Component/Page/Page.js b/frontend/src/Component/Page/Page.js
@@ -12,11 +12,11 @@ import { keymap } from "prosemirror-keymap";
 
 
 import { updateImageNode, imagePlugin } from "prosemirror-image-plugin";
-import "./ProseMirror_css/prosemirror_image_plugin/common.css";
-import "./ProseMirror_css/prosemirror_image_plugin/withResize.css";
-import "./ProseMirror_css/prosemirror_image_plugin/sideResize.css";
-import "./ProseMirror_css/prosemirror_image_plugin/withoutResize.css";
-import "./ProseMirror_css/ProseMirror.css";
+import "./prosemirror_css/prosemirror_image_plugin/common.css";
+import "./prosemirror_css/prosemirror_image_plugin/withResize.css";
+import "./prosemirror_css/prosemirror_image_plugin/sideResize.css";
+import "./prosemirror_css/prosemirror_image_plugin/withoutResize.css";
+import "./prosemirror_css/ProseMirror.css";
 
 // yjs 라이브러리(동시편집)
 import { WebsocketProvider } from "y-websocket";

diff --git a/frontend/src/Component/Utils/EmailTokenHandler.js b/frontend/src/Component/Utils/EmailTokenHandler.js
@@ -20,7 +20,7 @@ const EmailTokenHandler = () => {
       localStorage.setItem('token', token);
     }
 
-    if (isLoggedIn){
+    if (token && isLoggedIn()){
       fetchEmailInvitationToken();
     }
   }, [location]);
@@ -29,8 +29,6 @@ const EmailTokenHandler = () => {
     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: {
@@ -43,16 +41,17 @@ const EmailTokenHandler = () => {
 
       if (response.ok) {
         if (contentType && contentType.includes('text/plain')) {
-          localStorage.removeItem("token");
           const responseMessage = await response.text();
           toastr.success(responseMessage);
         }
+      } else {
+        const errorMessage = await response.text();
+        toastr.error(errorMessage);
       }
     } catch (error) {
       console.error("Error: ", error);
-      localStorage.removeItem("token");
-      toastr.error("에러가 발생했습니다.");
     }
+    localStorage.removeItem("token");
   }
 
   if (isLoggedIn()) {