전반적인 UI/UX 점검 및 개선

[GulSam00]

코드베이스 전반을 훑어 로딩/빈 상태/에러 상태/접근성/반응형/삭제 UX 관련 불일치와 누락을 정리한다. 각 항목은 기존 코드의 실제 패턴을 근거로 한다.

작업 체크리스트

로딩 상태

• /info/save 페이지에 로딩 인디케이터 추가 (/recent, /info/like 패턴 참고)
• 전체 화면 오버레이(StaticLoading) vs 인라인 스피너 중 하나로 로딩 패턴 통일 — SongCommentSection.tsx의 인라인 스피너는 페이지 전체가 아닌 카드 내부 하위 섹션(댓글 목록)이라 StaticLoading으로 바꾸지 않고 그대로 유지. 그 외 페이지 단위 로딩은 모두 StaticLoading으로 통일되어 있음을 확인.

빈 상태

• "결과 없음" UI 3종(캐릭터 일러스트 / 텍스트 블록 / 아이콘 블록) 중 하나로 통일 — info/save, info/reports, admin/reports, popular/ChartRankingList.tsx를 모두 CharacterMessage로 교체

에러 상태

• 검색(HomePage.tsx)에서 API 에러와 "검색 결과 없음"을 구분해 표시 (isError 활용)
• ChartRankingList.tsx에서 API 에러와 "데이터 준비중"을 구분해 표시
• search/, popular/, tosing/, info/ 경로에 route-level error.tsx 추가

접근성

• 아이콘 전용 뒤로가기 버튼에 aria-label 추가 (admin/reports, info/save, info/reports, info/promotions, info/point-logs, info/like, patch-notes, recent 등)
• Header.tsx의 ExpandableButton(테마 토글, 출석체크, 문의)에 aria-label 추가 — 전 페이지 노출
• Sidebar.tsx (GitHub 링크, 닉네임 수정/취소 버튼), ChatBot.tsx (닫기/전송/초기화 버튼), SongCommentSection.tsx·ReportItem.tsx (삭제 버튼)에 aria-label 추가 — ReportItem.tsx는 이미 적용되어 있어 확인만 함

반응형

• ChatBot.tsx의 fixed 위치를 뷰포트 기준이 아니라 앱의 max-w-md 컬럼 기준으로 수정 (PromotionBanner 패턴 참고)

삭제 UX

• /tosing 곡 삭제에 확인 단계 + 완료 토스트 추가 (/info/save, /info/reports의 확인 모달 패턴과 일치시킴)