유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

[FE] 리액트 - 36강: 임시 저장 목록 다이얼로그 구현하기 下

구디사는 개발자 9Diin

2025. 9. 13.

0

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

Recommanded Videos