Feat/관리자 유저 모달 개선 #647

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,

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>

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');
     }
   };
 

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>

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,