Merge pull request #24 from CNU-OOHub/#15/main-page

refactor: 초기 화면 login
CNU-OOHub · Oct 30, 2022 · 518c88f · 518c88f
2 parents f010651 + cca8b39
commit 518c88f
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 24 deletions.
diff --git a/src/atom.jsx b/src/atom.jsx
@@ -11,7 +11,7 @@ export const adminCategoryModalVisibleState = atom({
 
 export const adminPageState = atom({
   key: "adminPage",
-  default: "Authorization Area",
+  default: { pageName: "Authorization Area", visible: false },
 });
 
 export const fileShareState = atom({

diff --git a/src/components/molecules/adminCategoryModal.jsx b/src/components/molecules/adminCategoryModal.jsx
@@ -1,6 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { useRecoilState } from "recoil";
 import styled from "styled-components";
+import { adminPageState } from "../../atom";
+import {
+  AUTHORIZATION_AREA,
+  CHANGE_PASSWORD,
+  RESOURCE_MONITORING,
+} from "../../constants";
 import theme from "../../styles/theme";
 import Text from "../atoms/text";
 
@@ -32,6 +39,7 @@ const TableData = styled.td`
 `;
 
 const AdminCategoryModal = () => {
+  const [adminPage, setAdminPage] = useRecoilState(adminPageState);
   return ReactDOM.createPortal(
     <Container>
       <Table>
@@ -42,7 +50,10 @@ const AdminCategoryModal = () => {
                 color={theme.textGreyColor}
                 fontSize={1.0}
                 onClick={() => {
-                  console.log("authorization area");
+                  setAdminPage({
+                    pageName: AUTHORIZATION_AREA,
+                    visible: true,
+                  });
                 }}
               >
                 Authorization Area
@@ -55,7 +66,10 @@ const AdminCategoryModal = () => {
                 color={theme.textGreyColor}
                 fontSize={1.0}
                 onClick={() => {
-                  console.log("Change Password");
+                  setAdminPage({
+                    pageName: CHANGE_PASSWORD,
+                    visible: true,
+                  });
                 }}
               >
                 Change Password
@@ -68,7 +82,10 @@ const AdminCategoryModal = () => {
                 color={theme.textGreyColor}
                 fontSize={1.0}
                 onClick={() => {
-                  console.log("Resource Monitoring");
+                  setAdminPage({
+                    pageName: RESOURCE_MONITORING,
+                    visible: true,
+                  });
                 }}
               >
                 Resource Monitoring

diff --git a/src/components/organisms/grayHeader.jsx → src/components/molecules/grayHeader.jsx b/src/components/organisms/grayHeader.jsx → src/components/molecules/grayHeader.jsx
@@ -12,12 +12,11 @@ const Head = styled.div`
 `;
 
 const GrayHeader = () => {
-    return <Head>
-      <div>
-        <img alt="logo" src={logo} width='100' />      
-      </div>
-
-      </Head>;
+  return (
+    <Head>
+      <img alt="logo" src={logo} width="100" />
+    </Head>
+  );
 };
 
-export default GrayHeader;
+export default GrayHeader;
diff --git a/src/components/molecules/homeHeader.jsx b/src/components/molecules/homeHeader.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { useRecoilState, useSetRecoilState } from "recoil";
-import { adminCategoryModalVisibleState } from "../../atom";
+import { adminCategoryModalVisibleState, adminState } from "../../atom";
 import theme from "../../styles/theme";
 import Logo from "../atoms/logo";
 import Text from "../atoms/text";
@@ -10,6 +10,7 @@ import FlexRow from "./flexRow";
 const HomeHeader = () => {
   const [adminCategoryModalVisible, setAdminCategoryModalVisible] =
     useRecoilState(adminCategoryModalVisibleState);
+  const [admin, setAdmin] = useRecoilState(adminState);
 
   const onClickAdminButton = () => {
     setAdminCategoryModalVisible(!adminCategoryModalVisible);
@@ -34,9 +35,11 @@ const HomeHeader = () => {
         <Text />
         <Text color={theme.textGreyColor}>부서명</Text>
         <Text color={theme.textGreyColor}>Groups</Text>
-        <Text color={theme.textGreyColor} onClick={onClickAdminButton}>
-          Admin
-        </Text>
+        {admin && (
+          <Text color={theme.textGreyColor} onClick={onClickAdminButton}>
+            Admin
+          </Text>
+        )}
       </FlexRow>
     </div>
   );

diff --git a/src/components/organisms/header.jsx b/src/components/organisms/header.jsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { useRecoilValue } from "recoil";
 import styled from "styled-components";
-import { adminState, loginState } from "../../atom";
+import { adminPageState, adminState, loginState } from "../../atom";
 import theme from "../../styles/theme";
 import HomeHeader from "../molecules/homeHeader";
-import GrayHeader from "./grayHeader";
+import GrayHeader from "../molecules/grayHeader";
 
 const AuthHead = styled.div`
   width: 100%;
@@ -14,11 +14,16 @@ const AuthHead = styled.div`
 
 const Header = () => {
   const login = useRecoilValue(loginState);
-  const admin = useRecoilValue(adminState);
-  return login ? (admin ? (<GrayHeader/>):(  <HomeHeader />)) : (
-      <AuthHead />
+  const adminPage = useRecoilValue(adminPageState);
+  return login ? (
+    adminPage.visible ? (
+      <GrayHeader />
+    ) : (
+      <HomeHeader />
+    )
+  ) : (
+    <AuthHead />
   );
-
 };
 
 export default Header;
diff --git a/src/components/pages/home.jsx b/src/components/pages/home.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
-import { fileShareState, loginState } from "../../atom";
+import { adminState, fileShareState, loginState } from "../../atom";
 import theme from "../../styles/theme";
 import Body from "../atoms/body";
 import {
@@ -87,6 +87,7 @@ const TerminalHeader = styled.div`
 
 const Home = () => {
   const [login, setLogin] = useRecoilState(loginState);
+  const [admin, setAdmin] = useRecoilState(adminState);
   const [sideMenu, setSideMenu] = useState(FOLDER);
   const [fileShare, setFileShare] = useRecoilState(fileShareState);
   const [openedFile, setOpenedFile] = useState("파일명");
@@ -96,6 +97,9 @@ const Home = () => {
     if (sessionStorage.getItem("accessToken")) {
       setLogin(true);
     }
+    if (localStorage.getItem("isAdmin")) {
+      setAdmin(true);
+    }
   });
 
   const sideMenuClicked = (clickedValue) => {

diff --git a/src/components/pages/logIn.jsx b/src/components/pages/logIn.jsx
@@ -11,14 +11,15 @@ import Text from "../atoms/text";
 import theme from "../../styles/theme";
 import Body from "../atoms/body";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import { loginState } from "../../atom";
+import { adminState, loginState } from "../../atom";
 
 const Logo = styled.img`
   width: 20rem;
   align-self: center;
 `;
 
 const LogIn = () => {
+  const setAdmin = useSetRecoilState(adminState);
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const [userInfo, setUserInfo] = useState({
@@ -46,6 +47,7 @@ const LogIn = () => {
   const authUserMutation = useMutation((userInfo) => authUser(userInfo), {
     onSuccess: () => {
       queryClient.invalidateQueries();
+      setAdmin(localStorage.getItem("isAdmin"));
       navigate("/home");
     },
   });

diff --git a/src/components/pages/signUp.jsx b/src/components/pages/signUp.jsx
@@ -15,6 +15,8 @@ import { useNavigate } from "react-router-dom";
 import Text from "../atoms/text";
 import theme from "../../styles/theme";
 import Body from "../atoms/body";
+import { useSetRecoilState } from "recoil";
+import { loginState } from "../../atom";
 
 const Logo = styled.img`
   width: 20rem;
@@ -32,6 +34,12 @@ const SignUp = () => {
     workspaceName: "",
   });
 
+  const setLogin = useSetRecoilState(loginState);
+
+  React.useEffect(() => {
+    setLogin(false);
+  });
+
   const changeUserInfo = (name, value) => {
     setUserInfo((prev) => ({ ...prev, [name]: value }));
   };

diff --git a/src/constants.jsx b/src/constants.jsx
@@ -2,3 +2,6 @@ export const FOLDER = "folder";
 export const SETTING = "setting";
 export const CONSOLE = "console";
 export const TERMINAL = "terminal";
+export const AUTHORIZATION_AREA = "Authorization Area";
+export const CHANGE_PASSWORD = "Change Password";
+export const RESOURCE_MONITORING = "Resource Monitoring";
diff --git a/src/router.jsx b/src/router.jsx
@@ -19,7 +19,7 @@ const Router = () => {
       <Header />
       {adminCategoryModalVisible && <AdminCategoryModal />}
       <Routes>
-        <Route path="/" element={<SignUp />} />
+        <Route path="/" element={<LogIn />} />
         <Route path="/signUp" element={<SignUp />} />
         <Route path="/logIn" element={<LogIn />} />
         <Route path="/home" element={<Home />} />