Feat : Github Login & routing (#52)

* feat : email verify modal dev start

* feat : verify modal ui

* feat : register modal api && login api connect

* feat : gh login 1. login for registerd user

package.json

@@ -14,6 +14,7 @@
     "axios": "^1.4.0",
     "bootstrap": "^5.3.0",
     "frappe-gantt": "^0.6.1",
+    "http-proxy-middleware": "^2.0.6",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",

src/App.tsx

@@ -3,12 +3,15 @@ import { AuthenticationContextProvider } from "./service/authentication/authenti
 import AppRouter from "./navigation/AppRouter";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { TeamsContextProvider } from "./service/teams/teams.context";
+import { ProjectsContextProvider } from "./service/projects/projects.context";
 
 const App: React.FC = () => {
     return (
         <AuthenticationContextProvider>
             <TeamsContextProvider>
-                <AppRouter />
+                <ProjectsContextProvider>
+                    <AppRouter />
+                </ProjectsContextProvider>
             </TeamsContextProvider>
         </AuthenticationContextProvider>
     );

src/components/Modal/EmailVerifyModal.css

@@ -0,0 +1,11 @@
+.EmailVerifyModal .inputLabel {
+    margin-bottom: 16px;
+}
+.EmailVerifyModal .infoBox {
+    background-color: rgba(218, 218, 218, 0.33);
+    padding: 4%;
+    border-radius: 20px;
+    margin-top: 40px;
+}
+.EmailVerifyModal .infoText {
+}

src/components/Modal/EmailVerifyModal.js

@@ -0,0 +1,57 @@
+import React, { useContext, useState } from "react";
+import { Button, Modal, Form } from "react-bootstrap";
+import "./EmailVerifyModal.css";
+import { BsDot } from "react-icons/bs";
+
+export const EmailVerifyModal = ({ show, handleClose, checkNumber, setCheckNumber, CheckEmailMessageHandler }) => {
+    return (
+        <Modal show={show} onHide={handleClose} className="EmailVerifyModal">
+            <Modal.Header closeButton>
+                <Modal.Title>인증번호</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <Form>
+                    <Form.Group className="">
+                        <Form.Label className="inputLabel">이메일로 인증번호 전송이 완료되었습니다!</Form.Label>
+                        <Form.Control maxLength={6} type="text" placeholder="인증코드 입력" value={checkNumber} onChange={(e) => setCheckNumber(e.target.value)} />
+                    </Form.Group>
+                </Form>
+                <div className="infoBox">
+                    <p style={{ color: "rgb(230,59,71)", fontWeight: 600 }}>인증번호 문자를 못 받으셨나요?</p>
+                    <div style={{ display: "flex" }}>
+                        <BsDot />
+                        <p className="infoText">
+                            입력하신 인증정보가 일치하지 않을 경우, 인증번호 문자
+                            <br />는 발송되지 않습니다.
+                        </p>
+                    </div>
+                    <div style={{ display: "flex" }}>
+                        <BsDot />
+                        <p className="infoText">
+                            인증번호가 문자로 수신되지 않을 경우 정확한 정보로 재
+                            <br /> 시도해 주시기 바랍니다.
+                        </p>
+                    </div>
+                </div>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button
+                    variant="secondary"
+                    onClick={() => {
+                        handleClose();
+                    }}
+                >
+                    취소
+                </Button>
+                <Button
+                    variant="primary"
+                    onClick={() => {
+                        CheckEmailMessageHandler();
+                    }}
+                >
+                    인증확인
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};

src/navigation/AppRouter.tsx

@@ -15,38 +15,38 @@ import MyIssues from "../pages/MyIssues/MyIssues";
 import TeamInfo from "../pages/TeamInfo/TeamInfo";
 import TeamSetting from "../pages/TeamSetting/TeamSetting";
 import { ProjectAccess } from "../pages/ProjectSetting/ProjectAccess";
-import { ProjectSetting } from "../pages/ProjectSetting/projectSetting";
-import { ProjectsContextProvider } from "../service/projects/projects.context";
-import React from "react";
+import { ProjectSetting } from "../pages/ProjectSetting/ProjectSetting";
+import { Profile } from "../pages/Profile/Profile";
+import { GithubLogin } from "../pages/Login/GithubLogin";
 
 const AppRouter = (): JSX.Element => {
-  return (
-    <BrowserRouter>
-      <ProjectsContextProvider>
-        <Routes>
-          <Route element={<TopNavBar />}>
-            <Route path="/" element={<Home />} />
-            <Route path="/login" element={<Login />} />
-            <Route path="/registerform" element={<RegisterForm />} />
-            <Route path="/teamInfo" element={<TeamInfo />} />
-            <Route path="/teamSetting" element={<TeamSetting />} />
-            <Route path="/projectSetting/:projectPk/:projectName" element={<ProjectSetting />} />
-            <Route path="/projectAccess/:projectPk/:projectName" element={<ProjectAccess />} />
-            <Route element={<LeftTeamSection />}>
-              <Route path="/myProjects" element={<MyProjects />} />
-              <Route path="/myIssues" element={<MyIssues />} />
-              <Route path="/CreateProject" element={<CreateProject />} />
-            </Route>
-            <Route element={<LeftNavSection />}>
-              <Route path="/Board" element={<Board />} />
-              <Route path="/Timeline" element={<Timeline />} />
-              <Route path="/ReleaseNote" element={<ReleaseNote />} />
-              <Route path="/CreateReleaseNote" element={<CreateReleaseNote />} />
-            </Route>
-          </Route>
-        </Routes>
-      </ProjectsContextProvider>
-    </BrowserRouter>
-  );
+    return (
+        <BrowserRouter>
+            <Routes>
+                <Route element={<TopNavBar />}>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/login" element={<Login />} />
+                    <Route path="/ghLogin" element={<GithubLogin />} />
+                    <Route path="/registerform" element={<RegisterForm />} />
+                    <Route path="/teamInfo" element={<TeamInfo />} />
+                    <Route path="/teamSetting" element={<TeamSetting />} />
+                    <Route path="/projectSetting/:projectPk/:projectName" element={<ProjectSetting />} />
+                    <Route path="/projectAccess/:projectPk/:projectName" element={<ProjectAccess />} />
+                    <Route path="/profile" element={<Profile />} />
+                    <Route element={<LeftTeamSection />}>
+                        <Route path="/myProjects" element={<MyProjects />} />
+                        <Route path="/myIssues" element={<MyIssues />} />
+                        <Route path="/CreateProject" element={<CreateProject />} />
+                    </Route>
+                    <Route element={<LeftNavSection />}>
+                        <Route path="/Board" element={<Board />} />
+                        <Route path="/Timeline" element={<Timeline />} />
+                        <Route path="/ReleaseNote" element={<ReleaseNote />} />
+                        <Route path="/CreateReleaseNote" element={<CreateReleaseNote />} />
+                    </Route>
+                </Route>
+            </Routes>
+        </BrowserRouter>
+    );
 };
 export default AppRouter;

src/navigation/LeftTeamSection.css

@@ -1,39 +1,40 @@
 .LeftTeamSection {
-  display: flex;
-  width: 100%;
-  background-color: #e9e3f5;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: #e9e3f5;
 }
 
 .LeftTeamSection .container {
-  display: flex;
-  margin: 4%;
-  padding: 4%;
-  flex-direction: column;
-  align-items: center;
-  width: 200px;
-  height: fit-content;
-  border-radius: 50px;
-  background-color: white;
-  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    display: flex;
+    margin: 4%;
+    padding: 4%;
+    flex-direction: column;
+    align-items: center;
+    width: 200px;
+    height: fit-content;
+    border-radius: 50px;
+    background-color: white;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 }
 
 .LeftTeamSection .all-button,
 .LeftTeamSection .private-button {
-  width: 100px;
-  margin-top: 10px;
+    width: 100px;
+    margin-top: 10px;
 }
 
 .LeftTeamSection .teams {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: 20px;
 }
 
 .LeftTeamSection .teams-title {
 }
 
 .LeftTeamSection .teams Button {
-  margin-top: 10px;
-  width: 100px;
+    margin-top: 10px;
+    width: 100px;
 }