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,36 +1067,42 @@ 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) => {
<CardV2 const locked = !!ownerSortColumn
key={`card-${index}`} && !!String(row[ownerSortColumn] ?? "")
row={row} && String(row[ownerSortColumn] ?? "") !== (currentUserId ?? "");
cardGrid={cardGrid} return (
spec={spec} <CardV2
config={effectiveConfig} key={`card-${index}`}
onSelect={handleCardSelect} row={row}
cart={cart} cardGrid={cardGrid}
publish={publish} spec={spec}
parentComponentId={componentId} config={effectiveConfig}
isCartListMode={isCartListMode} onSelect={handleCardSelect}
isSelected={selectedKeys.has(String(row.__cart_id ?? ""))} cart={cart}
onToggleSelect={() => { publish={publish}
const cartId = row.__cart_id != null ? String(row.__cart_id) : ""; parentComponentId={componentId}
if (!cartId) return; isCartListMode={isCartListMode}
setSelectedKeys((prev) => { const next = new Set(prev); if (next.has(cartId)) next.delete(cartId); else next.add(cartId); return next; }); isSelected={selectedKeys.has(String(row.__cart_id ?? ""))}
}} onToggleSelect={() => {
onDeleteItem={handleDeleteItem} const cartId = row.__cart_id != null ? String(row.__cart_id) : "";
onUpdateQuantity={handleUpdateQuantity} if (!cartId) return;
onRefresh={fetchData} setSelectedKeys((prev) => { const next = new Set(prev); if (next.has(cartId)) next.delete(cartId); else next.add(cartId); return next; });
selectMode={selectMode} }}
isSelectModeSelected={selectedRowIds.has(String(row.id ?? row.pk ?? ""))} onDeleteItem={handleDeleteItem}
isSelectable={isRowSelectable(row)} onUpdateQuantity={handleUpdateQuantity}
onToggleRowSelect={() => toggleRowSelection(row)} onRefresh={fetchData}
onEnterSelectMode={enterSelectMode} selectMode={selectMode}
onOpenPopModal={openPopModal} isSelectModeSelected={selectedRowIds.has(String(row.id ?? row.pk ?? ""))}
currentUserId={currentUserId} isSelectable={isRowSelectable(row)}
/> onToggleRowSelect={() => toggleRowSelection(row)}
))} onEnterSelectMode={enterSelectMode}
onOpenPopModal={openPopModal}
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);
} }