diff --git a/src/apis/user.ts b/src/apis/user.ts
index f25cb2e..5e7a853 100644
--- a/src/apis/user.ts
+++ b/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;
diff --git a/src/components/molecules/RecordTagDropDown/RecordTagDropDown.tsx b/src/components/molecules/RecordTagDropDown/RecordTagDropDown.tsx
index 1d6a078..a86fa92 100644
--- a/src/components/molecules/RecordTagDropDown/RecordTagDropDown.tsx
+++ b/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);
diff --git a/src/components/molecules/ScriptToolTip/ScriptToolTip.tsx b/src/components/molecules/ScriptToolTip/ScriptToolTip.tsx
index 5cdc4a0..5d2b87e 100644
--- a/src/components/molecules/ScriptToolTip/ScriptToolTip.tsx
+++ b/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');
     },
diff --git a/src/components/organisms/AddScheduleForm/AddScheduleForm.tsx b/src/components/organisms/AddScheduleForm/AddScheduleForm.tsx
index 0d57f85..55542ae 100644
--- a/src/components/organisms/AddScheduleForm/AddScheduleForm.tsx
+++ b/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) {
diff --git a/src/components/organisms/navigators/MainNav/MainNav.tsx b/src/components/organisms/navigators/MainNav/MainNav.tsx
index ffadd14..6417454 100644
--- a/src/components/organisms/navigators/MainNav/MainNav.tsx
+++ b/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
diff --git a/src/components/templates/modals/RecordModal/RecordModal.tsx b/src/components/templates/modals/RecordModal/RecordModal.tsx
index 08c6306..68c910e 100644
--- a/src/components/templates/modals/RecordModal/RecordModal.tsx
+++ b/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({
diff --git a/src/hooks/useUserInfo.ts b/src/hooks/useUserInfo.ts
new file mode 100644
index 0000000..9b47536
--- /dev/null
+++ b/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 };
+};
diff --git a/src/pages/Main/Mypage/Mypage.module.scss b/src/pages/Main/Mypage/Mypage.module.scss
index 2398d65..5324fb7 100644
--- a/src/pages/Main/Mypage/Mypage.module.scss
+++ b/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;
 }
diff --git a/src/pages/Main/Mypage/Mypage.tsx b/src/pages/Main/Mypage/Mypage.tsx
index e6b9b2a..fabbb27 100644
--- a/src/pages/Main/Mypage/Mypage.tsx
+++ b/src/pages/Main/Mypage/Mypage.tsx
@@ -1,146 +1,122 @@
-import { useState, useEffect } from 'react';
-import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query';
-import Edit from './ProfileEdit/ProfileEdit';
-import View from './ProfileView/ProfileView';
-import { useAlertStore } from '../../../store/useAlertStore';
-import { updateInfo, IUserUpdateInfo, getUserInfo } from '../../../apis/user';
+import { Link } from 'react-router-dom';
+import Google from '../../../assets/images/logo/google.png';
+import Kakao from '../../../assets/images/logo/kakao.png';
+import Naver from '../../../assets/images/logo/naver.png';
+import { useMypageInfo } from '../../../hooks/useUserInfo';
 import { useUnauthorizedRedirect } from '../../../hooks/useUnauthorizedRedirect';
 import useServerErrorToast from '../../../hooks/useServerErrorToast';
 import styles from './Mypage.module.scss';
 
