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

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>
    </>
  );
};