feat(ui): P4-4 별점 공통화 + 로그인 모달 접근성 (#281+#283)

#281 (리뷰/메모 UI):
- Stars 컴포넌트 신규 (lib 분리 가능한 공통 별점) — 0.5 단위 절반 채우기 시각 구분
- ReviewSection/MemoSection의 StarDisplay 제거 → 공통 Stars 사용 (시각 일관성)
- StarSelector: role='radiogroup'/role='radio' + aria-checked, 44×44px 터치 영역,
  반쪽 별 '⯨' 표시로 시각 차별화
- ReviewSection/MemoSection: API 실패 try/catch + alert 사용자 피드백
- MyReviewsList: Math.round 별점 → Stars 0.5단위 정확 렌더

#283 (로그인 메뉴):
- LoginMenu: useEscapeKey + useFocusTrap + useBodyScrollLock 적용
- role='dialog' / aria-modal / aria-labelledby / aria-label='로그인 창 닫기'
- onError 콘솔만 → 인라인 role='alert' 메시지로 사용자 피드백
- max-w-xs → max-w-sm (위젯 260px + 패딩 24px = 308px 안전 수용)

후속 분리:
- #343 (next/image + ARIA Tabs + Stars 테스트)
- #344 (z-index 토큰 + i18n)

Refs: #281 #283
This commit is contained in:
joungmin
2026-06-15 14:33:15 +09:00
parent ea8db4bef3
commit bff3dcc200
5 changed files with 160 additions and 98 deletions

View File

@@ -3,6 +3,7 @@
import { useState } from "react";
import type { Review, Memo } from "@/lib/api";
import Icon from "@/components/Icon";
import Stars from "@/components/Stars";
interface MyReview extends Review {
restaurant_id: string;
@@ -82,9 +83,9 @@ export default function MyReviewsList({
<span className="font-semibold text-sm truncate">
{r.restaurant_name || "알 수 없는 식당"}
</span>
<span className="text-yellow-500 text-sm shrink-0 ml-2">
{"★".repeat(Math.round(r.rating))}
<span className="text-gray-500 ml-1">{r.rating}</span>
<span className="text-sm shrink-0 ml-2 flex items-center gap-1">
<Stars rating={r.rating} />
<span className="text-gray-500">{r.rating}</span>
</span>
</div>
{r.review_text && (
@@ -118,9 +119,9 @@ export default function MyReviewsList({
{m.restaurant_name || "알 수 없는 식당"}
</span>
{m.rating && (
<span className="text-yellow-500 text-sm shrink-0 ml-2">
{"★".repeat(Math.round(m.rating))}
<span className="text-gray-500 ml-1">{m.rating}</span>
<span className="text-sm shrink-0 ml-2 flex items-center gap-1">
<Stars rating={m.rating} />
<span className="text-gray-500">{m.rating}</span>
</span>
)}
</div>