60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import type { ShowcaseSlot } from '@/lib/showcase';
|
|
|
|
import ScrollReveal from './ScrollReveal';
|
|
import ShowcaseCard from './ShowcaseCard';
|
|
|
|
interface Props {
|
|
slots: ShowcaseSlot[];
|
|
variant: 'home' | 'full';
|
|
}
|
|
|
|
/**
|
|
* home: 6슬롯 비대칭 — 1번 feature(col-span-2 좌측) / 2·3 standard /
|
|
* 4번 feature(col-span-2 우측 배치로 리듬 변화) / 5·6 standard.
|
|
* 모바일은 1col 전부 standard.
|
|
* full: 8슬롯 데스크톱 2col 균등(standard), 모바일 1col.
|
|
*/
|
|
export default function ShowcaseGrid({ slots, variant }: Props) {
|
|
if (variant === 'full') {
|
|
return (
|
|
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 md:gap-6">
|
|
{slots.slice(0, 8).map((slot, i) => (
|
|
<ScrollReveal key={slot.slug} delay={i * 80}>
|
|
<ShowcaseCard slot={slot} size="standard" index={i} />
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 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로 흐름을 고정해 비대칭 리듬을 결정적으로 만든다.
|
|
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 — 우측 와이드 (리듬 변화)
|
|
];
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 gap-5 md:grid-cols-3 md:gap-6">
|
|
{items.map((slot, i) => {
|
|
const cfg = layout[i] ?? { span: 'md:col-span-1', size: 'standard' as const };
|
|
return (
|
|
<ScrollReveal key={slot.slug} delay={i * 80} className={cfg.span}>
|
|
<ShowcaseCard slot={slot} size={cfg.size} index={i} />
|
|
</ScrollReveal>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|