비밀번호 수정시 현재 비밀번호 입력하도록 수정

packages/admin/src/api/apiClient.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { getUserInfo } from 'auth/utils/userInfo';
 import { parseJwt } from 'auth/utils/parseJwt';
-import { AUTHORIZTION, BEARER_TOKEN } from 'auth/constants';
+import { AUTHORIZATION, BEARER_TOKEN } from 'auth/constants';
 import { authApiWrapper } from './wrapper/auth/authApiWrapper';
 
 const apiClient = axios.create({
@@ -13,7 +13,7 @@ const userInfo = getUserInfo();
 if (userInfo) {
   const token: string | null | undefined = userInfo.accessToken;
   if (typeof token === 'string') {
-    apiClient.defaults.headers.common[AUTHORIZTION] = BEARER_TOKEN(token);
+    apiClient.defaults.headers.common[AUTHORIZATION] = BEARER_TOKEN(token);
   }
 }
 
@@ -30,7 +30,7 @@ apiClient.interceptors.response.use(
         const jwt = parseJwt(userInfo.accessToken);
         if (jwt?.exp && Date.now() >= jwt.exp * 1000) {
           authApiWrapper.refresh()?.then((newAccessToken) => {
-            originalRequest.headers[AUTHORIZTION] = BEARER_TOKEN(newAccessToken);
+            originalRequest.headers[AUTHORIZATION] = BEARER_TOKEN(newAccessToken);
             return apiClient(originalRequest);
           });
         }

packages/admin/src/api/wrapper/auth/authApiWrapper.ts

@@ -3,7 +3,7 @@ import { setLogout } from './../../../utils/index';
 import { getUserInfo, setUserInfo } from 'auth/utils/userInfo';
 import apiClient from '../../apiClient';
 import { API_URL } from '../../../constants/apiUrl';
-import { AUTHORIZTION, BEARER_TOKEN, ROLES } from 'auth/constants';
+import { AUTHORIZATION, BEARER_TOKEN, ROLES } from 'auth/constants';
 
 interface ILoginRequest {
   email: string;
@@ -18,7 +18,7 @@ export const authApiWrapper = {
           alert('권한 없음');
           throw new Error('권한 없음');
         }
-        apiClient.defaults.headers.common[AUTHORIZTION] = BEARER_TOKEN(res.data.accessToken);
+        apiClient.defaults.headers.common[AUTHORIZATION] = BEARER_TOKEN(res.data.accessToken);
         return res.data;
       },
       (err) => {
@@ -40,7 +40,7 @@ export const authApiWrapper = {
       .then(
         (res: { data: { accessToken: string } }) => {
           const newAccessToken = res.data.accessToken;
-          apiClient.defaults.headers.common[AUTHORIZTION] = BEARER_TOKEN(newAccessToken);
+          apiClient.defaults.headers.common[AUTHORIZATION] = BEARER_TOKEN(newAccessToken);
           setUserInfo({ ...userInfo, accessToken: newAccessToken });
           return res.data.accessToken;
         },

packages/admin/src/utils/index.ts

@@ -1,5 +1,5 @@
 import apiClient from '../api/apiClient';
-import { AUTHORIZTION, BEARER_TOKEN, USER_INFO } from 'auth/constants';
+import { AUTHORIZATION, BEARER_TOKEN, USER_INFO } from 'auth/constants';
 
 export const roundToSecondDigit = (num: number) => Math.round(num * 100) / 100;
 
@@ -19,7 +19,7 @@ export const isNumeric = (value: any) => {
 
 export function setLogout() {
   localStorage.removeItem(USER_INFO);
-  delete apiClient.defaults.headers.common[AUTHORIZTION];
+  delete apiClient.defaults.headers.common[AUTHORIZATION];
 }
 
 export const setTokenHeader = () => {
@@ -29,7 +29,7 @@ export const setTokenHeader = () => {
       const userInfo = JSON.parse(userInfoString);
       const token: string | null | undefined = userInfo.accessToken;
       if (typeof token === 'string') {
-        apiClient.defaults.headers.common[AUTHORIZTION] = BEARER_TOKEN(token);
+        apiClient.defaults.headers.common[AUTHORIZATION] = BEARER_TOKEN(token);
       }
     }
   } catch (e) {

packages/auth/constants/index.ts

@@ -1,7 +1,7 @@
-export const USER_INFO = "userInfo";
-export const AUTHORIZTION = "Authorization";
+export const USER_INFO = 'userInfo';
+export const AUTHORIZATION = 'Authorization';
 export const BEARER_TOKEN = (token: string) => `Bearer ${token}`;
 export const ROLES = {
-  ROLE_ADMIN: "ROLE_ADMIN",
-  ROLE_USER: "ROLE_USER",
+  ROLE_ADMIN: 'ROLE_ADMIN',
+  ROLE_USER: 'ROLE_USER',
 } as const;

packages/service/src/Organism/PasswordForm/index.tsx

@@ -9,14 +9,25 @@ import { passwordFormStyle } from './style.css';
 
 interface IPasswordForm {
   submitNewPassword: (newpassword: string) => void;
+  isWithLogin?: boolean;
 }
 
-export const PasswordForm = ({ submitNewPassword }: IPasswordForm) => {
+export const PasswordForm = ({ submitNewPassword, isWithLogin = false }: IPasswordForm) => {
   const { passwordValue, setPasswordValue, setPasswordConfirmValue, isPasswordSame } =
     usePasswordConfirm();
 
   return (
     <div className={passwordFormStyle}>
+      {isWithLogin && (
+        <DefaultInputBox
+          id='original-password'
+          placeholder='현재 비밀번호를 입력해주세요'
+          type={INPUT_TYPE.PASSWORD}
+          name='original-password'
+          label='현재 비밀번호'
+          icon={<LockIcon width='1.25rem' height='1.3125rem' fill={themeColors.text[3]} />}
+        />
+      )}
       <DefaultInputBox
         id='password'
         placeholder='비밀번호를 입력해주세요'

packages/service/src/Page/CallbackPage/index.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import apiClient from '../../api/apiClient';
 import { authApiWrapper } from '../../api/wrapper/auth/authApiWrapper';
-import { AUTHORIZTION, BEARER_TOKEN } from 'auth/constants';
+import { AUTHORIZATION, BEARER_TOKEN } from 'auth/constants';
 import { URL } from '../../constants/url';
 import { setUserInfo } from 'auth/utils/userInfo';
 
@@ -15,7 +15,7 @@ const CallbackPage = () => {
 
     if (!token) return;
     authApiWrapper.getUserData(token).then((res) => {
-      apiClient.defaults.headers.common[AUTHORIZTION] = BEARER_TOKEN(token);
+      apiClient.defaults.headers.common[AUTHORIZATION] = BEARER_TOKEN(token);
       setUserInfo({ ...res.data, accessToken: token });
       navigate(URL.MAIN);
     });

packages/service/src/Page/ChangePasswordPageWithLogin/index.tsx

@@ -1,6 +1,7 @@
+import { getUserInfo } from 'auth/utils/userInfo';
 import { useNavigate } from 'react-router-dom';
 import { userApiWrapper } from '../../api/wrapper/user/userApiWrapper';
-import { URL } from '../../constants/url';
+import { URLWithParam } from '../../constants/url';
 import { PasswordForm } from '../../Organism/PasswordForm';
 import { IUpdateUserRequest } from '../../types/api/user';
 import { pageStyle, titleStyle } from './style.css';
@@ -9,22 +10,28 @@ export const ChangePasswordWithLoginPage = () => {
   const navigate = useNavigate();
 
   const submitNewPassword = () => {
-    const passwordValue = (document.getElementById('password') as HTMLInputElement).value;
-    const passwordConfirmValue = (document.getElementById('password-confirm') as HTMLInputElement)
+    const originalPassword = (document.getElementById('original-password') as HTMLInputElement)
       .value;
-    if (passwordValue !== passwordConfirmValue) return;
-    if (!passwordValue) return;
+    const password = (document.getElementById('password') as HTMLInputElement).value;
+    const passwordConfirm = (document.getElementById('password-confirm') as HTMLInputElement).value;
+
+    if (!password || password !== passwordConfirm) return;
+
     const data: IUpdateUserRequest = {
-      password: passwordValue,
+      originalPassword,
+      password,
     };
-    userApiWrapper.updateUser(data);
-    navigate(URL.MAIN);
+    userApiWrapper.updateUser(data).then(() => {
+      const userInfo = getUserInfo();
+      if (!userInfo) return;
+      navigate(URLWithParam.PROFILE(userInfo.id));
+    });
   };
   return (
     <>
       <div className={pageStyle}>
         <h2 className={titleStyle}>비밀번호 변경</h2>
-        <PasswordForm submitNewPassword={submitNewPassword} />
+        <PasswordForm submitNewPassword={submitNewPassword} isWithLogin />
       </div>
     </>
   );

packages/service/src/api/apiClient.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 import { toast } from 'react-toastify';
 import { API_BASE_URL } from '../constants/api';
 import { getUserInfo } from 'auth/utils/userInfo';
-import { AUTHORIZTION, BEARER_TOKEN } from 'auth/constants';
+import { AUTHORIZATION, BEARER_TOKEN } from 'auth/constants';
 import { setLogout } from '../utils/setLogout';
 
 const apiClient = axios.create({
@@ -13,7 +13,7 @@ const apiClient = axios.create({
 apiClient.interceptors.request.use((config) => {
   const userInfo = getUserInfo();
   if (userInfo) {
-    config.headers![AUTHORIZTION] = BEARER_TOKEN(userInfo.accessToken);
+    config.headers![AUTHORIZATION] = BEARER_TOKEN(userInfo.accessToken);
   }
   return config;
 });

packages/service/src/api/setTokenHeader.ts

@@ -1,4 +1,4 @@
-import { AUTHORIZTION, BEARER_TOKEN } from 'auth/constants';
+import { AUTHORIZATION, BEARER_TOKEN } from 'auth/constants';
 import apiClient from './apiClient';
 
 export const setTokenHeader = () => {
@@ -8,7 +8,7 @@ export const setTokenHeader = () => {
       const userInfo = JSON.parse(userInfoString);
       const token: string | null | undefined = userInfo.accessToken;
       if (typeof token === 'string') {
-        apiClient.defaults.headers.common[AUTHORIZTION] = BEARER_TOKEN(token);
+        apiClient.defaults.headers.common[AUTHORIZATION] = BEARER_TOKEN(token);
       }
     }
   } catch (e) {

packages/service/src/api/wrapper/auth/authApiWrapper.ts

@@ -2,14 +2,14 @@ import apiClient from '../../apiClient';
 import { API_URL } from '../../../constants/apiUrl';
 import { IChangePassword, IJoinRequest, ILoginRequest } from '../../../types/auth';
 import { IUserInfo } from 'auth/types';
-import { AUTHORIZTION, BEARER_TOKEN } from 'auth/constants';
+import { AUTHORIZATION, BEARER_TOKEN } from 'auth/constants';
 import { getUserInfo, setUserInfo } from 'auth/utils/userInfo';
 import { parseJwt } from 'auth/utils/parseJwt';
 
 export const authApiWrapper = {
   login: (data: ILoginRequest) => {
     return apiClient.post(API_URL.LOGIN, data).then((res: { data: IUserInfo }) => {
-      apiClient.defaults.headers.common[AUTHORIZTION] = BEARER_TOKEN(res.data.accessToken);
+      apiClient.defaults.headers.common[AUTHORIZATION] = BEARER_TOKEN(res.data.accessToken);
       setUserInfo(res.data);
       return res.data;
     });
@@ -31,7 +31,7 @@ export const authApiWrapper = {
       })
       .then((res: { data: { accessToken: string } }) => {
         const newAccessToken = res?.data?.accessToken;
-        apiClient.defaults.headers.common[AUTHORIZTION] = BEARER_TOKEN(newAccessToken);
+        apiClient.defaults.headers.common[AUTHORIZATION] = BEARER_TOKEN(newAccessToken);
         setUserInfo({ ...userInfo, accessToken: newAccessToken });
       });
   },

packages/service/src/constants/url.ts

@@ -5,6 +5,7 @@ const URL = {
   SEND_CHANGE_PASSWORD_EMAIL: '/change-password-email',
   CHANGE_PASSWORD: '/password-change/:code',
   CHANGE_PASSWORD_WITH_LOGIN: '/change-password',
+  PREVIOUS_PASSWORD: '/previous-password',
   PROFILE: '/profile/:id',
   USER_DATA_EDIT: '/mypage/edit',
   PROBLEM_LIST: '/problem',

packages/service/src/types/api/user.ts

@@ -1,6 +1,7 @@
 export interface IUpdateUserRequest {
   profileImageUrl?: string | null;
   username?: string | null;
+  originalPassword?: string | null;
   password?: string | null;
   major?: string | null;
   job?: string | null;

packages/service/src/utils/setLogout.ts

@@ -1,9 +1,9 @@
 import apiClient from '../api/apiClient';
-import { AUTHORIZTION } from 'auth/constants';
+import { AUTHORIZATION } from 'auth/constants';
 import { removeUserInfo } from 'auth/utils/userInfo';
 
 export function setLogout() {
   removeUserInfo();
-  delete apiClient.defaults.headers.common[AUTHORIZTION];
+  delete apiClient.defaults.headers.common[AUTHORIZATION];
   location.reload();
 }