From bd9f1115346e98939ed79fdaacbe014ac1426683 Mon Sep 17 00:00:00 2001
From: HyeonJongKim <ujiko2003@bpsoft.co.kr>
Date: Tue, 9 Sep 2025 16:50:26 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B6=80=EA=B0=80=EC=84=9C=EB=B9=84=EC=8A=A4:?=
 =?UTF-8?q?=20=EB=A7=81=ED=81=AC=EA=B2=B0=EC=A0=9C=20=EC=8B=A0=EC=B2=AD=20?=
 =?UTF-8?q?=EC=B5=9C=EC=A2=85=ED=99=95=EC=9D=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../link-payment-apply-confirm-page.tsx       | 96 +++++++------------
 1 file changed, 33 insertions(+), 63 deletions(-)

diff --git a/src/pages/additional-service/link-payment/link-payment-apply-confirm-page.tsx b/src/pages/additional-service/link-payment/link-payment-apply-confirm-page.tsx
index b78af62..e6a1d80 100644
--- a/src/pages/additional-service/link-payment/link-payment-apply-confirm-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-apply-confirm-page.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { HeaderType } from '@/entities/common/model/types';
 import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
@@ -8,12 +7,12 @@ import { IMAGE_ROOT } from "@/shared/constants/common";
 export const LinkPaymentApplyConfirmPage = () => {
     const { navigate } = useNavigate();
 
-    useSetHeaderTitle('링크결제 신청');
+    useSetHeaderTitle('메시지 미리보기');
     useSetHeaderType(HeaderType.LeftArrow);
     useSetFooterMode(false);
 
     const onClickToConfirm = () => {
-    navigate(PATHS.home);
+        navigate(PATHS.home);
     };
 
     const onClickToBack = () => {
@@ -22,70 +21,41 @@ export const LinkPaymentApplyConfirmPage = () => {
 
     return (
         <>
-            <main>
-                <div className="tab-content">
-                    <div className="tab-pane sub active">
-                        <div className="option-list">
-                            <div className="confirm-section">
-                                <div className="confirm-icon-container">
-                                    <div className="confirm-icon">
-                                        <img
-                                            src={IMAGE_ROOT + '/ico_alert.svg'}
-                                            className="alert-icon"
-                                        />
-                                    </div>
-                                </div>
-                                
-                                <h2 className="confirm-title">
-                                    발송 메시지를 최종 확인하세요
-                                </h2>
-                                
-                                <div className="confirm-details">
-                                    <div className="detail-item">
-                                        <span className="detail-label">결제 방식</span>
-                                        <span className="detail-value">링크 결제</span>
-                                    </div>
-                                    <div className="detail-item">
-                                        <span className="detail-label">결제 금액</span>
-                                        <span className="detail-value">5,254,000원</span>
-                                    </div>
-                                    <div className="detail-item">
-                                        <span className="detail-label">발송 방법</span>
-                                        <span className="detail-value">SMS</span>
-                                    </div>
-                                    <div className="detail-item">
-                                        <span className="detail-label">수신자</span>
-                                        <span className="detail-value">김*환(010-7000-****)</span>
-                                    </div>
-                                    <div className="detail-item">
-                                        <span className="detail-label">신청일</span>
-                                        <span className="detail-value">{new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\./g, '.').replace(/ /g, '')}</span>
-                                    </div>
-                                </div>
-                                
-                                <div className="confirm-notice">
-                                    <p className="notice-text">
-                                        • 결제 링크는 발송 후 24시간 동안 유효합니다.
-                                    </p>
-                                    <p className="notice-text">
-                                        • 결제 완료 후 취소/환불은 별도 문의가 필요합니다.
-                                    </p>
-                                </div>
-                            </div>
+            <main className="pop">
+                <div className="sub-wrap">
+                    <div className="preview-body">
+                        <div className="attention-icon" aria-hidden="true">
+                            <img src={IMAGE_ROOT + '/ico_alert.svg'} alt="주의" />
                         </div>
-                        
-                        <div className="apply-row two-button">
-                            <button
-                                className="btn-50 btn-darkgray flex-1"
-                                onClick={() => onClickToBack()}
-                            >이전</button>
-                            <button
-                                className="btn-50 btn-blue flex-3"
-                                onClick={() => onClickToConfirm()}
-                            >결제 신청</button>
+                        <h1 className="preview-title">발송 메시지를<br/>최종 확인하세요</h1>
+                        <div className="preview-result">
+                            <p className="preview-text">
+                                TEST  고객님, 안녕하세요?<br/>
+                                나이스페이먼츠 주식회사에서 <br/>
+                                결제하실 내역 안내드립니다.<br/>
+                                아래 URL로 접속하시면 상세 내역 확인과 결제 진행이 가능합니다.<br/><br/>
+                                !$&#123;pay_url&#125;<br/><br/>
+                                <b>
+                                    가맹점 상호 : 나이스페이먼츠 주식회사<br/>
+                                    상품명 : TEST<br/>
+                                    금액 : 123,123원
+                                </b>
+                            </p>
                         </div>
                     </div>
                 </div>
+
+                <div className="apply-row two-button">
+                    <button
+                        className="btn-50 btn-darkgray flex-1"
+                        onClick={() => onClickToBack()}
+                    >이전</button>
+                    <button
+                        className="btn-50 btn-blue flex-3"
+                        onClick={() => onClickToConfirm()}
+                    >결제 신청</button>
+                </div>
+                <div className="home-indicator"></div>
             </main>
         </>
     );