feat(music): 음악 메모 좋아요 버튼 UI 추가 및 낙관적 업데이트 적용

[alstj0127]

개요 #185

• 음악 메모 상세 페이지에 좋아요 버튼을 추가하고 낙관적 업데이트를 적용함.
• 전송 중 중복 클릭 방지, 접근성 속성, 경고 제거를 포함.
• SCSS Modules는 기존 컨벤션(kebab-case in SCSS, camelCase in TSX)을 유지.

변경 사항

• app/features/music/pages/music.user.tsx
  • LikeButton 컴포넌트 추가
  • useFetcher 기반 낙관적 업데이트 적용
  • 전송 중 상태(submitting)에서 버튼 비활성화
  • aria-pressed, aria-live 등 접근성 보강
  • 미사용 변수 경고 해결을 위해 memoId를 _memoId로 리네임
• app/features/music/pages/music.user.module.scss
  • like-form, like-button, liked, loading, heart, like-count 스타일 추가
  • 하트 아이콘 애니메이션(pulse) 및 전송 중 breathe 효과 추가
  • 페이지 레이아웃 관련 클래스는 기존 컨벤션 유지
• 아이콘
  • outline 스타일 하트 SVG로 교체, currentColor 상속으로 상태 색상 일관성 유지

스크린샷

(좋아요 누르기 전)

(좋아요 누른 후)

추후 작업(동시 접근 대비, 서버 권위적 카운트)

• 목표: 다중 탭/다중 사용자 동시 클릭 시 카운트 불일치 방지, 레이스 컨디션 제거.
• 서버 액션 개선
  • 트랜잭션으로 upsert/deleteMany 후, memoLikesUser.count로 정확한 카운트 재계산하여 userMusicMemo.likes를 업데이트.
  • 응답 payload에 likeCount 포함.

[dongcheolpark]

아마 useMemo 쓸 필요 없이 리믹스 기능으로 해결 가능할텐데, 잘 동작하니 일단 어프로브 드리겟습니다