From 6395f4d032dc3fa9d4b8fe3b8f1c150d8e6d300b Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Mon, 16 Mar 2026 09:17:59 +0900
Subject: [PATCH] Implement Card Pulse Animation and UI Enhancements

- Added a new pulse animation for screen cards to enhance visual feedback.
- Updated the background of the screen management list for improved aesthetics.
- Refined the search input styling for better integration with the overall UI.
- Enhanced screen card hover effects with dynamic glow based on screen type.
- Adjusted layout spacing for a more consistent user experience.

Made-with: Cursor
---
 .../admin/screenMng/screenMngList/page.tsx    | 121 +++++++++++-------
 frontend/app/globals.css                      |  15 +++
 2 files changed, 87 insertions(+), 49 deletions(-)

diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
index e6bbf480..2978e025 100644
--- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
@@ -299,16 +299,16 @@ export default function ScreenManagementPage() {
           </div>
         </div>
       ) : (
-        <div className="flex-1 overflow-auto p-6">
+        <div className="flex-1 overflow-auto p-6 bg-muted/30 dark:bg-background">
           {/* 카드 뷰 상단: 검색 + 카운트 */}
-          <div className="flex items-center gap-3 mb-4">
+          <div className="flex items-center gap-3 mb-5">
             <div className="relative flex-1 max-w-sm">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <Input
                 placeholder="화면 검색..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-9 h-9 rounded-xl bg-muted/30 dark:bg-muted/30 border-border/50 dark:border-border/50 focus:bg-background focus:ring-2 focus:ring-primary/30 transition-colors"
+                className="pl-9 h-9 rounded-xl bg-card dark:bg-card border-border/50 shadow-sm focus:bg-card focus:ring-2 focus:ring-primary/30 transition-colors"
               />
               {searchTerm && (
                 <button
@@ -324,55 +324,78 @@ export default function ScreenManagementPage() {
             <span className="text-xs text-muted-foreground">{filteredScreens.length}개 화면</span>
           </div>
           <div className="grid grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
-            {filteredScreens.map((screen) => (
-              <div
-                key={screen.screenId}
-                className={`group relative overflow-hidden rounded-[10px] border cursor-pointer transition-all duration-200 ${
-                  selectedScreen?.screenId === screen.screenId
-                    ? "border-primary/40 bg-card shadow-[0_0_0_1px_hsl(var(--primary)/0.4)]"
-                    : "border-border/40 dark:border-border/10 bg-card dark:bg-card/80 hover:border-border/60 dark:hover:border-border/20 hover:bg-card hover:shadow-[0_2px_20px_-6px_rgba(0,0,0,0.08)] dark:hover:shadow-[0_2px_20px_-6px_rgba(0,0,0,0.5)]"
-                }`}
-                onClick={() => handleScreenSelect(screen)}
-                onDoubleClick={() => handleDesignScreen(screen)}
-              >
-                {/* 좌측 타입별 컬러 바 */}
-                <div className={`absolute left-0 top-0 bottom-0 w-[3px] ${
-                  (screen as { screenType?: string }).screenType === "grid" ? "bg-primary" :
-                  (screen as { screenType?: string }).screenType === "dashboard" ? "bg-warning" :
-                  "bg-success"
-                }`} />
-                <div className="pl-4 pr-[14px] py-[14px]">
-                  {/* 상단: 이름 + 호버 편집 */}
-                  <div className="flex items-start gap-2">
-                    <div className="flex-1 min-w-0">
-                      <div className="text-[13px] font-semibold leading-tight truncate tracking-[-0.2px]">{screen.screenName}</div>
-                      <div className="text-[10px] font-mono text-muted-foreground/80 dark:text-muted-foreground/50 mt-0.5 tracking-[-0.3px] truncate">{screen.screenCode}</div>
-                    </div>
-                    <span className="text-[10px] text-muted-foreground/70 dark:text-muted-foreground/40 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 mt-0.5">편집</span>
-                  </div>
-                  {/* 설명 (있으면) */}
-                  {screen.description && (
-                    <div className="text-[10px] text-muted-foreground/60 dark:text-muted-foreground/40 mt-1.5 truncate">{screen.description}</div>
+            {filteredScreens.map((screen) => {
+              const screenType = (screen as { screenType?: string }).screenType || "form";
+              const isSelected = selectedScreen?.screenId === screen.screenId;
+              const isRecentlyModified = screen.updatedDate && (Date.now() - new Date(screen.updatedDate).getTime()) < 7 * 24 * 60 * 60 * 1000;
+
+              const typeColorClass = screenType === "grid"
+                ? "from-primary to-primary/20"
+                : screenType === "dashboard"
+                ? "from-warning to-warning/20"
+                : "from-success to-success/20";
+
+              const glowClass = screenType === "grid"
+                ? "hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.1),0_0_20px_hsl(var(--primary)/0.1)] dark:hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.4),0_0_24px_hsl(var(--primary)/0.15)]"
+                : screenType === "dashboard"
+                ? "hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.1),0_0_20px_hsl(var(--warning)/0.1)] dark:hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.4),0_0_24px_hsl(var(--warning)/0.12)]"
+                : "hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.1),0_0_20px_hsl(var(--success)/0.1)] dark:hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.4),0_0_24px_hsl(var(--success)/0.12)]";
+
+              const badgeBgClass = screenType === "grid"
+                ? "bg-primary/8 dark:bg-primary/15 text-primary"
+                : screenType === "dashboard"
+                ? "bg-warning/8 dark:bg-warning/15 text-warning"
+                : "bg-success/8 dark:bg-success/15 text-success";
+
+              return (
+                <div
+                  key={screen.screenId}
+                  className={`group relative overflow-hidden rounded-[12px] cursor-pointer transition-all duration-250 ease-[cubic-bezier(0.4,0,0.2,1)] ${
+                    isSelected
+                      ? "border border-primary bg-primary/5 dark:bg-primary/8 shadow-[0_0_0_2px_hsl(var(--primary)/0.22),0_1px_3px_rgba(0,0,0,0.06)] dark:shadow-[0_0_0_2px_hsl(var(--primary)/0.3),0_1px_4px_rgba(0,0,0,0.3)]"
+                      : `border border-transparent bg-card shadow-[0_1px_3px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)] dark:shadow-[0_1px_4px_rgba(0,0,0,0.35),0_0_1px_rgba(0,0,0,0.2)] hover:-translate-y-[2px] ${glowClass}`
+                  }`}
+                  onClick={() => handleScreenSelect(screen)}
+                  onDoubleClick={() => handleDesignScreen(screen)}
+                >
+                  {/* 좌측 그라데이션 액센트 바 */}
+                  <div className={`absolute left-0 top-3 bottom-3 w-[3px] rounded-r-full bg-gradient-to-b ${typeColorClass} transition-all duration-250 group-hover:top-1 group-hover:bottom-1 group-hover:w-[4px]`} />
+                  {isSelected && (
+                    <div className={`absolute left-0 top-0 bottom-0 w-[4px] bg-gradient-to-b ${typeColorClass}`} />
                   )}
-                  {/* 중단: 메타 정보 */}
-                  <div className="flex items-center gap-3 mt-2.5 text-[11px] text-muted-foreground/80 dark:text-muted-foreground/60">
-                    <span className="flex items-center gap-1">
-                      <Database className="h-3 w-3 opacity-70 dark:opacity-50" />
-                      <span className="font-mono text-[10px] tracking-[-0.3px]">{screen.tableLabel || screen.tableName || "—"}</span>
-                    </span>
-                  </div>
-                  {/* 하단: 타입 칩 + 날짜 */}
-                  <div className="flex items-center justify-between mt-2.5 pt-2 border-t border-border/30 dark:border-border/5">
-                    <span className="text-[10px] font-medium px-[7px] py-[2px] rounded bg-primary/10 text-primary tracking-[-0.2px]">
-                      {(screen as { screenType?: string }).screenType === "grid" ? "그리드" : (screen as { screenType?: string }).screenType === "dashboard" ? "대시보드" : "폼"}
-                    </span>
-                    <span className="text-[10px] text-muted-foreground/60 dark:text-muted-foreground/30 font-mono font-light">
-                      {screen.updatedDate ? new Date(screen.updatedDate).toLocaleDateString("ko-KR", { month: "2-digit", day: "2-digit" }) : screen.createdDate ? new Date(screen.createdDate).toLocaleDateString("ko-KR", { month: "2-digit", day: "2-digit" }) : ""}
-                    </span>
+                  <div className="pl-[14px] pr-4 py-4">
+                    {/* Row 1: 이름 + 타입 뱃지 */}
+                    <div className="flex items-center gap-2 mb-1">
+                      <div className="text-[15px] font-bold leading-snug truncate flex-1 min-w-0 tracking-[-0.3px]">{screen.screenName}</div>
+                      <span className={`text-[11px] font-semibold px-2.5 py-[3px] rounded-md flex-shrink-0 ${badgeBgClass}`}>
+                        {screenType === "grid" ? "그리드" : screenType === "dashboard" ? "대시보드" : "폼"}
+                      </span>
+                    </div>
+                    {/* Row 2: 스크린 코드 */}
+                    <div className="text-[12px] font-mono text-muted-foreground tracking-[-0.3px] truncate mb-3">{screen.screenCode}</div>
+                    {/* Row 3: 테이블 칩 + 메타 */}
+                    <div className="flex items-center gap-1.5 flex-wrap">
+                      <span className="inline-flex items-center gap-1.5 text-[12px] font-medium text-foreground/80 dark:text-foreground/70 px-2.5 py-1 rounded-md bg-muted/60 dark:bg-muted/40">
+                        <Database className="h-3.5 w-3.5 text-muted-foreground" />
+                        <span className="font-mono text-[11px]">{screen.tableLabel || screen.tableName || "—"}</span>
+                      </span>
+                    </div>
+                    {/* Row 4: 날짜 + 수정 상태 */}
+                    <div className="flex items-center justify-between mt-3 pt-2.5 border-t border-border/20 dark:border-border/10">
+                      <span className="text-[12px] font-mono text-muted-foreground">
+                        {screen.updatedDate ? new Date(screen.updatedDate).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" }) : screen.createdDate ? new Date(screen.createdDate).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" }) : ""}
+                      </span>
+                      {isRecentlyModified && (
+                        <span className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                          <span className="relative inline-block w-[6px] h-[6px] rounded-full bg-success screen-card-pulse-dot" />
+                          수정됨
+                        </span>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
           {filteredScreens.length === 0 && (
             <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index b3dbab89..8bbfd108 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -427,6 +427,21 @@ select {
   border-spacing: 0 !important;
 }
 
+/* ===== 카드 펄스 도트 애니메이션 ===== */
+@keyframes screen-card-pulse {
+  0%, 100% { opacity: 0; transform: scale(1); }
+  50% { opacity: 0.35; transform: scale(2); }
+}
+.screen-card-pulse-dot::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: 50%;
+  background: hsl(var(--success));
+  opacity: 0;
+  animation: screen-card-pulse 2.5s ease-in-out infinite;
+}
+
 /* ===== 저장 테이블 막대기 애니메이션 ===== */
 @keyframes saveBarDrop {
   0% {