- 링크결제_분리승인 페이지 추가

- KeyIn결제 FormData 생성
- 링크결제_분리승인 과련 Css 추가

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

@@ -137,6 +137,7 @@ export interface KeyInPaymentListItem {
 export interface KeyInPaymentListProps {
   additionalServiceCategory: AdditionalServiceCategory;
   listItems: Record<string, Array<ListItemProps>>;
+  mid?: string;
 }
 
 export interface KeyInPaymentFilterProps extends FilterProps {

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

@@ -5,7 +5,8 @@ import { ListDateGroup } from '../list-date-group';
 
 export const KeyInPaymentList = ({
   additionalServiceCategory,
-  listItems
+  listItems,
+  mid
 }: KeyInPaymentListProps) => {
   const { navigate } = useNavigate();
 
@@ -25,7 +26,9 @@ export const KeyInPaymentList = ({
   };
 
   const onClickToNavigate = () => {
-    navigate(PATHS.additionalService.keyInPayment.request)
+    navigate(PATHS.additionalService.keyInPayment.request, {
+      state: { mid }
+    });
   };
 
   return (

src/entities/additional-service/ui/link-payment/bottom-sheet/extended-period-bottom-sheet.tsx

@@ -0,0 +1,71 @@
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from "@/entities/common/model/constant";
+
+
+export interface ExtendedPeriodBottomSheetProps {
+    bottomSheetOn: boolean,
+    setBottomSheetOn: (bottomSheetOn: boolean) => void;
+    extendPeriod: () => void;
+};
+
+export const ExtendedPeriodBottomSheet = ({
+    bottomSheetOn,
+    setBottomSheetOn,
+    extendPeriod
+}: ExtendedPeriodBottomSheetProps) => {
+    const onClickToClose = () => {
+        setBottomSheetOn(false);
+    };
+
+    const onClickToResendSms = () => {
+        if(extendPeriod) {
+            extendPeriod();
+        }
+        onClickToClose();
+    };
+
+  return (
+    <>
+      { (bottomSheetOn) &&
+        <div className="bg-dim"></div>
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (bottomSheetOn)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
+      >
+        <div className="bottomsheet-header">
+          <div className="bottomsheet-title">
+            <h2>기간 연장</h2>
+            <button
+              className="close-btn"
+              type="button"
+            >
+              <img 
+                src={ IMAGE_ROOT + '/ico_close.svg' }
+                alt="취소"
+                onClick={ () => onClickToClose() }
+              />
+            </button>
+          </div>
+        </div>
+        <div className="bottomsheet-content">
+          <div className="bottom-section">
+            <p>유효기간 연장을 하시겠습니끼?</p>
+            <p>개별 상태를 확인해주세요.</p>
+          </div>
+        </div>
+        <div className="bottomsheet-footer">
+          <button
+            className="btn-50 btn-blue flex-1"
+            type="button"
+            onClick={ () => onClickToResendSms() }
+          >확인</button>
+        </div>
+      </motion.div>
+    </>
+  );
+}

src/entities/additional-service/ui/link-payment/bottom-sheet/link-break-bottom-sheet.tsx

@@ -0,0 +1,71 @@
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from "@/entities/common/model/constant";
+
+
+export interface LinkBreakBottomSheetProps {
+    bottomSheetOn: boolean,
+    setBottomSheetOn: (bottomSheetOn: boolean) => void;
+    linkBreak: () => void;
+};
+
+export const LinkBreakBottomSheet = ({
+    bottomSheetOn,
+    setBottomSheetOn,
+    linkBreak
+}: LinkBreakBottomSheetProps) => {
+    const onClickToClose = () => {
+        setBottomSheetOn(false);
+    };
+
+    const onClickToLinkBreak = () => {
+        if(linkBreak) {
+            linkBreak();
+        }
+        onClickToClose();
+    };
+
+  return (
+    <>
+      { (bottomSheetOn) &&
+        <div className="bg-dim"></div>
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (bottomSheetOn)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
+      >
+        <div className="bottomsheet-header">
+          <div className="bottomsheet-title">
+            <h2>링크중단</h2>
+            <button
+              className="close-btn"
+              type="button"
+            >
+              <img 
+                src={ IMAGE_ROOT + '/ico_close.svg' }
+                alt="취소"
+                onClick={ () => onClickToClose() }
+              />
+            </button>
+          </div>
+        </div>
+        <div className="bottomsheet-content">
+          <div className="bottom-section">
+            <p>링크중단 요청 시</p>
+            <p>결제불가 상태가 되며 원복 불가합니다.</p>
+          </div>
+        </div>
+        <div className="bottomsheet-footer">
+          <button
+            className="btn-50 btn-blue flex-1"
+            type="button"
+            onClick={ () => onClickToLinkBreak() }
+          >확인</button>
+        </div>
+      </motion.div>
+    </>
+  );
+}

src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx

@@ -54,7 +54,7 @@ export const LinkPaymentHistoryWrap = () => {
 			mid: mid,
 			searchCl: searchType === LinkPaymentSearchType.ALL ? '' : searchType,
 			searchValue: searchKeyword,
-			paymentMethod: 'st', // 추후 변경 필요 빼야함
+			paymentMethod: '',
 			fromDate: startDate,
 			toDate: endDate,
 			paymentStatus: transactionStatus === LinkPaymentTransactionStatus.ALL ? '' : transactionStatus,
@@ -91,7 +91,7 @@ export const LinkPaymentHistoryWrap = () => {
 			mid: mid,
 			searchCl: (searchType === LinkPaymentSearchType.ALL)? '': searchType,
 			searchValue: searchKeyword,
-			paymentMethod: 'st', // 추후 변경 필요 빼야함
+			paymentMethod: '',
 			fromDate: startDate,
 			toDate: endDate,
 			paymentStatus: (transactionStatus === LinkPaymentTransactionStatus.ALL)? '': transactionStatus,

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

@@ -38,6 +38,7 @@ import { KeyInPaymentRequestSuccessPage } from './key-in-payment/request-success
 import { AccountHolderSearchRequestPage } from './account-holder-search/request-page';
 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';
 
 export const AdditionalServicePages = () => {
   return (
@@ -73,6 +74,7 @@ export const AdditionalServicePages = () => {
           <Route path={ROUTE_NAMES.additionalService.linkPayment.confirmSuccess} element={<LinkPaymentApplySuccessPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.detail} element={<LinkPaymentDetailPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.pendingDetail} element={<LinkPaymentWaitDetailPage />} />
+          <Route path={ROUTE_NAMES.additionalService.linkPayment.separateApproval} element={<LinkPaymentSeparateApprovalPage />} />
         </Route>
         <Route path={ROUTE_NAMES.additionalService.alimtalk.base}>
           <Route path={ROUTE_NAMES.additionalService.alimtalk.list} element={<AlimtalkListPage />} />

src/pages/additional-service/ars/list-page.tsx

@@ -105,7 +105,9 @@ export const ArsListPage = () => {
   };
 
   const onClickToNavigate = () => {
-    navigate(PATHS.additionalService.ars.request);
+    navigate(PATHS.additionalService.ars.request, {
+      state: { mid }
+    });
   };
 
   const onClickToDownloadExcel = () => {

src/pages/additional-service/ars/request-page.tsx

@@ -1,23 +1,27 @@
 import { ChangeEvent, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
+import { useLocation } from 'react-router';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/ars/use-extension-ars-apply-mutation';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
+import {
-	useSetHeaderTitle,
+  useSetHeaderTitle,
-	useSetHeaderType,
+  useSetHeaderType,
-	useSetFooterMode,
+  useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { ArsPaymentMethod, ExtensionArsApplyParams } from '@/entities/additional-service/model/ars/types';
 
 export const ArsRequestPage = () => {
   const { navigate } = useNavigate();
+  const location = useLocation();
+
+  const { mid: receivedMid } = location.state || {};
 
   const { mutateAsync: arsApply } = useExtensionArsApplyMutation();
 
-  const [mid, setMid] = useState<string>('');
+  const [mid, setMid] = useState<string>(receivedMid || '');
   const [moid, setMoid] = useState<string>('');
   const [goodsName, setGoodsName] = useState<string>('');
   const [amount, setAmount] = useState<number>(0);
@@ -52,30 +56,47 @@ export const ArsRequestPage = () => {
     }).catch(() => {
 
     }).finally(() => {
-      
+
     });
 
   };
 
   const onClickToRequest = () => {
     callArsApply();
-  };  
+  };
+
+  const isValidPhoneNumber = (phone: string) => {
+    // 한국 휴대폰 번호: 010, 011, 016, 017, 018, 019로 시작, 10-11자리
+    const phoneRegex = /^01[0|1|6|7|8|9][0-9]{7,8}$/;
+    return phoneRegex.test(phone);
+  };
+
+  const isFormValid = () => {
+    return (
+      mid.trim() !== '' &&
+      moid.trim() !== '' &&
+      goodsName.trim() !== '' &&
+      amount > 0 &&
+      buyerName.trim() !== '' &&
+      isValidPhoneNumber(phoneNumber)
+    );
+  };
 
   const getArsPaymentMethodBtns = () => {
     let rs = [];
     rs.push(
-      <div 
+      <div
         key="ars-payment-method-btns"
         className="seg-buttons"
       >
-        <button 
+        <button
-          className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.SMS)? 'btn-blue': 'btn-white'}`}
+          className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.SMS) ? 'btn-blue' : 'btn-white'}`}
-          onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.SMS) }
+          onClick={(e) => setArsPaymentMethod(ArsPaymentMethod.SMS)}
-        >{ ArsPaymentMethod.SMS }</button>
+        >{ArsPaymentMethod.SMS}</button>
-        <button 
+        <button
-          className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.ARS)? 'btn-blue': 'btn-white'}`}
+          className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.ARS) ? 'btn-blue' : 'btn-white'}`}
-          onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.ARS) }
+          onClick={(e) => setArsPaymentMethod(ArsPaymentMethod.ARS)}
-        >{ ArsPaymentMethod.ARS }</button>
+        >{ArsPaymentMethod.ARS}</button>
       </div>
     );
     return rs;
@@ -91,10 +112,9 @@ export const ArsRequestPage = () => {
                 <div className="billing-row">
                   <div className="billing-label">가맹점 <span>*</span></div>
                   <div className="billing-field">
-                    <input 
+                    <input
-                      type="text" 
+                      type="text"
-                      value="nictest00m" 
+                      value={mid}
-                      readOnly={ true } 
                     />
                   </div>
                 </div>
@@ -102,10 +122,10 @@ export const ArsRequestPage = () => {
                 <div className="billing-row">
                   <div className="billing-label">주문번호 <span>*</span></div>
                   <div className="billing-field">
-                    <input 
+                    <input
-                      type="text" 
+                      type="text"
-                      value={ moid }
+                      value={moid}
-                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value) }
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
                     />
                   </div>
                 </div>
@@ -113,80 +133,95 @@ export const ArsRequestPage = () => {
                 <div className="billing-row">
                   <div className="billing-label">상품명 <span>*</span></div>
                   <div className="billing-field">
-                    <input 
+                    <input
-                      type="text" 
+                      type="text"
-                      value={ goodsName }
+                      value={goodsName}
-                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value) }
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value)}
                     />
                   </div>
                 </div>
 
-                  <div className="billing-row">
+                <div className="billing-row">
-                    <div className="billing-label">금액 <span>*</span></div>
+                  <div className="billing-label">금액 <span>*</span></div>
-                    <div className="billing-field">
+                  <div className="billing-field">
-                      <input 
+                    <input
-                        type="text" 
+                      type="text"
-                        value={ amount }
+                      value={amount}
-                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setAmount(parseInt(e.target.value)) }  
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      />
+                        const onlyNumbers = e.target.value.replace(/[^0-9]/g, ''); // 숫자만 남김
-                    </div>
+                        setAmount(onlyNumbers === '' ? 0 : parseInt(onlyNumbers));
+                      }}
+                      inputMode="numeric"  // 모바일 키보드 숫자 전용
+                      pattern="[0-9]*"     // 브라우저 기본 숫자만 유효하도록
+                    />
                   </div>
+                </div>
 
-                  <div className="billing-row">
+                <div className="billing-row">
-                    <div className="billing-label">할부기간 <span>*</span></div>
+                  <div className="billing-label">할부기간 <span>*</span></div>
-                    <div className="billing-field">
+                  <div className="billing-field">
-                      <select disabled>
+                    <select disabled>
-                        <option selected>일시불</option>
+                      <option selected>일시불</option>
-                        <option>일시불</option>
+                      <option>일시불</option>
-                      </select>
+                    </select>
-                    </div>
                   </div>
+                </div>
 
-                  <div className="billing-row">
+                <div className="billing-row">
-                    <div className="billing-label">구매자명 <span>*</span></div>
+                  <div className="billing-label">구매자명 <span>*</span></div>
-                    <div className="billing-field">
+                  <div className="billing-field">
-                      <input
+                    <input
-                        type="text" 
+                      type="text"
-                        value={ buyerName }
+                      value={buyerName}
-                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
-                      />
+                    />
-                    </div>
                   </div>
+                </div>
 
-                  <div className="billing-row">
+                <div className="billing-row">
-                    <div className="billing-label">휴대폰 번호 <span>*</span></div>
+                  <div className="billing-label">휴대폰 번호 <span>*</span></div>
-                    <div className="billing-field">
+                  <div className="billing-field">
-                      <input 
+                    <input
-                        type="text" 
+                      type="tel"
-                        value={ phoneNumber }
+                      value={phoneNumber}
-                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
+                      placeholder='01012345678'
-                      />
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                    </div>
+                        const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
+                        setPhoneNumber(onlyNumbers);
+                      }}
+                      className={phoneNumber && !isValidPhoneNumber(phoneNumber) ? 'error' : ''}
+                      inputMode="numeric"
+                      pattern="[0-9]*"
+                      maxLength={11}
+                    />
                   </div>
