diff --git a/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx b/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx index c3bfb661..f6a1c5c3 100644 --- a/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx +++ b/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx @@ -730,14 +730,13 @@ export function PopCardListComponent({ gap: `${scaled.gap}px`, ...(isHorizontalMode ? { - gridTemplateRows: `repeat(${gridRows}, ${scaled.cardHeight}px)`, + gridTemplateRows: `repeat(${gridRows}, minmax(${scaled.cardHeight}px, auto))`, gridAutoFlow: "column", gridAutoColumns: `${scaled.cardWidth}px`, } : { - // 세로 모드: 1fr 비율 기반으로 컨테이너 너비 초과 방지 gridTemplateColumns: `repeat(${gridColumns}, 1fr)`, - gridAutoRows: `${scaled.cardHeight}px`, + gridAutoRows: `minmax(${scaled.cardHeight}px, auto)`, }), }; @@ -1008,9 +1007,10 @@ function Card({ } }, [effectiveMax, inputField?.enabled, limitCol, isCartListMode]); + const hasPackageEntries = packageEntries.length > 0; + const cardStyle: React.CSSProperties = { - height: `${scaled.cardHeight}px`, - overflow: "hidden", + minHeight: `${scaled.cardHeight}px`, }; const headerStyle: React.CSSProperties = { @@ -1116,7 +1116,7 @@ function Card({ return (
+
{/* 이미지 (왼쪽) */} {image?.enabled && (
@@ -1199,7 +1199,7 @@ function Card({ {/* 오른쪽: 수량 버튼 + 담기/취소/삭제 버튼 */} {(inputField?.enabled || cartAction || isCartListMode) && (
{/* 수량 버튼 (입력 필드 ON일 때만) */} @@ -1268,6 +1268,37 @@ function Card({ )}
+ {/* 포장 요약 바: 본문 아래에 표시 */} + {hasPackageEntries && ( +
+ {packageEntries.map((entry, idx) => ( +
+
+ + 포장완료 + + + + {entry.packageCount}{entry.unitLabel} x {entry.quantityPerUnit} + +
+ + = {entry.totalQuantity.toLocaleString()}{inputField?.unit || "EA"} + +
+ ))} +
+ )} + {inputField?.enabled && (