diff --git a/app/components/deepfield/ShowcaseCard.tsx b/app/components/deepfield/ShowcaseCard.tsx index 2781c3e..6f98825 100644 --- a/app/components/deepfield/ShowcaseCard.tsx +++ b/app/components/deepfield/ShowcaseCard.tsx @@ -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', diff --git a/app/components/deepfield/ShowcaseGrid.tsx b/app/components/deepfield/ShowcaseGrid.tsx index 2c00b86..ae575ff 100644 --- a/app/components/deepfield/ShowcaseGrid.tsx +++ b/app/components/deepfield/ShowcaseGrid.tsx @@ -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 (