120 lines
3.0 KiB
TypeScript
120 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore";
|
|
|
|
export function createTeamTemplateBlocks(opts: {
|
|
sectionId: string;
|
|
createId: () => string;
|
|
}): { blocks: Block[]; lastSelectedId: string } {
|
|
const { sectionId, createId } = opts;
|
|
|
|
const columns: SectionBlockProps["columns"] = [
|
|
{ id: `${sectionId}_col_1`, span: 4 },
|
|
{ id: `${sectionId}_col_2`, span: 4 },
|
|
{ id: `${sectionId}_col_3`, span: 4 },
|
|
];
|
|
|
|
const sectionProps: SectionBlockProps = {
|
|
background: "muted",
|
|
paddingY: "lg",
|
|
// 팀 섹션은 보라 계열 배경과 넓은 폭, 보통 간격을 사용한다.
|
|
paddingYPx: 80,
|
|
maxWidthPx: 1120,
|
|
gapXPx: 32,
|
|
backgroundColorCustom: "#1e1b4b", // 보라/인디고 계열
|
|
columns,
|
|
} as any;
|
|
|
|
const sectionBlock: Block = {
|
|
id: sectionId,
|
|
type: "section",
|
|
props: sectionProps,
|
|
sectionId: null,
|
|
columnId: null,
|
|
};
|
|
|
|
const memberDefinitions = [
|
|
{ name: "홍길동", role: "Product Designer", bio: "사용자 경험을 설계합니다." },
|
|
{ name: "김영희", role: "Frontend Engineer", bio: "깔끔한 UI를 구현합니다." },
|
|
{ name: "이철수", role: "Backend Engineer", bio: "안정적인 인프라를 책임집니다." },
|
|
];
|
|
|
|
const teamBlocks: Block[] = columns.flatMap((col, index) => {
|
|
const m = memberDefinitions[index] ?? memberDefinitions[0];
|
|
|
|
const imageId = createId();
|
|
const nameId = createId();
|
|
const roleId = createId();
|
|
const bioId = createId();
|
|
|
|
const imageProps: ImageBlockProps = {
|
|
src: "https://via.placeholder.com/150x150/334155/94a3b8?text=User",
|
|
alt: m.name,
|
|
align: "center",
|
|
widthMode: "fixed",
|
|
widthPx: 120,
|
|
borderRadius: "full",
|
|
};
|
|
|
|
const nameProps: TextBlockProps = {
|
|
text: m.name,
|
|
align: "center",
|
|
size: "lg",
|
|
bold: true,
|
|
} as any;
|
|
|
|
const roleProps: TextBlockProps = {
|
|
text: m.role,
|
|
align: "center",
|
|
size: "base",
|
|
color: "primary",
|
|
} as any;
|
|
|
|
const bioProps: TextBlockProps = {
|
|
text: m.bio,
|
|
align: "center",
|
|
size: "sm",
|
|
color: "muted",
|
|
} as any;
|
|
|
|
const imageBlock: Block = {
|
|
id: imageId,
|
|
type: "image",
|
|
props: imageProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
};
|
|
|
|
const nameBlock: Block = {
|
|
id: nameId,
|
|
type: "text",
|
|
props: nameProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
};
|
|
|
|
const roleBlock: Block = {
|
|
id: roleId,
|
|
type: "text",
|
|
props: roleProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
};
|
|
|
|
const bioBlock: Block = {
|
|
id: bioId,
|
|
type: "text",
|
|
props: bioProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
};
|
|
|
|
return [imageBlock, nameBlock, roleBlock, bioBlock];
|
|
});
|
|
|
|
const blocks: Block[] = [sectionBlock, ...teamBlocks];
|
|
const lastSelectedId = teamBlocks[teamBlocks.length - 1]?.id ?? sectionId;
|
|
|
|
return { blocks, lastSelectedId };
|
|
}
|