Merge pull request #32 from WASSUP-Project/develop

[close #30] 대표 주소 입력 시 팝업 기능 구현
WASSUP-Project · Apr 1, 2024 · 80a7c7b · 80a7c7b
2 parents 145457f + 0d1bee6
commit 80a7c7b
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "framer-motion": "^11.0.20",
     "next": "14.1.3",
     "react": "^18",
+    "react-daum-postcode": "^3.1.3",
     "react-dom": "^18",
     "react-hook-form": "^7.51.1",
     "react-use-pagination": "^2.0.1",

diff --git a/src/containers/group/create/CreateGroup.module.css b/src/containers/group/create/CreateGroup.module.css
@@ -9,7 +9,7 @@
 
 .form_container {
     width: 50rem;
-    padding: 2rem 4rem 2rem 4rem;
+    padding: 1.2rem 2.5rem 1.2rem 2.5em;
     background-color: #ffffff;
     border-radius: 0.7rem;
 }
@@ -32,7 +32,7 @@
     padding: 2rem;
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: 1.1rem;
 }
 
 .input_group {

diff --git a/src/containers/group/create/CreateGroup.tsx b/src/containers/group/create/CreateGroup.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { useFormik } from "formik";
 import * as yup from "yup";
+import { useDaumPostcodePopup } from "react-daum-postcode";
 
 import styles from "./CreateGroup.module.css";
 import Spacer from "@/components/Spacer";
@@ -44,6 +45,7 @@ export default function Signup() {
       emailVerificationCode: "",
       businessNumber: "",
       address: "",
+      addressDetail: "",
       groupImage: "",
     },
     validationSchema: validationSchema,
@@ -52,6 +54,43 @@ export default function Signup() {
     },
   });
 
+  const scriptUrl =
+    "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
+  const open = useDaumPostcodePopup(scriptUrl);
+
+  const handleComplete = (data: {
+    address: any;
+    addressType: string;
+    bname: string;
+    buildingName: string;
+  }) => {
+    let fullAddress = data.address;
+    let extraAddress = "";
+
+    if (data.addressType === "R") {
+      if (data.bname !== "") {
+        extraAddress += data.bname;
+      }
+      if (data.buildingName !== "") {
+        extraAddress +=
+          extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName;
+      }
+      fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
+    }
+
+    formik.setFieldValue("address", fullAddress);
+  };
+
+  const handleClick = () => {
+    open({
+      onComplete: handleComplete,
+      width: 500,
+      height: 600,
+      left: window.screen.width / 2 - 500 / 2,
+      top: window.screen.height / 2 - 600 / 2,
+    });
+  };
+
   return (
     <>
       <div className={styles.create_group_container}>
@@ -113,22 +152,45 @@ export default function Signup() {
 
             <div className={styles.input_group}>
               <label htmlFor="address">대표 주소</label>
-              <input
-                type="text"
-                id="address"
-                name="address"
-                placeholder="대표 주소를 입력해주세요."
-                value={formik.values.address}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-              />
+              <div className={styles.inputWithButton}>
+                <input
+                  type="text"
+                  id="address"
+                  name="address"
+                  placeholder="대표 주소를 입력해주세요."
+                  value={formik.values.address}
+                  onChange={formik.handleChange}
+                  readOnly
+                  onBlur={formik.handleBlur}
+                />
+                <button
+                  type="button"
+                  className={styles.button}
+                  onClick={handleClick}
+                >
+                  주소찾기
+                </button>
+              </div>
               {formik.touched.address && formik.errors.address && (
                 <div className={styles.error_message}>
                   {formik.errors.address}
                 </div>
               )}
             </div>
 
+            <div className={styles.input_group}>
+              <label htmlFor="businessNumber">추가 주소 (선택)</label>
+              <input
+                type="text"
+                id="businessNumber"
+                name="addressDetail"
+                placeholder="추가 주소를 입력해주세요."
+                value={formik.values.addressDetail}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+              />
+            </div>
+
             <div className={styles.input_group}>
               <label htmlFor="businessNumber">사업자 번호 (선택)</label>
               <input