Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

public/images/ico_del_minus.svg

@@ -0,0 +1,11 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="6" fill="#F5F5F5"/>
+<g clip-path="url(#clip0_2269_6765)">
+<rect x="9" y="17" width="18" height="2" rx="1" fill="#999999"/>
+</g>
+<defs>
+<clipPath id="clip0_2269_6765">
+<rect x="8" y="8" width="20" height="20" rx="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/images/ico_menu_plus_no.svg

@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2269_6819)">
+<rect x="1" y="9" width="18" height="2" rx="1" fill="#999999"/>
+<rect x="11" y="1" width="18" height="2" rx="1" transform="rotate(90 11 1)" fill="#999999"/>
+</g>
+<defs>
+<clipPath id="clip0_2269_6819">
+<rect width="20" height="20" rx="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/images/icon_ing11.svg

@@ -0,0 +1,13 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="80" height="80" rx="40" fill="#F4F8FF"/>
+<path d="M62.9999 26V21.8988C62.9999 19.7455 61.2543 18 59.1011 18H54.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.9999 26V21.8988C16.9999 19.7455 18.7454 18 20.8987 18H24.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M62.9999 54V58.1012C62.9999 60.2545 61.2543 62 59.1011 62H54.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.9999 54V58.1012C16.9999 60.2545 18.7454 62 20.8987 62H24.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="22.9999" y="23" width="34" height="34" rx="4.36364" fill="#86CBFF"/>
+<path d="M35.1083 45.9883C36.8146 47.6106 40.7305 49.2609 45.1779 45.9883" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="31.4999" y="33.5" width="1" height="2.5" rx="0.5" stroke="white"/>
+<rect x="48.4999" y="33.5" width="1" height="3" rx="0.5" stroke="white"/>
+<path d="M40.2273 34.5762V40.7018C40.2273 41.6249 39.8098 42.3507 38.3182 42.5164" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="21.4544" y1="40.0009" x2="58.5453" y2="40.0009" stroke="#F05D92" stroke-width="2.18182" stroke-linecap="round"/>
+</svg>

src/entities/common/model/types.ts

