수기발행 / 현금영수증 용도변경

2025-09-11 16:38:49 +09:00
parent 1b4af7a82f
commit 48a3bd1ed4
15 changed files with 424 additions and 96 deletions
--- a/src/entities/common/model/types.ts
+++ b/src/entities/common/model/types.ts
@@ -1,3 +1,7 @@
+export enum SuccessResult {
+  SUCCESS = 'SUCCESS',
+  FAIL = 'FAIL'
+};
 export interface DefaultRequestPagination {
  cursor: string;
  size: number;
--- a/src/entities/transaction/api/use-cash-receipt-manual-issue.ts
+++ b/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,
+  };
+};
--- a/src/entities/transaction/api/use-cash-receipt-purpose-update.ts
+++ b/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,
+  };
+};
--- a/src/entities/transaction/model/types.ts
+++ b/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,6 +33,11 @@ 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;
@@ -301,7 +306,7 @@ export interface IssueInfo {
  approvalNumber?: number;
  issueNumber?: number;
  issueDateTime?: string;
-  purpose?: string;
+  purpose?: CashReceiptPurpose;
  paymentMethod?: string;
  productName?: string;
  transmissionStatus?: string;
@@ -361,11 +366,11 @@ export interface BillingDetailResponse extends BillingInfo {
 }

 export interface DetailInfoProps extends DetailResponse {
-  transactionCategory: TransactionCategory;
+  transactionCategory?: TransactionCategory;
  show?: boolean;
  tid?: string;
  serviceCode?: string;
-  issueNumber?: number;
+  purpose?: CashReceiptPurpose;
  onClickToShowInfo?: (info: InfoWrapKeys) => void;
 }
 export interface DetailArrowProps {
@@ -415,4 +420,34 @@ 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
+};
--- a/src/entities/transaction/ui/bottom-sheet-cash-receit-purpose-update.tsx
+++ b/src/entities/transaction/ui/bottom-sheet-cash-receit-purpose-update.tsx
@@ -1,11 +1,42 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';

-export const BottomSheetChangesCashReceitUses = () => {
+export interface BottomSheetCashReceitPurposeUpdateProps {
+  setBottomSheetOn: (bottomSheetOn: boolean) => void;
+  bottomSheetOn: boolean;
+  callPurposeUpdate: () => void;
+};
+
+export const BottomSheetCashReceitPurposeUpdate = ({
+  setBottomSheetOn,
+  bottomSheetOn,
+  callPurposeUpdate
+}: BottomSheetCashReceitPurposeUpdateProps) => {
+  
+  const onClickToClose = () => {
+    setBottomSheetOn(false);
+  };
+  const onCliickToPurposeUpdate = () => {
+    callPurposeUpdate();
+  };
+  
+  const variants = {
+    hidden: { y: '100%' },
+    visible: { y: '0%' },
+  };

  return (
    <>
-      <div className="bg-dim"></div>
-      <div className="bottomsheet">
+      { (bottomSheetOn) &&
+        <div className="bg-dim"></div>
+      }
+      <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>
@@ -13,9 +44,10 @@ export const BottomSheetChangesCashReceitUses = () => {
              className="close-btn"
              type="button"
            >
-              <img
+              <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>
    </>
  );
 };
--- a/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
+++ b/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
@@ -1,10 +1,44 @@
+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(() => {
    navigate(PATHS.transaction.cashReceipt.list);
  });
@@ -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>
--- a/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx
+++ b/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>
--- a/src/entities/transaction/ui/info-wrap/billing-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/billing-info-wrap.tsx
@@ -2,20 +2,35 @@ import moment from 'moment';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';

 export const BillingInfoWrap = ({
-  transactionCategory,
  billingInfo,
-  show,
-  onClickToShowInfo
 }: DetailInfoProps) => {

-  const onClickToSetShowInfo = () => {
-    if(!!onClickToShowInfo){
-      onClickToShowInfo(InfoWrapKeys.Important);
+  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">
@@ -49,12 +64,7 @@ export const BillingInfoWrap = ({
            <span className="k">처리결과</span>
            <span className="v">{ billingInfo?.processResult }</span>
          </li>
-          { (!!billingInfo?.installmentMonth && parseInt(billingInfo?.installmentMonth) > 1) && 
-            <li className="kv-row">
-              <span className="k">할부개월</span>
-              <span className="v">{ billingInfo?.installmentMonth }개월 할부</span>
-            </li> 
-          }
+          { getInstallmentMonth() }
          <li className="kv-row">
            <span className="k">상품명</span>
            <span className="v">{ billingInfo?.productName }</span>
--- a/src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx
@@ -5,26 +5,13 @@ import moment from 'moment';
 export const IssueInfoWrap = ({
  transactionCategory,
  issueInfo,
-  show,
-  onClickToShowInfo
+  purpose,
 }: DetailInfoProps) => {
-  
-
-  const onClickToSetShowInfo = () => {
-    if(!!onClickToShowInfo){
-      onClickToShowInfo(InfoWrapKeys.Issue);
-    }
-  };
-  
+ 
  return (
    <>
      <div className="txn-section">
-        <div 
-          className="section-title with-toggle"
-          onClick={ () => onClickToSetShowInfo() }
-        >
-          발급 정보 <DetailArrow show={ show }></DetailArrow>
-        </div>
+        <div className="section-title">발급 정보</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">승인번호</span>
@@ -40,7 +27,7 @@ export const IssueInfoWrap = ({
          </li>
          <li className="kv-row">
            <span className="k">용도</span>
-            <span className="v">{ issueInfo?.purpose }</span>
+            <span className="v">{ purpose }</span>
          </li>
          <li className="kv-row">
            <span className="k">결제수단</span>
--- a/src/pages/transaction/billing/detail-page.tsx
+++ b/src/pages/transaction/billing/detail-page.tsx
@@ -17,6 +17,7 @@ import {
  useSetHeaderType,
  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { NumericFormat } from 'react-number-format';

 export const BillingDetailPage = () => {
  const { navigate } = useNavigate();
@@ -52,8 +53,24 @@ export const BillingDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
+                <div className="txn-num-group">
+                  <div className="txn-amount">
+                    <div className="value">
+                      <NumericFormat
+                        value={ 100000000 } 
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                      <span className="unit">원</span>
+                    </div>
+                    <div className="txn-mid">
+                      <span className="value">{ 'nitnitni' }</span>
+                    </div>
+                  </div>
+
+                </div>
+                <div className="txn-divider"></div>
                <BillingInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
                  billingInfo={ billingInfo }
                ></BillingInfoWrap>
              </div>
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -35,8 +35,8 @@ export const BillingListPage = () => {
 	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 [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
 		
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -57,7 +57,7 @@ export const BillingListPage = () => {
    let listParams = {
      mid: 'nictest001m',
      searchType: 'ALL',
-			searchKeyword: 'P14633723',
+			searchKeyword: '',
      startDate: startDate,
      endDate: endDate,
      requestStatus: 'ALL',
--- a/src/pages/transaction/cash-receipt/detail-page.tsx
+++ b/src/pages/transaction/cash-receipt/detail-page.tsx
@@ -12,7 +12,8 @@ import {
  DetailResponse,
  IssueInfo,
  DetailInfo,
-  InfoWrapKeys
+  InfoWrapKeys,
+  CashReceiptPurpose
 } from '@/entities/transaction/model/types';
 import {
  useSetOnBack, 
@@ -20,6 +21,8 @@ import {
  useSetHeaderType,
  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { BottomSheetCashReceitPurposeUpdate } from '@/entities/transaction/ui/bottom-sheet-cash-receit-purpose-update';
+import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update';

 export const CashReceiptDetailPage = () => {
  const { navigate } = useNavigate();
@@ -28,6 +31,8 @@ export const CashReceiptDetailPage = () => {
  const [issueInfo, setIssueInfo] = useState<IssueInfo>();
  const [detailInfo, setDetailInfo] = useState<DetailInfo>();
  const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
+  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+  const [purpose, setPurpose] = useState<CashReceiptPurpose>();
  
  useSetHeaderTitle('현금영수증 상세');
  useSetHeaderType(HeaderType.RightClose);
@@ -36,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(() => {
@@ -57,6 +82,10 @@ export const CashReceiptDetailPage = () => {
    }
  };

+  const onClickToPurposeUpdate = () => {
+    setBottomSheetOn(true);
+  };
+
  return (
    <>
      <main>
@@ -67,6 +96,7 @@ export const CashReceiptDetailPage = () => {
                <IssueInfoWrap
                  transactionCategory={ TransactionCategory.CashReceipt }
                  issueInfo={ issueInfo }
+                  purpose={ purpose }
                ></IssueInfoWrap>
                <div className="txn-divider minus"></div>
                <DetailInfoWrap
@@ -77,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>
+      <BottomSheetCashReceitPurposeUpdate
+        setBottomSheetOn={ setBottomSheetOn }
+        bottomSheetOn={ bottomSheetOn }
+        callPurposeUpdate={ callPurposeUpdate }
+      ></BottomSheetCashReceitPurposeUpdate>
    </>
  );
 };
--- a/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx
+++ b/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx
@@ -1,30 +1,66 @@
-import {useState} from 'react';
-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 {HeaderType} from '@/entities/common/model/types';
-import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout';
+import { useState } from 'react';
+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 { 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('완료');
-      navigate(PATHS.transaction.cashReceipt.list);
+      //alert('완료');
+      // navigate(PATHS.transaction.cashReceipt.list);
    }
  };

@@ -36,34 +72,60 @@ export const CashReceitHandWrittenIssuancePage = () => {
            <div className="option-list">
              <div className="issue-progress">
                <div className="bar">
-                    {(processStep === ProcessStep.One) &&
-                        <div
-                            className="fill"
-                            style={{ width: '50%' }}
-                        ></div>
-                    }
-                    {(processStep === ProcessStep.Two) &&
-                        <div
-                            className="fill"
-                            style={{ width: '100%' }}
-                            ></div>
-                    }
+                  {(processStep === ProcessStep.One) &&
+                    <div
+                      className="fill"
+                      style={{ width: '50%' }}
+                    ></div>
+                  }
+                  {(processStep === ProcessStep.Two) &&
+                    <div
+                      className="fill"
+                      style={{ width: '100%' }}
+                    ></div>
+                  }
                </div>
-                { (processStep === ProcessStep.One) &&
-                  <CashReceiptHandWrittenIssuanceStep1></CashReceiptHandWrittenIssuanceStep1>
-                }
-                { (processStep === ProcessStep.Two) &&
-                  <CashReceiptHandWrittenIssuanceStep2
-                    setProcessStep={ setProcessStep }
-                  ></CashReceiptHandWrittenIssuanceStep2>
-                }
              </div>
+              { (processStep === ProcessStep.One) &&
+                <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 className="apply-row">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToChangeTab() }
-              >다음</button>
+              >
+                { (processStep === ProcessStep.One) && '다음' }
+                { (processStep === ProcessStep.Two) && '발행' }
+              </button>
            </div>
          </div>
        </div>
--- a/src/pages/transaction/escrow/detail-page.tsx
+++ b/src/pages/transaction/escrow/detail-page.tsx
@@ -33,11 +33,13 @@ 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);
@@ -71,7 +73,10 @@ export const EscrowDetailPage = () => {
  }, []);
  
  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 +103,7 @@ export const EscrowDetailPage = () => {
                <ImportantInfoWrap
                  transactionCategory={ TransactionCategory.Escrow }
                  importantInfo={ importantInfo }
-                  show={ showImportantInfo }
-                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                  
                ></ImportantInfoWrap>
                <div className="txn-divider minus"></div>
                <EscrowInfoWrap
--- a/src/widgets/navigation/header.tsx
+++ b/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">