첫 커밋

src/pages/additional-service/sms-payment-notification/sms-payment-notification-page.tsx

@@ -0,0 +1,149 @@
+import { useState } from 'react';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment-detail-resend';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const SmsPaymentNotificationPage = () => {
+  const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
+
+  useSetHeaderTitle('SMS 결제 통보');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+
+  const onClickToShowDetail = () => {
+    setBottomSmsPaymentDetailResendOn(true);
+  };
+  
+  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="transaction-list">
+              <div className="date-group">
+                <div className="date-header">25.06.08(일)</div>
+                <div 
+                  className="transaction-item approved"
+                  onClick={ () => onClickToShowDetail() }
+                >
+                  <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>nictest01m</span>
+                      <span className="separator">ㅣ</span>
+                      <span>가상계좌 요청</span>
+                    </div>
+                  </div>
+                  <div className="resend-label">재발송</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">최*길(010333*****)</div>
+                    <div className="transaction-details">
+                      <span>nictest01m</span>
+                      <span className="separator">ㅣ</span>
+                      <span>가상계좌 요청+입금</span>
+                    </div>
+                  </div>
+                  <div className="resend-label">재발송</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">박*준(010333*****)</div>
+                    <div className="transaction-details">
+                      <span>nictest01m</span>
+                      <span className="separator">ㅣ</span>
+                      <span>가상계좌 요청+입금</span>
+                    </div>
+                  </div>
+                  <div className="resend-label">재발송</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">이*신(010333*****)</div>
+                    <div className="transaction-details">
+                      <span>nictest01m</span>
+                      <span className="separator">ㅣ</span>
+                      <span>가상계좌 요청</span>
+                    </div>
+                  </div>
+                  <div className="resend-label">재발송</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">김*환(010333*****)</div>
+                      <div className="transaction-details">
+                        <span>nictest01m</span>
+                        <span className="separator">|</span>
+                        <span>가상계좌 요청</span>
+                      </div>
+                    </div>
+                    <div className="resend-label">재발송</div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </main>
+
+      <SmsPaymentDetailResend
+        bottomSmsPaymentDetailResendOn={ bottomSmsPaymentDetailResendOn }
+        setBottomSmsPaymentDetailResendOn={ setBottomSmsPaymentDetailResendOn }
+      ></SmsPaymentDetailResend>
+    </>
+  );
+};