수기발행

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

@@ -16,7 +16,7 @@ export const BillingList = ({
     for(let i=0;i<listItems.length;i++){
       let items = listItems[i];
       if(!!items){
-        let transactionDate = items.transactionDate;
+        let transactionDate = items?.transactionDate;
         if(!!transactionDate){
           if(i === 0){
             date = transactionDate;

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

@@ -3,6 +3,7 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { CashReceiptPurposeType } from '../model/types';
+import { PatternFormat } from 'react-number-format';
 
 export interface CashReceiptHandWrittenIssuanceStep1Props {
   businessNumber?: string;
@@ -100,12 +101,13 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
         <div className="issue-row">
           <div className="issue-label">발행번호</div>
           <div className="issue-field">
-            <input 
-              type="text" 
+            <PatternFormat
               placeholder="사업자번호 OR 휴대폰번호"
               value={ issueNumber }
+              valueIsNumericString
+              format="###########"
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setIssueNumber(e.target.value) }
-            />
+            ></PatternFormat>
           </div>
         </div>
         <div className="issue-row">
@@ -122,12 +124,13 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
         <div className="issue-row">
           <div className="issue-label">전화번호</div>
           <div className="issue-field">
-            <input
-              type="tel"
+            <PatternFormat
               placeholder="01012345678"
               value={ phoneNumber }
+              valueIsNumericString
+              format="###########"
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
-            />
+            ></PatternFormat>
           </div>
         </div>
       </div>

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

@@ -7,21 +7,22 @@ import { CashReceiptPurposeType, ProcessStep } from '@/entities/transaction/mode
 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-mutation';
+import { showAlert } from '@/widgets/show-alert';
 
 export const CashReceitHandWrittenIssuancePage = () => {
   const { navigate } = useNavigate();
 
   // 1 or 2
   const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
-  const [businessNumber, setBusinessNumber] = useState<string>('5459577852');
+  const [businessNumber, setBusinessNumber] = useState<string>('');
   const [purposeType, setPurposeType] = useState<CashReceiptPurposeType>(CashReceiptPurposeType.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>(9091);
-  const [vatAmount, setVatAmount] = useState<number>(909);
+  const [productName, setProductName] = useState<string>('');
+  const [buyerName, setBuyerName] = useState<string>('');
+  const [issueNumber, setIssueNumber] = useState<string>('');
+  const [email, setEmail] = useState<string>('');
+  const [phoneNumber, setPhoneNumber] = useState<string>('');
+  const [supplyAmount, setSupplyAmount] = useState<number>(0);
+  const [vatAmount, setVatAmount] = useState<number>(0);
   const [taxFreeAmount, setTaxFreeAmount] = useState<number>(0);
   const [serviceCharge, setServiceCharge] = useState<number>(0);
 
@@ -31,6 +32,16 @@ export const CashReceitHandWrittenIssuancePage = () => {
 
   const { mutateAsync: cashReceiptManualIssue } = useCashReceiptManualIssueMutation();
   
+  const checkEmail = (email: string) => {
+    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
+    if(email != '' && email != 'undefined' && re.test(email)){
+      return true;
+    }
+    else{
+      return false;
+    }
+  };
+
   const callManualIssue = () => {
     let params = {
       businessNumber: businessNumber,
@@ -40,10 +51,10 @@ export const CashReceitHandWrittenIssuancePage = () => {
       issueNumber: issueNumber,
       email: email,
       phoneNumber: phoneNumber,
-      supplyAmount: 9091,
-      vatAmount: 909,
-      taxFreeAmount: 0,
-      serviceCharge: 0
+      supplyAmount: supplyAmount,
+      vatAmount: vatAmount,
+      taxFreeAmount: taxFreeAmount,
+      serviceCharge: serviceCharge
     };
     cashReceiptManualIssue(params).then((rs) => {
       console.log(rs);
@@ -54,6 +65,24 @@ export const CashReceitHandWrittenIssuancePage = () => {
 
   const onClickToChangeTab = () => {
     if(processStep === ProcessStep.One){
+      if(!businessNumber){
+        showAlert('사업자 번호는 필수 입력 항목 입니다.');
+      }
+      else if(!productName){
+        showAlert('상품명은 필수 입력 항목 입니다.');
+      }
+      else if(!buyerName){
+        showAlert('구매자는 필수 입력 항목 입니다.');
+      }
+      else if(!issueNumber){
+        showAlert('발행번호는 필수 입력 항목 입니다.');
+      }
+      else if(email && !checkEmail(email)){
+        showAlert('이메일 형식이 맞지 않습니다.');
+      }
+      else if(!phoneNumber){
+        showAlert('전화번호는 필수 입력 항목 입니다.');
+      }
       setProcessStep(ProcessStep.Two);
     }
     else if(processStep === ProcessStep.Two){

src/widgets/show-alert/index.tsx

@@ -0,0 +1,20 @@
+import { Dialog } from '@/shared/ui/dialogs/dialog';
+import { overlay } from 'overlay-kit';
+
+export const showAlert = (msg: string) => {
+  overlay.open(({
+    isOpen,
+    close,
+    unmount
+  }) => {
+    return (
+      <Dialog
+        afterLeave={ unmount }
+        open={ isOpen }
+        onClose={ close }
+        message={ msg }
+        buttonLabel={ ['확인'] }
+      />
+    );
+  });
+};