fix: LOCK-OWNER 카드 비활성화 UI 누락분 반영

a2c532c7 커밋에서 누락된 CardV2 잠금 UI를 반영한다.
- locked 계산: ownerSortColumn 값이 존재하고 현재 사용자와 불일치 시 true
- isLockedByOther prop을 CardV2에 전달
- 잠금 카드: opacity-50, cursor-not-allowed, onClick/onKeyDown 차단, tabIndex=-1
This commit is contained in:
SeongHyun Kim 2026-03-13 14:23:26 +09:00
parent c067c37390
commit c4d7b16538
1 changed files with 46 additions and 32 deletions

View File

@ -1067,7 +1067,11 @@ export function PopCardListV2Component({
className={`min-h-0 flex-1 grid ${scrollClassName}`} className={`min-h-0 flex-1 grid ${scrollClassName}`}
style={{ ...cardAreaStyle, alignContent: "start", justifyContent: isHorizontalMode ? "start" : "center" }} style={{ ...cardAreaStyle, alignContent: "start", justifyContent: isHorizontalMode ? "start" : "center" }}
> >
{displayCards.map((row, index) => ( {displayCards.map((row, index) => {
const locked = !!ownerSortColumn
&& !!String(row[ownerSortColumn] ?? "")
&& String(row[ownerSortColumn] ?? "") !== (currentUserId ?? "");
return (
<CardV2 <CardV2
key={`card-${index}`} key={`card-${index}`}
row={row} row={row}
@ -1095,8 +1099,10 @@ export function PopCardListV2Component({
onEnterSelectMode={enterSelectMode} onEnterSelectMode={enterSelectMode}
onOpenPopModal={openPopModal} onOpenPopModal={openPopModal}
currentUserId={currentUserId} currentUserId={currentUserId}
isLockedByOther={locked}
/> />
))} );
})}
</div> </div>
{/* 선택 모드 하단 액션 바 */} {/* 선택 모드 하단 액션 바 */}
@ -1394,16 +1400,24 @@ function CardV2({
return ( return (
<div <div
className={`relative flex cursor-pointer flex-col rounded-lg border bg-card shadow-sm transition-all duration-150 hover:shadow-md ${borderClass}`} className={cn(
"relative flex flex-col rounded-lg border bg-card shadow-sm transition-all duration-150",
isLockedByOther
? "cursor-not-allowed opacity-50"
: "cursor-pointer hover:shadow-md",
borderClass,
)}
style={{ minHeight: `${spec.height}px` }} style={{ minHeight: `${spec.height}px` }}
onClick={() => { onClick={() => {
if (isLockedByOther) return;
if (selectMode && isSelectable) { onToggleRowSelect?.(); return; } if (selectMode && isSelectable) { onToggleRowSelect?.(); return; }
if (!selectMode) onSelect?.(row); if (!selectMode) onSelect?.(row);
}} }}
role="button" role="button"
tabIndex={0} tabIndex={isLockedByOther ? -1 : 0}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") { if (e.key === "Enter" || e.key === " ") {
if (isLockedByOther) return;
if (selectMode && isSelectable) { onToggleRowSelect?.(); return; } if (selectMode && isSelectable) { onToggleRowSelect?.(); return; }
if (!selectMode) onSelect?.(row); if (!selectMode) onSelect?.(row);
} }