ars 상세 , 요청

2025-09-24 13:13:01 +09:00
parent 989147ab4b
commit f2337e269d
7 changed files with 220 additions and 33 deletions
--- a/src/entities/additional-service/model/ars/constant.ts
+++ b/src/entities/additional-service/model/ars/constant.ts
@@ -1,4 +1,4 @@
-import { OrderStatus, PaymentStatus } from './types';
+import { ArsPaymentMethod, OrderStatus, PaymentStatus } from './types';

 export const ArsPaymentStatusBtnGroup = [
  {name: '전체', value: PaymentStatus.ALL },
@@ -11,4 +11,8 @@ export const ArsOrderStatusBtnGroup = [
  {name: '결제성공', value: OrderStatus.SUCCESS },
  {name: '기간만료', value: OrderStatus.EXPIRED },
  {name: '취소완료', value: OrderStatus.CANCELED },
+];
+export const ArsPaymentMethodBtnGroup = [
+  {name: 'SMS', value: ArsPaymentMethod.SMS },
+  {name: 'ARS', value: ArsPaymentMethod.ARS },
 ];
--- a/src/entities/additional-service/model/ars/types.ts
+++ b/src/entities/additional-service/model/ars/types.ts
@@ -15,6 +15,10 @@ export enum OrderStatus {
  EXPIRED = 'EXPIRED',
  CANCELED = 'CANCELED',
 };
+export enum ArsPaymentMethod {
+  SMS = 'SMS',
+  ARS = 'ARS'
+};
 export interface ExtensionArsResendParams {
  mid: string;
  tid: string;
@@ -34,9 +38,9 @@ export interface ExtensionArsListParams {
 export interface ArsListContent {
  tid?: string;
  paymentDate?: string;
-  paymentStatus?: string;
+  paymentStatus?: PaymentStatus | string;
  orderStatus?: string;
-  arsPaymentMethod?: string;
+  arsPaymentMethod?: ArsPaymentMethod;
  amount?: number;
 };
 export interface ExtensionArsListResponse extends DefaulResponsePagination {
@@ -47,7 +51,7 @@ export interface ExtensionArsDownloadExcelParams {
  moid?: string;
  fromDate?: string;
  toDate?: string;
-  paymentStatus?: string;
+  paymentStatus?: PaymentStatus;
  orderStatus?: string;
  minAmount?: number;
  maxAmount?: number;
@@ -60,8 +64,8 @@ export interface ExtensionArsDetailParams {
 export interface ExtensionArsDetailResponse {
  corpName: string;
  mid: string;
-  arsPaymentMethod: string;
-  paymentStatus: string;
+  arsPaymentMethod: ArsPaymentMethod;
+  paymentStatus: PaymentStatus;
  orderStatus: string;
  paymentDate: string;
  goodsName: string;
@@ -81,6 +85,6 @@ export interface ExtensionArsApplyParams {
  buyerName: string;
  phoneNumber: string;
  email: string;
-  arsPaymentMethod: string;
+  arsPaymentMethod: ArsPaymentMethod;
 };
 export interface ExtensionArsApplyResponse {};
--- a/src/entities/additional-service/ui/ars/resend-sms-bottom-sheet.tsx
+++ b/src/entities/additional-service/ui/ars/resend-sms-bottom-sheet.tsx
@@ -0,0 +1,6 @@
+export const ArsResendSmsBottomSheet = () => {
+
+  return (
+    <></>
+  );
+};
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -174,11 +174,12 @@ export const ListItem = ({
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
-      navigate(PATHS.additionalService.payout.detail, {
+      navigate(PATHS.additionalService.ars.detail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
-          tid: tid
+          tid: tid,
+          amount: amount
        }
      });
    }
--- a/src/pages/additional-service/ars/detail-page.tsx
+++ b/src/pages/additional-service/ars/detail-page.tsx
@@ -1,6 +1,141 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+import { useLocation } from 'react-router';
+import { useEffect, useState } from 'react';
+import { NumericFormat } from 'react-number-format';
+import { useExtensionArsDetailMutation } from '@/entities/additional-service/api/ars/use-extension-ars-detail-mutation';
+import {
+  ExtensionArsDetailParams,
+  ExtensionArsDetailResponse
+} from '@/entities/additional-service/model/ars/types';
+import moment from 'moment';
+
 export const ArsDetailPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+
+  const tid = location.state.tid;
+  const mid = location.state.mid;
+  const amount = location.state.amount;
+
+  const [detail, setDetail] = useState<ExtensionArsDetailResponse>();
+
+  const { mutateAsync: extensionArsDetail } = useExtensionArsDetailMutation();
+  const callDetail = () => {
+    let params: ExtensionArsDetailParams = {
+      tid: tid,
+      mid: mid,
+    };
+
+    extensionArsDetail(params).then((rs: ExtensionArsDetailResponse) => {
+      setDetail(rs);
+    });
+  };
+
+  useSetHeaderTitle('ARS 결제 상세');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.ars.list);
+  });
+
+  useEffect(() => {
+    callDetail();
+  }, []);
+
+  const onClickToOpenResendBottomSheet = () => {
+
+  };
+
+  const getDate = (date?: string) => {
+    return (date)? moment(date.substr(0, 8)).format('YYYY.MM.DD'): '';
+  };

  return (
-    <></>
+    <>
+      <main className="full-height">
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="pay-top">
+              <div className="num-amount">
+                <span className="amount">
+                  <NumericFormat
+                    value={ amount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </span>
+              </div>
+              <div className="num-store">{ detail?.corpName }</div>
+              <div className="num-day">{ getDate(detail?.paymentDate) }</div>
+            </div>
+            <div className="detail-divider"></div>
+            <div className="pay-detail">
+              <div className="detail-title">거래 정보</div>
+              <ul className="kv-list">
+                <li className="kv-row">
+                  <span className="k">MID</span>
+                  <span className="v">{ detail?.mid }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">결제방식</span>
+                  <span className="v">{ detail?.arsPaymentMethod }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">결제상태</span>
+                  <span className="v">{ detail?.paymentStatus }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">주문상태</span>
+                  <span className="v">{ detail?.orderStatus }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">주문일시</span>
+                  <span className="v">{ getDate(detail?.paymentDate) }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">상품명</span>
+                  <span className="v">{ detail?.goodsName }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">주문번호</span>
+                  <span className="v">{ detail?.tid }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">구매자</span>
+                  <span className="v">{ detail?.buyerName }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">휴대폰번호</span>
+                  <span className="v">{ detail?.maskPhoneNumber }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">이메일</span>
+                  <span className="v">{ detail?.email }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">발송 인증번호</span>
+                  <span className="v">{ detail?.smsVerificationCode }</span>
+                </li>
+              </ul>
+            </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToOpenResendBottomSheet() }
+              >SMS 재전송</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
  );
 };
--- a/src/pages/additional-service/ars/request-page.tsx
+++ b/src/pages/additional-service/ars/request-page.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { IMAGE_ROOT } from '@/shared/constants/common';
@@ -10,12 +10,23 @@ import {
 	useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { ArsPaymentMethod, ExtensionArsApplyParams } from '@/entities/additional-service/model/ars/types';

 export const ArsRequestPage = () => {
  const { navigate } = useNavigate();

  const { mutateAsync: arsApply } = useExtensionArsApplyMutation();

+  const [mid, setMid] = useState<string>('');
+  const [moid, setMoid] = useState<string>('');
+  const [goodsName, setGoodsName] = useState<string>('');
+  const [amount, setAmount] = useState<number>(0);
+  const [instmntMonth, setInstmntMonth] = useState<string>('');
+  const [buyerName, setBuyerName] = useState<string>('');
+  const [phoneNumber, setPhoneNumber] = useState<string>('');
+  const [email, setEamil] = useState<string>('');
+  const [arsPaymentMethod, setArsPaymentMethod] = useState<ArsPaymentMethod>(ArsPaymentMethod.SMS);
+
  useSetHeaderTitle('결제 신청');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
@@ -23,17 +34,17 @@ export const ArsRequestPage = () => {
    navigate(PATHS.additionalService.ars.list);
  });

-  const callArsRequest = () => {
-    let arsApplyParams = {
-      mid: 'string',
-      moid: 'string',
-      goodsName: 'string',
-      amount: 0,
-      instmntMonth: '00',
-      buyerName: 'string',
-      phoneNumber: 'string',
-      email: 'string',
-      arsPaymentMethod: 'SMS',
+  const callArsApply = () => {
+    let arsApplyParams: ExtensionArsApplyParams = {
+      mid: mid,
+      moid: moid,
+      goodsName: goodsName,
+      amount: amount,
+      instmntMonth: instmntMonth,
+      buyerName: buyerName,
+      phoneNumber: phoneNumber,
+      email: email,
+      arsPaymentMethod: arsPaymentMethod,
    };
    arsApply(arsApplyParams).then((rs) => {
      navigate(PATHS.additionalService.ars.requestSuccess);
@@ -47,9 +58,29 @@ export const ArsRequestPage = () => {
  };

  const onClickToRequest = () => {
-    callArsRequest();
+    callArsApply();
  };  

+  const getArsPaymentMethodBtns = () => {
+    let rs = [];
+    rs.push(
+      <div 
+        key="ars-payment-method-btns"
+        className="seg-buttons"
+      >
+        <button 
+          className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.SMS)? 'btn-blue': 'btn-white'}`}
+          onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.SMS) }
+        >{ ArsPaymentMethod.SMS }</button>
+        <button 
+          className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.ARS)? 'btn-blue': 'btn-white'}`}
+          onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.ARS) }
+        >{ ArsPaymentMethod.ARS }</button>
+      </div>
+    );
+    return rs;
+  };
+
  return (
    <>
      <main>
@@ -73,7 +104,8 @@ export const ArsRequestPage = () => {
                  <div className="billing-field">
                    <input 
                      type="text" 
-                      value="wadizcop0g2025062"
+                      value={ moid }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value) }
                    />
                  </div>
                </div>
@@ -83,7 +115,8 @@ export const ArsRequestPage = () => {
                  <div className="billing-field">
                    <input 
                      type="text" 
-                      value="123456" 
+                      value={ goodsName }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value) }
                    />
                  </div>
                </div>
@@ -93,7 +126,8 @@ export const ArsRequestPage = () => {
                    <div className="billing-field">
                      <input 
                        type="text" 
-                        value="1000"
+                        value={ amount }
+                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setAmount(parseInt(e.target.value)) }  
                      />
                    </div>
                  </div>
@@ -113,7 +147,8 @@ export const ArsRequestPage = () => {
                    <div className="billing-field">
                      <input
                        type="text" 
-                        value="김테스트" 
+                        value={ buyerName }
+                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
                      />
                    </div>
                  </div>
@@ -123,7 +158,8 @@ export const ArsRequestPage = () => {
                    <div className="billing-field">
                      <input 
                        type="text" 
-                        value="01012345678" 
+                        value={ phoneNumber }
+                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
                      />
                    </div>
                  </div>
@@ -133,7 +169,8 @@ export const ArsRequestPage = () => {
                    <div className="billing-field">
                      <input 
                        type="text" 
-                        value="NICE@NAVER.COM"
+                        value={ email }
+                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value) }
                      />
                    </div>
                  </div>
@@ -141,10 +178,7 @@ export const ArsRequestPage = () => {
                  <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>
+                    { getArsPaymentMethodBtns() }  
                    </div>
                  </div>
              </div>
--- a/src/shared/ui/assets/css/style-fix.css
+++ b/src/shared/ui/assets/css/style-fix.css
@@ -80,4 +80,7 @@ main {
 }
 .menu-category:last-of-type{
  padding-bottom: 15px;
+}
+.billing-label{
+  width: 85px;
 }