@@ -1,3 +1,7 @@
+export enum SuccessResult {
+  SUCCESS = 'SUCCESS',
+  FAIL = 'FAIL'
+};
 export interface DefaultRequestPagination {
   cursor: string;
   size: number;

src/entities/transaction/api/use-billing-charge-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL } from '@/shared/api/urls';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  BillingChargeParams,
+  BillingChargeResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const billingCharge = (params: BillingChargeParams) => {
+  return resultify(
+    axios.post<BillingChargeResponse>(API_URL.billingDetail(), params),
+  );
+};
+
+export const useBillingChargeMutation = (options?: UseMutationOptions<BillingChargeResponse, CBDCAxiosError, BillingChargeParams>) => {
+  const mutation = useMutation<BillingChargeResponse, CBDCAxiosError, BillingChargeParams>({
+    ...options,
+    mutationFn: (params: BillingChargeParams) => billingCharge(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-billing-detail-mutation.ts

@@ -4,7 +4,7 @@ import { resultify } from '@/shared/lib/resultify';
 import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   BillingDetailParams,
-  DetailResponse
+  BillingDetailResponse
 } from '../model/types';
 import { 
   useMutation,
@@ -13,12 +13,12 @@ import {
 
 export const billingDetail = (params: BillingDetailParams) => {
   return resultify(
-    axios.post<DetailResponse>(API_URL.billingDetail(), params),
+    axios.post<BillingDetailResponse>(API_URL.billingDetail(), params),
   );
 };
 
-export const useBillingDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, BillingDetailParams>) => {
+export const useBillingDetailMutation = (options?: UseMutationOptions<BillingDetailResponse, CBDCAxiosError, BillingDetailParams>) => {
-  const mutation = useMutation<DetailResponse, CBDCAxiosError, BillingDetailParams>({
+  const mutation = useMutation<BillingDetailResponse, CBDCAxiosError, BillingDetailParams>({
     ...options,
     mutationFn: (params: BillingDetailParams) => billingDetail(params),
   });

src/entities/transaction/api/use-cash-receipt-manual-issue.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL } from '@/shared/api/urls';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  CashReceiptManualIssueParams,
+  CashReceiptManualIssueResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const cashReceiptManualIssue = (params: CashReceiptManualIssueParams) => {
+  return resultify(
+    axios.post<CashReceiptManualIssueResponse>(API_URL.cashReceiptManualIssue(), params),
+  );
+};
+
+export const useCashReceiptManualIssueMutation = (options?: UseMutationOptions<CashReceiptManualIssueResponse, CBDCAxiosError, CashReceiptManualIssueParams>) => {
+  const mutation = useMutation<CashReceiptManualIssueResponse, CBDCAxiosError, CashReceiptManualIssueParams>({
+    ...options,
+    mutationFn: (params: CashReceiptManualIssueParams) => cashReceiptManualIssue(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-cash-receipt-purpose-update.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL } from '@/shared/api/urls';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  CashReceiptPurposeUpdateParams,
+  CashReceiptPurposeUpdateResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const cashReceiptPurposeUpdate = (params: CashReceiptPurposeUpdateParams) => {
+  return resultify(
+    axios.post<CashReceiptPurposeUpdateResponse>(API_URL.cashReceiptPurposeUpdate(), params),
+  );
+};
+
+export const useCashReceiptPurposeUpdateMutation = (options?: UseMutationOptions<CashReceiptPurposeUpdateResponse, CBDCAxiosError, CashReceiptPurposeUpdateParams>) => {
+  const mutation = useMutation<CashReceiptPurposeUpdateResponse, CBDCAxiosError, CashReceiptPurposeUpdateParams>({
+    ...options,
+    mutationFn: (params: CashReceiptPurposeUpdateParams) => cashReceiptPurposeUpdate(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-escrow-mail-resend-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL } from '@/shared/api/urls';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  EscrowMailResendParams,
+  EscrowMailResendResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const escrowMailResend = (params: EscrowMailResendParams) => {
+  return resultify(
+    axios.post<EscrowMailResendResponse>(API_URL.escrowMailResend(), params),
+  );
+};
+
+export const useEscrowMailResendMutation = (options?: UseMutationOptions<EscrowMailResendResponse, CBDCAxiosError, EscrowMailResendParams>) => {
+  const mutation = useMutation<EscrowMailResendResponse, CBDCAxiosError, EscrowMailResendParams>({
+    ...options,
+    mutationFn: (params: EscrowMailResendParams) => escrowMailResend(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/model/types.ts

@@ -1,4 +1,4 @@
-import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
+import { DefaulResponsePagination, DefaultRequestPagination, SuccessResult } from '@/entities/common/model/types';
 
 export enum CancelTabKeys {
   All = 'All',
@@ -33,11 +33,16 @@ export enum ProcessStep {
   One = 'One',
   Two = 'Two',
 };
+export enum CashReceiptPurpose {
+  ALL = 'ALL',
+  INCOME_DEDUCTION = 'INCOME_DEDUCTION',
+  EXPENSE_PROOF = 'EXPENSE_PROOF',
+};
 export interface SortOptionsBoxProps {
   sortBy: SortByKeys;
   onCliCkToSort: (sortBy: SortByKeys) => void;
 };
-export interface ListItemProps extends ListItem{
+export interface ListItemProps extends AllTransactionListItem, CashReceiptListItem, EscrowListItem, BillingListItem {
   transactionCategory?: TransactionCategory;
 };
 export interface ListDateGroupProps {
@@ -61,10 +66,8 @@ export interface BillingListProps {
   transactionCategory: TransactionCategory;
   listItems: Record<string, Array<ListItemProps>>
 };
-export interface ListItem {
+export interface AllTransactionListItem {
   tid?: string;
-  issueNumber?: number;
-  billKey?: string;
   mid?: string;
   stateDate?: string;
   stateCode?: string;
@@ -75,11 +78,35 @@ export interface ListItem {
   serviceDetailName?: string;
   goodsAmount?: number;
 };
+export interface CashReceiptListItem {
+  id?: number;
+  amount?: number;
+  customerName?: string;
+  issueNumber?: number;
+  issueStatus?: string;
+  paymentMethod?: string;
+  processResult?: string;
+  transactionDateTime?: string;
+};
+export interface EscrowListItem {
+  id?: number;
+  mid?: string;
+  transactionDateTime?: string;
+  customerName?: string;
+  issueNumber?: number;
+  transactionAmount?: number;
+  deliveryStatus?: string;
+  settlementStatus?: string;
+  cancelStatus?: string;
+};
+export interface BillingListItem extends BillingItem {
+
+};
 
 export interface BillingItem {
-  billKey: string;
+  billKey?: string;
-  tid: string;
+  tid?: string;
-  orderNumber: string;
+  orderNumber?: string;
   approvalNumber?: string;
   approvalDate?: string;
   transactionDateTime?: string;
@@ -142,28 +169,28 @@ export interface CashReceiptListParams {
 };
 
 export interface EscrowListParams {
-  mid: string;
+  mid?: string;
-  searchType: string;
+  searchType?: string;
-  searchKeyword: string;
+  searchKeyword?: string;
-  startDate: string;
+  startDate?: string;
-  endDate: string;
+  endDate?: string;
-  deliveryStatus: string;
+  deliveryStatus?: string;
-  settlementStatus: string;
+  settlementStatus?: string;
-  minAmount: number;
+  minAmount?: number;
-  maxAmount: number;
+  maxAmount?: number;
-  pagination: DefaultRequestPagination;
+  pagination?: DefaultRequestPagination;
 };
 
 export interface BillingListParams {
-  mid: string;
+  mid?: string;
-  searchType: string;
+  searchType?: string;
-  searchKeyword: string;
+  searchKeyword?: string;
-  startDate: string;
+  startDate?: string;
-  endDate: string;
+  endDate?: string;
-  requestStatus: string;
+  requestStatus?: string;
-  processResult: string;
+  processResult?: string;
-  paymentMethod: string;
+  paymentMethod?: string;
-  pagination: DefaultRequestPagination
+  pagination?: DefaultRequestPagination
 };
 
 export interface AllTransactionDetailParams {
@@ -279,7 +306,7 @@ export interface IssueInfo {
   approvalNumber?: number;
   issueNumber?: number;
   issueDateTime?: string;
-  purpose?: string;
+  purpose?: CashReceiptPurpose;
   paymentMethod?: string;
   productName?: string;
   transmissionStatus?: string;
@@ -309,18 +336,7 @@ export interface EscrowInfo {
   deliveryAddress: string;
 };
 
-export interface DetailResponse {
+export interface BillingInfo {
-  amountInfo?: AmountInfo;
-  importantInfo?: ImportantInfo;
-  paymentInfo?: PaymentInfo;
-  transactionInfo?: TransactionInfo;
-  settlementInfo?: SettlementInfo;
-  partCancelInfo?: PartCancelInfo;
-  issueInfo?: IssueInfo;
-  detailInfo?: DetailInfo;
-  escrowInfo?: EscrowInfo;
-};
-export interface BillingDetailResponse {
   billKey: string;
   tid: string;
   orderNumber: string;
@@ -333,11 +349,28 @@ export interface BillingDetailResponse {
   buyerName: string;
 }
 
+export interface DetailResponse {
+  amountInfo?: AmountInfo;
+  importantInfo?: ImportantInfo;
+  paymentInfo?: PaymentInfo;
+  transactionInfo?: TransactionInfo;
+  settlementInfo?: SettlementInfo;
+  partCancelInfo?: PartCancelInfo;
+  issueInfo?: IssueInfo;
+  detailInfo?: DetailInfo;
+  escrowInfo?: EscrowInfo;
+  billingInfo?: BillingInfo;
+};
+export interface BillingDetailResponse extends BillingInfo {
+
+}
+
 export interface DetailInfoProps extends DetailResponse {
-  transactionCategory: TransactionCategory;
+  transactionCategory?: TransactionCategory;
   show?: boolean;
   tid?: string;
-  issueNumber?: number;
+  serviceCode?: string;
+  purpose?: CashReceiptPurpose;
   onClickToShowInfo?: (info: InfoWrapKeys) => void;
 }
 export interface DetailArrowProps {
@@ -387,4 +420,53 @@ export interface AllTransactionCancelInfoResponse {
 export interface FilterProps {
   filterOn: boolean;
   setFilterOn: (filterOn: boolean) => void;
-}
+};
+
+export interface CashReceiptPurposeUpdateParams {
+  issueNumber: number;
+  newPurpose: string;
+};
+export interface CashReceiptPurposeUpdateResponse {
+  issueNumber: number;
+  beforePurposeType: CashReceiptPurpose;
+  afterPurposeType: CashReceiptPurpose;
+  updateDateTime: string;
+};
+export interface CashReceiptManualIssueParams {
+  businessNumber: string,
+  purpose: CashReceiptPurpose
+  productName: string,
+  buyerName: string,
+  issueNumber: string,
+  email: string,
+  phoneNumber: string,
+  supplyAmount: number,
+  vatAmount: number,
+  taxFreeAmount: number,
+  serviceCharge: number
+};
+export interface CashReceiptManualIssueResponse {
+  approvalNumber: number,
+  totalAmount: number,
+  issueDateTime: string,
+  issueResult: SuccessResult
+};
+export interface BillingChargeParams {
+  billKey: string;
+  productName: string;
+  productAmount: number | string;
+  orderNumber: string;
+  buyerName: string;
+  paymentRequestDate: string;
+  installmentMonth: string;
+};
+export interface BillingChargeResponse {
+
+};
+export interface EscrowMailResendParams {
+  orderNumber?: string;
+  tid?: string;
+};
+export interface EscrowMailResendResponse {
+
+};

src/entities/transaction/ui/billing-list.tsx

@@ -25,7 +25,7 @@ export const BillingList = ({
   };
 
   const onClickToNavigate = () => {
-    navigate(PATHS.transaction.billing.paymentRequest);
+    navigate(PATHS.transaction.billing.charge);
   };
   
   return (

src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx

@@ -1,8 +1,42 @@
+import { ChangeEvent } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
+import { CashReceiptPurpose } from '../model/types';
 
-export const CashReceiptHandWrittenIssuanceStep1 = () => {
+export interface CashReceiptHandWrittenIssuanceStep1Props {
+  businessNumber?: string;
+  purpose?: CashReceiptPurpose;
+  productName?: string;
+  buyerName?: string;
+  issueNumber?: string;
+  email?: string;
+  phoneNumber?: string;
+  setBusinessNumber: (businessNumber: string) => void;
+  setPurpose: (purpose: CashReceiptPurpose) => void;
+  setProductName: (productName: string) => void;
+  setBuyerName: (buyerName: string) => void;
+  setIssueNumber: (issueNumber: string) => void;
+  setEmail: (email: string) => void;
+  setPhoneNumber: (phoneNumber: string) => void;
+};
+
+export const CashReceiptHandWrittenIssuanceStep1 = ({
+  businessNumber,
+  purpose,
+  productName,
+  buyerName,
+  issueNumber,
+  email,
+  phoneNumber,
+  setBusinessNumber,
+  setPurpose,
+  setProductName,
+  setBuyerName,
+  setIssueNumber,
+  setEmail,
+  setPhoneNumber
+}: CashReceiptHandWrittenIssuanceStep1Props) => {
   const { navigate } = useNavigate();
   
   useSetOnBack(() => {
@@ -18,7 +52,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
             <input 
               className="error"
               type="text"
-              value="123456789"
+              value={ businessNumber }
               disabled={ true }
             />
           </div>
@@ -29,12 +63,14 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
           <div className="issue-field">
             <div className="seg-buttons">
               <button
-                className="btn-40 btn-blue"
+                className={ `btn-40 ${(purpose === CashReceiptPurpose.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` }
                 type="button"
+                onClick={ () => setPurpose(CashReceiptPurpose.INCOME_DEDUCTION) }
               >소득공제</button>
               <button
-                className="btn-40 btn-white"
+                className={ `btn-40 ${(purpose === CashReceiptPurpose.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` }
                 type="button"
+                onClick={ () => setPurpose(CashReceiptPurpose.EXPENSE_PROOF) }
               >지출증빙</button>
             </div>
           </div>
@@ -45,6 +81,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
             <input 
               type="text" 
               placeholder="상품명"
+              value={ productName }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
             />
           </div>
         </div>
@@ -54,6 +92,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
             <input 
               type="text" 
               placeholder="구매자명"
+              value={ buyerName }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
             />
           </div>
         </div>
@@ -63,6 +103,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
             <input 
               type="text" 
               placeholder="사업자번호 OR 휴대폰번호"
+              value={ issueNumber }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setIssueNumber(e.target.value) }
             />
           </div>
         </div>
@@ -72,6 +114,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
             <input
               type="email"
               placeholder="TEST123@nicepay.com"
+              value={ email }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value) }
             />
           </div>
         </div>
@@ -81,6 +125,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = () => {
             <input
               type="tel"
               placeholder="01012345678"
+              value={ phoneNumber }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
             />
           </div>
         </div>

src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx

@@ -1,15 +1,37 @@
+import { ChangeEvent } from 'react';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { ProcessStep } from '../model/types';
 
 export interface CashReceiptHandWrittenIssuanceStep2Props {
-  setProcessStep: ((processStep: ProcessStep) => void);
+  setProcessStep: (processStep: ProcessStep) => void;
+  supplyAmount: number | string;
+  vatAmount: number | string;
+  taxFreeAmount: number | string;
+  serviceCharge: number | string;
+  setSupplyAmount: (supplyAmount: number | string) => void;
+  setVatAmount: (vatAmount: number | string) => void;
+  setTaxFreeAmount: (taxFreeAmount: number | string) => void;
+  setServiceCharge: (serviceCharge: number | string) => void;
 };
 export const CashReceiptHandWrittenIssuanceStep2 = ({
-  setProcessStep
+  setProcessStep,
+  supplyAmount,
+  vatAmount,
+  taxFreeAmount,
+  serviceCharge,
+  setSupplyAmount,
+  setVatAmount,
+  setTaxFreeAmount,
+  setServiceCharge
 }: CashReceiptHandWrittenIssuanceStep2Props) => {
   useSetOnBack(() => {
     setProcessStep(ProcessStep.One);
   });
+
+  const onClickToVatCalculate = () => {
+
+  };
+
   return (
     <>
       <h2 className="issue-title">발행 금액 입력</h2>
@@ -27,6 +49,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
               <button
                 className="btn-40 btn-white"
                 type="button"
+                onClick={ () => onClickToVatCalculate() }
               >VAT자동계산</button>
             </div>
           </div>
@@ -39,6 +62,8 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
               className="error"
               type="text"
               placeholder=""
+              value={ supplyAmount }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setSupplyAmount(e.target.value) }
             />
           </div>
         </div>
@@ -49,26 +74,32 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
               className="error"
               type="text"
               placeholder=""
+              value={ vatAmount }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setVatAmount(e.target.value) }
             />
           </div>
         </div>
         <div className="issue-row">
-          <div className="issue-label">발행번호</div>
+          <div className="issue-label">면세금액</div>
           <div className="issue-field">
             <input
               className="error"
               type="text"
               placeholder=""
+              value={ taxFreeAmount }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setTaxFreeAmount(e.target.value) }
             />
           </div>
         </div>
         <div className="issue-row">
-          <div className="issue-label">이메일 주소</div>
+          <div className="issue-label">봉사료</div>
           <div className="issue-field">
             <input
-              type="email"
               className="error"
+              type="text"
               placeholder=""
+              value={ serviceCharge }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setServiceCharge(e.target.value) }
             />
           </div>
         </div>

src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx

@@ -1,11 +1,42 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
 
-export const BottomSheetChangesCashReceitUses = () => {
+export interface CashReceitPurposeUpdateBottomSheetProps {
+  setBottomSheetOn: (bottomSheetOn: boolean) => void;
+  bottomSheetOn: boolean;
+  callPurposeUpdate: () => void;
+};
+
+export const CashReceitPurposeUpdateBottomSheet = ({
+  setBottomSheetOn,
+  bottomSheetOn,
+  callPurposeUpdate
+}: CashReceitPurposeUpdateBottomSheetProps) => {
+  
+  const onClickToClose = () => {
+    setBottomSheetOn(false);
+  };
+  const onCliickToPurposeUpdate = () => {
+    callPurposeUpdate();
+  };
+  
+  const variants = {
+    hidden: { y: '100%' },
+    visible: { y: '0%' },
+  };
 
   return (
     <>
+      { (bottomSheetOn) &&
         <div className="bg-dim"></div>
-      <div className="bottomsheet">
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (bottomSheetOn)? 'visible': 'hidden' }
+        variants={ variants }
+        transition={{ duration: 0.5 }}
+      >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
             <h2>신청 방법을 선택하세요</h2>
@@ -16,6 +47,7 @@ export const BottomSheetChangesCashReceitUses = () => {
               <img 
                 src={ IMAGE_ROOT + '/ico_close.svg' }
                 alt="닫기"
+                onClick={ () => onClickToClose() }
               />
             </button>
           </div>
@@ -35,9 +67,10 @@ export const BottomSheetChangesCashReceitUses = () => {
           <button
             className="btn-50 btn-blue flex-1"
             type="button"
+            onClick={ () => onCliickToPurposeUpdate() }
           >신청</button>
         </div>
-      </div>
+      </motion.div>
     </>
   );
 };

src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx

@@ -1,11 +1,42 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
 
-export const BottomSheetEmail = () => {
+export interface EscrowMailResendBottomSheetProps {
+  setBottomSheetOn: (bottomSheetOn: boolean) => void;
+  bottomSheetOn: boolean;
+  callMailResend: () => void;
+};
+
+export const EscrowMailResendBottomSheet = ({
+  setBottomSheetOn,
+  bottomSheetOn,
+  callMailResend
+}: EscrowMailResendBottomSheetProps) => {
+
+  const onClickToClose = () => {
+    setBottomSheetOn(false);
+  };
+  const onClickToMailResend = () => {
+    callMailResend();
+  };
+
+  const variants = {
+    hidden: { y: '100%' },
+    visible: { y: '0%' },
+  };
 
   return (
     <>
+      { (bottomSheetOn) &&
         <div className="bg-dim"></div>
-      <div className="bottomsheet">
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (bottomSheetOn)? 'visible': 'hidden' }
+        variants={ variants }
+        transition={{ duration: 0.5 }}
+      >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
             <h2>이메일 주소를 선택하세요</h2>
@@ -16,6 +47,7 @@ export const BottomSheetEmail = () => {
               <img
                 src={ IMAGE_ROOT + '/ico_close.svg' }
                 alt="닫기"
+                onClick={ () => onClickToClose() }
               />
             </button>
           </div>
@@ -27,7 +59,7 @@ export const BottomSheetEmail = () => {
               <div className="mail-icon">
                 <div className="mail-icon-bg"></div>
                 <img
-                  src="../images/ico_email.svg"
+                  src={ IMAGE_ROOT +'/ico_email.svg' }
                   alt="메일"
                 />
               </div>
@@ -54,10 +86,10 @@ export const BottomSheetEmail = () => {
           <button
             className="btn-50 btn-blue flex-1"
             type="button"
-            disabled
+            onClick={ () => onClickToMailResend() }
           >신청</button>
         </div>
-      </div>
+      </motion.div>
     </>
   );
 };

src/entities/transaction/ui/info-wrap/amount-info-wrap.tsx

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
 import { DetailArrow } from '../detail-arrow';
@@ -9,9 +10,93 @@ export const AmountInfoWrap = ({
   amountInfo,
   show,
   tid,
+  serviceCode,
   onClickToShowInfo
 }: DetailInfoProps) => {
   const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
+
+  const subItems: Record<string, Record<string, string>> = {
+    mid: {name: 'MID', type: 'string'}, 
+    amount: {name: '거래금액', type: 'number'},
+    cardAmount: {name: '신용카드금액', type: 'number'},
+    pointAmount: {name: '포인트금액', type: 'number'},
+    couponAmount: {name: '쿠폰금액', type: 'number'},
+    kakaoMoney: {name: '카카오머니', type: 'number'},
+    kakaoPoint: {name: '카카오포인트', type: 'number'},
+    kakaoInstantDiscount: {name: '카카오 즉시할인', type: 'number'},
+    naverPoint: {name: '네이버 포인트', type: 'number'},
+    tossMoney: {name: '토스머니', type: 'number'}, 
+    tossDiscount: {name: '토스할인', type: 'number'},
+    paycoPoint: {name: '페이코 포인트', type: 'number'},
+    paycoCoupon: {name: '페이코 쿠폰', type: 'number'},
+    escrowFee: {name: '에스크로수수료', type: 'number'}
+  };
+  
+  const showTop = ['01', '02', '03', '26'];
+  const showSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['mid', 'cardAmount', 'pointAmount', 
+      'couponAmount', 'escrowFee', 'kakaoMoney',
+      'kakaoPoint', 'kakaoInstantDiscount', 'naverPoint',
+      'tossMoney', 'tossDiscount', 'paycoPoint', 'paycoCoupon'
+    ],
+    // 계좌이체
+    '02': ['amount', 'mid', 'escrowFee'],
+    // 가상계좌
+    '03': ['amount', 'mid'],
+    // 휴대폰
+    '04': ['amount', 'mid'],
+    // 계좌간편결제
+    '26': ['amount', 'mid', 'escrowFee'],
+    // SSG머니
+    '21': ['amount', 'mid'],
+    // SSG은행계좌
+    '24': ['amount', 'mid'],
+    // 문화상품권
+    '14': ['amount', 'mid'],
+    // 티머니페이
+    '31': ['amount', 'mid'],
+  };
+  
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newAmountInfo: Record<string, any> | undefined = amountInfo;
+  const subLi = () => {
+    let rs = [];
+    if(!!newAmountInfo && !!serviceCode && !!showSubItems[serviceCode]){
+      for(let i=0;i<showSubItems[serviceCode].length;i++){
+        let k = showSubItems[serviceCode][i];
+        if(!!k){
+          rs.push(
+            <li 
+              key={`key-amount-item-${i}`}
+              className="amount-item"
+            >
+              <span className="label">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
+              <span className="value">
+              { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'string') &&
+                newAmountInfo[k] 
+              }
+              { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newAmountInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              }
+              { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newAmountInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  }
+  
   const variants = {
     hidden: { height: 0, padding: 0, margin: 0, display: 'none' },
     visible: { height: 'auto', padding: '16px', margin: '10px 0', display: 'block' },
@@ -62,46 +147,7 @@ export const AmountInfoWrap = ({
           transition={{ duration: 0.3 }}
         >
           <ul className="amount-list">
-            <li className="amount-item">
+            { subLi() }
-              <span className="label">·&nbsp;&nbsp;신용카드</span>
-              <span className="value">
-                <NumericFormat
-                  value={ amountInfo?.cardAmount } 
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat>
-              </span>
-            </li>
-            <li className="amount-item">
-              <span className="label">·&nbsp;&nbsp;포인트</span>
-              <span className="value">
-                <NumericFormat
-                  value={ amountInfo?.pointAmount } 
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat>
-              </span>
-            </li>
-            <li className="amount-item">
-              <span className="label">·&nbsp;&nbsp;쿠폰</span>
-              <span className="value minus">
-                <NumericFormat
-                  value={ amountInfo?.couponAmount } 
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat>
-              </span>
-            </li>
-            <li className="amount-item">
-              <span className="label">·&nbsp;&nbsp;에스크로</span>
-              <span className="value">
-                <NumericFormat
-                  value={ amountInfo?.escrowFee } 
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat>
-              </span>
-            </li>
           </ul>
         </motion.div>
         

src/entities/transaction/ui/info-wrap/billing-info-wrap.tsx

@@ -0,0 +1,80 @@
+import moment from 'moment';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const BillingInfoWrap = ({
+  billingInfo,
+}: DetailInfoProps) => {
+
+  const getInstallmentMonth = () => {
+    let rs = [];
+    if((!!billingInfo?.installmentMonth && parseInt(billingInfo?.installmentMonth) > 1)){
+      rs.push(
+        <li 
+          key={ `key-installmentMonth`}
+          className="kv-row"
+        >
+          <span className="k">할부개월</span>
+          <span className="v">{ billingInfo?.installmentMonth }개월 할부</span>
+        </li> 
+      );
+    }
+    else{
+      rs.push(
+        <li 
+          key={ `key-installmentMonth`}
+          className="kv-row"
+        >
+          <span className="k">할부개월</span>
+          <span className="v">일시불</span>
+        </li> 
+      );
+    }
+    return rs;
+  };
+  return (
+    <>
+      <div className="txn-section">
+        <div className="section-title">중요 정보</div>
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">빌키</span>
+            <span className="v">{ billingInfo?.billKey }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">TID</span>
+            <span className="v">{ billingInfo?.tid }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">주분번호</span>
+            <span className="v">{ billingInfo?.orderNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">승인번호</span>
+            <span className="v">{ billingInfo?.approvalNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">승인일자</span>
+            <span className="v">{ moment(billingInfo?.approvalDate).format('YYYY.MM.DD') }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">요청상태</span>
+            <span className="v">{ billingInfo?.requestStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">처리결과</span>
+            <span className="v">{ billingInfo?.processResult }</span>
+          </li>
+          { getInstallmentMonth() }
+          <li className="kv-row">
+            <span className="k">상품명</span>
+            <span className="v">{ billingInfo?.productName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">구매자</span>
+            <span className="v">{ billingInfo?.buyerName }</span>
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+};

src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx

@@ -1,5 +1,4 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 
@@ -9,10 +8,6 @@ export const DetailInfoWrap = ({
   show,
   onClickToShowInfo
 }: DetailInfoProps) => {
-  const variants = {
-    hidden: { height: 0, padding: 0, display: 'none' },
-    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
-  };
   
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
@@ -27,17 +22,46 @@ export const DetailInfoWrap = ({
           className="section-title with-toggle"
           onClick={ () => onClickToSetShowInfo() }
         >
-          정산 정보 <DetailArrow show={ show }></DetailArrow>
+          상세 정보 <DetailArrow show={ show }></DetailArrow>
         </div>
-        <motion.ul 
+        <ul className="kv-list">
-          className="kv-list"
+          <li className="kv-row">
-          initial="hidden"
+            <span className="k">취소일자</span>
-          animate={ (show)? 'visible': 'hidden' }
+            <span className="v">{ moment(detailInfo?.cancelDate).format('YYYY.MM.DD') }</span>
-          variants={ variants }
+          </li>
-          transition={{ duration: 0.3 }}
+          <li className="kv-row">
-        >
+            <span className="k">취소승인번호</span>
-        
+            <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
-        </motion.ul>
+          </li>
+          <li className="kv-row">
+            <span className="k">현금영수증</span>
+            <span className="v">{ detailInfo?.receiptInfo }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">TID</span>
+            <span className="v">{ detailInfo?.tid }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">거래ID</span>
+            <span className="v">{ detailInfo?.merchantTid }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">서브몰명</span>
+            <span className="v">{ detailInfo?.subMallName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">서브몰 사업자 번호</span>
+            <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">발행경로</span>
+            <span className="v">{ detailInfo?.issueChannel }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">실패사유</span>
+            <span className="v">{ detailInfo?.failureReason }</span>
+          </li>
+        </ul>
       </div>
     </>
   )

src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx

@@ -10,8 +10,8 @@ export const EscrowInfoWrap = ({
   onClickToShowInfo
 }: DetailInfoProps) => {
   const variants = {
-    hidden: { height: 0, padding: 0, display: 'none' },
+    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+    visible: { height: 'auto', display: 'block' },
   };
 
   const onClickToSetShowInfo = () => {
@@ -36,7 +36,46 @@ export const EscrowInfoWrap = ({
           variants={ variants }
           transition={{ duration: 0.3 }}
         >
-        
+          <li className="kv-row">
+            <span className="k">배송상태</span>
+            <span className="v">{ escrowInfo?.deliveryStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">배송등록</span>
+            <span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">배송완료</span>
+            <span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">구매확인</span>
+            <span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">구매거절</span>
+            <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">거절사유</span>
+            <span className="v">{ escrowInfo?.rejectReason }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">에스크로인증번호</span>
+            <span className="v">{ escrowInfo?.escrowCertNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">택배사</span>
+            <span className="v">{ escrowInfo?.deliveryCompany }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">운송장번호</span>
+            <span className="v">{ escrowInfo?.trackingNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">배송주소</span>
+            <span className="v">{ escrowInfo?.deliveryAddress }</span>
+          </li>
         </motion.ul>
       </div>
     </>

src/entities/transaction/ui/info-wrap/important-info-wrap.tsx

@@ -1,56 +1,138 @@
 import moment from 'moment';
-import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { NumericFormat } from 'react-number-format';
+import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
 
 export const ImportantInfoWrap = ({
   transactionCategory,
   importantInfo,
-  show,
+  serviceCode
-  onClickToShowInfo
   }: DetailInfoProps) => {
   
-   const onClickToSetShowInfo = () => {
+  const subItems: Record<string, Record<string, string>> = {
-    if(!!onClickToShowInfo){
+    ordNo: {name: '주문번호', type: 'string'},
-      onClickToShowInfo(InfoWrapKeys.Important);
+    tid: {name: 'TID', type: 'string'},
-    }
+    tradeStatus: {name: '거래상태', type: 'string'},
+    tradeMethod: {name: '거래수단', type: 'string'},
+    approvalDate: {name: '승인일', type: 'date'},
+    tradeDate: {name: '거래일', type: 'date'},
+    requestDate: {name: '요청일', type: 'date'},
+    cancelDate: {name: '취소일', type: 'date'},
+    productName: {name: '상품명', type: 'string'}
   };
   
+  const showSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'approvalDate', 'cancelDate', 'productName'],
+    // 계좌이체
+    '02': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
+      'tradeDate', 'cancelDate', 'productName'],
+    // 가상계좌
+    '03': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'requestDate', 'cancelDate', 'productName'],
+    // 휴대폰
+    '04': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+    // 계좌간편결제
+    '26': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+    // SSG머니
+    '21': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+    // SSG은행계좌
+    '24': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+    // 문화상품권
+    '14': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+    // 티머니페이
+    '31': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+  };
+  
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newImportantInfo: Record<string, any> | undefined = importantInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newImportantInfo && !!serviceCode && !!showSubItems[serviceCode]){
+      for(let i=0;i<showSubItems[serviceCode].length;i++){
+        let k = showSubItems[serviceCode][i];
+        if(!!k){
+          rs.push(
+            <li 
+              key={`key-important-item-${i}`}
+              className="kv-row"
+            >
+              <span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
+              <span className="v">
+              { (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'string') &&
+                newImportantInfo[k] 
+              }
+              { (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newImportantInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newImportantInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
+
   return (
     <>
       <div className="txn-section">
         <div className="section-title">중요 정보</div>
         <ul className="kv-list">
+          { (transactionCategory === TransactionCategory.AllTransaction) && 
+            subLi()
+          }
+          { (transactionCategory === TransactionCategory.Escrow) && 
+            <>
               <li className="kv-row">
                 <span className="k">주문번호</span>
-            <span className="v">{ importantInfo?.ordNo }</span>
+                <span className="v">{ importantInfo?.orderNumber }</span>
               </li>
               <li className="kv-row">
                 <span className="k">TID</span>
                 <span className="v">{ importantInfo?.tid }</span>
               </li>
               <li className="kv-row">
-            <span className="k">결제상태</span>
+                <span className="k">거래상태</span>
-            <span className="v">{ importantInfo?.tradeStatus }</span>
+                <span className="v">{ importantInfo?.transactionStatus }</span>
               </li>
               <li className="kv-row">
                 <span className="k">결제수단</span>
-            <span className="v">{ importantInfo?.tradeMethod }</span>
+                <span className="v">{ importantInfo?.paymentMethod }</span>
               </li>
               <li className="kv-row">
                 <span className="k">승인일</span>
-            <span className="v">{ moment(importantInfo?.approvalDate).format('YYYY.MM.DD') }</span>
+                <span className="v">{ moment(importantInfo?.approvalDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
               </li>
-          {
-            /*
               <li className="kv-row">
                 <span className="k">취소일</span>
-            <span className="v">2025.06.08</span>
+                <span className="v">{ importantInfo?.cancelDate }</span>
               </li>
-            */
-          }
               <li className="kv-row">
                 <span className="k">상품명</span>
                 <span className="v">{ importantInfo?.productName }</span>
               </li>
+            </>
+          }
+          
         </ul>
       </div>
     </>

src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx

@@ -1,43 +1,51 @@
-import moment from 'moment';
-import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import moment from 'moment';
 
 export const IssueInfoWrap = ({
   transactionCategory,
   issueInfo,
-  show,
+  purpose,
-  onClickToShowInfo
 }: DetailInfoProps) => {
-  const variants = {
-    hidden: { height: 0, padding: 0, display: 'none' },
-    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
-  };
-
-  const onClickToSetShowInfo = () => {
-    if(!!onClickToShowInfo){
-      onClickToShowInfo(InfoWrapKeys.Issue);
-    }
-  };
  
   return (
     <>
       <div className="txn-section">
-        <div 
+        <div className="section-title">발급 정보</div>
-          className="section-title with-toggle"
+        <ul className="kv-list">
-          onClick={ () => onClickToSetShowInfo() }
+          <li className="kv-row">
-        >
+            <span className="k">승인번호</span>
-          정산 정보 <DetailArrow show={ show }></DetailArrow>
+            <span className="v">{ issueInfo?.approvalNumber }</span>
-        </div>
+          </li>
-        <motion.ul 
+          <li className="kv-row">
-          className="kv-list"
+            <span className="k">발행번호</span>
-          initial="hidden"
+            <span className="v">{ issueInfo?.issueNumber }</span>
-          animate={ (show)? 'visible': 'hidden' }
+          </li>
-          variants={ variants }
+          <li className="kv-row">
-          transition={{ duration: 0.3 }}
+            <span className="k">발행일시</span>
-        >
+            <span className="v">{ moment(issueInfo?.issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
-        
+          </li>
-        </motion.ul>
+          <li className="kv-row">
+            <span className="k">용도</span>
+            <span className="v">{ purpose }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">결제수단</span>
+            <span className="v">{ issueInfo?.paymentMethod }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">상품명</span>
+            <span className="v">{ issueInfo?.productName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">진행상태</span>
+            <span className="v">{ issueInfo?.transmissionStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">거래구분</span>
+            <span className="v">{ issueInfo?.transactionType }</span>
+          </li>
+        </ul>
       </div>
     </>
   )

src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
 import { DetailArrow } from '../detail-arrow';
@@ -6,13 +7,93 @@ import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 export const PartCancelInfoWrap = ({
   transactionCategory,
   partCancelInfo,
+  serviceCode,
   show,
   onClickToShowInfo
 }: DetailInfoProps) => {
   
+  const subItems: Record<string, Record<string, string>> = {
+    originalTid: {name: '원거래 TID', type: 'string'},
+    originalAmount: {name: '원거래 금액', type: 'number'},
+    partCancelTid: {name: (serviceCode === '05')? '재승인 TID': '부분취소 TID', type: 'string'},
+    partCancelAmount: {name: '부분취소 금액', type: 'number'},
+    remainingAmount: {name: (serviceCode === '05')? '재승인 금액': '부분취소 후 잔액', type: 'number'},
+  };
+  console.log(serviceCode)
+  const showSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 계좌이체
+    '02': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 가상계좌
+    '03': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 휴대폰
+    '04': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 계좌간편결제
+    '26': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // SSG머니
+    '21': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // SSG은행계좌
+    '24': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 문화상품권
+    '14': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 티머니페이
+    '31': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+  };
+
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newPartCancelInfo: Record<string, any> | undefined = partCancelInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newPartCancelInfo && !!serviceCode && !!showSubItems[serviceCode]){
+      for(let i=0;i<showSubItems[serviceCode].length;i++){
+        let k = showSubItems[serviceCode][i];
+        if(!!k){
+          rs.push(
+            <li 
+              key={`key-important-item-${i}`}
+              className="kv-row"
+            >
+              <span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
+              <span className="v">
+              { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'string') &&
+                newPartCancelInfo[k] 
+              }
+              { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newPartCancelInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newPartCancelInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
   const variants = {
-    hidden: { height: 0, padding: 0, display: 'none' },
+    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+    visible: { height: 'auto', display: 'block' },
   };
 
   const onClickToSetShowInfo = () => {
@@ -37,40 +118,7 @@ export const PartCancelInfoWrap = ({
           variants={ variants }
           transition={{ duration: 0.3 }}
         >
-          <li className="kv-row">
+        { subLi() }
-            <span className="k">원거래 TID</span>
-            <span className="v">{ partCancelInfo?.originalTid }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">원거래 금액</span>
-            <span className="v">
-              <NumericFormat
-                value={ partCancelInfo?.originalAmount } 
-                thousandSeparator
-                displayType="text"
-                suffix={ '원' }
-              ></NumericFormat>
-            </span>
-          </li>
-          <li className="kv-row">
-            <span className="k">부분취소 TID</span>
-            <span className="v">nictest00m01012506171629294150</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">부분취소 금액</span>
-            <span className="v">50,000원</span>
-          </li>
-          <li className="kv-row nopadding">
-            <span className="k">부분취소 후 잔액</span>
-            <span className="v">
-              <NumericFormat
-                value={ partCancelInfo?.remainingAmount } 
-                thousandSeparator
-                displayType="text"
-                suffix={ '원' }
-              ></NumericFormat>
-            </span>
-          </li>
         </motion.ul>
       </div>
     </>

src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx

@@ -1,16 +1,122 @@
+import moment from 'moment';
 import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
-import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
+import { NumericFormat } from 'react-number-format';
 
 export const PaymentInfoWrap = ({
   transactionCategory,
   paymentInfo,
+  serviceCode,
   show,
   onClickToShowInfo
 }: DetailInfoProps) => {
+
+  const subItems: Record<string, Record<string, string>> = {
+    approvalAcquire: {name: '승인매입', type: 'string'},
+    approvalReturn: {name: '승인반송(횟수)', type: 'number'},
+    approvalReAcquire: {name: '승인재매입(횟수)', type: 'number'},
+    approvalVAN: {name: '승인VAN', type: 'string'},
+    cancelAcquire: {name: '취소매입', type: 'string'},
+    cancelReturn: {name: '취소반송', type: 'string'},
+    cancelReAcquire: {name: '취소재매입', type: 'string'},
+    acquireVAN: {name: '매입VAN', type: 'string'},
+    acquireCompany: {name: '매입사(발급사)', type: 'string'},
+    cardNumber: {name: '카드번호', type: 'string'},
+    approvalNumber: {name: '승인번호', type: 'string'},
+    installmentPeriod: {name: '할부기간', type: 'number'},
+    authentication: {name: '인증', type: 'string'},
+    accountType: {name: '유형', type: 'string'},
+    bankName: {name: '은행명', type: 'string'},
+    accountNumber: {name: '계좌번호', type: 'string'},
+    depositBankName: {name: '입금금융기관명', type: 'string'},
+    depositorName: {name: '입금자명', type: 'string'},
+    depositDeadline: {name: '입금기한', type: 'date'},
+    depositDate: {name: '입금일', type: 'date'},
+    refundScheduleDate: {name: '환불예정일', type: 'date'},
+    refundBankName: {name: '환불은행명', type: 'string'},
+    refundAccountNumber: {name: '환불계좌번호', type: 'string'},
+    accountHolder: {name: '예금주', type: 'string'},
+    refundCompleteDate: {name: '환불완료일', type: 'date'},
+    partner: {name: '제휴사', type: 'string'},
+    cpid: {name: 'CPID', type: 'string'},
+    productCategory: {name: '상품구분', type: 'string'},
+    phoneNumber: {name: '휴대폰번호', type: 'string'},
+    customerId: {name: '고객ID', type: 'string'},
+    giftCardNumber: {name: '상품권번호', type: 'string'},
+    culturelandId: {name: '컬처랜드ID', type: 'string'},
+  };
+
+  const showSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['approvalAcquire', 'approvalReturn', 'approvalReAcquire', 
+      'approvalVAN', 'cancelAcquire', 'cancelReturn', 'cancelReAcquire',
+      'acquireVAN', 'acquireCompany', 'cardNumber', 'approvalNumber',
+      'installmentPeriod', 'authentication'],
+    // 계좌이체
+    '02': ['accountType', 'bankName', 'accountNumber'],
+    // 가상계좌
+    '03': ['bankName', 'accountNumber', 'depositBankName', 'depositorName',
+      'depositDeadline', 'depositDate', 'refundScheduleDate',
+      'refundBankName', 'refundAccountNumber', 'accountHolder'],
+    // 휴대폰
+    '04': ['refundCompleteDate', 'partner', 'cpid', 'productCategory', 'phoneNumber'],
+    // 계좌간편결제
+    '26': ['bankName', 'refundCompleteDate', 'accountHolder', 'accountType', 'customerId'],
+    // SSG머니
+    '21': ['giftCardNumber'],
+    // SSG은행계좌
+    '24': [],
+    // 문화상품권
+    '14': ['culturelandId'],
+    // 티머니페이
+    '31': ['cardNumber', 'approvalNumber', 'cpid'],
+  };
+
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newPaymentInfo: Record<string, any> | undefined = paymentInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newPaymentInfo && !!serviceCode && !!showSubItems[serviceCode]){
+      for(let i=0;i<showSubItems[serviceCode].length;i++){
+        let k = showSubItems[serviceCode][i];
+        if(!!k){
+          rs.push(
+            <li 
+              key={`key-important-item-${i}`}
+              className="kv-row"
+            >
+              <span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
+              <span className="v">
+              { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
+                newPaymentInfo[k] 
+              }
+              { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newPaymentInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newPaymentInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
   const variants = {
-    hidden: { height: 0, padding: 0, display: 'none' },
+    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+    visible: { height: 'auto', display: 'block' },
   };
 
   const onClickToSetShowInfo = () => {
@@ -35,14 +141,28 @@ export const PaymentInfoWrap = ({
           variants={ variants }
           transition={{ duration: 0.3 }}
         >
+          { (transactionCategory === TransactionCategory.AllTransaction) && 
+            subLi()
+          }
+          { (transactionCategory === TransactionCategory.Escrow) && 
+            <>
               <li className="kv-row">
                 <span className="k">승인 금액</span>
-            <span className="v">10,000,000원</span>
+                <span className="v">
+                  <NumericFormat
+                    value={ paymentInfo?.paymentAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </span>
               </li>
               <li className="kv-row">
-            <span className="k">부가세</span>
+                <span className="k">승인 번호</span>
-            <span className="v">0원</span>
+                <span className="v">{ paymentInfo?.approvalNumber }</span>
               </li>
+            </>
+          }
         </motion.ul>
       </div>
     </>

src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { NumericFormat } from 'react-number-format';
 import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
@@ -6,12 +7,92 @@ import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 export const SettlementInfoWrap = ({
   transactionCategory,
   settlementInfo,
+  serviceCode,
   show,
   onClickToShowInfo
 }: DetailInfoProps) => {
+  
+  const subItems: Record<string, Record<string, string>> = {
+    approvalSettleDate: {name: '승인정산일', type: 'date'},
+    approvalSettleAmount: {name: '승인정산금액', type: 'number'},
+    cancelSettleDate: {name: '취소정산일', type: 'date'},
+    cancelSettleAmount: {name: '취소정산금액', type: 'number'},
+  };
+
+  const showSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 계좌이체
+    '02': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 가상계좌
+    '03': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 휴대폰
+    '04': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 계좌간편결제
+    '26': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // SSG머니
+    '21': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // SSG은행계좌
+    '24': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 문화상품권
+    '14': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 티머니페이
+    '31': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+  };
+
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newSettlementInfo: Record<string, any> | undefined = settlementInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newSettlementInfo && !!serviceCode && !!showSubItems[serviceCode]){
+      for(let i=0;i<showSubItems[serviceCode].length;i++){
+        let k = showSubItems[serviceCode][i];
+        if(!!k){
+          rs.push(
+            <li 
+              key={`key-important-item-${i}`}
+              className="kv-row"
+            >
+              <span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
+              <span className="v">
+              { (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'string') &&
+                newSettlementInfo[k] 
+              }
+              { (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newSettlementInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newSettlementInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
   const variants = {
-    hidden: { height: 0, padding: 0, display: 'none' },
+    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+    visible: { height: 'auto', display: 'block' },
   };
 
   const onClickToSetShowInfo = () => {
@@ -36,14 +117,7 @@ export const SettlementInfoWrap = ({
           variants={ variants }
           transition={{ duration: 0.3 }}
         >
-          <li className="kv-row">
+          { subLi() }
-            <span className="k">정산 예정일</span>
-            <span className="v">{ moment(settlementInfo?.approvalSettleDate).format('YYYY.MM.DD') }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">정산 상태</span>
-            <span className="v">예정</span>
-          </li>
         </motion.ul>
       </div>
     </>

src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx

@@ -1,16 +1,102 @@
+import moment from 'moment';
 import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
-import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
+import { NumericFormat } from 'react-number-format';
 
 export const TransactionInfoWrap = ({
   transactionCategory,
   transactionInfo,
+  serviceCode,
   show,
   onClickToShowInfo
 }: DetailInfoProps) => {
+
+  const subItems: Record<string, Record<string, string>> = {
+    buyerName: {name: '구매자명', type: 'string'},
+    email: {name: '이메일', type: 'string'},
+    phoneNumber: {name: '전화번호', type: 'string'},
+    cancelReason: {name: '취소사유', type: 'string'},
+    cancelRequestor: {name: '취소요청자', type: 'string'},
+    partialCancel: {name: '부분취소', type: 'string'},
+    cashReceiptIssue: {name: '현금영수증발행', type: 'string'},
+  };
+
+  const showSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor', 'partialCancel'],
+    // 계좌이체
+    '02': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
+    // 가상계좌
+    '03': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
+    // 휴대폰
+    '04': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor'],
+    // 계좌간편결제
+    '26': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
+    // SSG머니
+    '21': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor'],
+    // SSG은행계좌
+    '24': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor'],
+    // 문화상품권
+    '14': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor'],
+    // 티머니페이
+    '31': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor'],
+  };
+
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newTransactionInfo: Record<string, any> | undefined = transactionInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newTransactionInfo && !!serviceCode && !!showSubItems[serviceCode]){
+      for(let i=0;i<showSubItems[serviceCode].length;i++){
+        let k = showSubItems[serviceCode][i];
+        if(!!k){
+          rs.push(
+            <li 
+              key={`key-important-item-${i}`}
+              className="kv-row"
+            >
+              <span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
+              <span className="v">
+              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'string') &&
+                newTransactionInfo[k] 
+              }
+              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newTransactionInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newTransactionInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
+
   const variants = {
-    hidden: { height: 0, padding: 0, display: 'none' },
+    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+    visible: { height: 'auto', display: 'block' },
   };
 
   const onClickToSetShowInfo = () => {
@@ -35,6 +121,11 @@ export const TransactionInfoWrap = ({
           variants={ variants }
           transition={{ duration: 0.3 }}
         >
+          { (transactionCategory === TransactionCategory.AllTransaction) && 
+            subLi()
+          }
+          { (transactionCategory === TransactionCategory.Escrow) && 
+            <>
               <li className="kv-row">
                 <span className="k">가맹점명</span>
                 <span className="v">NICE PAY</span>
@@ -43,6 +134,9 @@ export const TransactionInfoWrap = ({
                 <span className="k">사업자번호</span>
                 <span className="v">123-45-67890</span>
               </li>
+            </>
+          }
+          
         </motion.ul>
       </div>
     </>

src/entities/transaction/ui/list-date-group.tsx

@@ -24,8 +24,6 @@ export const ListDateGroup = ({
             transactionCategory={ transactionCategory }
             key={ key }
             tid={ items[i]?.tid }
-            issueNumber={ items[i]?.issueNumber }
-            billKey={ items[i]?.billKey }
             mid={ items[i]?.mid }
             stateDate={ items[i]?.stateDate }
             stateCode={ items[i]?.stateCode }
@@ -35,6 +33,23 @@ export const ListDateGroup = ({
             serviceName={ items[i]?.serviceName }
             serviceDetailName={ items[i]?.serviceDetailName }
             goodsAmount={ items[i]?.goodsAmount }
+
+            id={ items[i]?.id }
+            amount={ items[i]?.amount }
+            customerName={ items[i]?.customerName }
+            issueNumber={ items[i]?.issueNumber }
+            issueStatus={ items[i]?.issueStatus }
+            paymentMethod={ items[i]?.paymentMethod }
+            processResult={ items[i]?.processResult }
+            transactionDateTime={ items[i]?.transactionDateTime }
+
+            transactionAmount={ items[i]?.transactionAmount }
+            deliveryStatus={ items[i]?.deliveryStatus }
+            settlementStatus={ items[i]?.settlementStatus }
+            cancelStatus={ items[i]?.cancelStatus }
+
+            billKey={ items[i]?.billKey }
+            orderNumber={ items[i]?.orderNumber }
           ></ListItem>
         )
       }  

src/entities/transaction/ui/list-item.tsx

@@ -2,21 +2,18 @@ import { NumericFormat } from 'react-number-format';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps, TransactionCategory } from '../model/types';
+import moment from 'moment';
 
 export const ListItem = ({
   transactionCategory,
-  tid,
+  tid, mid, stateDate, stateCode, stateName,
-  issueNumber,
+  installmentMonth, serviceCode, serviceName,
-  billKey,
+  serviceDetailName, goodsAmount,
-  mid,
+  id, amount, customerName, issueNumber,
-  stateDate,
+  issueStatus, paymentMethod, processResult, 
-  stateCode,
+  transactionDateTime, transactionAmount,
-  stateName,
+  deliveryStatus, settlementStatus, 
-  installmentMonth,
+  cancelStatus, billKey, orderNumber
-  serviceCode,
-  serviceName,
-  serviceDetailName,
-  goodsAmount
 }: ListItemProps) => {
   const { navigate } = useNavigate();
   const getItemClass = () => {
@@ -51,7 +48,8 @@ export const ListItem = ({
     if(transactionCategory === TransactionCategory.AllTransaction){
       navigate(PATHS.transaction.allTransaction.detail, {
         state: {
-          tid: tid
+          tid: tid,
+          serviceCode: serviceCode
         }
       });
     }
@@ -82,9 +80,85 @@ export const ListItem = ({
   };
   
   const getTime = () => {
+    let timeStr = '';
+    if(transactionCategory === TransactionCategory.AllTransaction){
       let time = stateDate?.substring(8, 12);
-    let timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
+      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
-    return timeStr;
+    }
+    else{
+      timeStr = moment(transactionDateTime).format('HH:mm');
+    }
+    return timeStr
+  };
+
+  const getTitle = () => {
+    let str = '';
+    if(transactionCategory === TransactionCategory.AllTransaction){
+      str = `${serviceName}(${serviceDetailName})`;
+    }
+    else if(transactionCategory === TransactionCategory.CashReceipt){
+      str = `${customerName}(${issueNumber})`
+    }
+    else if(transactionCategory === TransactionCategory.Escrow){
+      str = `${customerName}(${issueNumber})`
+    }
+    else if(transactionCategory === TransactionCategory.Billing){
+      str = `${billKey}`
+    }
+    return str;
+  };
+
+  const getDetail = () => {
+    let rs = [];
+    if(transactionCategory === TransactionCategory.AllTransaction){
+      rs.push(
+        <>
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ stateName }</span>
+          <span className="separator">|</span>
+          <span>{ mid }</span>
+        </>
+      );
+    }
+    else if(transactionCategory === TransactionCategory.CashReceipt){
+      rs.push(
+        <>
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ issueStatus }</span>
+          <span className="separator">|</span>
+          <span>{ paymentMethod }</span>
+          <span className="separator">|</span>
+          <span>{ processResult }</span>
+        </>
+      );
+    }
+    else if(transactionCategory === TransactionCategory.Escrow){
+      rs.push(
+        <>
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ deliveryStatus }</span>
+          <span className="separator">|</span>
+          <span>{ settlementStatus }</span>
+          <span className="separator">|</span>
+          <span>{ cancelStatus }</span>
+        </>
+      );
+    }
+    else if(transactionCategory === TransactionCategory.Billing){
+      rs.push(
+        <>
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ processResult }</span>
+          <span className="separator">|</span>
+          <span>{ paymentMethod }</span>
+        </>
+      );
+    }
+    return rs;
   };
 
   return (
@@ -97,13 +171,9 @@ export const ListItem = ({
           <div className={ `status-dot ${getDotClass()}`}></div>
         </div>
         <div className="transaction-content">
-          <div className="transaction-title">{ `${serviceName}(${serviceDetailName})` }</div>
+          <div className="transaction-title">{ getTitle() }</div>
           <div className="transaction-details">
-            <span>{ stateName }</span>
+            { getDetail() }
-            <span className="separator">|</span>
-            <span>{ getTime() }</span>
-            <span className="separator">|</span>
-            <span>{ mid }</span>
             { (!!installmentMonth && parseInt(installmentMonth) > 1) && 
               <>
                 <span className="separator">|</span>

src/entities/user/lib/use-user-info.ts

@@ -23,7 +23,7 @@ export const useUserInfo = () => {
 					accessTokenExpiresIn,
 					refreshTokenExpiresIn,
 					menuGrants,
-					usrid,
+					// usrid,
 					// clientAddressIP,
 					// requires2FA
 				} = result;
@@ -33,10 +33,10 @@ export const useUserInfo = () => {
 				setLocalStorage(StorageKeys.AccessTokenExpiresIn, accessTokenExpiresIn);
 				setLocalStorage(StorageKeys.RefreshTokenExpiresIn, refreshTokenExpiresIn);
 				setLocalStorage(StorageKeys.MenuGrants, menuGrants);
-				setLocalStorage(StorageKeys.Usrid, usrid);
+				// setLocalStorage(StorageKeys.Usrid, usrid);
 				// setLocalStorage(StorageKeys.ClientAddressIP, clientAddressIP);
 				// setLocalStorage(StorageKeys.Requires2FA, requires2FA);
-
+				console.log(result)
 				useStore.getState().UserStore.setUserInfo(result);
 			}
 		}

src/entities/user/model/types.ts

@@ -14,7 +14,7 @@ export interface LoginResponse {
   accessTokenExpiresIn?: number;
   refreshTokenExpiresIn?: number;
   menuGrants?: Array<MenuGrantsItem>;
-  usrid?: string;
+  // usrid?: string;
   clientAddressIP?: string;
   tempToken?: string,
   tempTokenExpiresIn?: number;

src/pages/home/home-page.tsx

@@ -56,7 +56,7 @@ export const HomePage = () => {
       let accessTokenExpiresIn = getLocalStorage(StorageKeys.AccessTokenExpiresIn);
       let refreshTokenExpiresIn = getLocalStorage(StorageKeys.RefreshTokenExpiresIn);
       let menuGrants = getLocalStorage(StorageKeys.TokenType);
-      let usrid = getLocalStorage(StorageKeys.Usrid);
+      // let usrid = getLocalStorage(StorageKeys.Usrid);
       
       useStore.getState().UserStore.setUserInfo({
         tokenType: tokenType,
@@ -65,7 +65,7 @@ export const HomePage = () => {
         accessTokenExpiresIn: accessTokenExpiresIn,
         refreshTokenExpiresIn: refreshTokenExpiresIn,
         menuGrants: menuGrants,
-        usrid: usrid
+        // usrid: usrid
       });
       setLoginSuccess(true);
     }

src/pages/transaction/all-transaction/detail-page.tsx

@@ -35,6 +35,7 @@ export const AllTransactionDetailPage = () => {
   const { navigate } = useNavigate();
   const location = useLocation();
   const tid = location.state.tid;
+  const serviceCode = location.state.serviceCode;
   
   const [amountInfo, setAmountInfo] = useState<AmountInfo>();
   const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
@@ -137,17 +138,20 @@ export const AllTransactionDetailPage = () => {
                   amountInfo={ amountInfo }
                   show={ showAmountInfo }
                   tid={ tid } 
+                  serviceCode={ serviceCode }
                   onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                 ></AmountInfoWrap>
-                <div className="txn-divider minus"></div>
+                <div className="txn-divider"></div>
                 <ImportantInfoWrap
                   transactionCategory={ TransactionCategory.AllTransaction }
                   importantInfo={ importantInfo }
+                  serviceCode={ serviceCode }
                 ></ImportantInfoWrap>
-                <div className="txn-divider minus"></div>
+                <div className="txn-divider"></div>
                 <PaymentInfoWrap
                   transactionCategory={ TransactionCategory.AllTransaction }
                   paymentInfo={ paymentInfo }
+                  serviceCode={ serviceCode }
                   show={ showPaymentInfo }
                   onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                 ></PaymentInfoWrap>
@@ -155,6 +159,7 @@ export const AllTransactionDetailPage = () => {
                 <TransactionInfoWrap
                   transactionCategory={ TransactionCategory.AllTransaction }
                   transactionInfo={ transactionInfo }
+                  serviceCode={ serviceCode }
                   show={ showTransactionInfo }
                   onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                 ></TransactionInfoWrap>
@@ -162,6 +167,7 @@ export const AllTransactionDetailPage = () => {
                 <SettlementInfoWrap
                   transactionCategory={ TransactionCategory.AllTransaction }
                   settlementInfo={ settlementInfo }
+                  serviceCode={ serviceCode }
                   show={ showSettlementInfo }
                   onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                 ></SettlementInfoWrap>
@@ -169,6 +175,7 @@ export const AllTransactionDetailPage = () => {
                 <PartCancelInfoWrap
                   transactionCategory={ TransactionCategory.AllTransaction }
                   partCancelInfo={ partCancelInfo }
+                  serviceCode={ serviceCode }
                   show={ showPartCancelInfo }
                   onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                 ></PartCancelInfoWrap>

src/pages/transaction/all-transaction/list-page.tsx

@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
-import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { AllTransactionListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
 import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
 import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -84,12 +84,12 @@ export const AllTransactionListPage = () => {
     });
   };
 
-  const assembleData = (content: Array<ListItem>) => {
+  const assembleData = (content: Array<AllTransactionListItem>) => {
     let data: any = {};
     if(content && content.length > 0){
       for(let i=0;i<content?.length;i++){
-        let stateDate = content[i]?.stateDate;
+        let stateDate = content[i]?.stateDate?.substring(0, 8);
-        let groupDate = stateDate?.substring(0, 8);
+        let groupDate = moment(stateDate).format('YYYYMMDD');
         if(!!groupDate && !data.hasOwnProperty(groupDate)){
           data[groupDate] = [];
         }
@@ -141,7 +141,10 @@ export const AllTransactionListPage = () => {
     if(!!serviceCodeOptions && serviceCodeOptions.length > 0)
     for(let i=0;i<serviceCodeOptions.length;i++){
       rs.push(
-      <option value={serviceCodeOptions[i]?.value}>{ serviceCodeOptions[i]?.text }</option>
+        <option 
+          key={`key-${i}`}
+          value={serviceCodeOptions[i]?.value}
+        >{ serviceCodeOptions[i]?.text }</option>
       )
     }
     return rs;

src/pages/transaction/billing/charge-page.tsx

@@ -1,7 +1,9 @@
+import { ChangeEvent, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
+import { useBillingChargeMutation } from '@/entities/transaction/api/use-billing-charge-mutation';
 import {
   useSetOnBack,
   useSetHeaderTitle,
@@ -9,9 +11,17 @@ import {
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 
-export const BillingPaymentRequestPage = () => {
+export const BillingChargePage = () => {
   const { navigate } = useNavigate();
 
+  const [billKey, setBillKey] = useState<string>('BIKYvattest01m');
+  const [productName, setProductName] = useState<string>('테스트상품123');
+  const [productAmount, setProductAmount] = useState<number | string>(1000000);
+  const [orderNumber, setOrderNumber] = useState<string>('P146733723');
+  const [buyerName, setBuyerName] = useState<string>('김테스트');
+  const [paymentRequestDate, setPaymentRequestDate] = useState<string>('2025-06-08');
+  const [installmentMonth, setInstallmentMonth] = useState<string>('00');
+
   useSetHeaderTitle('빌링 결제 신청');
   useSetHeaderType(HeaderType.RightClose);
   useSetOnBack(() => {
@@ -19,6 +29,52 @@ export const BillingPaymentRequestPage = () => {
   });
   useSetFooterMode(false);
 
+  const { mutateAsync: billingCharge } = useBillingChargeMutation();
+
+  const onClickToBillingCharge = () => {
+    let params = {
+      billKey: billKey,
+      productName: productName,
+      productAmount: productAmount,
+      orderNumber: orderNumber,
+      buyerName: buyerName,
+      paymentRequestDate: paymentRequestDate,
+      installmentMonth: installmentMonth
+    };
+    billingCharge(params).then((rs) => {
+      console.log(rs);
+      alert('성공')
+      navigate(PATHS.transaction.billing.list);
+    });
+  };
+
+  const makeInstallmentMonthSelect = () => {
+    let rs = [];
+    
+    rs.push(
+      <option 
+        key={ `key-installment` }
+        value=''
+      >선택</option>
+    );
+    rs.push(
+      <option 
+        key={ `key-installment-0` }
+        value='00'
+      >일시불</option>
+    );
+    for(let i=2;i<=24;i++){
+      let val = (i < 10)? '0'+i: ''+i;
+      rs.push(
+        <option 
+          key={ `key-installment-${i}`}
+          value={ val }
+        >{i}개월</option>
+      );
+    };
+    return rs;
+  };
+
   return (
     <>
       <main>
@@ -26,15 +82,14 @@ export const BillingPaymentRequestPage = () => {
           <div className="tab-pane sub active">
             <div className="option-list">
               <div className="billing-title">결제 정보 입력</div>
-
               <div className="billing-form">
                 <div className="billing-row">
                   <div className="billing-label">빌키 <span>*</span></div>
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="BIKYvattest01m" 
                       readOnly={ true }
+                      value={ billKey }
                     />
                   </div>
                 </div>
@@ -43,7 +98,8 @@ export const BillingPaymentRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="테스트상품123"
+                      value={ productName }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
                     />
                   </div>
                 </div>
@@ -52,7 +108,8 @@ export const BillingPaymentRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="1,000,000"
+                      value={ productAmount }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(e.target.value) }
                     />
                   </div>
                 </div>
@@ -61,7 +118,8 @@ export const BillingPaymentRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="P146733723"
+                      value={ orderNumber }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value) }
                     />
                   </div>
                 </div>
@@ -70,7 +128,8 @@ export const BillingPaymentRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="김테스트"
+                      value={ buyerName }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
                     />
                   </div>
                 </div>
@@ -81,8 +140,8 @@ export const BillingPaymentRequestPage = () => {
                     <div className="input-wrapper date wid-100">
                       <input
                         type="text"
-                        value="2025/03/21"
                         placeholder=""
+                        value={ paymentRequestDate }
                       />
                       <button
                         className="date-btn"
@@ -101,19 +160,21 @@ export const BillingPaymentRequestPage = () => {
                 <div className="billing-row">
                   <div className="billing-label">할부 개월</div>
                   <div className="billing-field">
-                    <select>
+                    <select
-                      <option value="">선택</option>
+                      value={ installmentMonth }
-                      <option value="0">일시불</option>
+                      onChange={ (e: ChangeEvent<HTMLSelectElement>) => setBuyerName(e.target.value) }
-                      <option value="2">2개월</option>
+                    >
-                      <option value="3">3개월</option>
+                      { makeInstallmentMonthSelect() }
-                      <option value="6">6개월</option>
                     </select>
                   </div>
                 </div>
               </div>
             </div>
             <div className="apply-row">
-              <button className="btn-50 btn-blue flex-1">결제 신청</button>
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToBillingCharge() }
+              >결제 신청</button>
             </div>
           </div>
         </div>

src/pages/transaction/billing/detail-page.tsx

@@ -1,28 +1,15 @@
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
-import { Dialog } from '@/shared/ui/dialogs/dialog';
-import { overlay } from 'overlay-kit';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useBillingDetailMutation } from '@/entities/transaction/api/use-billing-detail-mutation';
-import { AmountInfoWrap } from '@/entities/transaction/ui/info-wrap/amount-info-wrap';
+import { BillingInfoWrap } from '@/entities/transaction/ui/info-wrap/billing-info-wrap';
-import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
-import { PaymentInfoWrap } from '@/entities/transaction/ui/info-wrap/payment-info-wrap';
-import { TransactionInfoWrap } from '@/entities/transaction/ui/info-wrap/transaction-info-wrap';
-import { SettlementInfoWrap } from '@/entities/transaction/ui/info-wrap/settlement-info-wrap';
-import { PartCancelInfoWrap } from '@/entities/transaction/ui/info-wrap/part-cancel-info-wrap';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
   TransactionCategory,
   BillingDetailParams,
-  DetailResponse,
+  BillingDetailResponse,
-  AmountInfo,
+  BillingInfo
-  ImportantInfo,
-  PaymentInfo,
-  TransactionInfo,
-  SettlementInfo,
-  PartCancelInfo,
-  InfoWrapKeys
 } from '@/entities/transaction/model/types';
 import {
   useSetOnBack, 
@@ -30,22 +17,13 @@ import {
   useSetHeaderType,
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { NumericFormat } from 'react-number-format';
 
 export const BillingDetailPage = () => {
   const { navigate } = useNavigate();
   const location = useLocation();
     
-  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
+  const [billingInfo, setBillingInfo] = useState<BillingInfo>();
-  const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
-  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
-  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
-  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
-  const [partCancelInfo, setPartCancelInfo] = useState<PartCancelInfo>();
-  const [showAmount, setShowAmount] = useState<boolean>(false);
-  const [showPayment, setShowPayment] = useState<boolean>(false);
-  const [showTransaction, setShowTransaction] = useState<boolean>(false);
-  const [showSettlement, setShowSettlement] = useState<boolean>(false);
-  const [showPartCancel, setShowPartCancel] = useState<boolean>(false);
   
   useSetHeaderTitle('빌링 상세');
   useSetHeaderType(HeaderType.RightClose);
@@ -60,37 +38,14 @@ export const BillingDetailPage = () => {
     let billingDetailParams: BillingDetailParams = {
       billKey: location?.state.billKey
     };
-    billingDetail(billingDetailParams).then((rs: DetailResponse) => {
+    billingDetail(billingDetailParams).then((rs: BillingDetailResponse) => {
-      setAmountInfo(rs.amountInfo);
+      setBillingInfo(rs);
-      setImportantInfo(rs.importantInfo);
-      setPaymentInfo(rs.paymentInfo);
-      setTransactionInfo(rs.transactionInfo);
-      setSettlementInfo(rs.settlementInfo);
-      setPartCancelInfo(rs.partCancelInfo);
     });
   };
   useEffect(() => {
     callDetail();
   }, []);
   
-  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
-    if(infoWrapKey === InfoWrapKeys.Amount){
-      setShowAmount(!showAmount);
-    }
-    else if(infoWrapKey === InfoWrapKeys.Payment){
-      setShowPayment(!showPayment);
-    }
-    else if(infoWrapKey === InfoWrapKeys.Transaction){
-      setShowTransaction(!showTransaction);
-    }
-    else if(infoWrapKey === InfoWrapKeys.Settlement){
-      setShowSettlement(!showSettlement);
-    }
-    else if(infoWrapKey === InfoWrapKeys.PartCancel){
-      setShowPartCancel(!showPartCancel);
-    }
-  };
-
   return (
     <>
       <main>
@@ -98,49 +53,29 @@ export const BillingDetailPage = () => {
           <div className="tab-pane sub active">
             <div className="option-list">
               <div className="txn-detail">
-                <AmountInfoWrap
+                <div className="txn-num-group">
-                  transactionCategory={ TransactionCategory.Billing }
+                  <div className="txn-amount">
-                  amountInfo={ amountInfo }
+                    <div className="value">
-                  show={ showAmount }
+                      <NumericFormat
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                        value={ 100000000 } 
-                ></AmountInfoWrap>
+                        thousandSeparator
-                <div className="txn-divider minus"></div>
+                        displayType="text"
-                <ImportantInfoWrap
+                      ></NumericFormat>
-                  transactionCategory={ TransactionCategory.Billing }
+                      <span className="unit">원</span>
-                  importantInfo={ importantInfo }
+                    </div>
-                ></ImportantInfoWrap>
+                    <div className="txn-mid">
-                <div className="txn-divider minus"></div>
+                      <span className="value">{ 'nitnitni' }</span>
-                <PaymentInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
-                  paymentInfo={ paymentInfo }
-                  show={ showPayment }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></PaymentInfoWrap>
-                <div className="txn-divider"></div>
-                <TransactionInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
-                  transactionInfo={ transactionInfo }
-                  show={ showTransaction }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></TransactionInfoWrap>
-                <div className="txn-divider"></div>
-                <SettlementInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
-                  settlementInfo={ settlementInfo }
-                  show={ showSettlement }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></SettlementInfoWrap>
-                <div className="txn-divider"></div>
-                <PartCancelInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
-                  partCancelInfo={ partCancelInfo }
-                  show={ showPartCancel }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></PartCancelInfoWrap>
                     </div>
                   </div>
 
                 </div>
+                <div className="txn-divider"></div>
+                <BillingInfoWrap
+                  billingInfo={ billingInfo }
+                ></BillingInfoWrap>
+              </div>
+            </div>
+          </div>
         </div>
       </main>
     </>

src/pages/transaction/billing/list-page.tsx

@@ -1,10 +1,11 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
+import { useStore } from '@/shared/model/store';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { BillingList } from '@/entities/transaction/ui/billing-list';
-import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { BillingListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
 import { useBillingListMutation } from '@/entities/transaction/api/use-billing-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
@@ -27,14 +28,15 @@ const serviceCodes = [
 
 export const BillingListPage = () => {
 	const { navigate } = useNavigate();
+	const userInfo = useStore((state) => state.UserStore.UserInfo);
 
 	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
 		
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -55,7 +57,7 @@ export const BillingListPage = () => {
     let listParams = {
       mid: 'nictest001m',
       searchType: 'ALL',
-			searchKeyword: 'P14633723',
+			searchKeyword: '',
       startDate: startDate,
       endDate: endDate,
       requestStatus: 'ALL',
@@ -69,12 +71,11 @@ export const BillingListPage = () => {
     });
 	}
 
-	const assembleData = (content: Array<ListItem>) => {
+	const assembleData = (content: Array<BillingListItem>) => {
 		let data: any = {};
 		if(content && content.length > 0){
 			for(let i=0;i<content?.length;i++){
-				let stateDate = content[i]?.stateDate;
+				let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
-				let groupDate = stateDate?.substring(0, 8);
 				if(!!groupDate && !data.hasOwnProperty(groupDate)){
 					data[groupDate] = [];
 				}

src/pages/transaction/cash-receipt/detail-page.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
-import { Dialog } from '@/shared/ui/dialogs/dialog';
-import { overlay } from 'overlay-kit';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useCashReceiptDetailMutation } from '@/entities/transaction/api/use-cash-receipt-detail-mutation';
 import { IssueInfoWrap } from '@/entities/transaction/ui/info-wrap/issue-info-wrap';
@@ -14,7 +12,8 @@ import {
   DetailResponse,
   IssueInfo,
   DetailInfo,
-  InfoWrapKeys
+  InfoWrapKeys,
+  CashReceiptPurpose
 } from '@/entities/transaction/model/types';
 import {
   useSetOnBack, 
@@ -22,6 +21,8 @@ import {
   useSetHeaderType,
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { CashReceitPurposeUpdateBottomSheet } from '@/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet';
+import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update';
 
 export const CashReceiptDetailPage = () => {
   const { navigate } = useNavigate();
@@ -29,8 +30,9 @@ export const CashReceiptDetailPage = () => {
   
   const [issueInfo, setIssueInfo] = useState<IssueInfo>();
   const [detailInfo, setDetailInfo] = useState<DetailInfo>();
-  const [showIssueInfo, setShowIssueInfo] = useState<boolean>(false);
   const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
+  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+  const [purpose, setPurpose] = useState<CashReceiptPurpose>();
   
   useSetHeaderTitle('현금영수증 상세');
   useSetHeaderType(HeaderType.RightClose);
@@ -39,15 +41,35 @@ export const CashReceiptDetailPage = () => {
   });
   useSetFooterMode(false);
 
-  const { mutateAsync: escroDetail } = useCashReceiptDetailMutation();
+  const issueNumber = location?.state.issueNumber
+
+  const { mutateAsync: cashReceiptDetail } = useCashReceiptDetailMutation();
+  const { mutateAsync: cashReceiptPurposeUpdate } = useCashReceiptPurposeUpdateMutation();
+  
+  const callPurposeUpdate = () => {
+    let newPurpose = (purpose === CashReceiptPurpose.EXPENSE_PROOF)
+      ? CashReceiptPurpose.INCOME_DEDUCTION: CashReceiptPurpose.EXPENSE_PROOF;
+    let params = {
+      issueNumber: issueNumber,
+      newPurpose: newPurpose
+    };
+    cashReceiptPurposeUpdate(params).then((rs) => {
+      setPurpose(rs.afterPurposeType);
+      setBottomSheetOn(false);
+      alert('toast : 용도 변경을 성공하였습니다.')
+    });  
+  };
 
   const callDetail = () => {
     let cashReceitDetailParams: CashReceiptDetailParams = {
-      issueNumber: location?.state.issueNumber
+      issueNumber: issueNumber
     };
-    escroDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
+    cashReceiptDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
       setIssueInfo(rs.issueInfo);
       setDetailInfo(rs.detailInfo);
+      if(rs.issueInfo){
+        setPurpose(rs.issueInfo.purpose);
+      }
     });
   };
   useEffect(() => {
@@ -55,14 +77,15 @@ export const CashReceiptDetailPage = () => {
   }, []);
 
   const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
-    if(infoWrapKey === InfoWrapKeys.Issue){
+    if(infoWrapKey === InfoWrapKeys.Detail){
-      setShowIssueInfo(!showIssueInfo);
-    }
-    else if(infoWrapKey === InfoWrapKeys.Detail){
       setShowDetailInfo(!showDetailInfo);
     }
   };
 
+  const onClickToPurposeUpdate = () => {
+    setBottomSheetOn(true);
+  };
+
   return (
     <>
       <main>
@@ -73,8 +96,7 @@ export const CashReceiptDetailPage = () => {
                 <IssueInfoWrap
                   transactionCategory={ TransactionCategory.CashReceipt }
                   issueInfo={ issueInfo }
-                  show={ showIssueInfo }
+                  purpose={ purpose }
-                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                 ></IssueInfoWrap>
                 <div className="txn-divider minus"></div>
                 <DetailInfoWrap
@@ -85,9 +107,20 @@ export const CashReceiptDetailPage = () => {
                 ></DetailInfoWrap>
               </div>
             </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToPurposeUpdate() }
+              >용도 변경</button>
+            </div>
           </div>
         </div>
       </main>
+      <CashReceitPurposeUpdateBottomSheet
+        setBottomSheetOn={ setBottomSheetOn }
+        bottomSheetOn={ bottomSheetOn }
+        callPurposeUpdate={ callPurposeUpdate }
+      ></CashReceitPurposeUpdateBottomSheet>
     </>
   );
 };

src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx

@@ -3,28 +3,64 @@ import {PATHS} from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { CashReceiptHandWrittenIssuanceStep1 } from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step1';
 import { CashReceiptHandWrittenIssuanceStep2 } from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step2';
-import {ProcessStep} from '@/entities/transaction/model/types';
+import { CashReceiptPurpose, ProcessStep } from '@/entities/transaction/model/types';
 import { HeaderType} from '@/entities/common/model/types';
 import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
+import { useCashReceiptManualIssueMutation } from '@/entities/transaction/api/use-cash-receipt-manual-issue';
 
 export const CashReceitHandWrittenIssuancePage = () => {
   const { navigate } = useNavigate();
 
   // 1 or 2
   const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
+  const [businessNumber, setBusinessNumber] = useState<string>('5459577852');
+  const [purpose, setPurpose] = useState<CashReceiptPurpose>(CashReceiptPurpose.INCOME_DEDUCTION);
+  const [productName, setProductName] = useState<string>('상품명');
+  const [buyerName, setBuyerName] = useState<string>('구매자명');
+  const [issueNumber, setIssueNumber] = useState<string>('01012341234');
+  const [email, setEmail] = useState<string>('test123@nicepay.com');
+  const [phoneNumber, setPhoneNumber] = useState<string>('01012341234');
+  const [supplyAmount, setSupplyAmount] = useState<number | string>(9091);
+  const [vatAmount, setVatAmount] = useState<number | string>(909);
+  const [taxFreeAmount, setTaxFreeAmount] = useState<number | string>(0);
+  const [serviceCharge, setServiceCharge] = useState<number | string>(0);
 
   useSetHeaderTitle('수기 발행');
   useSetHeaderType(HeaderType.RightClose);
   useSetFooterMode(false);
 
+  const { mutateAsync: cashReceiptManualIssue } = useCashReceiptManualIssueMutation();
+  
+  const callManualIssue = () => {
+    let params = {
+      businessNumber: businessNumber,
+      purpose: purpose,
+      productName: productName,
+      buyerName: buyerName,
+      issueNumber: issueNumber,
+      email: email,
+      phoneNumber: phoneNumber,
+      supplyAmount: 9091,
+      vatAmount: 909,
+      taxFreeAmount: 0,
+      serviceCharge: 0
+    };
+    cashReceiptManualIssue(params).then((rs) => {
+      console.log(rs);
+      alert('완료');
+      navigate(PATHS.transaction.cashReceipt.list);
+    });
+  };
+
   const onClickToChangeTab = () => {
     if(processStep === ProcessStep.One){
       setProcessStep(ProcessStep.Two);
     }
     else if(processStep === ProcessStep.Two){
+      callManualIssue();
       // 완료시?
-      alert('완료');
+      //alert('완료');
-      navigate(PATHS.transaction.cashReceipt.list);
+      // navigate(PATHS.transaction.cashReceipt.list);
     }
   };
 
@@ -49,21 +85,47 @@ export const CashReceitHandWrittenIssuancePage = () => {
                     ></div>
                   }
                 </div>
+              </div>
               { (processStep === ProcessStep.One) &&
-                  <CashReceiptHandWrittenIssuanceStep1></CashReceiptHandWrittenIssuanceStep1>
+                <CashReceiptHandWrittenIssuanceStep1
+                  businessNumber={ businessNumber }
+                  purpose={ purpose }
+                  productName={ productName }
+                  buyerName={ buyerName }
+                  issueNumber={ issueNumber }
+                  email={ email }
+                  phoneNumber={ phoneNumber }
+                  setBusinessNumber={ setBusinessNumber }
+                  setPurpose={ setPurpose }
+                  setProductName={ setProductName }
+                  setBuyerName={ setBuyerName }
+                  setIssueNumber={ setIssueNumber }
+                  setEmail={ setEmail }
+                  setPhoneNumber={ setPhoneNumber }
+                ></CashReceiptHandWrittenIssuanceStep1>
               }
               { (processStep === ProcessStep.Two) &&
                 <CashReceiptHandWrittenIssuanceStep2
                   setProcessStep={ setProcessStep }
+                  supplyAmount={ supplyAmount }
+                  vatAmount={ vatAmount }
+                  taxFreeAmount={ taxFreeAmount }
+                  serviceCharge={ serviceCharge }
+                  setSupplyAmount={ setSupplyAmount }
+                  setVatAmount={ setVatAmount }
+                  setTaxFreeAmount={ setTaxFreeAmount }
+                  setServiceCharge={ setServiceCharge }
                 ></CashReceiptHandWrittenIssuanceStep2>
               }
             </div>
-            </div>
             <div className="apply-row">
               <button 
                 className="btn-50 btn-blue flex-1"
                 onClick={ () => onClickToChangeTab() }
-              >다음</button>
+              >
+                { (processStep === ProcessStep.One) && '다음' }
+                { (processStep === ProcessStep.Two) && '발행' }
+              </button>
             </div>
           </div>
         </div>

src/pages/transaction/cash-receipt/list-page.tsx

@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { CashReceiptList } from '@/entities/transaction/ui/cash-receipt-list';
-import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { CashReceiptListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
 import { useCashReceiptListMutation } from '@/entities/transaction/api/use-cash-receipt-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
@@ -63,17 +63,17 @@ export const CashReceiptListPage = () => {
     };
     
     cashReceiptList(listParams).then((rs) => {
+			console.log(rs)
       setListItems(assembleData(rs.content));
     });
     
   };
 
-	const assembleData = (content: Array<ListItem>) => {
+	const assembleData = (content: Array<CashReceiptListItem>) => {
     let data: any = {};
     if(content && content.length > 0){
       for(let i=0;i<content?.length;i++){
-        let stateDate = content[i]?.stateDate;
+       let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
-        let groupDate = stateDate?.substring(0, 8);
         if(!!groupDate && !data.hasOwnProperty(groupDate)){
           data[groupDate] = [];
         }

src/pages/transaction/escrow/detail-page.tsx

@@ -28,22 +28,29 @@ import {
   useSetHeaderType,
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { EscrowMailResendBottomSheet } from '@/entities/transaction/ui/escrow-mail-resend-bottom-sheet';
+import { useEscrowMailResendMutation } from '@/entities/transaction/api/use-escrow-mail-resend-mutation';
 
 export const EscrowDetailPage = () => {
   const { navigate } = useNavigate();
   const location = useLocation();
   
+  const [amountInfo, setAmountInfo] = useState<ImportantInfo>();
   const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
   const [escrowInfo, setEscrowInfo] = useState<EscrowInfo>();
   const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
   const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
   const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
   const [showImportantInfo, setShowImportantInfo] = useState<boolean>(false);
   const [showEscroInfo, setShowEscroInfo] = useState<boolean>(false);
   const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
   const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
   const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
+  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
 
+  const [orderNumber, setOrderNumber] = useState<string>();
+  const [tid, setTid] = useState<string>();
 
   useSetHeaderTitle('에스크로 상세');
   useSetHeaderType(HeaderType.RightClose);
@@ -52,26 +59,47 @@ export const EscrowDetailPage = () => {
   });
   useSetFooterMode(false);
 
-  const { mutateAsync: escroDetail } = useEscrowDetailMutation();
+  const { mutateAsync: escrowDetail } = useEscrowDetailMutation();
+  const { mutateAsync: escrowMailResend } = useEscrowMailResendMutation() 
     
   const callDetail = () => {
     let escroDetailParams: EscrowDetailParams = {
       issueNumber: location?.state.issueNumber,
     };
-    escroDetail(escroDetailParams).then((rs: DetailResponse) => {
+    escrowDetail(escroDetailParams).then((rs: DetailResponse) => {
       setImportantInfo(rs.importantInfo);
       setEscrowInfo(rs.escrowInfo);
       setPaymentInfo(rs.paymentInfo);
       setTransactionInfo(rs.transactionInfo);
       setSettlementInfo(rs.settlementInfo);
+
+      setOrderNumber(rs.importantInfo?.ordNo);
+      setTid(rs.importantInfo?.tid);
     });
   };
   useEffect(() => {
     callDetail();
   }, []);
 
+  const onClickToShowMailResend = () => {
+    setBottomSheetOn(true);
+  };
+
+  const callMailResend = () => {
+    let params = {
+      orderNumber: orderNumber,
+      tid: tid,
+    };
+    escrowMailResend(params).then((rs: any) => {
+      console.log(rs);
+    });
+  };
+  
   const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
-    if(infoWrapKey === InfoWrapKeys.Important){
+    if(infoWrapKey === InfoWrapKeys.Amount){
+      setShowAmountInfo(!showAmountInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Important){
       setShowImportantInfo(!showImportantInfo);
     }
     else if(infoWrapKey === InfoWrapKeys.Escrow){
@@ -98,8 +126,7 @@ export const EscrowDetailPage = () => {
                 <ImportantInfoWrap
                   transactionCategory={ TransactionCategory.Escrow }
                   importantInfo={ importantInfo }
-                  show={ showImportantInfo }
+                  
-                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                 ></ImportantInfoWrap>
                 <div className="txn-divider minus"></div>
                 <EscrowInfoWrap
@@ -132,9 +159,20 @@ export const EscrowDetailPage = () => {
                 <div className="txn-divider"></div>
               </div>
             </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToShowMailResend() }
+              >메일 재발송</button>
+            </div>
           </div>
         </div>
       </main>
+      <EscrowMailResendBottomSheet
+        setBottomSheetOn={ setBottomSheetOn }
+        bottomSheetOn={ bottomSheetOn }
+        callMailResend={ callMailResend }
+      ></EscrowMailResendBottomSheet>
     </>
   );
 };

src/pages/transaction/escrow/list-page.tsx

@@ -1,10 +1,11 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
+import { useStore } from '@/shared/model/store';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { EscrowList } from '@/entities/transaction/ui/escrow-list';
-import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { EscrowListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
 import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
@@ -26,14 +27,15 @@ const serviceCodes = [
 
 export const EscrowListPage = () => {
 	const { navigate } = useNavigate();
+	const userInfo = useStore((state) => state.UserStore.UserInfo);
 
 	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
 		
 	useSetHeaderTitle('에스크로');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -49,32 +51,33 @@ export const EscrowListPage = () => {
     sortBy?: string, 
     val?: string
   }) => {
-		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+		// pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
     setPageParam(pageParam);
     let listParams = {
-      mid: "nictest001m",
+      mid: 'nictest001m',
-  		searchType: "ORDER_NUMBER",
+  		searchType: 'ORDER_NUMBER',
-  		searchKeyword: "01384234",
+  		searchKeyword: '',
   		startDate: startDate,
   		endDate: endDate,
-  		deliveryStatus: "ALL",
+  		deliveryStatus: 'ALL',
-  		settlementStatus: "ALL",
+  		settlementStatus: 'ALL',
   		minAmount: 0,
   		maxAmount: 999999999,
 			pagination: pageParam
     };
 
+		console.log(listParams)
+    
     escrowList(listParams).then((rs) => {
       setListItems(assembleData(rs.content));
     });
   };
 
-	const assembleData = (content: Array<ListItem>) => {
+	const assembleData = (content: Array<EscrowListItem>) => {
     let data: any = {};
     if(content && content.length > 0){
       for(let i=0;i<content?.length;i++){
-        let stateDate = content[i]?.stateDate;
+        let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
-        let groupDate = stateDate?.substring(0, 8);
         if(!!groupDate && !data.hasOwnProperty(groupDate)){
           data[groupDate] = [];
         }

src/pages/transaction/transaction-pages.tsx

@@ -11,7 +11,7 @@ import { EscrowListPage } from './escrow/list-page';
 import { EscrowDetailPage } from './escrow/detail-page';
 import { BillingListPage } from './billing/list-page';
 import { BillingDetailPage } from './billing/detail-page';
-import { BillingPaymentRequestPage } from './billing/payment-request-page';
+import { BillingChargePage } from './billing/charge-page';
 
 
 export const TransactionPages = () => {
@@ -35,7 +35,7 @@ export const TransactionPages = () => {
         <Route path={ROUTE_NAMES.transaction.billing.base}>
           <Route path={ROUTE_NAMES.transaction.billing.list} element={<BillingListPage />} />
           <Route path={ROUTE_NAMES.transaction.billing.detail} element={<BillingDetailPage />} />
-          <Route path={ROUTE_NAMES.transaction.billing.paymentRequest} element={<BillingPaymentRequestPage />} />
+          <Route path={ROUTE_NAMES.transaction.billing.charge} element={<BillingChargePage />} />
         </Route>
       </SentryRoutes>
     </>

src/shared/api/urls.ts

@@ -148,15 +148,15 @@ export const API_URL = {
   /* Escro Management - 에스크로 API */
   escrowList: () => {
     // POST: 에스크로 목록 조회
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/escrows/list`;
+    return `${API_BASE_URL}/api/v1/escrows/list`;
   },
   escrowDetail: () => {
     // POST: 에스크로 목록 상세 조회
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/escrows/detail`;
+    return `${API_BASE_URL}/api/v1/escrows/detail`;
   },
-  escroMailResend: () => {
+  escrowMailResend: () => {
     // POST: 에스크로 메일 재발송
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/escrows/mail/resend`;
+    return `${API_BASE_URL}/api/v1/escrows/mail/resend`;
   },
   
 

src/shared/constants/paths.ts

@@ -65,9 +65,9 @@ export const PATHS: RouteNamesType = {
         `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.billing.base}`,
         ROUTE_NAMES.transaction.billing.detail,
       ),
-      paymentRequest: generatePath(
+      charge: generatePath(
         `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.billing.base}`,
-        ROUTE_NAMES.transaction.billing.paymentRequest,
+        ROUTE_NAMES.transaction.billing.charge,
       ),
     }
   },

src/shared/constants/route-names.ts

@@ -23,7 +23,7 @@ export const ROUTE_NAMES = {
       base: '/billing/*',
       list: 'list',
       detail: 'detail',
-      paymentRequest: 'payment-request',
+      charge: 'charge',
     }
   },
   settlement: {

src/shared/ui/assets/css/style-fix.css

@@ -19,3 +19,14 @@ main {
 .ic20.rot-180{
   transform: rotate(180deg);
 }
+.txn-divider{
+  z-index: 20;
+}
+.txn-section{
+  z-index: 20;
+  background-color: #ffffff;
+}
+.kv-list{
+  padding-bottom: 20px;
+  z-index: 10;
+}

src/shared/ui/assets/images/ico_del_minus.svg

@@ -0,0 +1,11 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="6" fill="#F5F5F5"/>
+<g clip-path="url(#clip0_2269_6765)">
+<rect x="9" y="17" width="18" height="2" rx="1" fill="#999999"/>
+</g>
+<defs>
+<clipPath id="clip0_2269_6765">
+<rect x="8" y="8" width="20" height="20" rx="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/shared/ui/assets/images/ico_menu_plus_no.svg

@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2269_6819)">
+<rect x="1" y="9" width="18" height="2" rx="1" fill="#999999"/>
+<rect x="11" y="1" width="18" height="2" rx="1" transform="rotate(90 11 1)" fill="#999999"/>
+</g>
+<defs>
+<clipPath id="clip0_2269_6819">
+<rect width="20" height="20" rx="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/shared/ui/assets/images/icon_ing11.svg

@@ -0,0 +1,13 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="80" height="80" rx="40" fill="#F4F8FF"/>
+<path d="M62.9999 26V21.8988C62.9999 19.7455 61.2543 18 59.1011 18H54.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.9999 26V21.8988C16.9999 19.7455 18.7454 18 20.8987 18H24.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M62.9999 54V58.1012C62.9999 60.2545 61.2543 62 59.1011 62H54.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.9999 54V58.1012C16.9999 60.2545 18.7454 62 20.8987 62H24.9999" stroke="#A9B3DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="22.9999" y="23" width="34" height="34" rx="4.36364" fill="#86CBFF"/>
+<path d="M35.1083 45.9883C36.8146 47.6106 40.7305 49.2609 45.1779 45.9883" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="31.4999" y="33.5" width="1" height="2.5" rx="0.5" stroke="white"/>
+<rect x="48.4999" y="33.5" width="1" height="3" rx="0.5" stroke="white"/>
+<path d="M40.2273 34.5762V40.7018C40.2273 41.6249 39.8098 42.3507 38.3182 42.5164" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="21.4544" y1="40.0009" x2="58.5453" y2="40.0009" stroke="#F05D92" stroke-width="2.18182" stroke-linecap="round"/>
+</svg>

src/shared/ui/menu/index.tsx

@@ -142,7 +142,7 @@ export const Menu = ({
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
-            <div className="full-menu-title">{ userInfo.usrid } <span>(madzoneviper)</span></div>
+            <div className="full-menu-title">{ 'nictest001m' } <span>(madzoneviper)</span></div>
             <div className="full-menu-actions">
               <button 
                 className="full-menu-settings"

src/widgets/navigation/header.tsx

@@ -118,7 +118,7 @@ export const HeaderNavigation = ({
         }
         {
           (headerType === HeaderType.RightClose) && 
-          <div className="header-content sub">
+          <div className="header-content">
             <div className="header-center">{ headerTitle }</div>
             <div className="header-right">
               <button className="header-btn">