- 안면인증 페이지 추가 (추후 목업으로 추가 작업 필요)

- 자금이체 : isFormValid(이체신청 Validation 추가[임시] 추가 작업 필요)
2025-10-16 09:42:09 +09:00
parent b457716c3f
commit a351710cc7
13 changed files with 523 additions and 41 deletions
--- a/src/entities/additional-service/model/face-auth/constant.ts
+++ b/src/entities/additional-service/model/face-auth/constant.ts
@@ -0,0 +1,7 @@
+import { ProcessResult } from "../types";
+
+export const ResultStatusBtnGroup = [
+    { name: '전체', value: ProcessResult.ALL },
+    { name: '성공', value: ProcessResult.SUCCESS },
+    { name: '실패', value: ProcessResult.FAIL },
+];
--- a/src/entities/additional-service/model/face-auth/types.ts
+++ b/src/entities/additional-service/model/face-auth/types.ts
@@ -0,0 +1,39 @@
+
+// ========================================
+// 안면인증 관련 타입들
+// ========================================
+
+import { FilterProps, ListItemProps, ProcessResult } from "../types";
+
+export enum FaceAuthTransactionType {
+  ALL = "ALL",
+  AUTH = "AUTH",
+  REGISTER = "REGISTER"
+}
+
+export interface FaceAuthListItem {
+  tid?: string;
+  requestDate?: string;
+  resultStatus?: string;
+  name?: string;
+}
+
+export interface FaceAuthListProps {
+  listItems: Record<string, Array<ListItemProps>>;
+  mid: string;
+}
+
+export interface FaceAuthFilterProps extends FilterProps {
+  mid: string;
+  memberId: string;
+  startDate: string;
+  endDate: string;
+  transactionType: FaceAuthTransactionType;
+  processResult: ProcessResult;
+  setMid: (mid: string) => void;
+  setMemberId: (memberId: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setTransactionType: (transactionType: FaceAuthTransactionType) => void;
+  setProcessResult: (processResult: ProcessResult) => void;
+}
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -5,6 +5,7 @@ import { ArsListContent } from './ars/types';
 import { AlimtalkListContent } from './alimtalk/types';
 import { SmsPaymentListItem } from './sms-payment/types';
 import type { ExtensionSmsDetailResponse } from './sms-payment/types';
+import { FaceAuthListItem } from './face-auth/types';

 // ========================================
 // 공통 Enums 및 타입들
@@ -30,6 +31,7 @@ export enum AdditionalServiceCategory {
  Payout = 'Payout',
  Ars = 'Ars',
  Alimtalk = 'Alimtalk',
+  FaceAuth = 'FaceAuth'
 }

 // ========================================
@@ -387,7 +389,7 @@ export interface ListItemProps extends
  LinkPaymentWaitListItem, SmsPaymentListItem,
  PayoutContent, FundAccountTransferContentItem,
  FundAccountResultContentItem,
-  ArsListContent, AlimtalkListContent {
+  ArsListContent, AlimtalkListContent, FaceAuthListItem {
  additionalServiceCategory?: AdditionalServiceCategory;
  mid?: string;
  onResendClick?: (mid: string, tid: string) => void;
--- a/src/entities/additional-service/ui/face-auth/face-auth-list.tsx
+++ b/src/entities/additional-service/ui/face-auth/face-auth-list.tsx
@@ -0,0 +1,32 @@
+import { ListDateGroup } from '../list-date-group';
+import { AdditionalServiceCategory } from '../../model/types';
+import { FaceAuthListProps } from '../../model/face-auth/types';
+
+export const FaceAuthList = ({
+    listItems,
+    mid
+}: FaceAuthListProps) => {
+    const getListDateGroup = () => {
+        let rs = [];
+        for (const [key, value] of Object.entries(listItems)) {
+            rs.push(
+                <ListDateGroup
+                    additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
+                    key={key}
+                    date={key}
+                    items={value}
+                    mid={mid}
+                ></ListDateGroup>
+            );
+        }
+        return rs;
+    };
+
+    return (
+        <>
+            <div className="transaction-list">
+                {getListDateGroup()}
+            </div>
+        </>
+    );
+};
--- a/src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx
+++ b/src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx
@@ -0,0 +1,138 @@
+import moment from 'moment';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import {ProcessResult} from '../../../model/types';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterInput } from '@/shared/ui/filter/input';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
+import { useStore } from '@/shared/model/store';
+import { FaceAuthFilterProps, FaceAuthTransactionType } from '@/entities/additional-service/model/face-auth/types';
+
+export const FaceAuthFilter = ({
+	filterOn,
+	setFilterOn,
+	mid,
+	memberId,
+	startDate,
+	endDate,
+	transactionType,
+	processResult,
+	setMid,
+	setMemberId,
+	setStartDate,
+	setEndDate,
+	setTransactionType,
+	setProcessResult
+}: FaceAuthFilterProps) => {
+
+	const [filterMid, setFilterMid] = useState<string>(mid);
+	const [filterMemberId, setFilterMemberId] = useState<string>(memberId);
+	const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
+	const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
+	const [filterTransactionType, setFilterTransactionType] = useState<FaceAuthTransactionType>(transactionType);
+	const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
+
+	const midOptions = useStore.getState().UserStore.selectOptionsMids;
+
+	const onClickToClose = () => {
+		setFilterOn(false);
+	};
+
+	const onClickToSetFilter = () => {
+		setMid(filterMid);
+		setMemberId(filterMemberId);
+		setStartDate(filterStartDate);
+		setEndDate(filterEndDate);
+		setTransactionType(filterTransactionType);
+		setProcessResult(filterProcessResult);
+		onClickToClose();
+	};
+
+	const transactionTypeBtnGroup = [
+		{ name: '전체', value: FaceAuthTransactionType.ALL },
+		{ name: '인증', value: FaceAuthTransactionType.AUTH },
+		{ name: '등록', value: FaceAuthTransactionType.REGISTER },
+	];
+
+	const processResultBtnGroup = [
+		{ name: '전체', value: ProcessResult.ALL },
+		{ name: '성공', value: ProcessResult.SUCCESS },
+		{ name: '실패', value: ProcessResult.FAIL },
+	];
+
+	return (
+		<>
+			<motion.div
+				className="full-menu-modal"
+				initial="hidden"
+				animate={(filterOn) ? 'visible' : 'hidden'}
+				variants={ FilterMotionVariants }
+				transition={ FilterMotionDuration }
+				style={ FilterMotionStyle }
+			>
+				<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={filterMid}
+							selectSetter={setFilterMid}
+							selectOptions={midOptions}
+						></FilterSelect>
+
+						<FilterInput
+							title='가맹점회원ID'
+							inputValue={filterMemberId}
+							inputSetter={setFilterMemberId}
+						></FilterInput>
+
+						<FilterCalendar
+							startDate={filterStartDate}
+							endDate={filterEndDate}
+							setStartDate={setFilterStartDate}
+							setEndDate={setFilterEndDate}
+						></FilterCalendar>
+
+						<FilterButtonGroups
+							title='거래유형'
+							activeValue={filterTransactionType}
+							btnGroups={transactionTypeBtnGroup}
+							setter={setFilterTransactionType}
+						></FilterButtonGroups>
+
+						<FilterButtonGroups
+							title='인증결과'
+							activeValue={filterProcessResult}
+							btnGroups={processResultBtnGroup}
+							setter={setFilterProcessResult}
+						></FilterButtonGroups>
+					</div>
+					<div className="apply-row">
+						<button
+							className="btn-50 btn-blue flex-1"
+							onClick={() => onClickToSetFilter()}
+						>적용</button>
+					</div>
+				</div>
+			</motion.div>
+		</>
+	);
+}
--- a/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
@@ -26,9 +26,7 @@ export const KeyInPaymentList = ({
  };

  const onClickToNavigate = () => {
-    navigate(PATHS.additionalService.keyInPayment.request, {
-      state: { mid }
-    });
+    navigate(PATHS.additionalService.keyInPayment.request);
  };

  return (
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -28,6 +28,7 @@ export const ListItem = ({
  paymentMethod, receiverName,

  smsCl,
+  name,
  onResendClick
 }: ListItemProps) => {
  const { navigate } = useNavigate();
@@ -80,6 +81,14 @@ export const ListItem = ({
        rs = 'gray';
      }
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      if (resultStatus === "SUCCESS") {
+        rs = 'blue';
+      }
+      else if (resultStatus === "FAIL") {
+        rs = 'gray';
+      }
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      if (paymentStatus === "PAYMENT_COMPLETE") {
        rs = 'blue';
@@ -115,12 +124,15 @@ export const ListItem = ({
  };

  const onClickToNavigate = () => {
+    // 상세페이지 없음
    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment ||
-      additionalServiceCategory === AdditionalServiceCategory.SMSPayment
+      additionalServiceCategory === AdditionalServiceCategory.SMSPayment ||
+      additionalServiceCategory === AdditionalServiceCategory.FaceAuth
    ) {

      return;
    }
+    //이하 상세페이지 존재
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      navigate(PATHS.additionalService.accountHolderAuth.detail, {
        state: {
@@ -225,6 +237,10 @@ export const ListItem = ({
      let time = requestDate?.substring(8, 14);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      let time = requestDate?.substring(8, 14);
+      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      timeStr = moment(requestDate).format('mm:ss');
    }
@@ -256,6 +272,9 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      str = `${accountNo}`;
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      str = `${name}(${tid})`;
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
      additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait
    ) {
@@ -316,6 +335,16 @@ export const ListItem = ({
        </div>
      );
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      rs.push(
+        //TODO : 추후 수정 필요
+        <div key="face-auth" className="transaction-details">
+          <span>{processStatus}</span>
+          <span className="separator">|</span>
+          <span>{status}</span>
+        </div>
+      );
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
        rs.push(
@@ -418,6 +447,13 @@ export const ListItem = ({
        </div>
      );
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      rs.push(
+        <div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}>
+          {resultStatus === 'SUCCESS' ? '성공' : '실패'}
+        </div>
+      );
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      rs.push(
        <div className={`status-label ${(transferStatus === 'REQUEST' || transferStatus === 'SUCCESS') ? 'success' : 'fail'}`}>
--- a/src/pages/additional-service/additional-service-pages.tsx
+++ b/src/pages/additional-service/additional-service-pages.tsx
@@ -39,6 +39,7 @@ import { AccountHolderSearchRequestPage } from './account-holder-search/request-
 import { AccountHolderSearchDetailPage } from './account-holder-search/detail-page';
 import { AccountHolderAuthDetailPage } from './account-holder-auth/detail-page';
 import { LinkPaymentSeparateApprovalPage } from './link-payment/separate-approval/link-payment-separate-approval-page';
+import { FaceAuthPage } from './face-auth/face-auth-page';

 export const AdditionalServicePages = () => {
  return (
@@ -100,6 +101,9 @@ export const AdditionalServicePages = () => {
          <Route path={ROUTE_NAMES.additionalService.payout.detail} element={<PayoutDetailPage />} />
          <Route path={ROUTE_NAMES.additionalService.payout.request} element={<PayoutRequestPage />} />
        </Route>
+        <Route path={ROUTE_NAMES.additionalService.faceAuth.base}>
+          <Route path={ROUTE_NAMES.additionalService.faceAuth.list} element={<FaceAuthPage />} />
+        </Route>
      </SentryRoutes>
    </>
  );
--- a/src/pages/additional-service/face-auth/face-auth-page.tsx
+++ b/src/pages/additional-service/face-auth/face-auth-page.tsx
@@ -0,0 +1,204 @@
+import moment from 'moment';
+import { ProcessResult } from '@/entities/additional-service/model/types';
+import { SortTypeKeys } from '@/entities/common/model/types';
+import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { HeaderType } from '@/entities/common/model/types';
+import { useEffect, useState } from 'react';
+import { useStore } from '@/shared/model/store';
+import { PATHS } from '@/shared/constants/paths';
+import {
+    useSetHeaderTitle,
+    useSetHeaderType,
+    useSetFooterMode,
+    useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+import { FaceAuthList } from '@/entities/additional-service/ui/face-auth/face-auth-list';
+import { FaceAuthFilter } from '@/entities/additional-service/ui/face-auth/filter/face-auth-filter';
+import { FaceAuthListItem, FaceAuthTransactionType } from '@/entities/additional-service/model/face-auth/types';
+import { ResultStatusBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
+
+export const FaceAuthPage = () => {
+    const { navigate } = useNavigate();
+    const userMid = useStore.getState().UserStore.mid;
+
+    const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
+    const [listItems, setListItems] = useState({});
+    const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+    const [filterOn, setFilterOn] = useState<boolean>(false);
+    const [mid, setMid] = useState<string>(userMid);
+    const [memberId, setMemberId] = useState<string>('');
+    const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+    const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+    const [transactionType, setTransactionType] = useState<FaceAuthTransactionType>(FaceAuthTransactionType.ALL);
+    const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
+
+    useSetHeaderTitle('안면인증');
+    useSetHeaderType(HeaderType.LeftArrow);
+    useSetFooterMode(false);
+    useSetOnBack(() => {
+        navigate(PATHS.home);
+    });
+
+    //TODO : API 연동
+    //const { mutateAsync: faceAuthHistoryList } = useExtensionFaceAuthHistoryListMutation();
+    //const { mutateAsync: downloadExcel } = useExtensionFaceAuthDownloadExcelMutation();
+
+    const assembleData = (content: Array<FaceAuthListItem>) => {
+        console.log('rs.content:', content);
+        let data: any = {};
+        if (content && content.length > 0) {
+            for (let i = 0; i < content?.length; i++) {
+                let requestDate = content[i]?.requestDate?.substring(0, 8);
+                let groupDate = moment(requestDate).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 callList = (option?: {
+        sortType?: SortTypeKeys,
+        val?: string
+    }) => {
+        pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
+        setPageParam(pageParam);
+        let listParams = {
+            mid: mid,
+            memberId: memberId,
+            fromDate: startDate,
+            toDate: endDate,
+            transactionType: transactionType,
+            resultStatus: processResult,
+            page: pageParam
+        };
+
+        //faceAuthHistoryList(listParams).then((rs) => {
+        //    setListItems(assembleData(rs.content));
+        //});
+    };
+
+    const onClickToDownloadExcel = () => {
+        // downloadExcel({
+        //     mid: mid,
+        //     memberId: memberId,
+        //     fromDate: startDate,
+        //     toDate: endDate,
+        //     transactionType: transactionType,
+        //     resultStatus: processResult
+        // }).then((rs) => {
+        //     console.log('Excel Dowload Status : ' + rs.status);
+        // });
+    };
+
+    const onClickToOpenFilter = () => {
+        setFilterOn(!filterOn);
+    };
+
+    const onClickToSort = (sort: SortTypeKeys) => {
+        setSortType(sort);
+        callList({ sortType: sort });
+    };
+
+    const onClickToTransactionStatus = (val: ProcessResult) => {
+        setProcessResult(val);
+        callList({
+            val: val
+        });
+    };
+
+    useEffect(() => {
+        callList();
+    }, [mid, memberId, startDate, endDate, transactionType, processResult]);
+
+    return (
+        <>
+            <main>
+                <div className="tab-content">
+                    <div className="tab-pane sub active">
+                        <section className="summary-section">
+                            <div className="credit-controls">
+                                <div>
+                                    <input
+                                        className="credit-period"
+                                        type="text"
+                                        value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).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"
+                                >
+                                    <img
+                                        src={IMAGE_ROOT + '/ico_download.svg'}
+                                        alt="다운로드"
+                                        onClick={() => onClickToDownloadExcel()}
+                                    />
+                                </button>
+                            </div>
+                        </section>
+
+                        <div className="filter-section">
+                            <SortTypeBox
+                                sortType={sortType}
+                                onClickToSort={onClickToSort}
+                            ></SortTypeBox>
+                            <div className="excrow">
+                                <div className="full-menu-keywords no-padding">
+                                    {
+                                        ResultStatusBtnGroup.map((value, index) => (
+                                            <span
+                                                key={`key-service-code=${index}`}
+                                                className={`keyword-tag ${(processResult === value.value) ? 'active' : ''}`}
+                                                onClick={() => onClickToTransactionStatus(value.value)}
+                                            >{value.name}</span>
+                                        ))
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                        <FaceAuthList
+                            listItems={listItems}
+                            mid={mid}
+                        ></FaceAuthList>
+                    </div>
+                </div>
+            </main>
+            <FaceAuthFilter
+                filterOn={filterOn}
+                setFilterOn={setFilterOn}
+                mid={mid}
+                memberId={memberId}
+                startDate={startDate}
+                endDate={endDate}
+                transactionType={transactionType}
+                processResult={processResult}
+                setMid={setMid}
+                setMemberId={setMemberId}
+                setStartDate={setStartDate}
+                setEndDate={setEndDate}
+                setTransactionType={setTransactionType}
+                setProcessResult={setProcessResult}
+            />
+        </>
+    );
+};
--- a/src/pages/additional-service/fund-account/transfer-request-page.tsx
+++ b/src/pages/additional-service/fund-account/transfer-request-page.tsx
@@ -17,6 +17,7 @@ export const FundAccountTransferRequestPage = () => {
  const { navigate } = useNavigate();
  const userMid = useStore.getState().UserStore.mid;

+
  const [mid, setMid] = useState<string>(userMid);
  const [transferAmount, setTransferAmount] = useState<number>(0);
  const [receiveBankCode, setReceiveBankCode] = useState<string>('');
@@ -47,6 +48,14 @@ export const FundAccountTransferRequestPage = () => {
    });
  };

+  const isFormValid = () => {
+    return (
+      receiveAccountNo.trim() !== '' &&
+      receiveAccountName.trim() !== '' &&
+      transferAmount >0 
+    )
+  }
+  
  return (
    <>
      <main>
@@ -55,9 +64,11 @@ export const FundAccountTransferRequestPage = () => {
            <div className="ing-list">
              <div className="billing-form gap-30">
                <div className="billing-row">
-                  <div className="billing-label">서브ID</div>
+                  <div className="billing-label">가맹점</div>
                  <div className="billing-field">
-                    <select></select>
+                    <select>
+                      <option>userMid</option>
+                    </select>
                  </div>
                </div>
                <div className="billing-row">
@@ -121,6 +132,7 @@ export const FundAccountTransferRequestPage = () => {
        <button 
          className="btn-50 btn-blue flex-1"
          onClick={ callExtensionFundAccountTransferRequest }
+          disabled={!isFormValid}
        >등록</button>
      </div>
    </>
--- a/src/pages/additional-service/key-in-payment/requeset-page.tsx
+++ b/src/pages/additional-service/key-in-payment/requeset-page.tsx
@@ -13,14 +13,15 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { overlay } from 'overlay-kit';
 import { Dialog } from '@/shared/ui/dialogs/dialog';
+import { useStore } from '@/shared/model/store';

 export const KeyInPaymentRequestPage = () => {
    const { navigate } = useNavigate();
    const location = useLocation();

-    const { mid: receivedMid } = location.state || {};
+    const userMid = useStore.getState().UserStore.mid;

-    const [mid, setMid] = useState<string>(receivedMid || '');
+    const [mid, setMid] = useState<string>(userMid || '');
    const [goodsName, setGoodsName] = useState<string>('');
    const [amount, setAmount] = useState<number>(0);
    const [buyerName, setBuyerName] = useState<string>('');
@@ -115,7 +116,7 @@ export const KeyInPaymentRequestPage = () => {

    const isValidCardNumber = () => {
        return cardNo1.length === 4 && cardNo2.length === 4 &&
-               cardNo3.length === 4 && cardNo4.length === 4;
+            cardNo3.length === 4 && cardNo4.length === 4;
    };

    const isValidCardExpiration = () => {
@@ -293,7 +294,7 @@ export const KeyInPaymentRequestPage = () => {

                                <div className="billing-row">
                                    <div className="billing-label">유효기간(월/년)<span>*</span></div>
-                                    <div className="billing-field" style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
+                                    <div className="billing-field" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                                        <input
                                            type="text"
                                            value={cardExpirationMonth}
@@ -305,7 +306,7 @@ export const KeyInPaymentRequestPage = () => {
                                            pattern="[0-9]*"
                                            maxLength={2}
                                            placeholder='MM'
-                                            style={{flex: 1}}
+                                            style={{ flex: 1 }}
                                        />
                                        <span>/</span>
                                        <input
@@ -319,7 +320,7 @@ export const KeyInPaymentRequestPage = () => {
                                            pattern="[0-9]*"
                                            maxLength={2}
                                            placeholder='YY'
-                                            style={{flex: 1}}
+                                            style={{ flex: 1 }}
                                        />
                                    </div>
                                </div>
--- a/src/pages/additional-service/link-payment/apply/link-payment-apply-success-page.tsx
+++ b/src/pages/additional-service/link-payment/apply/link-payment-apply-success-page.tsx
@@ -11,7 +11,7 @@ export const LinkPaymentApplySuccessPage = () => {
    useSetFooterMode(false);

    const onClickToHome = () => {
-        navigate(PATHS.additionalService.linkPayment.base);
+        navigate(PATHS.additionalService.linkPayment.shippingHistory);
    };

    return (
--- a/src/pages/additional-service/payout/request-page.tsx
+++ b/src/pages/additional-service/payout/request-page.tsx
@@ -3,9 +3,9 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { CalendarType, HeaderType } from '@/entities/common/model/types';
 import {
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode,
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useState } from "react";
@@ -45,6 +45,14 @@ export const PayoutRequestPage = () => {
    });
  };

+  const isFormValid = () => {
+    return (
+      submallId.trim() !== '' &&
+      disbursementAmount > 0 &&
+      settlementDate.trim() !== ''
+    );
+  };
+
  const setNewDate = (date: string) => {
    setSettlementDate(date);
    setCalendarOpen(false);
@@ -64,8 +72,8 @@ export const PayoutRequestPage = () => {
                  <div className="billing-field">
                    <input
                      type="text"
-                      value={ submallId }
-                      onChange={ (e) => setSubmallId(e.target.value) }
+                      value={submallId}
+                      onChange={(e) => setSubmallId(e.target.value)}
                    />
                  </div>
                </div>
@@ -74,9 +82,9 @@ export const PayoutRequestPage = () => {
                  <div className="billing-field">
                    <input
                      type="text"
-                      value={ disbursementAmount }
-                      onChange={ (e) => setDisbursementAmount(parseInt(e.target.value)) }
-                     />
+                      value={disbursementAmount}
+                      onChange={(e) => setDisbursementAmount(parseInt(e.target.value))}
+                    />
                  </div>
                </div>
                <div className="billing-row">
@@ -87,15 +95,15 @@ export const PayoutRequestPage = () => {
                        className="date-input"
                        type="text"
                        placeholder="날짜 선택"
-                        value={ settlementDate }
+                        value={settlementDate}
                      />
                      <button
                        className="date-btn"
                        type="button"
-                        onClick={ () => onClickToOpenCalendar() }
+                        onClick={() => onClickToOpenCalendar()}
                      >
                        <img
-                          src={ IMAGE_ROOT + '/ico_date.svg' }
+                          src={IMAGE_ROOT + '/ico_date.svg'}
                          alt="날짜 선택"
                        />
                      </button>
@@ -110,14 +118,15 @@ export const PayoutRequestPage = () => {
      <div className="apply-row">
        <button
          className="btn-50 btn-blue flex-1"
-          onClick={ callExtensionPayoutRequest }
+          onClick={callExtensionPayoutRequest}
+          disabled={!isFormValid()}
        >신청</button>
      </div>
      <NiceCalendar
-        calendarOpen={ calendarOpen }
-        setCalendarOpen={ setCalendarOpen }
-        calendarType={ CalendarType.Single }
-        setNewDate={ setNewDate }
+        calendarOpen={calendarOpen}
+        setCalendarOpen={setCalendarOpen}
+        calendarType={CalendarType.Single}
+        setNewDate={setNewDate}
      ></NiceCalendar>
    </>
  );