+                </div>
 
-                  <div className="billing-row">
+                <div className="billing-row">
-                    <div className="billing-label">이메일</div>
+                  <div className="billing-label">이메일</div>
-                    <div className="billing-field">
+                  <div className="billing-field">
-                      <input 
+                    <input
-                        type="text" 
+                      type="text"
-                        value={ email }
+                      value={email}
-                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value) }
+                      placeholder='test@nicepay.co.kr'
-                      />
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value)}
-                    </div>
+                    />
                   </div>
+                </div>
 
-                  <div className="billing-row">
+                <div className="billing-row">
-                    <div className="billing-label">결제 방식 <span>*</span></div>
+                  <div className="billing-label">결제 방식 <span>*</span></div>
-                    <div className="billing-field">
+                  <div className="billing-field">
-                    { getArsPaymentMethodBtns() }  
+                    {getArsPaymentMethodBtns()}
-                    </div>
                   </div>
+                </div>
               </div>
             </div>
             <div className="apply-row">
-              <button 
+              <button
                 className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToRequest() }
+                onClick={() => onClickToRequest()}
+                disabled={!isFormValid()}
               >결제 신청</button>
             </div>
           </div>

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -206,6 +206,7 @@ export const KeyInPaymentPage = () => {
             <KeyInPaymentList
               listItems={listItems}
               additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
+              mid={mid}
             ></KeyInPaymentList>
           </div>
         </div>

src/pages/additional-service/key-in-payment/requeset-page.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
+import { useLocation } from 'react-router';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { HeaderType } from '@/entities/common/model/types';
@@ -10,10 +11,29 @@ import {
     useSetFooterMode,
     useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
-import { number } from 'framer-motion';
+import { overlay } from 'overlay-kit';
+import { Dialog } from '@/shared/ui/dialogs/dialog';
 
 export const KeyInPaymentRequestPage = () => {
     const { navigate } = useNavigate();
+    const location = useLocation();
+
+    const { mid: receivedMid } = location.state || {};
+
+    const [mid, setMid] = useState<string>(receivedMid || '');
+    const [goodsName, setGoodsName] = useState<string>('');
+    const [amount, setAmount] = useState<number>(0);
+    const [buyerName, setBuyerName] = useState<string>('');
+    const [email, setEmail] = useState<string>('');
+    const [phoneNumber, setPhoneNumber] = useState<string>('');
+    const [cardNo1, setCardNo1] = useState<string>('');
+    const [cardNo2, setCardNo2] = useState<string>('');
+    const [cardNo3, setCardNo3] = useState<string>('');
+    const [cardNo4, setCardNo4] = useState<string>('');
+    const [cardExpirationMonth, setCardExpirationMonth] = useState<string>('');
+    const [cardExpirationYear, setCardExpirationYear] = useState<string>('');
+    const [instmntMonth, setInstmntMonth] = useState<string>('00');
+    const [moid, setMoid] = useState<string>('');
 
     const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();
 
@@ -25,31 +45,99 @@ export const KeyInPaymentRequestPage = () => {
     });
 
     const callKeyInPaymentRequest = () => {
+        const cardNo = `${cardNo1}${cardNo2}${cardNo3}${cardNo4}`;
+        const cardExpirationDate = `${cardExpirationMonth}${cardExpirationYear}`;
+
         let keyInApplyParams = {
-            mid: 'string',
+            mid: mid,
-            goodsName: 'string',
+            goodsName: goodsName,
-            amount: 0,
+            amount: amount,
-            buyerName: 'string',
+            buyerName: buyerName,
-            email: 'string',
+            email: email,
-            phoneNumber: 'string',
+            phoneNumber: phoneNumber,
-            cardNo: 'string',
+            cardNo: cardNo,
-            cardExpirationDate: 'string',
+            cardExpirationDate: cardExpirationDate,
-            instmntMonth: 'string',
+            instmntMonth: instmntMonth,
-            moid: 'SMS',
+            moid: moid,
         };
+
         keyInApply(keyInApplyParams).then((rs) => {
-            navigate(PATHS.additionalService.keyInPayment.requestSuccess);
+            console.log('결제 성공:', rs);
-            console.log(rs)
+            showSuccessDialog();
-        }).catch(() => {
+        }).catch((error) => {
-
+            console.error('결제 실패:', error);
-        }).finally(() => {
+            showErrorDialog(error?.message || '결제에 실패했습니다');
-
         });
-
     };
 
+    const showSuccessDialog = () => {
+        overlay.open(({ isOpen, close, unmount }) => {
+            return (
+                <Dialog
+                    afterLeave={unmount}
+                    open={isOpen}
+                    onClose={close}
+                    onConfirmClick={() => {
+                        close();
+                        navigate(PATHS.additionalService.keyInPayment.list);
+                    }}
+                    message="결제가 성공적으로 처리되었습니다"
+                    buttonLabel={['확인']}
+                />
+            );
+        });
+    };
 
+    const showErrorDialog = (errorMessage: string) => {
+        overlay.open(({ isOpen, close, unmount }) => {
+            return (
+                <Dialog
+                    afterLeave={unmount}
+                    open={isOpen}
+                    onClose={close}
+                    onConfirmClick={close}
+                    message={errorMessage}
+                    buttonLabel={['확인']}
+                />
+            );
+        });
+    };
 
+    const isValidPhoneNumber = (phone: string) => {
+        const phoneRegex = /^01[0|1|6|7|8|9][0-9]{7,8}$/;
+        return phoneRegex.test(phone);
+    };
+
+    const isValidEmail = (email: string) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
+    const isValidCardNumber = () => {
+        return cardNo1.length === 4 && cardNo2.length === 4 &&
+               cardNo3.length === 4 && cardNo4.length === 4;
+    };
+
+    const isValidCardExpiration = () => {
+        if (cardExpirationMonth.length !== 2 || cardExpirationYear.length !== 2) {
+            return false;
+        }
+        const month = parseInt(cardExpirationMonth);
+        return month >= 1 && month <= 12;
+    };
+
+    const isFormValid = () => {
+        return (
+            mid.trim() !== '' &&
+            goodsName.trim() !== '' &&
+            amount > 0 &&
+            buyerName.trim() !== '' &&
+            isValidEmail(email) &&
+            isValidPhoneNumber(phoneNumber) &&
+            isValidCardNumber() &&
+            isValidCardExpiration()
+        );
+    };
 
     const onClickToRequest = () => {
         callKeyInPaymentRequest();
@@ -65,11 +153,11 @@ export const KeyInPaymentRequestPage = () => {
                                 <div className="billing-row">
                                     <div className="billing-label">가맹점 <span>*</span></div>
                                     <div className="billing-field">
-                                        <select
+                                        <input
-                                            className="wid-100"
+                                            type="text"
-                                        >
+                                            value={mid}
-                                            <option>nictest00m</option>
+                                            readOnly={true}
-                                        </select>
+                                        />
                                     </div>
                                 </div>
 
@@ -78,7 +166,8 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value=""
+                                            value={goodsName}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value)}
                                         />
                                     </div>
                                 </div>
@@ -88,7 +177,13 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value=""
+                                            value={amount}
+                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                                const onlyNumbers = e.target.value.replace(/[^0-9]/g, ''); // 숫자만 남김
+                                                setAmount(onlyNumbers === '' ? 0 : parseInt(onlyNumbers));
+                                            }}
+                                            inputMode="numeric"  // 모바일 키보드 숫자 전용
+                                            pattern="[0-9]*"     // 브라우저 기본 숫자만 유효하도록
                                         />
                                     </div>
                                 </div>
