카드 디스플레이 표시개선

This commit is contained in:
kjs 2025-12-16 18:06:15 +09:00
parent d6f40f3cd3
commit 0832e7b6eb
1 changed files with 8 additions and 7 deletions

View File

@ -823,28 +823,29 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
display: "grid", display: "grid",
gridTemplateColumns: `repeat(${componentConfig.cardsPerRow || 3}, 1fr)`, // 기본값 3 (한 행당 카드 수) gridTemplateColumns: `repeat(${componentConfig.cardsPerRow || 3}, 1fr)`, // 기본값 3 (한 행당 카드 수)
gridAutoRows: "min-content", // 자동 행 생성으로 모든 데이터 표시 gridAutoRows: "min-content", // 자동 행 생성으로 모든 데이터 표시
gap: `${componentConfig.cardSpacing || 32}px`, // 간격 대폭 증가로 여유로운 느낌 gap: `${componentConfig.cardSpacing || 16}px`, // 카드 간격
padding: "32px", // 패딩 대폭 증가 padding: "16px", // 패딩
width: "100%", width: "100%",
height: "100%", height: "100%",
background: "#f8fafc", // 연한 하늘색 배경 (채도 낮춤) background: "transparent", // 배경색 제거
overflow: "auto", overflow: "auto",
borderRadius: "12px", // 컨테이너 자체도 라운드 처리 borderRadius: "0", // 라운드 제거
}; };
// 카드 스타일 - 컴팩트한 디자인 // 카드 스타일 - 컴팩트한 디자인
const cardStyle: React.CSSProperties = { const cardStyle: React.CSSProperties = {
backgroundColor: "white", backgroundColor: "hsl(var(--card))",
border: "1px solid #e5e7eb", border: "1px solid hsl(var(--border))",
borderRadius: "8px", borderRadius: "8px",
padding: "16px", padding: "16px",
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)", boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
transition: "all 0.2s ease", transition: "all 0.2s ease",
overflow: "hidden", overflow: "hidden",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
position: "relative", position: "relative",
cursor: isDesignMode ? "pointer" : "default", cursor: isDesignMode ? "pointer" : "default",
width: "100%", // 전체 너비 차지
}; };
// 텍스트 자르기 함수 // 텍스트 자르기 함수