반응형
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;
반응형
'웹_프론트엔드 > React' 카테고리의 다른 글
[리액트] gh-pages 배포 후 새로고침시 404 오류 (1) | 2024.03.17 |
---|---|
[리액트] 컴파운드 컴포넌트 패턴으로 작성하는 모달 컴포넌트 (+ dialogue 태그 활용) (0) | 2023.09.18 |
[JSX] 조건에 따른 JSX 작성 패턴 - if, switch, object 구조 (0) | 2023.07.19 |
리액트 JSX/TSX에서 switch 문법 사용하기 (0) | 2023.02.03 |
[React.ts] props로 setState 넘길 때 타입 지정하는 방법 (0) | 2022.12.19 |