[FE] feat: '리뷰 생성 중'임을 모여주는 UI 구현

[BadaHertz52]

• resolves [FE] 리뷰 링크 생성 폼에서 링크 생성 시, 로딩 UI를 만든다. #1062

---

🚀 어떤 기능을 구현했나요 ?

• 기존에 리뷰 생성 중일 때 텍스트로 만 보여주었어요. 당시 스피너등 동적인 애니메이션이 추가되었으면 좋겠다는 의견이 있어서, 글씨를 깜박이는 TextBlinkLoader 컴포넌트를 만들어 적용했어요.

button.mov

왜 글씨를 깜빡이는 애니메이션을 사용했는가?

구현 시 아래를 염두해 두고 구현했어요. 스피너의 경우 일정한 높이가 있어야 사용자에 눈에 띄는데 이럴 경우 Layoutshift가 발생해요. 이외에도 여러 애니메이션 효과를 적용해 봤는데, 가장 깔끔하고 고려 조건을 중족하는게 글씨를 깜박이는 거였어요.

구현 시 고려한 사항

• 구현 시 링크 생성 중일 경우와 아닐 때 Layoutshift가 없을 것
• 모바일 같은 작은 화면에서도 무리가 없을 것
• 사용자에게 링크가 생성 중이라는 것이 잘 보여야할 것

🔥 어떻게 해결했나요 ?

TextBlinkLoader의 확장성 범위

• 현재는 TextBlinkLoader안의 글씨만 props로 받고 있어요.
• 폰트 사이즈, 색상, 굵기도 props로 내려줄까 싶었는데, TextBlinkLoader는 이를 사용하는 곳의 스타일을 적용 받을 거라 생각해 지금 단계에서는 내려주지 않기로 했어요. 상황에 따라 추가로 필요하다면 그때 props를 추가해도 될 거라고 생각해요.