@@ -98,7 +193,8 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value=""
+                                            value={buyerName}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
                                         />
                                     </div>
                                 </div>
@@ -108,7 +204,10 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <input
                                             type="email"
-                                            value=""
+                                            value={email}
+                                            placeholder='test@nicepay.co.kr'
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+                                            className={email && !isValidEmail(email) ? 'error' : ''}
                                         />
                                     </div>
                                 </div>
@@ -118,8 +217,16 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <input
                                             type="tel"
-                                            value=""
+                                            value={phoneNumber}
-                                            placeholder=" '-' 제외하고 입력"
+                                            placeholder='01012345678'
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                                                const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
+                                                setPhoneNumber(onlyNumbers);
+                                            }}
+                                            className={phoneNumber && !isValidPhoneNumber(phoneNumber) ? 'error' : ''}
+                                            inputMode="numeric"
+                                            pattern="[0-9]*"
+                                            maxLength={11}
                                         />
                                     </div>
                                 </div>
@@ -129,36 +236,90 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value=""
+                                            value={cardNo1}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                                                const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
+                                                if (onlyNumbers.length <= 4) setCardNo1(onlyNumbers);
+                                            }}
+                                            inputMode="numeric"
+                                            pattern="[0-9]*"
+                                            maxLength={4}
+                                            placeholder="1234"
                                         />
                                     </div>
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value=""
+                                            value={cardNo2}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                                                const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
+                                                if (onlyNumbers.length <= 4) setCardNo2(onlyNumbers);
+                                            }}
+                                            inputMode="numeric"
+                                            pattern="[0-9]*"
+                                            maxLength={4}
+                                            placeholder="5678"
                                         />
                                     </div>
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value=""
+                                            value={cardNo3}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                                                const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
+                                                if (onlyNumbers.length <= 4) setCardNo3(onlyNumbers);
+                                            }}
+                                            inputMode="numeric"
+                                            pattern="[0-9]*"
+                                            maxLength={4}
+                                            placeholder="9012"
                                         />
                                     </div>
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value=""
+                                            value={cardNo4}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                                                const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
+                                                if (onlyNumbers.length <= 4) setCardNo4(onlyNumbers);
+                                            }}
+                                            inputMode="numeric"
+                                            pattern="[0-9]*"
+                                            maxLength={4}
+                                            placeholder="3456"
                                         />
                                     </div>
                                 </div>
 
                                 <div className="billing-row">
                                     <div className="billing-label">유효기간(월/년)<span>*</span></div>
-                                    <div className="billing-field">
+                                    <div className="billing-field" style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
                                         <input
                                             type="text"