-interface UserInfo {
-  userName: string;
-  userEmail: string;
-  userPassword: string;
-  userSchool: string;
-  userGrade: string;
-  userMajor: string;
-  userOAuthType: string;
-  userPasswordConfirm?: string;
-}
-
 const MyPage = () => {
-  const { data, isError } = useQuery({
-    queryKey: ['user'],
-    queryFn: getUserInfo,
-  });
+  const { data, info, isError } = useMypageInfo();
 
   useUnauthorizedRedirect(data);
   useServerErrorToast(isError);
 
-  const [info, setInfo] = useState<UserInfo>({
-    userName: '',
-    userEmail: '',
-    userPassword: '',
-    userSchool: '',
-    userGrade: '',
-    userMajor: '',
-    userOAuthType: '',
-    userPasswordConfirm: '',
-  });
-
-  const [currentMode, setCurrentMode] = useState<'view' | 'edit'>('view');
-  const queryClient = useQueryClient();
-  const addAlert = useAlertStore((state) => state.addAlert);
-
-  useEffect(() => {
-    setInfo({
-      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: '',
-    });
-  }, [data]);
-
-  const handleEditClick = () => {
-    setCurrentMode('edit');
-  };
-  const handleViewClick = () => {
-    setInfo({
-      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: '',
-    });
-    setCurrentMode('view');
-  };
+  type LoginType = 'naver' | 'kakao' | 'google' | null;
 
-  const updateMutation = useMutation({
-    mutationFn: updateInfo,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['user'] });
-      setCurrentMode('view');
-    },
-    onError: (error) => {
-      addAlert(
-        '정보 변경에 오류가 발생했습니다.\n 다시 시도해 주세요.',
-        'error',
-      );
-      console.error(error);
-    },
-  });
-  const handleSaveClick = () => {
-    if (info.userPassword.length < 8) {
-      addAlert('비밀번호는 최소 8자 이상이어야 합니다.', 'error');
-      return;
-    }
-    if (
-      info.userOAuthType === '' &&
-      info.userPassword.trim() !== '' &&
-      info.userPassword !== info.userPasswordConfirm
-    ) {
-      addAlert('비밀번호와 비밀번호 확인이 일치하지 않습니다.', 'error');
-      return;
+  const getLogoSrc = (type: LoginType): string => {
+    switch (type) {
+      case 'naver':
+        return Naver;
+      case 'kakao':
+        return Kakao;
+      case 'google':
+        return Google;
+      default:
+        return '';
     }
+  };
 
-    const updateData: IUserUpdateInfo = {
-      userName: info.userName || '',
-      userPassword: info.userPassword || '',
-      userSchool: info.userSchool || '',
-      userGrade: info.userGrade || '',
-      userMajor: info.userMajor || '',
-    };
-
-    if (!info.userPassword) {
-      delete updateData.userPassword;
-    }
-    updateMutation.mutate(updateData);
+  const logoSrc = getLogoSrc(info.userOAuthType as LoginType);
+  const oauthTypeClass = info.userOAuthType && styles[info.userOAuthType];
 
-    setInfo({
-      userName: data?.object.userName || '',
-      userEmail: data?.object.userEmail || '',
-      userPassword: '',
-      userSchool: data?.object.userSchool || '',
-      userGrade: data?.object.userGrade || '',
-      userMajor: data?.object.userMajor || '',
-      userOAuthType: data?.object.userOAuthType || '',
-      userPasswordConfirm: '',
-    });
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    window.location.href = '/';
   };
 
   return (
     <div className={styles.wholeContainer}>
       <h1 className={styles.title}>계정 정보</h1>
       <div className={styles.profileContainer}>
-        <div className={styles.profileImgBox}></div>
-        {currentMode === 'view' ? (
-          <View info={info} onEditClick={handleEditClick} />
-        ) : (
-          <Edit
-            info={info}
-            setInfo={setInfo}
-            onSaveClick={handleSaveClick}
-            onViewClick={handleViewClick}
-          />
-        )}
+        <div className={styles.infoBox}>
+          <div className={styles.inputBox}>
+            <label className={styles.inputLabel}>
+              {logoSrc && (
+                <div className={`${styles.oauthTypeBox} ${oauthTypeClass}`}>
+                  <img
+                    className={styles.oauthTypeImg}
+                    src={logoSrc}
+                    alt={`${info.userOAuthType} Logo`}
+                  />
+                </div>
+              )}
+              계정 이메일
+              <input
+                className={`${styles.emailInput} ${!info.userOAuthType && styles.noLeftPadding}`}
+                type="text"
+                name="userEmail"
+                value={info.userEmail}
+                disabled
+              />
+            </label>
+          </div>
+          <div className={styles.inputBox}>
+            <label className={styles.inputLabel}>
+              사용자 이름
+              <input
+                className={styles.input}
+                type="text"
+                name="userName"
+                value={info.userName}
+                disabled
+              />
+            </label>
+          </div>
+          <div className={styles.schoolInputBox}>
+            <label className={styles.inputLabel}>
+              학교
+              <input
+                className={styles.schoolInput}
+                type="text"
+                name="userSchool"
+                value={info.userSchool}
+                disabled
+              />
+            </label>
+            <label className={styles.inputLabel}>
+              학년
+              <input
+                className={styles.gradeInput}
+                type="text"
+                name="userGrade"
+                value={info.userGrade}
+                disabled
+              />
+            </label>
+          </div>
+          <div className={styles.inputBox}>
+            <label className={styles.inputLabel}>
+              학과
+              <input
+                className={styles.input}
+                type="text"
+                name="userMajor"
+                value={info.userMajor}
+                disabled
+              />
+            </label>
+          </div>
+          <div className={styles.btnBox}>
+            <Link to="/home/my-page/edit" className={styles.modifyBtn}>
+              프로필 수정
+            </Link>
+            <button className={styles.logoutBtn} onClick={handleLogout}>
+              로그아웃
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/pages/Main/Mypage/ProfileEdit/ProfileEdit.module.scss b/src/pages/Main/Mypage/ProfileEdit/ProfileEdit.module.scss
index ff1f76d..86c5dd2 100644
--- a/src/pages/Main/Mypage/ProfileEdit/ProfileEdit.module.scss
+++ b/src/pages/Main/Mypage/ProfileEdit/ProfileEdit.module.scss
@@ -1,6 +1,37 @@
 @import '../../../../styles/variables/colors.scss';
 @import '../../../../styles/variables/fonts.scss';
 
+.wholeContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 406px;
+  gap: 20px;
+  padding: 2% 4%;
+}
+.profileContainer {
+  width: 100%;
+  min-height: 600px;
+  padding: 40px;
+  background-color: $white_FF;
+  border-radius: 8px;
+  gap: 35px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+.title {
+  @include SemiBold_Title_28;
+  color: $dark-font_5A;
+  padding: 7px 0;
+}
+.profileImgBox {
+  display: flex;
+  width: 100%;
+  max-width: 400px;
+}
+
 .infoBox {
   width: 100%;
   max-width: 400px;
@@ -8,6 +39,7 @@
   flex-direction: column;
   align-items: center;
   gap: 16px;
+  padding: 42px 0;
 }
 .inputBox {
   width: 100%;
@@ -69,6 +101,7 @@
   background-color: $white_FF;
   width: 24px;
   height: 24px;
+  cursor: pointer;
 }
 .gradeNum {
   color: $dark-font_33;
@@ -106,7 +139,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  padding: 16px 0 42px 0;
+  padding: 16px 0;
   gap: 16px;
 }
 .submitBtn {
diff --git a/src/pages/Main/Mypage/ProfileEdit/ProfileEdit.tsx b/src/pages/Main/Mypage/ProfileEdit/ProfileEdit.tsx
index a46aef1..38556d9 100644
--- a/src/pages/Main/Mypage/ProfileEdit/ProfileEdit.tsx
+++ b/src/pages/Main/Mypage/ProfileEdit/ProfileEdit.tsx
@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
 import Google from '../../../../assets/images/logo/google.png';
 import Kakao from '../../../../assets/images/logo/kakao.png';
 import Naver from '../../../../assets/images/logo/naver.png';
@@ -6,39 +8,35 @@ import On from '../../../../assets/images/showPasswordOn.svg?react';
 import Off from '../../../../assets/images/showPasswordOff.svg?react';
 import Next from '../../../../assets/images/arrow/next-arrow.svg?react';
 import Back from '../../../../assets/images/arrow/back-arrow.svg?react';
+import { useAlertStore } from '../../../../store/useAlertStore';
+import { updateInfo, IUserUpdateInfo } from '../../../../apis/user';
+import { useMypageInfo } from '../../../../hooks/useUserInfo';
+import { useUnauthorizedRedirect } from '../../../../hooks/useUnauthorizedRedirect';
+import useServerErrorToast from '../../../../hooks/useServerErrorToast';
 import styles from './ProfileEdit.module.scss';
 
-interface UserInfo {
-  userName: string;
-  userEmail: string;
-  userPassword: string;
-  userSchool: string;
-  userGrade: string;
-  userMajor: string;
-  userOAuthType: string;
-  userPasswordConfirm?: string;
-}
-
-interface ProfileEditProps {
-  info: UserInfo;
-  setInfo: React.Dispatch<React.SetStateAction<UserInfo>>;
-  onSaveClick: () => void;
-  onViewClick: () => void;
-}
-
-const ProfileEdit = ({
-  info,
-  setInfo,
-  onSaveClick,
-  onViewClick,
-}: ProfileEditProps) => {
+const ProfileEdit = () => {
+  const { data, info, isError } = useMypageInfo();
+
+  useUnauthorizedRedirect(data);
+  useServerErrorToast(isError);
+
+  const nav = useNavigate();
+
+  const [userInfo, setUserInfo] = useState({
+    ...info,
+  });
+
+  const queryClient = useQueryClient();
+  const addAlert = useAlertStore((state) => state.addAlert);
+
   const [isShowPasswordClick, setIsShowPasswordClick] = useState(false);
   const [isShowPasswordConfirmClick, setIsShowPasswordConfirmClick] =
     useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    setInfo({ ...info, [name]: value });
+    setUserInfo({ ...userInfo, [name]: value });
   };
   type LoginType = 'naver' | 'kakao' | 'google' | null;
 
@@ -54,8 +52,9 @@ const ProfileEdit = ({
         return '';
     }
   };
-  const logoSrc = getLogoSrc(info.userOAuthType as LoginType);
-  const oauthTypeClass = info.userOAuthType && styles[info.userOAuthType];
+  const logoSrc = getLogoSrc(userInfo.userOAuthType as LoginType);
+  const oauthTypeClass =
+    userInfo.userOAuthType && styles[userInfo.userOAuthType];
 
   const toggleShowPassword = (e: React.MouseEvent<HTMLSpanElement>) => {
     e.preventDefault();
@@ -67,145 +66,196 @@ const ProfileEdit = ({
   };
 
   const increaseGrade = () => {
-    if (parseInt(info.userGrade) < 8) {
-      setInfo({
-        ...info,
-        userGrade: (parseInt(info.userGrade) + 1).toString(),
+    if (parseInt(userInfo.userGrade) < 8) {
+      setUserInfo({
+        ...userInfo,
+        userGrade: (parseInt(userInfo.userGrade) + 1).toString(),
       });
     }
   };
 
   const decreaseGrade = () => {
-    if (parseInt(info.userGrade) > 1) {
-      setInfo({
-        ...info,
-        userGrade: (parseInt(info.userGrade) - 1).toString(),
+    if (parseInt(userInfo.userGrade) > 1) {
+      setUserInfo({
+        ...userInfo,
+        userGrade: (parseInt(userInfo.userGrade) - 1).toString(),
       });
     }
   };
 
+  const updateMutation = useMutation({
+    mutationFn: updateInfo,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['user'] });
+      nav('/home/my-page');
+    },
+    onError: (error) => {
+      addAlert(
+        '정보 변경에 오류가 발생했습니다.\n 다시 시도해 주세요.',
+        'error',
+      );
+      console.error(error);
+    },
+  });
+
+  const handleMypageClick = () => {
+    nav('/home/my-page');
+  };
+
+  const handleSaveClick = () => {
+    if (userInfo.userPassword && userInfo.userPassword.length < 8) {
+      addAlert('비밀번호는 최소 8자 이상이어야 합니다.', 'error');
+      return;
+    }
+    if (
+      userInfo.userOAuthType === '' &&
+      userInfo.userPassword.trim() !== '' &&
+      userInfo.userPassword !== userInfo.userPasswordConfirm
+    ) {
+      addAlert('비밀번호와 비밀번호 확인이 일치하지 않습니다.', 'error');
+      return;
+    }
+    const updateData: IUserUpdateInfo = {
+      userName: userInfo.userName || '',
+      userPassword: userInfo.userPassword || '',
+      userSchool: userInfo.userSchool || '',
+      userGrade: userInfo.userGrade || '',
+      userMajor: userInfo.userMajor || '',
+    };
+
+    if (!userInfo.userPassword) {
+      delete updateData.userPassword;
+    }
+    updateMutation.mutate(updateData);
+  };
+
   return (
-    <div className={styles.infoBox}>
-      <div className={styles.inputBox}>
-        <label className={styles.emailLabel}>
-          {logoSrc && (
-            <div className={`${styles.oauthTypeBox} ${oauthTypeClass}`}>
-              <img
-                className={styles.oauthTypeImg}
-                src={logoSrc}
-                alt={`${info.userOAuthType} Logo`}
+    <div className={styles.wholeContainer}>
+      <h1 className={styles.title}>계정 정보</h1>
+      <div className={styles.profileContainer}>
+        <div className={styles.infoBox}>
+          <div className={styles.inputBox}>
+            <label className={styles.emailLabel}>
+              {logoSrc && (
+                <div className={`${styles.oauthTypeBox} ${oauthTypeClass}`}>
+                  <img
+                    className={styles.oauthTypeImg}
+                    src={logoSrc}
+                    alt={`${userInfo.userOAuthType} Logo`}
+                  />
+                </div>
+              )}
+              계정 이메일
+              <input
+                className={`${styles.input} ${userInfo.userOAuthType && styles.rightPadding}`}
+                type="text"
+                name="userEmail"
+                value={userInfo.userEmail}
+                disabled
               />
-            </div>
+            </label>
+          </div>
+          {!logoSrc && (
+            <>
+              <div className={styles.inputBox}>
+                <label className={styles.inputLabel}>
+                  비밀번호
+                  <input
+                    className={`${styles.input} ${styles.rightPadding}`}
+                    type={isShowPasswordClick ? 'text' : 'password'}
+                    name="userPassword"
+                    value={userInfo.userPassword}
+                    onChange={handleChange}
+                    autoComplete="off"
+                  />
+                  <div className={styles.showBtn} onClick={toggleShowPassword}>
+                    {isShowPasswordClick ? <On /> : <Off />}
+                  </div>
+                </label>
+              </div>
+              <div className={styles.inputBox}>
+                <label className={styles.inputLabel}>
+                  비밀번호 확인
+                  <input
+                    className={`${styles.input} ${styles.rightPadding}`}
+                    type={isShowPasswordConfirmClick ? 'text' : 'password'}
+                    name="userPasswordConfirm"
+                    value={userInfo.userPasswordConfirm}
+                    onChange={handleChange}
+                    autoComplete="off"
+                  />
+                  <div
+                    className={styles.showBtn}
+                    onClick={toggleShowPasswordConfirm}
+                  >
+                    {isShowPasswordConfirmClick ? <On /> : <Off />}
+                  </div>
+                </label>
+              </div>
+            </>
           )}
-          계정 이메일
-          <input
-            className={`${styles.input} ${info.userOAuthType && styles.rightPadding}`}
-            type="text"
-            name="userEmail"
-            value={info.userEmail}
-            disabled
-          />
-        </label>
-      </div>
-      {!logoSrc && (
-        <>
+
           <div className={styles.inputBox}>
             <label className={styles.inputLabel}>
-              비밀번호
+              사용자 이름
               <input
-                className={`${styles.input} ${styles.rightPadding}`}
-                type={isShowPasswordClick ? 'text' : 'password'}
-                name="userPassword"
-                value={info.userPassword}
+                className={styles.input}
+                type="text"
+                name="userName"
+                value={userInfo.userName}
                 onChange={handleChange}
-                autoComplete="off"
+                placeholder="이름을 입력하세요"
               />
-              <div className={styles.showBtn} onClick={toggleShowPassword}>
-                {isShowPasswordClick ? <On /> : <Off />}
-              </div>
             </label>
           </div>
-          <div className={styles.inputBox}>
+          <div className={styles.schoolInputBox}>
             <label className={styles.inputLabel}>
-              비밀번호 확인
+              학교
               <input
-                className={`${styles.input} ${styles.rightPadding}`}
-                type={isShowPasswordConfirmClick ? 'text' : 'password'}
-                name="userPasswordConfirm"
-                value={info.userPasswordConfirm}
+                className={styles.schoolInput}
+                type="text"
+                name="userSchool"
+                value={userInfo.userSchool}
                 onChange={handleChange}
-                autoComplete="off"
+                placeholder="학교를 입력하세요"
               />
-              <div
-                className={styles.showBtn}
-                onClick={toggleShowPasswordConfirm}
-              >
-                {isShowPasswordConfirmClick ? <On /> : <Off />}
+            </label>
+            <label className={styles.inputLabel}>
+              학년
+              <div className={styles.gradeInput}>
+                <div className={styles.arrowBtn} onClick={decreaseGrade}>
+                  <Back />
+                </div>
+                <span className={styles.gradeNum}>{userInfo.userGrade}</span>
+                <div className={styles.arrowBtn} onClick={increaseGrade}>
+                  <Next />
+                </div>
               </div>
             </label>
           </div>
-        </>
-      )}
-
-      <div className={styles.inputBox}>
-        <label className={styles.inputLabel}>
-          사용자 이름
-          <input
-            className={styles.input}
-            type="text"
-            name="userName"
-            value={info.userName}
-            onChange={handleChange}
-            placeholder="이름을 입력하세요"
-          />
-        </label>
-      </div>
-      <div className={styles.schoolInputBox}>
-        <label className={styles.inputLabel}>
-          학교
-          <input
-            className={styles.schoolInput}
-            type="text"
-            name="userSchool"
-            value={info.userSchool}
-            onChange={handleChange}
-            placeholder="학교를 입력하세요"
-          />
-        </label>
-        <label className={styles.inputLabel}>
-          학년
-          <div className={styles.gradeInput}>
-            <div className={styles.arrowBtn} onClick={decreaseGrade}>
-              <Back />
-            </div>
-            <span className={styles.gradeNum}>{info.userGrade}</span>
-            <div className={styles.arrowBtn} onClick={increaseGrade}>
-              <Next />
-            </div>
+          <div className={styles.inputBox}>
+            <label className={styles.inputLabel}>
+              학과
+              <input
+                className={styles.input}
+                type="text"
+                name="userMajor"
+                value={userInfo.userMajor}
+                onChange={handleChange}
+                placeholder="학과를 입력하세요"
+              />
+            </label>
           </div>
-        </label>
-      </div>
-      <div className={styles.inputBox}>
-        <label className={styles.inputLabel}>
-          학과
-          <input
-            className={styles.input}
-            type="text"
-            name="userMajor"
-            value={info.userMajor}
-            onChange={handleChange}
-            placeholder="학과를 입력하세요"
-          />
-        </label>
-      </div>
 
-      <div className={styles.btnBox}>
-        <button className={styles.submitBtn} onClick={onSaveClick}>
-          저장하기
-        </button>
-        <button className={styles.viewModeBtn} onClick={onViewClick}>
-          프로필 수정 취소
-        </button>
+          <div className={styles.btnBox}>
+            <button className={styles.submitBtn} onClick={handleSaveClick}>
+              저장하기
+            </button>
+            <button className={styles.viewModeBtn} onClick={handleMypageClick}>
+              프로필 수정 취소
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/pages/Main/Mypage/ProfileView/ProfileView.module.scss b/src/pages/Main/Mypage/ProfileView/ProfileView.module.scss
deleted file mode 100644
index 81dc42c..0000000
--- a/src/pages/Main/Mypage/ProfileView/ProfileView.module.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@import '../../../../styles/variables/colors.scss';
-@import '../../../../styles/variables/fonts.scss';
-
-.infoBox {
-  max-width: 400px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-.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;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 20%;
-  width: 35px;
-  height: 35px;
-  border: none;
-}
-.google {
-  background-color: $white_FF;
-  border: 1px solid $light-bg_E5;
-}
-.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;
-}
-.logoutBtn {
-  @include SemiBold_Body_16;
-  color: $brand-point;
-  height: 60px;
-  border: 0;
-  background-color: $white_FF;
-  cursor: pointer;
-}
diff --git a/src/pages/Main/Mypage/ProfileView/ProfileView.tsx b/src/pages/Main/Mypage/ProfileView/ProfileView.tsx
deleted file mode 100644
index 563db5e..0000000
--- a/src/pages/Main/Mypage/ProfileView/ProfileView.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import Google from '../../../../assets/images/logo/google.png';
-import Kakao from '../../../../assets/images/logo/kakao.png';
-import Naver from '../../../../assets/images/logo/naver.png';
-import styles from './ProfileView.module.scss';
-
-interface UserInfo {
-  userName: string;
-  userEmail: string;
-  userPassword: string;
-  userSchool: string;
-  userGrade: string;
-  userMajor: string;
-  userOAuthType: string;
-}
-interface ProfileViewProps {
-  info: UserInfo;
-  onEditClick: () => void;
-}
-
-const ProfileView = ({ info, onEditClick }: ProfileViewProps) => {
-  type LoginType = 'naver' | 'kakao' | 'google' | null;
-
-  const getLogoSrc = (type: LoginType): string => {
-    switch (type) {
-      case 'naver':
-        return Naver;
-      case 'kakao':
-        return Kakao;
-      case 'google':
-        return Google;
-      default:
-        return '';
-    }
-  };
-  const logoSrc = getLogoSrc(info.userOAuthType as LoginType);
-  const oauthTypeClass = info.userOAuthType && styles[info.userOAuthType];
-
-  const handleLogout = () => {
-    localStorage.removeItem('token');
-    window.location.href = '/';
-  };
-  return (
-    <div className={styles.infoBox}>
-      <div className={styles.inputBox}>
-        <label className={styles.inputLabel}>
-          {logoSrc && (
-            <div className={`${styles.oauthTypeBox} ${oauthTypeClass}`}>
-              <img
-                className={styles.oauthTypeImg}
-                src={logoSrc}
-                alt={`${info.userOAuthType} Logo`}
-              />
-            </div>
-          )}
-          계정 이메일
-          <input
-            className={`${styles.emailInput} ${!info.userOAuthType && styles.noLeftPadding}`}
-            type="text"
-            name="userEmail"
-            value={info.userEmail}
-            disabled
-          />
-        </label>
-      </div>
-      <div className={styles.inputBox}>
-        <label className={styles.inputLabel}>
-          사용자 이름
-          <input
-            className={styles.input}
-            type="text"
-            name="userName"
-            value={info.userName}
-            disabled
-          />
-        </label>
-      </div>
-      <div className={styles.schoolInputBox}>
-        <label className={styles.inputLabel}>
-          학교
-          <input
-            className={styles.schoolInput}
-            type="text"
-            name="userSchool"
-            value={info.userSchool}
-            disabled
-          />
-        </label>
-        <label className={styles.inputLabel}>
-          학년
-          <input
-            className={styles.gradeInput}
-            type="text"
-            name="userGrade"
-            value={info.userGrade}
-            disabled
-          />
-        </label>
-      </div>
-      <div className={styles.inputBox}>
-        <label className={styles.inputLabel}>
-          학과
-          <input
-            className={styles.input}
-            type="text"
-            name="userMajor"
-            value={info.userMajor}
-            disabled
-          />
-        </label>
-      </div>
-      <div className={styles.btnBox}>
-        <button className={styles.modifyBtn} onClick={onEditClick}>
-          프로필 수정
-        </button>
-        <button className={styles.logoutBtn} onClick={handleLogout}>
-          로그아웃
-        </button>
-      </div>
-    </div>
-  );
-};
-export default ProfileView;
diff --git a/src/pages/Main/TimeTable/TimeTable.tsx b/src/pages/Main/TimeTable/TimeTable.tsx
index 22afb5c..0e2d17f 100644
--- a/src/pages/Main/TimeTable/TimeTable.tsx
+++ b/src/pages/Main/TimeTable/TimeTable.tsx
@@ -2,13 +2,13 @@ import { useRef, useState } from 'react';
 import styles from './TimeTable.module.scss';
 import WeeklyTimeTable from './WeeklyTimeTable/WeeklyTimeTable';
 import AddScheduleForm from '../../../components/organisms/AddScheduleForm/AddScheduleForm';
-import { useUserInfoStore } from '../../../store/useUserInfoStore';
+import { useNameStore } from '../../../store/useUserNameStore';
 import { useOutsideClick } from '../../../hooks/useOutsideClick';
 
 const TimeTable = () => {
   const [isOpen, setIsOpen] = useState(false);
   const modalRef = useRef<HTMLDivElement>(null);
-  const { userInfo } = useUserInfoStore();
+  const { userName } = useNameStore();
 
   const handleOpenModal = () => {
     setIsOpen(!isOpen);
@@ -27,7 +27,7 @@ const TimeTable = () => {
     <div className={styles.wholeWrapper}>
       <div className={styles.headerContainer}>
         <div className={styles.dateBox}>
-          <h3 className={styles.title}>{`${userInfo?.userName}의 시간표`}</h3>
+          <h3 className={styles.title}>{`${userName?.userName}의 시간표`}</h3>
         </div>
         <button className={styles.addScheduleBtn} onClick={handleOpenModal}>
           강의 추가 +
diff --git a/src/pages/Main/TimeTable/WeeklyTimeTable/WeeklyTimeTable.tsx b/src/pages/Main/TimeTable/WeeklyTimeTable/WeeklyTimeTable.tsx
index 8fb1700..b7dee37 100644
--- a/src/pages/Main/TimeTable/WeeklyTimeTable/WeeklyTimeTable.tsx
+++ b/src/pages/Main/TimeTable/WeeklyTimeTable/WeeklyTimeTable.tsx
@@ -2,17 +2,17 @@ import { useQuery } from '@tanstack/react-query';
 import TimeTableItem from '../../../../components/molecules/TimeTableItem/TimeTableItem';
 import { daysOfWeek, TIMELIST } from '../../../../constants/schedule';
 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 './WeeklyTimeTable.module.scss';
 
 const WeeklyTimeTable = () => {
-  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);
diff --git a/src/pages/PrivateRoute.tsx b/src/pages/PrivateRoute.tsx
index acd9b58..a3637dd 100644
--- a/src/pages/PrivateRoute.tsx
+++ b/src/pages/PrivateRoute.tsx
@@ -1,6 +1,6 @@
 import { Navigate } from 'react-router-dom';
 import { checkAuthentication } from '../utils/auth';
-import { useUserInfoStore } from '../store/useUserInfoStore';
+import { useNameStore } from '../store/useUserNameStore';
 import { useQuery } from '@tanstack/react-query';
 import { getUserInfo } from '../apis/user';
 import { useEffect, useState } from 'react';
@@ -20,7 +20,7 @@ interface UserInfo {
 const ONE_DAY_MS = 24 * 60 * 60 * 1000;
 
 const PrivateRoute = ({ element }: IProps) => {
-  const { setUserInfo } = useUserInfoStore();
+  const { setUserName } = useNameStore();
   const [showModal, setShowModal] = useState(false);
 
   const { data, isLoading, isError } = useQuery({
@@ -38,7 +38,7 @@ const PrivateRoute = ({ element }: IProps) => {
 
   useEffect(() => {
     if (!isLoading && data != null) {
-      setUserInfo(data?.object);
+      setUserName(data?.object);
 
       if (!isUserInfoComplete(data.object)) {
         const lastRequestTime = localStorage.getItem('lastRequestTime');
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f2d85fe..57fd0cb 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,6 +5,7 @@ import TimeTable from './Main/TimeTable/TimeTable';
 import TestMake from './Main/TestMake/TestMake';
 import MyScript from './Main/MyScript/MyScript';
 import MyPage from './Main/Mypage/Mypage';
+import ProfileEdit from './Main/Mypage/ProfileEdit/ProfileEdit';
 import PrivateRoute from './PrivateRoute';
 import Record from './Record/Record';
 import Test from './Test/Test';
@@ -54,7 +55,13 @@ const router = createBrowserRouter([
       },
       {
         path: 'my-page',
-        element: <MyPage />,
+        children: [
+          {
+            path: '',
+            element: <MyPage />,
+          },
+          { path: 'edit', element: <ProfileEdit /> },
+        ],
       },
     ],
   },
diff --git a/src/store/useUserInfoStore.ts b/src/store/useUserInfoStore.ts
deleted file mode 100644
index ab7f605..0000000
--- a/src/store/useUserInfoStore.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { create } from 'zustand';
-import { IUserInfo } from '../apis/user';
-
-interface IUserStoreState {
-  userInfo: IUserInfo;
-  setUserInfo: (userInfo: IUserInfo) => void;
-}
-
-const initialUserInfo = {
-  userId: '',
-  userName: '',
-  userEmail: '',
-  userPassword: '',
-  userRole: '',
-  userIsOAuth: false,
-  userOAuthType: '',
-  userSchool: '',
-  userMajor: '',
-  userGrade: '',
-  userSavedLectures: [], // 임시
-  userSchedule: [], // 임시
-  userUsePurpose: null, // 임시
-};
-
-export const useUserInfoStore = create<IUserStoreState>((set) => ({
-  userInfo: initialUserInfo,
-  setUserInfo: (newUserInfo: IUserInfo) => set({ userInfo: newUserInfo }),
-}));
diff --git a/src/store/useUserNameStore.ts b/src/store/useUserNameStore.ts
new file mode 100644
index 0000000..df2a1a7
--- /dev/null
+++ b/src/store/useUserNameStore.ts
@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+import { IUserName } from '../apis/user';
+
+interface IUserStoreState {
+  userName: IUserName;
+  setUserName: (userName: IUserName) => void;
+}
+
+const initialUserName = {
+  userName: '',
+};
+
+export const useNameStore = create<IUserStoreState>((set) => ({
+  userName: initialUserName,
+  setUserName: (newUserName: IUserName) => set({ userName: newUserName }),
+}));