[TIL] 토스트 메세지 (Toast Message) 띄우기

인스타에서 북마크를 하면 토스트 메시지가 이미지 제일 하단에 뜨는데,
어찌된 영문인지 최근 내 웹에서는 절대 뜨질 않아서 다른분께 도움을 받아서 작업을 했음.
왜 안뜨는지는 아직도 의문.. 다른 부분에서도 변덕이 심한 인스타!

이 작업을 위해 고려해야 할 사항들은
1. 북마크를 저장할 때에만 띄워줘야 함. (취소할 땐 띄우면 안됨)
2. 따로 공간을 차지하는게 아니라, 이미지 하단에 띄워줘야 함.
3. 메세지가 떴다가, 일정 시간이 지나면 자연스럽게 사라져야 함.

---

< 1. 북마크를 저장할 때에만 띄워줘야 함. (취소할 땐 띄우면 안됨) >

저장할때의 상태 관리를 위해 state (초기값 false)를 넣어서
북마크 저장하는 온클릭 핸들러에, 북마크가 눌려있지 않다가 눌릴 때만 toast를 띄워주게 했고

---

< 2. 따로 공간을 차지하는게 아니라, 이미지 하단에 띄워줘야 함 >

이미지에 relative를 주고, toast쪽에 absolute와 bottom에 0을 줘서
1번이 true일 때, 이미지 하단에 toast되게 만들었음. 

---

< 3. 메세지가 떴다가, 일정 시간이 지나면 자연스럽게 사라져야 함 >

js 애니메이션 fade out과 keyframes opacity를 줘서 최대한 자연스러워보이게 구현하도록 노력했당
keyframes 위에 opacity의 초기값을 0으로 줘서 애니메이션이 작동될 때, 약간의 버벅임을 방지해줬음.

---

※ 참고 : https://engkimbs.tistory.com/922

※ 참고 : https://jess2.xyz/css/fade-in-out/

※ 참고 : https://r4bb1t.tistory.com/48