[리액트] react-daum-postcode 우편번호 검색 컴포넌트 예시

import {
    Button,
    Container,
    ModalBody,
    ModalFooter,
    Row,
} from "@doar/components";
import { Dispatch, SetStateAction, useState } from "react";
import DaumPostcode from "react-daum-postcode";
import { Address } from "react-daum-postcode/lib/loadPostcode";

interface IFindAddress {
    setAddress: Dispatch<SetStateAction<string>>;
    onClose: () => void;
}

const FindAddress = ({ setAddress, onClose }: IFindAddress) => {
    const style = {
        display: "flex",
    };

    const [selectedAddress, setSelectedAddress] = useState("");
    const onComplete = (data: Address) => {
        console.log(data);
        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})` : "";
        }
        setSelectedAddress(fullAddress);
    };

    const saveHandler = () => {
        setAddress(selectedAddress);
        setSelectedAddress("");
        onClose();
    };

    const cancelHandler = () => {
        setSelectedAddress("");
        onClose();
    };
    return (
        <>
            <ModalBody>
                <DaumPostcode autoClose style={style} onComplete={onComplete} />
                {selectedAddress ? (
                    <p>
                        <b>{selectedAddress}</b> 저장하시겠습니까?{" "}
                    </p>
                ) : null}
            </ModalBody>
            {selectedAddress ? (
                <ModalFooter>
                    <Button onClick={saveHandler}>확인</Button>
                    <Button onClick={cancelHandler}>취소</Button>
                </ModalFooter>
            ) : null}
        </>
    );
};

export default FindAddress;