ui, 외부커넥션에서 쿼리 조회만 가능하도록

frontend/lib/registry/components/card-display/CardDisplayComponent.tsx

@@ -253,7 +253,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     padding: "32px", // 패딩 대폭 증가
     width: "100%",
     height: "100%",
-    background: "linear-gradient(to br, #f8fafc, #f1f5f9)", // 부드러운 그라데이션 배경
+    background: "#f8fafc", // 연한 하늘색 배경 (채도 낮춤)
     overflow: "auto",
     borderRadius: "12px", // 컨테이너 자체도 라운드 처리
   };
@@ -336,7 +336,22 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     <>
       <style jsx>{`
         .card-hover {
-          transition: all 0.2s ease-in-out;
+          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          overflow: hidden;
+        }
+        .card-hover::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+          transition: left 0.6s ease;
+        }
+        .card-hover:hover::before {
+          left: 100%;
         }
         .card-hover:hover {
           transform: translateY(-2px);
@@ -345,6 +360,20 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
             0 4px 6px -2px rgba(0, 0, 0, 0.05);
           border-color: #3b82f6;
         }
+        .card-container {
+          position: relative;
+        }
+        .card-container::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: transparent;
+          border-radius: 12px;
+          pointer-events: none;
+        }
       `}</style>
       <div
         className={className}
@@ -357,7 +386,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
         onDragEnd={onDragEnd}
         {...safeDomProps}
       >
-        <div style={containerStyle}>
+        <div style={containerStyle} className="card-container">
           {displayData.length === 0 ? (
             <div
               style={{
@@ -392,7 +421,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                 <div
                   key={data.id || index}
                   style={cardStyle}
-                  className="group cursor-pointer hover:transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300 ease-out"
+                  className="card-hover group cursor-pointer"
                   onClick={() => handleCardClick(data)}
                 >
                   {/* 카드 이미지 - 통일된 디자인 */}