Key-In 결제 List,결제 신청, 결제신청결과 화면 추가

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

@@ -1,18 +1,156 @@
+import { useState } from 'react';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode
+import {
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { PATHS } from '@/shared/constants/paths';
 
 export const KeyInPaymentPage = () => {
+  const { navigate } = useNavigate();
+
   useSetHeaderTitle('KEY-IN 결제');
   useSetHeaderType(HeaderType.LeftArrow);
-  useSetFooterMode(true);
+  useSetFooterMode(false);
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.additionalService.keyInPayment.request)
+  }
 
   return (
     <>
-    
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <section className="summary-section no-border">
+              <div className="credit-controls">
+                <div>
+                  <input
+                    className="credit-period"
+                    type="text"
+                    value="2025.06.01 ~ 2025.06.31"
+                    readOnly={true}
+                  />
+                  <button
+                    className="filter-btn"
+                    aria-label="필터"
+                  >
+                    <img
+                      src={IMAGE_ROOT + '/ico_setting.svg'}
+                      alt="검색옵션"
+                    />
+                  </button>
+                </div>
+                <button
+                  className="download-btn"
+                  aria-label="다운로드"
+                >
+                  <img
+                    src={IMAGE_ROOT + '/ico_download.svg'}
+                    alt="다운로드"
+                  />
+                </button>
+              </div>
+            </section>
+
+            <section className="filter-section">
+              <div className="sort-options">
+                <button className="sort-btn active">최신순</button>
+                <span className="sort-divider">|</span>
+                <button className="sort-btn">고액순</button>
+              </div>
+              <div className="excrow">
+                <div className="full-menu-keywords no-padding">
+                  <span className="keyword-tag active">전체</span>
+                  <span className="keyword-tag">승인</span>
+                  <span className="keyword-tag">전취소</span>
+                  <span className="keyword-tag">후취소</span>
+                </div>
+              </div>
+            </section>
+
+            <section className="transaction-list">
+              <div className="date-group">
+                <div className="date-header">2025.06.08(일)</div>
+
+                <div className="transaction-item approved">
+                  <div className="transaction-status">
+                    <div className="status-dot blue"></div>
+                  </div>
+                  <div className="transaction-content">
+                    <div className="transaction-title">김*환(7000)</div>
+                    <div className="transaction-details">
+                      <span>20:00ㅣ승인</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">5,254,000원</div>
+                </div>
+
+                <div className="transaction-item refund">
+                  <div className="transaction-status">
+                    <div className="status-dot gray"></div>
+                  </div>
+                  <div className="transaction-content">
+                    <div className="transaction-title">최*길(7000)</div>
+                    <div className="transaction-details">
+                      <span>08:35ㅣ승인</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">23,845,000원</div>
+                </div>
+
+                <div className="transaction-item approved">
+                  <div className="transaction-status">
+                    <div className="status-dot blue"></div>
+                  </div>
+                  <div className="transaction-content">
+                    <div className="transaction-title">김*환(7000)</div>
+                    <div className="transaction-details">
+                      <span>20:00ㅣ승인</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">5,254,000원</div>
+                </div>
+
+                <div className="transaction-item approved">
+                  <div className="transaction-status">
+                    <div className="status-dot blue"></div>
+                  </div>
+                  <div className="transaction-content">
+                    <div className="transaction-title">김*환(7000)</div>
+                    <div className="transaction-details">
+                      <span>20:00ㅣ후취소</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">5,254,000원</div>
+                </div>
+
+                <div className="transaction-item refund">
+                  <div className="transaction-status">
+                    <div className="status-dot gray"></div>
+                  </div>
+                  <div className="transaction-content">
+                    <div className="transaction-title">최*길(7000)</div>
+                    <div className="transaction-details">
+                      <span>20:00ㅣ후취소</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">23,845,000원</div>
+                </div>
+              </div>
+            </section>
+            <div className="apply-row">
+              <button
+                className="btn-50 btn-blue flex-1"
+                onClick={() => onClickToNavigation()}
+              >결제 신청</button>
+            </div>
+          </div>
+        </div>
+      </main>
     </>
   );
 };