feat: #51 주소 검색 API 프로토타입

client/src/assets/icons/index.ts

@@ -12,6 +12,7 @@ import UNDO_ICON from "./undo_icon.svg";
 import RULER_ICON from "./ruler_icon.svg";
 import LOCATION_ICON from "./location_icon.svg";
 import RUNNING_ICON from "./running_icon.svg";
+import DELETE_ICON from "./delete_icon.svg";
 import USER_ICON from "./user_icon.svg";
 export {
     USER_CIRCLE_ICON,
@@ -28,5 +29,6 @@ export {
     LOCATION_ICON,
     RUNNING_ICON,
     SEARCH_ICON,
+    DELETE_ICON,
     USER_ICON,
 };

client/src/components/AddressList/AddressList.styles.ts

@@ -0,0 +1,31 @@
+import styled, { css } from "styled-components";
+import { COLOR } from "styles/color";
+import { fontMedium } from "styles/font";
+
+const SearchBarItemStyle = css`
+    background: ${COLOR.WHITE};
+    /* opacity: 0.9; */
+    border-radius: 10px;
+    padding: 4px 8px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+`;
+
+export const PlaceList = styled.ul`
+    position: absolute;
+    margin-top: 10px;
+    ${SearchBarItemStyle};
+    background-color: ${COLOR.WHITE};
+    width: 100%;
+    align-items: center;
+    li {
+        ${fontMedium(COLOR.DARK_GRAY, 500)};
+        margin: 2px 0;
+        list-style-type: none;
+    }
+`;
+
+// const params = {};
+// if (filter1) params.filter1 = true;
+// if (filter2) params.filter2 = true;
+// if (filter3) params.filter3 = true;
+// get("/recruit", params);

client/src/components/AddressList/AddressList.tsx

@@ -0,0 +1,20 @@
+import { LocalData } from "#types/Local";
+import { MouseEventHandler } from "react";
+import { PlaceList } from "./AddressList.styles";
+interface AddressListProps {
+    data: LocalData[];
+    onClickLocal: (local: LocalData) => MouseEventHandler;
+}
+
+const AddressList = ({ data, onClickLocal }: AddressListProps) => {
+    return (
+        <PlaceList>
+            {data.map((local) => (
+                <li key={local.address.h_code} onClick={onClickLocal(local)}>
+                    {local.address_name}
+                </li>
+            ))}
+        </PlaceList>
+    );
+};
+export default AddressList;

client/src/components/Input/Input.style.ts

@@ -25,6 +25,10 @@ export const InputWrapper = styled.div<{ width: string }>`
         [type="number"] {
             -moz-appearance: textfield;
         }
+
+        :disabled {
+            background: none;
+        }
     }
     p {
         color: ${COLOR.BABY_BLUE};

client/src/components/Input/Input.tsx

@@ -7,16 +7,20 @@ interface InputProps {
     width?: string;
     subText?: ReactNode;
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    value?: string;
 }
 
-const Input = ({ width, type = "text", placeholder, subText, onChange }: InputProps) => {
+const Input = ({ width, type = "text", placeholder, subText, onChange, disabled = false, value }: InputProps) => {
     return (
         <InputWrapper width={width ?? "100%"}>
             <input
                 onChange={onChange}
                 placeholder={placeholder}
                 type={type}
                 style={{ width: subText ? "80%" : "100%" }}
+                disabled={disabled}
+                value={value}
             />
             {subText && <p>{subText}</p>}
         </InputWrapper>

client/src/components/ResetButton/ResetButton.tsx

@@ -0,0 +1,11 @@
+import { DELETE_ICON } from "#assets/icons";
+
+interface ResetButtonProps {
+    width?: string;
+    onClick: () => void;
+}
+
+const ResetButton = ({ width, onClick }: ResetButtonProps) => {
+    return <img style={{ width }} onClick={onClick} src={DELETE_ICON}></img>;
+};
+export default ResetButton;

client/src/hooks/http/useHttpGet.ts

@@ -7,7 +7,7 @@ const useGet = () => {
         setIsLoading(true);
         return axios
             .get(url, {
-                data: query,
+                params: query,
             })
             .then((res) => {
                 setIsLoading(false);

client/src/pages/SignUp.styles.ts

@@ -17,7 +17,7 @@ export const InputWrapper = styled.div`
     padding: 0 40px;
     margin-bottom: 40px;
     div {
-        display: block;
+        /* display: block; */
         input {
             font-size: 1.4rem;
         }

client/src/pages/SignUp.tsx

@@ -1,39 +1,72 @@
-import React from "react";
+import React, { ChangeEvent, MouseEventHandler, useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Header from "#components/Header/Header";
 import Input from "#components/Input/Input";
 import Button from "#components/Button/Button";
 import useInput from "#hooks/useInput";
-import { confirmPasswordValidator, idValidator, passwordValidator, hCodeValidator } from "#utils/valitationUtils";
+import { confirmPasswordValidator, idValidator, passwordValidator } from "#utils/valitationUtils";
 import { InputWrapper, LogoWrapper, OptionsWrapper } from "./SignUp.styles";
 import { PLACEHOLDER } from "#constants/placeholder";
 import usePaceInput from "#hooks/usePaceInput";
 import PaceInput from "#components/Input/PaceInput/PaceInput";
 import useHttpPost from "#hooks/http/useHttpPost";
+import useLocalAPI from "#hooks/useLocalAPI";
+import { LocalData, LocalSearchResponse } from "#types/Local";
+import ResetButton from "#components/ResetButton/ResetButton";
+import AddressList from "#components/AddressList/AddressList";
 
 const SignUp = () => {
     const [userId, onChangeUserId, userIdError] = useInput(idValidator);
     const [password, onChangePassword, passwordError] = useInput(passwordValidator);
     const [confirmPassword, onChangeConfirmPassword, confirmPasswordError] = useInput(
         confirmPasswordValidator(String(password)),
     );
+    const query = useLocalAPI<LocalSearchResponse>("/search/address.json");
+    const [searchResult, setSearchResult] = useState<LocalData[]>([]);
+    const [hDong, setHDong] = useState({ name: "", code: "" });
     const { post } = useHttpPost();
-    const [hCode, onChangeHCode, hCodeError] = useInput(hCodeValidator);
     const { pace, onChangeMinute, onChangeSecond } = usePaceInput();
     const navigate = useNavigate();
 
-    const checkFormValidation = () => confirmPassword && password && userId && hCode;
+    const checkFormValidation = () => confirmPassword && password && userId && hDong.code;
 
     const onSubmitSignUp = async () => {
         if (!checkFormValidation()) return;
         try {
-            await post("/user", { userId, password, hCode, pace: pace.minute * 60 + pace.second });
+            await post("/user", { userId, password, hCode: hDong.code, pace: pace.minute * 60 + pace.second });
             navigate("/", { replace: true });
         } catch (error: any) {
             alert(error.message);
         }
     };
 
+    const onClickLocalData = useCallback(
+        (local: LocalData): MouseEventHandler<HTMLDivElement> =>
+            () => {
+                setHDong({ name: local.address_name, code: local.address.h_code });
+                setSearchResult([]);
+            },
+        [],
+    );
+
+    const onChangeHName = (e: ChangeEvent<HTMLInputElement>) => setHDong((prev) => ({ ...prev, name: e.target.value }));
+
+    const onClickResetButton = useCallback(() => {
+        setHDong({ name: "", code: "" });
+    }, []);
+
+    useEffect(() => {
+        if (hDong.code) return;
+        (async () => {
+            const result = await query({ analyze_type: "exact", size: 20, query: hDong.name });
+            setSearchResult(result.documents.filter(isEupMyeonDong));
+        })();
+    }, [hDong]);
+
+    const isEupMyeonDong = useCallback((local: LocalData) => {
+        return local.address_type === "REGION" && local.address.region_3depth_h_name;
+    }, []);
+
     return (
         <>
             <Header loggedIn={false} text="회원가입"></Header>
@@ -50,8 +83,16 @@ const SignUp = () => {
                 ></Input>
                 <span>{confirmPasswordError}</span>
                 <PaceInput onChangeMinute={onChangeMinute} onChangeSecond={onChangeSecond}></PaceInput>
-                <Input placeholder={PLACEHOLDER.ZIP_CODE} type="number" onChange={onChangeHCode}></Input>
-                <span>{hCodeError}</span>
+                <div style={{ width: "100%", position: "relative" }}>
+                    <Input
+                        placeholder={PLACEHOLDER.ZIP_CODE}
+                        value={hDong.name}
+                        onChange={onChangeHName}
+                        disabled={hDong.code.length > 0}
+                        subText={hDong.code.length > 0 && <ResetButton width="1.2rem" onClick={onClickResetButton} />}
+                    />
+                    {searchResult.length > 0 && <AddressList data={searchResult} onClickLocal={onClickLocalData} />}
+                </div>
                 <Button width="fill" onClick={onSubmitSignUp}>
                     회원가입
                 </Button>

client/src/types/Course.ts

@@ -1,5 +1,4 @@
 import { hDong } from "./hDong";
-import { LatLng } from "./LatLng";
 
 export interface Course {
     id: number;

client/src/utils/valitationUtils.ts

@@ -13,7 +13,7 @@ export const confirmPasswordValidator = (password: string) => (confirmPassword:
     return password !== confirmPassword || !confirmPassword ? "비밀번호가 일치하지 않습니다" : "";
 };
 
-export const hCodeValidator = (hCode: string) => {
+export const hNameValidator = (hCode: string) => {
     return hCode.length === 10 ? "" : "지역을 입력하세요";
 };