- 수기발행,1:1문의 등록, 빌링 모바일 용 패딩 추가 로직 추가

2025-11-07 11:09:35 +09:00
parent da66206417
commit 21103232e9
5 changed files with 143 additions and 116 deletions
--- a/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
+++ b/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
@@ -5,6 +5,7 @@ import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { CashReceiptPurposeType } from '../model/types';
 import { PatternFormat } from 'react-number-format';
 import { useTranslation } from 'react-i18next';
+import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';

 export interface CashReceiptHandWrittenIssuanceStep1Props {
  businessNumber?: string;
@@ -41,6 +42,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
 }: CashReceiptHandWrittenIssuanceStep1Props) => {
  const { t } = useTranslation();
  const { navigate } = useNavigate();
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();

  useSetOnBack(() => {
    navigate(PATHS.transaction.cashReceipt.list);
@@ -55,8 +57,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
            <input
              className="error"
              type="text"
-              value={ businessNumber }
-              readOnly={ true }
+              value={businessNumber}
+              readOnly={true}
            />
          </div>
        </div>
@@ -66,14 +68,14 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
          <div className="issue-field">
            <div className="seg-buttons">
              <button
-                className={ `btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` }
+                className={`btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION) ? 'btn-blue' : 'btn-white'}`}
                type="button"
-                onClick={ () => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION) }
+                onClick={() => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION)}
              >{t('transaction.handWrittenIssuance.incomeDeduction')}</button>
              <button
-                className={ `btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` }
+                className={`btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF) ? 'btn-blue' : 'btn-white'}`}
                type="button"
-                onClick={ () => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF) }
+                onClick={() => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF)}
              >{t('transaction.handWrittenIssuance.expenseProof')}</button>
            </div>
          </div>
@@ -84,8 +86,9 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
            <input
              type="text"
              placeholder={t('transaction.handWrittenIssuance.productNamePlaceholder')}
-              value={ productName }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
+              value={productName}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
+              onFocus={handleInputFocus}
            />
          </div>
        </div>
@@ -95,8 +98,9 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
            <input
              type="text"
              placeholder={t('transaction.handWrittenIssuance.buyerNamePlaceholder')}
-              value={ buyerName }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
+              value={buyerName}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
+              onFocus={handleInputFocus}
            />
          </div>
        </div>
@@ -105,10 +109,11 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
          <div className="issue-field">
            <PatternFormat
              placeholder={t('transaction.handWrittenIssuance.issueNumberPlaceholder')}
-              value={ issueNumber }
+              value={issueNumber}
              valueIsNumericString
              format="###########"
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setIssueNumber(e.target.value) }
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setIssueNumber(e.target.value)}
+              onFocus={handleInputFocus}
            ></PatternFormat>
          </div>
        </div>
@@ -118,20 +123,22 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
            <input
              type="email"
              placeholder={t('transaction.handWrittenIssuance.emailPlaceholder')}
-              value={ email }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value) }
+              value={email}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+              onFocus={handleInputFocus}
            />
          </div>
        </div>
-        <div className="issue-row">
+        <div className="issue-row" style={keyboardAwarePadding}>
          <div className="issue-label">{t('account.phoneNumber')}</div>
          <div className="issue-field">
            <PatternFormat
              placeholder={t('transaction.handWrittenIssuance.phoneNumberPlaceholder')}
-              value={ phoneNumber }
+              value={phoneNumber}
              valueIsNumericString
              format="###########"
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value)}
+              onFocus={handleInputFocus}
            ></PatternFormat>
          </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
@@ -3,6 +3,7 @@ import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { ProcessStep } from '../model/types';
 import { NumericFormat } from 'react-number-format';
 import { useTranslation } from 'react-i18next';
+import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';

 export interface CashReceiptHandWrittenIssuanceStep2Props {
  setProcessStep: (processStep: ProcessStep) => void;
@@ -33,6 +34,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
  onClickToVatCalculate
 }: CashReceiptHandWrittenIssuanceStep2Props) => {
  const { t } = useTranslation();
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();

  useSetOnBack(() => {
    setProcessStep(ProcessStep.One);
@@ -52,6 +54,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
                allowNegative={ false }
                displayType="input"
                onChange={ (e: ChangeEvent<HTMLInputElement>) => setIssueAmount(parseInt(e.target.value)) }
+                onFocus={handleInputFocus}
              ></NumericFormat>
              <button
                className="btn-40 btn-white"
@@ -70,6 +73,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
              allowNegative={ false }
              displayType="input"
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setSupplyAmount(parseInt(e.target.value)) }
+              onFocus={handleInputFocus}
            ></NumericFormat>
          </div>
        </div>
@@ -81,6 +85,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
              allowNegative={ false }
              displayType="input"
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setVatAmount(parseInt(e.target.value)) }
+              onFocus={handleInputFocus}
            ></NumericFormat>
          </div>
        </div>
@@ -92,10 +97,11 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
              allowNegative={ false }
              displayType="input"
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setTaxFreeAmount(parseInt(e.target.value)) }
+              onFocus={handleInputFocus}
            ></NumericFormat>
          </div>
        </div>
-        <div className="issue-row">
+        <div className="issue-row" style={keyboardAwarePadding}>
          <div className="issue-label">{t('transaction.fields.serviceAmount')}</div>
          <div className="issue-field">
            <NumericFormat
@@ -103,6 +109,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
              allowNegative={ false }
              displayType="input"
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setServiceCharge(parseInt(e.target.value)) }
+              onFocus={handleInputFocus}
            ></NumericFormat>
          </div>
        </div>