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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user