-                                            value=""
+                                            value={cardExpirationMonth}
-                                            placeholder='MM/YY'
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                                                const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
+                                                if (onlyNumbers.length <= 2) setCardExpirationMonth(onlyNumbers);
+                                            }}
+                                            inputMode="numeric"
+                                            pattern="[0-9]*"
+                                            maxLength={2}
+                                            placeholder='MM'
+                                            style={{flex: 1}}
+                                        />
+                                        <span>/</span>
+                                        <input
+                                            type="text"
+                                            value={cardExpirationYear}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                                                const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
+                                                if (onlyNumbers.length <= 2) setCardExpirationYear(onlyNumbers);
+                                            }}
+                                            inputMode="numeric"
+                                            pattern="[0-9]*"
+                                            maxLength={2}
+                                            placeholder='YY'
+                                            style={{flex: 1}}
                                         />
                                     </div>
                                 </div>
@@ -167,9 +328,26 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-label">할부 기간<span>*</span></div>
                                     <div className="billing-field">
                                         <select
-                                            className="wid-100"
+                                            disabled={amount < 50000}
+                                            value={instmntMonth}
+                                            onChange={(e: ChangeEvent<HTMLSelectElement>) => setInstmntMonth(e.target.value)}
                                         >
-                                            <option>일시불</option>
+                                            <option value="00">일시불 (무이자)</option>
+                                            {amount >= 50000 && (
+                                                <>
+                                                    <option value="02">2개월</option>
+                                                    <option value="03">3개월</option>
+                                                    <option value="04">4개월</option>
+                                                    <option value="05">5개월</option>
+                                                    <option value="06">6개월</option>
+                                                    <option value="07">7개월</option>
+                                                    <option value="08">8개월</option>
+                                                    <option value="09">9개월</option>
+                                                    <option value="10">10개월</option>
+                                                    <option value="11">11개월</option>
+                                                    <option value="12">12개월</option>
+                                                </>
+                                            )}
                                         </select>
                                     </div>
                                 </div>
@@ -179,7 +357,8 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value=""
+                                            value={moid}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
                                         />
                                     </div>
                                 </div>
