From 7a9a705f19709464ff9960c995187c179b0b63e6 Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Thu, 5 Mar 2026 18:34:45 +0900
Subject: [PATCH] =?UTF-8?q?feat(pop-card-list):=20=ED=8F=AC=EC=9E=A5=20?=
 =?UTF-8?q?=EC=9A=94=EC=95=BD=20=EB=B0=94=20UI=20+=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20flex=20column=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20=ED=8F=AC=EC=9E=A5=20=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EC=8B=9C=20=EC=B9=B4=EB=93=9C=20=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=EC=97=90=20=ED=8F=AC=EC=9E=A5=20=EB=82=B4=EC=97=AD=20?=
 =?UTF-8?q?=EC=9A=94=EC=95=BD=EC=9D=84=20=ED=91=9C=EC=8B=9C=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20=EB=94=94=EC=9E=90=EC=9D=B4=EB=84=88=EA=B0=80=20?=
 =?UTF-8?q?=ED=8F=AC=EC=9E=A5=20=EA=B3=84=EC=82=B0=20=EA=B2=B0=EA=B3=BC?=
 =?UTF-8?q?=EB=A5=BC=20=EC=A6=89=EC=8B=9C=20=ED=99=95=EC=9D=B8=ED=95=A0=20?=
 =?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=ED=95=9C=EB=8B=A4.?=
 =?UTF-8?q?=20-=20=EC=B9=B4=EB=93=9C=20=ED=95=98=EB=8B=A8=EC=97=90=20?=
 =?UTF-8?q?=ED=8F=AC=EC=9E=A5=20=EC=9A=94=EC=95=BD=20=EB=B0=94=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(emerald=20=ED=85=8C=EB=A7=88,=20=ED=8F=AC=EC=9E=A5?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EB=B1=83=EC=A7=80)=20-=20height(=EA=B3=A0?=
 =?UTF-8?q?=EC=A0=95)=20->=20minHeight(=EC=9C=A0=EB=8F=99)=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=B9=B4=EB=93=9C=20=EC=9E=90=EC=97=B0=20=EC=84=B1?=
 =?UTF-8?q?=EC=9E=A5=20=ED=97=88=EC=9A=A9=20-=20gridAutoRows=EB=A5=BC=20mi?=
 =?UTF-8?q?nmax(=EB=86=92=EC=9D=B4,=20auto)=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=20(=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EC=85=80=EB=8F=84=20?=
 =?UTF-8?q?=EC=84=B1=EC=9E=A5)=20-=20=EC=B9=B4=EB=93=9C=20flex=20flex-col?=
 =?UTF-8?q?=20+=20=EB=B3=B8=EB=AC=B8=20flex-1=20overflow-hidden=20?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20-=20=EC=98=A4=EB=A5=B8=EC=AA=BD=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=98=81=EC=97=AD=20justify-center=20->?=
 =?UTF-8?q?=20justify-start=20(=EC=9C=84=EC=AA=BD=20=EC=A0=95=EB=A0=AC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pop-card-list/PopCardListComponent.tsx    | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

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 (
     <div
-      className={`relative cursor-pointer rounded-lg border bg-card shadow-sm transition-all duration-150 hover:shadow-md ${borderClass}`}
+      className={`relative flex cursor-pointer flex-col rounded-lg border bg-card shadow-sm transition-all duration-150 hover:shadow-md ${borderClass}`}
       style={cardStyle}
       onClick={handleCardClick}
       role="button"
@@ -1157,7 +1157,7 @@ function Card({
       )}
 
       {/* 본문 영역 */}
-      <div className="flex" style={bodyStyle}>
+      <div className="flex flex-1 overflow-hidden" style={bodyStyle}>
         {/* 이미지 (왼쪽) */}
         {image?.enabled && (
           <div className="shrink-0">
@@ -1199,7 +1199,7 @@ function Card({
         {/* 오른쪽: 수량 버튼 + 담기/취소/삭제 버튼 */}
         {(inputField?.enabled || cartAction || isCartListMode) && (
           <div
-            className="ml-2 flex shrink-0 flex-col items-stretch justify-center gap-2"
+            className="ml-2 flex shrink-0 flex-col items-stretch justify-start gap-2"
             style={{ minWidth: "100px" }}
           >
             {/* 수량 버튼 (입력 필드 ON일 때만) */}
@@ -1268,6 +1268,37 @@ function Card({
         )}
       </div>
 
+      {/* 포장 요약 바: 본문 아래에 표시 */}
+      {hasPackageEntries && (
+        <div className="border-t bg-emerald-50">
+          {packageEntries.map((entry, idx) => (
+            <div
+              key={idx}
+              className="flex items-center justify-between px-3 py-1.5"
+            >
+              <div className="flex items-center gap-2">
+                <span className="rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] font-bold text-white">
+                  포장완료
+                </span>
+                <Package className="h-4 w-4 text-emerald-600" />
+                <span
+                  className="font-medium text-emerald-700"
+                  style={{ fontSize: `${scaled.bodyTextSize}px` }}
+                >
+                  {entry.packageCount}{entry.unitLabel} x {entry.quantityPerUnit}
+                </span>
+              </div>
+              <span
+                className="font-bold text-emerald-700"
+                style={{ fontSize: `${scaled.bodyTextSize}px` }}
+              >
+                = {entry.totalQuantity.toLocaleString()}{inputField?.unit || "EA"}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
       {inputField?.enabled && (
         <NumberInputModal
           open={isModalOpen}