Merge pull request #74 from ej070961/develop

fix: 후원글 등록 postalCode 수정
K-Hackathon-Fledge · Aug 11, 2024 · e30e0da · e30e0da
2 parents 9f04060 + 1dfab54
commit e30e0da
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 69 deletions.
diff --git a/src/components/MyPage/PostalCode.tsx b/src/components/MyPage/PostalCode.tsx
@@ -6,94 +6,99 @@ import { useState, useEffect } from "react";
 import DaumPost from "../Common/DaumPost";
 
 interface postCode {
-    address: string;
-    zonecode: number | string;
-    detailAddress?: string;
+  address: string;
+  zonecode: number | string;
+  detailAddress?: string;
 }
 interface PostalCodeProps {
-    initialAddress?: postCode;
-    onChange?: (data: postCode) => void;
+  initialAddress?: postCode;
+  sponsor?: boolean;
+  onChange?: (data: postCode) => void;
 }
 
-const PostalCode = ({ initialAddress, onChange }: PostalCodeProps) => {
-    const [popup, setPopup] = useState(false);
+const PostalCode = ({ initialAddress, onChange, sponsor }: PostalCodeProps) => {
+  const [popup, setPopup] = useState(false);
 
-    const [form, setForm] = useState<postCode>(
-        initialAddress
-            ? initialAddress
-            : { address: "", detailAddress: "", zonecode: "" }
-    );
+  const [form, setForm] = useState<postCode>(
+    initialAddress
+      ? initialAddress
+      : { address: "", detailAddress: "", zonecode: "" }
+  );
 
-    const handlePopup = () => {
-        setPopup(!popup);
-    };
+  const handlePopup = () => {
+    setPopup(!popup);
+  };
 
-    useEffect(() => {
-        if (onChange && form.address !== initialAddress?.address) {
-            onChange(form);
-        }
-    }, [form, initialAddress?.address]);
+  useEffect(() => {
+    if (sponsor && initialAddress) {
+      setForm(initialAddress);
+    }
+  }, [sponsor, initialAddress]);
 
-    useEffect(() => {
-        if (onChange && form.detailAddress !== initialAddress?.detailAddress) {
-            onChange(form);
-        }
-    }, [form.detailAddress, initialAddress?.detailAddress]);
+  useEffect(() => {
+    if (onChange && form.address !== initialAddress?.address) {
+      onChange(form);
+    }
+  }, [form, initialAddress?.address]);
 
-    const handleDetailAddressChange = (
-        e: React.ChangeEvent<HTMLInputElement>
-    ) => {
-        setForm((prevForm) => ({ ...prevForm, detailAddress: e.target.value }));
-    };
+  useEffect(() => {
+    if (onChange && form.detailAddress !== initialAddress?.detailAddress) {
+      onChange(form);
+    }
+  }, [form.detailAddress, initialAddress?.detailAddress]);
 
-    return (
-        <>
-            <Container>
-                <Input
-                    hint="거주 주소지"
-                    placeholder="거주 주소지"
-                    width="577px"
-                    value={form.address}
-                />
-                <Input
-                    hint="상세 주소"
-                    placeholder="상세 주소"
-                    width="199px"
-                    value={form.detailAddress}
-                    onChange={handleDetailAddressChange}
-                />
-                <Input
-                    hint="우편번호"
-                    placeholder="12345"
-                    width="104px"
-                    value={form.zonecode}
-                />
-                <Button title="우편번호 검색" mainColor onClick={handlePopup} />
-                {popup && (
-                    <DaumPost handlePopup={handlePopup} setAddress={setForm} />
-                )}
-            </Container>
-            {popup && (
-                <Background
-                    onClick={() => {
-                        handlePopup();
-                    }}
-                />
-            )}
-        </>
-    );
+  const handleDetailAddressChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setForm((prevForm) => ({ ...prevForm, detailAddress: e.target.value }));
+  };
+
+  return (
+    <>
+      <Container>
+        <Input
+          hint="거주 주소지"
+          placeholder="거주 주소지"
+          width="577px"
+          value={form.address}
+        />
+        <Input
+          hint="상세 주소"
+          placeholder="상세 주소"
+          width="199px"
+          value={form.detailAddress}
+          onChange={handleDetailAddressChange}
+        />
+        <Input
+          hint="우편번호"
+          placeholder="12345"
+          width="104px"
+          value={form.zonecode}
+        />
+        <Button title="우편번호 검색" mainColor onClick={handlePopup} />
+        {popup && <DaumPost handlePopup={handlePopup} setAddress={setForm} />}
+      </Container>
+      {popup && (
+        <Background
+          onClick={() => {
+            handlePopup();
+          }}
+        />
+      )}
+    </>
+  );
 };
 
 export default PostalCode;
 
 const Container = styled.div`
-    ${tw`
+  ${tw`
             flex gap-[23px] items-baseline relative
         `}
 `;
 
 const Background = styled.div`
-    ${tw`
+  ${tw`
         absolute  w-[100dvw] h-[100dvh] z-40 top-0 left-0
     `}
 `;
diff --git a/src/components/SponsorRegister/AddressSection.tsx b/src/components/SponsorRegister/AddressSection.tsx
@@ -63,7 +63,11 @@ function AddressSection({ serverData }: AddressSectionProps) {
         />
       </div>
       {/* 우편번호검색 */}
-      <PostalCode initialAddress={addressData} onChange={handleAddressChange} />
+      <PostalCode
+        initialAddress={addressData}
+        onChange={handleAddressChange}
+        sponsor={true}
+      />
 
       <AddressFormContainer className="w-[650px]">
         <InputBox className="w-[300px]">