- 리액트를 사용하여 임시 저장된 토픽 목록을 보여주는 다이얼로그 UI를 구현 🛠️
- 데이터 유무에 따라 다른 UI를 보여주어 사용자 경험을 개선 (데이터 없을 시 '조회 가능한 정보가 없습니다' 메시지 출력) 💬
- Grid와 Flexbox를 활용하여 UI 레이아웃을 구성하고, 간격 및 패딩을 조절하여 시각적 균형을 맞춤 📏
- 텍스트 색상, 크기, 폰트 등을 조정하여 정보의 중요도를 시각적으로 표현 🎨
- 임시 저장된 토픽이 없을 경우, 가운데 정렬된 메시지를 표시하여 사용자에게 명확한 안내 제공 ℹ️
- 다이얼로그 푸터와 닫기 버튼을 추가하여 사용자 인터랙션을 용이하게 함 🚪
- 닫기 버튼 클릭 시 다이얼로그가 닫히는 기능을 구현하여 사용 편의성을 높임 ✅
- 임시 저장된 토픽 목록을 세로로 배치하고, 각 항목에 배지 UI를 추가하여 시각적 강조 📌
- 배지 UI를 커스터마이징하여 배경색, 텍스트 색상, 크기 등을 조절하고, 호버 효과를 추가하여 인터랙티브한 경험 제공 ✨
- 작성일 또는 생성일 정보를 추가하여 토픽의 최신성을 사용자에게 제공 📅
- Flexbox를 사용하여 제목과 날짜 정보를 양 끝으로 정렬하고, 호버 시 배경색 변경 효과를 추가하여 시각적 피드백 제공 🖱️
- 마우스 커서를 포인터로 변경하여 클릭 가능함을 시각적으로 나타냄 손가락으로 가리키는 이모지
- 다음 시간에는 Firebase DB에서 데이터를 조회하여 임시 저장된 토픽 목록을 표시하는 기능 구현 예정 🚀
Recommanded Videos
