사용자 계정 관리 기능 구현 및 API 오류 수정

- 사용자 로그인 인증정보 관리 기능 구현 (이메일/휴대폰 추가/삭제)
- 사용자 추가 기능 구현 (실시간 ID 중복 검증 포함)
- 사용자 목록 조회 기능 구현
- API 엔드포인트 오류 수정 (userExistsUserid: GET → POST, URL 경로 수정)
- TypeScript 타입 오류 수정 (UseQueryOptions, UserCreateParams/Response)
- 이메일/휴대폰 형식 검증 및 중복 방지 로직 추가

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/account/user/account-auth-page.tsx

@@ -16,7 +16,7 @@ import {
 export const UserAccountAuthPage = () => {
   const { navigate } = useNavigate();
   const location = useLocation();
-  const [tid, setTid] = useState<string>(location?.state.tid);
+  const { tid, mid, usrid } = location.state || {};
 
   const [activeTab, setActiveTab] = useState<AccountUserTabKeys>(AccountUserTabKeys.AccountAuth);
   useSetHeaderTitle('사용자 설정');
@@ -34,13 +34,15 @@ export const UserAccountAuthPage = () => {
     <>
       <main>
         <div className="tab-content">
-          <div className="tab-pane sub active">
-            <AccountUserTab 
+          <div className="tab-pane pt-46 active">
+            <AccountUserTab
               activeTab={ activeTab }
-              tid={ tid }
+              tid={ tid || '' }
+              mid={ mid || '' }
+              usrid={ usrid || '' }
             ></AccountUserTab>
             <UserAccountAuthWrap
-              tid={ tid }
+              tid={ tid || '' }
             ></UserAccountAuthWrap>
           </div>
         </div>

src/pages/account/user/add-account-page.tsx

@@ -1,14 +1,331 @@
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
+import {
   useSetHeaderTitle,
   useSetHeaderType,
   useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useState, useEffect, useRef } from 'react';
+import { VerificationItem } from '@/entities/account/model/types';
+import { useUserCreateMutation } from '@/entities/user/api/use-user-create-mutation';
+import { useUserExistsUseridQuery } from '@/entities/user/api/use-user-exists-userid-query';
 export const UserAddAccountPage = () => {
   const { navigate } = useNavigate();
+  const { mutateAsync: userCreate, isPending } = useUserCreateMutation();
+
+  // 폼 상태 관리
+  const [formData, setFormData] = useState({
+    usrid: '',
+    password: '',
+    loginRange: 'MID'
+  });
+
+  // 에러 상태 관리
+  const [errors, setErrors] = useState({
+    usrid: '',
+    password: ''
+  });
+
+  // 사용자 ID 검증을 위한 상태
+  const [shouldCheckUsrid, setShouldCheckUsrid] = useState(false);
+  const [isCheckingUsrid, setIsCheckingUsrid] = useState(false);
+  const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  // 이메일/전화번호 상태 관리 (기본 1개씩 빈 공란 배치)
+  const [newEmails, setNewEmails] = useState<string[]>(['']);
+  const [newPhones, setNewPhones] = useState<string[]>(['']);
+  const [editableEmailIndex, setEditableEmailIndex] = useState<number>(0);
+  const [editablePhoneIndex, setEditablePhoneIndex] = useState<number>(0);
+  const [readOnlyEmails, setReadOnlyEmails] = useState<Set<number>>(new Set());
+  const [readOnlyPhones, setReadOnlyPhones] = useState<Set<number>>(new Set());
+
+  // 사용자 ID 존재 여부 확인 쿼리
+  const { data: userExistsData, isLoading: isUserExistsLoading } = useUserExistsUseridQuery(
+    shouldCheckUsrid && formData.usrid.trim().length > 0 ? formData.usrid : '',
+    {
+      enabled: shouldCheckUsrid && formData.usrid.trim().length > 0,
+    }
+  );
+
+  // Handle user exists query result
+  useEffect(() => {
+    if (userExistsData && shouldCheckUsrid) {
+      setIsCheckingUsrid(false);
+      if (userExistsData.exists) {
+        setErrors(prev => ({ ...prev, usrid: '동일한 ID가 이미 존재합니다.' }));
+      } else {
+        setErrors(prev => ({ ...prev, usrid: '' }));
+      }
+      setShouldCheckUsrid(false);
+    }
+  }, [userExistsData, shouldCheckUsrid]);
+
+  // 이메일/전화번호 관리 함수들 (user-login-auth-info-wrap 방식)
+  const handleAddEmail = () => {
+    // 현재 편집 중인 항목을 읽기전용으로 고정
+    if (editableEmailIndex >= 0) {
+      setReadOnlyEmails(prev => new Set([...prev, editableEmailIndex]));
+    }
+
+    // 새로운 편집 가능한 항목 추가
+    setEditableEmailIndex(newEmails.length);
+    setNewEmails([...newEmails, '']);
+  };
+
+  const handleAddPhone = () => {
+    // 현재 편집 중인 항목을 읽기전용으로 고정
+    if (editablePhoneIndex >= 0) {
+      setReadOnlyPhones(prev => new Set([...prev, editablePhoneIndex]));
+    }
+
+    // 새로운 편집 가능한 항목 추가
+    setEditablePhoneIndex(newPhones.length);
+    setNewPhones([...newPhones, '']);
+  };
+
+  const handleRemoveNewEmail = (index: number) => {
+    const updatedEmails = newEmails.filter((_, i) => i !== index);
+    setNewEmails(updatedEmails);
+
+    // 읽기전용 인덱스들을 업데이트
+    const updatedReadOnlyEmails = new Set<number>();
+    readOnlyEmails.forEach(readOnlyIndex => {
+      if (readOnlyIndex < index) {
+        updatedReadOnlyEmails.add(readOnlyIndex);
+      } else if (readOnlyIndex > index) {
+        updatedReadOnlyEmails.add(readOnlyIndex - 1);
+      }
+    });
+    setReadOnlyEmails(updatedReadOnlyEmails);
+
+    // 편집 가능한 인덱스 조정
+    if (index === editableEmailIndex) {
+      setEditableEmailIndex(-1);
+    } else if (index < editableEmailIndex) {
+      setEditableEmailIndex(editableEmailIndex - 1);
+    }
+  };
+
+  const handleRemoveNewPhone = (index: number) => {
+    const updatedPhones = newPhones.filter((_, i) => i !== index);
+    setNewPhones(updatedPhones);
+
+    // 읽기전용 인덱스들을 업데이트
+    const updatedReadOnlyPhones = new Set<number>();
+    readOnlyPhones.forEach(readOnlyIndex => {
+      if (readOnlyIndex < index) {
+        updatedReadOnlyPhones.add(readOnlyIndex);
+      } else if (readOnlyIndex > index) {
+        updatedReadOnlyPhones.add(readOnlyIndex - 1);
+      }
+    });
+    setReadOnlyPhones(updatedReadOnlyPhones);
+
+    // 편집 가능한 인덱스 조정
+    if (index === editablePhoneIndex) {
+      setEditablePhoneIndex(-1);
+    } else if (index < editablePhoneIndex) {
+      setEditablePhoneIndex(editablePhoneIndex - 1);
+    }
+  };
+
+  const handleNewEmailChange = (index: number, value: string) => {
+    const updated = [...newEmails];
+    updated[index] = value;
+    setNewEmails(updated);
+  };
+
+  const handleNewPhoneChange = (index: number, value: string) => {
+    const updated = [...newPhones];
+    updated[index] = value;
+    setNewPhones(updated);
+  };
+
+  // 폼 입력 핸들러
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+
+    // 사용자 ID의 경우 디바운스 적용하여 자동 검증
+    if (field === 'usrid') {
+      // 기존 타이머 클리어
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+
+      // 에러 초기화
+      setErrors(prev => ({ ...prev, usrid: '' }));
+
+      // 값이 있으면 500ms 후 검증 실행
+      if (value.trim().length > 0) {
+        setIsCheckingUsrid(true);
+        debounceTimeout.current = setTimeout(() => {
+          setShouldCheckUsrid(true);
+        }, 500);
+      } else {
+        setIsCheckingUsrid(false);
+      }
+    } else {
+      // 다른 필드는 에러만 초기화
+      if (errors[field as keyof typeof errors]) {
+        setErrors(prev => ({ ...prev, [field]: '' }));
+      }
+    }
+  };
+
+  // 컴포넌트 언마운트 시 타이머 정리
+  useEffect(() => {
+    return () => {
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+    };
+  }, []);
+
+  // 검증 함수들
+  const isValidEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const isValidPhone = (phone: string) => {
+    const phoneRegex = /^010\d{8}$/;
+    return phoneRegex.test(phone);
+  };
+
+  // 이메일 추가 버튼 활성화 조건
+  const isEmailAddButtonEnabled = () => {
+    if (newEmails.length === 0) return true;
+
+    const lastEmailIndex = newEmails.length - 1;
+    const lastEmail = newEmails[lastEmailIndex];
+
+    return lastEmailIndex >= editableEmailIndex &&
+           lastEmail &&
+           lastEmail.trim() &&
+           isValidEmail(lastEmail) &&
+           !hasDuplicateEmail();
+  };
+
+  // 전화번호 추가 버튼 활성화 조건
+  const isPhoneAddButtonEnabled = () => {
+    if (newPhones.length === 0) return true;
+
+    const lastPhoneIndex = newPhones.length - 1;
+    const lastPhone = newPhones[lastPhoneIndex];
+
+    return lastPhoneIndex >= editablePhoneIndex &&
+           lastPhone &&
+           lastPhone.trim() &&
+           isValidPhone(lastPhone) &&
+           !hasDuplicatePhone();
+  };
+
+  // 중복 검증
+  const hasDuplicateEmail = () => {
+    const validEmails = newEmails.filter(e => e.trim());
+    const uniqueEmails = new Set(validEmails);
+    return validEmails.length !== uniqueEmails.size;
+  };
+
+  const hasDuplicatePhone = () => {
+    const validPhones = newPhones.filter(p => p.trim());
+    const uniquePhones = new Set(validPhones);
+    return validPhones.length !== uniquePhones.size;
+  };
+
+  // 삭제 버튼 활성화 조건
+  const isDeleteButtonEnabled = () => {
+    const totalCount = newEmails.length + newPhones.length;
+    return totalCount > 1;
+  };
+
+  // 폼 검증
+  const validateForm = () => {
+    const newErrors = { usrid: '', password: '' };
+    let isValid = true;
+
+    // 사용자 ID 검증
+    if (!formData.usrid.trim()) {
+      newErrors.usrid = 'ID를 입력해 주세요';
+      isValid = false;
+    }
+
+    // 비밀번호 검증
+    if (!formData.password.trim()) {
+      newErrors.password = '비밀번호를 입력해 주세요';
+      isValid = false;
+    } else if (formData.password.length < 8) {
+      newErrors.password = '8자리 이상 입력해 주세요';
+      isValid = false;
+    }
+
+    // 이메일/전화번호 중 하나는 필수
+    const validEmails = newEmails.filter(email => email.trim() && isValidEmail(email));
+    const validPhones = newPhones.filter(phone => phone.trim() && isValidPhone(phone));
+
+    if (validEmails.length === 0 && validPhones.length === 0) {
+      // 최소 하나의 유효한 연락처가 필요
+      isValid = false;
+    }
+
+    // 중복이 있으면 비활성화
+    if (hasDuplicateEmail() || hasDuplicatePhone()) {
+      isValid = false;
+    }
+
+    setErrors(newErrors);
+    return isValid;
+  };
+
+  // 저장 핸들러
+  const handleSave = async () => {
+    if (!validateForm()) {
+      return;
+    }
+
+    try {
+      // verifications 배열 생성
+      const verifications: VerificationItem[] = [];
+
+      newEmails.forEach(email => {
+        if (email.trim() && isValidEmail(email)) {
+          verifications.push({ type: 'EMAIL', contact: email });
+        }
+      });
+
+      newPhones.forEach(phone => {
+        if (phone.trim() && isValidPhone(phone)) {
+          verifications.push({ type: 'PHONE', contact: phone });
+        }
+      });
+
+      const request = {
+        userId: formData.usrid,
+        password: formData.password,
+        loginRange: formData.loginRange,
+        verification: verifications
+      };
+
+      const response = await userCreate(request);
+
+      if (response.status) {
+        // 성공 시 사용자 관리 페이지로 이동
+        navigate(PATHS.account.user.manage);
+      } else if (response.error) {
+        // 에러 처리
+        if (response.error.errKey === 'USER_DUPLICATE') {
+          setErrors(prev => ({ ...prev, usrid: '동일한 ID가 이미 존재합니다.' }));
+        } else {
+          // 기타 에러 처리
+          console.error('User creation failed:', response.error.message);
+        }
+      }
+    } catch (error) {
+      console.error('User creation error:', error);
+    }
+  };
 
   useSetHeaderTitle('사용자 추가');
   useSetHeaderType(HeaderType.LeftArrow);
@@ -26,28 +343,54 @@ export const UserAddAccountPage = () => {
               <div className="user-add">
                 <div className="ua-row">
                   <div className="ua-label">사용자ID <span className="red">*</span></div>
-                  <input 
-                    className="wid-100 error"
-                    type="text"
-                    placeholder="ID를 입력해 주세요"
-                  />
+                  <div style={{ position: 'relative' }}>
+                    <input
+                      className={`wid-100 ${errors.usrid ? 'error' : ''}`}
+                      type="text"
+                      placeholder="ID를 입력해 주세요"
+                      value={formData.usrid}
+                      onChange={(e) => handleInputChange('usrid', e.target.value)}
+                    />
+                    {isCheckingUsrid && (
+                      <div style={{
+                        position: 'absolute',
+                        right: '10px',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        fontSize: '12px',
+                        color: '#666'
+                      }}>
+                        확인 중...
+                      </div>
+                    )}
+                  </div>
                 </div>
-                <div className="ua-help error">동일한 ID가 이미 존재합니다.</div>
+                {errors.usrid && <div className="ua-help error">{errors.usrid}</div>}
+                {!errors.usrid && formData.usrid && userExistsData && !userExistsData.exists && (
+                  <div className="ua-help" style={{ color: '#78D197' }}>사용 가능한 ID입니다.</div>
+                )}
 
                 <div className="ua-row">
                   <div className="ua-label">비밀번호 <span className="red">*</span></div>
-                  <input 
-                    className="wid-100 error"
+                  <input
+                    className={`wid-100 ${errors.password ? 'error' : ''}`}
                     type="password"
                     placeholder="8자리 이상 입력해 주세요"
+                    value={formData.password}
+                    onChange={(e) => handleInputChange('password', e.target.value)}
                   />
                 </div>
-                <div className="ua-help error">(오류 결과 메시지)</div>
+                {errors.password && <div className="ua-help error">{errors.password}</div>}
 
                 <div className="ua-row">
                   <div className="ua-label">로그인 범위</div>
-                  <select className="wid-100">
-                    <option>MID + GID</option>
+                  <select
+                    className="wid-100"
+                    value={formData.loginRange}
+                    onChange={(e) => handleInputChange('loginRange', e.target.value)}
+                  >
+                    <option value="MID">MID</option>
+                    <option value="MID + GID">MID + GID</option>
                   </select>
                 </div>
               </div>
@@ -61,55 +404,77 @@ export const UserAddAccountPage = () => {
                 <div className="ua-group">
                   <div className="ua-group-header">
                     <div className="ua-group-title">이메일 주소</div>
-                    <button 
-                      className="ic20 plus" 
-                      type="button" 
+                    <button
+                      className="ic20 plus"
+                      type="button"
                       aria-label="이메일 추가"
+                      onClick={handleAddEmail}
+                      disabled={!isEmailAddButtonEnabled()}
                     ></button>
                   </div>
-                  <div className="ua-input-row">
-                    <input 
-                      className="wid-100" 
-                      type="text" 
-                      placeholder="example@domain.com" 
-                    />
-                    <button 
-                      className="icon-btn minus" 
-                      type="button" 
-                      aria-label="삭제"
-                    ></button>
-                  </div>
+                  {newEmails.map((email, index) => (
+                    <div className="ua-input-row" key={index}>
+                      <input
+                        className="wid-100"
+                        type="text"
+                        placeholder="example@domain.com"
+                        value={email}
+                        onChange={(e) => handleNewEmailChange(index, e.target.value)}
+                        readOnly={readOnlyEmails.has(index) || index !== editableEmailIndex}
+                      />
+                      <button
+                        className="icon-btn minus"
+                        type="button"
+                        aria-label="삭제"
+                        onClick={() => handleRemoveNewEmail(index)}
+                        disabled={!isDeleteButtonEnabled()}
+                      ></button>
+                    </div>
+                  ))}
                 </div>
 
                 <div className="ua-group">
                   <div className="ua-group-header">
                     <div className="ua-group-title">휴대폰 번호</div>
-                    <button 
-                      className="ic20 plus" 
-                      type="button" 
+                    <button
+                      className="ic20 plus"
+                      type="button"
                       aria-label="휴대폰 추가"
+                      onClick={handleAddPhone}
+                      disabled={!isPhoneAddButtonEnabled()}
                     ></button>
                   </div>
-                  <div className="ua-input-row">
-                    <input 
-                      className="wid-100"
-                      type="text"
-                      placeholder="01012345678"
-                    />
-                    <button 
-                      className="icon-btn minus" 
-                      type="button" 
-                      aria-label="삭제"
-                    ></button>
-                  </div>
+                  {newPhones.map((phone, index) => (
+                    <div className="ua-input-row" key={index}>
+                      <input
+                        className="wid-100"
+                        type="text"
+                        placeholder="01012345678"
+                        value={phone}
+                        onChange={(e) => handleNewPhoneChange(index, e.target.value)}
+                        readOnly={readOnlyPhones.has(index) || index !== editablePhoneIndex}
+                      />
+                      <button
+                        className="icon-btn minus"
+                        type="button"
+                        aria-label="삭제"
+                        onClick={() => handleRemoveNewPhone(index)}
+                        disabled={!isDeleteButtonEnabled()}
+                      ></button>
+                    </div>
+                  ))}
                 </div>
               </div>
 
               <div className="apply-row">
-                <button 
+                <button
                   className="btn-50 btn-blue flex-1"
-                  type="button" 
-                >저장</button>
+                  type="button"
+                  onClick={handleSave}
+                  disabled={isPending}
+                >
+                  {isPending ? '저장 중...' : '저장'}
+                </button>
               </div>
             </div>
           </div>

src/pages/account/user/login-auth-info-page.tsx

@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router';
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { AccountUserTab } from '@/entities/account/ui/account-user-tab';
 import { UserLoginAuthInfoWrap } from '@/entities/account/ui/user-login-auth-info-wrap';
 import { AccountUserTabKeys } from '@/entities/account/model/types';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
+import {
   useSetHeaderTitle,
   useSetHeaderType,
   useSetFooterMode,
@@ -14,9 +14,9 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 
 export const UserLoginAuthInfoPage = () => {
-  const { navigate } = useNavigate();
   const location = useLocation();
-  const [tid, setTid] = useState<string>(location?.state.tid);
+  const { mid, usrid, tid } = location.state || {};
+  const { navigate } = useNavigate();
 
   const [activeTab, setActiveTab] = useState<AccountUserTabKeys>(AccountUserTabKeys.LoginAuthInfo);
   useSetHeaderTitle('사용자 설정');
@@ -26,21 +26,36 @@ export const UserLoginAuthInfoPage = () => {
     navigate(PATHS.account.user.manage);
   });
 
-  useEffect(() => {
-    console.log('tid : ', tid);
-  }, []);
+  // const { mutateAsync: userFindAuthMethod } = useUserFindAuthMethodMutation();
+
+  // const callUserFindAuthMethod = (mid: string, usrid: string) => {
+  //   let parms: UserFindAuthMethodParams = {
+  //     mid: mid,
+  //     usrid: usrid
+  //   }
+  //   userFindAuthMethod(params).then((rs: UserFindAuthMethodResponse) => {
+  //     console.log("User Find Auth Method: ", rs)
+  //   });
+  // }
+
+  // useEffect(() => {
+  //   callUserFindAuthMethod(mid, usrid);
+  // }, [mid, usrid]);
 
   return (
     <>
       <main>
         <div className="tab-content">
-          <div className="tab-pane sub active">
-            <AccountUserTab 
+          <div className="tab-pane pt-46 active">
+            <AccountUserTab
               activeTab={ activeTab }
-              tid={ tid }
+              tid={tid || ''}
+              mid={mid || ''}
+              usrid={usrid || ''}
             ></AccountUserTab>
             <UserLoginAuthInfoWrap
-              tid={ tid }
+              mid={mid || ''}
+              usrid={usrid || ''}
             ></UserLoginAuthInfoWrap>
           </div>
         </div>

src/pages/account/user/menu-auth-page.tsx

@@ -12,31 +12,23 @@ import {
 
 export const UserMenuAuthPage = () => {
   const { navigate } = useNavigate();
-  const location = useLocation();
-  const [tid, setTid] = useState<string>(location?.state.tid);
-  const [menuId, setMenuId] = useState<string>(location?.state.menuId);
 
   useSetHeaderTitle('사용자 설정');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
   useSetOnBack(() => {
-    navigate(PATHS.account.user.accountAuth, {
-      state: {
-        tid: tid
-      }
-    });
+    navigate(PATHS.account.user.accountAuth);
   });
 
   useEffect(() => {
-    console.log('tid : ', tid);
-    console.log('menuId : ', menuId);
+
   });
 
   return (
     <>
       <main>
         <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
             <div className="ing-list sev">
               <div className="desc service-tip">메뉴별 사용 권한을 설정해 주세요.</div>
               <div className="desc service-tip">선택한 권한에 따라 기능 이용이 제한됩니다.</div>