diff --git a/components/modal/ModalProvider.tsx b/components/modal/ModalProvider.tsx
index 25c925435..a38cbed0d 100644
--- a/components/modal/ModalProvider.tsx
+++ b/components/modal/ModalProvider.tsx
@@ -21,7 +21,7 @@ import styles from 'styles/modal/Modal.module.scss';
 
 export default function ModalProvider() {
   const [
-    { modalName, cancel, enroll, manual, announcement, exp, intraId },
+    { modalName, cancel, enroll, manual, announcement, exp, intraId, userId },
     setModal,
   ] = useRecoilState(modalState);
   const setReloadMatch = useSetRecoilState(reloadMatchState);
@@ -38,7 +38,7 @@ export default function ModalProvider() {
     'USER-PROFILE_EDIT': <EditProfileModal />,
     'FIXED-AFTER_GAME': <AfterGameModal />,
     'FIXED-STAT': <StatChangeModal {...exp} />,
-    'ADMIN-PROFILE': intraId ? <AdminProfileModal value={intraId} /> : null,
+    'ADMIN-PROFILE': userId ? <AdminProfileModal value={userId} /> : null,
     'ADMIN-PENALTY': intraId ? <AdminPenaltyModal value={intraId} /> : null,
     'ADMIN-NOTI_ALL': intraId ? <AdminNotiAllModal value={intraId} /> : null,
     'ADMIN-NOTI_USER': intraId ? <AdminNotiUserModal value={intraId} /> : null,
diff --git a/components/modal/admin/AdminProfileModal.tsx b/components/modal/admin/AdminProfileModal.tsx
index 5c859e734..f80613286 100644
--- a/components/modal/admin/AdminProfileModal.tsx
+++ b/components/modal/admin/AdminProfileModal.tsx
@@ -1,83 +1,105 @@
-import { useSetRecoilState } from 'recoil';
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
-import styles from 'styles/admin/modal/AdminProfile.module.scss';
+import { useSetRecoilState } from 'recoil';
+import {
+  AdminProfileProps,
+  roleTypes,
+  UserInfo,
+} from 'types/admin/adminUserTypes';
+import { racketTypes } from 'types/userTypes';
 import { modalState } from 'utils/recoil/modal';
 import instance from 'utils/axios';
-import Image from 'next/image';
-import axios from 'axios';
 import useUploadImg from 'hooks/useUploadImg';
-import { Props, roleTypes, UserInfo } from 'types/admin/adminUserTypes';
-import { racketTypes } from 'types/userTypes';
+import styles from 'styles/admin/modal/AdminProfile.module.scss';
+import { errorState } from 'utils/recoil/error';
+
+const STAT_MSG_LIMIT = 30;
+
+export default function AdminProfileModal(props: AdminProfileProps) {
+  const [userInfo, setUserInfo] = useState<UserInfo>({
+    intraId: '',
+    userImageUri: null,
+    statusMessage: '',
+    racketType: 'shakeHand',
+    wins: 0,
+    losses: 0,
+    ppp: 0,
+    eMail: '',
+    roleType: 'ROLE_USER',
+  });
 
-export default function AdminProfileModal(props: Props) {
-  const [userInfo, setUserInfo] = useState<UserInfo>();
   const { imgData, imgPreview, uploadImg } = useUploadImg();
   const setModal = useSetRecoilState(modalState);
+  const setError = useSetRecoilState(errorState);
 
   useEffect(() => {
     getBasicProfileHandler();
   }, []);
 
   const getBasicProfileHandler = async () => {
-    const res = await fetch(`http://localhost:3000/api/admin/users`); //admin/users/{props.intraId}/detail
-    const data = await res.json();
-    setUserInfo(data[0]);
+    try {
+      const res = await instance.get(
+        `/pingpong/admin/users/${props.value}/detail`
+      );
+      setUserInfo(res?.data);
+    } catch (e) {
+      setError('SW01');
+    }
   };
 
   const inputHandler = ({
     target: { name, value },
+  }:
+    | React.ChangeEvent<HTMLTextAreaElement>
+    | React.ChangeEvent<HTMLInputElement>) => {
+    if (name === 'statusMessage' && value.length > STAT_MSG_LIMIT) return;
+    setUserInfo({ ...userInfo, [name]: value });
+  };
+
+  const inputNumHandler = ({
+    target: { name, value },
   }: React.ChangeEvent<HTMLInputElement>) => {
-    if (name === 'wins' || name === 'losses' || name === 'ppp') {
-      const intValue = parseInt(value);
-      setUserInfo((prev: any) => ({
-        ...prev,
-        [name]: intValue,
-      }));
-    } else {
-      setUserInfo((prev: any) => ({
-        ...prev,
-        [name]: value,
-      }));
-    }
+    const intValue = parseInt(value);
+    setUserInfo({ ...userInfo, [name]: intValue });
   };
 
   const submitHandler = async () => {
-    //const formData = new FormData();
-    console.log(userInfo);
-    // const data = {
-    //   userId: userInfo.userId,
-    //   intraId: userInfo.intraId,
-    //   statusMessage: userInfo.statusMessage,
-    //   racketType: userInfo.racketType,
-    //   wins: userInfo.wins,
-    //   losses: userInfo.losses,
-    //   ppp: userInfo.ppp,
-    //   eMail: userInfo.eMail,
-    //   roleType: userInfo.roleType,
-    // };
-    //formData.append('files', imgData);
-    // formData.append(
-    //   'data',
-    //   new Blob([JSON.stringify(data)], {
-    //     type: 'application/json',
-    //   })
-    // );
-    // await instance.put(`/admin/users/${userInfo.userId}`, e);
-    // try {
-    //   const result = await axios.put(`/admin/users/daijeong/detail`);
-    //   console.log(result);
-    // } catch (error) {
-    //   console.log(error);
-    // }
+    const formData = new FormData();
+    const data = {
+      userId: props.value,
+      intraId: userInfo.intraId,
+      statusMessage: userInfo.statusMessage,
+      racketType: userInfo.racketType,
+      wins: userInfo.wins,
+      losses: userInfo.losses,
+      ppp: userInfo.ppp,
+      eMail: userInfo.eMail,
+      roleType: userInfo.roleType,
+    };
+    formData.append(
+      'updateRequestDto',
+      new Blob([JSON.stringify(data)], {
+        type: 'application/json',
+      })
+    );
+    formData.append(
+      'multipartFile',
+      new Blob([imgData as File], { type: 'image/jpeg' })
+    );
+
+    try {
+      await instance.put(
+        `/pingpong/admin/users/${props.value}/detail`,
+        formData
+      );
+    } catch (e) {
+      setError('SW02');
+    }
   };
 
   return (
     <>
-      <div
-        className={
-          styles.modal
-        } /* method="put"  */ /* encType="multipart/form-data" */
-      >
+      <div className={styles.modal}>
         <div className={styles.title}>
           <div>회원 정보 수정</div>
         </div>
@@ -87,8 +109,9 @@ export default function AdminProfileModal(props: Props) {
               <label className={styles.image}>
                 <Image
                   src={imgPreview ? imgPreview : `${userInfo?.userImageUri}`}
-                  layout='fill'
-                  alt=''
+                  width='120'
+                  height='110'
+                  alt='Profile Image'
                 />
                 <input
                   type='file'
@@ -116,11 +139,12 @@ export default function AdminProfileModal(props: Props) {
         </div>
         <div className={styles.middle}>
           <label>상태 메시지</label>
+          <div>{`${userInfo.statusMessage.length} / ${STAT_MSG_LIMIT}`}</div>
           <textarea
             name='statusMessage'
             onChange={inputHandler}
             value={userInfo?.statusMessage}
-          ></textarea>
+          />
         </div>
         <div className={styles.bottom}>
           <div className={styles.choice}>
@@ -173,22 +197,24 @@ export default function AdminProfileModal(props: Props) {
               <div>
                 <input
                   name='wins'
-                  onChange={inputHandler}
+                  type='number'
+                  onChange={inputNumHandler}
                   value={userInfo?.wins}
                 />
               </div>
               <div>
                 <input
                   name='losses'
-                  onChange={inputHandler}
+                  type='number'
+                  onChange={inputNumHandler}
                   value={userInfo?.losses}
                 />
               </div>
               <div>
                 <input
-                  type='text'
                   name='ppp'
-                  onChange={inputHandler}
+                  type='number'
+                  onChange={inputNumHandler}
                   value={userInfo?.ppp}
                 />
               </div>
diff --git a/hooks/useUploadImg.ts b/hooks/useUploadImg.ts
index 1059499de..2e67eb5dd 100644
--- a/hooks/useUploadImg.ts
+++ b/hooks/useUploadImg.ts
@@ -1,32 +1,35 @@
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { errorState } from 'utils/recoil/error';
 import imageCompression from 'browser-image-compression';
 
 export default function useUploadImg() {
   const [imgData, setImgData] = useState<File>();
-  const [imgPreview, setImgPreview] = useState<any>();
+  const [imgPreview, setImgPreview] = useState<string>();
 
-  const uploadImg = (e: any) => {
-    const file = e.target.files[0];
+  const setError = useSetRecoilState(errorState);
+  const uploadImg = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
     if (file) {
       setImgData(file);
     }
   };
 
   const imgCompress = async (fileSrc: File) => {
-    const options = {
+    /* const options = {
       maxSizeMB: 0.1,
       maxWidthOrHeight: 320,
       useWebWorker: true,
-    };
+    }; */
     try {
-      const res = await imageCompression(fileSrc, options);
+      //   const res = await imageCompression(fileSrc, options);
       const reader = new FileReader();
-      reader.readAsDataURL(res);
+      reader.readAsDataURL(fileSrc);
       reader.onloadend = () => {
-        setImgPreview(reader.result);
+        setImgPreview(reader.result as string);
       };
     } catch (error) {
-      console.log(error);
+      setError('SW00');
     }
   };
 
diff --git a/package-lock.json b/package-lock.json
index 829e8da91..bb623b333 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@types/react-js-pagination": "^3.0.4",
         "@types/react-router-dom": "^5.3.3",
         "axios": "^0.27.2",
+        "browser-image-compression": "^2.0.0",
         "chart.js": "^3.8.0",
         "next": "^12.1.6",
         "next-images": "^1.8.4",
@@ -2133,6 +2134,14 @@
         "unload": "2.2.0"
       }
     },
+    "node_modules/browser-image-compression": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-2.0.0.tgz",
+      "integrity": "sha512-kBlkZo13yOOfcmrPW0M0K/UdZPogIQj2gRvXIM3FktAnfW6VRq9aY2RI+F6O0x6DMj1Xm+WLGgWcFK8Fu/ddnw==",
+      "dependencies": {
+        "uzip": "0.20201231.0"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.21.5",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
@@ -6259,6 +6268,11 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/uzip": {
+      "version": "0.20201231.0",
+      "resolved": "https://registry.npmjs.org/uzip/-/uzip-0.20201231.0.tgz",
+      "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng=="
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -8006,6 +8020,14 @@
         "unload": "2.2.0"
       }
     },
+    "browser-image-compression": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-2.0.0.tgz",
+      "integrity": "sha512-kBlkZo13yOOfcmrPW0M0K/UdZPogIQj2gRvXIM3FktAnfW6VRq9aY2RI+F6O0x6DMj1Xm+WLGgWcFK8Fu/ddnw==",
+      "requires": {
+        "uzip": "0.20201231.0"
+      }
+    },
     "browserslist": {
       "version": "4.21.5",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
@@ -10924,6 +10946,11 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
+    "uzip": {
+      "version": "0.20201231.0",
+      "resolved": "https://registry.npmjs.org/uzip/-/uzip-0.20201231.0.tgz",
+      "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng=="
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
diff --git a/pages/admin/users.tsx b/pages/admin/users.tsx
index 667209ca5..2566fb8c3 100644
--- a/pages/admin/users.tsx
+++ b/pages/admin/users.tsx
@@ -8,9 +8,7 @@ export default function Users() {
     <div>
       users page
       <button
-        onClick={() =>
-          setModal({ modalName: 'ADMIN-PROFILE', intraId: 'daijeong' })
-        }
+        onClick={() => setModal({ modalName: 'ADMIN-PROFILE', userId: 5 })}
       >
         자세히
       </button>
diff --git a/pages/api/admin/users/index.ts b/pages/api/admin/users/index.ts
index 9fe691daa..05fdb00ff 100644
--- a/pages/api/admin/users/index.ts
+++ b/pages/api/admin/users/index.ts
@@ -6,10 +6,10 @@ export default function handler(
 ) {
   const user: any = [
     {
-      userId: 1,
-      intraId: 'sungwook',
+      userId: 5,
+      intraId: 'jiyun',
       userImageUri:
-        'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/sungwook.jpeg',
+        'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/jiyun.jpeg',
       racketType: 'penholder',
       statusMessage: 'hello',
       wins: 10,
diff --git a/styles/admin/modal/AdminProfile.module.scss b/styles/admin/modal/AdminProfile.module.scss
index 7da3f986c..28cac6159 100644
--- a/styles/admin/modal/AdminProfile.module.scss
+++ b/styles/admin/modal/AdminProfile.module.scss
@@ -1,25 +1,25 @@
 .modal {
-  background-color: #ffffff;
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
-  border-radius: 10px;
   display: flex;
   flex-direction: column;
-  color: #898989;
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
   width: 450px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  color: #898989;
 }
 
 .title {
+  display: flex;
+  align-items: center;
+  line-height: 150%;
+  margin-left: 2rem;
+  height: 70px;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-size: 28px;
-  line-height: 150%;
   text-transform: uppercase;
   color: black;
-  margin-left: 2rem;
-  height: 70px;
-  display: flex;
-  align-items: center;
 }
 
 .topWrap {
@@ -69,8 +69,12 @@
 
 .middle {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
   padding: 1rem 2rem;
+  :nth-child(2) {
+    color: #2678f3;
+  }
 }
 
 .middle textarea {
@@ -84,9 +88,9 @@
 .bottom {
   display: flex;
   flex-direction: column;
-  text-align: center;
-  object-fit: contain;
   align-items: stretch;
+  object-fit: contain;
+  text-align: center;
 }
 
 .choice {
@@ -99,19 +103,19 @@
 }
 
 .choiceName {
-  width: 100px;
-  height: 200px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
+  width: 100px;
+  height: 200px;
 }
 
 .choiceBtn {
-  width: 225px;
-  height: 200px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
+  width: 225px;
+  height: 200px;
 }
 
 .choiceBtn input {
@@ -124,39 +128,41 @@
 }
 
 .btns {
-  padding: 1rem 0;
-  border-top: 1.5px solid #e5e5e5;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: space-around;
+  align-items: center;
   height: 120px;
+  padding: 1rem 0;
+  border-top: 1.5px solid #e5e5e5;
 }
 
 .btnBlue {
   display: flex;
   flex-direction: column;
-  background-color: #2678f3;
-  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
   width: 400px;
   height: 30px;
+  border: none;
+  border-radius: 8px;
+  background-color: #2678f3;
   font-size: 15px;
   color: white;
-  align-items: center;
-  justify-content: center;
 }
 
 .btnGray {
   display: flex;
   flex-direction: column;
-  background-color: #6c757d;
-  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
   width: 400px;
   height: 30px;
+  border: none;
+  border-radius: 8px;
+  background-color: #6c757d;
   font-size: 15px;
   color: white;
-  align-items: center;
-  justify-content: center;
 }
 
 .racketTypeWrap {
@@ -164,16 +170,15 @@
   flex-direction: column;
   align-items: stretch;
   .racketRadioButtons {
-    font-size: 10px;
     display: flex;
     justify-content: space-between;
+    font-size: 10px;
     input[type='radio'] {
-      position: absolute;
-      opacity: 0;
+      display: none;
     }
     :checked + .radioButton {
-      border: solid 1px blue;
-      color: blue;
+      border: solid 1px #2678f3;
+      color: #2678f3;
     }
     .radioButton {
       display: flex;
diff --git a/types/admin/adminUserTypes.ts b/types/admin/adminUserTypes.ts
index 07df17d14..dd46beb85 100644
--- a/types/admin/adminUserTypes.ts
+++ b/types/admin/adminUserTypes.ts
@@ -1,19 +1,17 @@
 export type UserInfo = {
-  userId: number;
   intraId: string;
-  userImageUri: string | '';
+  userImageUri: string | null;
   racketType: string;
   statusMessage: string | '';
-  wins: number | '';
-  losses: number | '';
-  ppp: number | '';
+  wins: number;
+  losses: number;
+  ppp: number;
   eMail: string | '';
   roleType: string;
 };
 
-export type Props = {
-  modalName?: 'ADMIN-PROFILE';
-  value: string;
+export type AdminProfileProps = {
+  value: number;
 };
 
 export const roleTypes = [
diff --git a/types/modalTypes.ts b/types/modalTypes.ts
index 044572691..d34fdffaa 100644
--- a/types/modalTypes.ts
+++ b/types/modalTypes.ts
@@ -63,4 +63,5 @@ export interface Modal {
   exp?: Exp;
   gameId?: number;
   intraId?: string;
+  userId?: number;
 }