유저의 동작에 대한 피드백을 텍스트 팝업 형식으로 보여주는 UI
링크 복사에 성공하면 '클립보드에 복사되었습니다.' 라는 토스트를 띄워보자!
const [toast, setToast] = useState(false);
const copyUrl = async () => {
await navigator.clipboard.writeText(url); // 링크 복사 부분
setToast(true);
};
<img onClick={copyUrl} src={"/copy.png"} alt="공유하기" />
... // 넣고싶은 위치에 넣으시면 됩니다
{toast && <Toast setToast={setToast} text="🖇 클립보드에 복사되었습니다." />}
...
Toast.jsx
import { useEffect } from "react";
function Toast({ setToast, text }) {
useEffect(() => {
const timer = setTimeout(() => {
setToast(false);
}, 1500);
return () => {
clearTimeout(timer);
};
}, [setToast]);
return (
<div>
<p>{text}</p> // 재사용성을 위해 토스트의 내용도 prop로 내려줌
</div>
);
}
export default Toast;