첫 커밋

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

@@ -0,0 +1,217 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const ArsCardPaymentListPage = () => {
+  const { navigate } = useNavigate();
+
+  useSetHeaderTitle('신용카드 ARS 결제');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.additionalService.arsCardPayment.request);
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active" id="tab1">
+            <section className="summary-section">
+              <div className="credit-controls">
+                <div>
+                  <input 
+                    className="credit-period" 
+                    type="text" 
+                    value="2025.06.01 ~ 2025.06.30" 
+                    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>
+                </div>
+              </div>
+            </section>
+            
+            <section className="transaction-list">
+              <div className="date-group">
+                <div className="date-header">25.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ㅣ미결제ㅣ결제대기ㅣSMS</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 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">534,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ㅣ미결제ㅣ취소완료ㅣSMS</span>
+                      </div>
+                    </div>
+                    <div className="transaction-amount">4,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ㅣ미결제ㅣ기간만료ㅣSMS</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">948,000원</div>
+                </div>
+              </div>
+
+              <div className="date-group">
+                <div className="date-header">25.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">신용카드(카카오머니, 카카오)</div>
+                        <div className="transaction-details">
+                            <span>승인ㅣ20:00ㅣcroquis01m</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">3,583,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">신용카드(현대카드., 토스)</div>
+                    <div className="transaction-details">
+                      <span>환불ㅣ20:00ㅣcroquis01m</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">874,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">계좌간편결제(국민은행, PAYU)</div>
+                    <div className="transaction-details">
+                      <span>승인ㅣ20:00ㅣcroquis01m</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">23,562,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">휴대폰</div>
+                    <div className="transaction-details">
+                      <span>환불ㅣ20:00ㅣcroquis01m</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">783,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">SSG 은행계좌(농협중앙회)</div>
+                    <div className="transaction-details">
+                      <span>승인ㅣ20:00ㅣcroquis01m</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">3,923,000원</div>
+                </div>
+              </div>
+            </section>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToNavigation() }
+              >결제 신청</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

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

@@ -0,0 +1,163 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/use-extension-ars-apply-mutation';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const ArsCardPaymentRequestPage = () => {
+  const { navigate } = useNavigate();
+
+  const { mutateAsync: arsApply } = useExtensionArsApplyMutation();
+
+  useSetHeaderTitle('결제 신청');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.arsCardPayment.list);
+  });
+
+  const callArsCardPaymentRequest = () => {
+    let arsApplyParams = {
+      mid: 'string',
+      moid: 'string',
+      goodsName: 'string',
+      amount: 0,
+      instmntMonth: '00',
+      buyerName: 'string',
+      phoneNumber: 'string',
+      email: 'string',
+      arsPaymentMethod: 'SMS',
+    };
+    arsApply(arsApplyParams).then((rs) => {
+      navigate(PATHS.additionalService.arsCardPayment.requestSuccess);
+      console.log(rs)
+    }).catch(() => {
+
+    }).finally(() => {
+      
+    });
+
+  };
+
+  const onClickToRequest = () => {
+    callArsCardPaymentRequest();
+  };  
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="option-list">
+              <div className="billing-form gap-16">
+                <div className="billing-row">
+                  <div className="billing-label">가맹점 <span>*</span></div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value="nictest001m" 
+                      readOnly={ true } 
+                    />
+                  </div>
+                </div>
+
+                <div className="billing-row">
+                  <div className="billing-label">주문번호 <span>*</span></div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value="wadizcop0g2025062"
+                    />
+                  </div>
+                </div>
+
+                <div className="billing-row">
+                  <div className="billing-label">상품명 <span>*</span></div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value="123456" 
+                    />
+                  </div>
+                </div>
+
+                  <div className="billing-row">
+                    <div className="billing-label">금액 <span>*</span></div>
+                    <div className="billing-field">
+                      <input 
+                        type="text" 
+                        value="1000"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="billing-row">
+                    <div className="billing-label">할부기간 <span>*</span></div>
+                    <div className="billing-field">
+                      <select disabled>
+                        <option selected>일시불</option>
+                        <option>일시불</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div className="billing-row">
+                    <div className="billing-label">구매자명 <span>*</span></div>
+                    <div className="billing-field">
+                      <input
+                        type="text" 
+                        value="김테스트" 
+                      />
+                    </div>
+                  </div>
+
+                  <div className="billing-row">
+                    <div className="billing-label">휴대폰 번호 <span>*</span></div>
+                    <div className="billing-field">
+                      <input 
+                        type="text" 
+                        value="01012345678" 
+                      />
+                    </div>
+                  </div>
+
+                  <div className="billing-row">
+                    <div className="billing-label">이메일</div>
+                    <div className="billing-field">
+                      <input 
+                        type="text" 
+                        value="NICE@NAVER.COM"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="billing-row">
+                    <div className="billing-label">결제 방식 <span>*</span></div>
+                    <div className="billing-field">
+                      <div className="seg-buttons">
+                        <button className="btn-36 btn-blue light">SMS</button>
+                        <button className="btn-36 btn-white light">호전환</button>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToRequest() }
+              >결제 신청</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/additional-service/ars-card-payment/request-success-page.tsx

@@ -0,0 +1,43 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  useSetHeaderType,
+  useSetFooterMode,
+} from '@/widgets/sub-layout/use-sub-layout';
+export const ArsCardPaymentRequestSuccessPage = () => {
+  const { navigate } = useNavigate();
+
+  useSetHeaderType(HeaderType.NoHeader);
+  useSetFooterMode(false);
+
+  const onClickToNavigate = () => {
+    navigate(PATHS.additionalService.arsCardPayment.list);
+  };
+
+  return (
+    <>
+      <div className="success-page" >
+        <div className="success-body">
+          <div 
+            className="success-icon"
+            aria-hidden="true"
+          ></div>
+          <h1 className="success-title">
+            <span>신용카드 ARS</span><br/>
+            <span>결제 신청이 완료되었습니다.</span>
+          </h1>
+          <div className="success-result">
+            <p className="result-text">결과 : [0000] ARS 요청 처리 완료</p>
+          </div>
+        </div>
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigate() }
+          >확인</button>
+        </div>
+      </div>
+    </>
+  );
+};