Refactor: UserDetailsModal 사용자 정보 표시 로직 개선 및 변경된 응답 스키마 반영 #6

Author: ThinkMuk

src/components/admin/UserDetailsModal.jsx

@@ -19,8 +19,6 @@ export default function UserDetailsModal({ user, isOpen, onClose, preventClose }
 
   if (!isOpen) return null;
 
-  const member = user?.member ?? user ?? {};
-
   const rowStyle = 'border border-[#5b5b6699]';
   const cellStyle = 'p-3 font-bold text-gray-300';
   const valueStyle = 'p-3';
@@ -31,53 +29,44 @@ export default function UserDetailsModal({ user, isOpen, onClose, preventClose }
       <div className='max-w-[600px] w-full max-h-[90vh] mobile:max-h-[80vh] bg-[#27272A] rounded-lg shadow-md p-6 overflow-y-auto'>
         <div className='text-lg font-bold text-center text-white mb-4'>User Details</div>
 
-        {/* User Basic Info */}
+        {/* User Basic Info (신 응답 스키마에 맞춤) */}
         <table className='w-full border-collapse border text-white mb-6'>
           <tbody>
             {[
-              ['이름', user.member.name],
-              ['학년', user.member.grade],
-              ['학번', user.member.studentId],
-              ['전화번호', user.member.phoneNumber],
-              ['국적', user.member.nationality === 'etc' ? user.member.nationalityContent : user.member.nationality],
-              ['Email', user.member.email],
-              ['성별', user.member.gender],
-              ['생년월일', user.member.birth],
-              ['학교', user.member.school],
-              ['전공', user.member.majors.main],
-              ['부전공', user.member.majors.second.join(', ') || '없음'],
-              ['가입 경로', user.member.route],
-              ['회비 송금 여부', user.member.isPayed ? 'Yes' : 'No'],
-            ].map(([label, userValue], idx) => (
-              <tr key={idx} className={rowStyle}>
-                <td className={clsx(cellStyle)}>{label}</td>
-                <td className={clsx(valueStyle)}>{userValue}</td>
-              </tr>
-            ))}
+              ['이름', user?.name],
+              ['전공', user?.major],
+              ['학번', user?.studentId],
+              ['회비 송금 여부', typeof user?.isPayed === 'boolean' ? (user.isPayed ? 'Yes' : 'No') : undefined],
+            ]
+              .filter(([, val]) => val !== undefined && val !== null && val !== '')
+              .map(([label, userValue], idx) => (
+                <tr key={idx} className={rowStyle}>
+                  <td className={clsx(cellStyle)}>{label}</td>
+                  <td className={clsx(valueStyle)}>{userValue}</td>
+                </tr>
+              ))}
           </tbody>
         </table>
 
         <div className='text-white space-y-7'>
-          {user.answers.map((answer, idx) => {
+          {(Array.isArray(user?.answers?.answers) ? user.answers.answers : []).map((answer, idx) => {
             const questionMap = {
-              1: '지원 동기',
-              2: '진로 경험 & 이야기',
-              3: '관심 분야',
-              4: 'GDG 기수',
-              5: '경로',
-              6: '얻어가고 싶은 거',
-              7: '기대하는 활동',
-              8: '피드백',
+              APPLY_MOTIVATION: '지원 동기',
+              LIFE_STORY: '진로 경험 & 이야기',
+              INTERESTS: '관심 분야',
+              GDG_PERIOD: 'GDG 기수',
+              ROUTE_TO_KNOW: '경로',
+              WANT_TO_GET: '얻어가고 싶은 거',
+              EXPECTED_ACTIVITY: '기대하는 활동',
+              FEEDBACK: '피드백',
             };
 
-            const question = questionMap[answer.questionId];
-            //배열일시 전환
-            const response = Array.isArray(answer.responseValue)
-              ? answer.responseValue.join(', ')
-              : answer.responseValue;
+            const question = questionMap[answer?.inputType] ?? answer?.inputType ?? '질문';
+            const value = answer?.responseValue;
+            const response = Array.isArray(value) ? value.join(', ') : value;
 
             return (
-              <div key={idx}>
+              <div key={answer?.id ?? idx}>
                 <hr className='border-[#5b5b6699]' />
                 <div className={clsx(infoTextStyle)}>{question}</div>
                 <div className='text-sm'>{response || '없음'}</div>