fix : 마이페이지와 변경페이지 분리

src/apis/user.ts

@@ -1,6 +1,6 @@
 import { API_URL, getToken, IApiResponse } from '.';
 
-interface IGetUserInfoResponse extends IApiResponse<IUserInfo> {}
+export interface IGetUserInfoResponse extends IApiResponse<IUserInfo> {}
 interface IUpdateUserInfoResponse extends IApiResponse<IUserUpdateInfo> {}
 interface ISupplementaryUpdateInfoResponse
   extends IApiResponse<IUserSupplementaryUpdateInfo> {}
@@ -21,6 +21,10 @@ export interface IUserInfo {
   userUsePurpose: any; // 임시 타입
 }
 
+export interface IUserName {
+  userName: string;
+}
+
 export interface IUserUpdateInfo {
   userName: string;
   userPassword?: string;

src/components/molecules/RecordTagDropDown/RecordTagDropDown.tsx

@@ -4,16 +4,16 @@ import useRecordModalStore, {
   ITagItem,
 } from '../../../store/useRecordModalStore';
 import { getSchedule } from '../../../apis/schedule';
-import { useUserInfoStore } from '../../../store/useUserInfoStore';
+import { useNameStore } from '../../../store/useUserNameStore';
 import { useUnauthorizedRedirect } from '../../../hooks/useUnauthorizedRedirect';
 import useServerErrorToast from '../../../hooks/useServerErrorToast';
 import styles from './RecordTagDropDown.module.scss';
 
 const RecordTagDropDown = () => {
-  const { userInfo } = useUserInfoStore();
+  const { userName } = useNameStore();
   const { data, isError } = useQuery({
-    queryKey: ['schedule', userInfo?.userName],
-    queryFn: () => getSchedule(userInfo?.userName),
+    queryKey: ['schedule', userName?.userName],
+    queryFn: () => getSchedule(userName?.userName),
   });
 
   useUnauthorizedRedirect(data);

src/components/molecules/ScriptToolTip/ScriptToolTip.tsx

@@ -8,7 +8,7 @@ import {
 import { useAlertStore } from '../../../store/useAlertStore';
 import ScriptIcon from '../../../assets/images/nav/my-script-inactive.svg?react';
 import TrashCan from '../../../assets/images/orange-trash-can.svg?react';
-import { useUserInfoStore } from '../../../store/useUserInfoStore';
+import { useNameStore } from '../../../store/useUserNameStore';
 import { useUnauthorizedRedirect } from '../../../hooks/useUnauthorizedRedirect';
 import useServerErrorToast from '../../../hooks/useServerErrorToast';
 import styles from './ScriptToolTip.module.scss';
@@ -23,7 +23,7 @@ const ScriptToolTip = ({ id, scheduleName }: IProps) => {
   const queryClient = useQueryClient();
   const addAlert = useAlertStore((state) => state.addAlert);
   const showConfirm = useAlertStore((state) => state.showConfirm);
-  const { userInfo } = useUserInfoStore();
+  const { userName } = useNameStore();
 
   const { data, isError } = useQuery({
     queryKey: ['tooltip', id],
@@ -34,10 +34,10 @@ const ScriptToolTip = ({ id, scheduleName }: IProps) => {
   useServerErrorToast(isError);
 
   const deleteMutation = useMutation({
-    mutationFn: (id: number) => deleteScheduleElement(id, userInfo.userName),
+    mutationFn: (id: number) => deleteScheduleElement(id, userName.userName),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['schedule', userInfo.userName],
+        queryKey: ['schedule', userName.userName],
       });
       addAlert(`'${scheduleName}' 수업이 삭제되었습니다.`, 'success');
     },

src/components/organisms/AddScheduleForm/AddScheduleForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useUserInfoStore } from '../../../store/useUserInfoStore';
+import { useNameStore } from '../../../store/useUserNameStore';
 import { useAlertStore } from '../../../store/useAlertStore';
 import Warning from '../../../assets/images/warning.svg?react';
 import {
@@ -40,7 +40,7 @@ const AddScheduleForm = ({ onClose }: IProps) => {
   const endMinuteRef = useRef<HTMLInputElement | null>(null);
   const addAlert = useAlertStore((state) => state.addAlert);
 
-  const { userInfo } = useUserInfoStore();
+  const { userName } = useNameStore();
 
   useEffect(() => {
     const isFormValid = getIsAddScheduleFormValid(lectureInfo);
@@ -102,13 +102,13 @@ const AddScheduleForm = ({ onClose }: IProps) => {
 
   const postMutation = useMutation({
     mutationFn: (data: IScheduleElementDTO) =>
-      addScheduleElement(data, userInfo.userName),
+      addScheduleElement(data, userName.userName),
     onSuccess: (res) => {
       if (res.success) {
         addAlert('강의 추가에 성공했습니다.', 'success');
         onClose();
         queryClient.invalidateQueries({
-          queryKey: ['schedule', userInfo.userName],
+          queryKey: ['schedule', userName.userName],
         });
       } else {
         if (res.msg === 'Duplicate ScheduleElement Name') {
@@ -125,7 +125,7 @@ const AddScheduleForm = ({ onClose }: IProps) => {
     if (isFormValid) {
       const existingSchedule = queryClient.getQueryData<IGetScheduleResponse>([
         'schedule',
-        userInfo.userName,
+        userName.userName,
       ]);
       const formattedData = transformToScheduleElementDTO(lectureInfo);
       if (existingSchedule?.object?.scheduleElements) {

src/components/organisms/navigators/MainNav/MainNav.tsx

@@ -7,18 +7,18 @@ import TestMakeActive from '../../../../assets/images/nav/test-make-active.svg?r
 import TestMakeInactive from '../../../../assets/images/nav/test-make-inactive.svg?react';
 import MyPageActive from '../../../../assets/images/nav/my-page-active.svg?react';
 import MyPageInactive from '../../../../assets/images/nav/my-page-inactive.svg?react';
-import { useUserInfoStore } from '../../../../store/useUserInfoStore';
+import { useNameStore } from '../../../../store/useUserNameStore';
 import styles from './MainNav.module.scss';
 
 const MainNav = () => {
-  const { userInfo } = useUserInfoStore();
-  const firstLetter = userInfo?.userName.charAt(0);
+  const { userName } = useNameStore();
+  const firstLetter = userName?.userName.charAt(0);
 
   return (
     <nav className={styles.container}>
       <div className={styles.userProfile}>
         <div className={styles.profileImage}>{firstLetter}</div>
-        <p className={styles.userName}>{userInfo?.userName}</p>
+        <p className={styles.userName}>{userName?.userName}</p>
       </div>
       <section className={styles.linksContainer}>
         <TabLink

src/components/templates/modals/RecordModal/RecordModal.tsx

@@ -7,7 +7,7 @@ import Up from '../../../../assets/images/arrow/up-arrow.svg?react';
 import Down from '../../../../assets/images/arrow/down-arrow.svg?react';
 import Loading from '../../../../assets/images/LoadingCircle.gif';
 import { getSchedule } from '../../../../apis/schedule';
-import { useUserInfoStore } from '../../../../store/useUserInfoStore';
+import { useNameStore } from '../../../../store/useUserNameStore';
 import { useUnauthorizedRedirect } from '../../../../hooks/useUnauthorizedRedirect';
 import { addLecture, restructureScript } from '../../../../apis/record';
 import { getCurrentKoreanTimeString } from '../../../../utils/dateFormatters';
@@ -27,12 +27,12 @@ const RecordModal = ({ handleQuit, recognitionResult }: IProps) => {
   const [isTagClicked, setIsTagClicked] = useState(false);
   const [isRestructuring, setIsRestructuring] = useState(false);
 
-  const { userInfo } = useUserInfoStore();
+  const { userName } = useNameStore();
   const addAlert = useAlertStore((state) => state.addAlert);
 
   const { data, isError } = useQuery({
-    queryKey: ['schedule', userInfo.userName],
-    queryFn: () => getSchedule(userInfo.userName),
+    queryKey: ['schedule', userName.userName],
+    queryFn: () => getSchedule(userName.userName),
   });
 
   const mutation = useMutation({

src/hooks/useUserInfo.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import { getUserInfo } from '../apis/user';
+
+export const useMypageInfo = () => {
+  const { data, isError } = useQuery({
+    queryKey: ['user'],
+    queryFn: getUserInfo,
+  });
+
+  const info = {
+    userName: data?.object.userName || '',
+    userEmail: data?.object.userEmail || '',
+    userPassword: data?.object.userPassword || '',
+    userSchool: data?.object.userSchool || '',
+    userGrade: data?.object.userGrade || '',
+    userMajor: data?.object.userMajor || '',
+    userOAuthType: data?.object.userOAuthType || '',
+    userPasswordConfirm: '',
+  };
+
+  return { data, info, isError };
+};

src/pages/Main/Mypage/Mypage.module.scss

@@ -31,24 +31,116 @@
   width: 100%;
   max-width: 400px;
 }
-.profileImg {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  object-fit: cover;
-}
 
-// edit
-.selectBtn {
+.infoBox {
+  max-width: 400px;
   display: flex;
+  flex-direction: column;
   align-items: center;
+  gap: 10px;
+  padding: 42px 0;
+}
+
+.inputBox {
+  width: 100%;
+  position: relative;
+}
+.inputLabel {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  @include SemiBold_Sub_14;
+  color: $light-gray_81;
+  gap: 6px;
+}
+.input {
+  @include SemiBold_Body_16;
+  width: 100%;
+  height: 48px;
+  border: 0;
+  padding-bottom: 20px;
+  background-color: $white_FF;
+}
+.oauthTypeBox {
+  position: absolute;
+  top: 29%;
+  display: flex;
   justify-content: center;
-  width: 132px;
-  height: 132px;
+  align-items: center;
+  border-radius: 20%;
+  width: 35px;
+  height: 35px;
+  border: none;
+}
+.google {
+  background-color: $white_FF;
   border: 1px solid $light-bg_E5;
-  border-radius: 50%;
+}
+.kakao {
+  background-color: #f7e409;
+}
+.naver {
+  background-color: #30d341;
+}
+
+.oauthTypeImg {
+  object-fit: none;
+}
+.emailInput {
+  @include SemiBold_Body_16;
+  width: 100%;
+  height: 48px;
+  border: none;
+  padding: 5px 0px 20px 40px;
+  background-color: $white_FF;
+}
+.noLeftPadding {
+  padding-left: 0px;
+}
+.schoolInputBox {
+  width: 100%;
+  display: flex;
+  gap: 15px;
+}
+.schoolInput {
+  @include SemiBold_Body_16;
+  width: 100%;
+  height: 48px;
+  border: none;
+  padding-bottom: 20px;
+  background-color: $white_FF;
+}
+.gradeInput {
+  @include SemiBold_Body_16;
+  width: 100%;
+  height: 48px;
+  border: none;
+  padding-bottom: 20px;
+  background-color: $white_FF;
+}
+.btnBox {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.modifyBtn {
+  height: 48px;
+  @include SemiBold_Body_16;
+  background-color: $light-bg_F2;
+  color: $dark-font_5A;
+  border: 0;
+  border-radius: 8px;
   cursor: pointer;
+  padding: 16px 20px;
+  text-align: center;
+  text-decoration: none;
 }
-.imgSelectBtn {
-  display: none;
+
+.logoutBtn {
+  @include SemiBold_Body_16;
+  color: $brand-point;
+  height: 60px;
+  border: 0;
+  background-color: $white_FF;
+  cursor: pointer;
 }