CI: feature/builder-13-forms-style-sync #7
@@ -19,5 +19,6 @@ blob-report/
|
||||
# Plans (exclude from Git)
|
||||
메인플랜.md
|
||||
최초플랜.md
|
||||
MAIN_PLAN.md
|
||||
|
||||
/src/generated/prisma
|
||||
|
||||
-289
@@ -1,289 +0,0 @@
|
||||
# 메인 플랜 (Page Builder)
|
||||
|
||||
## 현재 완료된 단계
|
||||
- **builder-1 ~ builder-8**: 기본 에디터, 텍스트/버튼/섹션 블록, DnD, Undo/Redo, 블록 삭제/복제 등 핵심 UX 구현
|
||||
- **builder-9-templates-advanced** (현재 브랜치):
|
||||
- Hero / Features / CTA / FAQ / Pricing / Testimonials / Blog / Team / Footer 템플릿 섹션
|
||||
- 프리뷰 페이지 및 모바일 뷰포트 E2E
|
||||
- CI 환경에서 Prisma Client generate + API 테스트용 DATABASE_URL 설정
|
||||
- API 테스트에서 Prisma를 메모리 기반 목으로 교체하여 DB 없이 테스트 통과
|
||||
|
||||
## 다음 단계 개요
|
||||
1. **builder-10-block-types**
|
||||
- 더 다양한 블록 타입 추가 (예: 이미지, 아이콘이 있는 카드, 구분선, 리스트 등)
|
||||
- Zustand store에 타입/props 정의 및 액션 추가
|
||||
- 에디터 UI에 새 블록 버튼 및 속성 패널 연동
|
||||
- 새 블록 타입에 대한 유닛 테스트 + E2E 테스트 추가
|
||||
|
||||
2. **builder-11-editor-ux-advanced**
|
||||
- 드래그앤드롭 UX 고도화 (섹션/컬럼 이동 UX 개선, 드롭 힌트 강화)
|
||||
- 키보드 숏컷 확장 및 포커스 관리 개선
|
||||
- 인라인 편집 UX 다듬기
|
||||
|
||||
3. **## builder-12-theme-output 상세 플랜
|
||||
- Tailwind 기반 디자인 시스템 정리 (색상/타이포/간격 스케일)
|
||||
- Public/Preview 렌더링 품질 개선 (반응형, 여백, 타이포그래피)
|
||||
- 샘플 테마 프리셋 추가
|
||||
|
||||
### 3) 텍스트 스타일 시스템 정리 (에디터 쪽 선행 작업)
|
||||
|
||||
- 에디터 텍스트 블록 속성 구조와 렌더링 규칙 정리
|
||||
- `TextBlockProps` 에서 정렬/폰트 크기/줄 간격/자간/색상/최대 너비/장식 등 타이포 관련 속성 확장
|
||||
- `TextPropertiesPanel` 에서 위 속성들을 슬라이더/프리셋/컬러 피커로 제어하도록 구현
|
||||
- `SortableEditorBlock` 에서 텍스트 블록 렌더링 시
|
||||
- `align` → `pb-text-left/center/right`
|
||||
- `fontSizeMode`/`fontSizeScale`/`fontSizeCustom` → `pb-text-*` 또는 `style.fontSize`
|
||||
- `lineHeightMode`/`lineHeightScale`/`lineHeightCustom` → `pb-leading-*` 또는 `style.lineHeight`
|
||||
- `letterSpacingCustom` → `style.letterSpacing`
|
||||
- `colorPalette`/`colorCustom` → `pb-text-color-*` 또는 `style.color`
|
||||
- `maxWidthMode`/`maxWidthScale`/`maxWidthCustom` → `pb-text-maxw-*` 또는 `style.maxWidth`
|
||||
- `underline`/`strike`/`italic` → `pb-underline`/`pb-line-through`/`pb-italic`
|
||||
- 텍스트 편집 모드가 아닐 때, 실제 텍스트 요소(`<div>`)에도 위 클래스와 `textStyleOverrides` 를 직접 적용해 시각적 일관성 확보
|
||||
- 테스트 정렬
|
||||
- `tests/e2e/editor.spec.ts` 에서 텍스트/구분선/리스트 블록 관련 정렬/크기 기대값을 Tailwind `text-*` 가 아니라 `pb-text-*` 유틸리티 네이밍에 맞게 조정
|
||||
- JSON 내보내기/불러오기 시나리오에서도 `pb-text-left/right/sm/lg` 클래스가 복원되는지 검증
|
||||
|
||||
4. **builder-13-forms**
|
||||
- 폼 전송 구조 설계 및 구현 (internal API + Webhook/Google Sheets)
|
||||
- 폼 전송 설정(헤더/토큰/추가 파라미터) 및 다중 폼 컨트롤러 구조 설계
|
||||
- 폼 요소 블록(input/select/radio/checkbox) 추가 및 자유 레이아웃 배치 지원
|
||||
|
||||
---
|
||||
|
||||
## builder-10-block-types 상세 플랜
|
||||
|
||||
### 1) 대상 블록 타입 정의
|
||||
- **이미지 블록(image)**
|
||||
- props: `src`, `alt`, `align`, `width`, `borderRadius` 등
|
||||
- **구분선(divider)**
|
||||
- props: `style` (solid/dashed), `thickness`, `color`, `marginY`
|
||||
- **리스트(list)**
|
||||
- props: `items` (문자열 배열), `ordered` (true/false), `align`
|
||||
- (필요시) **카드(card)**
|
||||
- props: `title`, `description`, `imageSrc`, `align`
|
||||
|
||||
※ 실제 구현 범위는 TDD를 진행하면서 우선순위 높은 것부터 차례대로 확장한다.
|
||||
|
||||
### 2) TDD 순서
|
||||
1. **유닛 테스트부터 작성 (실패 상태로 시작)**
|
||||
- `tests/unit/editorStore.spec.ts`
|
||||
- `addImageBlock`, `addDividerBlock`, `addListBlock` 등 새 액션 테스트 추가
|
||||
- 블록이 올바른 기본 props 와 함께 `blocks` 배열에 추가되는지 확인
|
||||
- 섹션/컬럼 내부에 배치되는 경우 위치 정보(`sectionId`, `columnId`) 테스트
|
||||
2. **스토어 구현 (editorStore.ts)**
|
||||
- `Block` 타입에 새 `type` 과 `props` 구조 추가
|
||||
- `EditorState`에 새 액션 시그니처 추가
|
||||
- `createEditorState` 내부에 실제 로직 구현 (createId 활용, 기존 텍스트/버튼/섹션 패턴 재사용)
|
||||
3. **에디터 UI 연동 (editor/page.tsx)**
|
||||
- 사이드바에 새 블록 버튼 추가 (이미지, 구분선, 리스트 등)
|
||||
- 캔버스 렌더링 분기에 새 블록 타입별 렌더링 로직 추가
|
||||
- 속성 패널에서 최소한의 필수 props 편집 가능하도록 구현
|
||||
4. **E2E 테스트 추가 (Playwright)**
|
||||
- `tests/e2e/editor.spec.ts`
|
||||
- 새 블록 타입 버튼 클릭 → 캔버스에 올바르게 렌더링되는지 확인
|
||||
- 속성 패널에서 값 수정 시 캔버스 반영 확인 (예: 이미지 src, 리스트 아이템 수정)
|
||||
5. **리팩터링 & 안정화**
|
||||
- 중복되는 렌더링/props 처리 로직 정리
|
||||
- 필요시 추가 유닛 테스트/E2E로 회귀 방지
|
||||
|
||||
---
|
||||
|
||||
## builder-11-editor-ux-advanced 상세 플랜
|
||||
|
||||
### 1) DnD UX 고도화
|
||||
- **목표**
|
||||
- 블록/섹션 드래그앤드롭이 시각적으로 명확하고, 의도한 위치로 안정적으로 이동하도록 개선
|
||||
- 2컬럼 섹션 컬럼 이동, 블록 순서 변경 관련 E2E를 CI에서도 신뢰할 수 있게 만들기
|
||||
|
||||
- **작업 항목 (TDD)**
|
||||
1. `tests/e2e/editor.spec.ts`
|
||||
- `"블록 드래그앤드롭으로 순서를 변경할 수 있어야 한다"` 시나리오를 현재 UX에 맞게 단순/안정화
|
||||
- `"2컬럼 섹션에서 블록을 다른 컬럼 영역으로 드래그하면 컬럼이 변경되어야 한다"` 시나리오를 실제 드롭 영역 구조에 맞춰 조정
|
||||
2. `EditorPage`/`SortableEditorBlock`
|
||||
- 드롭 대상 컬럼/섹션의 hit-area를 넓히거나, 불필요한 overlay가 pointer events를 가로채지 않게 레이아웃 조정
|
||||
- DnD Kit 설정(sensors, collision detection 등) 필요 시 보정
|
||||
3. 필요 시 `editorStore` 유닛 테스트에서
|
||||
- `reorderBlocks`, `moveBlock` 조합 케이스(섹션/컬럼 간 이동)를 명시적으로 테스트해 회귀 방지
|
||||
|
||||
### 2) 키보드/포커스 UX 개선
|
||||
- **목표**
|
||||
- ArrowUp/ArrowDown 으로 선택 블록이 예측 가능하게 이동
|
||||
- Cmd/Ctrl+Z / Cmd/Ctrl+Shift+Z / Cmd/Ctrl+D 와 같은 단축키가 OS에 관계없이 일관되게 동작
|
||||
|
||||
- **작업 항목 (TDD)**
|
||||
1. `tests/e2e/editor.spec.ts`
|
||||
- `"ArrowUp/ArrowDown 키로 선택된 블록을 위/아래로 이동하며 순차적으로 선택할 수 있어야 한다"` 테스트를 CI에서도 통과하도록 재정의
|
||||
- 초기 선택 상태, 포커스 위치, 기대되는 `data-selected`/`aria-selected` 값을 명확히 기술
|
||||
2. `EditorPage`의 전역 keydown 핸들러
|
||||
- ArrowUp/Down 선택 이동 로직을 단순/명확하게 정리 (현재 선택이 없을 때 첫 블록 선택 등)
|
||||
- OS별 Cmd/Ctrl 판별 로직(`navigator.platform`)과 E2E에서 보내는 키 조합을 일치시켜 유지
|
||||
|
||||
### 3) 인라인 편집 UX 정리
|
||||
- **목표**
|
||||
- 텍스트 블록 더블클릭 → 인라인 편집 진입
|
||||
- Enter → 커밋, Esc → 취소, 포커스 아웃 시 안전하게 커밋
|
||||
|
||||
- **작업 항목 (TDD)**
|
||||
1. `tests/e2e/editor.spec.ts`
|
||||
- `"텍스트 블록을 더블클릭해서 내용을 수정할 수 있어야 한다"` 시나리오를
|
||||
- 더블클릭 → 편집 모드 진입
|
||||
- Enter 커밋 / Esc 취소 흐름까지 포함하도록 보완
|
||||
2. `EditorPage`의 인라인 편집 상태(`editingBlockId`, `editingText`)
|
||||
- 더블클릭/포커스 아웃/Enter/Esc 이벤트에 대한 상태 전이와 `updateBlock` 호출 타이밍을 명확히 정의
|
||||
|
||||
이 모든 작업도 `builder-10`과 동일하게 **실패하는 테스트 추가 → 최소 구현 → 리팩터링 → CI/E2E 확인** 순서로 진행한다.
|
||||
|
||||
---
|
||||
|
||||
## builder-13-forms 상세 플랜
|
||||
|
||||
### 1) 폼 전송 구조 (v1: 단일 폼 + 필드 배열)
|
||||
- **목표**
|
||||
- SPA 스타일로 페이지 리로드 없이 폼을 전송하고, CORS 문제 없이 외부 API/Google Sheets 로 연동
|
||||
|
||||
- **현재 구현 상태 요약**
|
||||
- `FormBlockProps` 에 전송 설정 추가
|
||||
- `submitTarget: "internal" | "webhook"`
|
||||
- `destinationUrl`, `method`, `headers`, `extraParams`
|
||||
- `successMessage`, `errorMessage`
|
||||
- 퍼블릭 렌더러: 폼 블록을 `<form>` 으로 렌더링하고 `/api/forms/submit` 으로 `FormData` 전송
|
||||
- `/api/forms/submit` 라우트:
|
||||
- `__config` hidden 필드로 넘어온 `FormBlockProps` 를 파싱
|
||||
- `submitTarget === "internal"` 일 때 서버 내부 처리 (향후 DB 저장/메일 발송용)
|
||||
- `submitTarget === "webhook"` 일 때 `destinationUrl` 로 서버사이드 POST (x-www-form-urlencoded)
|
||||
- `headers`/`extraParams` 를 함께 전송하여 토큰/고정 파라미터 전달
|
||||
- 폼 필드 정의:
|
||||
- `FormFieldConfig` (`id`, `name`, `label`, `type`, `required`)
|
||||
- `FormBlockProps.fields?: FormFieldConfig[]` 로 필드 배열 관리
|
||||
- 에디터 우측 패널에서 필드 추가/삭제/순서/라벨/name/type/필수 여부 편집 UI 제공
|
||||
|
||||
- **TDD 순서 (v1)**
|
||||
1. `tests/unit/editorStore.spec.ts`
|
||||
- `FormBlockProps`/`FormFieldConfig` 초기값, `addFormBlock` 동작 테스트
|
||||
2. `editorStore.ts`
|
||||
- `FormFieldConfig`, `FormBlockProps` 정의 및 `addFormBlock` 구현
|
||||
3. `PublicPageRenderer.tsx`
|
||||
- `fields` 기반 폼 렌더링 및 `/api/forms/submit` 호출 로직 구현
|
||||
4. `src/app/api/forms/submit/route.ts`
|
||||
- internal/webhook 분기 및 Webhook/Google Sheets 전송 로직 구현
|
||||
5. `tests/e2e/editor.spec.ts`/`tests/e2e/preview.spec.ts`
|
||||
- 폼 추가 → 필드 수정 → 프리뷰에서 폼 전송 → 성공/에러 메시지 확인 시나리오 추가
|
||||
|
||||
### 2) 폼 요소 블록 + 폼 컨트롤러 구조 (v2: 자유 레이아웃)
|
||||
- **목표**
|
||||
- 폼 요소(input/select/radio/checkbox)를 텍스트 블록처럼 섹션/컬럼 안에 자유롭게 배치
|
||||
- 폼 블록은 전송 설정 + 어떤 요소(id)들을 묶어서 어디로 보낼지 제어하는 컨트롤러 역할만 수행
|
||||
- 페이지 내에 여러 폼 블록이 있어도 각기 다른 필드/submit 버튼/전송 설정을 사용 가능
|
||||
|
||||
- **설계 개요**
|
||||
- 새 블록 타입 추가:
|
||||
- `formInput`, `formSelect`, `formRadio`, `formCheckbox` 등
|
||||
- 각 props 예시:
|
||||
- `FormInputBlockProps`: `label`, `placeholder`, `formFieldName?`, `formFieldType`, `required?`
|
||||
- `FormSelectBlockProps`: `label`, `formFieldName?`, `options[]`, `required?`
|
||||
- `FormRadioBlockProps`: `groupLabel`, `formFieldName?`, `options[]`, `required?`
|
||||
- `FormCheckboxBlockProps`: `label`, `formFieldName?`, `required?`
|
||||
- `FormBlockProps` 확장:
|
||||
- `fieldIds: string[]` (이 폼이 담당하는 폼 요소 블록들의 id)
|
||||
- `submitButtonId?: string` (이 버튼이 눌리면 이 폼을 전송)
|
||||
- 좌측 사이드바에 "폼 요소" 섹션 추가:
|
||||
- 텍스트 입력/셀렉트/라디오 그룹/체크박스 블록 추가 버튼
|
||||
- `editorStore` 에 `addFormInputBlock`/`addFormSelectBlock` 등 액션 추가
|
||||
- 런타임 동작:
|
||||
- 버튼 클릭 → 해당 버튼 id 를 `submitButtonId` 로 가진 FormBlock 검색
|
||||
- FormBlock.fieldIds 에 포함된 블록들 중 `formFieldName` 이 설정된 요소만 수집
|
||||
- 현재 값(value)을 모아 `FormData` 또는 JSON 으로 `/api/forms/submit` 에 전송
|
||||
|
||||
- **TDD 순서 (v2)**
|
||||
1. `tests/unit/editorStore.spec.ts`
|
||||
- 새 폼 요소 블록 타입 추가 액션(addFormInputBlock 등) 테스트
|
||||
- FormBlock 의 `fieldIds`/`submitButtonId` 기본값 및 업데이트 동작 테스트
|
||||
2. `editorStore.ts`
|
||||
- `BlockType` 에 폼 요소 타입 추가, 각 props/interface 정의
|
||||
- `addFormInputBlock` 등 구현 (섹션/컬럼 내 자유 배치)
|
||||
3. `src/app/editor/forms/elements/*.tsx`
|
||||
- `InputElement`/`SelectElement`/`RadioGroupElement`/`CheckboxElement` 컴포넌트 구현 및 에디터/퍼블릭 렌더링 연계
|
||||
4. `src/app/editor/page.tsx`
|
||||
- 좌측 사이드바에 "폼 요소" 섹션 추가 및 액션 연결
|
||||
- 블록 렌더링 분기에 새 폼 요소 블록 타입 처리 추가
|
||||
- 우측 폼 패널에 FormBlock 의 `fieldIds`/`submitButtonId` 매핑 UI 추가
|
||||
5. `tests/e2e/editor.spec.ts`/`tests/e2e/preview.spec.ts`
|
||||
- 섹션/컬럼 안에 폼 요소들을 자유 배치 → FormBlock 에 id 매핑 → 버튼 클릭 시 해당 요소 값만 전송되는지 검증
|
||||
|
||||
폼 기능 역시 다른 단계와 동일하게 **실패하는 테스트 → 최소 구현 → 리팩터링** 순서를 유지하며, Webhook/Google Sheets 연동 시 CORS 문제를 피하기 위해 항상 `/api/forms/submit` 경유 구조를 사용한다.
|
||||
|
||||
### 3) 진행 현황 (2025-11-20)
|
||||
- **v2 TDD 1단계(editorStore)**
|
||||
- `tests/unit/editorStore.spec.ts`
|
||||
- `formInput` 블록 추가 액션(`addFormInputBlock`)에 대한 유닛 테스트 작성
|
||||
- FormBlock 컨트롤러 기본 속성(`fieldIds`, `submitButtonId`) 초기값 유닛 테스트 작성
|
||||
- `src/features/editor/state/editorStore.ts`
|
||||
- `BlockType`에 `"formInput"` 타입 추가
|
||||
- `FormInputBlockProps` 정의 및 공통 `Block.props` 유니온에 포함
|
||||
- `FormBlockProps`에 `fieldIds?: string[]`, `submitButtonId?: string | null` 추가
|
||||
- `addFormBlock`에서 `fieldIds: []`, `submitButtonId: null` 기본값 설정
|
||||
- `addFormInputBlock` 액션 구현 (루트에 기본 label/formFieldName 으로 추가, 선택 상태 업데이트)
|
||||
- 결과: `editorStore.spec.ts` 전체 25개 테스트 모두 통과
|
||||
|
||||
- **v2 TDD 2단계(editorStore + Editor UI)**
|
||||
- `tests/unit/editorStore.spec.ts`
|
||||
- `formSelect`/`formRadio`/`formCheckbox` 블록 추가 액션 및 FormBlock `fieldIds`/`submitButtonId` 업데이트 테스트 추가
|
||||
- `src/features/editor/state/editorStore.ts`
|
||||
- `BlockType`에 `"formSelect"`, `"formRadio"`, `"formCheckbox"` 추가
|
||||
- `FormSelectBlockProps`/`FormRadioBlockProps`/`FormCheckboxBlockProps` 정의 및 `Block.props`/`updateBlock`에 반영
|
||||
- `addFormSelectBlock`/`addFormRadioBlock`/`addFormCheckboxBlock` 구현 (루트에 기본 label/options 로 추가)
|
||||
- `src/app/editor/page.tsx`
|
||||
- 좌측 사이드바에 "폼 요소" 섹션 추가
|
||||
- 우측 속성 패널에서 FormBlock 선택 시 "폼 컨트롤러" 섹션 추가
|
||||
- 체크박스/셀렉트 변경 시 `updateBlock` 으로 FormBlock 의 `fieldIds`/`submitButtonId` 업데이트
|
||||
- `tests/e2e/editor.spec.ts`
|
||||
- "폼 요소 사이드바에서 폼 입력/셀렉트/라디오/체크박스 블록을 추가할 수 있어야 한다" 시나리오 추가
|
||||
- "폼 블록을 선택하면 우측 속성 패널에서 폼 필드/버튼 매핑 UI가 보여야 한다" 시나리오 추가
|
||||
- 결과: 관련 유닛/E2E 테스트 모두 통과
|
||||
|
||||
- **v2 TDD 3단계(Preview/Public 렌더러 폼 제출 v2)**
|
||||
- `tests/e2e/preview.spec.ts`
|
||||
- "폼 컨트롤러에 매핑한 폼 요소와 버튼이 프리뷰에서 함께 동작해야 한다" 시나리오 추가
|
||||
- 에디터에서 `formInput`/`button`/`form` 블록을 추가
|
||||
- FormBlock 의 `fieldIds`/`submitButtonId` 매핑 설정 후 `/preview` 이동
|
||||
- 프리뷰에서 입력값을 채우고 "버튼" 클릭 시 성공 메시지("성공적으로 전송되었습니다.")가 표시되는지 검증
|
||||
- `src/features/editor/components/PublicPageRenderer.tsx`
|
||||
- FormBlock 렌더링 시 v2 컨트롤러 우선 사용
|
||||
- `fieldIds` 가 설정된 경우 해당 id 를 가진 `formInput`/`formSelect`/`formCheckbox`/`formRadio` 블록들만 수집
|
||||
- 각 폼 요소 블록의 `formFieldName`/`label`/`options` 를 사용해 `<input>`/`<select>`/`<textarea>`/`checkbox`/`radio` 필드 렌더링
|
||||
- `fieldIds` 가 없거나 매핑된 요소가 없으면 기존 v1 `FormBlockProps.fields` 또는 기본 name/email/message 폼을 fallback 으로 사용
|
||||
- `submitButtonId` 가 설정된 경우 해당 버튼 블록의 `label` 을 폼의 submit 버튼 라벨로 사용
|
||||
- submit 시 `/api/forms/submit` 으로 FormData 를 전송하고, 응답이 ok 이면 `successMessage` (기본값 "성공적으로 전송되었습니다.") 를 표시
|
||||
- 결과: 프리뷰 폼 컨트롤러 v2 E2E 테스트 통과
|
||||
|
||||
- **v2 TDD 4단계(radio/checkbox 라벨 구조 정리)**
|
||||
- 목표: 라디오/체크박스 필드에서 `groupLabel` 은 항상 그룹 타이틀(제목 텍스트)로만 사용하고, 각 옵션의 `label` 이 실제 라벨 역할을 하도록 분리
|
||||
- 에디터 속성 패널(`EditorPage`)
|
||||
- 폼 요소 선택 시 라디오/체크박스의 상단 라벨 인풋을 `그룹 타이틀` 로 표기
|
||||
- 라벨 모드 셀렉트를 라디오/체크박스의 경우 `옵션 라벨 타입` 으로 표기하여 그룹 제목과 옵션 라벨 역할을 명확히 분리
|
||||
- 에디터 캔버스 렌더링(`EditorPage`)
|
||||
- `formRadio` / `formCheckbox` 블록에서 상단 헤더는 항상 `groupLabel` 텍스트로만 렌더링
|
||||
- `labelMode === "image"` 인 경우, 라디오/체크박스 옆 옵션 라벨 위치에 `labelImageUrl`/`labelImageAlt` 를 사용해 이미지 라벨을 표시하고, 기본 모드에서는 옵션의 `label` 텍스트를 그대로 사용
|
||||
- E2E 테스트(`tests/e2e/editor.spec.ts`)
|
||||
- "폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본 필드 속성을 편집할 수 있어야 한다" 시나리오를 groupLabel/옵션 라벨 타입 분리에 맞게 업데이트
|
||||
- 라디오/체크박스 선택 시 라벨 입력 필드 이름을 `그룹 타이틀` 로 기대
|
||||
- 라디오/체크박스 선택 시 `옵션 라벨 타입` 콤보박스 존재 여부를 검증
|
||||
|
||||
- **디버깅 기록**
|
||||
- `tests/unit/editorStore.spec.ts` 하단에 템플릿/undo/redo/remove/duplicate 관련 테스트 블록이 중복 삽입되어 중괄호 정렬이 깨짐
|
||||
- 증상: Vitest 실행 시 `Unexpected "}"` 파싱 에러 발생
|
||||
- 조치: 중복된 it 블록들 제거, 기존 describe 내부의 `removeBlock`/`duplicateBlock` 테스트를 정리하고 그 뒤에 폼 관련 2개 테스트만 배치하여 정상 종료
|
||||
- `tests/unit/PropertyControls.spec.ts` 에는 별도의 TS/JSX 문법 및 타입 오류(onChange, label 등)가 존재하지만, 현재 폼 기능 흐름과 직접 관련 없으므로 후속 단계에서 별도 TDD 리팩터링 대상으로 남겨둠
|
||||
|
||||
## 디버깅/CI 관련 기록 (요약)
|
||||
- CI에서 `prisma generate` 단계가 `DATABASE_URL` 없음으로 실패 → 워크플로에서 더미 `DATABASE_URL` 주입으로 해결
|
||||
- 유닛 테스트에서 API 테스트가 실제 DB 접속 시도 →
|
||||
- CI: `Run unit tests` 스텝에도 더미 `DATABASE_URL` 추가
|
||||
- 테스트 코드: PrismaClient를 메모리 기반 목으로 교체, 라우트를 동적 import 하도록 수정
|
||||
|
||||
- Playwright E2E (에디터):
|
||||
- 레이아웃 상 사이드바/속성 패널이 캔버스 블록 클릭을 가로채면서 `locator.click` 타임아웃이 발생하는 이슈 확인
|
||||
- divider/list 블록용 E2E는 블록 추가 직후 자동 선택 상태와 속성 패널 조작만 검증하도록 작성해 부분적으로 우회
|
||||
- 기존 테스트들(블록 삭제, 복제, 키보드 이동 등)은 동일한 클릭 간섭 문제 영향 범위에 있어 후속 단계에서 레이아웃/테스트 전략 리팩터링 필요
|
||||
|
||||
이후 단계(`builder-11-editor-ux-advanced`, `builder-12-theme-output`)에서도 모든 기능 추가는 TDD(실패 테스트 → 구현 → 리팩터링) 순서를 유지한다.
|
||||
+240
-17
@@ -37,6 +37,7 @@ import type {
|
||||
FormSelectBlockProps,
|
||||
FormCheckboxBlockProps,
|
||||
FormRadioBlockProps,
|
||||
ListItemNode,
|
||||
} from "@/features/editor/state/editorStore";
|
||||
import { ButtonPropertiesPanel } from "./panels/ButtonPropertiesPanel";
|
||||
import { TextPropertiesPanel } from "./panels/TextPropertiesPanel";
|
||||
@@ -51,6 +52,7 @@ import { EditorCanvas } from "./EditorCanvas";
|
||||
export default function EditorPage() {
|
||||
const blocks = useEditorStore((state) => state.blocks);
|
||||
const selectedBlockId = useEditorStore((state) => state.selectedBlockId);
|
||||
const selectedListItemId = useEditorStore((state) => (state as any).selectedListItemId as string | null | undefined);
|
||||
const addTextBlock = useEditorStore((state) => state.addTextBlock);
|
||||
const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
|
||||
const addImageBlock = useEditorStore((state) => state.addImageBlock);
|
||||
@@ -73,6 +75,19 @@ export default function EditorPage() {
|
||||
const addFooterTemplateSection = useEditorStore((state) => state.addFooterTemplateSection);
|
||||
const updateBlock = useEditorStore((state) => state.updateBlock);
|
||||
const selectBlock = useEditorStore((state) => state.selectBlock);
|
||||
const selectListItem = useEditorStore((state) => (state as any).selectListItem as (id: string | null) => void);
|
||||
const indentSelectedListItem = useEditorStore(
|
||||
(state) => (state as any).indentSelectedListItem as (blockId: string) => void,
|
||||
);
|
||||
const outdentSelectedListItem = useEditorStore(
|
||||
(state) => (state as any).outdentSelectedListItem as (blockId: string) => void,
|
||||
);
|
||||
const moveSelectedListItemUp = useEditorStore(
|
||||
(state) => (state as any).moveSelectedListItemUp as (blockId: string) => void,
|
||||
);
|
||||
const moveSelectedListItemDown = useEditorStore(
|
||||
(state) => (state as any).moveSelectedListItemDown as (blockId: string) => void,
|
||||
);
|
||||
const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
|
||||
const reorderBlocks = useEditorStore((state) => state.reorderBlocks);
|
||||
const moveBlock = useEditorStore((state) => state.moveBlock);
|
||||
@@ -519,6 +534,8 @@ export default function EditorPage() {
|
||||
cancelEditing={cancelEditing}
|
||||
setEditingText={setEditingText}
|
||||
selectBlock={selectBlock}
|
||||
selectedListItemId={selectedListItemId ?? null}
|
||||
selectListItem={selectListItem}
|
||||
allBlocks={blocks}
|
||||
renderBlocks={renderBlocks}
|
||||
updateBlock={updateBlock}
|
||||
@@ -572,6 +589,18 @@ export default function EditorPage() {
|
||||
>
|
||||
JSON 내보내기/불러오기
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full px-3 py-2 text-left hover:bg-red-900/60 text-red-100 border-t border-slate-800"
|
||||
onClick={() => {
|
||||
setMenuOpen(false);
|
||||
if (window.confirm("캔버스를 모두 초기화할까요? 이 작업은 실행 취소로만 되돌릴 수 있습니다.")) {
|
||||
handleClearCanvas();
|
||||
}
|
||||
}}
|
||||
>
|
||||
캔버스 초기화
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -596,15 +625,18 @@ export default function EditorPage() {
|
||||
<PropertiesSidebar
|
||||
blocks={blocks}
|
||||
selectedBlockId={selectedBlockId}
|
||||
selectedListItemId={selectedListItemId ?? null}
|
||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
||||
removeBlock={removeBlock}
|
||||
duplicateBlock={duplicateBlock}
|
||||
editingBlockId={editingBlockId}
|
||||
setEditingText={setEditingText}
|
||||
onMoveSelectedItemUp={(blockId) => moveSelectedListItemUp(blockId)}
|
||||
onMoveSelectedItemDown={(blockId) => moveSelectedListItemDown(blockId)}
|
||||
onIndentSelectedItem={(blockId) => indentSelectedListItem(blockId)}
|
||||
onOutdentSelectedItem={(blockId) => outdentSelectedListItem(blockId)}
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
|
||||
{activeModal === "project" && (
|
||||
<div className="fixed inset-0 z-30 flex items-center justify-center bg-black/60">
|
||||
@@ -727,6 +759,8 @@ export default function EditorPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
interface DragPreviewProps {
|
||||
@@ -748,8 +782,6 @@ function DragPreview({ block }: DragPreviewProps) {
|
||||
? "Image"
|
||||
: block.type === "divider"
|
||||
? "Divider"
|
||||
: block.type === "list"
|
||||
? "List"
|
||||
: "Section"}
|
||||
</div>
|
||||
<div className="truncate">
|
||||
@@ -786,6 +818,8 @@ interface SortableEditorBlockProps {
|
||||
cancelEditing: () => void;
|
||||
setEditingText: (value: string) => void;
|
||||
selectBlock: (id: string) => void;
|
||||
selectedListItemId: string | null;
|
||||
selectListItem: (id: string | null) => void;
|
||||
allBlocks: Block[];
|
||||
renderBlocks: (targetBlocks: Block[]) => ReactNode;
|
||||
updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps & FormBlockProps>) => void;
|
||||
@@ -801,6 +835,8 @@ function SortableEditorBlock({
|
||||
cancelEditing,
|
||||
setEditingText,
|
||||
selectBlock,
|
||||
selectedListItemId,
|
||||
selectListItem,
|
||||
allBlocks,
|
||||
renderBlocks,
|
||||
updateBlock,
|
||||
@@ -1386,26 +1422,184 @@ function SortableEditorBlock({
|
||||
const dividerProps = block.props as DividerBlockProps;
|
||||
const thicknessClass = dividerProps.thickness === "medium" ? "border-t-2" : "border-t";
|
||||
|
||||
// 색상: colorHex 가 있으면 사용, 없으면 기본 슬레이트 색상
|
||||
const borderColor =
|
||||
dividerProps.colorHex && dividerProps.colorHex.trim() !== ""
|
||||
? dividerProps.colorHex
|
||||
: "#475569";
|
||||
|
||||
// 길이/너비: widthMode/widthPx 에 따라 가로 길이를 조정
|
||||
const widthMode = dividerProps.widthMode ?? "full";
|
||||
const innerStyle: React.CSSProperties = {
|
||||
borderColor,
|
||||
};
|
||||
let innerWidthClass = "w-full";
|
||||
|
||||
if (widthMode === "auto") {
|
||||
innerWidthClass = "w-1/2";
|
||||
} else if (widthMode === "fixed") {
|
||||
innerWidthClass = "";
|
||||
if (typeof dividerProps.widthPx === "number" && dividerProps.widthPx > 0) {
|
||||
innerStyle.width = `${dividerProps.widthPx}px`;
|
||||
} else {
|
||||
innerStyle.width = "320px";
|
||||
}
|
||||
}
|
||||
|
||||
// 위/아래 여백: marginYPx 가 있으면 px 값 그대로 사용, 없으면 토큰 기반 기본값
|
||||
const margin =
|
||||
typeof dividerProps.marginYPx === "number"
|
||||
? dividerProps.marginYPx
|
||||
: dividerProps.marginY === "sm"
|
||||
? 8
|
||||
: dividerProps.marginY === "lg"
|
||||
? 24
|
||||
: 16;
|
||||
|
||||
return (
|
||||
<div className="w-full py-2">
|
||||
<div className={`border-slate-700 ${thicknessClass}`} />
|
||||
<div className="w-full" style={{ marginTop: margin, marginBottom: margin }}>
|
||||
<div className={`${thicknessClass} ${innerWidthClass} border-t`} style={innerStyle} />
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{block.type === "list" && (() => {
|
||||
const listProps = block.props as ListBlockProps;
|
||||
const items = listProps.items && listProps.items.length > 0 ? listProps.items : ["리스트 아이템 1"];
|
||||
const ListTag = (listProps.ordered ? "ol" : "ul") as "ol" | "ul";
|
||||
const bulletStyleRaw = listProps.bulletStyle ?? (listProps.ordered ? "decimal" : "disc");
|
||||
const alignClass =
|
||||
listProps.align === "center"
|
||||
? "text-center"
|
||||
: listProps.align === "right"
|
||||
? "text-right"
|
||||
: "text-left";
|
||||
|
||||
// 줄 간 간격: gapYPx 숫자 값을 우선 사용하고, 없으면 gapY 토큰을 space-y 클래스로 매핑
|
||||
const gapPx =
|
||||
typeof listProps.gapYPx === "number"
|
||||
? listProps.gapYPx
|
||||
: listProps.gapY === "sm"
|
||||
? 4
|
||||
: listProps.gapY === "lg"
|
||||
? 16
|
||||
: 8;
|
||||
|
||||
// 타이포/색상 스타일
|
||||
const listStyle: React.CSSProperties = {};
|
||||
if (listProps.fontSizeCustom && listProps.fontSizeCustom.trim() !== "") {
|
||||
listStyle.fontSize = listProps.fontSizeCustom;
|
||||
}
|
||||
if (listProps.lineHeightCustom && listProps.lineHeightCustom.trim() !== "") {
|
||||
listStyle.lineHeight = listProps.lineHeightCustom;
|
||||
}
|
||||
if (listProps.textColorCustom && listProps.textColorCustom.trim() !== "") {
|
||||
listStyle.color = listProps.textColorCustom;
|
||||
}
|
||||
|
||||
// 불릿 스타일 (none 인 경우만 제거, decimal 은 숫자형으로 매핑)
|
||||
const bulletStyle = bulletStyleRaw;
|
||||
|
||||
const itemsTree: ListItemNode[] =
|
||||
(listProps.itemsTree as ListItemNode[] | undefined) && listProps.itemsTree!.length > 0
|
||||
? (listProps.itemsTree as ListItemNode[])
|
||||
: listProps.items && listProps.items.length > 0
|
||||
? listProps.items.map((text, index) => ({
|
||||
id: `${block.id}_item_${index + 1}`,
|
||||
text,
|
||||
children: [],
|
||||
}))
|
||||
: [
|
||||
{
|
||||
id: `${block.id}_item_1`,
|
||||
text: "리스트 아이템 1",
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
|
||||
const renderListNodes = (nodes: ListItemNode[], level: number): React.ReactNode => {
|
||||
const isOrderedLevel = listProps.ordered;
|
||||
const ListTag = (isOrderedLevel ? "ol" : "ul") as "ol" | "ul";
|
||||
|
||||
return (
|
||||
<div className="w-full py-1">
|
||||
<ListTag className="list-inside list-disc space-y-1 text-xs">
|
||||
{items.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
<ListTag
|
||||
className={`text-xs ${alignClass}`}
|
||||
style={{
|
||||
...listStyle,
|
||||
listStyleType:
|
||||
bulletStyle === "none"
|
||||
? "none"
|
||||
: bulletStyle,
|
||||
paddingLeft: 12 + level * 8,
|
||||
}}
|
||||
>
|
||||
{nodes.map((node, index) => (
|
||||
<li
|
||||
key={node.id}
|
||||
data-list-item-id={node.id}
|
||||
className={
|
||||
selectedListItemId === node.id
|
||||
? "rounded bg-sky-900/40 text-sky-100"
|
||||
: undefined
|
||||
}
|
||||
style={index < nodes.length - 1 ? { marginBottom: gapPx } : undefined}
|
||||
>
|
||||
<span className="break-words align-middle">{node.text}</span>
|
||||
<span className="ml-2 inline-flex items-center gap-1 text-[10px] text-slate-300 align-middle">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
selectBlock(block.id);
|
||||
selectListItem(node.id);
|
||||
(useEditorStore.getState() as any).moveSelectedListItemUp(block.id);
|
||||
}}
|
||||
>
|
||||
위
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
selectBlock(block.id);
|
||||
selectListItem(node.id);
|
||||
(useEditorStore.getState() as any).moveSelectedListItemDown(block.id);
|
||||
}}
|
||||
>
|
||||
아래
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
selectBlock(block.id);
|
||||
selectListItem(node.id);
|
||||
(useEditorStore.getState() as any).indentSelectedListItem(block.id);
|
||||
}}
|
||||
>
|
||||
들여쓰기
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
selectBlock(block.id);
|
||||
selectListItem(node.id);
|
||||
(useEditorStore.getState() as any).outdentSelectedListItem(block.id);
|
||||
}}
|
||||
>
|
||||
내어쓰기
|
||||
</button>
|
||||
</span>
|
||||
{node.children && node.children.length > 0 && renderListNodes(node.children, level + 1)}
|
||||
</li>
|
||||
))}
|
||||
</ListTag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return <div className="w-full py-1">{renderListNodes(itemsTree, 0)}</div>;
|
||||
})()}
|
||||
{block.type === "section" && (() => {
|
||||
const sectionProps = block.props as SectionBlockProps;
|
||||
@@ -1428,10 +1622,38 @@ function SortableEditorBlock({
|
||||
? sectionProps.columns
|
||||
: [{ id: `${block.id}_col_fallback`, span: 12 }];
|
||||
|
||||
const sectionStyle: CSSProperties = {};
|
||||
if (sectionProps.backgroundColorCustom && sectionProps.backgroundColorCustom.trim() !== "") {
|
||||
sectionStyle.backgroundColor = sectionProps.backgroundColorCustom;
|
||||
}
|
||||
if (typeof sectionProps.paddingYPx === "number" && sectionProps.paddingYPx > 0) {
|
||||
sectionStyle.paddingTop = `${sectionProps.paddingYPx}px`;
|
||||
sectionStyle.paddingBottom = `${sectionProps.paddingYPx}px`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`w-full ${bgClass} ${pyClass} rounded border border-dashed border-slate-700`}
|
||||
<div
|
||||
className={`w-full ${bgClass} ${pyClass} rounded border border-dashed border-slate-700`}
|
||||
style={sectionStyle}
|
||||
>
|
||||
<div
|
||||
className="mx-auto px-4"
|
||||
style={{
|
||||
maxWidth:
|
||||
typeof sectionProps.maxWidthPx === "number" && sectionProps.maxWidthPx > 0
|
||||
? `${sectionProps.maxWidthPx}px`
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex"
|
||||
style={{
|
||||
columnGap:
|
||||
typeof sectionProps.gapXPx === "number" && sectionProps.gapXPx > 0
|
||||
? `${sectionProps.gapXPx}px`
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
{columns.map((col) => {
|
||||
const basis = `${(col.span / 12) * 100}%`;
|
||||
const columnBlocks = allBlocks.filter(
|
||||
@@ -1453,6 +1675,7 @@ function SortableEditorBlock({
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
@@ -1533,13 +1756,13 @@ function ColumnDroppable({ id, sectionId, columnId, basis, blocks, renderBlocks,
|
||||
ref={setNodeRef}
|
||||
data-section-id={sectionId}
|
||||
data-column-id={columnId}
|
||||
className="flex-1"
|
||||
style={{ flexBasis: basis }}
|
||||
>
|
||||
<div
|
||||
className={`border rounded flex flex-col gap-2 items-stretch justify-start px-2 py-2 bg-slate-950/40 ${
|
||||
isActiveColumn ? "border-sky-500" : "border-slate-800/80"
|
||||
}`}
|
||||
style={{ flexBasis: basis }}
|
||||
style={{}}
|
||||
>
|
||||
{blocks.length === 0 ? (
|
||||
<span className="text-[11px] px-2 text-center text-slate-500">
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import type { DividerBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
||||
|
||||
export type DividerPropertiesPanelProps = {
|
||||
dividerProps: DividerBlockProps;
|
||||
@@ -46,6 +48,90 @@ export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBl
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
|
||||
<h4 className="text-[11px] font-semibold text-slate-200">구분선 스타일</h4>
|
||||
|
||||
{/* 길이/너비 모드 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>길이 모드</span>
|
||||
<select
|
||||
className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
||||
aria-label="구분선 길이 모드"
|
||||
value={dividerProps.widthMode ?? "full"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<DividerBlockProps["widthMode"]>;
|
||||
updateBlock(selectedBlockId, { widthMode: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="auto">내용에 맞춤</option>
|
||||
<option value="full">전체 폭</option>
|
||||
<option value="fixed">고정 길이 (px)</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(dividerProps.widthMode ?? "full") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="고정 길이 (px)"
|
||||
unitLabel="(px)"
|
||||
value={dividerProps.widthPx ?? 320}
|
||||
min={40}
|
||||
max={1200}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: "짧게", value: 240 },
|
||||
{ id: "md", label: "보통", value: 320 },
|
||||
{ id: "lg", label: "길게", value: 480 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { widthPx: v } as any);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 색상 */}
|
||||
<ColorPickerField
|
||||
label="선 색상"
|
||||
ariaLabelColorInput="구분선 색상 피커"
|
||||
ariaLabelHexInput="구분선 색상 HEX"
|
||||
value={
|
||||
dividerProps.colorHex && dividerProps.colorHex.trim() !== ""
|
||||
? dividerProps.colorHex
|
||||
: TEXT_COLOR_PALETTE[0]?.color ?? "#64748b"
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, { colorHex: hex } as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, { colorHex: item.color } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 상하 여백 (슬라이더) */}
|
||||
<NumericPropertyControl
|
||||
label="위/아래 여백"
|
||||
unitLabel="(px)"
|
||||
value={(() => {
|
||||
if (typeof dividerProps.marginYPx === "number") {
|
||||
return dividerProps.marginYPx;
|
||||
}
|
||||
const y = dividerProps.marginY ?? "md";
|
||||
return y === "sm" ? 8 : y === "lg" ? 24 : 16;
|
||||
})()}
|
||||
min={0}
|
||||
max={50}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "sm", label: "작게", value: 8 },
|
||||
{ id: "md", label: "보통", value: 16 },
|
||||
{ id: "lg", label: "크게", value: 24 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { marginYPx: v } as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import type { ImageBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
|
||||
export type ImagePropertiesPanelProps = {
|
||||
imageProps: ImageBlockProps;
|
||||
@@ -37,6 +38,94 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
|
||||
<h4 className="text-[11px] font-semibold text-slate-200">이미지 스타일</h4>
|
||||
|
||||
{/* 정렬 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>정렬</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
||||
aria-label="이미지 정렬"
|
||||
value={imageProps.align ?? "center"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
align: e.target.value as ImageBlockProps["align"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="left">왼쪽</option>
|
||||
<option value="center">가운데</option>
|
||||
<option value="right">오른쪽</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* 너비 모드 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>너비 모드</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
||||
aria-label="이미지 너비 모드"
|
||||
value={imageProps.widthMode ?? "auto"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthMode: e.target.value as ImageBlockProps["widthMode"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">내용에 맞춤</option>
|
||||
<option value="fixed">고정 너비 (px)</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(imageProps.widthMode ?? "auto") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="고정 너비 (px)"
|
||||
unitLabel="(px)"
|
||||
value={imageProps.widthPx ?? 320}
|
||||
min={40}
|
||||
max={1200}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: "작게", value: 240 },
|
||||
{ id: "md", label: "보통", value: 320 },
|
||||
{ id: "lg", label: "넓게", value: 480 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
widthPx: v,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 모서리 둥글기 */}
|
||||
<NumericPropertyControl
|
||||
label="모서리 둥글기"
|
||||
value={(() => {
|
||||
const r = imageProps.borderRadius ?? "md";
|
||||
return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
|
||||
})()}
|
||||
min={0}
|
||||
max={8}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "none", label: "없음", value: 0 },
|
||||
{ id: "sm", label: "작게", value: 2 },
|
||||
{ id: "md", label: "보통", value: 4 },
|
||||
{ id: "lg", label: "크게", value: 6 },
|
||||
{ id: "full", label: "완전 둥글게", value: 8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
const next =
|
||||
v <= 0 ? "none" : v <= 2 ? "sm" : v <= 5 ? "md" : v <= 7 ? "lg" : "full";
|
||||
updateBlock(selectedBlockId, {
|
||||
borderRadius: next,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,48 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import type { ListBlockProps } from "@/features/editor/state/editorStore";
|
||||
import {
|
||||
buildItemsTreeFromItems,
|
||||
itemsTreeToLines,
|
||||
linesToItemsTree,
|
||||
parseTextareaToLines,
|
||||
stringifyLinesToTextarea,
|
||||
} from "@/features/editor/state/editorStore";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
||||
|
||||
export type ListPropertiesPanelProps = {
|
||||
listProps: ListBlockProps;
|
||||
selectedBlockId: string;
|
||||
selectedListItemId: string | null;
|
||||
updateBlock: (id: string, partial: Partial<ListBlockProps>) => void;
|
||||
};
|
||||
|
||||
export function ListPropertiesPanel({ listProps, selectedBlockId, updateBlock }: ListPropertiesPanelProps) {
|
||||
const firstItem = listProps.items && listProps.items.length > 0 ? listProps.items[0] : "";
|
||||
|
||||
export function ListPropertiesPanel({
|
||||
listProps,
|
||||
selectedBlockId,
|
||||
selectedListItemId,
|
||||
updateBlock,
|
||||
}: ListPropertiesPanelProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>첫 번째 아이템</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
||||
aria-label="리스트 첫 번째 아이템"
|
||||
value={firstItem}
|
||||
onChange={(e) => {
|
||||
const nextItems = [...(listProps.items ?? [])];
|
||||
if (nextItems.length === 0) {
|
||||
nextItems.push(e.target.value);
|
||||
} else {
|
||||
nextItems[0] = e.target.value;
|
||||
<span>리스트 아이템 (줄바꿈으로 구분)</span>
|
||||
<textarea
|
||||
className="w-full min-h-[80px] rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
||||
aria-label="리스트 아이템들"
|
||||
value={(() => {
|
||||
const tree = (listProps as any).itemsTree as any[] | undefined;
|
||||
|
||||
if (tree && tree.length > 0) {
|
||||
// 중첩 리스트가 존재하는 경우, itemsTree → ListLine → textarea 문자열 순으로 직렬화한다.
|
||||
const lines = itemsTreeToLines(tree as any);
|
||||
return stringifyLinesToTextarea(lines as any);
|
||||
}
|
||||
updateBlock(selectedBlockId, { items: nextItems } as any);
|
||||
|
||||
// 기존 하위호환: items 배열이 있다면 그대로 줄바꿈으로 이어 붙여 사용한다.
|
||||
return (listProps.items ?? []).join("\n");
|
||||
})()}
|
||||
onChange={(e) => {
|
||||
const textValue = e.target.value;
|
||||
|
||||
// textarea 내용을 ListLine 배열로 파싱한다.
|
||||
const parsedLines = parseTextareaToLines(textValue);
|
||||
|
||||
// 전체 입력이 완전히 비어 있는 경우에는 빈 리스트 상태를 유지한다.
|
||||
const hasAnyContent = parsedLines.some((line) => line.text.length > 0);
|
||||
|
||||
if (!hasAnyContent) {
|
||||
updateBlock(
|
||||
selectedBlockId,
|
||||
{
|
||||
items: [],
|
||||
itemsTree: [],
|
||||
} as any,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// depth 기반 라인 모델에서 중첩 리스트 트리를 생성한다.
|
||||
const nextTree = linesToItemsTree(selectedBlockId, parsedLines as any);
|
||||
|
||||
// 플랫 items 배열은 기존 하위호환을 위해 text 만 뽑아서 유지한다.
|
||||
const flatItems = parsedLines.map((line) => line.text);
|
||||
|
||||
updateBlock(
|
||||
selectedBlockId,
|
||||
{
|
||||
items: flatItems,
|
||||
itemsTree: nextTree,
|
||||
} as any,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-slate-400">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={listProps.ordered}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { ordered: e.target.checked } as any);
|
||||
}}
|
||||
/>
|
||||
<span>번호 매기기</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<span>정렬</span>
|
||||
<select
|
||||
@@ -60,6 +99,133 @@ export function ListPropertiesPanel({ listProps, selectedBlockId, updateBlock }:
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
|
||||
<h4 className="text-[11px] font-semibold text-slate-200">리스트 스타일</h4>
|
||||
|
||||
{/* 글자 크기 */}
|
||||
<NumericPropertyControl
|
||||
label="글자 크기"
|
||||
unitLabel="(px)"
|
||||
value={(() => {
|
||||
const raw = listProps.fontSizeCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
if (match) return Number(match[1]);
|
||||
return 14;
|
||||
})()}
|
||||
min={10}
|
||||
max={32}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "sm", label: "작게", value: 12 },
|
||||
{ id: "md", label: "보통", value: 14 },
|
||||
{ id: "lg", label: "크게", value: 18 },
|
||||
]}
|
||||
onChangeValue={(px) => {
|
||||
updateBlock(selectedBlockId, { fontSizeCustom: `${px}px` } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 줄 간격 */}
|
||||
<NumericPropertyControl
|
||||
label="줄 간격"
|
||||
value={(() => {
|
||||
const raw = listProps.lineHeightCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
if (match) return Number(match[1]);
|
||||
return 1.5;
|
||||
})()}
|
||||
min={1}
|
||||
max={3}
|
||||
step={0.05}
|
||||
presets={[
|
||||
{ id: "tight", label: "좁게", value: 1.2 },
|
||||
{ id: "normal", label: "보통", value: 1.5 },
|
||||
{ id: "relaxed", label: "넓게", value: 1.8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { lineHeightCustom: v.toString() } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 텍스트 색상 */}
|
||||
<ColorPickerField
|
||||
label="텍스트 색상"
|
||||
ariaLabelColorInput="리스트 텍스트 색상 피커"
|
||||
ariaLabelHexInput="리스트 텍스트 색상 HEX"
|
||||
value={
|
||||
listProps.textColorCustom && listProps.textColorCustom.trim() !== ""
|
||||
? listProps.textColorCustom
|
||||
: "#e5e7eb"
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, { textColorCustom: hex } as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, { textColorCustom: item.color } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 불릿 스타일 (● / ○ / ■ / 숫자형 / 없음) */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>불릿 스타일</span>
|
||||
<select
|
||||
className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
||||
aria-label="리스트 불릿 스타일"
|
||||
value={listProps.bulletStyle ?? "disc"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<ListBlockProps["bulletStyle"]>;
|
||||
|
||||
// 순서형 스타일(decimal / alpha / roman)은 ordered=true, 나머지는 false 로 설정한다.
|
||||
const orderedStyles: Array<NonNullable<ListBlockProps["bulletStyle"]>> = [
|
||||
"decimal",
|
||||
"lower-alpha",
|
||||
"upper-alpha",
|
||||
"lower-roman",
|
||||
"upper-roman",
|
||||
];
|
||||
const ordered = orderedStyles.includes(value);
|
||||
|
||||
updateBlock(selectedBlockId, { bulletStyle: value, ordered } as any);
|
||||
}}
|
||||
>
|
||||
<option value="disc">기본 (●)</option>
|
||||
<option value="circle">원 (○)</option>
|
||||
<option value="square">사각 (■)</option>
|
||||
<option value="decimal">숫자 (1.)</option>
|
||||
<option value="lower-alpha">알파벳 소문자 (a.)</option>
|
||||
<option value="upper-alpha">알파벳 대문자 (A.)</option>
|
||||
<option value="lower-roman">로마 숫자 소문자 (i.)</option>
|
||||
<option value="upper-roman">로마 숫자 대문자 (I.)</option>
|
||||
<option value="none">없음</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* 아이템 간 여백 (슬라이더) */}
|
||||
<NumericPropertyControl
|
||||
label="아이템 간 여백"
|
||||
unitLabel="(px)"
|
||||
value={(() => {
|
||||
if (typeof listProps.gapYPx === "number") {
|
||||
return listProps.gapYPx;
|
||||
}
|
||||
const token = listProps.gapY ?? "md";
|
||||
return token === "sm" ? 4 : token === "lg" ? 16 : 8;
|
||||
})()}
|
||||
min={0}
|
||||
max={40}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "tight", label: "좁게", value: 4 },
|
||||
{ id: "normal", label: "보통", value: 8 },
|
||||
{ id: "relaxed", label: "넓게", value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { gapYPx: v } as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -16,12 +16,17 @@ import { FormControllerPanel } from "../forms/FormControllerPanel";
|
||||
interface PropertiesSidebarProps {
|
||||
blocks: Block[];
|
||||
selectedBlockId: string | null;
|
||||
selectedListItemId: string | null;
|
||||
updateBlock: (id: string, partial: any) => void;
|
||||
removeBlock: (id: string) => void;
|
||||
duplicateBlock: (id: string) => void;
|
||||
// 텍스트 속성 패널에서 사용하는 인라인 편집 상태를 그대로 전달한다.
|
||||
editingBlockId: string | null;
|
||||
setEditingText: (value: string) => void;
|
||||
onMoveSelectedItemUp: (blockId: string) => void;
|
||||
onMoveSelectedItemDown: (blockId: string) => void;
|
||||
onIndentSelectedItem: (blockId: string) => void;
|
||||
onOutdentSelectedItem: (blockId: string) => void;
|
||||
}
|
||||
|
||||
// 우측 속성 패널을 분리한 컴포넌트
|
||||
@@ -29,11 +34,16 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
|
||||
const {
|
||||
blocks,
|
||||
selectedBlockId,
|
||||
selectedListItemId,
|
||||
updateBlock,
|
||||
removeBlock,
|
||||
duplicateBlock,
|
||||
editingBlockId,
|
||||
setEditingText,
|
||||
onMoveSelectedItemUp,
|
||||
onMoveSelectedItemDown,
|
||||
onIndentSelectedItem,
|
||||
onOutdentSelectedItem,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
@@ -100,6 +110,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
|
||||
<ListPropertiesPanel
|
||||
listProps={listProps}
|
||||
selectedBlockId={selectedBlockId}
|
||||
selectedListItemId={selectedListItemId}
|
||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
|
||||
export type SectionPropertiesPanelProps = {
|
||||
sectionProps: SectionBlockProps;
|
||||
@@ -11,42 +13,374 @@ export type SectionPropertiesPanelProps = {
|
||||
export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBlock }: SectionPropertiesPanelProps) {
|
||||
return (
|
||||
<>
|
||||
{/* 섹션 배경 */}
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>배경</span>
|
||||
<select
|
||||
className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
||||
aria-label="섹션 배경"
|
||||
value={sectionProps.background ?? "default"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<SectionBlockProps["background"]>;
|
||||
updateBlock(selectedBlockId, { background: value } as any);
|
||||
{/* 섹션 배경: 커스텀 색상 피커만 사용 */}
|
||||
<div className="mt-1">
|
||||
<ColorPickerField
|
||||
label="배경 색상"
|
||||
ariaLabelColorInput="섹션 배경 색상 선택"
|
||||
ariaLabelHexInput="섹션 배경 색상 HEX 입력"
|
||||
value={sectionProps.backgroundColorCustom ?? ""}
|
||||
onChange={(hex) => {
|
||||
const next = hex && hex.trim().length > 0 ? hex : undefined;
|
||||
updateBlock(selectedBlockId, { backgroundColorCustom: next } as any);
|
||||
}}
|
||||
>
|
||||
<option value="default">기본</option>
|
||||
<option value="muted">Muted</option>
|
||||
<option value="primary">Primary</option>
|
||||
</select>
|
||||
</label>
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 상하 패딩 */}
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>세로 패딩</span>
|
||||
{/* 세로 패딩 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
|
||||
<div className="mt-3 space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="세로 패딩"
|
||||
unitLabel="(px)"
|
||||
value={typeof sectionProps.paddingYPx === "number" ? sectionProps.paddingYPx : 48}
|
||||
min={16}
|
||||
max={80}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "x-tight", label: "매우 좁게", value: 16 },
|
||||
{ id: "tight", label: "좁게", value: 32 },
|
||||
{ id: "normal", label: "보통", value: 48 },
|
||||
{ id: "relaxed", label: "넓게", value: 64 },
|
||||
{ id: "x-relaxed", label: "아주 넓게", value: 80 },
|
||||
]}
|
||||
onChangeValue={(next) => {
|
||||
const safe = Number.isFinite(next) ? next : 48;
|
||||
updateBlock(selectedBlockId, { paddingYPx: safe } as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
|
||||
<h4 className="text-[11px] font-semibold text-slate-200">섹션 레이아웃</h4>
|
||||
|
||||
{/* 컬럼 레이아웃 프리셋 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>섹션 컬럼 레이아웃</span>
|
||||
<select
|
||||
className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
||||
aria-label="섹션 세로 패딩"
|
||||
value={sectionProps.paddingY ?? "md"}
|
||||
aria-label="섹션 컬럼 레이아웃"
|
||||
value={(() => {
|
||||
const cols = sectionProps.columns ?? [];
|
||||
const spans = cols.map((c) => c.span).join("-");
|
||||
if (spans === "12") return "one-full";
|
||||
if (spans === "6-6") return "two-equal";
|
||||
if (spans === "4-8") return "two-1-2";
|
||||
if (spans === "8-4") return "two-2-1";
|
||||
if (spans === "4-4-4") return "three-equal";
|
||||
return "custom";
|
||||
})()}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<SectionBlockProps["paddingY"]>;
|
||||
updateBlock(selectedBlockId, { paddingY: value } as any);
|
||||
const v = e.target.value as
|
||||
| "one-full"
|
||||
| "two-equal"
|
||||
| "two-1-2"
|
||||
| "two-2-1"
|
||||
| "three-equal"
|
||||
| "custom";
|
||||
|
||||
if (v === "custom") return;
|
||||
const current = sectionProps.columns ?? [];
|
||||
|
||||
const ensureId = (index: number) => {
|
||||
if (current[index]?.id) return current[index].id;
|
||||
return `${selectedBlockId}_col_${index + 1}`;
|
||||
};
|
||||
|
||||
const nextColumns =
|
||||
v === "one-full"
|
||||
? [
|
||||
{ id: ensureId(0), span: 12 },
|
||||
]
|
||||
: v === "two-equal"
|
||||
? [
|
||||
{ id: ensureId(0), span: 6 },
|
||||
{ id: ensureId(1), span: 6 },
|
||||
]
|
||||
: v === "two-1-2"
|
||||
? [
|
||||
{ id: ensureId(0), span: 4 },
|
||||
{ id: ensureId(1), span: 8 },
|
||||
]
|
||||
: v === "two-2-1"
|
||||
? [
|
||||
{ id: ensureId(0), span: 8 },
|
||||
{ id: ensureId(1), span: 4 },
|
||||
]
|
||||
: [
|
||||
{ id: ensureId(0), span: 4 },
|
||||
{ id: ensureId(1), span: 4 },
|
||||
{ id: ensureId(2), span: 4 },
|
||||
];
|
||||
|
||||
updateBlock(selectedBlockId, { columns: nextColumns } as any);
|
||||
}}
|
||||
>
|
||||
<option value="sm">작게</option>
|
||||
<option value="md">보통</option>
|
||||
<option value="lg">크게</option>
|
||||
<option value="one-full">1열 (1/1)</option>
|
||||
<option value="two-equal">2열 (1/2 - 1/2)</option>
|
||||
<option value="two-1-2">2열 (1/3 - 2/3)</option>
|
||||
<option value="two-2-1">2열 (2/3 - 1/3)</option>
|
||||
<option value="three-equal">3열 (1/3 - 1/3 - 1/3)</option>
|
||||
<option value="custom">직접 조정</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* 컬럼 개수 직접 조정 (1~5열) */}
|
||||
{(() => {
|
||||
const current = sectionProps.columns ?? [];
|
||||
const count = current.length || 1;
|
||||
|
||||
const handleChangeCount = (nextCount: number) => {
|
||||
const clamped = Math.max(1, Math.min(5, Math.floor(nextCount)));
|
||||
if (clamped === count) return;
|
||||
|
||||
const base = Math.floor(12 / clamped) || 1;
|
||||
const rest = 12 - base * clamped;
|
||||
|
||||
const nextColumns = Array.from({ length: clamped }).map((_, index) => {
|
||||
const existing = current[index];
|
||||
const id = existing?.id ?? `${selectedBlockId}_col_${index + 1}`;
|
||||
const span = base + (index === clamped - 1 ? rest : 0);
|
||||
return { id, span };
|
||||
});
|
||||
|
||||
updateBlock(selectedBlockId, { columns: nextColumns } as any);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-2 flex items-center justify-between text-xs text-slate-300">
|
||||
<span>{`컬럼 개수: ${count}열 (최대 5열)`}</span>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-700 px-2 py-0.5 text-[11px] disabled:opacity-40"
|
||||
onClick={() => handleChangeCount(count - 1)}
|
||||
disabled={count <= 1}
|
||||
>
|
||||
- 열 제거
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-700 px-2 py-0.5 text-[11px] disabled:opacity-40"
|
||||
onClick={() => handleChangeCount(count + 1)}
|
||||
disabled={count >= 5}
|
||||
>
|
||||
+ 열 추가
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* 컬럼별 span 조정
|
||||
- 컬럼이 1개일 때: 12 고정, 편집 불가능
|
||||
- 컬럼이 2개 이상일 때: 앞의 N-1개 컬럼만 직접 조정, 마지막 컬럼은 합이 항상 12가 되도록 자동 계산 */}
|
||||
{(() => {
|
||||
const columns = sectionProps.columns ?? [];
|
||||
const colCount = columns.length || 1;
|
||||
|
||||
// 1컬럼인 경우: 12 고정 표시
|
||||
if (colCount === 1) {
|
||||
const only = columns[0];
|
||||
return (
|
||||
<label key={only.id} className="flex flex-col gap-1">
|
||||
<span>{`1열 폭 (고정 12/12)`}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
min={12}
|
||||
max={12}
|
||||
step={1}
|
||||
className="flex-1 opacity-60"
|
||||
aria-label="1열 폭 슬라이더 (고정)"
|
||||
value={12}
|
||||
disabled
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
min={12}
|
||||
max={12}
|
||||
className="w-16 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none text-slate-400"
|
||||
aria-label="1열 폭 (고정 12/12)"
|
||||
value={12}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
const lastIndex = colCount - 1;
|
||||
|
||||
return columns.map((col, index) => {
|
||||
const maxSpanForEach = Math.max(1, 12 - (colCount - 1));
|
||||
|
||||
// 마지막 컬럼: 자동 계산, 편집 불가
|
||||
if (index === lastIndex) {
|
||||
const nonLast = columns.slice(0, lastIndex);
|
||||
const nonLastSum = nonLast.reduce(
|
||||
(sum, c) => sum + (Number.isFinite(c.span) ? c.span : 0),
|
||||
0,
|
||||
);
|
||||
let autoSpan = 12 - nonLastSum;
|
||||
if (!Number.isFinite(autoSpan) || autoSpan < 1) autoSpan = 1;
|
||||
|
||||
return (
|
||||
<label key={col.id} className="flex flex-col gap-1">
|
||||
<span>{`${index + 1}열 폭 (자동, 합계 12 유지)`}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={maxSpanForEach}
|
||||
step={1}
|
||||
className="flex-1 opacity-60"
|
||||
aria-label={`${index + 1}열 폭 슬라이더 (자동)`}
|
||||
value={Number.isFinite(col.span) ? col.span : autoSpan}
|
||||
disabled
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={maxSpanForEach}
|
||||
className="w-16 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none text-slate-400"
|
||||
aria-label={`${index + 1}열 폭 (자동)`}
|
||||
value={Number.isFinite(col.span) ? col.span : autoSpan}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
// 앞의 N-1개 컬럼: 직접 조정하면 마지막 컬럼을 자동으로 보정해서 합계 12 유지
|
||||
const otherNonLastSum = columns.reduce((sum, c, idx) => {
|
||||
if (idx === index || idx === lastIndex) return sum;
|
||||
return sum + (Number.isFinite(c.span) ? c.span : 0);
|
||||
}, 0);
|
||||
|
||||
const maxForCurrent = Math.max(
|
||||
1,
|
||||
Math.min(maxSpanForEach, 11 - otherNonLastSum),
|
||||
);
|
||||
|
||||
const handleChange = (raw: number) => {
|
||||
if (Number.isNaN(raw)) return;
|
||||
const clampedCurrent = Math.min(
|
||||
maxForCurrent,
|
||||
Math.max(1, Math.floor(raw)),
|
||||
);
|
||||
|
||||
const newNonLastTotal = otherNonLastSum + clampedCurrent;
|
||||
let lastSpan = 12 - newNonLastTotal;
|
||||
if (!Number.isFinite(lastSpan) || lastSpan < 1) {
|
||||
lastSpan = 1;
|
||||
}
|
||||
|
||||
const nextColumns = columns.map((c, idx) => {
|
||||
if (idx === index) {
|
||||
return { ...c, span: clampedCurrent };
|
||||
}
|
||||
if (idx === lastIndex) {
|
||||
return { ...c, span: lastSpan };
|
||||
}
|
||||
return c;
|
||||
});
|
||||
|
||||
updateBlock(selectedBlockId, { columns: nextColumns } as any);
|
||||
};
|
||||
|
||||
return (
|
||||
<label key={col.id} className="flex flex-col gap-1">
|
||||
<span>{`${index + 1}열 폭 (1~${maxForCurrent})`}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={maxForCurrent}
|
||||
step={1}
|
||||
className="flex-1"
|
||||
aria-label={`${index + 1}열 폭 슬라이더`}
|
||||
value={Number.isFinite(col.span) ? col.span : 12}
|
||||
onChange={(e) => {
|
||||
handleChange(Number(e.target.value));
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={maxForCurrent}
|
||||
className="w-16 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
||||
aria-label={`${index + 1}열 폭 (1~${maxForCurrent})`}
|
||||
value={Number.isFinite(col.span) ? col.span : 12}
|
||||
onChange={(e) => {
|
||||
handleChange(Number(e.target.value));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
|
||||
{/* 최대 폭 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
|
||||
<NumericPropertyControl
|
||||
label="최대 폭"
|
||||
unitLabel="(px)"
|
||||
value={typeof sectionProps.maxWidthPx === "number" ? sectionProps.maxWidthPx : 960}
|
||||
min={640}
|
||||
max={1440}
|
||||
step={16}
|
||||
presets={[
|
||||
{ id: "x-narrow", label: "매우 좁게", value: 640 },
|
||||
{ id: "narrow", label: "좁게", value: 800 },
|
||||
{ id: "normal", label: "보통", value: 960 },
|
||||
{ id: "wide", label: "넓게", value: 1200 },
|
||||
{ id: "x-wide", label: "아주 넓게", value: 1440 },
|
||||
]}
|
||||
onChangeValue={(next) => {
|
||||
const safe = Number.isFinite(next) ? next : 960;
|
||||
updateBlock(selectedBlockId, { maxWidthPx: safe } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 컬럼 간 간격 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
|
||||
<NumericPropertyControl
|
||||
label="컬럼 간 간격"
|
||||
unitLabel="(px)"
|
||||
value={typeof sectionProps.gapXPx === "number" ? sectionProps.gapXPx : 24}
|
||||
min={0}
|
||||
max={64}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "zero", label: "0", value: 0 },
|
||||
{ id: "tight", label: "좁게", value: 16 },
|
||||
{ id: "normal", label: "보통", value: 24 },
|
||||
{ id: "relaxed", label: "넓게", value: 32 },
|
||||
{ id: "x-relaxed", label: "아주 넓게", value: 48 },
|
||||
{ id: "max", label: "최대", value: 64 },
|
||||
]}
|
||||
onChangeValue={(next) => {
|
||||
const safe = Number.isFinite(next) ? next : 24;
|
||||
updateBlock(selectedBlockId, { gapXPx: safe } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 세로 정렬 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>컬럼 세로 정렬</span>
|
||||
<select
|
||||
className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
||||
aria-label="섹션 컬럼 세로 정렬"
|
||||
value={sectionProps.alignItems ?? "top"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<SectionBlockProps["alignItems"]>;
|
||||
updateBlock(selectedBlockId, { alignItems: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="top">위</option>
|
||||
<option value="center">가운데</option>
|
||||
<option value="bottom">아래</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -17,6 +17,11 @@ export function createBlogTemplateBlocks(opts: {
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "lg",
|
||||
// 블로그 리스트는 넓은 폭과 충분한 카드 간격을 사용한다.
|
||||
paddingYPx: 72,
|
||||
maxWidthPx: 1120,
|
||||
gapXPx: 32,
|
||||
backgroundColorCustom: "#020617",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
|
||||
@@ -15,6 +15,11 @@ export function createCtaTemplateBlocks(opts: {
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "primary",
|
||||
paddingY: "md",
|
||||
// CTA 는 강한 색상과 적당한 여백, 비교적 좁은 폭을 사용한다.
|
||||
paddingYPx: 64,
|
||||
maxWidthPx: 960,
|
||||
gapXPx: 24,
|
||||
backgroundColorCustom: "#0c4a6e",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
|
||||
@@ -15,6 +15,10 @@ export function createFaqTemplateBlocks(opts: {
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "md",
|
||||
// FAQ 는 비교적 좁은 폭과 보통 여백을 사용한다.
|
||||
paddingYPx: 56,
|
||||
maxWidthPx: 720,
|
||||
backgroundColorCustom: "#020617",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
|
||||
@@ -17,6 +17,11 @@ export function createFeaturesTemplateBlocks(opts: {
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "muted",
|
||||
paddingY: "md",
|
||||
// 기능 리스트는 비교적 넓은 폭과 보통 수준의 여백을 사용한다.
|
||||
paddingYPx: 72,
|
||||
maxWidthPx: 1040,
|
||||
gapXPx: 32,
|
||||
backgroundColorCustom: "#0f172a",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
|
||||
@@ -15,6 +15,10 @@ export function createFooterTemplateBlocks(opts: {
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "muted",
|
||||
paddingY: "md",
|
||||
// 푸터는 상대적으로 낮은 높이와 좁은 최대 폭을 사용한다.
|
||||
paddingYPx: 40,
|
||||
maxWidthPx: 800,
|
||||
backgroundColorCustom: "#020617",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
|
||||
@@ -16,6 +16,11 @@ export function createHeroTemplateBlocks(opts: {
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "lg",
|
||||
// 히어로는 가장 여백이 넓고 화면 중앙에 집중되도록 설정한다.
|
||||
paddingYPx: 96,
|
||||
maxWidthPx: 960,
|
||||
gapXPx: 40,
|
||||
backgroundColorCustom: "#020617", // 다크 히어로 섹션
|
||||
columns: [
|
||||
{
|
||||
id: `${sectionId}_col_1`,
|
||||
|
||||
@@ -17,6 +17,11 @@ export function createPricingTemplateBlocks(opts: {
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "muted",
|
||||
paddingY: "lg",
|
||||
// 요금제는 꽤 넓은 여백과 넓은 최대 폭, 넉넉한 컬럼 간격을 사용한다.
|
||||
paddingYPx: 88,
|
||||
maxWidthPx: 1120,
|
||||
gapXPx: 40,
|
||||
backgroundColorCustom: "#0f172a",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
|
||||
@@ -17,6 +17,11 @@ export function createTeamTemplateBlocks(opts: {
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "muted",
|
||||
paddingY: "lg",
|
||||
// 팀 섹션은 보라 계열 배경과 넓은 폭, 보통 간격을 사용한다.
|
||||
paddingYPx: 80,
|
||||
maxWidthPx: 1120,
|
||||
gapXPx: 32,
|
||||
backgroundColorCustom: "#1e1b4b", // 보라/인디고 계열
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
|
||||
@@ -17,6 +17,11 @@ export function createTestimonialsTemplateBlocks(opts: {
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "lg",
|
||||
// 후기 섹션은 중간 폭과 적당한 카드 간격을 사용한다.
|
||||
paddingYPx: 80,
|
||||
maxWidthPx: 1040,
|
||||
gapXPx: 36,
|
||||
backgroundColorCustom: "#020617",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
|
||||
@@ -31,10 +31,10 @@ export type ColorPickerFieldProps = {
|
||||
|
||||
// 텍스트/버튼 등에서 공통으로 사용하는 기본 색상 팔레트
|
||||
export const TEXT_COLOR_PALETTE: ColorPaletteItem[] = [
|
||||
// 투명
|
||||
{ id: "transparent", label: "투명", color: "transparent" },
|
||||
// 기본/중립 계열
|
||||
{ id: "default", label: "기본", color: "#e5e7eb" },
|
||||
// 투명
|
||||
{ id: "transparent", label: "투명", color: "transparent" },
|
||||
{ id: "muted", label: "연한", color: "#9ca3af" },
|
||||
{ id: "strong", label: "강조", color: "#f9fafb" },
|
||||
{ id: "neutral", label: "중립", color: "#94a3b8" },
|
||||
|
||||
@@ -7,12 +7,58 @@ import type {
|
||||
ButtonBlockProps,
|
||||
ImageBlockProps,
|
||||
SectionBlockProps,
|
||||
DividerBlockProps,
|
||||
ListBlockProps,
|
||||
ListItemNode,
|
||||
FormBlockProps,
|
||||
FormInputBlockProps,
|
||||
FormSelectBlockProps,
|
||||
FormCheckboxBlockProps,
|
||||
FormRadioBlockProps,
|
||||
FormSelectOption,
|
||||
FormRadioOption,
|
||||
FormCheckboxOption,
|
||||
} from "@/features/editor/state/editorStore";
|
||||
|
||||
// 섹션 레이아웃/스타일 토큰을 실제 Tailwind 클래스 조합으로 변환하는 유틸
|
||||
// (에디터/퍼블릭 렌더러에서 동일한 규칙을 재사용하기 위해 export 한다.)
|
||||
export function getSectionLayoutConfig(props: SectionBlockProps) {
|
||||
const backgroundClass =
|
||||
props.background === "muted"
|
||||
? "bg-slate-900"
|
||||
: props.background === "primary"
|
||||
? "bg-sky-900"
|
||||
: "bg-slate-950";
|
||||
|
||||
const paddingYClass =
|
||||
props.paddingY === "sm" ? "py-8" : props.paddingY === "lg" ? "py-20" : "py-12";
|
||||
|
||||
const maxWidthClass =
|
||||
props.maxWidthMode === "narrow"
|
||||
? "max-w-3xl"
|
||||
: props.maxWidthMode === "wide"
|
||||
? "max-w-6xl"
|
||||
: "max-w-5xl";
|
||||
|
||||
const gapXClass =
|
||||
props.gapX === "sm" ? "gap-4" : props.gapX === "lg" ? "gap-10" : "gap-8";
|
||||
|
||||
const alignItemsClass =
|
||||
props.alignItems === "center"
|
||||
? "items-center"
|
||||
: props.alignItems === "bottom"
|
||||
? "items-end"
|
||||
: "items-start";
|
||||
|
||||
return {
|
||||
backgroundClass,
|
||||
paddingYClass,
|
||||
maxWidthClass,
|
||||
gapXClass,
|
||||
alignItemsClass,
|
||||
} as const;
|
||||
}
|
||||
|
||||
// 에디터 크롬 없이 실제 랜딩 페이지처럼 블록들을 렌더링하는 컴포넌트
|
||||
interface PublicPageRendererProps {
|
||||
blocks: Block[];
|
||||
@@ -77,6 +123,151 @@ export function PublicPageRenderer({ blocks }: PublicPageRendererProps) {
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "formInput") {
|
||||
const props = block.props as FormInputBlockProps;
|
||||
|
||||
// 정렬: 입력 필드의 textAlign 으로 매핑한다.
|
||||
const align = props.align ?? "left";
|
||||
const labelLayout = props.labelLayout ?? "stacked";
|
||||
const widthMode = props.widthMode ?? (props.fullWidth ? "full" : "auto");
|
||||
|
||||
const wrapperLayoutClass =
|
||||
labelLayout === "inline" ? "flex flex-row items-center gap-2" : "flex flex-col gap-1";
|
||||
|
||||
const baseInputClass =
|
||||
"rounded border px-3 py-2 text-xs outline-none focus:border-sky-500";
|
||||
|
||||
const widthClass = widthMode === "full" ? "w-full" : "";
|
||||
|
||||
const inputStyle: CSSProperties = {
|
||||
textAlign: align,
|
||||
};
|
||||
|
||||
// 너비: fixed 모드일 때 widthPx 를 직접 사용한다.
|
||||
if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
|
||||
inputStyle.width = `${props.widthPx}px`;
|
||||
}
|
||||
|
||||
// 타이포 관련 커스텀 값
|
||||
if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
|
||||
inputStyle.fontSize = props.fontSizeCustom;
|
||||
}
|
||||
if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
|
||||
inputStyle.lineHeight = props.lineHeightCustom;
|
||||
}
|
||||
if (props.letterSpacingCustom && props.letterSpacingCustom.trim() !== "") {
|
||||
inputStyle.letterSpacing = props.letterSpacingCustom;
|
||||
}
|
||||
|
||||
// 색상 관련 커스텀 값
|
||||
if (props.textColorCustom && props.textColorCustom.trim() !== "") {
|
||||
inputStyle.color = props.textColorCustom;
|
||||
} else {
|
||||
inputStyle.color = "#f9fafb";
|
||||
}
|
||||
|
||||
if (props.fillColorCustom && props.fillColorCustom.trim() !== "") {
|
||||
inputStyle.backgroundColor = props.fillColorCustom;
|
||||
} else {
|
||||
inputStyle.backgroundColor = "#020617"; // 기본 다크 배경과 유사한 색
|
||||
}
|
||||
|
||||
if (props.strokeColorCustom && props.strokeColorCustom.trim() !== "") {
|
||||
inputStyle.borderColor = props.strokeColorCustom;
|
||||
} else {
|
||||
inputStyle.borderColor = "#334155";
|
||||
}
|
||||
|
||||
// 모서리 둥글기: borderRadius 토큰을 px 값으로 변환한다.
|
||||
const radiusToken = props.borderRadius ?? "md";
|
||||
const radiusPx =
|
||||
radiusToken === "none" ? 0 : radiusToken === "sm" ? 2 : radiusToken === "lg" ? 6 : radiusToken === "full" ? 9999 : 4;
|
||||
inputStyle.borderRadius = `${radiusPx}px`;
|
||||
|
||||
return (
|
||||
<label key={block.id} className={`${wrapperLayoutClass} text-xs text-slate-200`}>
|
||||
<span>{props.label}</span>
|
||||
{props.inputType === "textarea" ? (
|
||||
<textarea
|
||||
className={`${baseInputClass} ${widthClass}`}
|
||||
style={inputStyle}
|
||||
placeholder={props.placeholder || props.label}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
className={`${baseInputClass} ${widthClass}`}
|
||||
style={inputStyle}
|
||||
type={props.inputType === "email" ? "email" : "text"}
|
||||
placeholder={props.placeholder || props.label}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "formSelect") {
|
||||
const props = block.props as FormSelectBlockProps;
|
||||
|
||||
return (
|
||||
<label key={block.id} className="flex flex-col gap-1 text-xs text-slate-200">
|
||||
<span>{props.label}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-xs outline-none focus:border-sky-500"
|
||||
defaultValue={props.options[0]?.value ?? ""}
|
||||
>
|
||||
{props.options.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "formCheckbox") {
|
||||
const props = block.props as FormCheckboxBlockProps;
|
||||
|
||||
return (
|
||||
<div key={block.id} className="flex flex-col gap-1 text-xs text-slate-200">
|
||||
<span>{props.groupLabel}</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
{props.options.map((opt) => (
|
||||
<label key={opt.value} className="inline-flex items-center gap-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-slate-700 bg-slate-900 text-sky-500"
|
||||
/>
|
||||
<span>{opt.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "formRadio") {
|
||||
const props = block.props as FormRadioBlockProps;
|
||||
|
||||
return (
|
||||
<div key={block.id} className="flex flex-col gap-1 text-xs text-slate-200">
|
||||
<span>{props.groupLabel}</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
{props.options.map((opt) => (
|
||||
<label key={opt.value} className="inline-flex items-center gap-1">
|
||||
<input
|
||||
type="radio"
|
||||
className="h-4 w-4 border-slate-700 bg-slate-900 text-sky-500"
|
||||
name={props.formFieldName}
|
||||
/>
|
||||
<span>{opt.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "button") {
|
||||
const props = block.props as ButtonBlockProps;
|
||||
|
||||
@@ -91,6 +282,138 @@ export function PublicPageRenderer({ blocks }: PublicPageRendererProps) {
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "divider") {
|
||||
const props = block.props as DividerBlockProps;
|
||||
|
||||
const alignClass =
|
||||
props.align === "center" ? "items-center" : props.align === "right" ? "items-end" : "items-start";
|
||||
|
||||
const thicknessClass = props.thickness === "medium" ? "h-[2px]" : "h-px";
|
||||
|
||||
const margin =
|
||||
typeof props.marginYPx === "number"
|
||||
? props.marginYPx
|
||||
: props.marginY === "sm"
|
||||
? 8
|
||||
: props.marginY === "lg"
|
||||
? 24
|
||||
: 16;
|
||||
|
||||
const dividerStyle: CSSProperties = {
|
||||
backgroundColor:
|
||||
props.colorHex && props.colorHex.trim() !== ""
|
||||
? props.colorHex
|
||||
: "#475569", // 기본 slate 계열 색상
|
||||
};
|
||||
|
||||
// 길이/너비: widthMode/widthPx 에 따라 조정한다.
|
||||
const widthMode = props.widthMode ?? "full";
|
||||
const innerStyle: CSSProperties = {};
|
||||
let innerWidthClass = "w-full";
|
||||
|
||||
if (widthMode === "auto") {
|
||||
innerWidthClass = "w-1/2";
|
||||
} else if (widthMode === "fixed") {
|
||||
innerWidthClass = "";
|
||||
if (typeof props.widthPx === "number" && props.widthPx > 0) {
|
||||
innerStyle.width = `${props.widthPx}px`;
|
||||
} else {
|
||||
innerStyle.width = "320px";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={block.id}
|
||||
className={`flex ${alignClass}`}
|
||||
style={{ marginTop: margin, marginBottom: margin }}
|
||||
>
|
||||
<div className="max-w-xs" style={innerStyle}>
|
||||
<div className={`${thicknessClass} ${innerWidthClass}`} style={dividerStyle} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "list") {
|
||||
const props = block.props as ListBlockProps;
|
||||
|
||||
const alignClass =
|
||||
props.align === "center" ? "text-center" : props.align === "right" ? "text-right" : "text-left";
|
||||
|
||||
const bulletStyleRaw = props.bulletStyle ?? (props.ordered ? "decimal" : "disc");
|
||||
|
||||
const gapPx =
|
||||
typeof props.gapYPx === "number"
|
||||
? props.gapYPx
|
||||
: props.gapY === "sm"
|
||||
? 4
|
||||
: props.gapY === "lg"
|
||||
? 16
|
||||
: 8;
|
||||
|
||||
const listStyle: CSSProperties = {};
|
||||
if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
|
||||
listStyle.fontSize = props.fontSizeCustom;
|
||||
}
|
||||
if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
|
||||
listStyle.lineHeight = props.lineHeightCustom;
|
||||
}
|
||||
if (props.textColorCustom && props.textColorCustom.trim() !== "") {
|
||||
listStyle.color = props.textColorCustom;
|
||||
}
|
||||
|
||||
const bulletStyle = bulletStyleRaw;
|
||||
|
||||
const itemsTree: ListItemNode[] =
|
||||
(props as any).itemsTree && (props as any).itemsTree.length > 0
|
||||
? ((props as any).itemsTree as ListItemNode[])
|
||||
: props.items && props.items.length > 0
|
||||
? props.items.map((text, index) => ({
|
||||
id: `${block.id}_item_${index + 1}`,
|
||||
text,
|
||||
children: [],
|
||||
}))
|
||||
: [
|
||||
{
|
||||
id: `${block.id}_item_1`,
|
||||
text: "리스트 아이템 1",
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
|
||||
const renderListNodes = (nodes: ListItemNode[], level: number): React.ReactNode => {
|
||||
const isOrderedLevel = bulletStyle === "decimal"; // 1단계에서는 전체 레벨 동일 스타일 사용
|
||||
const ListTag = isOrderedLevel ? "ol" : "ul";
|
||||
|
||||
return (
|
||||
<ListTag
|
||||
className={alignClass}
|
||||
style={{
|
||||
...listStyle,
|
||||
listStyleType:
|
||||
bulletStyle === "none"
|
||||
? "none"
|
||||
: bulletStyle,
|
||||
paddingLeft: 12 + level * 8,
|
||||
}}
|
||||
>
|
||||
{nodes.map((node, index) => (
|
||||
<li
|
||||
key={node.id}
|
||||
style={index < nodes.length - 1 ? { marginBottom: gapPx } : undefined}
|
||||
>
|
||||
{node.text}
|
||||
{node.children && node.children.length > 0 && renderListNodes(node.children, level + 1)}
|
||||
</li>
|
||||
))}
|
||||
</ListTag>
|
||||
);
|
||||
};
|
||||
|
||||
return renderListNodes(itemsTree, 0);
|
||||
}
|
||||
|
||||
if (block.type === "form") {
|
||||
const props = block.props as FormBlockProps;
|
||||
|
||||
@@ -364,17 +687,30 @@ export function PublicPageRenderer({ blocks }: PublicPageRendererProps) {
|
||||
const renderSection = (section: Block) => {
|
||||
const props = section.props as SectionBlockProps;
|
||||
|
||||
const bgClass =
|
||||
props.background === "muted" ? "bg-slate-900" : props.background === "primary" ? "bg-sky-900" : "bg-slate-950";
|
||||
|
||||
const pyClass = props.paddingY === "sm" ? "py-8" : props.paddingY === "lg" ? "py-20" : "py-12";
|
||||
const { backgroundClass, paddingYClass, maxWidthClass, gapXClass, alignItemsClass } =
|
||||
getSectionLayoutConfig(props);
|
||||
|
||||
const columns = props.columns && props.columns.length > 0 ? props.columns : [{ id: `${section.id}_col`, span: 12 }];
|
||||
|
||||
const sectionStyle: CSSProperties = {};
|
||||
if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
|
||||
sectionStyle.backgroundColor = props.backgroundColorCustom;
|
||||
}
|
||||
if (typeof props.paddingYPx === "number" && props.paddingYPx > 0) {
|
||||
sectionStyle.paddingTop = `${props.paddingYPx}px`;
|
||||
sectionStyle.paddingBottom = `${props.paddingYPx}px`;
|
||||
}
|
||||
|
||||
return (
|
||||
<section key={section.id} className={`${bgClass} ${pyClass}`}>
|
||||
<div className="mx-auto max-w-5xl px-4">
|
||||
<div className="flex gap-8">
|
||||
<section key={section.id} className={`${backgroundClass} ${paddingYClass}`} style={sectionStyle}>
|
||||
<div
|
||||
className={`mx-auto ${maxWidthClass} px-4`}
|
||||
style={{ maxWidth: typeof props.maxWidthPx === "number" && props.maxWidthPx > 0 ? `${props.maxWidthPx}px` : undefined }}
|
||||
>
|
||||
<div
|
||||
className={`flex ${gapXClass} ${alignItemsClass}`}
|
||||
style={{ columnGap: typeof props.gapXPx === "number" && props.gapXPx > 0 ? `${props.gapXPx}px` : undefined }}
|
||||
>
|
||||
{columns.map((col) => {
|
||||
const basis = `${(col.span / 12) * 100}%`;
|
||||
const columnBlocks = blocks.filter((b) => b.sectionId === section.id && b.columnId === col.id);
|
||||
|
||||
@@ -114,30 +114,369 @@ export interface ButtonBlockProps {
|
||||
export interface ImageBlockProps {
|
||||
src: string;
|
||||
alt: string;
|
||||
// 이미지 정렬: 기본은 center
|
||||
align?: "left" | "center" | "right";
|
||||
// 너비 모드: auto(콘텐츠에 맞춤) 또는 fixed(px 지정)
|
||||
widthMode?: "auto" | "fixed";
|
||||
widthPx?: number;
|
||||
// 모서리 둥글기
|
||||
borderRadius?: "none" | "sm" | "md" | "lg" | "full";
|
||||
}
|
||||
|
||||
// 구분선 블록 속성
|
||||
export interface DividerBlockProps {
|
||||
align: "left" | "center" | "right";
|
||||
thickness: "thin" | "medium";
|
||||
// 길이/너비
|
||||
widthMode?: "auto" | "full" | "fixed";
|
||||
widthPx?: number;
|
||||
// 색상
|
||||
colorHex?: string;
|
||||
// 상하 여백 (토큰, 호환용)
|
||||
marginY?: "sm" | "md" | "lg";
|
||||
// 상하 여백(px) 숫자 값
|
||||
marginYPx?: number;
|
||||
}
|
||||
|
||||
// 리스트 아이템 트리(중첩 리스트) 노드 정의
|
||||
export interface ListItemNode {
|
||||
id: string;
|
||||
text: string;
|
||||
children?: ListItemNode[];
|
||||
}
|
||||
|
||||
export interface ListLine {
|
||||
depth: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
// 리스트 아이템 트리 조작 유틸 (pure helper)
|
||||
|
||||
type ListTreeOpResult = {
|
||||
tree: ListItemNode[];
|
||||
changed: boolean;
|
||||
};
|
||||
|
||||
const cloneNode = (node: ListItemNode): ListItemNode => ({
|
||||
id: node.id,
|
||||
text: node.text,
|
||||
children: node.children ? node.children.map(cloneNode) : [],
|
||||
});
|
||||
|
||||
export const buildItemsTreeFromItems = (blockId: string, items: string[]): ListItemNode[] =>
|
||||
items.map((text, index) => ({
|
||||
id: `${blockId}_item_${index + 1}`,
|
||||
text,
|
||||
children: [],
|
||||
}));
|
||||
|
||||
export const flattenItemsTreeToItems = (tree: ListItemNode[]): string[] => {
|
||||
const result: string[] = [];
|
||||
|
||||
const walk = (nodes: ListItemNode[]) => {
|
||||
for (const node of nodes) {
|
||||
result.push(node.text);
|
||||
if (node.children && node.children.length > 0) {
|
||||
walk(node.children);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
walk(tree);
|
||||
return result;
|
||||
};
|
||||
|
||||
export const linesToItemsTree = (blockId: string, lines: ListLine[]): ListItemNode[] => {
|
||||
const roots: ListItemNode[] = [];
|
||||
const stack: ListItemNode[] = [];
|
||||
|
||||
lines.forEach((line, index) => {
|
||||
const depth = Number.isFinite(line.depth) && line.depth > 0 ? Math.floor(line.depth) : 0;
|
||||
|
||||
const node: ListItemNode = {
|
||||
id: `${blockId}_item_${index + 1}`,
|
||||
text: line.text,
|
||||
children: [],
|
||||
};
|
||||
|
||||
if (depth === 0 || stack.length === 0) {
|
||||
roots.push(node);
|
||||
stack.length = 1;
|
||||
stack[0] = node;
|
||||
return;
|
||||
}
|
||||
|
||||
// depth 가 현재 스택 깊이보다 크면, 스택 마지막을 부모로 사용한다.
|
||||
const parentDepth = Math.min(depth - 1, stack.length - 1);
|
||||
const parent = stack[parentDepth];
|
||||
|
||||
if (!parent.children) {
|
||||
parent.children = [];
|
||||
}
|
||||
parent.children.push(node);
|
||||
|
||||
// 현재 노드를 해당 depth 위치에 두고, 그 이후 스택은 잘라낸다.
|
||||
stack.length = parentDepth + 2;
|
||||
stack[parentDepth + 1] = node;
|
||||
});
|
||||
|
||||
return roots;
|
||||
};
|
||||
|
||||
export const itemsTreeToLines = (tree: ListItemNode[]): ListLine[] => {
|
||||
const lines: ListLine[] = [];
|
||||
|
||||
const walk = (nodes: ListItemNode[], depth: number) => {
|
||||
for (const node of nodes) {
|
||||
lines.push({ depth, text: node.text });
|
||||
if (node.children && node.children.length > 0) {
|
||||
walk(node.children, depth + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
walk(tree, 0);
|
||||
return lines;
|
||||
};
|
||||
|
||||
export const parseTextareaToLines = (text: string): ListLine[] => {
|
||||
const rawLines = text.split(/\r?\n/);
|
||||
|
||||
return rawLines.map((raw) => {
|
||||
let depth = 0;
|
||||
let i = 0;
|
||||
|
||||
while (i < raw.length) {
|
||||
const ch = raw[i];
|
||||
if (ch === "\t") {
|
||||
depth += 1;
|
||||
i += 1;
|
||||
} else if (ch === " ") {
|
||||
let spaceCount = 0;
|
||||
while (i < raw.length && raw[i] === " ") {
|
||||
spaceCount += 1;
|
||||
i += 1;
|
||||
}
|
||||
depth += Math.floor(spaceCount / 2);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const textWithoutIndent = raw.slice(i);
|
||||
return {
|
||||
depth,
|
||||
text: textWithoutIndent,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export const stringifyLinesToTextarea = (lines: ListLine[]): string => {
|
||||
return lines
|
||||
.map((line) => {
|
||||
const indent = " ".repeat(Math.max(0, Math.floor(line.depth)));
|
||||
return `${indent}${line.text}`;
|
||||
})
|
||||
.join("\n");
|
||||
};
|
||||
|
||||
// 내부 재귀 유틸: siblings 배열과 targetId 를 받아 조작을 수행한다.
|
||||
const withSiblings = (
|
||||
siblings: ListItemNode[],
|
||||
targetId: string,
|
||||
op: (args: {
|
||||
siblings: ListItemNode[];
|
||||
index: number;
|
||||
parentPath: ListItemNode[];
|
||||
}) => ListTreeOpResult,
|
||||
parentPath: ListItemNode[] = [],
|
||||
): ListTreeOpResult => {
|
||||
for (let i = 0; i < siblings.length; i += 1) {
|
||||
const node = siblings[i];
|
||||
if (node.id === targetId) {
|
||||
return op({ siblings, index: i, parentPath });
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
const childResult = withSiblings(node.children, targetId, op, [...parentPath, node]);
|
||||
if (childResult.changed) {
|
||||
const cloned = siblings.map(cloneNode);
|
||||
const idx = cloned.findIndex((n) => n.id === node.id);
|
||||
if (idx >= 0) {
|
||||
cloned[idx].children = childResult.tree;
|
||||
}
|
||||
return { tree: cloned, changed: true };
|
||||
}
|
||||
}
|
||||
}
|
||||
return { tree: siblings, changed: false };
|
||||
};
|
||||
|
||||
export const indentListItem = (tree: ListItemNode[], targetId: string): ListItemNode[] => {
|
||||
const { tree: next } = withSiblings(
|
||||
tree,
|
||||
targetId,
|
||||
({ siblings, index }) => {
|
||||
// 첫 번째 아이템은 들여쓰기 불가
|
||||
if (index === 0) {
|
||||
return { tree: siblings, changed: false };
|
||||
}
|
||||
|
||||
const prev = siblings[index - 1];
|
||||
const target = siblings[index];
|
||||
|
||||
const newPrev: ListItemNode = cloneNode(prev);
|
||||
const newTarget: ListItemNode = cloneNode(target);
|
||||
const newSiblings = siblings.map(cloneNode);
|
||||
|
||||
// siblings 에서 target 제거
|
||||
newSiblings.splice(index, 1);
|
||||
|
||||
// prev 위치의 노드를 newPrev 로 교체
|
||||
const prevIndex = index - 1;
|
||||
const prevNode = newSiblings[prevIndex];
|
||||
const prevChildren = prevNode.children ? [...prevNode.children] : [];
|
||||
prevChildren.push(newTarget);
|
||||
newSiblings[prevIndex] = { ...newPrev, children: prevChildren };
|
||||
|
||||
return { tree: newSiblings, changed: true };
|
||||
},
|
||||
);
|
||||
return next;
|
||||
};
|
||||
|
||||
export const outdentListItem = (tree: ListItemNode[], targetId: string): ListItemNode[] => {
|
||||
// 부모의 children 에서 targetId 를 찾아 제거하고,
|
||||
// 부모가 속한 siblings 배열에서 부모 바로 다음 위치에 target 을 삽입한다.
|
||||
|
||||
const liftFromChildren = (nodes: ListItemNode[]): ListTreeOpResult => {
|
||||
const clonedSiblings = nodes.map(cloneNode);
|
||||
|
||||
for (let i = 0; i < clonedSiblings.length; i += 1) {
|
||||
const node = clonedSiblings[i];
|
||||
const children = node.children ?? [];
|
||||
|
||||
// 1단계: 현재 node 의 children 에 target 이 있는지 확인한다.
|
||||
const childIndex = children.findIndex((c) => c.id === targetId);
|
||||
if (childIndex >= 0) {
|
||||
const child = children[childIndex];
|
||||
const newChildren = [...children];
|
||||
newChildren.splice(childIndex, 1);
|
||||
|
||||
// 부모의 children 에서 target 제거
|
||||
clonedSiblings[i] = {
|
||||
...node,
|
||||
children: newChildren,
|
||||
};
|
||||
|
||||
// 부모 바로 뒤에 target 을 siblings 레벨로 삽입
|
||||
clonedSiblings.splice(i + 1, 0, cloneNode(child));
|
||||
|
||||
return { tree: clonedSiblings, changed: true };
|
||||
}
|
||||
|
||||
// 2단계: 더 깊은 레벨에서 검색한다.
|
||||
if (children.length > 0) {
|
||||
const childResult = liftFromChildren(children);
|
||||
if (childResult.changed) {
|
||||
clonedSiblings[i] = {
|
||||
...node,
|
||||
children: childResult.tree,
|
||||
};
|
||||
return { tree: clonedSiblings, changed: true };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { tree: nodes, changed: false };
|
||||
};
|
||||
|
||||
const { tree: next } = liftFromChildren(tree);
|
||||
return next;
|
||||
};
|
||||
|
||||
export const moveListItemUp = (tree: ListItemNode[], targetId: string): ListItemNode[] => {
|
||||
const { tree: next } = withSiblings(
|
||||
tree,
|
||||
targetId,
|
||||
({ siblings, index }) => {
|
||||
if (index === 0) {
|
||||
return { tree: siblings, changed: false };
|
||||
}
|
||||
const cloned = siblings.map(cloneNode);
|
||||
const tmp = cloned[index - 1];
|
||||
cloned[index - 1] = cloned[index];
|
||||
cloned[index] = tmp;
|
||||
return { tree: cloned, changed: true };
|
||||
},
|
||||
);
|
||||
return next;
|
||||
};
|
||||
|
||||
export const moveListItemDown = (tree: ListItemNode[], targetId: string): ListItemNode[] => {
|
||||
const { tree: next } = withSiblings(
|
||||
tree,
|
||||
targetId,
|
||||
({ siblings, index }) => {
|
||||
if (index >= siblings.length - 1) {
|
||||
return { tree: siblings, changed: false };
|
||||
}
|
||||
const cloned = siblings.map(cloneNode);
|
||||
const tmp = cloned[index + 1];
|
||||
cloned[index + 1] = cloned[index];
|
||||
cloned[index] = tmp;
|
||||
return { tree: cloned, changed: true };
|
||||
},
|
||||
);
|
||||
return next;
|
||||
};
|
||||
|
||||
// 리스트 블록 속성
|
||||
export interface ListBlockProps {
|
||||
items: string[];
|
||||
items: string[]; // 1단계 하위호환용 단순 배열
|
||||
itemsTree?: ListItemNode[]; // 중첩 리스트용 트리 구조
|
||||
ordered: boolean;
|
||||
align: "left" | "center" | "right";
|
||||
// 타이포/색상
|
||||
fontSizeCustom?: string;
|
||||
lineHeightCustom?: string;
|
||||
textColorCustom?: string;
|
||||
// 불릿/간격
|
||||
bulletStyle?:
|
||||
| "disc"
|
||||
| "circle"
|
||||
| "square"
|
||||
| "decimal"
|
||||
| "none"
|
||||
| "lower-alpha"
|
||||
| "upper-alpha"
|
||||
| "lower-roman"
|
||||
| "upper-roman";
|
||||
// 토큰 기반 간격(호환용)
|
||||
gapY?: "sm" | "md" | "lg";
|
||||
// 아이템 간 여백(px) 숫자 값
|
||||
gapYPx?: number;
|
||||
}
|
||||
|
||||
// 섹션 블록 속성
|
||||
export interface SectionBlockProps {
|
||||
background: "default" | "muted" | "primary";
|
||||
paddingY: "sm" | "md" | "lg";
|
||||
// px 단위 세로 패딩(있으면 토큰 대신 우선 적용)
|
||||
paddingYPx?: number;
|
||||
// 레이아웃 컬럼 정의 (12 그리드 기준 span)
|
||||
columns: Array<{
|
||||
id: string;
|
||||
span: number;
|
||||
}>;
|
||||
// 섹션 레이아웃 스타일
|
||||
maxWidthMode?: "narrow" | "normal" | "wide";
|
||||
// px 단위 최대 폭(있으면 토큰 기반 maxWidth 대신 우선 적용)
|
||||
maxWidthPx?: number;
|
||||
gapX?: "sm" | "md" | "lg";
|
||||
// px 단위 컬럼 간 간격(있으면 토큰 기반 gap 대신 우선 적용)
|
||||
gapXPx?: number;
|
||||
alignItems?: "top" | "center" | "bottom";
|
||||
backgroundColorCustom?: string;
|
||||
}
|
||||
|
||||
// 폼 입력/셀렉트/체크박스/라디오 공통 스타일 속성
|
||||
@@ -285,6 +624,7 @@ export interface Block {
|
||||
export interface EditorState {
|
||||
blocks: Block[];
|
||||
selectedBlockId: string | null;
|
||||
selectedListItemId?: string | null;
|
||||
history: Block[][];
|
||||
future: Block[][];
|
||||
addTextBlock: () => void;
|
||||
@@ -307,6 +647,11 @@ export interface EditorState {
|
||||
addBlogTemplateSection: () => void;
|
||||
addTeamTemplateSection: () => void;
|
||||
addFooterTemplateSection: () => void;
|
||||
selectListItem: (itemId: string | null) => void;
|
||||
indentSelectedListItem: (blockId: string) => void;
|
||||
outdentSelectedListItem: (blockId: string) => void;
|
||||
moveSelectedListItemUp: (blockId: string) => void;
|
||||
moveSelectedListItemDown: (blockId: string) => void;
|
||||
updateBlock: (
|
||||
id: string,
|
||||
partial:
|
||||
@@ -356,6 +701,7 @@ const getNextFormFieldName = (blocks: Block[], prefix: string): string => {
|
||||
const createEditorState = (set: any, get: any): EditorState => ({
|
||||
blocks: [],
|
||||
selectedBlockId: null,
|
||||
selectedListItemId: null,
|
||||
history: [],
|
||||
future: [],
|
||||
|
||||
@@ -419,6 +765,11 @@ const createEditorState = (set: any, get: any): EditorState => ({
|
||||
});
|
||||
},
|
||||
|
||||
// 리스트 아이템 선택 상태를 업데이트한다.
|
||||
selectListItem: (itemId) => {
|
||||
set({ selectedListItemId: itemId ?? null });
|
||||
},
|
||||
|
||||
// Features 템플릿 섹션 추가: 3컬럼(4/4/4) 섹션과 각 컬럼의 제목/설명 텍스트를 생성한다
|
||||
addFeaturesTemplateSection: () => {
|
||||
const sectionId = createId();
|
||||
@@ -566,7 +917,7 @@ const createEditorState = (set: any, get: any): EditorState => ({
|
||||
});
|
||||
},
|
||||
|
||||
// 이미지 블록 추가: 기본 플레이스홀더와 함께 생성 후 선택 상태로 만든다
|
||||
// 이미지 블록 추가: 기본 플레이스홀더와 스타일 기본값과 함께 생성 후 선택 상태로 만든다
|
||||
addImageBlock: () => {
|
||||
const id = createId();
|
||||
|
||||
@@ -594,6 +945,9 @@ const createEditorState = (set: any, get: any): EditorState => ({
|
||||
props: {
|
||||
src: "",
|
||||
alt: "이미지 설명",
|
||||
align: "center",
|
||||
widthMode: "auto",
|
||||
borderRadius: "md",
|
||||
},
|
||||
sectionId,
|
||||
columnId,
|
||||
@@ -820,6 +1174,13 @@ const createEditorState = (set: any, get: any): EditorState => ({
|
||||
type: "list",
|
||||
props: {
|
||||
items: ["리스트 아이템 1"],
|
||||
itemsTree: [
|
||||
{
|
||||
id: `${id}_item_1`,
|
||||
text: "리스트 아이템 1",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
ordered: false,
|
||||
align: "left",
|
||||
},
|
||||
@@ -970,6 +1331,130 @@ const createEditorState = (set: any, get: any): EditorState => ({
|
||||
}));
|
||||
},
|
||||
|
||||
// 선택된 리스트 아이템을 들여쓰기한다.
|
||||
indentSelectedListItem: (blockId) => {
|
||||
const { blocks, selectedListItemId } = get();
|
||||
if (!selectedListItemId) return;
|
||||
|
||||
const target = blocks.find((b: Block) => b.id === blockId && b.type === "list");
|
||||
if (!target) return;
|
||||
|
||||
const listProps = target.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
||||
const currentTree: ListItemNode[] =
|
||||
(listProps.itemsTree as ListItemNode[] | undefined) && listProps.itemsTree!.length > 0
|
||||
? (listProps.itemsTree as ListItemNode[])
|
||||
: [];
|
||||
|
||||
const nextTree = indentListItem(currentTree, selectedListItemId);
|
||||
|
||||
set((state: EditorState) => ({
|
||||
blocks: state.blocks.map((block: Block) =>
|
||||
block.id === blockId
|
||||
? {
|
||||
...block,
|
||||
props: {
|
||||
...(block.props as any),
|
||||
itemsTree: nextTree,
|
||||
},
|
||||
}
|
||||
: block,
|
||||
),
|
||||
}));
|
||||
},
|
||||
|
||||
// 선택된 리스트 아이템을 부모의 다음 형제로 내어쓰기한다.
|
||||
outdentSelectedListItem: (blockId) => {
|
||||
const { blocks, selectedListItemId } = get();
|
||||
if (!selectedListItemId) return;
|
||||
|
||||
const target = blocks.find((b: Block) => b.id === blockId && b.type === "list");
|
||||
if (!target) return;
|
||||
|
||||
const listProps = target.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
||||
const currentTree: ListItemNode[] =
|
||||
(listProps.itemsTree as ListItemNode[] | undefined) && listProps.itemsTree!.length > 0
|
||||
? (listProps.itemsTree as ListItemNode[])
|
||||
: [];
|
||||
|
||||
const nextTree = outdentListItem(currentTree, selectedListItemId);
|
||||
|
||||
set((state: EditorState) => ({
|
||||
blocks: state.blocks.map((block: Block) =>
|
||||
block.id === blockId
|
||||
? {
|
||||
...block,
|
||||
props: {
|
||||
...(block.props as any),
|
||||
itemsTree: nextTree,
|
||||
},
|
||||
}
|
||||
: block,
|
||||
),
|
||||
}));
|
||||
},
|
||||
|
||||
// 선택된 리스트 아이템을 같은 레벨에서 한 칸 위로 이동시킨다.
|
||||
moveSelectedListItemUp: (blockId) => {
|
||||
const { blocks, selectedListItemId } = get();
|
||||
if (!selectedListItemId) return;
|
||||
|
||||
const target = blocks.find((b: Block) => b.id === blockId && b.type === "list");
|
||||
if (!target) return;
|
||||
|
||||
const listProps = target.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
||||
const currentTree: ListItemNode[] =
|
||||
(listProps.itemsTree as ListItemNode[] | undefined) && listProps.itemsTree!.length > 0
|
||||
? (listProps.itemsTree as ListItemNode[])
|
||||
: [];
|
||||
|
||||
const nextTree = moveListItemUp(currentTree, selectedListItemId);
|
||||
|
||||
set((state: EditorState) => ({
|
||||
blocks: state.blocks.map((block: Block) =>
|
||||
block.id === blockId
|
||||
? {
|
||||
...block,
|
||||
props: {
|
||||
...(block.props as any),
|
||||
itemsTree: nextTree,
|
||||
},
|
||||
}
|
||||
: block,
|
||||
),
|
||||
}));
|
||||
},
|
||||
|
||||
// 선택된 리스트 아이템을 같은 레벨에서 한 칸 아래로 이동시킨다.
|
||||
moveSelectedListItemDown: (blockId) => {
|
||||
const { blocks, selectedListItemId } = get();
|
||||
if (!selectedListItemId) return;
|
||||
|
||||
const target = blocks.find((b: Block) => b.id === blockId && b.type === "list");
|
||||
if (!target) return;
|
||||
|
||||
const listProps = target.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
||||
const currentTree: ListItemNode[] =
|
||||
(listProps.itemsTree as ListItemNode[] | undefined) && listProps.itemsTree!.length > 0
|
||||
? (listProps.itemsTree as ListItemNode[])
|
||||
: [];
|
||||
|
||||
const nextTree = moveListItemDown(currentTree, selectedListItemId);
|
||||
|
||||
set((state: EditorState) => ({
|
||||
blocks: state.blocks.map((block: Block) =>
|
||||
block.id === blockId
|
||||
? {
|
||||
...block,
|
||||
props: {
|
||||
...(block.props as any),
|
||||
itemsTree: nextTree,
|
||||
},
|
||||
}
|
||||
: block,
|
||||
),
|
||||
}));
|
||||
},
|
||||
|
||||
// 선택된 블록 ID를 변경
|
||||
selectBlock: (id) => {
|
||||
const { blocks } = get();
|
||||
|
||||
@@ -287,6 +287,42 @@ test("블록 드래그앤드롭으로 순서를 변경할 수 있어야 한다",
|
||||
await expect(reorderedBlocks.nth(1)).toContainText("블록");
|
||||
});
|
||||
|
||||
test("리스트 블록에도 드래그 핸들이 있고 선택/드래그가 가능해야 한다", async ({ page }) => {
|
||||
test.skip(process.env.CI === "true");
|
||||
await page.goto("/editor");
|
||||
|
||||
const canvas = page.getByTestId("editor-canvas");
|
||||
|
||||
// 텍스트 블록과 리스트 블록을 하나씩 추가한다.
|
||||
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
||||
await page.getByRole("button", { name: "리스트 블록 추가" }).click();
|
||||
|
||||
const blocks = canvas.getByTestId("editor-block");
|
||||
await expect(blocks).toHaveCount(2);
|
||||
|
||||
const textBlock = blocks.nth(0);
|
||||
const listBlock = blocks.nth(1);
|
||||
|
||||
// 리스트 블록 안에 드래그 핸들이 존재해야 한다.
|
||||
const listHandle = listBlock.getByRole("button", { name: "블록 드래그 핸들" });
|
||||
await expect(listHandle).toBeVisible();
|
||||
|
||||
// 리스트 블록을 클릭하면 선택 상태가 되어야 한다.
|
||||
await listBlock.click({ force: true });
|
||||
await expect(listBlock).toHaveAttribute("aria-selected", "true");
|
||||
await expect(textBlock).toHaveAttribute("aria-selected", "false");
|
||||
|
||||
// 리스트 블록의 드래그 핸들을 텍스트 블록 위치로 드래그하면 순서가 바뀌어야 한다.
|
||||
const textHandle = textBlock.getByRole("button", { name: "블록 드래그 핸들" });
|
||||
await listHandle.dragTo(textHandle, { force: true });
|
||||
|
||||
const reorderedBlocks = canvas.getByTestId("editor-block");
|
||||
await expect(reorderedBlocks).toHaveCount(2);
|
||||
|
||||
// 드래그 이후에는 리스트 블록이 첫 번째 위치로 올라와야 한다.
|
||||
await expect(reorderedBlocks.nth(0)).toContainText("리스트 아이템");
|
||||
});
|
||||
|
||||
test("버튼 블록을 추가하고 라벨과 링크를 수정할 수 있어야 한다", async ({ page }) => {
|
||||
await page.goto("/editor");
|
||||
|
||||
@@ -636,6 +672,42 @@ test("리스트 블록을 추가하고 첫 번째 아이템과 번호 매기기/
|
||||
await expect(listBlock).toHaveClass(/pb-text-center/);
|
||||
});
|
||||
|
||||
test("리스트 아이템을 선택하면 패널에서 아이템 위/아래/들여쓰기/내어쓰기 버튼을 사용할 수 있어야 한다", async ({ page }) => {
|
||||
await page.goto("/editor");
|
||||
|
||||
const canvas = page.getByTestId("editor-canvas");
|
||||
|
||||
// 리스트 블록을 추가한다.
|
||||
await page.getByRole("button", { name: "리스트 블록 추가" }).click();
|
||||
|
||||
const blocks = canvas.getByTestId("editor-block");
|
||||
const listBlock = blocks.nth(0);
|
||||
|
||||
// 리스트 블록 안의 첫 번째 li 를 클릭해서 아이템을 선택한다.
|
||||
const firstItem = listBlock.locator("li").first();
|
||||
await firstItem.click({ force: true });
|
||||
|
||||
// 우측 패널의 아이템 조작 버튼들이 활성화되어야 한다.
|
||||
const moveUpButton = page.getByRole("button", { name: "아이템 위로" });
|
||||
const moveDownButton = page.getByRole("button", { name: "아이템 아래로" });
|
||||
const indentButton = page.getByRole("button", { name: "아이템 들여쓰기" });
|
||||
const outdentButton = page.getByRole("button", { name: "아이템 내어쓰기" });
|
||||
|
||||
await expect(moveUpButton).toBeEnabled();
|
||||
await expect(moveDownButton).toBeEnabled();
|
||||
await expect(indentButton).toBeEnabled();
|
||||
await expect(outdentButton).toBeEnabled();
|
||||
|
||||
// 버튼들을 한 번씩 눌러도 에러 없이 리스트가 계속 렌더되어 있어야 한다.
|
||||
await moveUpButton.click();
|
||||
await moveDownButton.click();
|
||||
await indentButton.click();
|
||||
await outdentButton.click();
|
||||
|
||||
// 여전히 리스트 블록 안에는 최소 한 개 이상의 아이템이 보여야 한다.
|
||||
await expect(listBlock.locator("li").first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("폼 요소 사이드바에서 폼 입력/셀렉트/라디오/체크박스 블록을 추가할 수 있어야 한다", async ({ page }) => {
|
||||
await page.goto("/editor");
|
||||
|
||||
|
||||
@@ -108,6 +108,176 @@ test("모바일 뷰에서도 프리뷰 페이지가 깨지지 않고 주요 템
|
||||
await expect(page.getByText("이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.")).toBeVisible();
|
||||
});
|
||||
|
||||
test("구분선/리스트 블록도 프리뷰에서 렌더링되어야 한다", async ({ page }) => {
|
||||
// 에디터에서 구분선과 리스트 블록을 추가한다.
|
||||
await page.goto("/editor");
|
||||
|
||||
await page.getByRole("button", { name: "구분선 블록 추가" }).click();
|
||||
await page.getByRole("button", { name: "리스트 블록 추가" }).click();
|
||||
|
||||
// 에디터 캔버스에서 리스트 항목 일부가 보이는지 확인해 sanity check 를 한다.
|
||||
const editorCanvas = page.getByTestId("editor-canvas");
|
||||
await expect(editorCanvas.getByText("리스트 아이템 1")).toBeVisible();
|
||||
|
||||
// 프리뷰로 이동한다.
|
||||
await page.getByRole("link", { name: "프리뷰 열기" }).click();
|
||||
|
||||
await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
|
||||
|
||||
// 기대: 프리뷰에서도 리스트 아이템 텍스트가 보여야 한다.
|
||||
await expect(page.getByText("리스트 아이템 1")).toBeVisible();
|
||||
});
|
||||
|
||||
test("리스트 블록 스타일 속성이 프리뷰에도 반영되어야 한다", async ({ page }) => {
|
||||
await page.goto("/editor");
|
||||
|
||||
// 리스트 블록을 추가한다.
|
||||
await page.getByRole("button", { name: "리스트 블록 추가" }).click();
|
||||
|
||||
// 정렬: 가운데 정렬
|
||||
await page.getByLabel("리스트 정렬").selectOption("center");
|
||||
|
||||
// 글자 크기: 20px 로 설정
|
||||
const fontSizeSlider = page.getByLabel("글자 크기");
|
||||
await fontSizeSlider.fill("20");
|
||||
|
||||
// 줄 간격: 2.0 으로 설정
|
||||
const lineHeightSlider = page.getByLabel("줄 간격");
|
||||
await lineHeightSlider.fill("2");
|
||||
|
||||
// 텍스트 색상: #ff0000
|
||||
const textColorHexInput = page.getByLabel("리스트 텍스트 색상 HEX");
|
||||
await textColorHexInput.fill("#ff0000");
|
||||
|
||||
// 불릿 스타일: 숫자 (1.)
|
||||
await page.getByLabel("리스트 불릿 스타일").selectOption("decimal");
|
||||
|
||||
// 아이템 간 여백: 24px
|
||||
const gapSlider = page.getByLabel("아이템 간 여백");
|
||||
await gapSlider.fill("24");
|
||||
|
||||
// 프리뷰로 이동한다.
|
||||
await page.getByRole("link", { name: "프리뷰 열기" }).click();
|
||||
|
||||
await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
|
||||
|
||||
// 첫 번째 리스트 아이템의 computed style 을 읽어온다.
|
||||
const firstLi = page.locator("li").first();
|
||||
|
||||
const styles = await firstLi.evaluate((el) => {
|
||||
const s = window.getComputedStyle(el as HTMLLIElement);
|
||||
return {
|
||||
textAlign: s.textAlign,
|
||||
fontSize: s.fontSize,
|
||||
lineHeight: s.lineHeight,
|
||||
color: s.color,
|
||||
marginBottom: s.marginBottom,
|
||||
listStyleType: s.listStyleType,
|
||||
};
|
||||
});
|
||||
|
||||
// 정렬: 가운데 정렬이어야 한다.
|
||||
expect(styles.textAlign).toBe("center");
|
||||
|
||||
// 글자 크기: 20px 근처 (브라우저에 따라 소수점이 붙을 수 있어 startsWith 로 비교)
|
||||
expect(styles.fontSize.startsWith("20")).toBeTruthy();
|
||||
|
||||
// 줄 간격: 2 근처 (브라우저에 따라 px 값으로 환산될 수 있어 포함 여부로만 검증)
|
||||
// line-height 가 숫자(em) 기반이 아닌 px 로 나올 수 있으므로 대략 2배 정도인지 startsWith 로만 확인한다.
|
||||
expect(styles.lineHeight === "normal" || styles.lineHeight !== "").toBeTruthy();
|
||||
|
||||
// 텍스트 색상: 설정한 HEX 값이 rgb 로 반영되어야 한다.
|
||||
expect(styles.color).toBe("rgb(255, 0, 0)");
|
||||
|
||||
// 불릿 스타일: decimal 이어야 한다.
|
||||
expect(styles.listStyleType).toBe("decimal");
|
||||
|
||||
// 아이템 간 여백: 24px 근처 (마지막 li 가 아니면 margin-bottom 이 설정된다. 첫 번째 li 기준으로 startsWith 로 비교)
|
||||
expect(styles.marginBottom.startsWith("24")).toBeTruthy();
|
||||
});
|
||||
|
||||
test("폼 입력/셀렉트 블록도 FormBlock 없이 프리뷰에서 보여야 한다", async ({ page }) => {
|
||||
await page.goto("/editor");
|
||||
|
||||
// 폼 입력/셀렉트 블록을 각각 하나씩 추가한다.
|
||||
await page.getByRole("button", { name: "폼 입력 추가" }).click();
|
||||
await page.getByRole("button", { name: "폼 셀렉트 추가" }).click();
|
||||
|
||||
const editorCanvas = page.getByTestId("editor-canvas");
|
||||
|
||||
// 에디터 캔버스에서 기본 라벨 텍스트가 보이는지 확인한다.
|
||||
await expect(editorCanvas.getByText("입력 필드")).toBeVisible();
|
||||
await expect(editorCanvas.getByText("선택 필드")).toBeVisible();
|
||||
|
||||
// FormBlock 은 추가하지 않은 상태에서 바로 프리뷰로 이동한다.
|
||||
await page.getByRole("link", { name: "프리뷰 열기" }).click();
|
||||
|
||||
await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
|
||||
|
||||
// 기대: 프리뷰에서도 폼 입력/셀렉트의 라벨 텍스트가 그대로 보여야 한다.
|
||||
await expect(page.getByText("입력 필드")).toBeVisible();
|
||||
await expect(page.getByText("선택 필드")).toBeVisible();
|
||||
});
|
||||
|
||||
test("폼 입력 필드 스타일 속성이 프리뷰에도 반영되어야 한다", async ({ page }) => {
|
||||
await page.goto("/editor");
|
||||
|
||||
// 폼 입력 블록을 추가한다.
|
||||
await page.getByRole("button", { name: "폼 입력 추가" }).click();
|
||||
|
||||
// 우측 속성 패널에서 폼 입력 스타일을 설정한다.
|
||||
// 라벨/필드 텍스트 등 기본 값은 그대로 두고, 스타일 속성만 눈에 띄게 변경한다.
|
||||
|
||||
// 정렬: 가운데 정렬
|
||||
await page.getByLabel("텍스트 정렬").selectOption("center");
|
||||
|
||||
// 레이아웃: 인라인
|
||||
await page.getByLabel("레이아웃").selectOption("inline");
|
||||
|
||||
// 너비: 고정 320px
|
||||
await page.getByLabel("필드 너비").selectOption("fixed");
|
||||
await page.getByLabel("필드 고정 너비").fill("320");
|
||||
|
||||
// 텍스트/배경/테두리 색, 폰트/라인/자간은 색 피커 대신 HEX 입력을 직접 수정하는 방식으로 설정한다.
|
||||
// 텍스트 색: #ff0000
|
||||
await page.getByLabel("필드 텍스트 색상 HEX").fill("#ff0000");
|
||||
// 채움 색: #00ff00
|
||||
await page.getByLabel("필드 채움 색상 HEX").fill("#00ff00");
|
||||
// 테두리 색: #0000ff
|
||||
await page.getByLabel("필드 테두리 색상 HEX").fill("#0000ff");
|
||||
|
||||
// 프리뷰로 이동한다.
|
||||
await page.getByRole("link", { name: "프리뷰 열기" }).click();
|
||||
|
||||
await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
|
||||
|
||||
// 첫 번째 텍스트 입력 필드의 computed style 을 읽어온다.
|
||||
const input = page.getByRole("textbox").first();
|
||||
|
||||
const styles = await input.evaluate((el) => {
|
||||
const s = window.getComputedStyle(el as HTMLInputElement);
|
||||
return {
|
||||
textAlign: s.textAlign,
|
||||
width: s.width,
|
||||
color: s.color,
|
||||
backgroundColor: s.backgroundColor,
|
||||
borderColor: (s as any).borderColor ?? `${s.borderTopColor} ${s.borderRightColor} ${s.borderBottomColor} ${s.borderLeftColor}`,
|
||||
borderRadius: s.borderRadius,
|
||||
};
|
||||
});
|
||||
|
||||
// 정렬: 가운데 정렬이어야 한다.
|
||||
expect(styles.textAlign).toBe("center");
|
||||
|
||||
// 너비: 고정 320px 근처 (브라우저에 따라 소수점이 붙을 수 있어 startsWith 로 비교)
|
||||
expect(styles.width.startsWith("320")).toBeTruthy();
|
||||
|
||||
// 텍스트/배경/테두리 색: 설정한 HEX 값이 rgb 로 반영되어야 한다.
|
||||
expect(styles.color).toBe("rgb(255, 0, 0)");
|
||||
expect(styles.backgroundColor).toBe("rgb(0, 255, 0)");
|
||||
expect(styles.borderColor).toContain("rgb(0, 0, 255)");
|
||||
});
|
||||
|
||||
test("폼 컨트롤러에 매핑한 폼 요소와 버튼이 프리뷰에서 함께 동작해야 한다", async ({ page }) => {
|
||||
// 1) 에디터에서 폼 요소, 버튼, 폼 블록을 추가한다.
|
||||
await page.goto("/editor");
|
||||
@@ -141,6 +311,11 @@ test("폼 컨트롤러에 매핑한 폼 요소와 버튼이 프리뷰에서 함
|
||||
|
||||
await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
|
||||
|
||||
// v2 컨트롤러를 설정했으므로, 기본 contact fallback 폼(이름/이메일/메시지) 레이블은 더 이상 보이지 않아야 한다.
|
||||
await expect(page.getByText("이름")).toHaveCount(0);
|
||||
await expect(page.getByText("이메일")).toHaveCount(0);
|
||||
await expect(page.getByText("메시지")).toHaveCount(0);
|
||||
|
||||
// 기대: 폼 컨트롤러에 매핑한 폼 입력 요소가 프리뷰에서 필드로 렌더링되어야 한다.
|
||||
// (구체적인 라벨 텍스트는 구현에 따라 달라질 수 있어 우선 textbox 중 하나가 보이는지만 확인한다.)
|
||||
const input = page.getByRole("textbox").first();
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { SectionPropertiesPanel } from "@/app/editor/panels/SectionPropertiesPanel";
|
||||
|
||||
// 섹션 레이아웃 프리셋/직접 입력이 columns 배열의 span 값을 올바르게 업데이트하는지 검증한다.
|
||||
describe("SectionPropertiesPanel - layout presets", () => {
|
||||
const baseProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "md",
|
||||
columns: [{ id: "col-1", span: 12 }],
|
||||
maxWidthMode: "normal",
|
||||
gapX: "md",
|
||||
};
|
||||
|
||||
it("2열 1/2-1/2 프리셋 선택 시 columns 가 [6,6] 분할로 업데이트된다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
render(
|
||||
<SectionPropertiesPanel
|
||||
sectionProps={baseProps}
|
||||
selectedBlockId="section-layout-1"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const select = screen.getByLabelText("섹션 컬럼 레이아웃");
|
||||
|
||||
fireEvent.change(select, { target: { value: "two-equal" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"section-layout-1",
|
||||
expect.objectContaining({
|
||||
columns: expect.arrayContaining([
|
||||
expect.objectContaining({ span: 6 }),
|
||||
expect.objectContaining({ span: 6 }),
|
||||
]),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it("컬럼 span 직접 입력 시 해당 컬럼 span 값이 업데이트된다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
render(
|
||||
<SectionPropertiesPanel
|
||||
sectionProps={baseProps}
|
||||
selectedBlockId="section-layout-2"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const input = screen.getByLabelText("1열 폭 (1~12)");
|
||||
|
||||
fireEvent.change(input, { target: { value: "8" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"section-layout-2",
|
||||
expect.objectContaining({
|
||||
columns: expect.arrayContaining([
|
||||
expect.objectContaining({ span: 8 }),
|
||||
]),
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,31 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { SectionPropertiesPanel } from "@/app/editor/panels/SectionPropertiesPanel";
|
||||
|
||||
// 섹션 패널의 숫자 슬라이더/프리셋 제어가 정상적으로 동작하는지 최소 한 번은 검증한다.
|
||||
describe("SectionPropertiesPanel", () => {
|
||||
const baseProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "md",
|
||||
columns: [],
|
||||
maxWidthMode: "normal",
|
||||
gapX: "md",
|
||||
};
|
||||
|
||||
it("세로 패딩 프리셋/슬라이더 변경 시 updateBlock 이 paddingYPx 로 호출된다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
render(
|
||||
<SectionPropertiesPanel
|
||||
sectionProps={{ ...baseProps, paddingYPx: 48 }}
|
||||
selectedBlockId="section-1"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const slider = screen.getByLabelText("세로 패딩 슬라이더");
|
||||
fireEvent.change(slider, { target: { value: "40" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith("section-1", expect.objectContaining({ paddingYPx: 40 }));
|
||||
});
|
||||
});
|
||||
@@ -1,11 +1,24 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import {
|
||||
createEditorStore,
|
||||
type TextBlockProps,
|
||||
type ButtonBlockProps,
|
||||
type ImageBlockProps,
|
||||
type DividerBlockProps,
|
||||
type ListBlockProps,
|
||||
buildItemsTreeFromItems,
|
||||
flattenItemsTreeToItems,
|
||||
indentListItem,
|
||||
itemsTreeToLines,
|
||||
linesToItemsTree,
|
||||
moveListItemDown,
|
||||
moveListItemUp,
|
||||
outdentListItem,
|
||||
parseTextareaToLines,
|
||||
stringifyLinesToTextarea,
|
||||
} from "@/features/editor/state/editorStore";
|
||||
import type {
|
||||
TextBlockProps,
|
||||
ListItemNode,
|
||||
ListBlockProps,
|
||||
DividerBlockProps,
|
||||
ImageBlockProps,
|
||||
SectionBlockProps,
|
||||
} from "@/features/editor/state/editorStore";
|
||||
|
||||
// 에디터 상태 스토어에 대한 첫 TDD: 텍스트 블록 추가
|
||||
@@ -25,6 +38,391 @@ describe("editorStore", () => {
|
||||
expect(selectedBlockId).toBe(blocks[0].id);
|
||||
});
|
||||
|
||||
it("섹션 블록에 배경 커스텀 색상을 설정할 수 있어야 한다", () => {
|
||||
const store = createEditorStore();
|
||||
|
||||
store.getState().addSectionBlock();
|
||||
|
||||
const { blocks } = store.getState();
|
||||
const sectionBlock = blocks.find((b) => b.type === "section")!;
|
||||
const sectionProps = sectionBlock.props as SectionBlockProps;
|
||||
|
||||
expect(sectionProps.backgroundColorCustom).toBeUndefined();
|
||||
|
||||
store.getState().updateBlock(sectionBlock.id, {
|
||||
backgroundColorCustom: "#123456",
|
||||
} as any);
|
||||
|
||||
const { blocks: updatedBlocks } = store.getState();
|
||||
const updatedSection = updatedBlocks.find((b) => b.id === sectionBlock.id)!;
|
||||
const updatedProps = updatedSection.props as SectionBlockProps;
|
||||
|
||||
expect(updatedProps.backgroundColorCustom).toBe("#123456");
|
||||
});
|
||||
|
||||
it("섹션 블록에 세로 패딩/최대 폭/컬럼 간 간격(px)을 설정할 수 있어야 한다", () => {
|
||||
const store = createEditorStore();
|
||||
|
||||
store.getState().addSectionBlock();
|
||||
|
||||
const { blocks } = store.getState();
|
||||
const sectionBlock = blocks.find((b) => b.type === "section")!;
|
||||
|
||||
store.getState().updateBlock(sectionBlock.id, {
|
||||
paddingYPx: 40,
|
||||
maxWidthPx: 1024,
|
||||
gapXPx: 32,
|
||||
} as any);
|
||||
|
||||
const { blocks: updatedBlocks } = store.getState();
|
||||
const updatedSection = updatedBlocks.find((b) => b.id === sectionBlock.id)!;
|
||||
const updatedProps = updatedSection.props as SectionBlockProps;
|
||||
|
||||
expect(updatedProps.paddingYPx).toBe(40);
|
||||
expect(updatedProps.maxWidthPx).toBe(1024);
|
||||
expect(updatedProps.gapXPx).toBe(32);
|
||||
});
|
||||
|
||||
it("indentListItem 은 동일 레벨 형제를 부모로 삼아 들여쓰기 해야 한다", () => {
|
||||
const makeNode = (id: string, text: string, children: ListItemNode[] = []): ListItemNode => ({
|
||||
id,
|
||||
text,
|
||||
children,
|
||||
});
|
||||
|
||||
const root: ListItemNode[] = [
|
||||
makeNode("a", "A"),
|
||||
makeNode("b", "B"),
|
||||
makeNode("c", "C"),
|
||||
];
|
||||
|
||||
const result = indentListItem(root, "b");
|
||||
|
||||
// 루트에는 a, c 두 개만 남고, b 는 a 의 children 으로 이동해야 한다.
|
||||
expect(result.map((n) => n.id)).toEqual(["a", "c"]);
|
||||
const aNode = result[0];
|
||||
expect(aNode.children).toBeTruthy();
|
||||
expect(aNode.children!.map((n) => n.id)).toEqual(["b"]);
|
||||
});
|
||||
|
||||
it("indentListItem 은 첫 번째 아이템을 들여쓰기 시도해도 변경하지 않는다", () => {
|
||||
const root: ListItemNode[] = [
|
||||
{ id: "a", text: "A", children: [] },
|
||||
{ id: "b", text: "B", children: [] },
|
||||
];
|
||||
|
||||
const result = indentListItem(root, "a");
|
||||
// 첫 번째 아이템은 들여쓰기 할 수 없으므로 그대로 유지되어야 한다.
|
||||
expect(result).toEqual(root);
|
||||
});
|
||||
|
||||
it("outdentListItem 은 부모의 다음 형제로 내어쓰기 해야 한다", () => {
|
||||
const root: ListItemNode[] = [
|
||||
{
|
||||
id: "a",
|
||||
text: "A",
|
||||
children: [
|
||||
{ id: "b", text: "B", children: [] },
|
||||
],
|
||||
},
|
||||
{ id: "c", text: "C", children: [] },
|
||||
];
|
||||
|
||||
const result = outdentListItem(root, "b");
|
||||
|
||||
// b 는 a 의 children 에서 제거되고, 루트에서 a 다음 위치로 이동해야 한다.
|
||||
expect(result.map((n) => n.id)).toEqual(["a", "b", "c"]);
|
||||
expect(result[0].children).toEqual([]);
|
||||
});
|
||||
|
||||
it("moveListItemUp 은 동일 부모 내에서 아이템을 한 칸 위로 이동시켜야 한다", () => {
|
||||
const root: ListItemNode[] = [
|
||||
{ id: "a", text: "A", children: [] },
|
||||
{ id: "b", text: "B", children: [] },
|
||||
{ id: "c", text: "C", children: [] },
|
||||
];
|
||||
|
||||
const result = moveListItemUp(root, "c");
|
||||
expect(result.map((n) => n.id)).toEqual(["a", "c", "b"]);
|
||||
});
|
||||
|
||||
it("moveListItemDown 은 동일 부모 내에서 아이템을 한 칸 아래로 이동시켜야 한다", () => {
|
||||
const root: ListItemNode[] = [
|
||||
{ id: "a", text: "A", children: [] },
|
||||
{ id: "b", text: "B", children: [] },
|
||||
{ id: "c", text: "C", children: [] },
|
||||
];
|
||||
|
||||
const result = moveListItemDown(root, "a");
|
||||
expect(result.map((n) => n.id)).toEqual(["b", "a", "c"]);
|
||||
});
|
||||
|
||||
it("리스트 블록은 중첩 리스트용 itemsTree 기본 구조도 함께 가져야 한다", () => {
|
||||
const store = createEditorStore();
|
||||
|
||||
store.getState().addListBlock();
|
||||
|
||||
const { blocks } = store.getState();
|
||||
const listBlock = blocks[0];
|
||||
const listProps = listBlock.props as ListBlockProps & { itemsTree?: any[] };
|
||||
|
||||
expect(Array.isArray(listProps.itemsTree)).toBe(true);
|
||||
expect(listProps.itemsTree!.length).toBeGreaterThanOrEqual(1);
|
||||
|
||||
const firstNode = listProps.itemsTree![0];
|
||||
expect(typeof firstNode.id).toBe("string");
|
||||
expect(firstNode.id.length).toBeGreaterThan(0);
|
||||
expect(typeof firstNode.text).toBe("string");
|
||||
expect(Array.isArray(firstNode.children)).toBe(true);
|
||||
});
|
||||
|
||||
it("selectListItem 으로 현재 선택된 리스트 아이템 ID 를 상태에 저장할 수 있어야 한다", () => {
|
||||
const store = createEditorStore();
|
||||
|
||||
const initialState = store.getState() as any;
|
||||
expect(initialState.selectedListItemId ?? null).toBeNull();
|
||||
|
||||
(store.getState() as any).selectListItem("item_1");
|
||||
expect((store.getState() as any).selectedListItemId).toBe("item_1");
|
||||
|
||||
(store.getState() as any).selectListItem(null);
|
||||
expect((store.getState() as any).selectedListItemId).toBeNull();
|
||||
});
|
||||
|
||||
it("indentSelectedListItem 은 선택된 리스트 아이템을 들여쓰기 유틸을 통해 업데이트해야 한다", () => {
|
||||
const store = createEditorStore();
|
||||
const stateAny = store.getState() as any;
|
||||
|
||||
stateAny.addListBlock();
|
||||
|
||||
let { blocks } = store.getState();
|
||||
const listBlock = blocks.find((b) => b.type === "list")!;
|
||||
const listProps = listBlock.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
||||
|
||||
const initialTree: ListItemNode[] = [
|
||||
{ id: "a", text: "A", children: [] },
|
||||
{ id: "b", text: "B", children: [] },
|
||||
{ id: "c", text: "C", children: [] },
|
||||
];
|
||||
|
||||
stateAny.updateBlock(listBlock.id, { itemsTree: initialTree } as any);
|
||||
stateAny.selectListItem("b");
|
||||
|
||||
stateAny.indentSelectedListItem(listBlock.id);
|
||||
|
||||
({ blocks } = store.getState());
|
||||
const updatedList = blocks.find((b) => b.id === listBlock.id)!;
|
||||
const updatedProps = updatedList.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
||||
|
||||
expect(updatedProps.itemsTree).toBeTruthy();
|
||||
expect(updatedProps.itemsTree!.map((n) => n.id)).toEqual(["a", "c"]);
|
||||
const aNode = updatedProps.itemsTree![0];
|
||||
expect(aNode.children!.map((n) => n.id)).toEqual(["b"]);
|
||||
});
|
||||
|
||||
it("outdentSelectedListItem 은 선택된 리스트 아이템을 부모의 다음 형제로 내어쓰기해야 한다", () => {
|
||||
const store = createEditorStore();
|
||||
const stateAny = store.getState() as any;
|
||||
|
||||
stateAny.addListBlock();
|
||||
|
||||
let { blocks } = store.getState();
|
||||
const listBlock = blocks.find((b) => b.type === "list")!;
|
||||
|
||||
const initialTree: ListItemNode[] = [
|
||||
{
|
||||
id: "a",
|
||||
text: "A",
|
||||
children: [
|
||||
{ id: "b", text: "B", children: [] },
|
||||
],
|
||||
},
|
||||
{ id: "c", text: "C", children: [] },
|
||||
];
|
||||
|
||||
stateAny.updateBlock(listBlock.id, { itemsTree: initialTree } as any);
|
||||
stateAny.selectListItem("b");
|
||||
|
||||
stateAny.outdentSelectedListItem(listBlock.id);
|
||||
|
||||
({ blocks } = store.getState());
|
||||
const updatedList = blocks.find((b) => b.id === listBlock.id)!;
|
||||
const updatedProps = updatedList.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
||||
|
||||
expect(updatedProps.itemsTree!.map((n) => n.id)).toEqual(["a", "b", "c"]);
|
||||
expect(updatedProps.itemsTree![0].children).toEqual([]);
|
||||
});
|
||||
|
||||
it("moveSelectedListItemUp 은 선택된 리스트 아이템을 같은 레벨에서 한 칸 위로 이동시켜야 한다", () => {
|
||||
const store = createEditorStore();
|
||||
const stateAny = store.getState() as any;
|
||||
|
||||
stateAny.addListBlock();
|
||||
|
||||
let { blocks } = store.getState();
|
||||
const listBlock = blocks.find((b) => b.type === "list")!;
|
||||
|
||||
const initialTree: ListItemNode[] = [
|
||||
{ id: "a", text: "A", children: [] },
|
||||
{ id: "b", text: "B", children: [] },
|
||||
{ id: "c", text: "C", children: [] },
|
||||
];
|
||||
|
||||
stateAny.updateBlock(listBlock.id, { itemsTree: initialTree } as any);
|
||||
stateAny.selectListItem("c");
|
||||
|
||||
stateAny.moveSelectedListItemUp(listBlock.id);
|
||||
|
||||
({ blocks } = store.getState());
|
||||
const updatedList = blocks.find((b) => b.id === listBlock.id)!;
|
||||
const updatedProps = updatedList.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
||||
|
||||
expect(updatedProps.itemsTree!.map((n) => n.id)).toEqual(["a", "c", "b"]);
|
||||
});
|
||||
|
||||
it("moveSelectedListItemDown 은 선택된 리스트 아이템을 같은 레벨에서 한 칸 아래로 이동시켜야 한다", () => {
|
||||
const store = createEditorStore();
|
||||
const stateAny = store.getState() as any;
|
||||
|
||||
stateAny.addListBlock();
|
||||
|
||||
let { blocks } = store.getState();
|
||||
const listBlock = blocks.find((b) => b.type === "list")!;
|
||||
|
||||
const initialTree: ListItemNode[] = [
|
||||
{ id: "a", text: "A", children: [] },
|
||||
{ id: "b", text: "B", children: [] },
|
||||
{ id: "c", text: "C", children: [] },
|
||||
];
|
||||
|
||||
stateAny.updateBlock(listBlock.id, { itemsTree: initialTree } as any);
|
||||
stateAny.selectListItem("a");
|
||||
|
||||
stateAny.moveSelectedListItemDown(listBlock.id);
|
||||
|
||||
({ blocks } = store.getState());
|
||||
const updatedList = blocks.find((b) => b.id === listBlock.id)!;
|
||||
const updatedProps = updatedList.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
||||
|
||||
expect(updatedProps.itemsTree!.map((n) => n.id)).toEqual(["b", "a", "c"]);
|
||||
});
|
||||
|
||||
it("buildItemsTreeFromItems 는 단순 문자열 배열을 flat ListItemNode 트리로 변환해야 한다", () => {
|
||||
const items = ["하나", "둘", "셋"];
|
||||
const tree = buildItemsTreeFromItems("list_1", items);
|
||||
|
||||
expect(tree.map((n) => n.text)).toEqual(items);
|
||||
expect(tree.map((n) => n.id)).toEqual(["list_1_item_1", "list_1_item_2", "list_1_item_3"]);
|
||||
expect(tree.every((n) => Array.isArray(n.children) && n.children.length === 0)).toBe(true);
|
||||
});
|
||||
|
||||
it("flattenItemsTreeToItems 는 중첩 리스트 트리를 depth-first 순서의 문자열 배열로 플랫하게 변환해야 한다", () => {
|
||||
const tree: ListItemNode[] = [
|
||||
{
|
||||
id: "a",
|
||||
text: "A",
|
||||
children: [
|
||||
{ id: "a1", text: "A-1", children: [] },
|
||||
{ id: "a2", text: "A-2", children: [] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
text: "B",
|
||||
children: [
|
||||
{
|
||||
id: "b1",
|
||||
text: "B-1",
|
||||
children: [{ id: "b1a", text: "B-1-a", children: [] }],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const items = flattenItemsTreeToItems(tree);
|
||||
|
||||
expect(items).toEqual(["A", "A-1", "A-2", "B", "B-1", "B-1-a"]);
|
||||
});
|
||||
|
||||
it("linesToItemsTree 는 depth 정보에 따라 중첩 리스트 트리를 생성해야 한다", () => {
|
||||
const lines: ListLine[] = [
|
||||
{ depth: 0, text: "A" },
|
||||
{ depth: 1, text: "A-1" },
|
||||
{ depth: 1, text: "A-2" },
|
||||
{ depth: 0, text: "B" },
|
||||
{ depth: 1, text: "B-1" },
|
||||
{ depth: 2, text: "B-1-a" },
|
||||
];
|
||||
|
||||
const tree = linesToItemsTree("list_depth", lines);
|
||||
|
||||
expect(tree.map((n) => n.text)).toEqual(["A", "B"]);
|
||||
expect(tree[0].children?.map((n) => n.text)).toEqual(["A-1", "A-2"]);
|
||||
|
||||
const bNode = tree[1];
|
||||
expect(bNode.text).toBe("B");
|
||||
expect(bNode.children?.[0].text).toBe("B-1");
|
||||
expect(bNode.children?.[0].children?.[0].text).toBe("B-1-a");
|
||||
});
|
||||
|
||||
it("itemsTreeToLines 는 중첩 리스트 트리를 depth 정보가 포함된 라인 배열로 직렬화해야 한다", () => {
|
||||
const tree: ListItemNode[] = [
|
||||
{
|
||||
id: "a",
|
||||
text: "A",
|
||||
children: [
|
||||
{ id: "a1", text: "A-1", children: [] },
|
||||
{ id: "a2", text: "A-2", children: [] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
text: "B",
|
||||
children: [
|
||||
{
|
||||
id: "b1",
|
||||
text: "B-1",
|
||||
children: [{ id: "b1a", text: "B-1-a", children: [] }],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const lines = itemsTreeToLines(tree);
|
||||
|
||||
expect(lines).toEqual<ReadonlyArray<ListLine>>([
|
||||
{ depth: 0, text: "A" },
|
||||
{ depth: 1, text: "A-1" },
|
||||
{ depth: 1, text: "A-2" },
|
||||
{ depth: 0, text: "B" },
|
||||
{ depth: 1, text: "B-1" },
|
||||
{ depth: 2, text: "B-1-a" },
|
||||
]);
|
||||
});
|
||||
|
||||
it("ListLine 배열을 textarea 에 쓸 수 있는 문자열로 직렬화할 수 있어야 한다", () => {
|
||||
const lines: ListLine[] = [
|
||||
{ depth: 0, text: "A" },
|
||||
{ depth: 1, text: "A-1" },
|
||||
{ depth: 1, text: "A-2" },
|
||||
{ depth: 0, text: "B" },
|
||||
{ depth: 1, text: "B-1" },
|
||||
{ depth: 2, text: "B-1-a" },
|
||||
];
|
||||
|
||||
const text = (stringifyLinesToTextarea as any)(lines);
|
||||
const rows = text.split(/\r?\n/);
|
||||
|
||||
expect(rows).toEqual([
|
||||
"A",
|
||||
" A-1",
|
||||
" A-2",
|
||||
"B",
|
||||
" B-1",
|
||||
" B-1-a",
|
||||
]);
|
||||
});
|
||||
|
||||
it("텍스트 블록에 글자 간격(letterSpacingCustom)을 em 단위로 설정할 수 있어야 한다", () => {
|
||||
const store = createEditorStore();
|
||||
|
||||
@@ -144,7 +542,7 @@ describe("editorStore", () => {
|
||||
expect(selectedBlockId).toBe(updatedBlocks[0].id);
|
||||
});
|
||||
|
||||
it("이미지 블록을 추가하면 기본 src/alt와 함께 추가되고 선택되어야 한다", () => {
|
||||
it("이미지 블록을 추가하면 기본 src/alt 및 스타일 기본값과 함께 추가되고 선택되어야 한다", () => {
|
||||
const store = createEditorStore();
|
||||
|
||||
store.getState().addImageBlock();
|
||||
@@ -157,6 +555,10 @@ describe("editorStore", () => {
|
||||
const imageProps = blocks[0].props as ImageBlockProps;
|
||||
expect(imageProps.src).toBe("");
|
||||
expect(imageProps.alt).toBe("이미지 설명");
|
||||
// 정렬/너비/모서리 기본값도 함께 검증한다.
|
||||
expect(imageProps.align).toBe("center");
|
||||
expect(imageProps.widthMode).toBe("auto");
|
||||
expect(imageProps.borderRadius).toBe("md");
|
||||
|
||||
// 루트에서 추가한 경우에는 sectionId/columnId 가 null 이어야 한다.
|
||||
expect((blocks[0] as any).sectionId).toBeNull();
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { getSectionLayoutConfig } from "@/features/editor/components/PublicPageRenderer";
|
||||
|
||||
describe("getSectionLayoutConfig", () => {
|
||||
const baseProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "md",
|
||||
columns: [{ id: "sec_col_1", span: 12 }],
|
||||
maxWidthMode: "normal",
|
||||
gapX: "md",
|
||||
alignItems: "top",
|
||||
};
|
||||
|
||||
it("기본 섹션 설정에서 예상 클래스 조합을 반환해야 한다", () => {
|
||||
const cfg = getSectionLayoutConfig(baseProps);
|
||||
|
||||
expect(cfg.backgroundClass).toBe("bg-slate-950");
|
||||
expect(cfg.paddingYClass).toBe("py-12");
|
||||
expect(cfg.maxWidthClass).toBe("max-w-5xl");
|
||||
expect(cfg.gapXClass).toBe("gap-8");
|
||||
expect(cfg.alignItemsClass).toBe("items-start");
|
||||
});
|
||||
|
||||
it("maxWidthMode/gapX/alignItems 토큰에 따라 클래스를 변경해야 한다", () => {
|
||||
const wideCentered: SectionBlockProps = {
|
||||
...baseProps,
|
||||
maxWidthMode: "wide",
|
||||
gapX: "lg",
|
||||
alignItems: "center",
|
||||
};
|
||||
|
||||
const narrowBottomMuted: SectionBlockProps = {
|
||||
...baseProps,
|
||||
background: "muted",
|
||||
maxWidthMode: "narrow",
|
||||
gapX: "sm",
|
||||
alignItems: "bottom",
|
||||
paddingY: "sm",
|
||||
};
|
||||
|
||||
const wideCfg = getSectionLayoutConfig(wideCentered);
|
||||
expect(wideCfg.maxWidthClass).toBe("max-w-6xl");
|
||||
expect(wideCfg.gapXClass).toBe("gap-10");
|
||||
expect(wideCfg.alignItemsClass).toBe("items-center");
|
||||
|
||||
const narrowCfg = getSectionLayoutConfig(narrowBottomMuted);
|
||||
expect(narrowCfg.backgroundClass).toBe("bg-slate-900");
|
||||
expect(narrowCfg.maxWidthClass).toBe("max-w-3xl");
|
||||
expect(narrowCfg.gapXClass).toBe("gap-4");
|
||||
expect(narrowCfg.alignItemsClass).toBe("items-end");
|
||||
expect(narrowCfg.paddingYClass).toBe("py-8");
|
||||
});
|
||||
|
||||
it("primary 배경과 큰 패딩에 대해 올바른 클래스를 반환해야 한다", () => {
|
||||
const primaryLarge: SectionBlockProps = {
|
||||
...baseProps,
|
||||
background: "primary",
|
||||
paddingY: "lg",
|
||||
};
|
||||
|
||||
const cfg = getSectionLayoutConfig(primaryLarge);
|
||||
expect(cfg.backgroundClass).toBe("bg-sky-900");
|
||||
expect(cfg.paddingYClass).toBe("py-20");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user