Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

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;
@@ -41,3 +46,71 @@ 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
+  mid,
-}: UserLoginAuthInfoWrapProps) => {
+  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 (
     <>
@@ -15,43 +275,45 @@ export const UserLoginAuthInfoWrap = ({
                 className="ic20 plus"
                 type="button"
                 aria-label="추가"
+                onClick={handleAddEmail}
+                disabled={!isEmailAddButtonEnabled()}
               ></button>
             </div>
-            <div className="input-row">
+            {authMethodData?.emails && authMethodData.emails.length > 0 && authMethodData.emails.map((email, index) => (
+              <div className="input-row" key={`existing-email-${index}`}>
                 <input
                   type="text"
-                value="nicetest01@nicepay.co.kr" 
+                  value={email.content}
                   placeholder="example@domain.com"
+                  readOnly
                 />
                 <button
                   className="icon-btn minus"
                   type="button"
                   aria-label="삭제"
+                  onClick={() => handleRemoveExistingEmail(index)}
+                  disabled={!isDeleteButtonEnabled()}
                 ></button>
               </div>
-            <div className="input-row">
+            ))}
-              <input 
+            {newEmails.map((email, index) => (
-                type="text" 
+              <div className="input-row" key={`new-email-${index}`}>
-                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={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">
@@ -61,38 +323,55 @@ export const UserLoginAuthInfoWrap = ({
                 className="ic20 plus"
                 type="button"
                 aria-label="추가"
+                onClick={handleAddPhone}
+                disabled={!isPhoneAddButtonEnabled()}
               ></button>
             </div>
-            <div className="input-row">
+            {authMethodData?.phones && authMethodData.phones.length > 0 && authMethodData.phones.map((phone, index) => (
+              <div className="input-row" key={`existing-phone-${index}`}>
                 <input
                   type="text"
-                value="01012345678" 
+                  value={phone.content}
                   placeholder="휴대폰 번호 입력"
+                  readOnly
                 />
                 <button
                   className="icon-btn minus"
                   type="button"
                   aria-label="삭제"
+                  onClick={() => handleRemoveExistingPhone(index)}
+                  disabled={!isDeleteButtonEnabled()}
                 ></button>
               </div>
-            <div className="input-row">
+            ))}
+            {newPhones.map((phone, index) => (
+              <div className="input-row" key={`new-phone-${index}`}>
                 <input
                   type="text"
-                value="01012345678" 
+                  value={phone}
                   placeholder="휴대폰 번호 입력"
-                readOnly={ true } 
+                  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,
+  usrid,
-  authName,
+  tid,
-  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={ `tag-pill ${(!!useYn)? '': 'red'}` }>{ (!!useYn)? '사용': '미사용' }</span> */}
-          <span className="auth-name">{ authName }</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 }
+          key={ userItems[i]?.usrid }
-          useYn={ authItems[i]?.useYn }
+          usrid={ userItems[i]?.usrid }
-          authName= { authItems[i]?.authName }
+          tid={ userItems[i]?.tid }
-          tid= { authItems[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 = () => {
+  const callList = (mid: string) => {
-    setAuthItems([
+    setPageParam(pageParam);
-      {useYn: true, authName: 'test01', tid: 'A12334556'},
+    userFind({ mid: mid, page: pageParam }).then((rs) => {
-      {useYn: true, authName: 'test02', tid: 'A33334556'},
+      setUserItems(rs.content || []);
-      {useYn: true, authName: 'test03', tid: 'A12345556'},
+    });
-      {useYn: true, authName: 'test04', tid: 'A12978676'},
-      {useYn: false, authName: 'test05', tid: 'A12344444'},
-    ]);
   };
 
   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>
+          <select value={mid} onChange={e => setMid(e.target.value)}>
-            <option>nicetest00m</option>
+            {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">

src/entities/additional-service/api/sms-payment-notification/use-extension-sms-detail-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionSmsDetailParams,
   ExtensionSmsDetailResponse
-} from '../../model/types';
+} from '../../model/sms-payment/types';
 import { 
   useMutation,
   UseMutationOptions
@@ -17,7 +17,7 @@ export const extensionSmsDetail = (params: ExtensionSmsDetailParams) => {
   );
 };
 
-export const useExtensionSmsListMutation = (options?: UseMutationOptions<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>) => {
+export const useExtensionSmsDetailMutation = (options?: UseMutationOptions<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>) => {
   const mutation = useMutation<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>({
     ...options,
     mutationFn: (params: ExtensionSmsDetailParams) => extensionSmsDetail(params),

src/entities/additional-service/api/sms-payment-notification/use-extension-sms-list-mutation.ts

@@ -1,29 +0,0 @@
-import axios from 'axios';
-import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
-import { resultify } from '@/shared/lib/resultify';
-import { CBDCAxiosError } from '@/shared/@types/error';
-import { 
-  ExtensionSmsListParams,
-  ExtensionSmsListResponse
-} from '../../model/types';
-import { 
-  useMutation,
-  UseMutationOptions
-} from '@tanstack/react-query';
-
-export const extensionSmsList = (params: ExtensionSmsListParams) => {
-  return resultify(
-    axios.post<ExtensionSmsListResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsList(), params),
-  );
-};
-
-export const useExtensionSmsListMutation = (options?: UseMutationOptions<ExtensionSmsListResponse, CBDCAxiosError, ExtensionSmsListParams>) => {
-  const mutation = useMutation<ExtensionSmsListResponse, CBDCAxiosError, ExtensionSmsListParams>({
-    ...options,
-    mutationFn: (params: ExtensionSmsListParams) => extensionSmsList(params),
-  });
-
-  return {
-    ...mutation,
-  };
-};

src/entities/additional-service/api/sms-payment-notification/use-extension-sms-resend-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionSmsResendParams,
   ExtensionSmsResendResponse
-} from '../../model/types';
+} from '../../model/sms-payment/types';
 import { 
   useMutation,
   UseMutationOptions

src/entities/additional-service/api/sms-payment/use-extension-sms-detail-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  ExtensionSmsDetailParams,
+  ExtensionSmsDetailResponse
+} from '../../model/sms-payment/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionSmsDetail = (params: ExtensionSmsDetailParams) => {
+  return resultify(
+    axios.post<ExtensionSmsDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsDetail(), params),
+  );
+};
+
+export const useExtensionSmsDetailMutation = (options?: UseMutationOptions<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>) => {
+  const mutation = useMutation<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>({
+    ...options,
+    mutationFn: (params: ExtensionSmsDetailParams) => extensionSmsDetail(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/additional-service/api/sms-payment/use-extension-sms-download-excel-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionSmsDownloadExcelParams,
   ExtensionSmsDownloadExcelResponse
-} from '../../model/types';
+} from '../../model/sms-payment/types';
 import { 
   useMutation,
   UseMutationOptions

src/entities/additional-service/api/sms-payment/use-extension-sms-list-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  ExtensionSmsPaymentListParams,
+  ExtensionSmsPaymentListResponse
+} from '../../model/sms-payment/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionSmsList = (params: ExtensionSmsPaymentListParams) => {
+  return resultify(
+    axios.post<ExtensionSmsPaymentListResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsList(), params),
+  );
+};
+
+export const useExtensionSmsListMutation = (options?: UseMutationOptions<ExtensionSmsPaymentListResponse, CBDCAxiosError, ExtensionSmsPaymentListParams>) => {
+  const mutation = useMutation<ExtensionSmsPaymentListResponse, CBDCAxiosError, ExtensionSmsPaymentListParams>({
+    ...options,
+    mutationFn: (params: ExtensionSmsPaymentListParams) => extensionSmsList(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/additional-service/api/sms-payment/use-extension-sms-resend-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  ExtensionSmsResendParams,
+  ExtensionSmsResendResponse
+} from '../../model/sms-payment/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionSmsResend = (params: ExtensionSmsResendParams) => {
+  return resultify(
+    axios.post<ExtensionSmsResendResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsResend(), params),
+  );
+};
+
+export const useExtensionSmsResendMutation = (options?: UseMutationOptions<ExtensionSmsResendResponse, CBDCAxiosError, ExtensionSmsResendParams>) => {
+  const mutation = useMutation<ExtensionSmsResendResponse, CBDCAxiosError, ExtensionSmsResendParams>({
+    ...options,
+    mutationFn: (params: ExtensionSmsResendParams) => extensionSmsResend(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/additional-service/model/sms-payment/types.ts

@@ -0,0 +1,93 @@
+import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
+import { ExtensionRequestParams, FilterProps, ListItemProps } from '../types';
+
+export enum SmsType {
+    ALL = "ALL",
+    VACCOUNT_REQ = "VACCOUNT_REQ",
+    VACCOUNT_REQ_DEPOSIT = "VACCOUNT_REQ_DEPOSIT"
+}
+
+export enum SmsPaymentSearchType {
+    BUYER_NAME = "BUYER_NAME",
+    RECEIVE_PHONE_NUMBER = "RECEIVE_PHONE_NUMBER"
+}
+
+export interface SmsPaymentListItem {
+    mid?: string;
+    tid?: string;
+    paymentDate?: string;
+    paymentStatus?: string;
+    smsCl?: string;
+}
+
+export interface SmsPaymentListProps {
+    listItems: Record<string, Array<ListItemProps>>;
+    mid: string;
+    onResendClick?: (mid: string, tid: string) => void;
+}
+
+export interface SmsPaymentFilterProps extends FilterProps {
+    mid: string;
+    searchCl: SmsPaymentSearchType;
+    searchValue: string;
+    fromDate: string;
+    toDate: string;
+    smsCl: SmsType;
+    setMid: (mid: string) => void;
+    setSearchCl: (searchCl: SmsPaymentSearchType) => void;
+    setSearchValue: (searchValue: string) => void;
+    setFromDate: (fromDate: string) => void;
+    setToDate: (toDate: string) => void;
+    setSmsCl: (smsCl: SmsType) => void;
+}
+
+export interface ExtensionSmsPaymentListParams extends ExtensionRequestParams {
+    searchCl: SmsPaymentSearchType;
+    searchValue: string;
+    fromDate: string;
+    toDate: string;
+    smsCl: string;
+    page?: DefaultRequestPagination;
+}
+
+export interface ExtensionSmsPaymentListResponse extends DefaulResponsePagination {
+    content: Array<ListItemProps>
+}
+
+export interface ExtensionSmsDownloadExcelParams extends ExtensionRequestParams {
+    searchCl?: SmsPaymentSearchType;
+    searchValue: string;
+    fromDate: string;
+    toDate: string;
+    smsCl?: string;
+}
+
+export interface ExtensionSmsDownloadExcelResponse {
+    status: boolean;
+}
+
+export interface ExtensionSmsDetailParams extends ExtensionRequestParams {
+    tid: string;
+}
+
+export interface ExtensionSmsDetailResponse {
+    senderNumber: string;
+    senderName: string;
+    receiverNumber: string;
+    receiverName: string;
+    sendMessage: string;
+}
+
+export interface ExtensionSmsResendParams extends ExtensionRequestParams {
+    tid: string;
+}
+
+export interface ExtensionSmsResendResponse {
+    status: boolean;
+}
+
+export interface SmsPaymentDetailResendProps {
+  bottomSmsPaymentDetailResendOn: boolean;
+  setBottomSmsPaymentDetailResendOn: (bottomSmsPaymentDetailResendOn: boolean) => void;
+  smsDetailData: ExtensionSmsDetailResponse | null;
+}

src/entities/additional-service/model/types.ts

@@ -3,6 +3,8 @@ import { PayoutContent } from './payout/types';
 import { FundAccountTransferContentItem, FundAccountResultContentItem } from './fund-account/types';
 import { ArsListContent } from './ars/types';
 import { AlimtalkListContent } from './alimtalk/types';
+import { SmsPaymentListItem } from './sms-payment/types';
+import type { ExtensionSmsDetailResponse } from './sms-payment/types';
 
 // ========================================
 // 공통 Enums 및 타입들
@@ -391,12 +393,13 @@ export interface SettlementAgencyBottomAgreeProps {
 export interface ListItemProps extends
   KeyInPaymentListItem, AccountHolderSearchListItem,
   AccountHolderAuthListItem, LinkPaymentHistoryListItem,
-  LinkPaymentWaitListItem,
+  LinkPaymentWaitListItem, SmsPaymentListItem,
   PayoutContent, FundAccountTransferContentItem,
   FundAccountResultContentItem,
   ArsListContent, AlimtalkListContent {
   additionalServiceCategory?: AdditionalServiceCategory;
-  mid?: string
+  mid?: string;
+  onResendClick?: (mid: string, tid: string) => void;
 }
 
 export interface ListDateGroupProps {
@@ -404,6 +407,7 @@ export interface ListDateGroupProps {
   date?: string;
   items?: Array<ListItemProps>;
   mid?: string;
+  onResendClick?: (mid: string, tid: string) => void;
 }
 
 export interface AdditionalServiceListProps {
@@ -770,13 +774,6 @@ export interface ExtensionSmsDetailParams extends ExtensionRequestParams {
   tid: string;
 }
 
-export interface ExtensionSmsDetailResponse {
-  senderNumber: string;
-  senderName: string;
-  receiverNumber: string;
-  receiverName: string;
-  sendMessage: string;
-}
 // ========================================
 
 
@@ -823,7 +820,3 @@ export interface ArsCardPaymentFinishProps {
   setRequestSuccess: (requestSuccess: boolean) => void;
 }
 
-export interface SmsPaymentDetailResendProps {
-  bottomSmsPaymentDetailResendOn: boolean;
-  setBottomSmsPaymentDetailResendOn: (bottomSmsPaymentDetailResendOn: boolean) => void;
-}

src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx

@@ -1,4 +1,3 @@
-import { PATHS } from '@/shared/constants/paths';
 import { ListDateGroup } from '../list-date-group';
 import { AccountHolderAuthListProps, AdditionalServiceCategory } from '../../model/types';
 

src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx

@@ -39,10 +39,6 @@ export const AccountHolderSearchFilter = ({
     const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
     const [filterBank, setFilterBank] = useState<string>(bank)
     const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
-    const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
-    const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
-
-    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
 
     const variants = {
         hidden: { x: '100%' },

src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx

@@ -105,7 +105,7 @@ export const KeyInPaymentFilter = ({
                         <FilterSelect
                             title='가맹점'
                             selectValue={filterMid}
-                            selectSetter={setFilterMid}
+                            selectSetter={setMid}
                             selectOptions={MidOptions}
                         ></FilterSelect>
                         <FilterCalendar

src/entities/additional-service/ui/list-date-group.tsx

@@ -7,7 +7,8 @@ export const ListDateGroup = ({
   additionalServiceCategory,
   date,
   items,
-  mid
+  mid,
+  onResendClick
 }: ListDateGroupProps) => {
   moment.locale('ko');
   const getStateDate = () => {
@@ -63,6 +64,9 @@ export const ListDateGroup = ({
             sendCl={ items[i]?.sendCl }
             paymentMethod={ items[i]?.paymentMethod }
             receiverName={ items[i]?.receiverName }
+
+            smsCl= { items[i]?.smsCl }
+            onResendClick={ onResendClick }
           ></ListItem>
         )
       }  

src/entities/additional-service/ui/list-item.tsx

@@ -13,7 +13,7 @@ export const ListItem = ({
   amount, sendDate, sendStatus, sendMethod,
   scheduledSendDate, processStatus,
 
-  accountName,transferStatus,
+  accountName, transferStatus,
 
   submallId, settlementDate, companyName,
   disbursementStatus, disbursementAmount,
@@ -25,7 +25,10 @@ export const ListItem = ({
   orderStatus, arsPaymentMethod,
 
   alimCl, sendType, sendCl,
-  paymentMethod, receiverName
+  paymentMethod, receiverName,
+
+  smsCl,
+  onResendClick
 }: ListItemProps) => {
   const { navigate } = useNavigate();
   const getItemClass = () => {
@@ -100,13 +103,21 @@ export const ListItem = ({
       } else {
         rs = 'gray'
       }
+    } else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+      if (smsCl === "VACCOUNT_REQ_DEPOSIT") {
+        rs = 'blue'
+      } else {
+        rs = 'gray'
+      }
     }
     return rs;
 
   };
 
   const onClickToNavigate = () => {
-    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment ||
+      additionalServiceCategory === AdditionalServiceCategory.SMSPayment
+    ) {
 
       return;
     }
@@ -176,7 +187,7 @@ export const ListItem = ({
         }
       });
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
       navigate(PATHS.additionalService.ars.detail, {
         state: {
           additionalServiceCategory: additionalServiceCategory,
@@ -186,7 +197,7 @@ export const ListItem = ({
         }
       });
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
       navigate(PATHS.additionalService.alimtalk.detail, {
         state: {
           additionalServiceCategory: additionalServiceCategory,
@@ -220,11 +231,11 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
       timeStr = moment(requestDate).format('mm:ss');
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
       let time = paymentDate?.substring(8, 12);
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
       let time = paymentDate?.substring(8, 12);
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
     }
@@ -257,16 +268,19 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       str = companyName;
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
       str = `${receiveAccountName}(${receiveAccountNo})`;
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
       str = `${receiveAccountName}(${receiveAccountNo})`;
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+      str = `${paymentDate}(${paymentStatus})[추후 수정 필요]`
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
       str = '이름(' + tid + ')';
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
       str = `${receiverName}(${tid})`;
     }
 
@@ -277,7 +291,7 @@ export const ListItem = ({
     let rs = [];
     if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
       rs.push(
-        <div className="transaction-details">
+        <div key='key-in-list' className="transaction-details">
           <span>{getTime()}</span>
           <span className="separator">|</span>
           <span>{paymentStatus}</span>
@@ -295,7 +309,7 @@ export const ListItem = ({
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       rs.push(
-        <div className="transaction-details">
+        <div key="account-search" className="transaction-details">
           <span>{getTime()}</span>
           <span className="separator">|</span>
           <span>{bankName}</span>
@@ -305,7 +319,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
       if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
         rs.push(
-          <div className="transaction-details">
+          <div key="link-payment-history" className="transaction-details">
             <span>{getPaymentStatusText(paymentStatus)}</span>
             <span className="separator">|</span>
             <span>{getSendMethodText(sendMethod)}</span>
@@ -313,7 +327,7 @@ export const ListItem = ({
         )
       } else {
         rs.push(
-          <div className="transaction-details">
+          <div key="link-payment-history" className="transaction-details">
             <span>{getPaymentStatusText(paymentStatus)}</span>
             <span className="separator">|</span>
             <span>{getSendMethodText(sendMethod)}</span>
@@ -325,7 +339,7 @@ export const ListItem = ({
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
       rs.push(
-        <div className="transaction-details">
+        <div key="link-payment-wait" className="transaction-details">
           <span>{getProcessStatusText(processStatus)}</span>
           <span className="separator">|</span>
           <span>{getSendMethodText(sendMethod)}</span>
@@ -341,48 +355,57 @@ export const ListItem = ({
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ status }</span>
+          <span>{status}</span>
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ status }</span>
+          <span>{status}</span>
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ paymentStatus }</span>
+          <span>{paymentStatus}</span>
           <span className="separator">|</span>
-          <span>{ orderStatus }</span>
+          <span>{orderStatus}</span>
           <span className="separator">|</span>
-          <span>{ arsPaymentMethod }</span>
+          <span>{arsPaymentMethod}</span>
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ paymentMethod }</span>
+          <span>{paymentMethod}</span>
           <span className="separator">|</span>
-          <span>{ alimCl }</span>
+          <span>{alimCl}</span>
         </div>
       );
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+      rs.push(
+        <div key="sms-payment" className="transaction-details">
+          <span>{mid}</span>
+          <span className="separator">|</span>
+          <span>{smsCl}</span>
+        </div>
+      )
+    }
     return rs;
   };
 
@@ -493,9 +516,18 @@ export const ListItem = ({
         <div
           key="payout-item-amount"
           className="transaction-amount"
-        >{ sendCl }</div>
+        >{sendCl}</div>
       );
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick && tid) {
+      rs.push(
+        <div
+        key="sms-payment-amount"
+        className={`status-label success`}
+        onClick={() => mid && tid && onResendClick(mid, tid)}
+        >{'재발송'}</div>
+      )
+    }
     return rs;
   }
 
@@ -509,10 +541,10 @@ export const ListItem = ({
           <div className={`status-dot ${getDotClass()}`}></div>
         </div>
         <div className="transaction-content">
-          <div className="transaction-title">{ getTitle() }</div>
+          <div className="transaction-title">{getTitle()}</div>
-          { getDetail() }
+          {getDetail()}
         </div>
-        { getAmount() }
+        {getAmount()}
       </div>
     </>
   );

src/entities/additional-service/ui/sms-payment-filter.tsx

@@ -1,8 +0,0 @@
-export const SmsPaymentFilter = () => {
-
-  return (
-    <>
-    
-    </>
-  );
-};

src/entities/additional-service/ui/sms-payment/sms-payment-detail-resend.tsx

@@ -1,10 +1,11 @@
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { SmsPaymentDetailResendProps } from '../model/types';
+import { SmsPaymentDetailResendProps } from '../../../additional-service/model/sms-payment/types';
 
 export const SmsPaymentDetailResend = ({
   bottomSmsPaymentDetailResendOn,
-  setBottomSmsPaymentDetailResendOn
+  setBottomSmsPaymentDetailResendOn,
+  smsDetailData
 }: SmsPaymentDetailResendProps) => {
   
   const variants = {
@@ -44,11 +45,11 @@ export const SmsPaymentDetailResend = ({
           </div>
         </div>
         <div className="resend-info">
-          <div className="resend-row">발신자(번호) : 유앤아이피부과(16610808)</div>
+          <div className="resend-row">발신자(번호) : {smsDetailData?.senderName || '-'}({smsDetailData?.senderNumber || '-'})</div>
-          <div className="resend-row">수신자(번호) : 김*환(010****7000)</div>
+          <div className="resend-row">수신자(번호) : {smsDetailData?.receiverName || '-'}({smsDetailData?.receiverNumber || '-'})</div>
         </div>
         <div className="resend-box">
-          <p className="resend-text">[유앤아이피부과]김*환님, 신한은행 110322141414 (300원 06/08 입금완료)</p>
+          <p className="resend-text">{smsDetailData?.sendMessage || '-'}</p>
         </div>
         <div className="bottomsheet-footer">
           <button className="btn-50 btn-blue flex-1" type="button">신청</button>

src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx

@@ -0,0 +1,140 @@
+import moment from 'moment';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterSelectInput } from '@/shared/ui/filter/select-input';
+import { FilterDateOptions } from '@/entities/common/model/types';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { SmsPaymentFilterProps, SmsPaymentSearchType, SmsType } from '../../model/sms-payment/types';
+export const SmsPaymentFilter = ({
+  filterOn,
+  setFilterOn,
+  mid,
+  searchCl,
+  searchValue,
+  fromDate,
+  toDate,
+  smsCl,
+  setMid,
+  setSearchCl,
+  setSearchValue,
+  setFromDate,
+  setToDate,
+  setSmsCl
+}: SmsPaymentFilterProps) => {
+
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterSearchCl, setFilterSearchCl] = useState<SmsPaymentSearchType>(searchCl);
+  const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
+  const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
+  const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
+  const [filterSmsCl, setFilterSmsCl] = useState<SmsType>(smsCl);
+
+  const variants = {
+    hidden: { x: '100%' },
+    visible: { x: '0%' },
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setSearchCl(filterSearchCl);
+    setSearchValue(filterSearchValue);
+    setFromDate(filterFromDate);
+    setToDate(filterToDate);
+    setSmsCl(filterSmsCl);
+    onClickToClose();
+  };
+
+  let MidOptions = [
+    { name: 'nictest001m', value: 'nictest001m' },
+    { name: 'nictest002m', value: 'nictest002m' }
+  ];
+
+  let searchTypeOption = [
+    { name: '주문자', value: SmsPaymentSearchType.BUYER_NAME },
+    { name: '수신번호', value: SmsPaymentSearchType.RECEIVE_PHONE_NUMBER },
+  ]
+
+  let smsTypeOption = [
+    { name: '전체', value: SmsType.ALL },
+    { name: '가상계좌요청', value: SmsType.VACCOUNT_REQ },
+    { name: '가상계좌 요청+입금', value: SmsType.VACCOUNT_REQ_DEPOSIT },
+  ]
+
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+
+  return (
+    <>
+      <motion.div
+        id="fullMenuModal"
+        className="full-menu-modal"
+        initial="hidden"
+        animate={(filterOn) ? 'visible' : 'hidden'}
+        variants={variants}
+        transition={{ duration: 0.3 }}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img
+                  src={IMAGE_ROOT + '/ico_close.svg'}
+                  alt="닫기"
+                  onClick={() => onClickToClose()}
+                />
+              </button>
+            </div>
+          </div>
+
+          <div className="option-list pt-16">
+            <FilterSelect
+              title='가맹점'
+              selectValue={mid}
+              selectSetter={setMid}
+              selectOptions={MidOptions}
+            ></FilterSelect>
+
+            <FilterSelectInput
+              title='주문자,수신번호'
+              selectValue={searchCl}
+              selectSetter={setSearchCl}
+              selectOptions={searchTypeOption}
+              inputValue={searchValue}
+              inputSetter={setSearchValue}
+            ></FilterSelectInput>
+            <FilterCalendar
+              startDate={filterFromDate}
+              endDate={filterToDate}
+              setStartDate={setFilterFromDate}
+              setEndDate={setFilterToDate}
+            ></FilterCalendar>
+            <FilterButtonGroups
+              title='조회결과'
+              activeValue={filterSmsCl}
+              btnGroups={smsTypeOption}
+              setter={setFilterSmsCl}
+            ></FilterButtonGroups>
+          </div>
+          <div className="apply-row">
+            <button
+              className="btn-50 btn-blue flex-1"
+              onClick={() => onClickToSetFilter()}
+            >적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx

@@ -0,0 +1,35 @@
+import { SmsPaymentListProps } from '../../model/sms-payment/types';
+import { AdditionalServiceCategory } from '../../model/types';
+import { ListDateGroup } from '../list-date-group';
+
+export const SmsPaymentList = ({
+    listItems,
+    mid,
+    onResendClick
+}: SmsPaymentListProps) => {
+
+    const getListDateGroup = () => {
+        let rs = [];
+        for (const [key, value] of Object.entries(listItems)) {
+            rs.push(
+                <ListDateGroup
+                    additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
+                    key={key}
+                    date={key}
+                    items={value}
+                    mid={mid}
+                    onResendClick={onResendClick}
+                ></ListDateGroup>
+            )
+        }
+        return rs;
+    };
+
+    return (
+        <>
+            <div className="transaction-list">
+                {getListDateGroup()}
+            </div>
+        </>
+    )
+}

src/entities/user/api/use-user-create-mutation.ts

@@ -1,24 +1,50 @@
 import axios from 'axios';
-import { API_URL } from '@/shared/api/urls';
+import { API_URL_USER } from '@/shared/api/api-url-user';
-import { resultify } from '@/shared/lib/resultify';
 import { CBDCAxiosError } from '@/shared/@types/error';
 import {
   UserCreateParams,
   UserCreateResponse
 } from '../model/types';
+
+interface UserCreateMutationResponse {
+  status: boolean;
+  data?: UserCreateResponse;
+  error?: {
+    root: string;
+    errKey: string;
+    code: string;
+    message: string;
+    timestamp: string;
+    details: Record<string, string>;
+  };
+}
+
 import {
   useMutation,
   UseMutationOptions
 } from '@tanstack/react-query';
 
-export const userCreate = (params: UserCreateParams) => {
+export const userCreate = async (params: UserCreateParams): Promise<UserCreateMutationResponse> => {
-  return resultify(
+  try {
-    axios.post<UserCreateResponse>(API_URL.userCreate(), params),
+    const response = await axios.post<UserCreateResponse>(API_URL_USER.userCreate(), params);
-  );
+    return { status: true, data: response.data };
+  } catch (error: any) {
+    return {
+      status: false,
+      error: {
+        root: 'USER_CREATE',
+        errKey: error.response?.data?.errKey || 'UNKNOWN_ERROR',
+        code: error.response?.status?.toString() || '500',
+        message: error.response?.data?.message || error.message || 'Unknown error',
+        timestamp: new Date().toISOString(),
+        details: error.response?.data?.details || {}
+      }
+    };
+  }
 };
 
-export const useUserCreateMutation = (options?: UseMutationOptions<UserCreateResponse, CBDCAxiosError, UserCreateParams>) => {
+export const useUserCreateMutation = (options?: UseMutationOptions<UserCreateMutationResponse, CBDCAxiosError, UserCreateParams>) => {
-  const mutation = useMutation<UserCreateResponse, CBDCAxiosError, UserCreateParams>({
+  const mutation = useMutation<UserCreateMutationResponse, CBDCAxiosError, UserCreateParams>({
     ...options,
     mutationFn: (params: UserCreateParams) => userCreate(params),
   });

src/entities/user/api/use-user-exists-userid-mutation.ts

@@ -1,9 +1,8 @@
 import axios from 'axios';
-import { API_URL } from '@/shared/api/urls';
+import { API_URL_USER } from '@/shared/api/api-url-user';
 import { resultify } from '@/shared/lib/resultify';
 import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
-  UserExistsUseridParams,
   UserExistsUseridResponse
 } from '../model/types';
 import { 
@@ -11,16 +10,16 @@ import {
   UseMutationOptions
 } from '@tanstack/react-query';
 
-export const userExistsUserid = (params: UserExistsUseridParams) => {
+export const userExistsUserid = (usrId: string) => {
   return resultify(
-    axios.post<UserExistsUseridResponse>(API_URL.userExistsUserid(), params),
+    axios.post<UserExistsUseridResponse>(API_URL_USER.userExistsUserid(usrId)),
   );
 };
 
-export const useUserExistsUseridMutation = (options?: UseMutationOptions<UserExistsUseridResponse, CBDCAxiosError, UserExistsUseridParams>) => {
+export const useUserExistsUseridMutation = (options?: UseMutationOptions<UserExistsUseridResponse, CBDCAxiosError, string>) => {
-  const mutation = useMutation<UserExistsUseridResponse, CBDCAxiosError, UserExistsUseridParams>({
+  const mutation = useMutation<UserExistsUseridResponse, CBDCAxiosError, string>({
     ...options,
-    mutationFn: (params: UserExistsUseridParams) => userExistsUserid(params),
+    mutationFn: (usrId: string) => userExistsUserid(usrId),
   });
 
   return {

src/entities/user/api/use-user-exists-userid-query.ts

@@ -0,0 +1,31 @@
+import axios from 'axios';
+import { API_URL_USER } from '@/shared/api/api-url-user';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import {
+  UserExistsUseridResponse
+} from '../model/types';
+import {
+  useQuery,
+  UseQueryOptions
+} from '@tanstack/react-query';
+
+export const userExistsUserid = async (usrid: string) => {
+  const response = await axios.post<UserExistsUseridResponse>(API_URL_USER.userExistsUserid(usrid));
+  return response.data;
+};
+
+export const useUserExistsUseridQuery = (
+  usrid: string,
+  options?: Omit<UseQueryOptions<UserExistsUseridResponse, CBDCAxiosError>, 'queryKey' | 'queryFn'>
+) => {
+  const query = useQuery<UserExistsUseridResponse, CBDCAxiosError>({
+    queryKey: ['userExistsUserid', usrid],
+    queryFn: async () => await userExistsUserid(usrid),
+    enabled: !!usrid && usrid.trim().length > 0, // usrid가 있을 때만 실행
+    ...options,
+  });
+
+  return {
+    ...query,
+  };
+};

src/entities/user/api/use-user-find-authmethod-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_USER } from '@/shared/api/api-url-user';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  UserFindAuthMethodParams,
+  UserFindAuthMethodResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const userFindAuthMethod = (params: UserFindAuthMethodParams) => {
+  return resultify(
+    axios.post<UserFindAuthMethodResponse>(API_URL_USER.findAuthMethod(), params),
+  );
+};
+
+export const useUserFindAuthMethodMutation = (options?: UseMutationOptions<UserFindAuthMethodResponse, CBDCAxiosError, UserFindAuthMethodParams>) => {
+  const mutation = useMutation<UserFindAuthMethodResponse, CBDCAxiosError, UserFindAuthMethodParams>({
+    ...options,
+    mutationFn: (params: UserFindAuthMethodParams) => userFindAuthMethod(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/user/api/use-user-find-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_USER } from '@/shared/api/api-url-user';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  UserFindParams,
+  UserFindResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const userFind = (params: UserFindParams) => {
+  return resultify(
+    axios.post<UserFindResponse>(API_URL_USER.findUser(), params),
+  );
+};
+
+export const useUserFindMutation = (options?: UseMutationOptions<UserFindResponse, CBDCAxiosError, UserFindParams>) => {
+  const mutation = useMutation<UserFindResponse, CBDCAxiosError, UserFindParams>({
+    ...options,
+    mutationFn: (params: UserFindParams) => userFind(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/user/model/types.ts

@@ -1,3 +1,8 @@
+import { 
+  DefaulResponsePagination,
+  DefaultRequestPagination
+} from '@/entities/common/model/types';
+
 export interface LoginParams {
   id: string;
   password: string;
@@ -21,28 +26,60 @@ export interface LoginResponse {
   available2FAMethod?: Array<string>;
   requires2FA?: boolean;
 };
+
 export interface UserInfo extends LoginResponse {
 
 }
 export interface UserParams {
 
 };
+
+export interface UserListItem {
+  usrid: string;
+  idCl: string;
+  status: string;
+}
+
+export interface UserFindResponse extends DefaulResponsePagination {
+  content: Array<UserListItem>;
+};
+
+export interface UserFindParams {
+  mid: string;
+  page: DefaultRequestPagination;
+};
+
 export interface UserExistsUseridParams {
   usrId: string;
 };
+
+export interface UserFindAuthMethodParams {
+  mid: string;
+  usrid: string;
+  page?: DefaultRequestPagination;
+};
+
+export interface UserFindAuthMethodResponse {
+  status: boolean;
+  data: UserAuthMethodData;
+};
+
 export interface UserExistsUseridResponse {
   exists: boolean;
 };
+
 export interface VerificationsItem {
   type: string;
   contact: string;
 };
+
 export interface UserCreateParams {
   userId: string;
   password: string;
   loginRange: string;
   verification: Array<VerificationsItem>
 };
+
 export interface UserData {
   usrid: string;
   mid: string;
@@ -87,3 +124,15 @@ export interface UserCreateResponse {
   user: UserData;
 };
 
+export interface AuthMethodItem {
+  usrid: string;
+  systemAdminClassId: string;
+  authMethodType: string;
+  sequence: number;
+  content: string;
+}
+
+export interface UserAuthMethodData {
+  emails: Array<AuthMethodItem>;
+  phones: Array<AuthMethodItem>;
+}

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">
+          <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

@@ -7,8 +7,325 @@ import {
   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>
+                  <div style={{ position: 'relative' }}>
                     <input
-                    className="wid-100 error"
+                      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 className="ua-help error">동일한 ID가 이미 존재합니다.</div>
+                    )}
+                  </div>
+                </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"
+                    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">
+                  <select
-                    <option>MID + GID</option>
+                    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>
@@ -65,20 +408,29 @@ export const UserAddAccountPage = () => {
                       className="ic20 plus"
                       type="button"
                       aria-label="이메일 추가"
+                      onClick={handleAddEmail}
+                      disabled={!isEmailAddButtonEnabled()}
                     ></button>
                   </div>
-                  <div className="ua-input-row">
+                  {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">
@@ -88,20 +440,29 @@ export const UserAddAccountPage = () => {
                       className="ic20 plus"
                       type="button"
                       aria-label="휴대폰 추가"
+                      onClick={handleAddPhone}
+                      disabled={!isPhoneAddButtonEnabled()}
                     ></button>
                   </div>
-                  <div className="ua-input-row">
+                  {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>
 
@@ -109,7 +470,11 @@ export const UserAddAccountPage = () => {
                 <button
                   className="btn-50 btn-blue flex-1"
                   type="button"
-                >저장</button>
+                  onClick={handleSave}
+                  disabled={isPending}
+                >
+                  {isPending ? '저장 중...' : '저장'}
+                </button>
               </div>
             </div>
           </div>

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

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
-import { useLocation } from 'react-router';
+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';
@@ -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(() => {
+  // const { mutateAsync: userFindAuthMethod } = useUserFindAuthMethodMutation();
-    console.log('tid : ', tid);
+
-  }, []);
+  // 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">
+          <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, {
+    navigate(PATHS.account.user.accountAuth);
-      state: {
-        tid: tid
-      }
-    });
   });
 
   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>

src/pages/additional-service/additional-service-pages.tsx

@@ -7,7 +7,7 @@ import { ArsDetailPage } from './ars/detail-page';
 import { ArsRequestPage } from './ars/request-page';
 import { ArsRequestSuccessPage } from './ars/request-success-page';
 import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
-import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page';
+import { SmsPaymentPage } from './sms-payment/sms-payment-page';
 import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
 import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
 import { LinkPaymentHistoryPage } from './link-payment/link-payment-history-page';
@@ -56,7 +56,7 @@ export const AdditionalServicePages = () => {
           <Route path={ROUTE_NAMES.additionalService.keyInPayment.request} element={<KeyInPaymentRequestPage />} />
           <Route path={ROUTE_NAMES.additionalService.keyInPayment.requestSuccess} element={<KeyInPaymentRequestSuccessPage />} />
         </Route>
-        <Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentNotificationPage />} />
+        <Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentPage />} />
         <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.base}>
           <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.list} element={<AccountHolderSearchPage />} />
           <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.detail} element={<AccountHolderSearchDetailPage />} />

src/pages/additional-service/sms-payment-notification/sms-payment-notification-page.tsx

@@ -1,149 +0,0 @@
-import { useState } from 'react';
-import { IMAGE_ROOT } from '@/shared/constants/common';
-import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment-detail-resend';
-import { HeaderType } from '@/entities/common/model/types';
-import { 
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode
-} from '@/widgets/sub-layout/use-sub-layout';
-
-export const SmsPaymentNotificationPage = () => {
-  const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
-
-  useSetHeaderTitle('SMS 결제 통보');
-  useSetHeaderType(HeaderType.LeftArrow);
-  useSetFooterMode(true);
-
-  const onClickToShowDetail = () => {
-    setBottomSmsPaymentDetailResendOn(true);
-  };
-  
-  return (
-    <>
-      <main>
-        <div className="tab-content">
-          <div className="tab-pane sub active">
-            <section className="summary-section no-border">
-              <div className="credit-controls">
-                <div>
-                  <input 
-                    className="credit-period"
-                    type="text"
-                    value="2025.06.01 ~ 2025.06.31"
-                    readOnly={ true }
-                  />
-                  <button 
-                    className="filter-btn"
-                    aria-label="필터"
-                  >
-                    <img 
-                      src={ IMAGE_ROOT + '/ico_setting.svg' }
-                      alt="검색옵션"
-                    />
-                  </button>
-                </div>
-                <button 
-                  className="download-btn"
-                  aria-label="다운로드"
-                >
-                  <img 
-                    src={ IMAGE_ROOT + '/ico_download.svg' }
-                    alt="다운로드"
-                  />
-                </button>
-              </div>
-            </section>
-            <section className="transaction-list">
-              <div className="date-group">
-                <div className="date-header">25.06.08(일)</div>
-                <div 
-                  className="transaction-item approved"
-                  onClick={ () => onClickToShowDetail() }
-                >
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">김*환(7000)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</div>
-                </div>
-
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">최*길(010333*****)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청+입금</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</div>
-                </div>
-
-                <div className="transaction-item approved">
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">박*준(010333*****)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청+입금</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</div>
-                </div>
-
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">이*신(010333*****)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</div>
-                </div>
-
-                <div className="transaction-item approved">
-                    <div className="transaction-status">
-                      <div className="status-dot blue"></div>
-                    </div>
-                    <div className="transaction-content">
-                      <div className="transaction-title">김*환(010333*****)</div>
-                      <div className="transaction-details">
-                        <span>nictest01m</span>
-                        <span className="separator">|</span>
-                        <span>가상계좌 요청</span>
-                      </div>
-                    </div>
-                    <div className="resend-label">재발송</div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-      </main>
-
-      <SmsPaymentDetailResend
-        bottomSmsPaymentDetailResendOn={ bottomSmsPaymentDetailResendOn }
-        setBottomSmsPaymentDetailResendOn={ setBottomSmsPaymentDetailResendOn }
-      ></SmsPaymentDetailResend>
-    </>
-  );
-};

src/pages/additional-service/sms-payment/sms-payment-page.tsx

@@ -0,0 +1,202 @@
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment/sms-payment-detail-resend';
+import { HeaderType, SortByKeys } from '@/entities/common/model/types';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
+import {
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+import { SmsPaymentListItem, SmsPaymentSearchType, SmsType, ExtensionSmsDetailResponse } from '@/entities/additional-service/model/sms-payment/types';
+import { useExtensionSmsListMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-list-mutation';
+import { useExtensionSmsDownloadExcelMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-download-excel-mutation';
+import { SmsPaymentList } from '@/entities/additional-service/ui/sms-payment/sms-payment-list';
+import { SmsPaymentFilter } from '@/entities/additional-service/ui/sms-payment/sms-payment-filter';
+import { useExtensionSmsDetailMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-detail-mutation';
+
+
+export const SmsPaymentPage = () => {
+  const { navigate } = useNavigate();
+  const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
+
+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState({});
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [tid, setTid] = useState<string>('');
+  const [searchCl, setSearchCl] = useState<SmsPaymentSearchType>(SmsPaymentSearchType.BUYER_NAME)
+  const [searchValue, setSearchValue] = useState<string>('')
+  const [fromDate, setFromDate] = useState(moment().format('YYYY-MM-DD'));
+  const [toDate, setToDate] = useState(moment().format('YYYY-MM-DD'));
+  const [smsCl, setSmsCl] = useState<SmsType>(SmsType.ALL);
+  const [smsDetailData, setSmsDetailData] = useState<ExtensionSmsDetailResponse | null>(null);
+
+  const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
+  const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
+  const { mutateAsync: detail } = useExtensionSmsDetailMutation();
+
+  useSetHeaderTitle('SMS 결제 통보');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+
+  const callList = (option?: {
+    sortBy?: string,
+    val?: string
+  }) => {
+    pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
+    setPageParam(pageParam);
+
+    let listParams = {
+      mid: mid,
+      searchCl: searchCl,
+      searchValue: searchValue,
+      fromDate: fromDate,
+      toDate: toDate,
+      smsCl: smsCl === SmsType.ALL ? '' : smsCl,
+      page: pageParam
+    }
+
+    smsPaymentList(listParams).then((rs) => {
+      setListItems(assembleData(rs.content));
+    })
+  }
+
+  const assembleData = (content: Array<SmsPaymentListItem>) => {
+    let data: any = {};
+    if (content && content.length > 0) {
+      for (let i = 0; i < content?.length; i++) {
+        let paymentDate = content[i]?.paymentDate?.substring(0, 8);
+        let groupDate = moment(paymentDate).format('YYYYMMDD');
+        if (!!groupDate && !data.hasOwnProperty(groupDate)) {
+          data[groupDate] = [];
+        }
+        if (!!groupDate && data.hasOwnProperty(groupDate)) {
+          data[groupDate].push(content[i]);
+        }
+      }
+    }
+    console.log('Data : ', data)
+    return data;
+  };
+
+  const callDetail = (selectedMid: string, selectedTid: string) => {
+    console.log("Selected Mid: ", selectedMid, "Selected Tid: ", selectedTid)
+    detail({
+      mid: selectedMid,
+      tid: selectedTid
+    }).then((rs) => {
+      console.log('Detail info : ', rs)
+      setSmsDetailData(rs);
+    })
+  }
+
+  const onClickToDownloadExcel = () => {
+    downloadExcel({
+      mid: mid,
+      searchCl: searchCl,
+      searchValue: searchValue,
+      fromDate: fromDate,
+      toDate: toDate,
+      smsCl: smsCl === SmsType.ALL ? '' : smsCl,
+    }).then((rs) => {
+      console.log('Excel Dowload Status : ' + rs.status)
+    });
+  }
+
+
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    callList({ sortBy: sort })
+  };
+
+
+  const onClickToShowDetail = (selectedMid: string, selectedTid: string) => {
+    setTid(selectedTid);
+    callDetail(selectedMid, selectedTid);
+    setBottomSmsPaymentDetailResendOn(true);
+  };
+
+  useEffect(() => {
+    callList();
+  }, []);
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <section className="summary-section no-border">
+              <div className="credit-controls">
+                <div>
+                  <input
+                    className="credit-period"
+                    type="text"
+                    value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
+                    readOnly={true}
+                  />
+                  <button
+                    className="filter-btn"
+                    aria-label="필터"
+                  >
+                    <img
+                      src={IMAGE_ROOT + '/ico_setting.svg'}
+                      alt="검색옵션"
+                      onClick={() => onClickToOpenFilter()}
+                    />
+                  </button>
+                </div>
+                <button
+                  className="download-btn"
+                  aria-label="다운로드"
+                >
+                  <img
+                    src={IMAGE_ROOT + '/ico_download.svg'}
+                    alt="다운로드"
+                    onClick={() => onClickToDownloadExcel()}
+                  />
+                </button>
+              </div>
+            </section>
+            <div className="detail-divider"></div>
+            <SmsPaymentList
+              listItems={listItems}
+              mid={mid}
+              onResendClick={onClickToShowDetail}
+            ></SmsPaymentList>
+          </div>
+        </div>
+      </main>
+
+      <SmsPaymentDetailResend
+        bottomSmsPaymentDetailResendOn={bottomSmsPaymentDetailResendOn}
+        setBottomSmsPaymentDetailResendOn={setBottomSmsPaymentDetailResendOn}
+        smsDetailData={smsDetailData}
+      ></SmsPaymentDetailResend>
+
+      <SmsPaymentFilter
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+        mid={mid}
+        searchCl={searchCl}
+        searchValue={searchValue}
+        fromDate={fromDate}
+        toDate={toDate}
+        smsCl={smsCl}
+        setMid={setMid}
+        setSearchCl={setSearchCl}
+        setSearchValue={setSearchValue}
+        setFromDate={setFromDate}
+        setToDate={setToDate}
+        setSmsCl={setSmsCl}
+      ></SmsPaymentFilter>
+    </>
+  );
+};

src/shared/api/api-url-user.ts

@@ -4,22 +4,40 @@ import {
   } from './../constants/url';
 
 export const API_URL_USER = {
-    allUserList: () => {
+    userExistsUserid: (usrid: string) => {
-        return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/all/users`;
+        return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/exists/${usrid}`;
     },
-    createUser: () => {
+    userCreate: () => {
+        // 사용자 추가
         return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/create`;
     },
-    deleteUser: () => {
+    findUser: () => {
-        return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/delete`;
+        return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/find`;
-    },
-    updateUser: () => {
-        return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/update`;
-    },
-    userDetail: () => {
-        return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/detail`;
     },
     existsUserid: () => {
         return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/exists/userid`;
     },
+    deleteUser: () => {
+        return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/delete`;
+    },
+    createUser: () => {
+        return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/create`;
+    },
+    findAuthMethod: () => {
+        return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/tfa/find`;
+    },
+    modifyAuthMethod: () => {
+        return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/tfa/modify`;
+    },
+    // allUserList: () => {
+    //     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/all/users`;
+    // },
+    
+    // updateUser: () => {
+    //     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/update`;
+    // },
+    // userDetail: () => {
+    //     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/detail`;
+    // },
+
 }

src/shared/ui/assets/css/style.css

@@ -4422,6 +4422,18 @@ ul.txn-amount-detail li span:last-child {
     background: #F5F5F5 url('../images/ico_del_minus.svg') no-repeat center center;
 }
 
+.icon-btn.check {
+    width: 36px;
+    height: 36px;
+    border-radius: 6px;
+    background: #F5F5F5 url('../images/ico_alone_check.svg') no-repeat center center;
+}
+
+.button-group {
+    display: flex;
+    gap: 8px;
+}
+
 .notice-bar {
     padding: 14px 16px;
     background: #F4F8FF;