fix(room-select): 룸 카드 중첩 버튼 hydration 에러 수정
맥락: - /app 룸 카드에서 카드 전체를 버튼으로 사용하면서 내부 Chip도 버튼으로 렌더링되어 HTML 중첩 버튼 규칙을 위반했다. - Next.js hydration 단계에서 콘솔 에러가 발생해 UI 신뢰도와 디버깅 효율을 저하시켰다. 변경사항: - RoomPreviewCard 내부의 Chip 컴포넌트 사용을 제거했다. - 카드 내부 태그/추천 정보 칩을 비인터랙티브 span 스타일로 교체해 버튼 중첩 구조를 해소했다. - 세션 문서(90_current_state, session_brief)에 이번 에러 수정 내역을 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 룸 카드의 중첩 버튼 hydration 에러 해소 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 밝은 배경 구간에서 white 텍스트 대비가 약해질 수 있어 기기별 시인성 점검 필요
This commit is contained in:
@@ -1,6 +1,5 @@
|
||||
import type { RoomTheme } from '@/entities/room';
|
||||
import { getRoomBackgroundStyle } from '@/entities/room';
|
||||
import { Chip } from '@/shared/ui';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface RoomPreviewCardProps {
|
||||
@@ -37,9 +36,12 @@ export const RoomPreviewCard = ({
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{room.tags.map((tag) => (
|
||||
<Chip key={tag} tone="muted" className="!cursor-default">
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center gap-1 rounded-full bg-slate-300/25 px-3 py-1.5 text-xs font-medium text-slate-100 ring-1 ring-slate-200/40"
|
||||
>
|
||||
{tag}
|
||||
</Chip>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -48,12 +50,12 @@ export const RoomPreviewCard = ({
|
||||
추천 사운드: <span className="font-medium text-white">{room.recommendedSound}</span>
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Chip tone="accent" className="!cursor-default">
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-sky-300/25 px-3 py-1.5 text-xs font-medium text-sky-100 ring-1 ring-sky-200/55">
|
||||
추천 시간 · {room.recommendedTime}
|
||||
</Chip>
|
||||
<Chip tone="neutral" className="!cursor-default">
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1.5 text-xs font-medium text-white/90 ring-1 ring-white/20">
|
||||
지금 분위기 · {room.vibeLabel}
|
||||
</Chip>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user