@@ -188,7 +367,8 @@ export const KeyInPaymentRequestPage = () => {
                         <div className="apply-row">
                             <button
                                 className="btn-50 btn-blue flex-1"
-                                onClick={() => onClickToRequest() }
+                                onClick={() => onClickToRequest()}
+                                disabled={!isFormValid()}
                             >결제 신청</button>
                         </div>
                     </div>

src/pages/additional-service/link-payment/apply/link-payment-apply-confirm-page.tsx

@@ -95,7 +95,6 @@ export const LinkPaymentApplyConfirmPage = () => {
                         onClick={() => onClickToConfirm()}
                     >결제 신청</button>
                 </div>
-                <div className="home-indicator"></div>
             </main>
         </>
     );

src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx

@@ -111,6 +111,7 @@ export const LinkPaymentApplyPage = () => {
           </div>
         </div>
       </main>
+      
     </>
   );
 };

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.home);
+        navigate(PATHS.additionalService.linkPayment.base);
     };
 
     return (

src/pages/additional-service/link-payment/link-payment-detail-page.tsx

@@ -76,7 +76,7 @@ export const LinkPaymentDetailPage = () => {
     setShowPayment(!showPayment);
   };
 
-  const onClickToCancel = () => {
+  const onClickToResend = () => {
     let msg = '재발송 하시겠습니까?';
 
     overlay.open(({
@@ -96,6 +96,12 @@ export const LinkPaymentDetailPage = () => {
       );
     });
   };
+
+  const onClickToSeparateApproval = () => {
+    navigate(PATHS.additionalService.linkPayment.separateApproval, {
+      state: { mid, tid }
+    });
+  };
   useEffect(() => {
     callDetail();
   }, []);
@@ -122,12 +128,18 @@ export const LinkPaymentDetailPage = () => {
                 detailInfo={detailInfo}
               ></DetailInfoWrap>
             </div>
-          </div>
+            <div className="apply-row">
-          <div className="apply-row">
+              <button
-            <button
+                className="btn-50 btn-blue flex-1"
-              className="btn-50 btn-blue flex-1"
+                onClick={() => onClickToSeparateApproval()}
-              onClick={() => onClickToCancel()}
+              >분리승인 상세</button>
-            >재발송</button>
+            </div>
+            {/* <div className="apply-row">
+              <button
+                className="btn-50 btn-blue flex-1"
+                onClick={() => onClickToResend()}
+              >재발송</button>
+            </div> */}
           </div>
         </div>
       </main >

src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-fail.tsx

@@ -0,0 +1,69 @@
+import { motion } from 'framer-motion';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { PATHS } from "@/shared/constants/paths";
+import {
+    FilterMotionDuration,
+    FilterMotionStyle,
+    FilterMotionVariants
+} from '@/entities/common/model/constant';
+
+export interface LinkPaymentApplyFailPageProps {
+    pageOn: boolean;
+    setPageOn: (pageOn: boolean) => void;
+    errorMessage?: string;
+}
+
+export const LinkPaymentApplyFailPage = ({
+    pageOn,
+    setPageOn,
+    errorMessage
+}: LinkPaymentApplyFailPageProps) => {
+    const { navigate } = useNavigate();
+
+    const onClickToClose = () => {
+        setPageOn(false);
+        navigate(PATHS.additionalService.linkPayment.shippingHistory);
+    };
+
+    return (
+        <>
+            <motion.div
+                className="full-menu-modal"
+                initial="hidden"
+                animate={(pageOn) ? 'visible' : 'hidden'}
+                variants={FilterMotionVariants}
+                transition={FilterMotionDuration}
+                style={{ ...FilterMotionStyle, overflow: 'hidden' }}
+            >
+                <div className="full-menu-container" style={{ justifyContent: 'center', alignItems: 'center' }}>
+                    <div className="success-page">
+                        <div className="success-body">
+                            <div
+                                className="error-icon"
+                                aria-hidden="true"
+                            ></div>
+                            <h1 className="success-title">
+                                <span>링크결제_분리승인</span>
+                                <br />
+                                <span>처리에 실패했습니다</span>
+                                
+                            </h1>
+                            <div className="success-result">
+                                <p className="result-text align-left position_label">
+                                    <span>결과 :</span>
+                                    <span>{errorMessage || '다시 시도해 주세요'}</span>
+                                </p>
+                            </div>
+                        </div>
+                        <div className="apply-row">
+                            <button
+                                className="btn-50 btn-blue flex-1"
+                                onClick={onClickToClose}
+                            >확인</button>
+                        </div>
+                    </div>
+                </div>
+            </motion.div>
+        </>
+    );
+};

src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx

@@ -0,0 +1,297 @@
+import { useEffect, useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import {
+    useSetOnBack,
+    useSetHeaderTitle,
+    useSetHeaderType,
+    useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+import { ExtendedPeriodBottomSheet } from '@/entities/additional-service/ui/link-payment/bottom-sheet/extended-period-bottom-sheet';
+import { LinkBreakBottomSheet } from '@/entities/additional-service/ui/link-payment/bottom-sheet/link-break-bottom-sheet';
+import { LinkPaymentApplySuccessPage } from './link-payment-separate-approval-success-page';
+import { LinkPaymentApplyFailPage } from './link-payment-separate-approval-fail';
+
+interface SeparateApprovalItem {
+    tid: string;
+    merchantId: string;
+    amount: number;
+    status: string;
+    validityPeriod: string;
+    approvalCount: number;
+}
+
+export const LinkPaymentSeparateApprovalPage = () => {
+    const { navigate } = useNavigate();
+
+    const [selectedItems, setSelectedItems] = useState<string[]>([]);
+    const [extendedPeriodBottomSheetOn, setExtendedPeriodBottomSheetOn] = useState<boolean>(false);
+    const [linkBreakBottomSheetOn, setLinkBreakBottomSheetOn] = useState<boolean>(false);
+    const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
+    const [failPageOn, setFailPageOn] = useState<boolean>(false);
+    const [resultMessage, setResultMessage] = useState<string>('');
+    const [errorMessage, setErrorMessage] = useState<string>('');
+
+    const [mainItem] = useState<SeparateApprovalItem>({
+        tid: 'NLPDAR2025101315330',
+        merchantId: '100,000',
+        amount: 100000,
+        status: '활성화',
+        validityPeriod: '2025/10/13',
+        approvalCount: 0
+    });
+
+    const [additionalItems] = useState<SeparateApprovalItem[]>([
+        {
+            tid: '',
+            merchantId: '(NNN,NNN)',
+            amount: 0,
+            status: '(결제상태)',
+            validityPeriod: 'YYYY/MM/DD',
+            approvalCount: 0
+        }
+    ]);
+
+    useSetHeaderTitle('분리승인 상세');
+    useSetHeaderType(HeaderType.RightClose);
+    useSetOnBack(() => {
+        navigate(PATHS.additionalService.linkPayment.shippingHistory);
+    });
+    useSetFooterMode(false);
+
+    const handleCheckboxChange = (tid: string) => {
+        setSelectedItems(prev => {
+            if (prev.includes(tid)) {
+                return prev.filter(id => id !== tid);
+            } else {
+                return [...prev, tid];
+            }
+        });
+    };
+
+    const handleMainCheckboxChange = () => {
+        const mainTid = mainItem.tid;
+        setSelectedItems(prev => {
+            if (prev.includes(mainTid)) {
+                return prev.filter(id => id !== mainTid);
+            } else {
+                return [...prev, mainTid];
+            }
+        });
+    };
+
+    const handleAdditionalCheckboxChange = (index: number) => {
+        const itemTid = `additional-${index}`;
+        handleCheckboxChange(itemTid);
+    };
+
+    const onClickToValidityPeriod = () => {
+        // 기간연장 바텀시트 열기
+        setExtendedPeriodBottomSheetOn(true);
+    };
+
+    const onClickToSendLink = () => {
+        // 링크중단 바텀시트 열기
+        setLinkBreakBottomSheetOn(true);
+    };
+
+    const handleExtendPeriod = () => {
+        // 바텀시트 닫기
+        setExtendedPeriodBottomSheetOn(false);
+
+        // 기간연장 API 호출 로직
+        console.log('기간연장 실행', selectedItems);
+        // TODO: 실제 API 호출
+        const apiCallSuccess = true; // 임시로 성공으로 설정
+
+        if (apiCallSuccess) {
+            setResultMessage('기간이 성공적으로 연장되었습니다');
+            setSuccessPageOn(true);
+        } else {
+            setErrorMessage('기간 연장에 실패했습니다');
+            setFailPageOn(true);
+        }
+    };
+
+    const handleLinkBreak = () => {
+        // 바텀시트 닫기
+        setLinkBreakBottomSheetOn(false);
+
+        // 링크중단 API 호출 로직
+        console.log('링크중단 실행', selectedItems);
+        // TODO: 실제 API 호출
+        const apiCallSuccess = true; // 임시로 성공으로 설정
+
+        if (apiCallSuccess) {
+            setResultMessage('링크가 성공적으로 중단되었습니다');
+            setSuccessPageOn(true);
+        } else {
+            setErrorMessage('링크 중단에 실패했습니다');
+            setFailPageOn(true);
+        }
+    };
+
+    useEffect(() => {
+        // API 호출하여 데이터 로드
+        // const { mid, tid } = location.state || {};
+    }, []);
+
+    return (
+        <>
+            <main className="separate-approval-main">
+                <div className="tab-content">
+                    <div className="tab-pane sub active">
+                        <div className="separate-approval-section">
+                            <div className="approval-notice-box">
+                                <p>※ 연장 기간: 최대 7일, 총 3번 연장 가능</p>
+                                <p>※ 링크 중단: 유효기간 전, 결제를 마감하는 기능, 링크중단 시 원복 불가</p>
+                            </div>
+
+                            <div className="approval-cards-wrapper">
+                                {/* Main Item */}
+                                <div className={`approval-card ${selectedItems.includes(mainItem.tid) ? 'selected' : ''}`}>
+                                <div className="card-header">
+                                    <input
+                                    type="checkbox"
+                                    id={`checkbox-${mainItem.tid}`}
+                                    name={`checkbox-${mainItem.tid}`}
+                                    checked={selectedItems.includes(mainItem.tid)}
+                                    onChange={handleMainCheckboxChange}
+                                    className="card-checkbox"
+                                />
+                                    <span className="card-tag">[MAIN]</span>
+                                    <span className="card-tid">{mainItem.tid}</span>
+                                </div>
+                                <div className="card-body">
+                                    <ul className="info-list">
+                                        <li>
+                                            <span className="label">• 거래금액:</span>
+                                            <span className="value">{mainItem.merchantId}</span>
+                                        </li>
+                                        <li>
+                                            <span className="label">• 결제상태:</span>
+                                            <span className="value">{mainItem.status}</span>
+                                        </li>
+                                        <li>
+                                            <span className="label">• 유효기간:</span>
+                                            <span className="value">{mainItem.validityPeriod}</span>
+                                        </li>
+                                        <li>
+                                            <span className="label">• 연장횟수:</span>
+                                            <span className="value">{mainItem.approvalCount}</span>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div className="card-footer">
+                                    <div className="period-selector">
+                                        <label>연장기간</label>
+                                        <select>
+                                            <option value="">미설정</option>
+                                            <option value="1">1일</option>
+                                            <option value="2">2일</option>
+                                            <option value="3">3일</option>
+                                            <option value="4">4일</option>
+                                            <option value="5">5일</option>
+                                            <option value="6">6일</option>
+                                            <option value="7">7일</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Additional Items */}
+                            {additionalItems.map((item, index) => (
+                                <div key={index} className={`approval-card ${selectedItems.includes(`additional-${index}`) ? 'selected' : ''}`}>
+                                    <input
+                                        type="checkbox"
+                                        checked={selectedItems.includes(`additional-${index}`)}
+                                        onChange={() => handleAdditionalCheckboxChange(index)}
+                                        className="card-checkbox"
+                                    />
+                                    <div className="card-header">
+                                        <span className="card-tag">(유형)</span>
+                                        <span className="card-tig">주문번호</span>
+                                    </div>
+                                    <div className="card-body">
+                                        <ul className="info-list">
+                                            <li>
+                                                <span className="label">• 거래금액:</span>
+                                                <span className="value">{item.merchantId}</span>
+                                            </li>
+                                            <li>
+                                                <span className="label">• 결제상태:</span>
+                                                <span className="value">{item.status}</span>
+                                            </li>
+                                            <li>
+                                                <span className="label">• 유효기간:</span>
+                                                <span className="value">{item.validityPeriod}</span>
+                                            </li>
+                                            <li>
+                                                <span className="label">• 연장횟수:</span>
+                                                <span className="value">(N)</span>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div className="card-footer">
+                                        <div className="period-selector">
+                                            <label>연장기간</label>
+                                            <select>
+                                                <option value="">미설정</option>
+                                                <option value="1">1일</option>
+                                                <option value="2">2일</option>
+                                                <option value="3">3일</option>
+                                                <option value="4">4일</option>
+                                                <option value="5">5일</option>
+                                                <option value="6">6일</option>
+                                                <option value="7">7일</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                            </div>
+                        </div>
+
+                        <div className="apply-row two-button">
+                            <button
+                                className="btn-50 btn-blue flex-1"
+                                onClick={onClickToValidityPeriod}
+                            >기간연장
+                            </button>
+                            <button
+                                className="btn-50 btn-blue flex-1"
+                                onClick={onClickToSendLink}
+                            >링크중단
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </main>
+
+            <ExtendedPeriodBottomSheet
+                bottomSheetOn={extendedPeriodBottomSheetOn}
+                setBottomSheetOn={setExtendedPeriodBottomSheetOn}
+                extendPeriod={handleExtendPeriod}
+            />
+
+            <LinkBreakBottomSheet
+                bottomSheetOn={linkBreakBottomSheetOn}
+                setBottomSheetOn={setLinkBreakBottomSheetOn}
+                linkBreak={handleLinkBreak}
+            />
+
+            <LinkPaymentApplySuccessPage
+                pageOn={successPageOn}
+                setPageOn={setSuccessPageOn}
+                resultMessage={resultMessage}
+            />
+
+            <LinkPaymentApplyFailPage
+                pageOn={failPageOn}
+                setPageOn={setFailPageOn}
+                errorMessage={errorMessage}
+            />
+        </>
+    );
+};

src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-success-page.tsx

@@ -0,0 +1,66 @@
+import { motion } from 'framer-motion';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { PATHS } from "@/shared/constants/paths";
+import {
+    FilterMotionDuration,
+    FilterMotionStyle,
+    FilterMotionVariants
+} from '@/entities/common/model/constant';
+
+export interface LinkPaymentApplySuccessPageProps {
+    pageOn: boolean;
+    setPageOn: (pageOn: boolean) => void;
+    resultMessage?: string;
+}
+
+export const LinkPaymentApplySuccessPage = ({
+    pageOn,
+    setPageOn,
+    resultMessage
+}: LinkPaymentApplySuccessPageProps) => {
+    const { navigate } = useNavigate();
+
+    const onClickToClose = () => {
+        setPageOn(false);
+        navigate(PATHS.additionalService.linkPayment.shippingHistory);
+    };
+
+    return (
+        <>
+            <motion.div
+                className="full-menu-modal"
+                initial="hidden"
+                animate={(pageOn) ? 'visible' : 'hidden'}
+                variants={FilterMotionVariants}
+                transition={FilterMotionDuration}
+                style={{ ...FilterMotionStyle, overflow: 'hidden' }}
+            >
+                <div className="full-menu-container" style={{ paddingTop: '0px' }}>
+                    <div className="success-page">
+                        <div className="success-body">
+                            <div
+                                className="success-icon"
+                                aria-hidden="true"
+                            ></div>
+                            <h1 className="success-title">
+                                <span>링크결제_분리승인</span>
+                            </h1>
+                            <div className="success-result">
+                                <p className="result-text align-left position_label">
+                                    <span>결과 :</span>
+                                    <span>{resultMessage || '성공적으로 처리되었습니다'}</span>
+                                </p>
+                            </div>
+                        </div>
+                        <div className="apply-row">
+                            <button
+                                className="btn-50 btn-blue flex-1"
+                                onClick={onClickToClose}
+                            >확인</button>
+                        </div>
+                    </div>
+                </div>
+            </motion.div>
+        </>
+    );
+};

src/shared/constants/paths.ts

@@ -227,6 +227,10 @@ export const PATHS: RouteNamesType = {
       pendingDetail: generatePath(
         `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
         ROUTE_NAMES.additionalService.linkPayment.pendingDetail,
+      ),
+      separateApproval: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
+        ROUTE_NAMES.additionalService.linkPayment.separateApproval
       )
     },
     alimtalk: {

src/shared/constants/route-names.ts

@@ -101,7 +101,8 @@ export const ROUTE_NAMES = {
       requestConfirm: 'request-confirm',
       confirmSuccess: 'confirm-success',
       detail: 'detail',
-      pendingDetail: 'pending-detail'
+      pendingDetail: 'pending-detail',
+      separateApproval: 'separate-approval',
     },
     alimtalk: {
       base: '/alimtalk/*',

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

@@ -1261,7 +1261,7 @@ input[type="radio"] {
     border-radius: 50%;
     background: var(--color-CCCCCC);
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.4s ease;
 }
 
 .banner-dot.active {
@@ -5948,3 +5948,223 @@ ul.txn-amount-detail li span:last-child {
     box-sizing: border-box;
 }
 
+/* 분할승인 상세 */
+.separate-approval-main {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.separate-approval-main .tab-content {
+    height: 100%;
+}
+
+.separate-approval-main .tab-pane.sub.active {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.separate-approval-section {
+    padding: 0;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+
+.approval-cards-wrapper {
+    padding-bottom: 20px;
+}
+
+.separate-approval-main .apply-row.two-button {
+    flex-shrink: 0;
+    position: sticky;
+    bottom: 0;
+    background: white;
+    z-index: 10;
+}
+
+/* 분할승인 안내 박스 */
+.approval-notice-box {
+    background: var(--color-white);
+    padding: 8px;
+    margin-bottom: 16px;
+    border-radius: 12px;
+    flex-shrink: 0;
+}
+
+.approval-notice-box p {
+    font-size: var(--fs-15);
+    color: var(--color-666666);
+    line-height: 1.5;
+    margin: 0;
+}
+
+.approval-notice-box p + p {
+    margin-top: 4px;
+}
+
+/* 분할승인 카드 */
+.approval-card {
+    position: relative;
+    background: var(--color-white);
+    border: 2px solid var(--color-d6d6d6);
+    border-radius: 16px;
+    padding: 16px;
+    margin-bottom: 16px;
+    transition: all 0.4s ease;
+}
+
+.approval-card.selected {
+    border-color: var(--color-3E6AFC);
+    background: var(--color-F4F8FF);
+}
+
+/* 분할승인 체크박스 */
+.approval-card .card-checkbox {
+    display: block !important;
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    appearance: none;
+    border: 2px solid var(--color-d6d6d6);
+    border-radius: 5px;
+    background-color: var(--color-white);
+    cursor: pointer;
+    outline: none;
+    box-sizing: border-box;
+    z-index: 1;
+}
+
+.approval-card .card-checkbox:focus,
+.approval-card .card-checkbox:active {
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: var(--color-d6d6d6);
+}
+
+.approval-card .card-checkbox:checked {
+    background-color: var(--color-3E6AFC);
+    border-color: var(--color-3E6AFC);
+    outline: none;
+}
+
+.approval-card .card-checkbox:checked::after {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 2px;
+    width: 6px;
+    height: 11px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+/* 분할승인 카드 헤더 */
+.approval-card .card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    padding-left: 36px;
+    border-bottom: 1px solid var(--color-E5E5E5);
+}
+
+.approval-card .card-tag {
+    font-size: var(--fs-14);
+    font-weight: var(--fw-700);
+    padding: 2px 8px;
+    border-radius: 4px;
+    color: var(--color-666666);
+    background: var(--color-F3F3F3);
+    transition: all 0.4s ease;
+}
+
+.approval-card .card-tag.main-tag {
+    color: var(--color-3E6AFC);
+    background: var(--color-E9F1FB);
+}
+
+.approval-card.selected .card-tag {
+    color: var(--color-3E6AFC);
+    background: var(--color-E9F1FB);
+}
+
+.approval-card .card-tid {
+    font-size: var(--fs-16);
+    color: var(--color-2D3436);
+    font-weight: var(--fw-500);
+}
+
+/* 분할승인 카드 바디 */
+.approval-card .card-body {
+    margin-bottom: 16px;
+}
+
+.approval-card .info-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.approval-card .info-list li {
+    display: flex;
+    align-items: center;
+    font-size: var(--fs-14);
+    color: var(--color-2D3436);
+}
+
+.approval-card .info-list .label {
+    min-width: 85px;
+    color: var(--color-666666);
+    font-weight: var(--fw-400);
+}
+
+.approval-card .info-list .value {
+    color: var(--color-2D3436);
+    font-weight: var(--fw-500);
+}
+
+/* 분할승인 카드 푸터 */
+.approval-card .card-footer {
+    padding-top: 12px;
+    border-top: 1px solid var(--color-E5E5E5);
+}
+
+.approval-card .period-selector {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.approval-card .period-selector label {
+    font-size: var(--fs-14);
+    color: var(--color-666666);
+    font-weight: var(--fw-500);
+    min-width: 60px;
+}
+
+.approval-card .period-selector select {
+    flex: 1;
+    height: 36px;
+    font-size: var(--fs-14);
+    padding: 6px 30px 6px 12px;
+    border: 1px solid var(--color-d6d6d6);
+    border-radius: 4px;
+    background-color: var(--color-white);
+    transition: all 0.2s ease;
+}