From e22622d36d2feda9b4626c56ef50690087aba170 Mon Sep 17 00:00:00 2001 From: gahusb Date: Sat, 13 Jun 2026 00:36:37 +0900 Subject: [PATCH] =?UTF-8?q?fix(deepfield):=20home=20=EA=B7=B8=EB=A6=AC?= =?UTF-8?q?=EB=93=9C=20=EC=A7=80=EA=B7=B8=EC=9E=AC=EA=B7=B8=203-wide=20?= =?UTF-8?q?=EB=B0=B0=EC=B9=98(=EB=B9=88=20=EC=B9=B8=20=EC=A0=9C=EA=B1=B0)?= =?UTF-8?q?=20+=20=EB=8D=B0=EB=93=9C=20CSS=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- app/components/deepfield/ShowcaseCard.tsx | 2 +- app/components/deepfield/ShowcaseGrid.tsx | 30 ++++++++++++----------- 2 files changed, 17 insertions(+), 15 deletions(-) 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 (