From b7ebc69755ac226ca3480219fad0dfbaeda32479 Mon Sep 17 00:00:00 2001
From: johngreen <ramses7448@gmail.com>
Date: Thu, 30 Apr 2026 08:16:37 +0900
Subject: [PATCH] =?UTF-8?q?style(template-thumb):=20solid=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=AC=20=E2=86=92=20=EC=99=80=EC=9D=B4=EC=96=B4=ED=94=84?=
 =?UTF-8?q?=EB=A0=88=EC=9E=84=20(=ED=85=8C=EB=91=90=EB=A6=AC+=ED=88=AC?=
 =?UTF-8?q?=EB=AA=85=20fill)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

기존: 컴포넌트마다 .55 alpha 솔리드 박스 → 화면 스크린샷처럼 보임
변경: 5px inset 패딩 + 각 블록은 .55 테두리 + .14 fill 의 와이어프레임 톤

- KIND_COLOR (rgba 문자열) → KIND_RGB (RGB 트리플 문자열) 로 변경
  → 같은 색을 테두리/배경 다른 알파로 동시 사용 가능
- thumb 안에 dash-lib-card-thumb-canvas wrapper 추가해 padding 적용
- block 은 border-box + border 1px transparent base, 색상은 inline 으로

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/dash/TemplateThumbnail.tsx     | 63 ++++++++++---------
 frontend/styles/dashboard.css                 | 12 ++--
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/frontend/components/dash/TemplateThumbnail.tsx b/frontend/components/dash/TemplateThumbnail.tsx
index 9a3286c2..a4a4a026 100644
--- a/frontend/components/dash/TemplateThumbnail.tsx
+++ b/frontend/components/dash/TemplateThumbnail.tsx
@@ -30,25 +30,26 @@ interface MiniBlock {
   kind: string;
 }
 
-const KIND_COLOR: Record<string, string> = {
-  table: 'rgba(var(--v5-primary-rgb), .55)',
-  form: 'rgba(0, 206, 201, .55)',
-  search: 'rgba(0, 206, 201, .35)',
-  button: 'rgba(253, 121, 168, .65)',
-  'button-bar': 'rgba(253, 121, 168, .55)',
-  stats: 'rgba(var(--v5-primary-rgb), .35)',
-  tabs: 'rgba(var(--v5-primary-rgb), .25)',
-  title: 'rgba(var(--v5-text-rgb, 100, 100, 120), .35)',
-  divider: 'rgba(var(--v5-text-rgb, 100, 100, 120), .25)',
-  pagination: 'rgba(var(--v5-text-rgb, 100, 100, 120), .25)',
+/** 종류별 RGB 트리플 — 테두리/배경 알파를 다르게 적용하기 위해 raw 값을 보관. */
+const KIND_RGB: Record<string, string> = {
+  table: 'var(--v5-primary-rgb)',
+  form: 'var(--v5-cyan-rgb)',
+  search: 'var(--v5-cyan-rgb)',
+  button: '253, 121, 168',
+  'button-bar': '253, 121, 168',
+  stats: 'var(--v5-primary-rgb)',
+  tabs: 'var(--v5-primary-rgb)',
+  title: '140, 140, 160',
+  divider: '140, 140, 160',
+  pagination: '140, 140, 160',
 };
 
-function kindColor(kind: string): string {
+function kindRgb(kind: string): string {
   const lower = (kind || '').toLowerCase();
-  for (const key of Object.keys(KIND_COLOR)) {
-    if (lower.includes(key)) return KIND_COLOR[key];
+  for (const key of Object.keys(KIND_RGB)) {
+    if (lower.includes(key)) return KIND_RGB[key];
   }
-  return 'rgba(var(--v5-primary-rgb), .25)';
+  return 'var(--v5-primary-rgb)';
 }
 
 function inferKind(componentId: string): string {
@@ -185,19 +186,25 @@ export function TemplateThumbnail({ views }: TemplateThumbnailProps) {
 
   return (
     <div className="dash-lib-card-thumb" aria-hidden="true">
-      {blocks.map((b, i) => (
-        <span
-          key={i}
-          className="dash-lib-card-thumb-block"
-          style={{
-            left: `${b.x * 100}%`,
-            top: `${b.y * 100}%`,
-            width: `${Math.max(b.w * 100, 4)}%`,
-            height: `${Math.max(b.h * 100, 8)}%`,
-            background: kindColor(b.kind),
-          }}
-        />
-      ))}
+      <div className="dash-lib-card-thumb-canvas">
+        {blocks.map((b, i) => {
+          const rgb = kindRgb(b.kind);
+          return (
+            <span
+              key={i}
+              className="dash-lib-card-thumb-block"
+              style={{
+                left: `${b.x * 100}%`,
+                top: `${b.y * 100}%`,
+                width: `${Math.max(b.w * 100, 3)}%`,
+                height: `${Math.max(b.h * 100, 6)}%`,
+                background: `rgba(${rgb}, .14)`,
+                borderColor: `rgba(${rgb}, .55)`,
+              }}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 }
diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css
index 319dfc7f..7b68fa29 100644
--- a/frontend/styles/dashboard.css
+++ b/frontend/styles/dashboard.css
@@ -480,16 +480,20 @@
 }
 .dash-lib-card-thumb {
   position: relative; width: 100%; aspect-ratio: 16 / 10;
-  border-radius: 8px; overflow: hidden;
-  background: linear-gradient(135deg, rgba(var(--v5-primary-rgb),.06), rgba(var(--v5-cyan-rgb),.04));
+  border-radius: 8px; overflow: hidden; padding: 5px;
+  background: var(--v5-surface);
   border: 1px solid var(--v5-border);
 }
 .dash-lib-card-thumb--empty {
   display: flex; align-items: center; justify-content: center;
 }
+.dash-lib-card-thumb-canvas {
+  position: relative; width: 100%; height: 100%;
+}
 .dash-lib-card-thumb-block {
-  position: absolute; border-radius: 2px;
-  outline: 1px solid rgba(255,255,255,.06);
+  position: absolute; border-radius: 1.5px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
 }
 .dash-lib-card-name { font-size: .78rem; font-weight: 700; color: var(--v5-text); }
 .dash-lib-card-desc { font-size: .55rem; color: var(--v5-text-muted); line-height: 1.4; }