From 9bf554f0e3ad428990d5f8678449f91c5b9198b0 Mon Sep 17 00:00:00 2001
From: "sosuke.iwabuchi" <sosuke.iwabuchi@satellite-tech.co.jp>
Date: Mon, 31 Jul 2023 15:40:02 +0900
Subject: [PATCH] =?UTF-8?q?=E9=83=B5=E4=BE=BF=E7=95=AA=E5=8F=B7=E6=A4=9C?=
 =?UTF-8?q?=E7=B4=A2=E3=81=AE=E3=83=88=E3=83=AA=E3=82=AC=E3=83=BC=E3=82=92?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=B8=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/app/hooks/useInputMailStep.tsx | 59 ++++++++++++++++++++----
 1 file changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/pages/app/hooks/useInputMailStep.tsx b/src/pages/app/hooks/useInputMailStep.tsx
index d481a23..b28bbc0 100644
--- a/src/pages/app/hooks/useInputMailStep.tsx
+++ b/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" />