주소끝

client/src/Pages/Signup.js

@@ -8,32 +8,18 @@ import DaumPostcode from "react-daum-postcode";
 
 
 function Signup() {
-
-    const [isAddress, setIsAddress] = useState("");
-    const [isZoneCode, setIsZoneCode] = useState();
-    const [isPostOpen, setIsPostOpen] = useState();
-    const [post, setPost] = useState([]);
-
-    function postClick() {
-        if (post.length !== 0) {
-            setPost([])
-        } else {
-            setPost(
-                <div>
-                    <DaumPostcode style={postCodeStyle} onComplete={handleComplete} />
-                </div>
-            )
-
-        }
-    }
+    const [address,setAddress] =useState("")
 
     const handleComplete = (data) => {
         let fullAddress = data.address;
         let extraAddress = "";
 
+        console.log(data)
+
         if (data.addressType === "R") {
             if (data.bname !== "") {
                 extraAddress += data.bname;
+                console.log(extraAddress)
             }
             if (data.buildingName !== "") {
                 extraAddress +=
@@ -41,11 +27,36 @@ function Signup() {
             }
             fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
         }
-        setIsZoneCode(data.zonecode);
-        setIsAddress(fullAddress);
-        setIsPostOpen(false);
-    };
+        setAddress({full: fullAddress, zone: data.zonecode});
+
+        console.log(fullAddress);
+    }
+
+    const Postcode = () => {
+
 
+        return (
+            <DaumPostcode
+                onComplete={handleComplete}
+            />
+        );
+    }
+
+
+    const [post, setPost] = useState([]);
+
+    function postClick() {
+        if (post.length !== 0) {
+            setPost([])
+        } else {
+            setPost(
+                <div>
+                    <DaumPostcode style={postCodeStyle} onComplete={handleComplete} />
+                </div>
+            )
+
+        }
+    }
     const postCodeStyle = {
         position: "absolute",
         width: "400px",
@@ -158,14 +169,14 @@ function Signup() {
 
                             <Form.Group controlId="formBasicAdd">
                                 <Form.Row>
-                                    <Form.Label>주 소</Form.Label>
-
-                                    <Col>
-                                        <button type="button" onClick={postClick}>우편번호 찾기</button>
+                                    {console.log("address=", address)}
+                                    <Form.Label className="mx-3">주 소</Form.Label>
+                                    <Form.Control required type="text" id="add" size="sm " style={{ width: '120px' }} value={address.zone} disabled={(address.zone == null) ? false : true} ></Form.Control>                                        
+                                    <Button size="sm" style={{ background: '#91877F', borderColor: '#91877F' }} className="mx-3" type="button" onClick={postClick}>주소 찾기</Button>
                                         {post}
-                                        <Form.Control required type="text" id="add2" size="sm" placeholder="상세주소" className="mx-sm-3"></Form.Control>
+                                    <Form.Control required type="text" id="add" size="sm " value={address.full} disabled={(address.zone == null) ? false : true} className="mx-3"style={{width:'330px'}}></Form.Control>
+                                    <Form.Control required type="text" id="add2" size="sm" placeholder="상세주소" className="mx-sm-3"></Form.Control>
                                         <Form.Control.Feedback type="invalid" > 상세 주소를 입력하세요. </Form.Control.Feedback>
-                                    </Col>
                                 </Form.Row>
                             </Form.Group>