어드민 계정 분리 관련 페이지 작업

src/App.tsx

@@ -28,6 +28,7 @@ import NoticeDetail from 'pages/Services/Notice/NoticeDetail';
 import NoticeWrite from 'pages/Services/Notice/NoticeWrite';
 import ForceUpdate from 'pages/Update/ForceUpdate';
 import UpdateList from 'pages/Update/UpdateList';
+import History from 'pages/History';
 
 function RequireAuth() {
   const location = useLocation();
@@ -74,6 +75,7 @@ function App() {
         <Route path="/notice/write" element={<NoticeWrite />} />
         <Route path="/force-update" element={<ForceUpdate />} />
         <Route path="/update-list" element={<UpdateList />} />
+        <Route path="/history" element={<History />} />
         <Route path="*" element={<h1>404</h1>} />
       </Route>
     </Routes>

src/components/common/SideNav/ChangePasswordModal.tsx

@@ -0,0 +1,104 @@
+import sha256 from 'sha256';
+import { Button, Flex, message } from 'antd';
+import { useChangePasswordMutation } from 'store/api/auth';
+import useBooleanState from 'utils/hooks/useBoolean';
+import CustomForm from 'components/common/CustomForm';
+import { styled } from 'styled-components';
+
+interface ChangePasswordFormProps {
+  closeModal: () => void,
+}
+
+interface PasswordFormData {
+  currentPassword: string,
+  newPassword: string,
+  checkPassword: string,
+}
+
+const ButtonContainer = styled(Flex)`
+  padding: 12px 0;
+  button {
+    border-radius: 5px;
+  }
+`;
+
+export default function ChangePasswordForm({
+  closeModal,
+}: ChangePasswordFormProps) {
+  const {
+    value: isPasswordCorrect, setTrue: correctPassword, setFalse: incorrectPassword,
+  } = useBooleanState(true);
+  const {
+    value: isNewPasswordMatch, setTrue: matchPassword, setFalse: notMatchPassword,
+  } = useBooleanState(true);
+
+  const [changePassword] = useChangePasswordMutation();
+  const [changePasswordForm] = CustomForm.useForm();
+  const { required } = CustomForm.useValidate();
+
+  const handlePasswordMatch = () => {
+    if (changePasswordForm.getFieldValue('newPassword') === changePasswordForm.getFieldValue('checkPassword')) {
+      matchPassword();
+    } else {
+      notMatchPassword();
+    }
+  };
+
+  const onFinish = (formData: PasswordFormData) => {
+    const hashedCurrentPassword = sha256(formData.currentPassword);
+    const hashedNewPassword = sha256(formData.checkPassword);
+    if (formData.newPassword !== formData.checkPassword) {
+      message.error('새 비밀번호를 다시 확인해주세요.');
+      return;
+    }
+    changePassword({ old_password: hashedCurrentPassword, new_password: hashedNewPassword })
+      .unwrap()
+      .then(() => {
+        message.success('비밀번호 변경 완료');
+        correctPassword();
+        closeModal();
+        changePasswordForm.resetFields();
+      })
+      .catch(({ data }) => {
+        message.error(data.message);
+        incorrectPassword();
+      });
+  };
+
+  return (
+    <CustomForm form={changePasswordForm} onFinish={onFinish}>
+      <CustomForm.Input
+        label="현재 비밀번호"
+        name="currentPassword"
+        type="password"
+        rules={[required()]}
+      />
+      {
+        !isPasswordCorrect
+        && <div style={{ color: 'red' }}>현재 비밀번호가 일치하지 않습니다.</div>
+      }
+      <CustomForm.Input
+        label="새 비밀번호"
+        name="newPassword"
+        type="password"
+        onChange={handlePasswordMatch}
+        rules={[required()]}
+      />
+      <CustomForm.Input
+        label="새 비밀번호 확인"
+        name="checkPassword"
+        type="password"
+        onChange={handlePasswordMatch}
+        rules={[required()]}
+      />
+      {
+        !isNewPasswordMatch
+        && <div style={{ color: 'red' }}>새 비밀번호와 일치하지 않습니다.</div>
+      }
+      <ButtonContainer justify="end">
+        <Button onClick={closeModal}>취소하기</Button>
+        <CustomForm.Button htmlType="submit">변경하기</CustomForm.Button>
+      </ButtonContainer>
+    </CustomForm>
+  );
+}

src/components/common/SideNav/index.tsx

@@ -4,10 +4,17 @@ import {
   UsergroupDeleteOutlined, FolderOpenOutlined, ControlOutlined,
   UserAddOutlined, BoldOutlined, ApartmentOutlined, SnippetsOutlined, GiftOutlined,
   NotificationOutlined, IssuesCloseOutlined, FormOutlined, UnorderedListOutlined,
+  HistoryOutlined, FlagOutlined,
 } from '@ant-design/icons';
-import { Menu, MenuProps } from 'antd';
+import {
+  Button, Menu, MenuProps,
+} from 'antd';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
+import useBooleanState from 'utils/hooks/useBoolean';
+import useLogout from 'utils/hooks/useLogout';
+import CustomForm from 'components/common/CustomForm';
+import ChangePasswordForm from './ChangePasswordModal';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -54,6 +61,9 @@ const items: MenuProps['items'] = [
     getItem('업데이트 관리', '/force-update', <FormOutlined />),
     getItem('목록 관리', '/update-list', <UnorderedListOutlined />),
   ]),
+  getItem('히스토리', 'history', <HistoryOutlined />, [
+    getItem('로그 히스토리', '/history', <FlagOutlined />),
+  ]),
 ];
 
 const SideNavConatiner = styled.nav`
@@ -76,14 +86,34 @@ const LogoImg = styled.img`
   cursor: pointer;
 `;
 
+const ModalWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 12px 0;
+
+  button {
+    border: none;
+    box-shadow: none;
+    padding: 0 7px;;
+  }
+
+  span.ant-btn-icon {
+    display: none;
+  }
+`;
+
 function SideNav() {
   const navigate = useNavigate();
   const { pathname } = useLocation();
-  const onClick: MenuProps['onClick'] = (e) => {
+  const onClickMenu: MenuProps['onClick'] = (e) => {
     navigate(e.key);
   };
   const selectedKeys = pathname.startsWith('/notice') ? ['/notice'] : [pathname];
 
+  const { value: isModalOpen, setTrue: openModal, setFalse: closeModal } = useBooleanState(false);
+  const logout = useLogout();
+
   return (
     <SideNavConatiner>
       <Logo>
@@ -92,12 +122,26 @@ function SideNav() {
         </Link>
       </Logo>
       <Menu
-        onClick={onClick}
+        onClick={onClickMenu}
         selectedKeys={selectedKeys}
         defaultOpenKeys={['service', 'service-store', 'user']}
         mode="inline"
         items={items}
       />
+      <ModalWrap>
+        <CustomForm.Modal
+          buttonText="비밀번호 변경"
+          title="비밀번호 변경"
+          footer={null}
+          open={isModalOpen}
+          onCancel={closeModal}
+          onClick={openModal}
+        >
+          <ChangePasswordForm closeModal={closeModal} />
+        </CustomForm.Modal>
+        <Button onClick={logout}>로그아웃</Button>
+      </ModalWrap>
+
     </SideNavConatiner>
   );
 }

src/constant/index.ts

@@ -1,7 +1,5 @@
 export const API_PATH = process.env.REACT_APP_API_PATH;
 
-export const SECOND_PASSWORD = process.env.REACT_APP_SECOND_PASSWORD;
-
 export const KOIN_URL = process.env.REACT_APP_API_PATH?.includes('stage') ? 'https://stage.koreatech.in' : 'https://koreatech.in';
 
 // 테이블 헤더 Title 매핑

src/model/auth.model.ts

@@ -29,3 +29,8 @@ export interface LoginRequest {
   email: string
   password: string
 }
+
+export interface ChangePasswordRequest {
+  old_password: string,
+  new_password: string,
+}

src/pages/History/index.tsx

@@ -0,0 +1,5 @@
+export default function History() {
+  return (
+    <div>History</div>
+  );
+}

src/pages/Login/index.tsx

@@ -1,7 +1,6 @@
 import { SyntheticEvent, useEffect, useRef } from 'react';
 import { useLoginMutation } from 'store/api/auth';
 import sha256 from 'sha256';
-import { SECOND_PASSWORD } from 'constant';
 import { setCredentials, useToken } from 'store/slice/auth';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
@@ -12,7 +11,6 @@ import * as S from './Login.style';
 function useLogin() {
   const idRef = useRef<InputRef>(null);
   const passwordRef = useRef<InputRef>(null);
-  const secondPasswordRef = useRef<InputRef>(null);
   const token = useToken();
   const [loginMutation] = useLoginMutation();
   const dispatch = useDispatch();
@@ -24,10 +22,9 @@ function useLogin() {
 
   const login = async (e: SyntheticEvent) => {
     e.preventDefault();
-    const refList = [idRef.current, passwordRef.current, secondPasswordRef.current];
+    const refList = [idRef.current, passwordRef.current];
 
     if (refList.some((current) => (current?.input?.value === ''))) message.warning('필수 입력값을 입력해주세요.');
-    else if (refList[2]?.input?.value !== SECOND_PASSWORD) message.error('올바른 계정이 아닙니다.');
     else {
       const res = await loginMutation({
         email: refList[0]?.input?.value!,
@@ -46,13 +43,13 @@ function useLogin() {
   };
 
   return {
-    idRef, passwordRef, secondPasswordRef, login,
+    idRef, passwordRef, login,
   };
 }
 
 function Login() {
   const {
-    idRef, passwordRef, secondPasswordRef, login,
+    idRef, passwordRef, login,
   } = useLogin();
 
   return (
@@ -63,7 +60,6 @@ function Login() {
         <S.Divider />
         <S.FormInput ref={idRef} autoComplete="id" placeholder="ID" />
         <S.FormInput ref={passwordRef} type="password" autoComplete="current-password" placeholder="PASSWORD" />
-        <S.FormInput ref={secondPasswordRef} type="password" placeholder="SECOND PASSWORD" />
         <S.SubmitButton type="primary" htmlType="submit">Login</S.SubmitButton>
       </S.LoginForm>
     </S.Container>

src/store/api/auth/index.ts

@@ -1,7 +1,7 @@
 import {
   BaseQueryFn, createApi, FetchArgs, fetchBaseQuery, FetchBaseQueryError,
 } from '@reduxjs/toolkit/query/react';
-import { LoginRequest, LoginResponse } from 'model/auth.model';
+import { LoginRequest, LoginResponse, ChangePasswordRequest } from 'model/auth.model';
 import { RootState } from 'store';
 import { API_PATH } from 'constant';
 import { setCredentials } from 'store/slice/auth';
@@ -78,7 +78,14 @@ export const authApi = createApi({
     protected: builder.mutation<{ message: string }, void>({
       query: () => 'protected',
     }),
+    changePassword: builder.mutation<void, ChangePasswordRequest>({
+      query: ({ old_password, new_password }) => ({
+        url: '/password',
+        method: 'PUT',
+        body: { old_password, new_password },
+      }),
+    }),
   }),
 });
 
-export const { useLoginMutation, useProtectedMutation } = authApi;
+export const { useLoginMutation, useProtectedMutation, useChangePasswordMutation } = authApi;

src/utils/hooks/useLogout.ts

@@ -0,0 +1,11 @@
+import { setCredentials } from 'store/slice/auth';
+
+export default function useLogout() {
+  const logout = () => {
+    sessionStorage.removeItem('token');
+    localStorage.removeItem('refresh_token');
+    setCredentials({ token: '' });
+    window.location.href = '/login';
+  };
+  return logout;
+}