카드 디스플레이 표시개선
This commit is contained in:
parent
d6f40f3cd3
commit
0832e7b6eb
|
|
@ -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%", // 전체 너비 차지
|
||||||
};
|
};
|
||||||
|
|
||||||
// 텍스트 자르기 함수
|
// 텍스트 자르기 함수
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue