郵便番号検索のトリガーをボタンへ変更

src/pages/app/hooks/useInputMailStep.tsx

@@ -3,10 +3,10 @@ import { Box, Button, Divider, Stack, Typography } from "@mui/material";
 import { HasChildren } from "@types";
 import { getAddressFromZipCode } from "api/zipcode";
 import { FormProvider, RHFTextField } from "components/hook-form";
-import RHFDatePicker from "components/hook-form/RHFDatePicker";
 import RHFPrefCodeSelect from "components/hook-form/ex/RHFPrefCodeSelect";
+import StackRow from "components/stack/StackRow";
 import useBackDrop from "hooks/useBackDrop";
-import useNavigateCustom from "hooks/useNavigateCustom";
+import { useMemo } from "react";
 import { useForm } from "react-hook-form";
 import * as Yup from "yup";
 
@@ -70,8 +70,11 @@ export default function useInputMailStep({ onNext, onPrev }: Props) {
   });
 
   const zipCode = form.watch("mail_zip_code");
-  const handleBlurZipCode = () => {
-    if (/^[0-9]{7}$/.test(zipCode)) {
+  const isCompletedZipCode = useMemo(() => {
+    return /^[0-9]{7}$/.test(zipCode);
+  }, [zipCode]);
+  const handleClickSearchZipCode = () => {
+    if (isCompletedZipCode) {
       setShowBackDrop(true);
       getAddressFromZipCode(zipCode)
         .then((res) => {
@@ -103,12 +106,48 @@ export default function useInputMailStep({ onNext, onPrev }: Props) {
     <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
       <Stack spacing={2} sx={{ p: 1, m: 1 }} textAlign="left">
         <AreaBox title="郵便番号">
-          <Typography variant="body2">ハイフン無の7桁</Typography>
-          <RHFTextField
-            name="mail_zip_code"
-            InputProps={{ startAdornment: <div>〒</div> }}
-            onBlur={handleBlurZipCode}
-          />
+          {/* <Grid container spacing={2}>
+            <Grid item xs={10}>
+              <Typography variant="body2">ハイフン無の7桁</Typography>
+              <RHFTextField
+                name="mail_zip_code"
+                InputProps={{ startAdornment: <div>〒</div> }}
+                onBlur={handleBlurZipCode}
+              />
+            </Grid>
+            <Grid item xs={2}>
+              <Box
+                display="flex"
+                justifyContent="flex-end"
+                flexDirection="column"
+              >
+                <Button size="small" variant="contained">
+                  検索
+                </Button>
+              </Box>
+            </Grid>
+          </Grid> */}
+          <StackRow spacing={2}>
+            <Box>
+              <Typography variant="body2">ハイフン無の7桁</Typography>
+              <RHFTextField
+                name="mail_zip_code"
+                InputProps={{ startAdornment: <div>〒</div> }}
+              />
+            </Box>
+            <Box
+              display="flex"
+              justifyContent="flex-end"
+              flexDirection="column"
+            >
+              <Button
+                onClick={handleClickSearchZipCode}
+                disabled={!isCompletedZipCode}
+              >
+                検索
+              </Button>
+            </Box>
+          </StackRow>
         </AreaBox>
         <AreaBox title="都道府県">
           <RHFPrefCodeSelect name="mail_pref_code" size="small" />