fix(deepfield): home 그리드 지그재그 3-wide 배치(빈 칸 제거) + 데드 CSS 정리
- ShowcaseGrid: index 0·3·4 → feature/col-span-2, 1·2·5 → standard wide 3장+standard 3장 = 9셀(3×3) 완전 충전, Row 2 col3 빈 칸 제거 - ShowcaseCard: ring-1(인라인 boxShadow에 덮이는 데드 클래스) 제거 transition-[...]에서 미사용 border-color 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -249,7 +249,7 @@ export default function ShowcaseCard({ slot, size = 'standard', index }: Props)
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
className={[
|
||||
'group/card relative isolate h-full w-full overflow-hidden rounded-2xl',
|
||||
'ring-1 transition-[transform,box-shadow,border-color] duration-500',
|
||||
'transition-[transform,box-shadow] duration-500',
|
||||
'[transition-timing-function:cubic-bezier(0.16,1,0.3,1)]',
|
||||
'motion-safe:hover:scale-[1.03]',
|
||||
isLink ? 'cursor-pointer' : 'cursor-default',
|
||||
|
||||
@@ -9,9 +9,11 @@ interface Props {
|
||||
}
|
||||
|
||||
/**
|
||||
* home: 6슬롯 비대칭 — 1번 feature(col-span-2 좌측) / 2·3 standard /
|
||||
* 4번 feature(col-span-2 우측 배치로 리듬 변화) / 5·6 standard.
|
||||
* 모바일은 1col 전부 standard.
|
||||
* home: 6슬롯 지그재그 — wide(col-span-2) 3장 + standard 3장 = 9셀(3×3 완전 충전)
|
||||
* row1: [0 feature span2][1 std]
|
||||
* row2: [2 std][3 feature span2]
|
||||
* row3: [4 feature span2][5 std]
|
||||
* 모바일은 1col 전부 standard.
|
||||
* full: 8슬롯 데스크톱 2col 균등(standard), 모바일 1col.
|
||||
*/
|
||||
export default function ShowcaseGrid({ slots, variant }: Props) {
|
||||
@@ -30,18 +32,18 @@ export default function ShowcaseGrid({ slots, variant }: Props) {
|
||||
// home — 6슬롯 (3col 그리드)
|
||||
const items = slots.slice(0, 6);
|
||||
|
||||
// 데스크톱 흐름 (3col):
|
||||
// row1: [0 feature span2][1 std]
|
||||
// row2: [2 std][3 std][?] — 3번을 col-start-1로 줄바꿈,
|
||||
// row3: [4 std][5 feature span2 우측] ← 4번 와이드를 우측에 두어 리듬 변화
|
||||
// col-start로 흐름을 고정해 비대칭 리듬을 결정적으로 만든다.
|
||||
// 데스크톱 흐름 (3col) — wide(span-2) 3장 + standard 3장 = 9셀, 빈 칸 없음
|
||||
// row1: [0 feature span2 좌][1 std 우] → 2+1 = 3
|
||||
// row2: [2 std 좌][3 feature span2 우] → 1+2 = 3
|
||||
// row3: [4 feature span2 좌][5 std 우] → 2+1 = 3
|
||||
// 자동 흐름(auto-placement)이 위 순서를 보장하므로 col-start 불필요.
|
||||
const layout: Array<{ span: string; size: 'feature' | 'standard' }> = [
|
||||
{ span: 'md:col-span-2 md:col-start-1', size: 'feature' }, // 0 — 좌측 와이드
|
||||
{ span: 'md:col-span-1', size: 'standard' }, // 1 — 우측 1칸
|
||||
{ span: 'md:col-span-1 md:col-start-1', size: 'standard' }, // 2 — 다음 줄 시작
|
||||
{ span: 'md:col-span-1', size: 'standard' }, // 3
|
||||
{ span: 'md:col-span-1 md:col-start-1', size: 'standard' }, // 4 — 다음 줄 시작
|
||||
{ span: 'md:col-span-2', size: 'feature' }, // 5 — 우측 와이드 (리듬 변화)
|
||||
{ span: 'md:col-span-2', size: 'feature' }, // 0 — row1 좌 와이드
|
||||
{ span: 'md:col-span-1', size: 'standard' }, // 1 — row1 우 1칸
|
||||
{ span: 'md:col-span-1', size: 'standard' }, // 2 — row2 좌 1칸
|
||||
{ span: 'md:col-span-2', size: 'feature' }, // 3 — row2 우 와이드
|
||||
{ span: 'md:col-span-2', size: 'feature' }, // 4 — row3 좌 와이드
|
||||
{ span: 'md:col-span-1', size: 'standard' }, // 5 — row3 우 1칸
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user