[Feat] Toast 메시지 개발 방식 변경

[wjdwl002]

현재는 아래와 같이 토스트 메시지를 띄울때마다 전역 상태를 업데이트하고, 전역 상태를 감지하면 메시지가 떠오르게 구현되어있음

Frontend/src/components/_styled/Toast.tsx

Lines 6 to 26 in b0dd564

	const Toast = () => {
	const [toastObj, setToastObj] = useRecoilState(toastMsgState);
	useEffect(() => {
	if (toastObj.show)
	setTimeout(() => {
	setToastObj({ msg: "", show: false });
	console.log(toastObj.show);
	}, 2000);
	}, [toastObj.show]);
	return (
	<ToastDiv className="toast" style={{ transform: "translate(-50%, -50%)" }}>
	{toastObj.show && (
	<AlertDiv className="alert alert-info">
	<div>{toastObj.msg}</div>
	</AlertDiv>
	)}
	</ToastDiv>
	);
	};

이 방식의 문제점은 다음과 같음

• 토스트 메시지를 짧은 시간 내 여러번 띄우려할때 부드럽게 메시지간 전환이 어려움
• setTimeout 으로 관리하는 방식은 이상 행동을 유발할 수 있음

따라서, 해당 로직을
메시지 버튼을 누를때마다 함수를 실행시키고, 이에 따라 동적으로 컴포넌트를 만들었다가 destroy 하는 방식으로 변경하고자함