사용자 계정 관리 기능 구현 및 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/entities/account/model/types.ts

@@ -12,6 +12,8 @@ export enum AccountUserTabKeys {
 export interface AccountUserTabProps {
   activeTab: AccountUserTabKeys;
   tid: string;
+  mid?: string;
+  usrid?: string;
 };
 export interface AuthItem {
   useYn?: boolean;
@@ -19,13 +21,16 @@ export interface AuthItem {
   tid?: string;
 };
 export interface UserManageAuthListProps {
-  authItems: Array<AuthItem>
+  userItems: Array<any>;
+  mid: string;
 };
 export interface UserManageAuthItemProps extends AuthItem {
-
+  usrid?: string;
+  mid?: string;
 };
 export interface UserLoginAuthInfoWrapProps {
-  tid: string;
+  mid: string;
+  usrid: string;
 };
 export interface UserAccountAuthWrapProps {
   tid: string;
@@ -40,4 +45,72 @@ export interface UserAccountAuthPermListProps {
 };
 export interface UserAccountAuthPermItemProps extends PermItem {
   tid: string;
-};
+};
+
+export interface VerificationItem {
+  type: string;
+  contact: string;
+}
+
+export interface UserCreateRequest {
+  mid: string;
+  usrid: string;
+  password?: string;
+  loginRange: string;
+  verifications: Array<VerificationItem>;
+}
+
+export interface UserCreateResponse {
+  status: boolean;
+  error?: {
+    root: string;
+    errKey: string;
+    code: string;
+    message: string;
+    timestamp: string;
+    details: Record<string, string>;
+  };
+  data?: {
+    user: {
+      usrid: string;
+      mid: string;
+      gid: string;
+      aid: string;
+      pw: string;
+      authCd: string;
+      status: string;
+      regDt: string;
+      memo: string;
+      changeDt: string;
+      failCnt: number;
+      oldPw1: string;
+      oldPw2: string;
+      oldPw3: string;
+      oldPw4: string;
+      worker: string;
+      loginCd: string;
+      pwWorkIp: string;
+      pwCheckYn: string;
+      loginFailDt: string;
+      loginFailTm: string;
+      loginFailIp: string;
+      desaYn: string;
+      desaAccType: string;
+      desaAccIp: string;
+      desaProcType: string;
+      desaFormat: string;
+      desaSvcCl: string;
+      emailAuth1: string;
+      emailAuth2: string;
+      emailAuth3: string;
+      authDt: string;
+      authTm: string;
+      userAidGroupYn: string;
+      userAidGroupId: string;
+      subNm: string;
+      subLevel: string;
+      multiAccessYn: string;
+      duplicateAccessYn: string;
+    };
+  };
+}

src/entities/account/ui/account-user-tab.tsx

@@ -7,7 +7,9 @@ import {
 
 export const AccountUserTab = ({
   activeTab,
-  tid
+  tid,
+  mid,
+  usrid
 }: AccountUserTabProps) => {
   const { navigate } = useNavigate();
 
@@ -16,14 +18,18 @@ export const AccountUserTab = ({
       if(tab === AccountUserTabKeys.LoginAuthInfo){
         navigate(PATHS.account.user.loginAuthInfo, {
           state: {
-            tid: tid
+            tid: tid,
+            mid: mid,
+            usrid: usrid
           }
         });
       }
       else if(tab === AccountUserTabKeys.AccountAuth){
         navigate(PATHS.account.user.accountAuth, {
           state: {
-            tid: tid
+            tid: tid,
+            mid: mid,
+            usrid: usrid
           }
         });
       }

src/entities/account/ui/user-login-auth-info-wrap.tsx

@@ -1,8 +1,268 @@
-import { UserLoginAuthInfoWrapProps } from '../model/types';
+import { UserFindAuthMethodParams, UserAuthMethodData } from '@/entities/user/model/types';
+import { useUserFindAuthMethodMutation } from '@/entities/user/api/use-user-find-authmethod-mutation';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
+import { useEffect, useState } from 'react';
 
 export const UserLoginAuthInfoWrap = ({
-  tid
-}: UserLoginAuthInfoWrapProps) => {
+  mid,
+  usrid,
+}: UserFindAuthMethodParams) => {
+  const { mutateAsync: userFindAuthMethod } = useUserFindAuthMethodMutation();
+  const [pageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [authMethodData, setAuthMethodData] = useState<UserAuthMethodData>();
+  const [initialData, setInitialData] = useState<UserAuthMethodData>();
+  const [newEmails, setNewEmails] = useState<string[]>([]);
+  const [newPhones, setNewPhones] = useState<string[]>([]);
+  const [editableEmailIndex, setEditableEmailIndex] = useState<number>(-1);
+  const [editablePhoneIndex, setEditablePhoneIndex] = useState<number>(-1);
+  const [readOnlyEmails, setReadOnlyEmails] = useState<Set<number>>(new Set());
+  const [readOnlyPhones, setReadOnlyPhones] = useState<Set<number>>(new Set());
+
+  const handleRemoveExistingEmail = (index: number) => {
+    if (authMethodData?.emails) {
+      const updatedEmails = authMethodData.emails.filter((_, i) => i !== index);
+      setAuthMethodData({ ...authMethodData, emails: updatedEmails });
+    }
+  };
+
+  const handleRemoveExistingPhone = (index: number) => {
+    if (authMethodData?.phones) {
+      const updatedPhones = authMethodData.phones.filter((_, i) => i !== index);
+      setAuthMethodData({ ...authMethodData, phones: updatedPhones });
+    }
+  };
+
+  const callUserFindAuthMethod = (mid: string, usrid: string) => {
+    let params: UserFindAuthMethodParams = {
+      mid: mid,
+      usrid: usrid,
+      page: pageParam
+    };
+    userFindAuthMethod(params).then((rs: any) => {
+      console.log("User Find Auth Method: ", rs);
+      // API 응답이 직접 데이터를 반환하는 경우
+      if (rs.emails || rs.phones) {
+        console.log("Setting authMethodData directly from response: ", rs);
+        setAuthMethodData(rs);
+        setInitialData(rs);
+      }
+      // API 응답이 data 프로퍼티 안에 있는 경우
+      else if (rs.data) {
+        console.log("Setting authMethodData from rs.data: ", rs.data);
+        setAuthMethodData(rs.data);
+        setInitialData(rs.data);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (mid && usrid) {
+      callUserFindAuthMethod(mid, usrid);
+    }
+  }, [mid, usrid]);
+
+  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);
+
+    // 읽기전용 인덱스들을 업데이트 (삭제된 인덱스보다 큰 인덱스들은 1씩 감소)
+    const updatedReadOnlyEmails = new Set<number>();
+    readOnlyEmails.forEach(readOnlyIndex => {
+      if (readOnlyIndex < index) {
+        updatedReadOnlyEmails.add(readOnlyIndex);
+      } else if (readOnlyIndex > index) {
+        updatedReadOnlyEmails.add(readOnlyIndex - 1);
+      }
+      // readOnlyIndex === index인 경우 제거됨 (Set에 추가하지 않음)
+    });
+    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);
+
+    // 읽기전용 인덱스들을 업데이트 (삭제된 인덱스보다 큰 인덱스들은 1씩 감소)
+    const updatedReadOnlyPhones = new Set<number>();
+    readOnlyPhones.forEach(readOnlyIndex => {
+      if (readOnlyIndex < index) {
+        updatedReadOnlyPhones.add(readOnlyIndex);
+      } else if (readOnlyIndex > index) {
+        updatedReadOnlyPhones.add(readOnlyIndex - 1);
+      }
+      // readOnlyIndex === index인 경우 제거됨 (Set에 추가하지 않음)
+    });
+    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 isValidEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  // 전화번호 형식 검증 (010으로 시작하고 총 11자리 숫자)
+  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();
+  };
+
+  // 삭제 버튼 활성화 조건 (전체 항목이 1개만 남으면 비활성화)
+  const isDeleteButtonEnabled = () => {
+    const totalEmailCount = (authMethodData?.emails?.length || 0) + newEmails.length;
+    const totalPhoneCount = (authMethodData?.phones?.length || 0) + newPhones.length;
+    const totalCount = totalEmailCount + totalPhoneCount;
+
+    return totalCount > 1;
+  };
+
+  // 중복 이메일 검증
+  const hasDuplicateEmail = () => {
+    const allEmails = [
+      ...(authMethodData?.emails?.map(e => e.content) || []),
+      ...newEmails.filter(e => e.trim())
+    ];
+
+    const uniqueEmails = new Set(allEmails);
+    return allEmails.length !== uniqueEmails.size;
+  };
+
+  // 중복 전화번호 검증
+  const hasDuplicatePhone = () => {
+    const allPhones = [
+      ...(authMethodData?.phones?.map(p => p.content) || []),
+      ...newPhones.filter(p => p.trim())
+    ];
+
+    const uniquePhones = new Set(allPhones);
+    return allPhones.length !== uniquePhones.size;
+  };
+
+  const isSaveButtonEnabled = () => {
+    // 새로 추가된 이메일 중 값이 있는 것들의 형식 검증
+    const validNewEmails = newEmails.filter(e => e.trim());
+    const hasInvalidEmail = validNewEmails.some(email => !isValidEmail(email));
+
+    // 새로 추가된 전화번호 중 값이 있는 것들의 형식 검증
+    const validNewPhones = newPhones.filter(p => p.trim());
+    const hasInvalidPhone = validNewPhones.some(phone => !isValidPhone(phone));
+
+    // 형식이 맞지 않는 항목이 있거나 중복이 있으면 비활성화
+    if (hasInvalidEmail || hasInvalidPhone || hasDuplicateEmail() || hasDuplicatePhone()) {
+      return false;
+    }
+
+    // 현재 이메일과 전화번호가 모두 없으면 비활성화
+    const currentEmailCount = (authMethodData?.emails?.length || 0) + validNewEmails.length;
+    const currentPhoneCount = (authMethodData?.phones?.length || 0) + validNewPhones.length;
+
+    if (currentEmailCount === 0 && currentPhoneCount === 0) {
+      return false;
+    }
+
+    // 초기 데이터와 비교하여 변경사항이 있는지 확인
+    const initialEmailCount = initialData?.emails?.length || 0;
+    const initialPhoneCount = initialData?.phones?.length || 0;
+    const currentApiEmailCount = authMethodData?.emails?.length || 0;
+    const currentApiPhoneCount = authMethodData?.phones?.length || 0;
+
+    // 삭제가 발생했거나 새로운 항목이 추가된 경우 활성화
+    const hasChanges = (
+      currentApiEmailCount < initialEmailCount ||
+      currentApiPhoneCount < initialPhoneCount ||
+      validNewEmails.length > 0 ||
+      validNewPhones.length > 0
+    );
+
+    return hasChanges;
+  };
+
+  console.log("Rendering with authMethodData: ", authMethodData);
+  console.log("Emails: ", authMethodData?.emails);
+  console.log("Phones: ", authMethodData?.phones);
 
   return (
     <>
@@ -11,88 +271,107 @@ export const UserLoginAuthInfoWrap = ({
           <div className="group">
             <div className="group-header">
               <div className="title">이메일 주소</div>
-              <button 
-                className="ic20 plus" 
-                type="button" 
+              <button
+                className="ic20 plus"
+                type="button"
                 aria-label="추가"
+                onClick={handleAddEmail}
+                disabled={!isEmailAddButtonEnabled()}
               ></button>
             </div>
-            <div className="input-row">
-              <input 
-                type="text" 
-                value="nicetest01@nicepay.co.kr" 
-                placeholder="example@domain.com" 
-              />
-              <button 
-                className="icon-btn minus" 
-                type="button" 
-                aria-label="삭제"
-              ></button>
-            </div>
-            <div className="input-row">
-              <input 
-                type="text" 
-                value="nicetest01@nicepay.co.kr"
-                placeholder="example@domain.com" 
-              />
-              <button 
-                className="icon-btn minus" 
-                type="button" 
-                aria-label="삭제"
-              ></button>
-            </div>
-            <div className="input-row">
-              <input 
-                type="text" 
-                placeholder="example@domain.com" 
-              />
-              <button 
-                className="icon-btn minus" 
-                type="button" 
-                aria-label="삭제"
-              ></button>
-            </div>
+            {authMethodData?.emails && authMethodData.emails.length > 0 && authMethodData.emails.map((email, index) => (
+              <div className="input-row" key={`existing-email-${index}`}>
+                <input
+                  type="text"
+                  value={email.content}
+                  placeholder="example@domain.com"
+                  readOnly
+                />
+                <button
+                  className="icon-btn minus"
+                  type="button"
+                  aria-label="삭제"
+                  onClick={() => handleRemoveExistingEmail(index)}
+                  disabled={!isDeleteButtonEnabled()}
+                ></button>
+              </div>
+            ))}
+            {newEmails.map((email, index) => (
+              <div className="input-row" key={`new-email-${index}`}>
+                <input
+                  type="text"
+                  value={email}
+                  placeholder="example@domain.com"
+                  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="group">
             <div className="group-header">
               <div className="title">휴대폰 번호</div>
-              <button 
-                className="ic20 plus" 
-                type="button" 
+              <button
+                className="ic20 plus"
+                type="button"
                 aria-label="추가"
+                onClick={handleAddPhone}
+                disabled={!isPhoneAddButtonEnabled()}
               ></button>
             </div>
-            <div className="input-row">
-              <input 
-                type="text" 
-                value="01012345678" 
-                placeholder="휴대폰 번호 입력" 
-              />
-              <button 
-                className="icon-btn minus" 
-                type="button" 
-                aria-label="삭제"
-              ></button>
-            </div>
-            <div className="input-row">
-              <input 
-                type="text" 
-                value="01012345678" 
-                placeholder="휴대폰 번호 입력" 
-                readOnly={ true } 
-              />
-              <button 
-                className="icon-btn minus" 
-                type="button" 
-                aria-label="삭제"
-              ></button>
-            </div>
+            {authMethodData?.phones && authMethodData.phones.length > 0 && authMethodData.phones.map((phone, index) => (
+              <div className="input-row" key={`existing-phone-${index}`}>
+                <input
+                  type="text"
+                  value={phone.content}
+                  placeholder="휴대폰 번호 입력"
+                  readOnly
+                />
+                <button
+                  className="icon-btn minus"
+                  type="button"
+                  aria-label="삭제"
+                  onClick={() => handleRemoveExistingPhone(index)}
+                  disabled={!isDeleteButtonEnabled()}
+                ></button>
+              </div>
+            ))}
+            {newPhones.map((phone, index) => (
+              <div className="input-row" key={`new-phone-${index}`}>
+                <input
+                  type="text"
+                  value={phone}
+                  placeholder="휴대폰 번호 입력"
+                  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 className="notice-bar">※ 탭을 변경하면 미저장 내용은 초기화됩니다.</div>
           </div>
         </div>
         <div className="apply-row bottom-padding">
-          <button className="btn-50 btn-blue flex-1">저장</button>
+          <button
+            className="btn-50 btn-blue flex-1"
+            disabled={!isSaveButtonEnabled()}
+          >
+            저장
+          </button>
         </div>
       </div>
     </>

src/entities/account/ui/user-manage-auth-item.tsx

@@ -3,16 +3,19 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { UserManageAuthItemProps } from '../model/types';
 
 export const UserManageAuthItem = ({
-  useYn,
-  authName,
-  tid
+  usrid,
+  tid,
+  mid,
 }: UserManageAuthItemProps) => {
   const { navigate } = useNavigate();
 
   const onClickToNavigation = () => {
+    // state를 통해 데이터 전달
     navigate(PATHS.account.user.loginAuthInfo, {
       state: {
-        tid: tid
+        tid: tid,
+        mid: mid,
+        usrid: usrid
       }
     });
   };
@@ -23,8 +26,8 @@ export const UserManageAuthItem = ({
         onClick={ () => onClickToNavigation() }
       >
         <div className="auth-item-left">
-          <span className={ `tag-pill ${(!!useYn)? '': 'red'}` }>{ (!!useYn)? '사용': '미사용' }</span>
-          <span className="auth-name">{ authName }</span>
+          {/* <span className={ `tag-pill ${(!!useYn)? '': 'red'}` }>{ (!!useYn)? '사용': '미사용' }</span> */}
+          <span className="auth-name">{ usrid }</span>
         </div>
         <span className="ic20 arrow-right"></span>
       </div>

src/entities/account/ui/user-manage-auth-list.tsx

@@ -2,18 +2,19 @@ import { UserManageAuthItem } from './user-manage-auth-item';
 import { UserManageAuthListProps } from '../model/types';
 
 export const UserManageAuthList = ({
-  authItems
+  userItems,
+  mid
 }: UserManageAuthListProps) => {
-  
+
   const getUserManageAuthItems = () => {
     let rs = [];
-    for(let i=0;i<authItems.length;i++){
+    for(let i=0;i<userItems.length;i++){
       rs.push(
         <UserManageAuthItem
-          key={ 'UserManageAuthItem-key-' + i }
-          useYn={ authItems[i]?.useYn }
-          authName= { authItems[i]?.authName }
-          tid= { authItems[i]?.tid }
+          key={ userItems[i]?.usrid }
+          usrid={ userItems[i]?.usrid }
+          tid={ userItems[i]?.tid }
+          mid={ mid }
         ></UserManageAuthItem>
       );
     }

src/entities/account/ui/user-manage-wrap.tsx

@@ -2,21 +2,29 @@ import { useEffect, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { AuthItem } from '../model/types';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { UserManageAuthList } from './user-manage-auth-list';
+import { useUserFindMutation } from '@/entities/user/api/use-user-find-mutation';
+import { UserListItem } from '@/entities/user/model/types';
 
 export const UserManageWrap = () => {
   const { navigate } = useNavigate();
+  const { mutateAsync: userFind } = useUserFindMutation();
+  const [userItems, setUserItems] = useState<Array<UserListItem>>([]);
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [mid, setMid] = useState<string>('nictest00m');
 
-  const [authItems, setAuthItems] = useState<Array<AuthItem>>([]);
+  const midList = [
+    { value: 'nictest00m', label: 'nictest00m' },
+    { value: 'nictest01m', label: 'nictest01m' },
+    { value: 'nictest02m', label: 'nictest02m' },
+  ];
 
-  const callAuthList = () => {
-    setAuthItems([
-      {useYn: true, authName: 'test01', tid: 'A12334556'},
-      {useYn: true, authName: 'test02', tid: 'A33334556'},
-      {useYn: true, authName: 'test03', tid: 'A12345556'},
-      {useYn: true, authName: 'test04', tid: 'A12978676'},
-      {useYn: false, authName: 'test05', tid: 'A12344444'},
-    ]);
+  const callList = (mid: string) => {
+    setPageParam(pageParam);
+    userFind({ mid: mid, page: pageParam }).then((rs) => {
+      setUserItems(rs.content || []);
+    });
   };
 
   const onClickToNavigation = () => {
@@ -24,21 +32,25 @@ export const UserManageWrap = () => {
   };
 
   useEffect(() => {
-    callAuthList();
-  }, []);
+    callList(mid);
+  }, [mid]);
+  
   return (
     <>
       <div className="ing-list">
         <div className="input-wrapper top-select mt-16">
-          <select>
-            <option>nicetest00m</option>
+          <select value={mid} onChange={e => setMid(e.target.value)}>
+            {midList.map(item => (
+              <option key={item.value} value={item.value}>{item.label}</option>
+            ))}
           </select>
         </div>
 
         <div className="ing-title">등록 현황</div>
-        { (!!authItems && authItems.length > 0) &&
+        { (!!userItems && userItems.length > 0) &&
           <UserManageAuthList
-            authItems={ authItems }
+            userItems={ userItems }
+            mid={ mid }
           ></UserManageAuthList>
         }
         <div className="apply-row bottom-padding">