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

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>