ui, 파일업로드 관련 손보기

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

@@ -244,33 +244,39 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     );
   }
 
-  // 컨테이너 스타일 (원래 카드 레이아웃과 완전히 동일)
+  // 컨테이너 스타일 - 통일된 디자인 시스템 적용
   const containerStyle: React.CSSProperties = {
     display: "grid",
     gridTemplateColumns: `repeat(${componentConfig.cardsPerRow || 3}, 1fr)`, // 기본값 3 (한 행당 카드 수)
     gridAutoRows: "min-content", // 자동 행 생성으로 모든 데이터 표시
-    gap: `${componentConfig.cardSpacing || 16}px`,
-    padding: "16px",
+    gap: `${componentConfig.cardSpacing || 32}px`, // 간격 대폭 증가로 여유로운 느낌
+    padding: "32px", // 패딩 대폭 증가
     width: "100%",
     height: "100%",
-    background: "transparent",
+    background: "linear-gradient(to br, #f8fafc, #f1f5f9)", // 부드러운 그라데이션 배경
     overflow: "auto",
+    borderRadius: "12px", // 컨테이너 자체도 라운드 처리
   };
 
-  // 카드 스타일 (원래 카드 레이아웃과 완전히 동일)
+  // 카드 스타일 - 통일된 디자인 시스템 적용
   const cardStyle: React.CSSProperties = {
     backgroundColor: "white",
-    border: "1px solid #e5e7eb",
-    borderRadius: "8px",
-    padding: "16px",
-    boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
-    transition: "all 0.2s ease-in-out",
+    border: "1px solid #e2e8f0", // 더 부드러운 보더 색상
+    borderRadius: "12px", // 통일된 라운드 처리
+    padding: "24px", // 더 여유로운 패딩
+    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 더 깊은 그림자
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)", // 부드러운 트랜지션
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
     position: "relative",
-    minHeight: "200px",
+    minHeight: "240px", // 최소 높이 더 증가
     cursor: isDesignMode ? "pointer" : "default",
+    // 호버 효과를 위한 추가 스타일
+    "&:hover": {
+      transform: "translateY(-2px)",
+      boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    }
   };
 
   // 텍스트 자르기 함수
@@ -386,53 +392,53 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                 <div
                   key={data.id || index}
                   style={cardStyle}
-                  className="card-hover"
+                  className="group cursor-pointer hover:transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300 ease-out"
                   onClick={() => handleCardClick(data)}
                 >
-                  {/* 카드 이미지 */}
+                  {/* 카드 이미지 - 통일된 디자인 */}
                   {componentConfig.cardStyle?.showImage && componentConfig.columnMapping?.imageColumn && (
-                    <div className="mb-3 flex justify-center">
-                      <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200">
-                        <span className="text-xl text-gray-500">👤</span>
+                    <div className="mb-4 flex justify-center">
+                      <div className="flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-100 to-indigo-100 shadow-sm border-2 border-white">
+                        <span className="text-2xl text-blue-600">👤</span>
                       </div>
                     </div>
                   )}
 
-                  {/* 카드 타이틀 */}
+                  {/* 카드 타이틀 - 통일된 디자인 */}
                   {componentConfig.cardStyle?.showTitle && (
-                    <div className="mb-2">
-                      <h3 className="text-lg font-semibold text-gray-900">{titleValue}</h3>
+                    <div className="mb-3">
+                      <h3 className="text-xl font-bold text-gray-900 leading-tight">{titleValue}</h3>
                     </div>
                   )}
 
-                  {/* 카드 서브타이틀 */}
+                  {/* 카드 서브타이틀 - 통일된 디자인 */}
                   {componentConfig.cardStyle?.showSubtitle && (
-                    <div className="mb-2">
-                      <p className="text-sm font-medium text-blue-600">{subtitleValue}</p>
+                    <div className="mb-3">
+                      <p className="text-sm font-semibold text-blue-600 bg-blue-50 px-3 py-1 rounded-full inline-block">{subtitleValue}</p>
                     </div>
                   )}
 
-                  {/* 카드 설명 */}
+                  {/* 카드 설명 - 통일된 디자인 */}
                   {componentConfig.cardStyle?.showDescription && (
-                    <div className="mb-3 flex-1">
-                      <p className="text-sm leading-relaxed text-gray-600">
+                    <div className="mb-4 flex-1">
+                      <p className="text-sm leading-relaxed text-gray-700 bg-gray-50 p-3 rounded-lg">
                         {truncateText(descriptionValue, componentConfig.cardStyle?.maxDescriptionLength || 100)}
                       </p>
                     </div>
                   )}
 
-                  {/* 추가 표시 컬럼들 */}
+                  {/* 추가 표시 컬럼들 - 통일된 디자인 */}
                   {componentConfig.columnMapping?.displayColumns &&
                     componentConfig.columnMapping.displayColumns.length > 0 && (
-                      <div className="space-y-1 border-t border-gray-100 pt-3">
+                      <div className="space-y-2 border-t border-gray-200 pt-4">
                         {componentConfig.columnMapping.displayColumns.map((columnName, idx) => {
                           const value = getColumnValue(data, columnName);
                           if (!value) return null;
 
                           return (
-                            <div key={idx} className="flex justify-between text-xs">
-                              <span className="text-gray-500 capitalize">{getColumnLabel(columnName)}:</span>
-                              <span className="font-medium text-gray-700">{value}</span>
+                            <div key={idx} className="flex justify-between items-center text-sm bg-white/50 px-3 py-2 rounded-lg border border-gray-100">
+                              <span className="text-gray-600 font-medium capitalize">{getColumnLabel(columnName)}:</span>
+                              <span className="font-semibold text-gray-900 bg-gray-100 px-2 py-1 rounded-md text-xs">{value}</span>
                             </div>
                           );
                         })}