현금영수증 수기 발행 완료

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

@@ -54,7 +54,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
               className="error"
               type="text"
               value={ businessNumber }
-              disabled={ true }
+              readOnly={ true }
             />
           </div>
         </div>

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

@@ -1,37 +1,40 @@
 import { ChangeEvent } from 'react';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { ProcessStep } from '../model/types';
+import { NumericFormat } from 'react-number-format';
 
 export interface CashReceiptHandWrittenIssuanceStep2Props {
   setProcessStep: (processStep: ProcessStep) => void;
+  issueAmount: number;
   supplyAmount: number;
   vatAmount: number;
   taxFreeAmount: number;
   serviceCharge: number;
+  setIssueAmount: (issueAmount: number) => void;
   setSupplyAmount: (supplyAmount: number) => void;
   setVatAmount: (vatAmount: number) => void;
   setTaxFreeAmount: (taxFreeAmount: number) => void;
   setServiceCharge: (serviceCharge: number) => void;
+  onClickToVatCalculate: () => void;
 };
 export const CashReceiptHandWrittenIssuanceStep2 = ({
   setProcessStep,
+  issueAmount,
   supplyAmount,
   vatAmount,
   taxFreeAmount,
   serviceCharge,
+  setIssueAmount,
   setSupplyAmount,
   setVatAmount,
   setTaxFreeAmount,
-  setServiceCharge
+  setServiceCharge,
+  onClickToVatCalculate
 }: CashReceiptHandWrittenIssuanceStep2Props) => {
   useSetOnBack(() => {
     setProcessStep(ProcessStep.One);
   });
-
-  const onClickToVatCalculate = () => {
-
-  };
-
+  
   return (
     <>
       <h2 className="issue-title">발행 금액 입력</h2>
@@ -41,15 +44,16 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
           <div className="issue-label">발행금액</div>
           <div className="issue-field">
             <div className="seg-buttons">
-              <input 
-                type="text" 
-                value="555,555,555" 
-                readOnly={ true }
-              />
+              <NumericFormat
+                value={ issueAmount }
+                allowNegative={ false }
+                displayType="input"
+                onChange={ (e: ChangeEvent<HTMLInputElement>) => setIssueAmount(parseInt(e.target.value)) }
+              ></NumericFormat>
               <button
                 className="btn-40 btn-white"
                 type="button"
-                onClick={ () => onClickToVatCalculate() }
+                onClick={ onClickToVatCalculate }
               >VAT자동계산</button>
             </div>
           </div>
@@ -58,49 +62,45 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
         <div className="issue-row">
           <div className="issue-label">공급가액</div>
           <div className="issue-field">
-            <input
-              className="error"
-              type="text"
-              placeholder=""
+            <NumericFormat
               value={ supplyAmount }
+              allowNegative={ false }
+              displayType="input"
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setSupplyAmount(parseInt(e.target.value)) }
-            />
+            ></NumericFormat>
           </div>
         </div>
         <div className="issue-row">
           <div className="issue-label">VAT</div>
           <div className="issue-field">
-            <input
-              className="error"
-              type="text"
-              placeholder=""
+            <NumericFormat
               value={ vatAmount }
+              allowNegative={ false }
+              displayType="input"
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setVatAmount(parseInt(e.target.value)) }
-            />
+            ></NumericFormat>
           </div>
         </div>
         <div className="issue-row">
           <div className="issue-label">면세금액</div>
           <div className="issue-field">
-            <input
-              className="error"
-              type="text"
-              placeholder=""
+            <NumericFormat
               value={ taxFreeAmount }
+              allowNegative={ false }
+              displayType="input"
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setTaxFreeAmount(parseInt(e.target.value)) }
-            />
+            ></NumericFormat>
           </div>
         </div>
         <div className="issue-row">
           <div className="issue-label">봉사료</div>
           <div className="issue-field">
-            <input
-              className="error"
-              type="text"
-              placeholder=""
+            <NumericFormat
               value={ serviceCharge }
+              allowNegative={ false }
+              displayType="input"
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setServiceCharge(parseInt(e.target.value)) }
-            />
+            ></NumericFormat>
           </div>
         </div>
         <div className="issue-note error">