ci 수정

Reviewed-on: #3

.gitea/workflows/ci.yml

@@ -0,0 +1,157 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      - feature/**
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: |
+          npm ci
+
+      - name: Generate Prisma Client
+        env:
+          # CI에서는 실제 DB에 접속하지 않고 Prisma Client만 생성하면 되므로,
+          # 유효한 형식의 더미 DATABASE_URL 을 사용한다.
+          DATABASE_URL: postgresql://example:example@localhost:5432/example
+          # Prisma 엔진 바이너리 체크섬 파일을 원격에서 가져오지 못하는 경우(예: 500 오류)에도
+          # CI가 계속 진행되도록 체크섬 누락을 무시한다.
+          PRISMA_ENGINES_CHECKSUM_IGNORE_MISSING: "1"
+        run: |
+          npx prisma generate
+
+      - name: Build Next app
+        env:
+          # 빌드 시에도 Prisma Client 가 필요하므로 더미 DATABASE_URL 을 사용한다.
+          DATABASE_URL: postgresql://example:example@localhost:5432/example
+          PRISMA_ENGINES_CHECKSUM_IGNORE_MISSING: "1"
+        run: |
+          npm run build
+
+      - name: Run unit tests
+        if: github.event_name == 'push'
+        env:
+          # API 유닛 테스트에서도 PrismaClient가 필요하므로,
+          # generate 단계와 동일한 더미 DATABASE_URL 을 사용한다.
+          DATABASE_URL: postgresql://example:example@localhost:5432/example
+          # 테스트 중 Prisma가 엔진 체크섬 파일을 다시 확인하는 경우를 대비해 동일 설정을 적용한다.
+          PRISMA_ENGINES_CHECKSUM_IGNORE_MISSING: "1"
+        run: |
+          npm test
+
+  e2e:
+    needs: test
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_USER: app
+          POSTGRES_PASSWORD: app_password
+          POSTGRES_DB: page_builder
+        options: >-
+          --health-cmd="pg_isready -U app -d page_builder"
+          --health-interval=5s
+          --health-timeout=3s
+          --health-retries=20
+
+    env:
+      DATABASE_URL: postgresql://app:app_password@postgres:5432/page_builder?schema=public
+      AUTH_JWT_SECRET: ${{ secrets.AUTH_JWT_SECRET }}
+      AUTH_ENCRYPTION_KEY: ${{ secrets.AUTH_ENCRYPTION_KEY }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Prisma migrations
+        run: npx prisma migrate deploy
+
+      - name: Build Next.js app
+        run: npm run build
+
+      - name: Run Playwright E2E tests
+        run: npm run e2e
+
+  pr_and_merge:
+    needs: test
+    # feature/* 브랜치에 push 되었을 때만 실행한다.
+    if: ${{ startsWith(github.ref, 'refs/heads/feature/') }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Install jq
+        run: |
+          apt-get update
+          apt-get install -y jq
+
+      - name: Create or update PR and try auto-merge
+        env:
+          CI_BASE_URL: ${{ secrets.CI_BASE_URL }}
+          CI_TOKEN: ${{ secrets.CI_TOKEN }}
+          CI_OWNER: ${{ secrets.CI_OWNER }}
+          CI_REPO: ${{ secrets.CI_REPO }}
+          BRANCH_REF: ${{ github.ref }}
+          BRANCH_NAME: ${{ github.ref_name }}
+        run: |
+          set -e
+
+          if [ -z "$CI_BASE_URL" ] || [ -z "$CI_TOKEN" ] || [ -z "$CI_OWNER" ] || [ -z "$CI_REPO" ]; then
+            echo "CI_* 시크릿이 설정되지 않아 PR/자동 머지를 건너뜁니다." >&2
+            exit 0
+          fi
+
+          echo "현재 브랜치: $BRANCH_NAME ($BRANCH_REF)"
+
+          # 1) PR 생성 시도 (이미 존재하면 4xx를 허용)
+          create_pr_payload=$(jq -n \
+            --arg title "CI: $BRANCH_NAME" \
+            --arg head "$BRANCH_NAME" \
+            --arg base "main" \
+            '{title: $title, head: $head, base: $base}')
+
+          echo "PR 생성 시도..."
+          curl -sS -X POST \
+            -H "Content-Type: application/json" \
+            -H "Authorization: token $CI_TOKEN" \
+            "$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls" \
+            -d "$create_pr_payload" || true
+
+          # 2) 열린 PR 목록에서 해당 브랜치의 PR 번호를 찾는다.
+          echo "열린 PR 목록 조회..."
+          pr_list=$(curl -sS \
+            -H "Authorization: token $CI_TOKEN" \
+            "$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls?state=open")
+
+          pr_number=$(echo "$pr_list" | jq ".[] | select(.head.ref == \"$BRANCH_NAME\") | .number" | head -n 1)
+
+          if [ -z "$pr_number" ]; then
+            echo "브랜치 $BRANCH_NAME 에 대한 열린 PR을 찾지 못했습니다. 종료합니다."
+            exit 0
+          fi
+
+          echo "브랜치 $BRANCH_NAME 에 대한 PR #$pr_number 발견"
+
+          # 3) main 대상으로 자동 머지 시도
+          merge_payload=$(jq -n '{Do: "merge"}')
+
+          echo "PR #$pr_number 자동 머지 시도..."
+          curl -sS -X POST \
+            -H "Content-Type: application/json" \
+            -H "Authorization: token $CI_TOKEN" \
+            "$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls/$pr_number/merge" \
+            -d "$merge_payload" || true

.gitignore

@@ -19,5 +19,6 @@ blob-report/
 # Plans (exclude from Git)
 메인플랜.md
 최초플랜.md
+MAIN_PLAN.md
 
 /src/generated/prisma

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package-lock.json

@@ -12,7 +12,11 @@
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@prisma/client": "^6.19.0",
+        "bcryptjs": "^2.4.3",
         "dotenv": "^17.2.3",
+        "jsonwebtoken": "^9.0.2",
+        "jszip": "^3.10.1",
+        "lucide-react": "^0.555.0",
         "next": "^16.0.3",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
@@ -24,6 +28,9 @@
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
+        "@types/bcryptjs": "^2.4.2",
+        "@types/jsonwebtoken": "^9.0.6",
+        "@types/jszip": "^3.4.0",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
@@ -2786,6 +2793,13 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/@types/bcryptjs": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
+      "integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/chai": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
@@ -2825,6 +2839,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/jsonwebtoken": {
+      "version": "9.0.10",
+      "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.10.tgz",
+      "integrity": "sha512-asx5hIG9Qmf/1oStypjanR7iKTv0gXQ1Ov/jfrX6kS/EO0OFni8orbmGCn0672NHR3kXHwpAwR+B368ZGN/2rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/jszip": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/jszip/-/jszip-3.4.0.tgz",
+      "integrity": "sha512-GFHqtQQP3R4NNuvZH3hNCYD0NbyBZ42bkN7kO3NDrU/SnvIZWMS8Bp38XCsRKBT5BXvgm0y1zqpZWp/ZkRzBzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "jszip": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "24.10.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
@@ -3911,6 +3953,12 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
+      "license": "MIT"
+    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -3979,6 +4027,12 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/c12": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/c12/-/c12-3.1.0.tgz",
@@ -4261,6 +4315,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4554,6 +4614,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/effect": {
       "version": "3.18.4",
       "resolved": "https://registry.npmjs.org/effect/-/effect-3.18.4.tgz",
@@ -5982,6 +6051,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -6019,6 +6094,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -6608,6 +6689,28 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -6624,6 +6727,39 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
+      "integrity": "sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -6668,6 +6804,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.30.2",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
@@ -6988,6 +7133,42 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6995,6 +7176,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
     "node_modules/log-update": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
@@ -7038,6 +7225,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.555.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.555.0.tgz",
+      "integrity": "sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -7150,7 +7346,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nano-spawn": {
@@ -7555,6 +7750,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7826,6 +8027,12 @@
         }
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -7933,6 +8140,27 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -8177,6 +8405,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -8242,7 +8476,6 @@
       "version": "7.7.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
       "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "devOptional": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -8300,6 +8533,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/sharp": {
       "version": "0.34.5",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
@@ -8538,6 +8777,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/string-argv": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
@@ -9227,6 +9475,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",

package.json

@@ -7,6 +7,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "start:e2e": "next start -p 3000",
     "lint": "next lint",
     "test": "vitest run",
     "e2e": "playwright test"
@@ -18,7 +19,11 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@prisma/client": "^6.19.0",
+    "bcryptjs": "^2.4.3",
     "dotenv": "^17.2.3",
+    "jsonwebtoken": "^9.0.2",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.555.0",
     "next": "^16.0.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -30,6 +35,9 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/jszip": "^3.4.0",
+    "@types/bcryptjs": "^2.4.2",
+    "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",

playwright.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig, devices } from "@playwright/test";
 
+const isCI = !!process.env.CI;
+
 export default defineConfig({
   testDir: "./tests/e2e",
   timeout: 30_000,
@@ -16,4 +18,12 @@ export default defineConfig({
       use: { ...devices["Desktop Chrome"] },
     },
   ],
+  webServer: {
+    // CI 에서는 프로덕션 빌드 서버(next start)를 대상으로 E2E 를 수행해
+    // dev 모드의 느린 HMR/StrictMode 2회 렌더로 인한 flakiness 를 줄인다.
+    command: isCI ? "npm run start:e2e" : "npm run dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !isCI,
+    timeout: 120_000,
+  },
 });

prisma/migrations/20251130171523_add_user_model/migration.sql

@@ -0,0 +1,20 @@
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "userId" TEXT;
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "passwordHash" TEXT NOT NULL,
+    "tokenVersion" INTEGER NOT NULL DEFAULT 0,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- AddForeignKey
+ALTER TABLE "Project" ADD CONSTRAINT "Project_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/20251201230729_add_form_submission/migration.sql

@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE "FormSubmission" (
+    "id" TEXT NOT NULL,
+    "projectId" TEXT,
+    "projectSlug" TEXT NOT NULL,
+    "userId" TEXT,
+    "payloadJson" JSONB NOT NULL,
+    "sensitiveEnc" TEXT,
+    "metaJson" JSONB,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "FormSubmission_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "FormSubmission" ADD CONSTRAINT "FormSubmission_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "Project"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FormSubmission" ADD CONSTRAINT "FormSubmission_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/schema.prisma

@@ -5,8 +5,8 @@
 // Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
 
 generator client {
-  provider = "prisma-client"
-  output   = "../src/generated/prisma"
+  provider      = "prisma-client-js"
+  binaryTargets = ["native", "linux-musl-arm64-openssl-3.0.x"]
 }
 
 datasource db {
@@ -24,6 +24,25 @@ model Project {
   updatedAt   DateTime @updatedAt
 
   assets      Asset[]
+
+  formSubmissions FormSubmission[]
+
+  // 인증 도입을 위한 관계: 프로젝트는 특정 User 가 소유할 수 있다.
+  userId      String?
+  user        User?    @relation(fields: [userId], references: [id])
+}
+
+model User {
+  id           String   @id @default(uuid())
+  email        String   @unique
+  passwordHash String
+  tokenVersion Int      @default(0)
+  createdAt    DateTime @default(now())
+  updatedAt    DateTime @updatedAt
+
+  projects     Project[]
+
+  formSubmissions FormSubmission[]
 }
 
 model Asset {
@@ -42,3 +61,16 @@ enum ProjectStatus {
   PUBLISHED
   ARCHIVED
 }
+
+model FormSubmission {
+  id           String   @id @default(uuid())
+  project      Project? @relation(fields: [projectId], references: [id], onDelete: SetNull)
+  projectId    String?
+  projectSlug  String
+  user         User?    @relation(fields: [userId], references: [id], onDelete: SetNull)
+  userId       String?
+  payloadJson  Json
+  sensitiveEnc String?
+  metaJson     Json?
+  createdAt    DateTime @default(now())
+}

src/app/api/auth/login/route.ts

@@ -0,0 +1,56 @@
+import { NextResponse } from "next/server";
+import { PrismaClient } from "@prisma/client";
+
+import { verifyPassword, signAccessToken } from "@/features/auth/authCrypto";
+
+// /api/auth/login
+// - 이메일/비밀번호를 검증해 로그인시키고,
+// - JWT 액세스 토큰을 httpOnly 쿠키에 설정한 뒤, 비밀번호 해시를 제외한 유저 정보를 반환한다.
+
+const prisma = new PrismaClient();
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json().catch(() => null as any);
+
+    const emailRaw = body?.email;
+    const password: string | undefined = body?.password;
+
+    if (typeof emailRaw !== "string" || typeof password !== "string") {
+      return NextResponse.json({ message: "email 과 password 는 필수입니다." }, { status: 400 });
+    }
+
+    const email = emailRaw.trim().toLowerCase();
+
+    const user = await prisma.user.findUnique({ where: { email } });
+    if (!user) {
+      return NextResponse.json({ message: "이메일 또는 비밀번호가 올바르지 않습니다." }, { status: 401 });
+    }
+
+    const ok = await verifyPassword(password, user.passwordHash);
+    if (!ok) {
+      return NextResponse.json({ message: "이메일 또는 비밀번호가 올바르지 않습니다." }, { status: 401 });
+    }
+
+    const token = await signAccessToken({ id: user.id, email: user.email, tokenVersion: user.tokenVersion });
+
+    const { passwordHash: _ph, ...safeUser } = user;
+
+    const res = NextResponse.json(safeUser, { status: 200 });
+
+    res.cookies.set("pb_access", token, {
+      httpOnly: true,
+      secure: true,
+      sameSite: "lax",
+      path: "/",
+      maxAge: 7 * 24 * 60 * 60,
+    });
+
+    return res;
+  } catch (error: any) {
+    return NextResponse.json(
+      { message: "로그인 처리 중 오류가 발생했습니다.", error: error?.message },
+      { status: 500 },
+    );
+  }
+}

src/app/api/auth/logout/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server";
+
+// /api/auth/logout
+// - 클라이언트의 pb_access 세션 쿠키를 제거해 로그아웃을 수행한다.
+
+export async function POST(_request: Request) {
+  const res = NextResponse.json({ message: "로그아웃 되었습니다." }, { status: 200 });
+
+  // pb_access 쿠키를 즉시 만료시켜 로그아웃 상태로 만든다.
+  res.cookies.set("pb_access", "", {
+    httpOnly: true,
+    secure: true,
+    sameSite: "lax",
+    path: "/",
+    maxAge: 0,
+  });
+
+  return res;
+}

src/app/api/auth/me/route.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+
+import { verifyAccessToken } from "@/features/auth/authCrypto";
+
+// /api/auth/me
+// - 요청 쿠키에 포함된 JWT(pb_access)를 검증하고,
+// - 유효한 경우 토큰에서 식별 가능한 유저 정보를 반환한다.
+
+function extractTokenFromCookieHeader(cookieHeader: string | null): string | null {
+  if (!cookieHeader) return null;
+
+  const parts = cookieHeader.split(";");
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith("pb_access=")) {
+      const value = trimmed.substring("pb_access=".length);
+      return decodeURIComponent(value);
+    }
+  }
+  return null;
+}
+
+export async function GET(request: Request) {
+  const cookieHeader = request.headers.get("cookie");
+  const token = extractTokenFromCookieHeader(cookieHeader);
+
+  if (!token) {
+    return NextResponse.json({ message: "인증 정보가 없습니다." }, { status: 401 });
+  }
+
+  const payload = await verifyAccessToken(token);
+
+  if (!payload) {
+    return NextResponse.json({ message: "유효하지 않은 토큰입니다." }, { status: 401 });
+  }
+
+  const user = {
+    id: payload.sub,
+    email: payload.email,
+    tokenVersion: payload.tokenVersion,
+  };
+
+  return NextResponse.json(user, { status: 200 });
+}

src/app/api/auth/signup/route.ts

@@ -0,0 +1,71 @@
+import { NextResponse } from "next/server";
+import { PrismaClient } from "@prisma/client";
+
+import { hashPassword, signAccessToken } from "@/features/auth/authCrypto";
+
+// /api/auth/signup
+// - 이메일/비밀번호를 받아 새 유저를 생성하고,
+// - JWT 액세스 토큰을 httpOnly 쿠키에 설정한 뒤, 비밀번호 해시를 제외한 유저 정보를 반환한다.
+
+const prisma = new PrismaClient();
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json().catch(() => null as any);
+
+    const emailRaw = body?.email;
+    const password: string | undefined = body?.password;
+
+    if (typeof emailRaw !== "string" || typeof password !== "string") {
+      return NextResponse.json({ message: "email 과 password 는 필수입니다." }, { status: 400 });
+    }
+
+    const email = emailRaw.trim().toLowerCase();
+
+    if (password.length < 8) {
+      return NextResponse.json({ message: "비밀번호는 최소 8자 이상이어야 합니다." }, { status: 400 });
+    }
+
+    // 이미 존재하는 이메일인지 확인한다.
+    const existing = await prisma.user.findUnique({ where: { email } });
+    if (existing) {
+      return NextResponse.json({ message: "이미 가입된 이메일입니다." }, { status: 409 });
+    }
+
+    // 비밀번호를 해시한 뒤 유저를 생성한다.
+    const passwordHash = await hashPassword(password);
+
+    const user = await prisma.user.create({
+      data: {
+        email,
+        passwordHash,
+        tokenVersion: 1,
+      },
+    });
+
+    const token = await signAccessToken({
+      id: user.id,
+      email: user.email,
+      tokenVersion: user.tokenVersion,
+    });
+
+    const { passwordHash: _ph, ...safeUser } = user;
+
+    const res = NextResponse.json(safeUser, { status: 201 });
+
+    res.cookies.set("pb_access", token, {
+      httpOnly: true,
+      secure: true,
+      sameSite: "lax",
+      path: "/",
+      maxAge: 7 * 24 * 60 * 60,
+    });
+
+    return res;
+  } catch (error: any) {
+    return NextResponse.json(
+      { message: "회원가입 처리 중 오류가 발생했습니다.", error: error?.message },
+      { status: 500 },
+    );
+  }
+}

src/app/api/export/preview/route.ts

@@ -0,0 +1,38 @@
+import { NextResponse } from "next/server";
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+import { buildStaticHtml } from "@/app/api/export/route";
+
+// /api/export/preview 라우트는 Export 결과 HTML 을 ZIP 없이 바로 반환하는
+// 경량 프리뷰용 엔드포인트이다. 에디터에서 Export 미리보기 UX 를 제공하기 위해 사용한다.
+
+type PreviewRequestBody = {
+  blocks: Block[];
+  projectConfig?: ProjectConfig;
+};
+
+export async function POST(request: Request) {
+  let body: PreviewRequestBody;
+
+  try {
+    // JSON 본문을 파싱해서 blocks + projectConfig 를 추출한다.
+    body = (await request.json()) as PreviewRequestBody;
+  } catch {
+    // 잘못된 JSON 요청에 대해서는 400 에러를 반환한다.
+    return NextResponse.json({ message: "잘못된 JSON 요청입니다." }, { status: 400 });
+  }
+
+  const blocks = Array.isArray(body.blocks) ? body.blocks : [];
+  const projectConfig = body.projectConfig;
+
+  // Export 본문 HTML 은 기존 buildStaticHtml 을 재사용해서 생성한다.
+  // 이렇게 하면 /api/export ZIP 라우트와 동일한 정적 HTML 을 얻을 수 있다.
+  const html = buildStaticHtml(blocks, projectConfig);
+
+  // Export 미리보기는 ZIP 이 아니라 순수 HTML 문자열을 반환한다.
+  return new NextResponse(html, {
+    status: 200,
+    headers: {
+      "Content-Type": "text/html; charset=utf-8",
+    },
+  });
+}

src/app/api/export/route.ts

@@ -0,0 +1,906 @@
+import { NextResponse } from "next/server";
+import { promises as fs } from "fs";
+import path from "path";
+import JSZip from "jszip";
+import type {
+  Block,
+  ProjectConfig,
+  FormBlockProps,
+  FormSelectOption,
+  TextBlockProps,
+  ButtonBlockProps,
+  SectionBlockProps,
+  VideoBlockProps,
+  ListBlockProps,
+} from "@/features/editor/state/editorStore";
+import {
+  normalizeVideoSourceUrl,
+  resolveVideoPlatform,
+  buildVideoEmbedUrl,
+  computeVideoExportTokens,
+} from "@/features/editor/utils/videoHelpers";
+import { computeTextPbTokens } from "@/features/editor/utils/textHelpers";
+import { computeButtonPbTokens } from "@/features/editor/utils/buttonHelpers";
+import { computeImageExportStyles } from "@/features/editor/utils/imageHelpers";
+import { computeSectionExportTokens } from "@/features/editor/utils/sectionHelpers";
+import { computeListExportTokens } from "@/features/editor/utils/listHelpers";
+import {
+  computeFormInputExportTokens,
+  computeFormSelectExportTokens,
+  computeFormCheckboxExportTokens,
+  computeFormRadioExportTokens,
+  computeFormBlockExportTokens,
+} from "@/features/editor/utils/formHelpers";
+import { computeDividerExportTokens } from "@/features/editor/utils/dividerHelpers";
+
+type ExportRequestBody = {
+  blocks: Block[];
+  projectConfig?: ProjectConfig;
+};
+
+const BUILDER_CSS_PATH = path.join(process.cwd(), "src", "styles", "builder.css");
+const UPLOAD_DIR = path.join(process.cwd(), "uploads");
+
+const escapeHtml = (value: string): string =>
+  value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+
+const escapeAttr = (value: string): string => escapeHtml(value);
+
+export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig): string => {
+  const baseTitleRaw = (projectConfig?.title ?? "").trim() || "Page Builder Export";
+  const seoTitleRaw = (projectConfig?.seoTitle ?? "").trim();
+  const pageTitleRaw = seoTitleRaw || baseTitleRaw;
+  const pageTitle = escapeHtml(pageTitleRaw);
+
+  const headExtraRaw = (projectConfig?.headHtml ?? "").trim();
+  const headExtra = headExtraRaw ? `\n${headExtraRaw}\n` : "";
+
+  const preset = projectConfig?.canvasPreset ?? "full";
+  let maxWidth: string | null = null;
+  const widthPx =
+    typeof projectConfig?.canvasWidthPx === "number" && projectConfig.canvasWidthPx > 0
+      ? projectConfig.canvasWidthPx
+      : null;
+  if (widthPx != null) {
+    maxWidth = `${widthPx}px`;
+  } else if (preset === "mobile") {
+    maxWidth = "390px";
+  } else if (preset === "tablet") {
+    maxWidth = "768px";
+  } else if (preset === "desktop") {
+    maxWidth = "1200px";
+  }
+  const bgColor = (projectConfig?.canvasBgColorHex ?? "").trim();
+  const widthPart = maxWidth != null ? `max-width:${maxWidth};` : "";
+  const bgPart = bgColor ? `background-color:${bgColor};` : "";
+  const basePart = "margin:0 auto;padding:24px;box-sizing:border-box;";
+  const canvasStyle = `${widthPart}${bgPart}${basePart}`;
+
+  const bodyBgRaw = (projectConfig?.bodyBgColorHex ?? "#020617").trim() || "#020617";
+  const bodyStyle = `background-color:${bodyBgRaw};margin:0;padding:0;`;
+  const trackingRaw = (projectConfig?.trackingScript ?? "").trim();
+  const trackingHtml = trackingRaw ? `\n${trackingRaw}\n` : "";
+
+  const seoDescriptionRaw = (projectConfig?.seoDescription ?? "").trim();
+  const seoOgImageRaw = (projectConfig?.seoOgImageUrl ?? "").trim();
+  const seoCanonicalRaw = (projectConfig?.seoCanonicalUrl ?? "").trim();
+  const seoNoIndex = projectConfig?.seoNoIndex === true;
+
+  const seoHeadParts: string[] = [];
+
+  if (seoDescriptionRaw) {
+    seoHeadParts.push(
+      `    <meta name="description" content="${escapeAttr(seoDescriptionRaw)}" />`,
+    );
+  }
+
+  if (pageTitleRaw) {
+    seoHeadParts.push(
+      `    <meta property="og:title" content="${escapeAttr(pageTitleRaw)}" />`,
+    );
+  }
+  if (seoDescriptionRaw) {
+    seoHeadParts.push(
+      `    <meta property="og:description" content="${escapeAttr(seoDescriptionRaw)}" />`,
+    );
+  }
+  seoHeadParts.push(`    <meta property="og:type" content="website" />`);
+
+  if (seoOgImageRaw) {
+    seoHeadParts.push(
+      `    <meta property="og:image" content="${escapeAttr(seoOgImageRaw)}" />`,
+    );
+  }
+
+  if (seoCanonicalRaw) {
+    seoHeadParts.push(
+      `    <meta property="og:url" content="${escapeAttr(seoCanonicalRaw)}" />`,
+    );
+  }
+
+  // Twitter 카드 메타 태그
+  seoHeadParts.push(
+    `    <meta name="twitter:card" content="summary_large_image" />`,
+  );
+  if (pageTitleRaw) {
+    seoHeadParts.push(
+      `    <meta name="twitter:title" content="${escapeAttr(pageTitleRaw)}" />`,
+    );
+  }
+  if (seoDescriptionRaw) {
+    seoHeadParts.push(
+      `    <meta name="twitter:description" content="${escapeAttr(seoDescriptionRaw)}" />`,
+    );
+  }
+  if (seoOgImageRaw) {
+    seoHeadParts.push(
+      `    <meta name="twitter:image" content="${escapeAttr(seoOgImageRaw)}" />`,
+    );
+  }
+
+  if (seoCanonicalRaw) {
+    seoHeadParts.push(
+      `    <link rel="canonical" href="${escapeAttr(seoCanonicalRaw)}" />`,
+    );
+  }
+
+  if (seoNoIndex) {
+    seoHeadParts.push(
+      `    <meta name="robots" content="noindex, nofollow" />`,
+    );
+  }
+
+  const seoHeadHtml = seoHeadParts.length > 0 ? `\n${seoHeadParts.join("\n")}` : "";
+
+  const sectionBlocks = blocks.filter((b) => b.type === "section");
+  const rootBlocks = blocks.filter((b) => !b.sectionId && b.type !== "section");
+
+  // Form 컨트롤러(FormBlock)와 개별 필드 블록(formInput/formSelect/...) 를 연결하기 위한 맵.
+  // - fieldIdToFormId: key = 필드 블록 id (fieldIds 에 포함된 id), value = <form> 요소의 DOM id
+  // - formBlockIdToFormDomId: key = FormBlock id, value = <form> 요소의 DOM id
+  const fieldIdToFormId = new Map<string, string>();
+  const formBlockIdToFormDomId = new Map<string, string>();
+  const submitButtonIdToFormDomId = new Map<string, string>();
+  const requiredFieldIdSet = new Set<string>();
+  // 테스트 및 기존 Export HTML 과의 호환성을 위해 FormBlock 의 DOM id 규칙을 다음과 같이 정의한다.
+  // - block.id 가 "form_숫자" 패턴이면 기존과 동일하게 formDomId = `form_${block.id}` (예: form_1 → form_form_1)
+  // - 그 외의 id 에 대해서는 pb_form_N 패턴을 사용해, form="..." 값에 우연히 "required" 같은 단어가 포함되지 않도록 한다.
+  let fallbackFormIndex = 1;
+  for (const block of blocks) {
+    if (block.type !== "form") continue;
+    const props = (block.props ?? {}) as FormBlockProps;
+    const fieldIds = Array.isArray(props.fieldIds) ? props.fieldIds : [];
+    if (fieldIds.length === 0) continue;
+
+    let formDomId: string;
+    if (typeof block.id === "string" && /^form_\d+$/.test(block.id)) {
+      formDomId = `form_${block.id}`;
+    } else {
+      formDomId = `pb_form_${fallbackFormIndex++}`;
+    }
+
+    formBlockIdToFormDomId.set(block.id, formDomId);
+    for (const fieldId of fieldIds) {
+      if (typeof fieldId === "string" && fieldId.trim() !== "") {
+        fieldIdToFormId.set(fieldId, formDomId);
+      }
+    }
+
+    const submitButtonIdRaw = props.submitButtonId;
+    if (typeof submitButtonIdRaw === "string" && submitButtonIdRaw.trim() !== "") {
+      submitButtonIdToFormDomId.set(submitButtonIdRaw, formDomId);
+    }
+
+    const requiredFieldIds = Array.isArray(props.requiredFieldIds) ? props.requiredFieldIds : [];
+    for (const fieldId of requiredFieldIds) {
+      if (typeof fieldId === "string" && fieldId.trim() !== "") {
+        requiredFieldIdSet.add(fieldId);
+      }
+    }
+  }
+
+  const renderBlock = (block: Block): string => {
+    if (block.type === "text") {
+      const props = (block.props ?? {}) as TextBlockProps;
+      const text = typeof props.text === "string" ? props.text : "";
+
+      const tokens = computeTextPbTokens({
+        text,
+        align: props.align ?? "left",
+        size: props.size ?? "base",
+        fontSizeMode: props.fontSizeMode ?? "scale",
+        fontSizeScale: props.fontSizeScale ?? undefined,
+        fontSizeCustom: props.fontSizeCustom ?? undefined,
+        lineHeightMode: props.lineHeightMode ?? "scale",
+        lineHeightScale: props.lineHeightScale ?? undefined,
+        lineHeightCustom: props.lineHeightCustom ?? undefined,
+        fontWeightMode: props.fontWeightMode ?? "scale",
+        fontWeightScale: props.fontWeightScale ?? undefined,
+        fontWeightCustom: props.fontWeightCustom ?? undefined,
+        colorMode: props.colorMode ?? undefined,
+        colorPalette: props.colorPalette ?? undefined,
+        colorCustom: props.colorCustom ?? undefined,
+        backgroundColorCustom: (props as any).backgroundColorCustom ?? undefined,
+        maxWidthMode: props.maxWidthMode ?? "scale",
+        maxWidthScale: props.maxWidthScale ?? undefined,
+        underline: props.underline ?? false,
+        strike: props.strike ?? false,
+        italic: props.italic ?? false,
+      });
+
+      const classes = [
+        tokens.alignClass,
+        tokens.sizeClass,
+        tokens.leadingClass,
+        tokens.weightClass,
+        tokens.colorClass,
+        tokens.maxWidthClass,
+        ...tokens.extraClasses,
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      const styleAttr = tokens.inlineStyles.length > 0 ? ` style="${tokens.inlineStyles.join(";")}"` : "";
+
+      return `<p class="${classes}"${styleAttr}>${escapeHtml(text)}</p>`;
+    }
+
+    if (block.type === "button") {
+      const props = (block.props ?? {}) as ButtonBlockProps;
+      const href = typeof props.href === "string" ? props.href : "#";
+      const label = typeof props.label === "string" ? props.label : "";
+
+      const tokens = computeButtonPbTokens({
+        align: props.align ?? "left",
+        size: props.size ?? "md",
+        variant: props.variant ?? "solid",
+        colorPalette: props.colorPalette ?? "primary",
+        borderRadius: props.borderRadius ?? "md",
+        fullWidth: props.fullWidth ?? false,
+        widthMode: props.widthMode ?? undefined,
+        widthPx: props.widthPx ?? undefined,
+        paddingX: props.paddingX ?? undefined,
+        paddingY: props.paddingY ?? undefined,
+        fontSizeCustom: props.fontSizeCustom ?? undefined,
+        lineHeightCustom: props.lineHeightCustom ?? undefined,
+        letterSpacingCustom: props.letterSpacingCustom ?? undefined,
+        fillColorCustom: props.fillColorCustom ?? undefined,
+        strokeColorCustom: props.strokeColorCustom ?? undefined,
+        textColorCustom: props.textColorCustom ?? undefined,
+      });
+
+      const styleAttr = tokens.inlineStyles.length > 0 ? ` style="${tokens.inlineStyles.join(";")}"` : "";
+
+      const btnClasses = ["pb-btn-base", tokens.sizeClass, tokens.variantClass, tokens.radiusClass]
+        .filter(Boolean)
+        .join(" ");
+
+      let innerHtml = escapeHtml(label);
+
+      if (typeof (props as any).imageSrc === "string" && (props as any).imageSrc.trim() !== "") {
+        const imgSrc = escapeAttr((props as any).imageSrc.trim());
+        const altRaw = (props as any).imageAlt as string | undefined;
+        const altValue = altRaw && altRaw.trim() !== "" ? altRaw.trim() : label;
+        const imgAlt = escapeAttr(altValue);
+        innerHtml = `<img src="${imgSrc}" alt="${imgAlt}" />${innerHtml}`;
+      }
+
+      const submitFormId = submitButtonIdToFormDomId.get(block.id);
+      if (submitFormId) {
+        return `<div class="${tokens.alignClass}"><button type="submit" form="${escapeAttr(
+          submitFormId,
+        )}" class="${btnClasses}"${styleAttr}>${innerHtml}</button></div>`;
+      }
+
+      return `<div class="${tokens.alignClass}"><a href="${escapeAttr(
+        href,
+      )}" class="${btnClasses}"${styleAttr}>${innerHtml}</a></div>`;
+    }
+
+    if (block.type === "video") {
+      const props: any = block.props ?? {};
+      const rawUrl = normalizeVideoSourceUrl(props.sourceUrl ?? "");
+
+      const platform = resolveVideoPlatform(rawUrl, props.platform ?? "auto");
+      const embedUrl = buildVideoEmbedUrl(rawUrl, platform, { enableVimeoEmbed: true });
+
+      const tokens = computeVideoExportTokens(props, { escapeAttr });
+
+      const outerStyleAttr =
+        tokens.outerStyleParts.length > 0 ? ` style="${tokens.outerStyleParts.join(";")}"` : "";
+      const wrapperStyleAttr =
+        tokens.wrapperStyleParts.length > 0 ? ` style="${tokens.wrapperStyleParts.join(";")}"` : "";
+      const videoStyleAttr =
+        tokens.videoStyleParts.length > 0 ? ` style="${tokens.videoStyleParts.join(";")}"` : "";
+
+      const isEmbed = platform === "youtube" || platform === "vimeo";
+
+      if (isEmbed) {
+        const titleRaw = typeof (props as any).titleText === "string" ? (props as any).titleText.trim() : "";
+        const iframeTitle = titleRaw !== "" ? titleRaw : "비디오";
+
+        return `<div${outerStyleAttr}><div class="pb-video-wrapper${tokens.aspectClass}"${wrapperStyleAttr}><iframe title="${escapeAttr(
+          iframeTitle,
+        )}" src="${escapeAttr(
+          embedUrl,
+        )}" class="pb-video-frame" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div>`;
+      }
+
+      const controlsAttr = props.controls === false ? "" : " controls";
+      const autoplayAttr = props.autoplay ? " autoplay" : "";
+      const loopAttr = props.loop ? " loop" : "";
+      const mutedAttr = props.muted ? " muted" : "";
+      const posterRaw = typeof (props as any).posterImageSrc === "string" ? (props as any).posterImageSrc.trim() : "";
+      const posterAttr = posterRaw !== "" ? ` poster="${escapeAttr(posterRaw)}"` : "";
+      const ariaRaw = typeof (props as any).ariaLabel === "string" ? (props as any).ariaLabel.trim() : "";
+      const ariaAttr = ariaRaw !== "" ? ` aria-label="${escapeAttr(ariaRaw)}"` : "";
+      const startDataAttr =
+        typeof (props as any).startTimeSec === "number" && (props as any).startTimeSec >= 0
+          ? ` data-start-seconds="${(props as any).startTimeSec}"`
+          : "";
+      const endDataAttr =
+        typeof (props as any).endTimeSec === "number" && (props as any).endTimeSec >= 0
+          ? ` data-end-seconds="${(props as any).endTimeSec}"`
+          : "";
+      const captionRaw = typeof (props as any).captionText === "string" ? (props as any).captionText.trim() : "";
+      const captionHtml = captionRaw !== "" ? `<p class="pb-video-caption">${escapeHtml(captionRaw)}</p>` : "";
+
+      return `<div${outerStyleAttr}><div class="pb-video-wrapper${tokens.aspectClass}"${wrapperStyleAttr}><video class="pb-video-frame" src="${escapeAttr(
+        rawUrl,
+      )}"${posterAttr}${ariaAttr}${startDataAttr}${endDataAttr}${videoStyleAttr}${controlsAttr}${autoplayAttr}${loopAttr}${mutedAttr}></video></div>${captionHtml}</div>`;
+    }
+
+    if (block.type === "image") {
+      const props: any = block.props ?? {};
+      const src = typeof props.src === "string" ? props.src : "";
+      const alt = typeof props.alt === "string" ? props.alt : "";
+
+      const styles = computeImageExportStyles({
+        backgroundColorCustom:
+          typeof props.backgroundColorCustom === "string" ? props.backgroundColorCustom : undefined,
+        widthMode: props.widthMode ?? "auto",
+        widthPx: typeof props.widthPx === "number" ? props.widthPx : undefined,
+        borderRadius: props.borderRadius ?? "md",
+        borderRadiusPx: typeof props.borderRadiusPx === "number" ? props.borderRadiusPx : undefined,
+      });
+
+      const wrapperStyleAttr =
+        styles.wrapperStyleParts.length > 0 ? ` style="${styles.wrapperStyleParts.join(";")}"` : "";
+      const imgStyleAttr = styles.imgStyleParts.length > 0 ? ` style="${styles.imgStyleParts.join(";")}"` : "";
+
+      return `<div${wrapperStyleAttr}><img src="${escapeAttr(src)}" alt="${escapeAttr(alt)}"${imgStyleAttr} /></div>`;
+    }
+
+    if (block.type === "form") {
+      const props = (block.props ?? {}) as FormBlockProps;
+      const tokens = computeFormBlockExportTokens(block, blocks);
+      const controllerFields = tokens.hasControllerFields ? tokens.controllerFields : [];
+
+      const hasControllerFields = controllerFields.length > 0;
+
+      // FormBlock 이 컨트롤러 필드 정보를 전혀 가지고 있지 않으면
+      // Export 레이어에서는 아무 것도 렌더하지 않는다 (fallback fields 기반 pb-form 도 생성하지 않음).
+      if (!hasControllerFields) {
+        return "";
+      }
+
+      // 컨트롤러 전용 FormBlock: fieldIds 기반으로 개별 필드 블록과 연결되는 순수 컨트롤러 폼만 생성한다.
+      // - Export 에서는 레이아웃/스타일 대신 id/메서드/액션만 가지는 최소한의 <form> 요소만 만든다.
+      // - action 은 퍼블릭 페이지에서 우리 서버의 forms/submit 엔드포인트로 전송하기 위한 고정 경로다.
+      const formId = formBlockIdToFormDomId.get(block.id) ?? `form_${block.id}`;
+      const method = props.method ?? "POST";
+      const methodAttr = ` method="${method.toLowerCase()}"`;
+      const actionAttr = ` action="/api/forms/submit"`;
+
+      // 정적 Export 에서도 FormBlock 설정(전송 대상/웹훅 설정 등)을 함께 전달할 수 있도록
+      // preview 렌더러와 동일하게 __config hidden 필드에 FormBlockProps 전체를 JSON 으로 담아둔다.
+      const configJson = JSON.stringify(props ?? {});
+      const escapedConfig = escapeAttr(configJson);
+
+      const projectSlugRaw = (projectConfig?.slug ?? "").trim();
+      const projectSlugValue = projectSlugRaw !== "" ? projectSlugRaw : "";
+
+      const parts: string[] = [];
+      parts.push(
+        `<form id="${escapeAttr(formId)}" class="pb-form-controller"${methodAttr}${actionAttr}>`,
+      );
+      parts.push(`<input type="hidden" name="__config" value="${escapedConfig}" />`);
+      if (projectSlugValue) {
+        parts.push(
+          `<input type="hidden" name="__projectSlug" value="${escapeAttr(projectSlugValue)}" />`,
+        );
+      }
+      parts.push("</form>");
+      return parts.join("");
+    }
+
+    if (block.type === "divider") {
+      const props: any = block.props ?? {};
+      const tokens = computeDividerExportTokens(props, { escapeAttr });
+      return `<hr class="pb-divider" style="${tokens.style}" />`;
+    }
+
+    if (block.type === "list") {
+      const props = (block.props ?? {}) as ListBlockProps;
+
+      const tokens = computeListExportTokens(props);
+
+      if (tokens.items.length === 0) {
+        return "";
+      }
+
+      const lis = tokens.items
+        .map((text) => `<li>${escapeHtml(text)}</li>`)
+        .join("");
+      const listStyleAttr = tokens.listStyleParts.join(";");
+
+      return `<${tokens.Tag} class="pb-list" style="${listStyleAttr}">${lis}</${tokens.Tag}>`;
+    }
+
+    if (block.type === "formInput") {
+      const props: any = block.props ?? {};
+      const name = typeof props.formFieldName === "string" ? props.formFieldName : block.id;
+      const label =
+        typeof props.label === "string" && props.label.trim() !== "" ? props.label : name;
+      const type = props.inputType === "email" ? "email" : "text";
+      const labelDisplay = props.labelDisplay ?? "visible";
+      const isFloating = labelDisplay === "floating";
+      const isControllerRequired = requiredFieldIdSet.has(block.id);
+      const required = props.required || isControllerRequired ? " required" : "";
+
+      const tokens = computeFormInputExportTokens(props, { escapeAttr });
+      const formId = fieldIdToFormId.get(block.id);
+      const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
+
+      const inputId = name;
+
+      const fieldClass = isFloating ? "pb-form-field pb-form-field--floating" : "pb-form-field";
+      let fieldStyleAttr = "";
+      if (isFloating && typeof props.paddingY === "number" && props.paddingY >= 0) {
+        const em = props.paddingY / 16;
+        fieldStyleAttr = ` style="--pb-input-padding-y:${em}rem"`;
+      }
+
+      const placeholderBase =
+        typeof props.placeholder === "string" && props.placeholder.trim() !== ""
+          ? props.placeholder.trim()
+          : "";
+
+      let placeholder: string;
+      if (isFloating) {
+        placeholder = " ";
+      } else if (placeholderBase !== "") {
+        placeholder = placeholderBase;
+      } else {
+        placeholder = label;
+      }
+
+      const labelClass = labelDisplay === "hidden" ? "pb-form-label sr-only" : "pb-form-label";
+
+      return [
+        `<div class="${fieldClass}"${fieldStyleAttr}>`,
+        `<input class="pb-input" name="${escapeAttr(name)}" id="${escapeAttr(inputId)}" type="${type}" placeholder="${escapeAttr(
+          placeholder,
+        )}"${required}${tokens.inputStyleAttr}${formAttr} />`,
+        `<label class="${labelClass}" for="${escapeAttr(inputId)}"${tokens.labelStyleAttr}>${escapeHtml(
+          label,
+        )}</label>`,
+        "</div>",
+      ].join("");
+    }
+
+    if (block.type === "formSelect") {
+      const props: any = block.props ?? {};
+      const name = typeof props.formFieldName === "string" ? props.formFieldName : block.id;
+      const label =
+        typeof props.label === "string" && props.label.trim() !== "" ? props.label : name;
+      const labelDisplay = props.labelDisplay ?? "visible";
+      const isControllerRequired = requiredFieldIdSet.has(block.id);
+      const required = props.required || isControllerRequired ? " required" : "";
+      const options: FormSelectOption[] = Array.isArray(props.options) ? props.options : [];
+
+      const tokens = computeFormSelectExportTokens(props, { escapeAttr });
+      const formId = fieldIdToFormId.get(block.id);
+      const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
+
+      const fieldClass = "pb-form-field";
+
+      const labelLayout = props.labelLayout ?? "stacked";
+      const isInlineLayout = labelDisplay === "visible" && labelLayout === "inline";
+      const styleParts: string[] = [];
+      if (isInlineLayout) {
+        const gapPx = typeof props.labelGapPx === "number" ? props.labelGapPx : 8;
+        const gapEm = gapPx / 16;
+        styleParts.push("display:flex");
+        styleParts.push("flex-direction:row");
+        styleParts.push("align-items:center");
+        styleParts.push(`column-gap:${gapEm}em`);
+      }
+
+      const widthMode = props.widthMode ?? "full";
+      if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+        styleParts.push(`width:${props.widthPx}px`);
+      }
+
+      const fieldStyleAttr = styleParts.length > 0 ? ` style="${styleParts.join(";")}"` : "";
+
+      const labelClass =
+        labelDisplay === "hidden" ? "pb-form-label sr-only" : "pb-form-label";
+
+      const parts: string[] = [];
+      parts.push(`<div class="${fieldClass}"${fieldStyleAttr}>`);
+      parts.push(`<label class="${labelClass}"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`);
+      parts.push(
+        `<select class="pb-select" name="${escapeAttr(name)}"${required}${tokens.selectStyleAttr}${formAttr}>`,
+      );
+      for (const opt of options) {
+        parts.push(
+          `<option value="${escapeAttr(opt.value)}">${escapeHtml(opt.label)}</option>`,
+        );
+      }
+      parts.push("</select>");
+      parts.push("</div>");
+
+      return parts.join("");
+    }
+
+    if (block.type === "formCheckbox") {
+      const props: any = block.props ?? {};
+      const name = typeof props.formFieldName === "string" ? props.formFieldName : block.id;
+      const label =
+        typeof props.groupLabel === "string" && props.groupLabel.trim() !== ""
+          ? props.groupLabel
+          : name;
+      const options = Array.isArray(props.options) ? props.options : [];
+
+      const tokens = computeFormCheckboxExportTokens(props, { escapeAttr });
+      const formId = fieldIdToFormId.get(block.id);
+      const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
+
+      const groupLabelDisplay = props.groupLabelDisplay ?? "visible";
+      const labelLayout = props.labelLayout ?? "stacked";
+      const isInlineLayout = groupLabelDisplay === "visible" && labelLayout === "inline";
+      const fieldStyleParts: string[] = [];
+      if (isInlineLayout) {
+        const gapPx = typeof props.labelGapPx === "number" ? props.labelGapPx : 8;
+        const gapEm = gapPx / 16;
+        fieldStyleParts.push("display:flex");
+        fieldStyleParts.push("flex-direction:row");
+        fieldStyleParts.push("align-items:center");
+        fieldStyleParts.push(`column-gap:${gapEm}em`);
+      }
+
+      const widthMode = props.widthMode ?? "full";
+      if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+        fieldStyleParts.push(`width:${props.widthPx}px`);
+      }
+
+      const fieldStyleAttr =
+        fieldStyleParts.length > 0 ? ` style="${fieldStyleParts.join(";")}"` : "";
+
+      const labelClass =
+        groupLabelDisplay === "hidden" ? "pb-form-label sr-only" : "pb-form-label";
+
+      const optionLayout = props.optionLayout ?? "stacked";
+      const optionsClass =
+        optionLayout === "inline"
+          ? "pb-form-options pb-form-options--inline"
+          : "pb-form-options pb-form-options--stacked";
+
+      const optionsStyleParts: string[] = [];
+      if (typeof props.optionGapPx === "number" && props.optionGapPx >= 0) {
+        const gapEm = props.optionGapPx / 16;
+        optionsStyleParts.push(`row-gap:${gapEm}em`);
+        if (optionLayout === "inline") {
+          optionsStyleParts.push(`column-gap:${gapEm}em`);
+        }
+      }
+
+      const optionsStyleAttr =
+        optionsStyleParts.length > 0 ? ` style="${optionsStyleParts.join(";")}"` : "";
+
+      const isGroupRequired = requiredFieldIdSet.has(block.id) || props.required === true;
+
+      const parts: string[] = [];
+      parts.push(`<div class="pb-form-field"${fieldStyleAttr}>`);
+      parts.push(`<label class="${labelClass}"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`);
+      parts.push(`<div class="${optionsClass}"${optionsStyleAttr}>`);
+      options.forEach((opt: { value: string; label: string }, index: number) => {
+        const optionRequiredAttr = isGroupRequired && index === 0 ? " required" : "";
+        parts.push(
+          `<label class="pb-form-option"${tokens.optionStyleAttr}><input type="checkbox" name="${escapeAttr(
+            name,
+          )}" value="${escapeAttr(opt.value)}"${optionRequiredAttr}${formAttr} /> <span>${escapeHtml(
+            opt.label,
+          )}</span></label>`,
+        );
+      });
+      parts.push("</div>");
+      parts.push("</div>");
+
+      return parts.join("");
+    }
+
+    if (block.type === "formRadio") {
+      const props: any = block.props ?? {};
+      const name = typeof props.formFieldName === "string" ? props.formFieldName : block.id;
+      const label =
+        typeof props.groupLabel === "string" && props.groupLabel.trim() !== ""
+          ? props.groupLabel
+          : name;
+      const options = Array.isArray(props.options) ? props.options : [];
+
+      const tokens = computeFormRadioExportTokens(props, { escapeAttr });
+      const formId = fieldIdToFormId.get(block.id);
+      const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
+
+      const groupLabelDisplay = props.groupLabelDisplay ?? "visible";
+      const labelLayout = props.labelLayout ?? "stacked";
+      const isInlineLayout = groupLabelDisplay === "visible" && labelLayout === "inline";
+
+      const fieldStyleParts: string[] = [];
+      if (isInlineLayout) {
+        const gapPx = typeof props.labelGapPx === "number" ? props.labelGapPx : 8;
+        const gapEm = gapPx / 16;
+        fieldStyleParts.push("display:flex");
+        fieldStyleParts.push("flex-direction:row");
+        fieldStyleParts.push("align-items:center");
+        fieldStyleParts.push(`column-gap:${gapEm}em`);
+      }
+
+      const widthMode = props.widthMode ?? "full";
+      if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+        fieldStyleParts.push(`width:${props.widthPx}px`);
+      }
+
+      const fieldStyleAttr =
+        fieldStyleParts.length > 0 ? ` style="${fieldStyleParts.join(";")}"` : "";
+
+      const labelClass =
+        groupLabelDisplay === "hidden" ? "pb-form-label sr-only" : "pb-form-label";
+
+      const optionLayout = props.optionLayout ?? "stacked";
+      const optionsClass =
+        optionLayout === "inline"
+          ? "pb-form-options pb-form-options--inline"
+          : "pb-form-options pb-form-options--stacked";
+
+      const optionsStyleParts: string[] = [];
+      if (typeof props.optionGapPx === "number" && props.optionGapPx >= 0) {
+        const gapEm = props.optionGapPx / 16;
+        optionsStyleParts.push(`row-gap:${gapEm}em`);
+        if (optionLayout === "inline") {
+          optionsStyleParts.push(`column-gap:${gapEm}em`);
+        }
+      }
+
+      const optionsStyleAttr =
+        optionsStyleParts.length > 0 ? ` style="${optionsStyleParts.join(";")}"` : "";
+
+      const isGroupRequired = requiredFieldIdSet.has(block.id) || props.required === true;
+
+      const parts: string[] = [];
+      parts.push(`<div class="pb-form-field"${fieldStyleAttr}>`);
+      parts.push(`<label class="${labelClass}"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`);
+      parts.push(`<div class="${optionsClass}"${optionsStyleAttr}>`);
+      options.forEach((opt: { value: string; label: string }, index: number) => {
+        const optionRequiredAttr = isGroupRequired && index === 0 ? " required" : "";
+        parts.push(
+          `<label class="pb-form-option"${tokens.optionStyleAttr}><input type="radio" name="${escapeAttr(
+            name,
+          )}" value="${escapeAttr(opt.value)}"${optionRequiredAttr}${formAttr} /> <span>${escapeHtml(
+            opt.label,
+          )}</span></label>`,
+        );
+      });
+      parts.push("</div>");
+      parts.push("</div>");
+
+      return parts.join("");
+    }
+
+    return "";
+  };
+
+  const bodyParts: string[] = [];
+
+  if (rootBlocks.length > 0) {
+    bodyParts.push('<section class="pb-root"><div class="pb-root-inner">');
+    for (const block of rootBlocks) {
+      bodyParts.push(renderBlock(block));
+    }
+    bodyParts.push("</div></section>");
+  }
+
+  for (const section of sectionBlocks) {
+    const props = (section.props ?? {}) as SectionBlockProps;
+    const columns =
+      Array.isArray(props.columns) && props.columns.length > 0
+        ? props.columns
+        : [{ id: `${section.id}_col`, span: 12 }];
+
+    const tokens = computeSectionExportTokens(props);
+
+    const sectionStyleAttr =
+      tokens.sectionStyleParts.length > 0 ? ` style="${tokens.sectionStyleParts.join(";")}"` : "";
+    const innerWrapperStyleAttr =
+      tokens.innerWrapperStyleParts.length > 0 ? ` style="${tokens.innerWrapperStyleParts.join(";")}"` : "";
+    const columnsStyleAttr =
+      tokens.columnsStyleParts.length > 0 ? ` style="${tokens.columnsStyleParts.join(";")}"` : "";
+
+    bodyParts.push(
+      `<section class="${tokens.sectionClasses}"${sectionStyleAttr}>${tokens.backgroundVideoHtml}<div class="pb-section-inner"${innerWrapperStyleAttr}><div class="pb-section-columns"${columnsStyleAttr}>`,
+    );
+
+    for (const column of columns) {
+      const columnBlocks = blocks.filter(
+        (b) => b.sectionId === section.id && b.columnId === column.id,
+      );
+      bodyParts.push('<div class="pb-section-column">');
+      for (const block of columnBlocks) {
+        bodyParts.push(renderBlock(block));
+      }
+      bodyParts.push("</div>");
+    }
+
+    bodyParts.push("</div></div></section>");
+  }
+
+  const bodyContent = bodyParts.join("\n");
+
+  return `<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${pageTitle}</title>
+    <link rel="stylesheet" href="./builder.css" />${seoHeadHtml}${headExtra}
+  </head>
+  <body style="${bodyStyle}">
+    <main>
+      <div id="app-root" style="${canvasStyle}">
+${bodyContent}
+      </div>
+    </main>
+    <script src="./main.js"></script>${trackingHtml}
+  </body>
+</html>`;
+};
+
+export async function POST(request: Request) {
+  let body: ExportRequestBody;
+  try {
+    body = (await request.json()) as ExportRequestBody;
+  } catch {
+    return NextResponse.json({ message: "잘못된 JSON 요청입니다." }, { status: 400 });
+  }
+
+  const blocks = Array.isArray(body.blocks) ? body.blocks : [];
+  const projectConfig = body.projectConfig;
+
+  let html = buildStaticHtml(blocks, projectConfig);
+
+  const zip = new JSZip();
+
+  const imageIds = new Set<string>();
+  const imageRegex = /\/api\/image\/([^"'>\s)]+)/g;
+  let match: RegExpExecArray | null;
+  // eslint-disable-next-line no-cond-assign
+  while ((match = imageRegex.exec(html)) !== null) {
+    if (match[1]) {
+      imageIds.add(match[1]);
+    }
+  }
+
+  for (const id of imageIds) {
+    const filePath = path.join(UPLOAD_DIR, id);
+    try {
+      const bytes = await fs.readFile(filePath);
+      zip.file(`images/${id}`, bytes);
+
+      const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const srcRegex = new RegExp(`/api/image/${escapedId}`, "g");
+      html = html.replace(srcRegex, `./images/${id}`);
+    } catch {
+      // 업로드 디렉터리에 파일이 없는 경우에는 조용히 건너뛴다.
+    }
+  }
+
+  const videoIds = new Set<string>();
+  const videoRegex = /\/api\/video\/([^"'>\s]+)/g;
+  let videoMatch: RegExpExecArray | null;
+  // eslint-disable-next-line no-cond-assign
+  while ((videoMatch = videoRegex.exec(html)) !== null) {
+    if (videoMatch[1]) {
+      videoIds.add(videoMatch[1]);
+    }
+  }
+
+  for (const id of videoIds) {
+    const filePath = path.join(UPLOAD_DIR, id);
+    try {
+      const bytes = await fs.readFile(filePath);
+      zip.file(`videos/${id}`, bytes);
+
+      const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const srcRegex = new RegExp(`/api/video/${escapedId}`, "g");
+      html = html.replace(srcRegex, `./videos/${id}`);
+    } catch {
+      // 업로드 디렉터리에 파일이 없는 경우에는 조용히 건너뛴다.
+    }
+  }
+
+  zip.file("index.html", html);
+
+  try {
+    const cssContent = await fs.readFile(BUILDER_CSS_PATH, "utf8");
+    zip.file("builder.css", cssContent);
+  } catch {
+    // CSS 파일이 없어도 내보내기가 가능하도록 한다.
+    zip.file("builder.css", "/* builder.css 를 찾을 수 없습니다. */\n");
+  }
+
+  const mainJs = [
+    "(function(){",
+    "  function pbInitFormControllers(){",
+    "    var forms = document.querySelectorAll(\"form.pb-form-controller\");",
+    "    if (!forms || !forms.length) { return; }",
+    "    forms.forEach(function(form){",
+    "      form.addEventListener(\"submit\", function(event){",
+    "        if (!form) { return; }",
+    "        if (event && typeof event.preventDefault === 'function') { event.preventDefault(); }",
+    "        var formData = new FormData(form);",
+    "        var configInput = form.querySelector('input[name=\"__config\"]');",
+    "        var config = null;",
+    "        if (configInput && configInput.value) {",
+    "          try { config = JSON.parse(configInput.value); } catch (e) { config = null; }",
+    "        }",
+    "        var action = form.getAttribute('action') || '/api/forms/submit';",
+    "        fetch(action, { method: 'POST', body: formData })",
+    "          .then(function(res){ return res.json().catch(function(){ return {}; }); })",
+    "          .then(function(data){",
+    "            var ok = data && data.ok;",
+    "            var message = data && data.message;",
+    "            if (ok) {",
+    "              var success = message || (config && config.successMessage) || '성공적으로 전송되었습니다.';",
+    "              if (typeof alert === 'function') { alert(success); }",
+    "              try { form.reset(); } catch (e) {}",
+    "            } else {",
+    "              var errorMsg = message || (config && config.errorMessage) || '전송 중 오류가 발생했습니다.';",
+    "              if (typeof alert === 'function') { alert(errorMsg); }",
+    "            }",
+    "          })",
+    "          .catch(function(){",
+    "            var errorMsg = (config && config.errorMessage) || '전송 중 오류가 발생했습니다.';",
+    "            if (typeof alert === 'function') { alert(errorMsg); }",
+    "          });",
+    "      });",
+    "    });",
+    "  }",
+    "  if (typeof document !== 'undefined') {",
+    "    if (document.readyState === 'loading') {",
+    "      document.addEventListener('DOMContentLoaded', pbInitFormControllers);",
+    "    } else {",
+    "      pbInitFormControllers();",
+    "    }",
+    "  }",
+    "  console.log('Page Builder static export loaded');",
+    "})();",
+  ].join("\n");
+  zip.file("main.js", mainJs);
+
+  const zipArrayBuffer = await zip.generateAsync({ type: "arraybuffer" });
+
+  return new NextResponse(zipArrayBuffer, {
+    status: 200,
+    headers: {
+      "Content-Type": "application/zip",
+      "Content-Disposition": `attachment; filename=page-builder-export.zip`,
+    },
+  });
+}

src/app/api/forms/submit/route.ts

@@ -0,0 +1,262 @@
+import { NextResponse } from "next/server";
+import { PrismaClient } from "@prisma/client";
+import type { FormBlockProps, FormFieldConfig } from "@/features/editor/state/editorStore";
+import { encryptJson } from "@/features/auth/authCrypto";
+
+const prisma = new PrismaClient() as any;
+
+function buildSensitiveFieldNameSet(config: FormBlockProps | null): Set<string> {
+  const result = new Set<string>();
+  const fields: FormFieldConfig[] = Array.isArray(config?.fields) ? (config!.fields as FormFieldConfig[]) : [];
+
+  for (const field of fields) {
+    const name = (field.name ?? "").toLowerCase();
+    const label = (field.label ?? "").toLowerCase();
+    if (!name) continue;
+
+    const isEmail =
+      field.type === "email" ||
+      name.includes("email") ||
+      label.includes("email") ||
+      label.includes("이메일");
+
+    if (isEmail) {
+      result.add(field.name);
+      continue;
+    }
+
+    const isPhone =
+      name.includes("phone") ||
+      name.includes("tel") ||
+      name.includes("mobile") ||
+      label.includes("전화") ||
+      label.includes("연락처") ||
+      label.includes("휴대폰");
+
+    if (isPhone) {
+      result.add(field.name);
+      continue;
+    }
+
+    const isBirth =
+      name.includes("birth") ||
+      name.includes("birthday") ||
+      name.includes("dob") ||
+      label.includes("생년월일") ||
+      label.includes("생일");
+
+    if (isBirth) {
+      result.add(field.name);
+      continue;
+    }
+  }
+
+  return result;
+}
+
+async function persistFormSubmission(formData: FormData, config: FormBlockProps | null) {
+  const projectSlugRaw = formData.get("__projectSlug");
+  let projectSlug: string | null = null;
+
+  if (typeof projectSlugRaw === "string" && projectSlugRaw.trim() !== "") {
+    projectSlug = projectSlugRaw.trim();
+  } else if (config?.extraParams && typeof config.extraParams.projectSlug === "string") {
+    const v = config.extraParams.projectSlug.trim();
+    if (v !== "") {
+      projectSlug = v;
+    }
+  }
+
+  const sensitiveNames = buildSensitiveFieldNameSet(config);
+
+  formData.forEach((_, key) => {
+    if (key === "__config" || key === "__projectSlug") {
+      return;
+    }
+
+    const lower = key.toLowerCase();
+
+    const isEmailField =
+      lower.includes("email") ||
+      lower.includes("e-mail") ||
+      lower.includes("이메일");
+
+    const isPhoneField =
+      lower.includes("phone") ||
+      lower.includes("tel") ||
+      lower.includes("mobile") ||
+      lower.includes("전화") ||
+      lower.includes("연락처") ||
+      lower.includes("휴대폰");
+
+    const isBirthField =
+      lower.includes("birth") ||
+      lower.includes("birthday") ||
+      lower.includes("birthdate") ||
+      lower.includes("dob") ||
+      lower.includes("생년월일") ||
+      lower.includes("생일");
+
+    if (isEmailField || isPhoneField || isBirthField) {
+      sensitiveNames.add(key);
+    }
+  });
+  const payloadJson: Record<string, string> = {};
+  const sensitivePayload: Record<string, string> = {};
+
+  formData.forEach((value, key) => {
+    if (key === "__config" || key === "__projectSlug") {
+      return;
+    }
+
+    const strValue = String(value);
+
+    if (sensitiveNames.has(key)) {
+      sensitivePayload[key] = strValue;
+    } else {
+      payloadJson[key] = strValue;
+    }
+  });
+
+  let sensitiveEnc: string | null = null;
+  if (Object.keys(sensitivePayload).length > 0) {
+    sensitiveEnc = await encryptJson(sensitivePayload);
+  }
+
+  let projectId: string | null = null;
+  let userId: string | null = null;
+
+  if (projectSlug) {
+    const project = await prisma.project.findUnique({ where: { slug: projectSlug } });
+    if (project) {
+      projectId = project.id;
+      userId = project.userId ?? null;
+    }
+  }
+
+  await prisma.formSubmission.create({
+    data: {
+      projectSlug: projectSlug ?? "",
+      projectId,
+      userId,
+      payloadJson,
+      sensitiveEnc,
+      metaJson: null,
+    },
+  });
+}
+
+export async function POST(req: Request) {
+  const formData = await req.formData();
+
+  const name = formData.get("name");
+  const email = formData.get("email");
+  const message = formData.get("message");
+
+  const rawConfig = formData.get("__config");
+  let config: FormBlockProps | null = null;
+  if (typeof rawConfig === "string") {
+    try {
+      config = JSON.parse(rawConfig) as FormBlockProps;
+    } catch {
+      config = null;
+    }
+  }
+
+  const submitTarget = config?.submitTarget ?? "internal";
+  const successMessage = config?.successMessage;
+  const errorMessage = config?.errorMessage;
+
+  if (submitTarget === "internal") {
+    await persistFormSubmission(formData, config);
+    console.log("[forms/submit][internal]", { name, email, message });
+    return NextResponse.json({ ok: true, message: successMessage });
+  }
+
+  if (submitTarget === "both") {
+    await persistFormSubmission(formData, config);
+    console.log("[forms/submit][internal]", { name, email, message });
+  }
+
+  if (submitTarget === "webhook" || submitTarget === "both") {
+    const destinationUrl = config?.destinationUrl;
+    if (!destinationUrl) {
+      return NextResponse.json(
+        { ok: false, error: "destinationUrl_missing", message: errorMessage },
+        { status: 400 },
+      );
+    }
+
+    const payloadFormat = config?.payloadFormat ?? "form";
+
+    let body: string;
+    const headers: Record<string, string> = {
+      ...(config?.headers ?? {}),
+    };
+
+    if (payloadFormat === "json") {
+      const jsonPayload: Record<string, string> = {};
+      formData.forEach((value, key) => {
+        if (key !== "__config") {
+          jsonPayload[key] = String(value);
+        }
+      });
+
+      if (config?.extraParams) {
+        Object.entries(config.extraParams).forEach(([k, v]) => {
+          jsonPayload[k] = v;
+        });
+      }
+
+      headers["Content-Type"] = "application/json";
+      body = JSON.stringify(jsonPayload);
+    } else {
+      // 기본 동작: FormData -> x-www-form-urlencoded 로 변환 (많은 webhook/Apps Script가 이 형식을 사용)
+      const payload = new URLSearchParams();
+      formData.forEach((value, key) => {
+        if (key !== "__config") {
+          payload.append(key, String(value));
+        }
+      });
+
+      if (config?.extraParams) {
+        Object.entries(config.extraParams).forEach(([k, v]) => {
+          payload.append(k, v);
+        });
+      }
+
+      headers["Content-Type"] = "application/x-www-form-urlencoded";
+      body = payload.toString();
+    }
+
+    try {
+      const res = await fetch(destinationUrl, {
+        method: config?.method ?? "POST",
+        headers,
+        body,
+      });
+
+      if (!res.ok) {
+        console.error("[forms/submit][webhook] remote error", res.status, await res.text().catch(() => ""));
+        return NextResponse.json(
+          { ok: false, error: "webhook_failed", message: errorMessage },
+          { status: 502 },
+        );
+      }
+    } catch (error) {
+      console.error("[forms/submit][webhook] fetch error", error);
+      return NextResponse.json(
+        { ok: false, error: "webhook_exception", message: errorMessage },
+        { status: 500 },
+      );
+    }
+
+    console.log("[forms/submit][webhook] forwarded", { name, email, message, destinationUrl });
+    return NextResponse.json({ ok: true, message: successMessage });
+  }
+
+  // 그 외 알 수 없는 모드는 internal 과 동일하게 처리
+  console.warn("[forms/submit] unknown submitTarget, fallback to internal", submitTarget);
+  console.log("[forms/submit][internal]", { name, email, message });
+  return NextResponse.json({ ok: true, message: successMessage });
+}

src/app/api/image/[id]/route.ts

@@ -0,0 +1,93 @@
+import { NextResponse } from "next/server";
+import { promises as fs } from "fs";
+import path from "path";
+import { PrismaClient } from "@prisma/client";
+
+const UPLOAD_DIR = path.join(process.cwd(), "uploads");
+
+let prisma: PrismaClient | null = null;
+if (process.env.DATABASE_URL && process.env.DATABASE_URL.trim() !== "") {
+  try {
+    prisma = new PrismaClient();
+  } catch (error) {
+    // DB 가 준비되지 않은 환경에서는 mimeType 조회 없이 기본값만 사용한다.
+    console.error("PrismaClient 초기화 실패 - 기본 MIME 타입으로만 응답합니다.", error);
+    prisma = null;
+  }
+}
+
+export async function GET(request: Request) {
+  // Next.js 15 이후 params 가 Promise 로 전달되는 경고를 피하기 위해,
+  // 동적 세그먼트는 request.url 의 path 에서 직접 파싱한다.
+  let id: string | undefined;
+
+  try {
+    const url = new URL(request.url);
+    const segments = url.pathname.split("/").filter(Boolean);
+    // [..., "api", "image", ":id"] 형태를 기대한다.
+    const last = segments[segments.length - 1];
+    if (last && last !== "image") {
+      id = last;
+    }
+  } catch {
+    // URL 파싱 실패 시에는 그대로 둔다.
+  }
+
+  if (!id) {
+    return NextResponse.json({ message: "id 파라미터가 필요합니다." }, { status: 400 });
+  }
+
+  // Referer 기반으로 간단한 핫링크 방지: 동일 호스트에서 온 요청만 허용한다.
+  try {
+    const requestUrl = new URL(request.url);
+    const referer = request.headers.get("referer");
+
+    if (!referer) {
+      return NextResponse.json({ message: "이미지 접근이 허용되지 않습니다." }, { status: 403 });
+    }
+
+    const refererUrl = new URL(referer);
+    if (refererUrl.host !== requestUrl.host) {
+      return NextResponse.json({ message: "이미지 접근이 허용되지 않습니다." }, { status: 403 });
+    }
+  } catch (error) {
+    console.error("Referer 검사 중 오류", error);
+    return NextResponse.json({ message: "이미지 접근이 허용되지 않습니다." }, { status: 403 });
+  }
+
+  const filePath = path.join(UPLOAD_DIR, id);
+
+  try {
+    const bytes = await fs.readFile(filePath);
+
+    // 기본 MIME 타입은 png 로 두되, 가능하면 Asset 메타데이터에서 실제 타입을 읽어온다.
+    let mimeType = "image/png";
+    if (prisma) {
+      try {
+        const asset = await prisma.asset.findUnique({ where: { id } });
+        const meta: any = asset?.meta ?? null;
+        const candidate = typeof meta?.mimeType === "string" ? meta.mimeType.trim() : "";
+        if (candidate) {
+          mimeType = candidate;
+        }
+      } catch (error) {
+        console.error("이미지 메타데이터 조회 실패 - 기본 MIME 타입으로 응답합니다.", error);
+      }
+    }
+
+    return new NextResponse(bytes, {
+      status: 200,
+      headers: {
+        "Content-Type": mimeType,
+        "Cache-Control": "public, max-age=31536000, immutable",
+      },
+    });
+  } catch (error: any) {
+    if (error && typeof error === "object" && (error as any).code === "ENOENT") {
+      return NextResponse.json({ message: "이미지를 찾을 수 없습니다." }, { status: 404 });
+    }
+
+    console.error("이미지 파일 읽기 중 오류", error);
+    return NextResponse.json({ message: "이미지 로드 중 오류가 발생했습니다." }, { status: 500 });
+  }
+}

src/app/api/image/route.ts

@@ -0,0 +1,91 @@
+import { NextResponse } from "next/server";
+import { promises as fs } from "fs";
+import path from "path";
+import { randomUUID } from "crypto";
+import { PrismaClient } from "@prisma/client";
+
+// 업로드된 이미지 파일을 저장할 디렉터리 (프로젝트 루트 기준)
+const UPLOAD_DIR = path.join(process.cwd(), "uploads");
+
+let prisma: PrismaClient | null = null;
+if (process.env.DATABASE_URL && process.env.DATABASE_URL.trim() !== "") {
+  try {
+    prisma = new PrismaClient();
+  } catch (error) {
+    // DB 가 준비되지 않은 개발/테스트 환경에서도 업로드 자체는 동작할 수 있도록,
+    // Prisma 초기화 실패는 치명적 오류로 취급하지 않고 로그만 남긴다.
+    console.error("PrismaClient 초기화 실패 - 파일 시스템 전용 모드로 동작합니다.", error);
+    prisma = null;
+  }
+}
+
+export async function POST(request: Request) {
+  const formData = await request.formData();
+  const file = formData.get("file");
+
+  if (!file || typeof (file as any).arrayBuffer !== "function") {
+    return NextResponse.json({ message: "file 필드는 필수입니다." }, { status: 400 });
+  }
+
+  try {
+    await fs.mkdir(UPLOAD_DIR, { recursive: true });
+  } catch (error) {
+    console.error("업로드 디렉터리 생성 실패", error);
+    return NextResponse.json({ message: "업로드 디렉터리를 생성할 수 없습니다." }, { status: 500 });
+  }
+
+  try {
+    const arrayBuffer = await (file as any).arrayBuffer();
+    const bytes = new Uint8Array(arrayBuffer);
+    const id = randomUUID();
+
+    // 파일 경로는 uploads/<id> 형태로 저장한다.
+    const relativePath = path.join("uploads", id);
+    const filePath = path.join(process.cwd(), relativePath);
+
+    await fs.writeFile(filePath, bytes);
+
+    // 가능하다면 Asset 테이블에도 메타데이터를 남긴다.
+    if (prisma) {
+      try {
+        const project = await prisma.project.upsert({
+          where: { slug: "assets-global" },
+          update: {},
+          create: {
+            id: randomUUID(),
+            title: "Assets Global",
+            slug: "assets-global",
+            contentJson: [],
+          },
+        });
+
+        await prisma.asset.create({
+          data: {
+            id,
+            projectId: project.id,
+            kind: "image",
+            url: relativePath,
+            meta: {
+              sourceType: "uploaded",
+              originalName: (file as any).name ?? "upload",
+              mimeType: (file as any).type ?? "application/octet-stream",
+            },
+          },
+        });
+      } catch (error) {
+        console.error("이미지 Asset DB 저장 실패 - 파일 시스템만 사용합니다.", error);
+      }
+    }
+
+    return NextResponse.json(
+      {
+        id,
+        servedUrl: `/api/image/${id}`,
+      },
+      { status: 201 },
+    );
+  } catch (error) {
+    console.error("이미지 업로드 처리 중 오류", error);
+    return NextResponse.json({ message: "이미지 업로드 중 오류가 발생했습니다." }, { status: 500 });
+  }
+}

src/app/api/projects/[slug]/route.ts

@@ -1,24 +1,100 @@
 import { NextResponse } from "next/server";
-import { PrismaClient } from "@/generated/prisma/client";
+import { PrismaClient } from "@prisma/client";
+import { verifyAccessToken } from "@/features/auth/authCrypto";
 
 const prisma = new PrismaClient();
 
-interface Params {
-  params: {
-    slug: string;
+interface AuthUser {
+  id: string;
+  email: string;
+  tokenVersion: number;
+}
+
+function extractTokenFromCookieHeader(cookieHeader: string | null): string | null {
+  if (!cookieHeader) return null;
+
+  const parts = cookieHeader.split(";");
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith("pb_access=")) {
+      const value = trimmed.substring("pb_access=".length);
+      return decodeURIComponent(value);
+    }
+  }
+  return null;
+}
+
+async function getAuthUserFromRequest(request: Request): Promise<AuthUser | null> {
+  const cookieHeader = request.headers.get("cookie");
+  const token = extractTokenFromCookieHeader(cookieHeader);
+  if (!token) return null;
+
+  const payload = await verifyAccessToken(token);
+  if (!payload) return null;
+
+  return {
+    id: payload.sub,
+    email: payload.email,
+    tokenVersion: payload.tokenVersion,
   };
 }
 
-export async function GET(_request: Request, { params }: Params) {
-  const { slug } = params;
+export async function GET(
+  request: Request,
+  context: { params: { slug: string } | Promise<{ slug: string }> },
+) {
+  const authUser = await getAuthUserFromRequest(request);
+  if (!authUser) {
+    return NextResponse.json({ message: "프로젝트를 조회하려면 로그인이 필요합니다." }, { status: 401 });
+  }
+
+  const { slug } = await context.params;
 
   const project = await prisma.project.findUnique({
     where: { slug },
   });
 
-  if (!project) {
+  if (!project || (project.userId && project.userId !== authUser.id)) {
     return NextResponse.json({ message: "프로젝트를 찾을 수 없습니다." }, { status: 404 });
   }
 
   return NextResponse.json(project, { status: 200 });
 }
+
+export async function DELETE(
+  request: Request,
+  context: { params: { slug: string } | Promise<{ slug: string }> },
+) {
+  const authUser = await getAuthUserFromRequest(request);
+  if (!authUser) {
+    return NextResponse.json({ message: "프로젝트를 삭제하려면 로그인이 필요합니다." }, { status: 401 });
+  }
+
+  const { slug } = await context.params;
+
+  try {
+    const project = await prisma.project.findUnique({
+      where: { slug },
+    });
+
+    if (!project || (project.userId && project.userId !== authUser.id)) {
+      return NextResponse.json({ message: "프로젝트를 찾을 수 없습니다." }, { status: 404 });
+    }
+
+    await prisma.project.delete({
+      where: { slug },
+    });
+
+    return NextResponse.json({ message: "프로젝트가 삭제되었습니다." }, { status: 200 });
+  } catch (error: any) {
+    // Prisma NotFound 에러 코드(P2025)가 떨어지는 경우 404 로 매핑한다.
+    if (error?.code === "P2025") {
+      return NextResponse.json({ message: "프로젝트를 찾을 수 없습니다." }, { status: 404 });
+    }
+
+    return NextResponse.json(
+      { message: "프로젝트 삭제 중 오류가 발생했습니다.", error: error?.message },
+      { status: 500 },
+    );
+  }
+}

src/app/api/projects/[slug]/submissions/route.ts

@@ -0,0 +1,92 @@
+import { NextResponse } from "next/server";
+import { PrismaClient } from "@prisma/client";
+import { verifyAccessToken, decryptJson } from "@/features/auth/authCrypto";
+
+const prisma = new PrismaClient();
+
+interface AuthUser {
+  id: string;
+  email: string;
+  tokenVersion: number;
+}
+
+function extractTokenFromCookieHeader(cookieHeader: string | null): string | null {
+  if (!cookieHeader) return null;
+
+  const parts = cookieHeader.split(";");
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith("pb_access=")) {
+      const value = trimmed.substring("pb_access=".length);
+      return decodeURIComponent(value);
+    }
+  }
+  return null;
+}
+
+async function getAuthUserFromRequest(request: Request): Promise<AuthUser | null> {
+  const cookieHeader = request.headers.get("cookie");
+  const token = extractTokenFromCookieHeader(cookieHeader);
+  if (!token) return null;
+
+  const payload = await verifyAccessToken(token);
+  if (!payload) return null;
+
+  return {
+    id: payload.sub,
+    email: payload.email,
+    tokenVersion: payload.tokenVersion,
+  };
+}
+
+export async function GET(
+  request: Request,
+  context: { params: { slug: string } | Promise<{ slug: string }> },
+) {
+  const authUser = await getAuthUserFromRequest(request);
+  if (!authUser) {
+    return NextResponse.json({ message: "폼 제출 내역을 조회하려면 로그인이 필요합니다." }, { status: 401 });
+  }
+
+  const { slug } = await context.params;
+
+  const project = await prisma.project.findUnique({
+    where: { slug },
+  });
+
+  if (!project || (project.userId && project.userId !== authUser.id)) {
+    return NextResponse.json({ message: "프로젝트를 찾을 수 없습니다." }, { status: 404 });
+  }
+
+  const submissions = await prisma.formSubmission.findMany({
+    where: { projectId: project.id },
+    orderBy: { createdAt: "desc" },
+    take: 100,
+  });
+
+  const items = await Promise.all(
+    submissions.map(async (s: any) => {
+      const basePayload = (s.payloadJson ?? {}) as Record<string, unknown>;
+      let sensitive: Record<string, unknown> = {};
+
+      if (s.sensitiveEnc) {
+        try {
+          sensitive = (await decryptJson<Record<string, unknown>>(s.sensitiveEnc)) ?? {};
+        } catch {
+          sensitive = {};
+        }
+      }
+
+      const payload = { ...basePayload, ...sensitive };
+
+      return {
+        id: s.id,
+        createdAt: s.createdAt,
+        projectSlug: s.projectSlug,
+        payload,
+      };
+    }),
+  );
+
+  return NextResponse.json(items, { status: 200 });
+}

src/app/api/projects/route.ts

@@ -1,9 +1,82 @@
 import { NextResponse } from "next/server";
-import { PrismaClient } from "@/generated/prisma/client";
+import { PrismaClient } from "@prisma/client";
+import { verifyAccessToken } from "@/features/auth/authCrypto";
+import type { Block } from "@/features/editor/state/editorStore";
+import { cachePublicProject } from "@/features/projects/publicCache";
 
 const prisma = new PrismaClient();
 
+interface AuthUser {
+  id: string;
+  email: string;
+  tokenVersion: number;
+}
+
+function extractTokenFromCookieHeader(cookieHeader: string | null): string | null {
+  if (!cookieHeader) return null;
+
+  const parts = cookieHeader.split(";");
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith("pb_access=")) {
+      const value = trimmed.substring("pb_access=".length);
+      return decodeURIComponent(value);
+    }
+  }
+  return null;
+}
+
+async function getAuthUserFromRequest(request: Request): Promise<AuthUser | null> {
+  const cookieHeader = request.headers.get("cookie");
+  const token = extractTokenFromCookieHeader(cookieHeader);
+  if (!token) return null;
+
+  const payload = await verifyAccessToken(token);
+  if (!payload) return null;
+
+  return {
+    id: payload.sub,
+    email: payload.email,
+    tokenVersion: payload.tokenVersion,
+  };
+}
+
+export async function GET(request: Request) {
+  const authUser = await getAuthUserFromRequest(request);
+  if (!authUser) {
+    return NextResponse.json({ message: "프로젝트 목록을 조회하려면 로그인이 필요합니다." }, { status: 401 });
+  }
+
+  try {
+    const projects = await prisma.project.findMany({
+      where: { userId: authUser.id },
+      orderBy: { createdAt: "desc" },
+      take: 50,
+      select: {
+        id: true,
+        title: true,
+        slug: true,
+        status: true,
+        createdAt: true,
+        updatedAt: true,
+      },
+    });
+
+    return NextResponse.json(projects, { status: 200 });
+  } catch (error: any) {
+    return NextResponse.json(
+      { message: "프로젝트 목록을 가져오는 중 오류가 발생했습니다.", error: error?.message },
+      { status: 500 },
+    );
+  }
+}
+
 export async function POST(request: Request) {
+  const authUser = await getAuthUserFromRequest(request);
+  if (!authUser) {
+    return NextResponse.json({ message: "프로젝트를 저장하려면 로그인이 필요합니다." }, { status: 401 });
+  }
+
   const body = await request.json();
   const { title, slug, contentJson } = body;
 
@@ -12,14 +85,49 @@ export async function POST(request: Request) {
   }
 
   try {
-    const project = await prisma.project.create({
-      data: {
+    const existing = await prisma.project.findUnique({
+      where: { slug },
+    });
+
+    if (existing && existing.userId && existing.userId !== authUser.id) {
+      return NextResponse.json(
+        { message: "이미 다른 사용자가 사용 중인 프로젝트 주소입니다." },
+        { status: 409 },
+      );
+    }
+
+    const project = await prisma.project.upsert({
+      where: { slug },
+      update: {
+        title,
+        contentJson,
+      },
+      create: {
         title,
         slug,
         contentJson,
+        userId: authUser.id,
       },
     });
 
+    // 퍼블릭 슬러그 페이지(/p/[slug])가 DB 조회 없이도 최신 스냅샷을 바로 렌더링할 수 있도록
+    // 메모리 기반 캐시에 프로젝트 스냅샷을 저장해 둔다.
+    const rawContent = project.contentJson;
+    let contentBlocks: Block[] = [];
+    if (Array.isArray(rawContent)) {
+      contentBlocks = rawContent as unknown as Block[];
+    }
+
+    try {
+      cachePublicProject({
+        slug: project.slug,
+        title: project.title,
+        contentJson: contentBlocks,
+      });
+    } catch {
+      // 캐시 저장 실패는 퍼블릭 렌더링에만 영향을 주므로, API 응답 자체는 정상적으로 계속 진행한다.
+    }
+
     return NextResponse.json(project, { status: 201 });
   } catch (error: any) {
     return NextResponse.json(

src/app/api/projects/submissions/route.ts

@@ -0,0 +1,97 @@
+import { NextResponse } from "next/server";
+import { PrismaClient } from "@prisma/client";
+import { verifyAccessToken, decryptJson } from "@/features/auth/authCrypto";
+
+const prisma = new PrismaClient();
+
+interface AuthUser {
+  id: string;
+  email: string;
+  tokenVersion: number;
+}
+
+// 공통: pb_access 쿠키에서 JWT 토큰을 추출한다.
+function extractTokenFromCookieHeader(cookieHeader: string | null): string | null {
+  if (!cookieHeader) return null;
+
+  const parts = cookieHeader.split(";");
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith("pb_access=")) {
+      const value = trimmed.substring("pb_access=".length);
+      return decodeURIComponent(value);
+    }
+  }
+  return null;
+}
+
+// 공통: Request 헤더의 쿠키에서 인증된 유저 정보를 복원한다.
+async function getAuthUserFromRequest(request: Request): Promise<AuthUser | null> {
+  const cookieHeader = request.headers.get("cookie");
+  const token = extractTokenFromCookieHeader(cookieHeader);
+  if (!token) return null;
+
+  const payload = await verifyAccessToken(token);
+  if (!payload) return null;
+
+  return {
+    id: payload.sub,
+    email: payload.email,
+    tokenVersion: payload.tokenVersion,
+  };
+}
+
+// GET /api/projects/submissions
+// - 로그인한 사용자의 모든 프로젝트에 대한 폼 제출 내역을 최신순으로 최대 100건 반환한다.
+// - FormSubmission.userId 가 현재 사용자와 일치하는 레코드만 포함한다.
+// - payloadJson 과 sensitiveEnc 복호화 결과를 병합해 payload 로 반환한다.
+export async function GET(request: Request) {
+  const authUser = await getAuthUserFromRequest(request);
+  if (!authUser) {
+    return NextResponse.json(
+      { message: "폼 제출 내역을 조회하려면 로그인이 필요합니다." },
+      { status: 401 },
+    );
+  }
+
+  const submissions = await prisma.formSubmission.findMany({
+    where: { userId: authUser.id },
+    orderBy: { createdAt: "desc" },
+    take: 100,
+    include: {
+      project: {
+        select: {
+          title: true,
+          slug: true,
+        },
+      },
+    },
+  });
+
+  const items = await Promise.all(
+    submissions.map(async (s: any) => {
+      const basePayload = (s.payloadJson ?? {}) as Record<string, unknown>;
+      let sensitive: Record<string, unknown> = {};
+
+      if (s.sensitiveEnc) {
+        try {
+          sensitive = (await decryptJson<Record<string, unknown>>(s.sensitiveEnc)) ?? {};
+        } catch {
+          sensitive = {};
+        }
+      }
+
+      const payload = { ...basePayload, ...sensitive };
+
+      return {
+        id: s.id,
+        createdAt: s.createdAt,
+        projectSlug: s.projectSlug,
+        projectTitle: s.project?.title ?? null,
+        payload,
+      };
+    }),
+  );
+
+  return NextResponse.json(items, { status: 200 });
+}

src/app/api/video/[id]/route.ts

@@ -0,0 +1,105 @@
+import { NextResponse } from "next/server";
+import { promises as fs } from "fs";
+import path from "path";
+import { PrismaClient } from "@prisma/client";
+
+const UPLOAD_DIR = path.join(process.cwd(), "uploads");
+
+let prisma: PrismaClient | null = null;
+try {
+  prisma = new PrismaClient();
+} catch (error) {
+  // DB 가 준비되지 않은 환경에서는 mimeType 조회 없이 기본값만 사용한다.
+  console.error("PrismaClient 초기화 실패 - 비디오 MIME 타입은 기본값으로만 응답합니다.", error);
+  prisma = null;
+}
+
+interface Params {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+export async function GET(request: Request, ctx: Params) {
+  // Next.js 가 params 를 항상 보장하지 않는 상황을 대비해, URL 경로에서 id 를 보완적으로 파싱한다.
+  let id: string | undefined;
+
+  try {
+    const resolved = await ctx.params;
+    id = resolved?.id;
+  } catch {
+    id = undefined;
+  }
+
+  if (!id) {
+    try {
+      const url = new URL(request.url);
+      const segments = url.pathname.split("/").filter(Boolean);
+      // [..., "api", "video", ":id"] 형태를 기대한다.
+      const last = segments[segments.length - 1];
+      if (last && last !== "video") {
+        id = last;
+      }
+    } catch {
+      // URL 파싱 실패 시에는 그대로 둔다.
+    }
+  }
+
+  if (!id) {
+    return NextResponse.json({ message: "id 파라미터가 필요합니다." }, { status: 400 });
+  }
+
+  // Referer 기반으로 간단한 핫링크 방지: 동일 호스트에서 온 요청만 허용한다.
+  try {
+    const requestUrl = new URL(request.url);
+    const referer = request.headers.get("referer");
+
+    if (!referer) {
+      return NextResponse.json({ message: "비디오 접근이 허용되지 않습니다." }, { status: 403 });
+    }
+
+    const refererUrl = new URL(referer);
+    if (refererUrl.host !== requestUrl.host) {
+      return NextResponse.json({ message: "비디오 접근이 허용되지 않습니다." }, { status: 403 });
+    }
+  } catch (error) {
+    console.error("비디오 Referer 검사 중 오류", error);
+    return NextResponse.json({ message: "비디오 접근이 허용되지 않습니다." }, { status: 403 });
+  }
+
+  const filePath = path.join(UPLOAD_DIR, id);
+
+  try {
+    const bytes = await fs.readFile(filePath);
+
+    // 기본 MIME 타입은 mp4 로 두되, 가능하면 Asset 메타데이터에서 실제 타입을 읽어온다.
+    let mimeType = "video/mp4";
+    if (prisma) {
+      try {
+        const asset = await prisma.asset.findUnique({ where: { id } });
+        const meta: any = asset?.meta ?? null;
+        const candidate = typeof meta?.mimeType === "string" ? meta.mimeType.trim() : "";
+        if (candidate) {
+          mimeType = candidate;
+        }
+      } catch (error) {
+        console.error("비디오 메타데이터 조회 실패 - 기본 MIME 타입으로 응답합니다.", error);
+      }
+    }
+
+    return new NextResponse(bytes, {
+      status: 200,
+      headers: {
+        "Content-Type": mimeType,
+        "Cache-Control": "public, max-age=31536000, immutable",
+      },
+    });
+  } catch (error: any) {
+    if (error && typeof error === "object" && (error as any).code === "ENOENT") {
+      return NextResponse.json({ message: "비디오를 찾을 수 없습니다." }, { status: 404 });
+    }
+
+    console.error("비디오 파일 읽기 중 오류", error);
+    return NextResponse.json({ message: "비디오 로드 중 오류가 발생했습니다." }, { status: 500 });
+  }
+}

src/app/api/video/route.ts

@@ -0,0 +1,89 @@
+import { NextResponse } from "next/server";
+import { promises as fs } from "fs";
+import path from "path";
+import { randomUUID } from "crypto";
+import { PrismaClient } from "@prisma/client";
+
+// 업로드된 비디오 파일을 저장할 디렉터리 (프로젝트 루트 기준)
+const UPLOAD_DIR = path.join(process.cwd(), "uploads");
+
+let prisma: PrismaClient | null = null;
+try {
+  prisma = new PrismaClient();
+} catch (error) {
+  // DB 가 준비되지 않은 개발/테스트 환경에서도 업로드 자체는 동작할 수 있도록,
+  // Prisma 초기화 실패는 치명적 오류로 취급하지 않고 로그만 남긴다.
+  console.error("PrismaClient 초기화 실패 - 비디오 업로드는 파일 시스템 전용 모드로 동작합니다.", error);
+  prisma = null;
+}
+
+export async function POST(request: Request) {
+  const formData = await request.formData();
+  const file = formData.get("file");
+
+  if (!file || typeof (file as any).arrayBuffer !== "function") {
+    return NextResponse.json({ message: "file 필드는 필수입니다." }, { status: 400 });
+  }
+
+  try {
+    await fs.mkdir(UPLOAD_DIR, { recursive: true });
+  } catch (error) {
+    console.error("비디오 업로드 디렉터리 생성 실패", error);
+    return NextResponse.json({ message: "업로드 디렉터리를 생성할 수 없습니다." }, { status: 500 });
+  }
+
+  try {
+    const arrayBuffer = await (file as any).arrayBuffer();
+    const bytes = new Uint8Array(arrayBuffer);
+    const id = randomUUID();
+
+    // 파일 경로는 uploads/<id> 형태로 저장한다.
+    const relativePath = path.join("uploads", id);
+    const filePath = path.join(process.cwd(), relativePath);
+
+    await fs.writeFile(filePath, bytes);
+
+    // 가능하다면 Asset 테이블에도 메타데이터를 남긴다.
+    if (prisma) {
+      try {
+        const project = await prisma.project.upsert({
+          where: { slug: "assets-global" },
+          update: {},
+          create: {
+            id: randomUUID(),
+            title: "Assets Global",
+            slug: "assets-global",
+            contentJson: [],
+          },
+        });
+
+        await prisma.asset.create({
+          data: {
+            id,
+            projectId: project.id,
+            kind: "video",
+            url: relativePath,
+            meta: {
+              sourceType: "uploaded",
+              originalName: (file as any).name ?? "upload",
+              mimeType: (file as any).type ?? "application/octet-stream",
+            },
+          },
+        });
+      } catch (error) {
+        console.error("비디오 Asset DB 저장 실패 - 파일 시스템만 사용합니다.", error);
+      }
+    }
+
+    return NextResponse.json(
+      {
+        id,
+        servedUrl: `/api/video/${id}`,
+      },
+      { status: 201 },
+    );
+  } catch (error) {
+    console.error("비디오 업로드 처리 중 오류", error);
+    return NextResponse.json({ message: "비디오 업로드 중 오류가 발생했습니다." }, { status: 500 });
+  }
+}

src/app/editor/EditorCanvas.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import type { CSSProperties, ReactNode } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  type DragEndEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { rectIntersection } from "@dnd-kit/core";
+
+import type { Block, ButtonBlockProps, ImageBlockProps, ProjectConfig, TextBlockProps } from "@/features/editor/state/editorStore";
+
+interface EditorCanvasProps {
+  blocks: Block[];
+  rootBlocks: Block[];
+  selectedBlockId: string | null;
+  editingBlockId: string | null;
+  editingText: string;
+  activeDragId: string | null;
+  sensors: any;
+  onCanvasEmptyClick: () => void;
+  renderBlocks: (targetBlocks: Block[]) => ReactNode;
+  handleDragStart: (event: DragStartEvent) => void;
+  handleDragEnd: (event: DragEndEvent) => void;
+  handleDragCancel: () => void;
+  projectConfig: ProjectConfig;
+}
+
+export function EditorCanvas(props: EditorCanvasProps) {
+  const {
+    blocks,
+    rootBlocks,
+    activeDragId,
+    sensors,
+    onCanvasEmptyClick,
+    renderBlocks,
+    handleDragStart,
+    handleDragEnd,
+    handleDragCancel,
+    projectConfig,
+  } = props;
+
+  const canvasOuterStyle: CSSProperties = {};
+  const canvasInnerStyle: CSSProperties = {};
+  const preset = projectConfig.canvasPreset ?? "full";
+  const widthPx =
+    typeof projectConfig.canvasWidthPx === "number" && projectConfig.canvasWidthPx > 0
+      ? projectConfig.canvasWidthPx
+      : null;
+
+  if (widthPx != null) {
+    canvasInnerStyle.maxWidth = `${widthPx}px`;
+  } else if (preset === "mobile") {
+    canvasInnerStyle.maxWidth = "390px";
+  } else if (preset === "tablet") {
+    canvasInnerStyle.maxWidth = "768px";
+  } else if (preset === "desktop") {
+    canvasInnerStyle.maxWidth = "1200px";
+  }
+
+  if (projectConfig.bodyBgColorHex && projectConfig.bodyBgColorHex.trim()) {
+    canvasOuterStyle.backgroundColor = projectConfig.bodyBgColorHex;
+  }
+
+  if (projectConfig.canvasBgColorHex && projectConfig.canvasBgColorHex.trim()) {
+    canvasInnerStyle.backgroundColor = projectConfig.canvasBgColorHex;
+  }
+
+  return (
+    <div
+      className="flex-1 p-4 flex flex-col gap-2 text-sm text-slate-200 border-r border-slate-800 overflow-auto pb-scroll"
+      data-testid="editor-canvas"
+      style={canvasOuterStyle}
+      onClick={(event) => {
+        if (event.target === event.currentTarget) {
+          onCanvasEmptyClick();
+        }
+      }}
+    >
+      <div
+        data-testid="editor-canvas-inner"
+        className="mx-auto w-full flex flex-col gap-2"
+        style={canvasInnerStyle}
+      >
+        {blocks.length === 0 ? (
+          <div className="flex-1 flex items-center justify-center text-slate-500 text-xs">
+            왼쪽에서 "텍스트" 버튼을 눌러 블록을 추가해 보세요.
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={rectIntersection}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+            onDragCancel={handleDragCancel}
+          >
+            <SortableContext
+              items={rootBlocks.map((b) => b.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              {renderBlocks(rootBlocks)}
+            </SortableContext>
+            <DragOverlay>
+              {activeDragId && (
+                <DragPreview block={blocks.find((b) => b.id === activeDragId) ?? null} />
+              )}
+            </DragOverlay>
+          </DndContext>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface DragPreviewProps {
+  block: Block | null;
+}
+
+function DragPreview({ block }: DragPreviewProps) {
+  if (!block) return null;
+
+  return (
+    <div className="pointer-events-none rounded border border-sky-500 bg-slate-900/80 px-3 py-2 text-xs text-slate-100 shadow-lg opacity-90 min-w-[160px] max-w-[260px]">
+      <div className="text-[10px] uppercase tracking-wide text-sky-300 mb-1">
+        {block.type === "text"
+          ? "Text"
+          : block.type === "button"
+          ? "Button"
+          : block.type === "image"
+          ? "Image"
+          : block.type === "divider"
+          ? "Divider"
+          : block.type === "list"
+          ? "List"
+          : "Section"}
+      </div>
+      <div className="truncate">
+        {block.type === "text"
+          ? (block.props as TextBlockProps).text || "텍스트 블록"
+          : block.type === "button"
+          ? (block.props as ButtonBlockProps).label || "버튼 블록"
+          : block.type === "image"
+          ? (block.props as ImageBlockProps).alt || "이미지 블록"
+          : block.type === "list"
+          ? "리스트 블록"
+          : block.type === "divider"
+          ? "구분선 블록"
+          : "섹션 블록"}
+      </div>
+    </div>
+  );
+}

src/app/editor/forms/FormCheckboxPropertiesPanel.tsx

@@ -0,0 +1,660 @@
+"use client";
+
+import type { Block, FormCheckboxBlockProps } from "@/features/editor/state/editorStore";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+
+interface FormCheckboxPropertiesPanelProps {
+  block: Block;
+  selectedBlockId: string | null;
+  updateBlock: (id: string, partial: any) => void;
+}
+
+export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBlock }: FormCheckboxPropertiesPanelProps) {
+  if (!selectedBlockId || block.id !== selectedBlockId) return null;
+
+  const checkboxProps = block.props as FormCheckboxBlockProps;
+  const groupLabelDisplay = checkboxProps.groupLabelDisplay ?? "visible";
+
+  return (
+    <div className="space-y-3 text-xs">
+      <h3 className="text-[11px] font-semibold text-slate-200">체크박스 필드</h3>
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">그룹 타이틀 타입</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={checkboxProps.groupLabelMode ?? "text"}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              groupLabelMode: e.target.value,
+            } as any)
+          }
+        >
+          <option value="text">텍스트</option>
+          <option value="image">이미지</option>
+        </select>
+      </label>
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">그룹 타이틀 표시 방식</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={groupLabelDisplay}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              groupLabelDisplay: e.target.value,
+            } as any)
+          }
+        >
+          <option value="visible">표시 (기본)</option>
+          <option value="hidden">숨김</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (
+        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+          <span>레이아웃</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={checkboxProps.labelLayout ?? "stacked"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                labelLayout: e.target.value,
+              } as any)
+            }
+          >
+            <option value="stacked">세로 (기본)</option>
+            <option value="inline">가로 (인라인)</option>
+          </select>
+        </label>
+      )}
+
+      <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+        <span>옵션 레이아웃</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={checkboxProps.optionLayout ?? "stacked"}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              optionLayout: e.target.value,
+            } as any)
+          }
+        >
+          <option value="stacked">세로 (기본)</option>
+          <option value="inline">가로 (인라인)</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (checkboxProps.labelLayout ?? "stacked") === "inline" && (
+        <NumericPropertyControl
+          label="라벨/필드 간격 (px)"
+          unitLabel="(px)"
+          value={typeof checkboxProps.labelGapPx === "number" ? checkboxProps.labelGapPx : 8}
+          min={0}
+          max={80}
+          step={2}
+          presets={[
+            { id: "tight", label: "타이트", value: 4 },
+            { id: "normal", label: "보통", value: 8 },
+            { id: "relaxed", label: "느슨", value: 12 },
+            { id: "extra", label: "넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              labelGapPx: v,
+            } as any)
+          }
+        />
+      )}
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">그룹 타이틀</span>
+        <input
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+          value={checkboxProps.groupLabel ?? ""}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              groupLabel: e.target.value,
+            } as any)
+          }
+        />
+      </label>
+
+      {checkboxProps.groupLabelMode === "image" && (() => {
+        const source: "url" | "upload" =
+          checkboxProps.groupLabelImageSource ??
+          (checkboxProps.groupLabelImageUrl && checkboxProps.groupLabelImageUrl.startsWith("/api/image/")
+            ? "upload"
+            : "url");
+
+        return (
+          <div className="space-y-1">
+            <label className="flex flex-col gap-1">
+              <span className="text-slate-400">그룹 타이틀 이미지 소스</span>
+              <select
+                className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                value={source}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    groupLabelImageSource: e.target.value,
+                  } as any)
+                }
+              >
+                <option value="url">URL</option>
+                <option value="upload">파일 업로드</option>
+              </select>
+            </label>
+
+            {source === "url" && (
+              <label className="flex flex-col gap-1">
+                <span className="text-slate-400">그룹 타이틀 이미지 URL</span>
+                <input
+                  className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                  value={checkboxProps.groupLabelImageUrl ?? ""}
+                  onChange={(e) =>
+                    updateBlock(selectedBlockId, {
+                      groupLabelImageUrl: e.target.value,
+                    } as any)
+                  }
+                />
+              </label>
+            )}
+
+            {source === "upload" && (
+              <label className="flex flex-col gap-1">
+                <span className="text-slate-400">그룹 타이틀 이미지 파일 업로드</span>
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+                  aria-label="그룹 타이틀 이미지 파일 업로드"
+                  onChange={async (event) => {
+                    const file = event.target.files?.[0];
+                    if (!file) return;
+
+                    try {
+                      const formData = new FormData();
+                      formData.append("file", file);
+
+                      const response = await fetch("/api/image", {
+                        method: "POST",
+                        body: formData,
+                      });
+
+                      if (!response.ok) {
+                        console.error("체크박스 그룹 라벨 이미지 업로드 실패", await response.text());
+                        return;
+                      }
+
+                      const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                      const servedUrl = data.servedUrl ?? `/api/image/${data.id}`;
+
+                      updateBlock(selectedBlockId, {
+                        groupLabelImageUrl: servedUrl,
+                        groupLabelImageSource: "upload",
+                      } as any);
+                    } catch (error) {
+                      console.error("체크박스 그룹 라벨 이미지 업로드 중 오류", error);
+                    } finally {
+                      event.target.value = "";
+                    }
+                  }}
+                />
+              </label>
+            )}
+          </div>
+        );
+      })()}
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">전송 키</span>
+        <input
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+          value={checkboxProps.formFieldName ?? ""}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              formFieldName: e.target.value,
+            } as any)
+          }
+        />
+      </label>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span className="text-slate-400">옵션</span>
+          <button
+            type="button"
+            className="rounded border border-slate-700 bg-slate-900 px-2 py-0.5 text-[10px] text-slate-200 hover:bg-slate-800"
+            onClick={() => {
+              const next = Array.isArray((checkboxProps as any).options)
+                ? [...(checkboxProps as any).options]
+                : [];
+              next.push({
+                label: "새 옵션",
+                value: `option_${next.length + 1}`,
+              });
+              updateBlock(selectedBlockId, {
+                options: next,
+              } as any);
+            }}
+          >
+            옵션 추가
+          </button>
+        </div>
+        <div className="space-y-2">
+          <label className="flex flex-col gap-1">
+            <span className="text-slate-400">옵션 이미지 소스</span>
+            <select
+              className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+              value={(() => {
+                if (checkboxProps.optionImageSource) return checkboxProps.optionImageSource;
+                const first = (((checkboxProps as any).options ?? []) as any[])[0];
+                if (first?.labelImageUrl && first.labelImageUrl.startsWith("/api/image/")) return "upload";
+                return "url";
+              })()}
+              onChange={(e) =>
+                updateBlock(selectedBlockId, {
+                  optionImageSource: e.target.value,
+                } as any)
+              }
+            >
+              <option value="url">URL</option>
+              <option value="upload">파일 업로드</option>
+            </select>
+          </label>
+
+          {(((checkboxProps as any).options ?? []) as any[]).map((opt, index) => (
+            <div key={opt.value ?? index} className="space-y-1 rounded border border-slate-800 p-2">
+              <div className="flex items-center gap-1">
+                <input
+                  className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                  placeholder="라벨"
+                  value={opt.label ?? ""}
+                  onChange={(e) => {
+                    const next = [...(((checkboxProps as any).options ?? []) as any[])];
+                    next[index] = {
+                      ...next[index],
+                      label: e.target.value,
+                    };
+                    updateBlock(selectedBlockId, {
+                      options: next,
+                    } as any);
+                  }}
+                />
+                <input
+                  className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                  placeholder="값(value)"
+                  value={opt.value ?? ""}
+                  onChange={(e) => {
+                    const next = [...(((checkboxProps as any).options ?? []) as any[])];
+                    next[index] = {
+                      ...next[index],
+                      value: e.target.value,
+                    };
+                    updateBlock(selectedBlockId, {
+                      options: next,
+                    } as any);
+                  }}
+                />
+                <button
+                  type="button"
+                  className="h-7 w-7 rounded border border-slate-700 bg-slate-950 text-[10px] text-slate-300 hover:bg-red-900/60 hover:border-red-700"
+                  onClick={() => {
+                    const next = (((checkboxProps as any).options ?? []) as any[]).filter((_, i) => i !== index);
+                    updateBlock(selectedBlockId, {
+                      options: next,
+                    } as any);
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+              <div className="flex flex-col gap-1">
+                {(() => {
+                  const source: "url" | "upload" =
+                    checkboxProps.optionImageSource ??
+                    (opt.labelImageUrl && opt.labelImageUrl.startsWith("/api/image/") ? "upload" : "url");
+
+                  return (
+                    <>
+                      {source === "url" && (
+                        <input
+                          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                          placeholder="옵션 이미지 URL (선택)"
+                          value={opt.labelImageUrl ?? ""}
+                          onChange={(e) => {
+                            const next = [...(((checkboxProps as any).options ?? []) as any[])];
+                            next[index] = {
+                              ...next[index],
+                              labelImageUrl: e.target.value,
+                            };
+                            updateBlock(selectedBlockId, {
+                              options: next,
+                            } as any);
+                          }}
+                        />
+                      )}
+                      {source === "upload" && (
+                        <label className="flex flex-col gap-1">
+                          <span className="text-slate-400">옵션 이미지 파일 업로드</span>
+                          <input
+                            type="file"
+                            accept="image/*"
+                            className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+                            aria-label="옵션 이미지 파일 업로드"
+                            onChange={async (event) => {
+                              const file = event.target.files?.[0];
+                              if (!file) return;
+
+                              try {
+                                const formData = new FormData();
+                                formData.append("file", file);
+
+                                const response = await fetch("/api/image", {
+                                  method: "POST",
+                                  body: formData,
+                                });
+
+                                if (!response.ok) {
+                                  console.error("체크박스 옵션 라벨 이미지 업로드 실패", await response.text());
+                                  return;
+                                }
+
+                                const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                                const servedUrl = data.servedUrl ?? `/api/image/${data.id}`;
+
+                                const next = [...(((checkboxProps as any).options ?? []) as any[])];
+                                next[index] = {
+                                  ...next[index],
+                                  labelImageUrl: servedUrl,
+                                };
+
+                                updateBlock(selectedBlockId, {
+                                  options: next,
+                                  optionImageSource: "upload",
+                                } as any);
+                              } catch (error) {
+                                console.error("체크박스 옵션 라벨 이미지 업로드 중 오류", error);
+                              } finally {
+                                event.target.value = "";
+                              }
+                            }}
+                          />
+                        </label>
+                      )}
+                    </>
+                  );
+                })()}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <label className="inline-flex items-center gap-2">
+        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
+      </label>
+
+      <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
+        <h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>
+        {/* px 기반 체크박스 타이포 입력값을 노출하여 em 스케일 변환을 위한 근거를 남긴다 */}
+        <NumericPropertyControl
+          label="체크박스 텍스트 크기 (px)"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = checkboxProps.fontSizeCustom ?? "";
+            const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            return 14;
+          })()}
+          min={8}
+          max={40}
+          step={1}
+          presets={[
+            { id: "xs", label: "XS", value: 12 },
+            { id: "sm", label: "S", value: 14 },
+            { id: "md", label: "M", value: 16 },
+            { id: "lg", label: "L", value: 18 },
+            { id: "xl", label: "XL", value: 20 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              fontSizeCustom: `${v}px`,
+            } as any);
+          }}
+        />
+        {/* 줄간격 px 입력값을 노출해 preview em 변환과 TDD 케이스를 연동한다 */}
+        <NumericPropertyControl
+          label="체크박스 줄간격 (px)"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = checkboxProps.lineHeightCustom ?? "";
+            const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            return 20;
+          })()}
+          min={8}
+          max={60}
+          step={1}
+          presets={[
+            { id: "tight", label: "타이트", value: 18 },
+            { id: "normal", label: "보통", value: 24 },
+            { id: "loose", label: "루즈", value: 32 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              lineHeightCustom: `${v}px`,
+            } as any);
+          }}
+        />
+        {/* 자간 px 입력을 통한 폼 체크박스 미세 조정값을 노출 */}
+        <NumericPropertyControl
+          label="체크박스 자간 (px)"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = checkboxProps.letterSpacingCustom ?? "";
+            const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            return 0;
+          })()}
+          min={-10}
+          max={20}
+          step={0.5}
+          presets={[
+            { id: "tight", label: "좁게", value: -1 },
+            { id: "normal", label: "보통", value: 0 },
+            { id: "wide", label: "넓게", value: 2 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              letterSpacingCustom: `${v}px`,
+            } as any);
+          }}
+        />
+        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+          <span>필드 너비</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={checkboxProps.widthMode ?? "full"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                widthMode: e.target.value,
+              } as any)
+            }
+          >
+            <option value="auto">자동</option>
+            <option value="full">전체 폭</option>
+            <option value="fixed">고정 값</option>
+          </select>
+        </label>
+        {(checkboxProps.widthMode ?? "full") === "fixed" && (
+          <NumericPropertyControl
+            label="필드 고정 너비"
+            unitLabel="(px)"
+            value={checkboxProps.widthPx ?? 240}
+            min={80}
+            max={800}
+            step={10}
+            presets={[
+              { id: "sm", label: "작게", value: 200 },
+              { id: "md", label: "보통", value: 280 },
+              { id: "lg", label: "넓게", value: 360 },
+            ]}
+            onChangeValue={(v) => {
+              updateBlock(selectedBlockId, {
+                widthPx: v,
+              } as any);
+            }}
+          />
+        )}
+        <NumericPropertyControl
+          label="체크박스 가로 패딩 (px)"
+          unitLabel="(px)"
+          value={typeof checkboxProps.paddingX === "number" ? checkboxProps.paddingX : 12}
+          min={0}
+          max={60}
+          step={2}
+          presets={[
+            { id: "xs", label: "아주 얇게", value: 6 },
+            { id: "sm", label: "얇게", value: 10 },
+            { id: "md", label: "보통", value: 12 },
+            { id: "lg", label: "넓게", value: 16 },
+            { id: "xl", label: "아주 넓게", value: 20 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              paddingX: v,
+            } as any)
+          }
+        />
+        <NumericPropertyControl
+          label="체크박스 세로 패딩 (px)"
+          unitLabel="(px)"
+          value={typeof checkboxProps.paddingY === "number" ? checkboxProps.paddingY : 10}
+          min={0}
+          max={40}
+          step={1}
+          presets={[
+            { id: "xs", label: "아주 얇게", value: 6 },
+            { id: "sm", label: "얇게", value: 8 },
+            { id: "md", label: "보통", value: 10 },
+            { id: "lg", label: "넓게", value: 12 },
+            { id: "xl", label: "아주 넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              paddingY: v,
+            } as any)
+          }
+        />
+        <NumericPropertyControl
+          label="체크박스 옵션 간격 (px)"
+          unitLabel="(px)"
+          value={typeof checkboxProps.optionGapPx === "number" ? checkboxProps.optionGapPx : 4}
+          min={0}
+          max={40}
+          step={1}
+          presets={[
+            { id: "tight", label: "타이트", value: 2 },
+            { id: "normal", label: "보통", value: 4 },
+            { id: "relaxed", label: "느슨", value: 8 },
+            { id: "extra", label: "넓게", value: 12 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              optionGapPx: v,
+            } as any)
+          }
+        />
+        <ColorPickerField
+          label="텍스트 색상"
+          ariaLabelColorInput="체크박스 텍스트 색상 피커"
+          ariaLabelHexInput="체크박스 텍스트 색상 HEX"
+          value={
+            checkboxProps.textColorCustom && checkboxProps.textColorCustom.trim() !== ""
+              ? checkboxProps.textColorCustom
+              : "#f9fafb"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              textColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              textColorCustom: item.color,
+            } as any);
+          }}
+        />
+        <ColorPickerField
+          label="배경 색상"
+          ariaLabelColorInput="체크박스 배경 색상 피커"
+          ariaLabelHexInput="체크박스 배경 색상 HEX"
+          value={
+            checkboxProps.fillColorCustom && checkboxProps.fillColorCustom.trim() !== ""
+              ? checkboxProps.fillColorCustom
+              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              fillColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              fillColorCustom: item.color,
+            } as any);
+          }}
+        />
+        <ColorPickerField
+          label="테두리 색상"
+          ariaLabelColorInput="체크박스 테두리 색상 피커"
+          ariaLabelHexInput="체크박스 테두리 색상 HEX"
+          value={
+            checkboxProps.strokeColorCustom && checkboxProps.strokeColorCustom.trim() !== ""
+              ? checkboxProps.strokeColorCustom
+              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              strokeColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              strokeColorCustom: item.color,
+            } as any);
+          }}
+        />
+        <NumericPropertyControl
+          label="필드 모서리 둥글기"
+          value={(() => {
+            const r = checkboxProps.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>
+    </div>
+  );
+}

src/app/editor/forms/FormControllerPanel.tsx

@@ -0,0 +1,428 @@
+"use client";
+
+import { useState } from "react";
+import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { computeFormControllerPublicTokens } from "@/features/editor/utils/formHelpers";
+
+interface FormControllerPanelProps {
+  block: Block; // type === "form"
+  blocks: Block[];
+  selectedBlockId: string | null;
+  updateBlock: (id: string, partial: any) => void;
+}
+
+export function FormControllerPanel({ block, blocks, selectedBlockId, updateBlock }: FormControllerPanelProps) {
+  if (!selectedBlockId || block.id !== selectedBlockId) return null;
+
+  const [showSheetsGuide, setShowSheetsGuide] = useState(false);
+
+  const formProps = block.props as FormBlockProps;
+
+  const sheetsScriptExample = (() => {
+    const tokens = computeFormControllerPublicTokens(block, blocks);
+    const fieldNames = tokens.fields.map((f) => f.name).filter((name) => !!name);
+
+    if (fieldNames.length === 0) {
+      return (
+        "function doPost(e) {\n" +
+        '  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("시트1");\n' +
+        "  if (!sheet) { sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0]; }\n" +
+        "  var params = e.parameter; // x-www-form-urlencoded\n" +
+        "  var row = [\n" +
+        '    params.name || "",\n' +
+        '    params.email || "",\n' +
+        '    params.message || "",\n' +
+        "    new Date(),\n" +
+        "  ];\n" +
+        "  sheet.appendRow(row);\n" +
+        "  return ContentService\n" +
+        "    .createTextOutput(JSON.stringify({ ok: true }))\n" +
+        "    .setMimeType(ContentService.MimeType.JSON);\n" +
+        "}"
+      );
+    }
+
+    const headerNames = [...fieldNames, "createdAt"];
+    const rowLines = fieldNames.map((name) => `    params.${name} || "",`);
+    rowLines.push("    new Date(),");
+
+    const lines: string[] = [];
+    lines.push("function doPost(e) {");
+    lines.push('  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("시트1");');
+    lines.push("  if (!sheet) { sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0]; }");
+    lines.push("  var params = e.parameter; // x-www-form-urlencoded");
+    lines.push("  // 시트의 1행 헤더는 다음과 같이 맞춰 주세요:");
+    lines.push(`  // ${headerNames.join(", ")}`);
+    lines.push("  var row = [");
+    for (const line of rowLines) {
+      lines.push(line);
+    }
+    lines.push("  ];");
+    lines.push("  sheet.appendRow(row);");
+    lines.push("  return ContentService");
+    lines.push("    .createTextOutput(JSON.stringify({ ok: true }))");
+    lines.push("    .setMimeType(ContentService.MimeType.JSON);");
+    lines.push("}");
+
+    return lines.join("\n");
+  })();
+
+  return (
+    <div className="space-y-4 text-xs">
+      <p className="text-slate-400">
+        이 폼은 퍼블릭 페이지에서 <code className="font-mono text-[11px]">/api/forms/submit</code>
+        엔드포인트로 먼저 전송된 뒤, 설정에 따라 내부 처리 또는 Webhook 으로 전달됩니다.
+      </p>
+
+      <div className="space-y-2">
+        <div className="flex flex-col gap-1">
+          <span className="text-slate-400">전송 대상</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={formProps.submitTarget ?? "internal"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                submitTarget: e.target.value as FormBlockProps["submitTarget"],
+              } as any)
+            }
+          >
+            <option value="internal">서버 처리 전용 (Webhook 없이 사용)</option>
+            <option value="webhook">외부 Webhook / Google Sheets 로 전달</option>
+          </select>
+        </div>
+
+        {formProps.submitTarget === "webhook" && (
+          <div className="space-y-3">
+            <label className="flex flex-col gap-1">
+              <span className="text-slate-400">Webhook URL (예: Google Apps Script 웹 앱 URL)</span>
+              <input
+                className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                placeholder="예: https://script.google.com/macros/s/.../exec"
+                value={formProps.destinationUrl ?? ""}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    destinationUrl: e.target.value,
+                  } as any)
+                }
+              />
+            </label>
+            <label className="flex items-center justify-between gap-2">
+              <span className="text-slate-400">전송 포맷</span>
+              <select
+                className="w-40 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                value={formProps.payloadFormat ?? "form"}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    payloadFormat: e.target.value as any,
+                  } as any)
+                }
+              >
+                <option value="form">폼 데이터 (x-www-form-urlencoded)</option>
+                <option value="json">JSON (application/json)</option>
+              </select>
+            </label>
+            <label className="flex items-center justify-between gap-2">
+              <span className="text-slate-400">HTTP 메서드</span>
+              <select
+                className="w-28 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                value={formProps.method ?? "POST"}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    method: e.target.value as FormBlockProps["method"],
+                  } as any)
+                }
+              >
+                <option value="POST">POST</option>
+                <option value="GET">GET</option>
+              </select>
+            </label>
+            <label className="flex flex-col gap-1">
+              <span className="text-slate-400">Authorization 토큰 (옵션)</span>
+              <input
+                className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                placeholder="예: Bearer xxxxxx"
+                value={formProps.headers?.Authorization ?? ""}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    headers: {
+                      ...(formProps.headers ?? {}),
+                      Authorization: e.target.value,
+                    },
+                  } as any)
+                }
+              />
+            </label>
+            <label className="flex flex-col gap-1">
+              <span className="text-slate-400">추가 파라미터 (key=value 형식, 줄바꿈으로 구분)</span>
+              <textarea
+                className="w-full h-16 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] font-mono outline-none focus:border-sky-500"
+                placeholder={"예:\nsource=landing\nformId=contact-hero"}
+                value={Object.entries(formProps.extraParams ?? {})
+                  .map(([k, v]) => `${k}=${v}`)
+                  .join("\n")}
+                onChange={(e) => {
+                  const lines = e.target.value.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+                  const next: Record<string, string> = {};
+                  for (const line of lines) {
+                    const idx = line.indexOf("=");
+                    if (idx > 0) {
+                      const key = line.slice(0, idx).trim();
+                      const value = line.slice(idx + 1).trim();
+                      if (key) next[key] = value;
+                    }
+                  }
+
+                  updateBlock(selectedBlockId, {
+                    extraParams: next,
+                  } as any);
+                }}
+              />
+            </label>
+
+            <div className="flex justify-end">
+              <button
+                type="button"
+                className="inline-flex items-center gap-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] text-slate-100 hover:bg-slate-800"
+                onClick={() => setShowSheetsGuide(true)}
+              >
+                Google Sheets 연동 가이드
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
+        <h3 className="text-[11px] font-semibold text-slate-200">폼 레이아웃</h3>
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <span>폼 너비 모드</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={formProps.formWidthMode ?? "auto"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                formWidthMode: e.target.value as FormBlockProps["formWidthMode"],
+              } as any)
+            }
+          >
+            <option value="auto">자동</option>
+            <option value="full">전체 폭</option>
+            <option value="fixed">고정 값</option>
+          </select>
+        </label>
+        {(formProps.formWidthMode ?? "auto") === "fixed" && (
+          <NumericPropertyControl
+            label="폼 고정 너비 (px)"
+            unitLabel="(px)"
+            value={typeof formProps.formWidthPx === "number" ? formProps.formWidthPx : 480}
+            min={160}
+            max={1200}
+            step={10}
+            presets={[
+              { id: "sm", label: "좁게", value: 320 },
+              { id: "md", label: "보통", value: 480 },
+              { id: "lg", label: "넓게", value: 640 },
+            ]}
+            onChangeValue={(v) =>
+              updateBlock(selectedBlockId, {
+                formWidthPx: v,
+              } as any)
+            }
+          />
+        )}
+        <NumericPropertyControl
+          label="폼 위/아래 여백 (px)"
+          unitLabel="(px)"
+          value={typeof formProps.marginYPx === "number" ? formProps.marginYPx : 24}
+          min={0}
+          max={160}
+          step={4}
+          presets={[
+            { id: "none", label: "없음", value: 0 },
+            { id: "compact", label: "좁게", value: 16 },
+            { id: "normal", label: "보통", value: 24 },
+            { id: "spacious", label: "넓게", value: 40 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              marginYPx: v,
+            } as any)
+          }
+        />
+      </div>
+
+      <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
+        <h3 className="text-[11px] font-semibold text-slate-200">폼 메시지</h3>
+        <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-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            placeholder="예: 성공적으로 전송되었습니다."
+            value={formProps.successMessage ?? ""}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                successMessage: e.target.value,
+              } as any)
+            }
+          />
+        </label>
+        <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-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            placeholder="예: 전송 중 오류가 발생했습니다."
+            value={formProps.errorMessage ?? ""}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                errorMessage: e.target.value,
+              } as any)
+            }
+          />
+        </label>
+      </div>
+
+      <div className="space-y-3 border-t border-slate-800 pt-3 mt-4">
+        <h3 className="text-[11px] font-semibold text-slate-200">폼 컨트롤러</h3>
+
+        <fieldset className="space-y-2" aria-label="폼 필드 매핑">
+          <legend className="text-[11px] text-slate-400 mb-1">폼 필드 매핑</legend>
+          {blocks
+            .filter((b) =>
+              b.type === "formInput" ||
+              b.type === "formSelect" ||
+              b.type === "formCheckbox" ||
+              b.type === "formRadio",
+            )
+            .map((fieldBlock) => {
+              const fieldId = fieldBlock.id;
+              const anyProps: any = fieldBlock.props ?? {};
+
+              const transmissionKey: string | undefined = anyProps.formFieldName;
+              const labelText: string | undefined = anyProps.label ?? anyProps.groupLabel;
+
+              const displayLabel = transmissionKey
+                ? labelText && labelText !== transmissionKey
+                  ? `${transmissionKey} (${labelText})`
+                  : transmissionKey
+                : labelText || fieldId;
+
+              const checked = (formProps.fieldIds ?? []).includes(fieldId);
+              const required = (formProps.requiredFieldIds ?? []).includes(fieldId);
+
+              return (
+                <label
+                  key={fieldId}
+                  className="flex items-center gap-2 text-[11px] text-slate-200"
+                >
+                  <input
+                    type="checkbox"
+                    className="h-3 w-3 rounded border-slate-600 bg-slate-950"
+                    checked={checked}
+                    onChange={(e) => {
+                      const current = formProps.fieldIds ?? [];
+                      const next = e.target.checked
+                        ? [...current, fieldId]
+                        : current.filter((id) => id !== fieldId);
+
+                      updateBlock(selectedBlockId, {
+                        fieldIds: next,
+                      } as any);
+                    }}
+                  />
+                  <span className="flex-1 truncate">{displayLabel}</span>
+                  <label className="inline-flex items-center gap-1 text-[11px] text-slate-400">
+                    <input
+                      type="checkbox"
+                      className="h-3 w-3 rounded border-slate-600 bg-slate-950"
+                      checked={required}
+                      onChange={(e) => {
+                        const current = formProps.requiredFieldIds ?? [];
+                        const next = e.target.checked
+                          ? Array.from(new Set([...current, fieldId]))
+                          : current.filter((id) => id !== fieldId);
+
+                        updateBlock(selectedBlockId, {
+                          requiredFieldIds: next,
+                        } as any);
+                      }}
+                    />
+                    <span>필수</span>
+                  </label>
+                </label>
+              );
+            })}
+        </fieldset>
+
+        <div className="space-y-1">
+          <span className="text-[11px] text-slate-400">Submit 버튼</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            aria-label="Submit 버튼"
+            value={formProps.submitButtonId ?? ""}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                submitButtonId: e.target.value || null,
+              } as any)
+            }
+          >
+            <option value="">선택 안 함</option>
+            {blocks
+              .filter((b) => b.type === "button")
+              .map((buttonBlock) => {
+                const btnProps = buttonBlock.props as ButtonBlockProps;
+                const transmissionKey = btnProps.formFieldName;
+                const labelText = btnProps.label;
+                const displayLabel = transmissionKey
+                  ? labelText && labelText !== transmissionKey
+                    ? `${transmissionKey} (${labelText})`
+                    : transmissionKey
+                  : labelText || buttonBlock.id;
+
+                return (
+                  <option key={buttonBlock.id} value={buttonBlock.id}>
+                    {displayLabel}
+                  </option>
+                );
+              })}
+          </select>
+        </div>
+      </div>
+
+      {showSheetsGuide && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70">
+          <div className="w-full max-w-xl rounded border border-slate-800 bg-slate-950 px-4 py-3 shadow-lg">
+            <div className="mb-2 flex items-center justify-between">
+              <h4 className="text-[11px] font-semibold text-slate-100">Google Sheets 연동 가이드</h4>
+              <button
+                type="button"
+                className="text-[11px] text-slate-400 hover:text-slate-100"
+                onClick={() => setShowSheetsGuide(false)}
+                aria-label="Google Sheets 연동 가이드 닫기"
+              >
+                닫기
+              </button>
+            </div>
+            <p className="text-[11px] text-slate-400 leading-relaxed">
+              구글 시트 주소를 그대로 입력하는 것이 아니라, 시트에 연결된 Google Apps Script 웹 앱 URL 을 입력해야 합니다.
+              아래 순서를 따르면 코드를 잘 모르는 사용자도 연동할 수 있습니다.
+            </p>
+            <ol className="list-decimal list-inside space-y-1 text-[11px] text-slate-400 mt-2">
+              <li>Google Sheets 에서 새 스프레드시트를 만들고, 1행에 name, email, message 같은 헤더를 추가합니다.</li>
+              <li>시트 메뉴의 "확장 프로그램 → 앱스 스크립트" 를 열고 아래 예제 코드를 붙여넣습니다.</li>
+              <li>"배포 → 새 배포" 에서 웹 앱으로 배포한 뒤, 발급된 웹 앱 URL(…/exec) 을 Webhook URL 칸에 붙여넣습니다.</li>
+            </ol>
+            <div className="mt-2 space-y-1">
+              <span className="text-[11px] text-slate-400">예시 Apps Script 코드</span>
+              <textarea
+                className="w-full h-40 rounded border border-slate-800 bg-slate-950 px-2 py-1 text-[11px] font-mono text-slate-200"
+                readOnly
+                value={sheetsScriptExample}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/editor/forms/FormInputPropertiesPanel.tsx

@@ -0,0 +1,432 @@
+"use client";
+
+import type { Block, FormInputBlockProps } from "@/features/editor/state/editorStore";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+
+interface FormInputPropertiesPanelProps {
+	block: Block;
+	selectedBlockId: string | null;
+	updateBlock: (id: string, partial: any) => void;
+}
+
+export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }: FormInputPropertiesPanelProps) {
+	if (!selectedBlockId || block.id !== selectedBlockId || block.type !== "formInput") return null;
+
+	const inputProps = block.props as FormInputBlockProps;
+	const labelDisplay = inputProps.labelDisplay ?? "visible";
+
+	return (
+		<div className="space-y-3 text-xs">
+			<h3 className="text-[11px] font-semibold text-slate-200">입력 필드</h3>
+			<label className="flex flex-col gap-1">
+				<span className="text-slate-400">라벨 타입</span>
+				<select
+					className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+					value={inputProps.labelMode ?? "text"}
+					onChange={(e) =>
+						updateBlock(selectedBlockId, {
+							labelMode: e.target.value,
+						} as any)
+					}
+				>
+					<option value="text">텍스트</option>
+					<option value="image">이미지</option>
+				</select>
+			</label>
+			<label className="flex flex-col gap-1">
+				<span className="text-slate-400">필드 라벨</span>
+				<input
+					className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+					value={inputProps.label ?? ""}
+					onChange={(e) =>
+						updateBlock(selectedBlockId, {
+							label: e.target.value,
+						} as any)
+					}
+				/>
+			</label>
+			<label className="flex flex-col gap-1">
+				<span className="text-slate-400">라벨 표시 방식</span>
+				<select
+					className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+					value={labelDisplay}
+					onChange={(e) =>
+						updateBlock(selectedBlockId, {
+							labelDisplay: e.target.value,
+						} as any)
+					}
+				>
+					<option value="visible">표시 (기본)</option>
+					<option value="hidden">숨김</option>
+					<option value="floating">플로팅 라벨</option>
+				</select>
+			</label>
+			{labelDisplay === "visible" && (
+				<label className="flex flex-col gap-1 text-[11px] text-slate-400">
+					<span>레이아웃</span>
+					<select
+						className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+						value={inputProps.labelLayout ?? "stacked"}
+						onChange={(e) =>
+							updateBlock(selectedBlockId, {
+								labelLayout: e.target.value,
+							} as any)
+						}
+					>
+						<option value="stacked">세로 (기본)</option>
+						<option value="inline">가로 (인라인)</option>
+					</select>
+				</label>
+			)}
+			{labelDisplay === "visible" && (inputProps.labelLayout ?? "stacked") === "inline" && (
+				<NumericPropertyControl
+					label="라벨/필드 간격 (px)"
+					unitLabel="(px)"
+					value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8}
+					min={0}
+					max={80}
+					step={2}
+					presets={[
+						{ id: "tight", label: "타이트", value: 4 },
+						{ id: "normal", label: "보통", value: 8 },
+						{ id: "relaxed", label: "느슨", value: 12 },
+						{ id: "extra", label: "넓게", value: 16 },
+					]}
+					onChangeValue={(v) =>
+						updateBlock(selectedBlockId, {
+							labelGapPx: v,
+						} as any)
+					}
+				/>
+			)}
+			{inputProps.labelMode === "image" && (
+				<>
+					<label className="flex flex-col gap-1">
+						<span className="text-slate-400">라벨 이미지 URL</span>
+						<input
+							className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+							value={inputProps.labelImageUrl ?? ""}
+							onChange={(e) =>
+								updateBlock(selectedBlockId, {
+									labelImageUrl: e.target.value,
+								} as any)
+							}
+						/>
+					</label>
+					<label className="flex flex-col gap-1">
+						<span className="text-slate-400">라벨 이미지 대체 텍스트</span>
+						<input
+							className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+							value={inputProps.labelImageAlt ?? ""}
+							onChange={(e) =>
+								updateBlock(selectedBlockId, {
+									labelImageAlt: e.target.value,
+								} as any)
+							}
+						/>
+					</label>
+				</>
+			)}
+			<label className="flex flex-col gap-1">
+				<span className="text-slate-400">전송 키</span>
+				<input
+					className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+					value={inputProps.formFieldName ?? ""}
+					onChange={(e) =>
+						updateBlock(selectedBlockId, {
+							formFieldName: e.target.value,
+						} as any)
+					}
+				/>
+			</label>
+			<label className="flex flex-col gap-1">
+				<span className="text-slate-400">필드 타입</span>
+				<select
+					className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+					aria-label="필드 타입"
+					value={inputProps.inputType ?? "text"}
+					onChange={(e) =>
+						updateBlock(selectedBlockId, {
+							inputType: e.target.value,
+						} as any)
+					}
+				>
+					<option value="text">텍스트</option>
+					<option value="email">이메일</option>
+					<option value="textarea">긴 텍스트</option>
+				</select>
+			</label>
+			<label className="flex flex-col gap-1">
+				<span className="text-slate-400">Placeholder</span>
+				<input
+					className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+					aria-label="Placeholder"
+					value={inputProps.placeholder ?? ""}
+					onChange={(e) =>
+						updateBlock(selectedBlockId, {
+							placeholder: e.target.value,
+						} as any)
+					}
+				/>
+			</label>
+			<label className="inline-flex items-center gap-2">
+				<span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
+			</label>
+			<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
+				<h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>
+				<NumericPropertyControl
+					label="필드 텍스트 크기 (px)"
+					unitLabel="(px)"
+					value={(() => {
+						const raw = inputProps.fontSizeCustom ?? "";
+						const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
+						if (match) return Number(match[1]);
+						return 14;
+					})()}
+					min={8}
+					max={40}
+					step={1}
+					presets={[
+						{ id: "xs", label: "XS", value: 12 },
+						{ id: "sm", label: "S", value: 14 },
+						{ id: "md", label: "M", value: 16 },
+						{ id: "lg", label: "L", value: 18 },
+						{ id: "xl", label: "XL", value: 20 },
+					]}
+					onChangeValue={(v) => {
+						updateBlock(selectedBlockId, {
+							fontSizeCustom: `${v}px`,
+						} as any);
+					}}
+				/>
+				{/* 줄간격 px 입력을 노출하여 preview em 변환의 근거를 제공 */}
+				<NumericPropertyControl
+					label="필드 줄간격 (px)"
+					unitLabel="(px)"
+					value={(() => {
+						const raw = inputProps.lineHeightCustom ?? "";
+						const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
+						if (match) return Number(match[1]);
+						return 20;
+					})()}
+					min={8}
+					max={60}
+					step={1}
+					presets={[
+						{ id: "tight", label: "타이트", value: 18 },
+						{ id: "normal", label: "보통", value: 24 },
+						{ id: "loose", label: "루즈", value: 32 },
+					]}
+					onChangeValue={(v) => {
+						updateBlock(selectedBlockId, {
+							lineHeightCustom: `${v}px`,
+						} as any);
+					}}
+				/>
+				{/* 자간 px 입력으로 폼 입력 타이포를 세밀하게 조정 */}
+				<NumericPropertyControl
+					label="필드 자간 (px)"
+					unitLabel="(px)"
+					value={(() => {
+						const raw = inputProps.letterSpacingCustom ?? "";
+						const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
+						if (match) return Number(match[1]);
+						return 0;
+					})()}
+					min={-10}
+					max={20}
+					step={0.5}
+					presets={[
+						{ id: "tight", label: "좁게", value: -1 },
+						{ id: "normal", label: "보통", value: 0 },
+						{ id: "wide", label: "넓게", value: 2 },
+					]}
+					onChangeValue={(v) => {
+						updateBlock(selectedBlockId, {
+							letterSpacingCustom: `${v}px`,
+						} as any);
+					}}
+				/>
+				<label className="flex flex-col gap-1 text-[11px] text-slate-400">
+					<span>텍스트 정렬</span>
+					<select
+						className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+						value={inputProps.align ?? "left"}
+						onChange={(e) =>
+							updateBlock(selectedBlockId, {
+								align: e.target.value,
+							} as any)
+						}
+					>
+						<option value="left">왼쪽</option>
+						<option value="center">가운데</option>
+						<option value="right">오른쪽</option>
+					</select>
+				</label>
+				<label className="flex flex-col gap-1 text-[11px] text-slate-400">
+					<span>너비</span>
+					<select
+						className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+						aria-label="너비"
+						value={inputProps.widthMode ?? "full"}
+						onChange={(e) =>
+							updateBlock(selectedBlockId, {
+								widthMode: e.target.value,
+							} as any)
+						}
+					>
+						<option value="auto">자동</option>
+						<option value="full">전체 폭</option>
+						<option value="fixed">고정 값</option>
+					</select>
+				</label>
+				<NumericPropertyControl
+					label="필드 고정 너비"
+					unitLabel="(px)"
+					value={inputProps.widthPx ?? 240}
+					min={80}
+					max={800}
+					step={10}
+					presets={[
+						{ id: "sm", label: "작게", value: 200 },
+						{ id: "md", label: "보통", value: 280 },
+						{ id: "lg", label: "넓게", value: 360 },
+					]}
+					onChangeValue={(v) => {
+						updateBlock(selectedBlockId, {
+							widthPx: v,
+						} as any);
+					}}
+				/>
+				<NumericPropertyControl
+					label="필드 가로 패딩 (px)"
+					unitLabel="(px)"
+					value={typeof inputProps.paddingX === "number" ? inputProps.paddingX : 12}
+					min={0}
+					max={60}
+					step={2}
+					presets={[
+						{ id: "xs", label: "아주 얇게", value: 6 },
+						{ id: "sm", label: "얇게", value: 10 },
+						{ id: "md", label: "보통", value: 12 },
+						{ id: "lg", label: "넓게", value: 16 },
+						{ id: "xl", label: "아주 넓게", value: 20 },
+					]}
+					onChangeValue={(v) => {
+						updateBlock(selectedBlockId, {
+							paddingX: v,
+						} as any);
+					}}
+				/>
+				<NumericPropertyControl
+					label="필드 세로 패딩 (px)"
+					unitLabel="(px)"
+					value={typeof inputProps.paddingY === "number" ? inputProps.paddingY : 10}
+					min={0}
+					max={40}
+					step={1}
+					presets={[
+						{ id: "xs", label: "아주 얇게", value: 6 },
+						{ id: "sm", label: "얇게", value: 8 },
+						{ id: "md", label: "보통", value: 10 },
+						{ id: "lg", label: "넓게", value: 12 },
+						{ id: "xl", label: "아주 넓게", value: 16 },
+					]}
+					onChangeValue={(v) => {
+						updateBlock(selectedBlockId, {
+							paddingY: v,
+						} as any);
+					}}
+				/>
+				<ColorPickerField
+					label="필드 텍스트 색상"
+					ariaLabelColorInput="필드 텍스트 색상 피커"
+					ariaLabelHexInput="필드 텍스트 색상 HEX"
+					value={
+						inputProps.textColorCustom && inputProps.textColorCustom.trim() !== ""
+							? inputProps.textColorCustom
+							: "#f9fafb"
+					}
+					onChange={(hex) => {
+						updateBlock(selectedBlockId, {
+							textColorCustom: hex,
+						} as any);
+					}}
+					palette={TEXT_COLOR_PALETTE}
+					onPaletteSelect={(item) => {
+						updateBlock(selectedBlockId, {
+							textColorCustom: item.color,
+						} as any);
+					}}
+				/>
+				<ColorPickerField
+					label="필드 채움 색상"
+					ariaLabelColorInput="필드 채움 색상 피커"
+					ariaLabelHexInput="필드 채움 색상 HEX"
+					value={
+						inputProps.fillColorCustom && inputProps.fillColorCustom.trim() !== ""
+							? inputProps.fillColorCustom
+							: TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+					}
+					onChange={(hex) => {
+						updateBlock(selectedBlockId, {
+							fillColorCustom: hex,
+						} as any);
+					}}
+					palette={TEXT_COLOR_PALETTE}
+					onPaletteSelect={(item) => {
+						updateBlock(selectedBlockId, {
+							fillColorCustom: item.color,
+						} as any);
+					}}
+				/>
+				<ColorPickerField
+					label="필드 테두리 색상"
+					ariaLabelColorInput="필드 테두리 색상 피커"
+					ariaLabelHexInput="필드 테두리 색상 HEX"
+					value={
+						inputProps.strokeColorCustom && inputProps.strokeColorCustom.trim() !== ""
+							? inputProps.strokeColorCustom
+							: TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+					}
+					onChange={(hex) => {
+						updateBlock(selectedBlockId, {
+							strokeColorCustom: hex,
+						} as any);
+					}}
+					palette={TEXT_COLOR_PALETTE}
+					onPaletteSelect={(item) => {
+						updateBlock(selectedBlockId, {
+							strokeColorCustom: item.color,
+						} as any);
+					}}
+				/>
+				<NumericPropertyControl
+					label="필드 모서리 둥글기"
+					value={(() => {
+						const r = inputProps.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>
+		</div>
+	);
+}

src/app/editor/forms/FormRadioPropertiesPanel.tsx

@@ -0,0 +1,660 @@
+"use client";
+
+import type { Block, FormRadioBlockProps } from "@/features/editor/state/editorStore";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+
+interface FormRadioPropertiesPanelProps {
+  block: Block;
+  selectedBlockId: string | null;
+  updateBlock: (id: string, partial: any) => void;
+}
+
+export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }: FormRadioPropertiesPanelProps) {
+  if (!selectedBlockId || block.id !== selectedBlockId) return null;
+
+  const radioProps = block.props as FormRadioBlockProps;
+  const groupLabelDisplay = radioProps.groupLabelDisplay ?? "visible";
+
+  return (
+    <div className="space-y-3 text-xs">
+      <h3 className="text-[11px] font-semibold text-slate-200">라디오 필드</h3>
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">그룹 타이틀 타입</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={radioProps.groupLabelMode ?? "text"}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              groupLabelMode: e.target.value,
+            } as any)
+          }
+        >
+          <option value="text">텍스트</option>
+          <option value="image">이미지</option>
+        </select>
+      </label>
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">그룹 타이틀 표시 방식</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={groupLabelDisplay}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              groupLabelDisplay: e.target.value,
+            } as any)
+          }
+        >
+          <option value="visible">표시 (기본)</option>
+          <option value="hidden">숨김</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (
+        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+          <span>그룹 타이틀 레이아웃</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={radioProps.labelLayout ?? "stacked"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                labelLayout: e.target.value,
+              } as any)
+            }
+          >
+            <option value="stacked">세로 (기본)</option>
+            <option value="inline">가로 (인라인)</option>
+          </select>
+        </label>
+      )}
+
+      <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+        <span>옵션 레이아웃</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={radioProps.optionLayout ?? "stacked"}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              optionLayout: e.target.value,
+            } as any)
+          }
+        >
+          <option value="stacked">세로 (기본)</option>
+          <option value="inline">가로 (인라인)</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (radioProps.labelLayout ?? "stacked") === "inline" && (
+        <NumericPropertyControl
+          label="라벨/필드 간격 (px)"
+          unitLabel="(px)"
+          value={typeof radioProps.labelGapPx === "number" ? radioProps.labelGapPx : 8}
+          min={0}
+          max={80}
+          step={2}
+          presets={[
+            { id: "tight", label: "타이트", value: 4 },
+            { id: "normal", label: "보통", value: 8 },
+            { id: "relaxed", label: "느슨", value: 12 },
+            { id: "extra", label: "넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              labelGapPx: v,
+            } as any)
+          }
+        />
+      )}
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">그룹 타이틀</span>
+        <input
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+          value={radioProps.groupLabel ?? ""}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              groupLabel: e.target.value,
+            } as any)
+          }
+        />
+      </label>
+
+      {radioProps.groupLabelMode === "image" && (() => {
+        const source: "url" | "upload" =
+          radioProps.groupLabelImageSource ??
+          (radioProps.groupLabelImageUrl && radioProps.groupLabelImageUrl.startsWith("/api/image/")
+            ? "upload"
+            : "url");
+
+        return (
+          <div className="space-y-1">
+            <label className="flex flex-col gap-1">
+              <span className="text-slate-400">그룹 타이틀 이미지 소스</span>
+              <select
+                className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                value={source}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    groupLabelImageSource: e.target.value,
+                  } as any)
+                }
+              >
+                <option value="url">URL</option>
+                <option value="upload">파일 업로드</option>
+              </select>
+            </label>
+
+            {source === "url" && (
+              <label className="flex flex-col gap-1">
+                <span className="text-slate-400">그룹 타이틀 이미지 URL</span>
+                <input
+                  className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+                  value={radioProps.groupLabelImageUrl ?? ""}
+                  onChange={(e) =>
+                    updateBlock(selectedBlockId, {
+                      groupLabelImageUrl: e.target.value,
+                    } as any)
+                  }
+                />
+              </label>
+            )}
+
+            {source === "upload" && (
+              <label className="flex flex-col gap-1">
+                <span className="text-slate-400">그룹 타이틀 이미지 파일 업로드</span>
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+                  aria-label="그룹 타이틀 이미지 파일 업로드"
+                  onChange={async (event) => {
+                    const file = event.target.files?.[0];
+                    if (!file) return;
+
+                    try {
+                      const formData = new FormData();
+                      formData.append("file", file);
+
+                      const response = await fetch("/api/image", {
+                        method: "POST",
+                        body: formData,
+                      });
+
+                      if (!response.ok) {
+                        console.error("라디오 그룹 라벨 이미지 업로드 실패", await response.text());
+                        return;
+                      }
+
+                      const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                      const servedUrl = data.servedUrl ?? `/api/image/${data.id}`;
+
+                      updateBlock(selectedBlockId, {
+                        groupLabelImageUrl: servedUrl,
+                        groupLabelImageSource: "upload",
+                      } as any);
+                    } catch (error) {
+                      console.error("라디오 그룹 라벨 이미지 업로드 중 오류", error);
+                    } finally {
+                      event.target.value = "";
+                    }
+                  }}
+                />
+              </label>
+            )}
+          </div>
+        );
+      })()}
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">전송 키</span>
+        <input
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+          value={radioProps.formFieldName ?? ""}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              formFieldName: e.target.value,
+            } as any)
+          }
+        />
+      </label>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span className="text-slate-400">옵션</span>
+          <button
+            type="button"
+            className="rounded border border-slate-700 bg-slate-900 px-2 py-0.5 text-[10px] text-slate-200 hover:bg-slate-800"
+            onClick={() => {
+              const next = Array.isArray((radioProps as any).options)
+                ? [...(radioProps as any).options]
+                : [];
+              next.push({
+                label: "새 옵션",
+                value: `option_${next.length + 1}`,
+              });
+              updateBlock(selectedBlockId, {
+                options: next,
+              } as any);
+            }}
+          >
+            옵션 추가
+          </button>
+        </div>
+        <div className="space-y-2">
+          <label className="flex flex-col gap-1">
+            <span className="text-slate-400">옵션 이미지 소스</span>
+            <select
+              className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+              value={(() => {
+                if (radioProps.optionImageSource) return radioProps.optionImageSource;
+                const first = (((radioProps as any).options ?? []) as any[])[0];
+                if (first?.labelImageUrl && first.labelImageUrl.startsWith("/api/image/")) return "upload";
+                return "url";
+              })()}
+              onChange={(e) =>
+                updateBlock(selectedBlockId, {
+                  optionImageSource: e.target.value,
+                } as any)
+              }
+            >
+              <option value="url">URL</option>
+              <option value="upload">파일 업로드</option>
+            </select>
+          </label>
+
+          {(((radioProps as any).options ?? []) as any[]).map((opt, index) => (
+            <div key={opt.value ?? index} className="space-y-1 rounded border border-slate-800 p-2">
+              <div className="flex items-center gap-1">
+                <input
+                  className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                  placeholder="라벨"
+                  value={opt.label ?? ""}
+                  onChange={(e) => {
+                    const next = [...(((radioProps as any).options ?? []) as any[])];
+                    next[index] = {
+                      ...next[index],
+                      label: e.target.value,
+                    };
+                    updateBlock(selectedBlockId, {
+                      options: next,
+                    } as any);
+                  }}
+                />
+                <input
+                  className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                  placeholder="값(value)"
+                  value={opt.value ?? ""}
+                  onChange={(e) => {
+                    const next = [...(((radioProps as any).options ?? []) as any[])];
+                    next[index] = {
+                      ...next[index],
+                      value: e.target.value,
+                    };
+                    updateBlock(selectedBlockId, {
+                      options: next,
+                    } as any);
+                  }}
+                />
+                <button
+                  type="button"
+                  className="h-7 w-7 rounded border border-slate-700 bg-slate-950 text-[10px] text-slate-300 hover:bg-red-900/60 hover:border-red-700"
+                  onClick={() => {
+                    const next = (((radioProps as any).options ?? []) as any[]).filter((_, i) => i !== index);
+                    updateBlock(selectedBlockId, {
+                      options: next,
+                    } as any);
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+              <div className="flex flex-col gap-1">
+                {(() => {
+                  const source: "url" | "upload" =
+                    radioProps.optionImageSource ??
+                    (opt.labelImageUrl && opt.labelImageUrl.startsWith("/api/image/") ? "upload" : "url");
+
+                  return (
+                    <>
+                      {source === "url" && (
+                        <input
+                          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                          placeholder="옵션 이미지 URL (선택)"
+                          value={opt.labelImageUrl ?? ""}
+                          onChange={(e) => {
+                            const next = [...(((radioProps as any).options ?? []) as any[])];
+                            next[index] = {
+                              ...next[index],
+                              labelImageUrl: e.target.value,
+                            };
+                            updateBlock(selectedBlockId, {
+                              options: next,
+                            } as any);
+                          }}
+                        />
+                      )}
+                      {source === "upload" && (
+                        <label className="flex flex-col gap-1">
+                          <span className="text-slate-400">옵션 이미지 파일 업로드</span>
+                          <input
+                            type="file"
+                            accept="image/*"
+                            className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+                            aria-label="옵션 이미지 파일 업로드"
+                            onChange={async (event) => {
+                              const file = event.target.files?.[0];
+                              if (!file) return;
+
+                              try {
+                                const formData = new FormData();
+                                formData.append("file", file);
+
+                                const response = await fetch("/api/image", {
+                                  method: "POST",
+                                  body: formData,
+                                });
+
+                                if (!response.ok) {
+                                  console.error("라디오 옵션 라벨 이미지 업로드 실패", await response.text());
+                                  return;
+                                }
+
+                                const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                                const servedUrl = data.servedUrl ?? `/api/image/${data.id}`;
+
+                                const next = [...(((radioProps as any).options ?? []) as any[])];
+                                next[index] = {
+                                  ...next[index],
+                                  labelImageUrl: servedUrl,
+                                };
+
+                                updateBlock(selectedBlockId, {
+                                  options: next,
+                                  optionImageSource: "upload",
+                                } as any);
+                              } catch (error) {
+                                console.error("라디오 옵션 라벨 이미지 업로드 중 오류", error);
+                              } finally {
+                                event.target.value = "";
+                              }
+                            }}
+                          />
+                        </label>
+                      )}
+                    </>
+                  );
+                })()}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <label className="inline-flex items-center gap-2">
+        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
+      </label>
+
+      <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
+        <h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>
+        {/* 라디오 타이포 px 값을 직접 입력받아 em 스케일 변환 로직과 연동한다 */}
+        <NumericPropertyControl
+          label="라디오 텍스트 크기 (px)"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = radioProps.fontSizeCustom ?? "";
+            const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            return 14;
+          })()}
+          min={8}
+          max={40}
+          step={1}
+          presets={[
+            { id: "xs", label: "XS", value: 12 },
+            { id: "sm", label: "S", value: 14 },
+            { id: "md", label: "M", value: 16 },
+            { id: "lg", label: "L", value: 18 },
+            { id: "xl", label: "XL", value: 20 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              fontSizeCustom: `${v}px`,
+            } as any);
+          }}
+        />
+        {/* 줄간격 px 입력을 노출하여 preview 에서 em 변환 근거로 사용 */}
+        <NumericPropertyControl
+          label="라디오 줄간격 (px)"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = radioProps.lineHeightCustom ?? "";
+            const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            return 20;
+          })()}
+          min={8}
+          max={60}
+          step={1}
+          presets={[
+            { id: "tight", label: "타이트", value: 18 },
+            { id: "normal", label: "보통", value: 24 },
+            { id: "loose", label: "루즈", value: 32 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              lineHeightCustom: `${v}px`,
+            } as any);
+          }}
+        />
+        {/* 자간 px 입력 컨트롤로 프리뷰 적용 근거 제공 */}
+        <NumericPropertyControl
+          label="라디오 자간 (px)"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = radioProps.letterSpacingCustom ?? "";
+            const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            return 0;
+          })()}
+          min={-10}
+          max={20}
+          step={0.5}
+          presets={[
+            { id: "tight", label: "좁게", value: -1 },
+            { id: "normal", label: "보통", value: 0 },
+            { id: "wide", label: "넓게", value: 2 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              letterSpacingCustom: `${v}px`,
+            } as any);
+          }}
+        />
+        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+          <span>필드 너비</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={radioProps.widthMode ?? "full"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                widthMode: e.target.value,
+              } as any)
+            }
+          >
+            <option value="auto">자동</option>
+            <option value="full">전체 폭</option>
+            <option value="fixed">고정 값</option>
+          </select>
+        </label>
+        {(radioProps.widthMode ?? "full") === "fixed" && (
+          <NumericPropertyControl
+            label="필드 고정 너비"
+            unitLabel="(px)"
+            value={radioProps.widthPx ?? 240}
+            min={80}
+            max={800}
+            step={10}
+            presets={[
+              { id: "sm", label: "작게", value: 200 },
+              { id: "md", label: "보통", value: 280 },
+              { id: "lg", label: "넓게", value: 360 },
+            ]}
+            onChangeValue={(v) => {
+              updateBlock(selectedBlockId, {
+                widthPx: v,
+              } as any);
+            }}
+          />
+        )}
+        <NumericPropertyControl
+          label="라디오 가로 패딩 (px)"
+          unitLabel="(px)"
+          value={typeof radioProps.paddingX === "number" ? radioProps.paddingX : 12}
+          min={0}
+          max={60}
+          step={2}
+          presets={[
+            { id: "xs", label: "아주 얇게", value: 6 },
+            { id: "sm", label: "얇게", value: 10 },
+            { id: "md", label: "보통", value: 12 },
+            { id: "lg", label: "넓게", value: 16 },
+            { id: "xl", label: "아주 넓게", value: 20 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              paddingX: v,
+            } as any)
+          }
+        />
+        <NumericPropertyControl
+          label="라디오 세로 패딩 (px)"
+          unitLabel="(px)"
+          value={typeof radioProps.paddingY === "number" ? radioProps.paddingY : 10}
+          min={0}
+          max={40}
+          step={1}
+          presets={[
+            { id: "xs", label: "아주 얇게", value: 6 },
+            { id: "sm", label: "얇게", value: 8 },
+            { id: "md", label: "보통", value: 10 },
+            { id: "lg", label: "넓게", value: 12 },
+            { id: "xl", label: "아주 넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              paddingY: v,
+            } as any)
+          }
+        />
+        <NumericPropertyControl
+          label="라디오 옵션 간격 (px)"
+          unitLabel="(px)"
+          value={typeof radioProps.optionGapPx === "number" ? radioProps.optionGapPx : 4}
+          min={0}
+          max={40}
+          step={1}
+          presets={[
+            { id: "tight", label: "타이트", value: 2 },
+            { id: "normal", label: "보통", value: 4 },
+            { id: "relaxed", label: "느슨", value: 8 },
+            { id: "extra", label: "넓게", value: 12 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              optionGapPx: v,
+            } as any)
+          }
+        />
+        <ColorPickerField
+          label="텍스트 색상"
+          ariaLabelColorInput="라디오 텍스트 색상 피커"
+          ariaLabelHexInput="라디오 텍스트 색상 HEX"
+          value={
+            radioProps.textColorCustom && radioProps.textColorCustom.trim() !== ""
+              ? radioProps.textColorCustom
+              : "#f9fafb"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              textColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              textColorCustom: item.color,
+            } as any);
+          }}
+        />
+        <ColorPickerField
+          label="배경 색상"
+          ariaLabelColorInput="라디오 배경 색상 피커"
+          ariaLabelHexInput="라디오 배경 색상 HEX"
+          value={
+            radioProps.fillColorCustom && radioProps.fillColorCustom.trim() !== ""
+              ? radioProps.fillColorCustom
+              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              fillColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              fillColorCustom: item.color,
+            } as any);
+          }}
+        />
+        <ColorPickerField
+          label="테두리 색상"
+          ariaLabelColorInput="라디오 테두리 색상 피커"
+          ariaLabelHexInput="라디오 테두리 색상 HEX"
+          value={
+            radioProps.strokeColorCustom && radioProps.strokeColorCustom.trim() !== ""
+              ? radioProps.strokeColorCustom
+              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              strokeColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              strokeColorCustom: item.color,
+            } as any);
+          }}
+        />
+        <NumericPropertyControl
+          label="필드 모서리 둥글기"
+          value={(() => {
+            const r = radioProps.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>
+    </div>
+  );
+}

src/app/editor/forms/FormSelectPropertiesPanel.tsx

@@ -0,0 +1,439 @@
+"use client";
+
+import type { Block, FormSelectBlockProps } from "@/features/editor/state/editorStore";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+
+interface FormSelectPropertiesPanelProps {
+  block: Block;
+  selectedBlockId: string | null;
+  updateBlock: (id: string, partial: any) => void;
+}
+
+export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock }: FormSelectPropertiesPanelProps) {
+  if (!selectedBlockId || block.id !== selectedBlockId) return null;
+
+  const selectProps = block.props as FormSelectBlockProps;
+  const labelDisplay = selectProps.labelDisplay ?? "visible";
+
+  return (
+    <div className="space-y-3 text-xs">
+      <h3 className="text-[11px] font-semibold text-slate-200">셀렉트 필드</h3>
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">라벨 타입</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={selectProps.labelMode ?? "text"}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              labelMode: e.target.value,
+            } as any)
+          }
+        >
+          <option value="text">텍스트</option>
+          <option value="image">이미지</option>
+        </select>
+      </label>
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">라벨 표시 방식</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={labelDisplay}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              labelDisplay: e.target.value,
+            } as any)
+          }
+        >
+          <option value="visible">표시 (기본)</option>
+          <option value="hidden">숨김</option>
+        </select>
+      </label>
+
+      {labelDisplay === "visible" && (
+        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+          <span>레이아웃</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={selectProps.labelLayout ?? "stacked"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                labelLayout: e.target.value,
+              } as any)
+            }
+          >
+            <option value="stacked">세로 (기본)</option>
+            <option value="inline">가로 (인라인)</option>
+          </select>
+        </label>
+      )}
+
+      {labelDisplay === "visible" && (selectProps.labelLayout ?? "stacked") === "inline" && (
+        <NumericPropertyControl
+          label="라벨/필드 간격 (px)"
+          unitLabel="(px)"
+          value={typeof selectProps.labelGapPx === "number" ? selectProps.labelGapPx : 8}
+          min={0}
+          max={80}
+          step={2}
+          presets={[
+            { id: "tight", label: "타이트", value: 4 },
+            { id: "normal", label: "보통", value: 8 },
+            { id: "relaxed", label: "느슨", value: 12 },
+            { id: "extra", label: "넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              labelGapPx: v,
+            } as any)
+          }
+        />
+      )}
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">필드 라벨</span>
+        <input
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+          value={selectProps.label ?? ""}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              label: e.target.value,
+            } as any)
+          }
+        />
+      </label>
+
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">전송 키</span>
+        <input
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+          value={selectProps.formFieldName ?? ""}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              formFieldName: e.target.value,
+            } as any)
+          }
+        />
+      </label>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span className="text-slate-400">옵션</span>
+          <button
+            type="button"
+            className="rounded border border-slate-700 bg-slate-900 px-2 py-0.5 text-[10px] text-slate-200 hover:bg-slate-800"
+            onClick={() => {
+              const next = Array.isArray((selectProps as any).options)
+                ? [...(selectProps as any).options]
+                : [];
+              next.push({
+                label: "새 옵션",
+                value: `option_${next.length + 1}`,
+              });
+              updateBlock(selectedBlockId, {
+                options: next,
+              } as any);
+            }}
+          >
+            옵션 추가
+          </button>
+        </div>
+        <div className="space-y-2">
+          {(((selectProps as any).options ?? []) as any[]).map((opt, index) => (
+            <div key={opt.value ?? index} className="space-y-1 rounded border border-slate-800 p-2">
+              <div className="flex items-center gap-1">
+                <input
+                  className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                  placeholder="라벨"
+                  value={opt.label ?? ""}
+                  onChange={(e) => {
+                    const next = [...(((selectProps as any).options ?? []) as any[])];
+                    next[index] = {
+                      ...next[index],
+                      label: e.target.value,
+                    };
+                    updateBlock(selectedBlockId, {
+                      options: next,
+                    } as any);
+                  }}
+                />
+                <input
+                  className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                  placeholder="값(value)"
+                  value={opt.value ?? ""}
+                  onChange={(e) => {
+                    const next = [...(((selectProps as any).options ?? []) as any[])];
+                    next[index] = {
+                      ...next[index],
+                      value: e.target.value,
+                    };
+                    updateBlock(selectedBlockId, {
+                      options: next,
+                    } as any);
+                  }}
+                />
+                <button
+                  type="button"
+                  className="h-7 w-7 rounded border border-slate-700 bg-slate-950 text-[10px] text-slate-300 hover:bg-red-900/60 hover:border-red-700"
+                  onClick={() => {
+                    const next = (((selectProps as any).options ?? []) as any[]).filter((_, i) => i !== index);
+                    updateBlock(selectedBlockId, {
+                      options: next,
+                    } as any);
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <label className="inline-flex items-center gap-2">
+        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
+      </label>
+      <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
+        <h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>
+        <NumericPropertyControl
+          label="셀렉트 텍스트 크기 (px)"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = selectProps.fontSizeCustom ?? "";
+            const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            return 14;
+          })()}
+          min={8}
+          max={40}
+          step={1}
+          presets={[
+            { id: "xs", label: "XS", value: 12 },
+            { id: "sm", label: "S", value: 14 },
+            { id: "md", label: "M", value: 16 },
+            { id: "lg", label: "L", value: 18 },
+            { id: "xl", label: "XL", value: 20 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              fontSizeCustom: `${v}px`,
+            } as any);
+          }}
+        />
+        {/* 줄간격 px 입력을 받아 preview 렌더러의 em 변환 근거로 사용한다 */}
+        <NumericPropertyControl
+          label="셀렉트 줄간격 (px)"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = selectProps.lineHeightCustom ?? "";
+            const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            return 20;
+          })()}
+          min={8}
+          max={60}
+          step={1}
+          presets={[
+            { id: "tight", label: "타이트", value: 18 },
+            { id: "normal", label: "보통", value: 24 },
+            { id: "loose", label: "루즈", value: 32 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              lineHeightCustom: `${v}px`,
+            } as any);
+          }}
+        />
+        {/* 자간 px 입력을 제공하여 TDD 시나리오와 동기화한다 */}
+        <NumericPropertyControl
+          label="셀렉트 자간 (px)"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = selectProps.letterSpacingCustom ?? "";
+            const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            return 0;
+          })()}
+          min={-10}
+          max={20}
+          step={0.5}
+          presets={[
+            { id: "tight", label: "좁게", value: -1 },
+            { id: "normal", label: "보통", value: 0 },
+            { id: "wide", label: "넓게", value: 2 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              letterSpacingCustom: `${v}px`,
+            } as any);
+          }}
+        />
+        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+          <span>필드 너비</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={selectProps.widthMode ?? "full"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                widthMode: e.target.value,
+              } as any)
+            }
+          >
+            <option value="auto">자동</option>
+            <option value="full">전체 폭</option>
+            <option value="fixed">고정 값</option>
+          </select>
+        </label>
+        {(selectProps.widthMode ?? "full") === "fixed" && (
+          <NumericPropertyControl
+            label="필드 고정 너비"
+            unitLabel="(px)"
+            value={selectProps.widthPx ?? 240}
+            min={80}
+            max={800}
+            step={10}
+            presets={[
+              { id: "sm", label: "작게", value: 200 },
+              { id: "md", label: "보통", value: 280 },
+              { id: "lg", label: "넓게", value: 360 },
+            ]}
+            onChangeValue={(v) => {
+              updateBlock(selectedBlockId, {
+                widthPx: v,
+              } as any);
+            }}
+          />
+        )}
+        <NumericPropertyControl
+          label="셀렉트 가로 패딩 (px)"
+          unitLabel="(px)"
+          value={typeof selectProps.paddingX === "number" ? selectProps.paddingX : 12}
+          min={0}
+          max={60}
+          step={2}
+          presets={[
+            { id: "xs", label: "아주 얇게", value: 6 },
+            { id: "sm", label: "얇게", value: 10 },
+            { id: "md", label: "보통", value: 12 },
+            { id: "lg", label: "넓게", value: 16 },
+            { id: "xl", label: "아주 넓게", value: 20 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              paddingX: v,
+            } as any)
+          }
+        />
+        <NumericPropertyControl
+          label="셀렉트 세로 패딩 (px)"
+          unitLabel="(px)"
+          value={typeof selectProps.paddingY === "number" ? selectProps.paddingY : 10}
+          min={0}
+          max={40}
+          step={1}
+          presets={[
+            { id: "xs", label: "아주 얇게", value: 6 },
+            { id: "sm", label: "얇게", value: 8 },
+            { id: "md", label: "보통", value: 10 },
+            { id: "lg", label: "넓게", value: 12 },
+            { id: "xl", label: "아주 넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              paddingY: v,
+            } as any)
+          }
+        />
+        <ColorPickerField
+          label="필드 텍스트 색상"
+          ariaLabelColorInput="셀렉트 텍스트 색상 피커"
+          ariaLabelHexInput="셀렉트 텍스트 색상 HEX"
+          value={
+            selectProps.textColorCustom && selectProps.textColorCustom.trim() !== ""
+              ? selectProps.textColorCustom
+              : "#f9fafb"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              textColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              textColorCustom: item.color,
+            } as any);
+          }}
+        />
+        <ColorPickerField
+          label="필드 채움 색상"
+          ariaLabelColorInput="셀렉트 채움 색상 피커"
+          ariaLabelHexInput="셀렉트 채움 색상 HEX"
+          value={
+            selectProps.fillColorCustom && selectProps.fillColorCustom.trim() !== ""
+              ? selectProps.fillColorCustom
+              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              fillColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              fillColorCustom: item.color,
+            } as any);
+          }}
+        />
+        <ColorPickerField
+          label="필드 테두리 색상"
+          ariaLabelColorInput="셀렉트 테두리 색상 피커"
+          ariaLabelHexInput="셀렉트 테두리 색상 HEX"
+          value={
+            selectProps.strokeColorCustom && selectProps.strokeColorCustom.trim() !== ""
+              ? selectProps.strokeColorCustom
+              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              strokeColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              strokeColorCustom: item.color,
+            } as any);
+          }}
+        />
+        <NumericPropertyControl
+          label="필드 모서리 둥글기"
+          value={(() => {
+            const r = selectProps.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>
+    </div>
+  );
+}

src/app/editor/layout.tsx

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import "../../styles/editor.css";
+
+export default function EditorLayout({ children }: { children: ReactNode }) {
+  // 에디터 전용 전역 스타일(editor.css)을 로드하기 위한 중첩 레이아웃.
+  // 실제 마크업 구조는 page.tsx 에서 정의하며, 여기서는 children 을 그대로 반환한다.
+  return children;
+}

src/app/editor/panels/BlocksSidebar.tsx

@@ -0,0 +1,550 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useEditorStore } from "@/features/editor/state/editorStore";
+import {
+  FilePlus2,
+  ListChecks,
+  Type,
+  MousePointerClick,
+  Image as ImageIcon,
+  Video,
+  Minus,
+  List,
+  LayoutTemplate,
+  Pencil,
+  FileText,
+  ListFilter,
+  CircleDot,
+  SquareCheck,
+} from "lucide-react";
+
+// 좌측 블록/폼/템플릿 추가 사이드바를 분리한 컴포넌트
+export function BlocksSidebar() {
+  const addTextBlock = useEditorStore((state) => state.addTextBlock);
+  const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
+  const addImageBlock = useEditorStore((state) => state.addImageBlock);
+  const addVideoBlock = useEditorStore((state) => (state as any).addVideoBlock);
+  const addDividerBlock = useEditorStore((state) => state.addDividerBlock);
+  const addListBlock = useEditorStore((state) => state.addListBlock);
+  const addSectionBlock = useEditorStore((state) => state.addSectionBlock);
+
+  const addFormBlock = useEditorStore((state) => state.addFormBlock);
+  const addFormInputBlock = useEditorStore((state) => (state as any).addFormInputBlock);
+  const addFormSelectBlock = useEditorStore((state) => (state as any).addFormSelectBlock);
+  const addFormCheckboxBlock = useEditorStore((state) => (state as any).addFormCheckboxBlock);
+  const addFormRadioBlock = useEditorStore((state) => (state as any).addFormRadioBlock);
+
+  const addHeroTemplateSection = useEditorStore((state) => state.addHeroTemplateSection);
+  const addFeaturesTemplateSection = useEditorStore((state) => state.addFeaturesTemplateSection);
+  const addCtaTemplateSection = useEditorStore((state) => state.addCtaTemplateSection);
+  const addFaqTemplateSection = useEditorStore((state) => state.addFaqTemplateSection);
+  const addPricingTemplateSection = useEditorStore((state) => state.addPricingTemplateSection);
+  const addTestimonialsTemplateSection = useEditorStore((state) => state.addTestimonialsTemplateSection);
+  const addBlogTemplateSection = useEditorStore((state) => state.addBlogTemplateSection);
+  const addTeamTemplateSection = useEditorStore((state) => state.addTeamTemplateSection);
+  const addFooterTemplateSection = useEditorStore((state) => state.addFooterTemplateSection);
+
+  // 버튼 핸들러를 useCallback으로 래핑해 불필요한 재생성을 줄인다.
+  const handleAddText = useCallback(() => addTextBlock(), [addTextBlock]);
+  const handleAddButton = useCallback(() => addButtonBlock(), [addButtonBlock]);
+  const handleAddImage = useCallback(() => addImageBlock(), [addImageBlock]);
+  const handleAddVideo = useCallback(() => addVideoBlock(), [addVideoBlock]);
+  const handleAddDivider = useCallback(() => addDividerBlock(), [addDividerBlock]);
+  const handleAddList = useCallback(() => addListBlock(), [addListBlock]);
+  const handleAddSection = useCallback(() => addSectionBlock(), [addSectionBlock]);
+
+  const handleAddFormBlock = useCallback(() => addFormBlock(), [addFormBlock]);
+  const handleAddFormInput = useCallback(() => addFormInputBlock(), [addFormInputBlock]);
+  const handleAddFormSelect = useCallback(() => addFormSelectBlock(), [addFormSelectBlock]);
+  const handleAddFormRadio = useCallback(() => addFormRadioBlock(), [addFormRadioBlock]);
+  const handleAddFormCheckbox = useCallback(() => addFormCheckboxBlock(), [addFormCheckboxBlock]);
+
+  const handleAddHeroTemplate = useCallback(
+    () => addHeroTemplateSection(),
+    [addHeroTemplateSection],
+  );
+  const handleAddFeaturesTemplate = useCallback(
+    () => addFeaturesTemplateSection(),
+    [addFeaturesTemplateSection],
+  );
+  const handleAddCtaTemplate = useCallback(() => addCtaTemplateSection(), [addCtaTemplateSection]);
+  const handleAddFaqTemplate = useCallback(() => addFaqTemplateSection(), [addFaqTemplateSection]);
+  const handleAddPricingTemplate = useCallback(
+    () => addPricingTemplateSection(),
+    [addPricingTemplateSection],
+  );
+  const handleAddTestimonialsTemplate = useCallback(
+    () => addTestimonialsTemplateSection(),
+    [addTestimonialsTemplateSection],
+  );
+  const handleAddBlogTemplate = useCallback(() => addBlogTemplateSection(), [addBlogTemplateSection]);
+  const handleAddTeamTemplate = useCallback(() => addTeamTemplateSection(), [addTeamTemplateSection]);
+  const handleAddFooterTemplate = useCallback(
+    () => addFooterTemplateSection(),
+    [addFooterTemplateSection],
+  );
+
+  const [isBlocksOpen, setIsBlocksOpen] = useState(true);
+  const [isFormsOpen, setIsFormsOpen] = useState(true);
+  const [isTemplatesOpen, setIsTemplatesOpen] = useState(true);
+
+  return (
+    <aside className="w-60 border-r border-slate-800 p-4 text-sm space-y-3 overflow-y-auto pb-scroll bg-slate-950/40">
+      <h2 className="font-medium flex items-center gap-2 text-slate-200">
+        <button
+          type="button"
+          className="flex items-center justify-between w-full text-left"
+          aria-expanded={isBlocksOpen}
+          onClick={() => setIsBlocksOpen((prev) => !prev)}
+        >
+          <span className="inline-flex items-center gap-2">
+            <Pencil className="w-4 h-4 text-sky-400" aria-hidden="true" />
+            <span>블록</span>
+          </span>
+        </button>
+      </h2>
+      {isBlocksOpen && (
+        <>
+          <button
+            type="button"
+            className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+            onClick={handleAddText}
+          >
+            <span className="inline-flex items-center gap-2">
+              <Type className="w-3 h-3" aria-hidden="true" />
+              <span>텍스트</span>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+            onClick={handleAddButton}
+          >
+            <span className="inline-flex items-center gap-2">
+              <MousePointerClick className="w-3 h-3" aria-hidden="true" />
+              <span>버튼</span>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+            onClick={handleAddImage}
+          >
+            <span className="inline-flex items-center gap-2">
+              <ImageIcon className="w-3 h-3" aria-hidden="true" />
+              <span>이미지</span>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+            onClick={handleAddVideo}
+          >
+            <span className="inline-flex items-center gap-2">
+              <Video className="w-3 h-3" aria-hidden="true" />
+              <span>비디오</span>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+            onClick={handleAddDivider}
+          >
+            <span className="inline-flex items-center gap-2">
+              <Minus className="w-3 h-3" aria-hidden="true" />
+              <span>구분선</span>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+            onClick={handleAddList}
+          >
+            <span className="inline-flex items-center gap-2">
+              <List className="w-3 h-3" aria-hidden="true" />
+              <span>리스트</span>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+            onClick={handleAddSection}
+          >
+            <span className="inline-flex items-center gap-2">
+              <LayoutTemplate className="w-3 h-3" aria-hidden="true" />
+              <span>섹션</span>
+            </span>
+          </button>
+        </>
+      )}
+
+      <div className="pt-3 border-t border-slate-800 mt-3 space-y-2">
+        <h3 className="text-[11px] font-medium text-slate-300 flex items-center gap-2">
+          <button
+            type="button"
+            className="flex items-center justify-between w-full text-left"
+            aria-expanded={isFormsOpen}
+            onClick={() => setIsFormsOpen((prev) => !prev)}
+          >
+            <span className="inline-flex items-center gap-2">
+              <ListChecks className="w-3 h-3" aria-hidden="true" />
+              <span>폼 요소</span>
+            </span>
+          </button>
+        </h3>
+        {isFormsOpen && (
+          <>
+            <button
+              type="button"
+              className="w-full rounded border border-emerald-700 bg-emerald-950 px-3 py-2 text-left text-xs text-emerald-100 hover:bg-emerald-900"
+              onClick={handleAddFormBlock}
+            >
+              <span className="inline-flex items-center gap-2">
+                <FilePlus2 className="w-3 h-3" aria-hidden="true" />
+                <span>폼 컨트롤러</span>
+              </span>
+            </button>
+            <button
+              type="button"
+              className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+              onClick={handleAddFormInput}
+            >
+              <span className="inline-flex items-center gap-2">
+                <FileText className="w-3 h-3" aria-hidden="true" />
+                <span>입력(Input)</span>
+              </span>
+            </button>
+            <button
+              type="button"
+              className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+              onClick={handleAddFormSelect}
+            >
+              <span className="inline-flex items-center gap-2">
+                <ListFilter className="w-3 h-3" aria-hidden="true" />
+                <span>셀렉트(Select)</span>
+              </span>
+            </button>
+            <button
+              type="button"
+              className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+              onClick={handleAddFormRadio}
+            >
+              <span className="inline-flex items-center gap-2">
+                <CircleDot className="w-3 h-3" aria-hidden="true" />
+                <span>단일 선택(Radio)</span>
+              </span>
+            </button>
+            <button
+              type="button"
+              className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+              onClick={handleAddFormCheckbox}
+            >
+              <span className="inline-flex items-center gap-2">
+                <SquareCheck className="w-3 h-3" aria-hidden="true" />
+                <span>다중 선택(Checkbox)</span>
+              </span>
+            </button>
+          </>
+        )}
+      </div>
+
+      <div className="pt-3 border-t border-slate-800 mt-3 space-y-3">
+        <h3 className="text-[11px] font-medium text-slate-300 flex items-center gap-2">
+          <button
+            type="button"
+            className="flex items-center justify-between w-full text-left"
+            aria-expanded={isTemplatesOpen}
+            onClick={() => setIsTemplatesOpen((prev) => !prev)}
+          >
+            <span className="inline-flex items-center gap-2">
+              <FilePlus2 className="w-3 h-3" aria-hidden="true" />
+              <span>템플릿</span>
+            </span>
+          </button>
+        </h3>
+
+        {isTemplatesOpen && (
+          <div className="space-y-3">
+            <div className="space-y-2">
+              <p className="text-[10px] font-semibold text-slate-400">히어로 · CTA</p>
+              <div className="space-y-2">
+                <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                      onClick={handleAddHeroTemplate}
+                    >
+                      Hero 템플릿
+                    </button>
+                    <div
+                      data-testid="template-preview-hero"
+                      className="shrink-0 flex h-6 w-10 rounded border border-slate-700 bg-slate-900 p-[2px]"
+                    >
+                      <div className="flex h-full w-full flex-col items-center justify-center gap-[2px]">
+                        <div className="h-[2px] w-3/4 bg-slate-700/70" />
+                        <div className="h-[2px] w-1/2 bg-slate-700/50" />
+                        <div className="h-2 w-4 rounded-[1px] bg-slate-700/70 mt-[1px]" />
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-slate-400 leading-snug">
+                    페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)
+                  </p>
+                </div>
+
+                <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                      onClick={handleAddCtaTemplate}
+                    >
+                      CTA 템플릿
+                    </button>
+                    <div
+                      data-testid="template-preview-cta"
+                      className="shrink-0 flex h-6 w-10 rounded border border-slate-700 bg-slate-900 p-[2px]"
+                    >
+                      <div className="flex h-full w-full items-center gap-[2px]">
+                        <div className="flex-1 flex flex-col justify-center gap-[1px]">
+                          <div className="h-[2px] w-full bg-slate-700/70" />
+                          <div className="h-[2px] w-2/3 bg-slate-700/50" />
+                        </div>
+                        <div className="w-3 h-2 rounded-[1px] bg-slate-700/70" />
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-slate-400 leading-snug">콜투액션(CTA) 섹션</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <p className="text-[10px] font-semibold text-slate-400">콘텐츠 섹션</p>
+              <div className="space-y-2">
+                <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                      onClick={handleAddFeaturesTemplate}
+                    >
+                      기능 템플릿
+                    </button>
+                    <div
+                      data-testid="template-preview-features"
+                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                    >
+                      <div className="flex-1 flex flex-col gap-[1px]">
+                        <div className="h-[2px] w-full bg-slate-700/70" />
+                        <div className="h-[2px] w-full bg-slate-700/50" />
+                      </div>
+                      <div className="flex-1 flex flex-col gap-[1px]">
+                        <div className="h-[2px] w-full bg-slate-700/70" />
+                        <div className="h-[2px] w-full bg-slate-700/50" />
+                      </div>
+                      <div className="flex-1 flex flex-col gap-[1px]">
+                        <div className="h-[2px] w-full bg-slate-700/70" />
+                        <div className="h-[2px] w-full bg-slate-700/50" />
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-slate-400 leading-snug">3컬럼 기능 소개 섹션</p>
+                </div>
+
+                <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                      onClick={handleAddFaqTemplate}
+                    >
+                      FAQ 템플릿
+                    </button>
+                    <div
+                      data-testid="template-preview-faq"
+                      className="shrink-0 flex h-6 w-10 items-start gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                    >
+                      <div className="w-2 flex flex-col gap-[1px]">
+                        <div className="h-[2px] w-full bg-slate-700/70" />
+                      </div>
+                      <div className="flex-1 flex flex-col gap-[2px]">
+                        <div className="h-[1px] w-full bg-slate-700/50" />
+                        <div className="h-[1px] w-full bg-slate-700/50" />
+                        <div className="h-[1px] w-full bg-slate-700/50" />
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-slate-400 leading-snug">자주 묻는 질문(FAQ) 섹션</p>
+                </div>
+
+                <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                      onClick={handleAddPricingTemplate}
+                    >
+                      상품 템플릿
+                    </button>
+                    <div
+                      data-testid="template-preview-pricing"
+                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                    >
+                      <div className="flex-1 flex flex-col items-center justify-end gap-[1px] border border-slate-700/30 rounded-[1px]">
+                        <div className="h-[1px] w-1/2 bg-slate-700/70" />
+                        <div className="h-[1px] w-3/4 bg-slate-700/50" />
+                      </div>
+                      <div className="flex-1 flex flex-col items-center justify-end gap-[1px] border border-sky-700/50 bg-sky-900/20 rounded-[1px]">
+                        <div className="h-[1px] w-1/2 bg-sky-500/70" />
+                        <div className="h-[1px] w-3/4 bg-sky-500/50" />
+                        <div className="h-[2px] w-3/4 bg-sky-500/70 mt-[1px] rounded-[1px]" />
+                      </div>
+                      <div className="flex-1 flex flex-col items-center justify-end gap-[1px] border border-slate-700/30 rounded-[1px]">
+                        <div className="h-[1px] w-1/2 bg-slate-700/70" />
+                        <div className="h-[1px] w-3/4 bg-slate-700/50" />
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-slate-400 leading-snug">요금제/플랜 소개 섹션</p>
+                </div>
+
+                <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                      onClick={handleAddBlogTemplate}
+                    >
+                      블로그 템플릿
+                    </button>
+                    <div
+                      data-testid="template-preview-blog"
+                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                    >
+                      <div className="flex-1 flex flex-col gap-[1px]">
+                        <div className="h-2 w-full bg-slate-600/50 rounded-[1px]" />
+                        <div className="h-[1px] w-full bg-slate-700/70" />
+                        <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                      </div>
+                      <div className="flex-1 flex flex-col gap-[1px]">
+                        <div className="h-2 w-full bg-slate-600/50 rounded-[1px]" />
+                        <div className="h-[1px] w-full bg-slate-700/70" />
+                        <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                      </div>
+                      <div className="flex-1 flex flex-col gap-[1px]">
+                        <div className="h-2 w-full bg-slate-600/50 rounded-[1px]" />
+                        <div className="h-[1px] w-full bg-slate-700/70" />
+                        <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-slate-400 leading-snug">블로그 포스트 목록 섹션</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <p className="text-[10px] font-semibold text-slate-400">신뢰/소개</p>
+              <div className="space-y-2">
+                <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                      onClick={handleAddTestimonialsTemplate}
+                    >
+                      후기 템플릿
+                    </button>
+                    <div
+                      data-testid="template-preview-testimonials"
+                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                    >
+                      <div className="flex-1 flex flex-col justify-between border border-slate-700/30 rounded-[1px] p-[1px]">
+                        <div className="h-[1px] w-full bg-slate-700/50" />
+                        <div className="h-[1px] w-1/2 bg-slate-700/70" />
+                      </div>
+                      <div className="flex-1 flex flex-col justify-between border border-slate-700/30 rounded-[1px] p-[1px]">
+                        <div className="h-[1px] w-full bg-slate-700/50" />
+                        <div className="h-[1px] w-1/2 bg-slate-700/70" />
+                      </div>
+                      <div className="flex-1 flex flex-col justify-between border border-slate-700/30 rounded-[1px] p-[1px]">
+                        <div className="h-[1px] w-full bg-slate-700/50" />
+                        <div className="h-[1px] w-1/2 bg-slate-700/70" />
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-slate-400 leading-snug">고객 후기(Testimonials) 섹션</p>
+                </div>
+
+                <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                      onClick={handleAddTeamTemplate}
+                    >
+                      Team 템플릿
+                    </button>
+                    <div
+                      data-testid="template-preview-team"
+                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                    >
+                      <div className="flex-1 flex flex-col items-center gap-[1px]">
+                        <div className="h-2 w-2 rounded-full bg-slate-600/80" />
+                        <div className="h-[1px] w-full bg-slate-700/70" />
+                        <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                      </div>
+                      <div className="flex-1 flex flex-col items-center gap-[1px]">
+                        <div className="h-2 w-2 rounded-full bg-slate-600/80" />
+                        <div className="h-[1px] w-full bg-slate-700/70" />
+                        <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                      </div>
+                      <div className="flex-1 flex flex-col items-center gap-[1px]">
+                        <div className="h-2 w-2 rounded-full bg-slate-600/80" />
+                        <div className="h-[1px] w-full bg-slate-700/70" />
+                        <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-slate-400 leading-snug">팀 소개 섹션</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <p className="text-[10px] font-semibold text-slate-400">푸터/기타</p>
+              <div className="space-y-2">
+                <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                      onClick={handleAddFooterTemplate}
+                    >
+                      Footer 템플릿
+                    </button>
+                    <div
+                      data-testid="template-preview-footer"
+                      className="shrink-0 flex h-6 w-10 items-center justify-between gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                    >
+                      <div className="flex-1 h-[2px] bg-slate-700/70" />
+                      <div className="flex-1 flex flex-col gap-[1px]">
+                        <div className="h-[1px] w-full bg-slate-700/50" />
+                        <div className="h-[1px] w-full bg-slate-700/50" />
+                      </div>
+                      <div className="flex-1 h-[1px] bg-slate-700/40" />
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-slate-400 leading-snug">페이지 푸터 섹션</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+}

src/app/editor/panels/ButtonPropertiesPanel.tsx

@@ -0,0 +1,495 @@
+"use client";
+
+import type { ButtonBlockProps } from "@/features/editor/state/editorStore";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+
+export type ButtonPropertiesPanelProps = {
+  buttonProps: ButtonBlockProps;
+  selectedBlockId: string;
+  updateBlock: (id: string, partial: Partial<ButtonBlockProps>) => void;
+};
+
+export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBlock }: ButtonPropertiesPanelProps) {
+  const imageSource: "none" | "url" | "upload" = (() => {
+    const hasSrc = (buttonProps.imageSrc ?? "").trim() !== "";
+    if (!hasSrc) return "none";
+    if (buttonProps.imageSourceType === "asset") return "upload";
+    return "url";
+  })();
+
+  return (
+    <>
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <span>버튼 텍스트</span>
+          <textarea
+            className="w-full min-h-[60px] rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            aria-label="버튼 텍스트"
+            value={buttonProps.label}
+            onChange={(e) => {
+              updateBlock(selectedBlockId, { label: e.target.value } as any);
+            }}
+          />
+        </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>
+
+        <div className="space-y-1">
+          <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={imageSource}
+              onChange={(e) => {
+                const next = e.target.value as "none" | "url" | "upload";
+                if (next === "none") {
+                  updateBlock(selectedBlockId, {
+                    imageSrc: "",
+                    imageAssetId: null,
+                  } as any);
+                } else if (next === "url") {
+                  updateBlock(selectedBlockId, {
+                    imageSourceType: "externalUrl",
+                    imageAssetId: null,
+                  } as any);
+                } else {
+                  updateBlock(selectedBlockId, {
+                    imageSourceType: "asset",
+                  } as any);
+                }
+              }}
+            >
+              <option value="none">사용 안 함</option>
+              <option value="url">URL</option>
+              <option value="upload">파일 업로드</option>
+            </select>
+          </label>
+        </div>
+
+        {imageSource === "url" && (
+          <div className="space-y-1">
+            <label className="flex flex-col gap-1">
+              <span>버튼 이미지 URL</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="버튼 이미지 URL"
+                value={buttonProps.imageSrc ?? ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateBlock(selectedBlockId, {
+                    imageSrc: value,
+                    imageSourceType: "externalUrl",
+                    imageAssetId: null,
+                  } as any);
+                }}
+              />
+            </label>
+          </div>
+        )}
+
+        {imageSource === "upload" && (
+          <div className="space-y-1">
+            <label className="flex flex-col gap-1">
+              <span>버튼 이미지 파일 업로드</span>
+              <input
+                type="file"
+                accept="image/*"
+                className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+                aria-label="버튼 이미지 파일 업로드"
+                onChange={async (event) => {
+                  const file = event.target.files?.[0];
+                  if (!file) return;
+
+                  try {
+                    const formData = new FormData();
+                    formData.append("file", file);
+
+                    const response = await fetch("/api/image", {
+                      method: "POST",
+                      body: formData,
+                    });
+
+                    if (!response.ok) {
+                      console.error("버튼 이미지 업로드 실패", await response.text());
+                      return;
+                    }
+
+                    const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                    const servedUrl = data.servedUrl ?? `/api/image/${data.id}`;
+
+                    updateBlock(selectedBlockId, {
+                      imageSrc: servedUrl,
+                      imageSourceType: "asset",
+                      imageAssetId: data.id,
+                    } as any);
+                  } catch (error) {
+                    console.error("버튼 이미지 업로드 중 오류", error);
+                  } finally {
+                    event.target.value = "";
+                  }
+                }}
+              />
+            </label>
+          </div>
+        )}
+
+        {imageSource !== "none" && (
+          <>
+            <div className="space-y-1">
+              <label className="flex flex-col gap-1">
+                <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={buttonProps.imageAlt ?? ""}
+                  onChange={(e) => {
+                    updateBlock(selectedBlockId, { imageAlt: e.target.value } as any);
+                  }}
+                />
+              </label>
+            </div>
+
+            <div className="space-y-1">
+              <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={buttonProps.imagePlacement ?? "left"}
+                  onChange={(e) => {
+                    updateBlock(selectedBlockId, {
+                      imagePlacement: e.target.value as any,
+                    } as any);
+                  }}
+                >
+                  <option value="left">텍스트 왼쪽</option>
+                  <option value="right">텍스트 오른쪽</option>
+                  <option value="top">텍스트 위쪽</option>
+                  <option value="bottom">텍스트 아래쪽</option>
+                </select>
+              </label>
+            </div>
+          </>
+        )}
+      </div>
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="가로 패딩 (px)"
+          unitLabel="(px)"
+          value={buttonProps.paddingX ?? 16}
+          min={0}
+          max={120}
+          step={4}
+          presets={[
+            { id: "xs", label: "XS", value: 8 },
+            { id: "sm", label: "S", value: 12 },
+            { id: "md", label: "M", value: 16 },
+            { id: "lg", label: "L", value: 24 },
+            { id: "xl", label: "XL", value: 32 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              paddingX: v,
+            } as any);
+          }}
+        />
+      </div>
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="세로 패딩 (px)"
+          unitLabel="(px)"
+          value={buttonProps.paddingY ?? 10}
+          min={0}
+          max={80}
+          step={2}
+          presets={[
+            { id: "xs", label: "XS", value: 6 },
+            { id: "sm", label: "S", value: 8 },
+            { id: "md", label: "M", value: 10 },
+            { id: "lg", label: "L", value: 14 },
+            { id: "xl", label: "XL", value: 20 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              paddingY: v,
+            } as any);
+          }}
+        />
+      </div>
+      <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={buttonProps.href}
+            onChange={(e) => {
+              updateBlock(selectedBlockId, { href: e.target.value } as any);
+            }}
+          />
+        </label>
+      </div>
+      <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={buttonProps.align ?? "left"}
+            onChange={(e) => {
+              const value = e.target.value as NonNullable<ButtonBlockProps["align"]>;
+              updateBlock(selectedBlockId, { align: value } as any);
+            }}
+          >
+            <option value="left">왼쪽</option>
+            <option value="center">가운데</option>
+            <option value="right">오른쪽</option>
+          </select>
+        </label>
+      </div>
+      <div className="space-y-1">
+        {/* 버튼 크기 스케일 컨트롤은 paddingX/paddingY 및 폰트 크기(px) 컨트롤로 충분하므로 제거했다. */}
+      </div>
+      <div className="space-y-1">
+        <ColorPickerField
+          label="텍스트 색상"
+          ariaLabelColorInput="버튼 텍스트 색상 피커"
+          ariaLabelHexInput="버튼 텍스트 색상 HEX"
+          value={
+            buttonProps.textColorCustom && buttonProps.textColorCustom.startsWith("#")
+              ? buttonProps.textColorCustom
+              : "#f9fafb"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              textColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              textColorCustom: item.color,
+            } as any);
+          }}
+        />
+      </div>
+      <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={buttonProps.variant ?? "solid"}
+            onChange={(e) => {
+              const value = e.target.value as NonNullable<ButtonBlockProps["variant"]>;
+              updateBlock(selectedBlockId, { variant: value } as any);
+            }}
+          >
+            <option value="solid">채움</option>
+            <option value="outline">외곽선</option>
+            <option value="ghost">고스트</option>
+          </select>
+        </label>
+      </div>
+      <div className="space-y-1">
+        <ColorPickerField
+          label="채움 색상"
+          ariaLabelColorInput="버튼 채움 색상 피커"
+          ariaLabelHexInput="버튼 채움 색상 HEX"
+          value={
+            buttonProps.fillColorCustom && buttonProps.fillColorCustom.startsWith("#")
+              ? buttonProps.fillColorCustom
+              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              fillColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              fillColorCustom: item.color,
+            } as any);
+          }}
+        />
+      </div>
+      <div className="space-y-1">
+        <ColorPickerField
+          label="외곽선 색상"
+          ariaLabelColorInput="버튼 외곽선 색상 피커"
+          ariaLabelHexInput="버튼 외곽선 색상 HEX"
+          value={
+            buttonProps.strokeColorCustom && buttonProps.strokeColorCustom.startsWith("#")
+              ? buttonProps.strokeColorCustom
+              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              strokeColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              strokeColorCustom: item.color,
+            } as any);
+          }}
+        />
+      </div>
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="모서리 둥글기"
+          value={(() => {
+            const r = buttonProps.borderRadius ?? "md";
+            return r === "none" ? 0 : r === "sm" ? 1 : r === "lg" ? 3 : r === "full" ? 4 : 2;
+          })()}
+          min={0}
+          max={4}
+          step={1}
+          presets={[
+            { id: "none", label: "없음", value: 0 },
+            { id: "sm", label: "작게", value: 1 },
+            { id: "md", label: "보통", value: 2 },
+            { id: "lg", label: "크게", value: 3 },
+            { id: "full", label: "완전 둥글게", value: 4 },
+          ]}
+          onChangeValue={(v) => {
+            const next =
+              v <= 0 ? "none" : v === 1 ? "sm" : v === 3 ? "lg" : v >= 4 ? "full" : "md";
+            updateBlock(selectedBlockId, { borderRadius: next } as any);
+          }}
+        />
+      </div>
+      <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={buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")}
+            onChange={(e) => {
+              updateBlock(selectedBlockId, {
+                widthMode: e.target.value as NonNullable<ButtonBlockProps["widthMode"]>,
+              } as any);
+            }}
+          >
+            <option value="auto">자동</option>
+            <option value="full">전체 폭</option>
+            <option value="fixed">고정 값</option>
+          </select>
+        </label>
+        {(buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")) === "fixed" && (
+          <NumericPropertyControl
+            label="버튼 고정 너비"
+            unitLabel="(px)"
+            value={buttonProps.widthPx ?? 240}
+            min={80}
+            max={600}
+            step={10}
+            presets={[
+              { id: "sm", label: "작게", value: 180 },
+              { id: "md", label: "보통", value: 240 },
+              { id: "lg", label: "넓게", value: 320 },
+            ]}
+            onChangeValue={(v) => {
+              updateBlock(selectedBlockId, {
+                widthPx: v,
+              } as any);
+            }}
+          />
+        )}
+      </div>
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="버튼 크기"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = buttonProps.fontSizeCustom ?? "";
+            const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            // 기본 버튼 텍스트 크기: md 스케일(16px) 기준
+            return 16;
+          })()}
+          min={10}
+          max={32}
+          step={1}
+          presets={[
+            { id: "xs", label: "XS", value: 12 },
+            { id: "sm", label: "S", value: 14 },
+            { id: "base", label: "M", value: 16 },
+            { id: "lg", label: "L", value: 18 },
+            { id: "xl", label: "XL", value: 20 },
+            { id: "2xl", label: "2XL", value: 24 },
+            { id: "3xl", label: "3XL", value: 30 },
+          ]}
+          onChangeValue={(px) => {
+            // 버튼은 텍스트 스케일 상태 없이 px만 저장하지만,
+            // 프리셋 값은 TextPropertiesPanel과 동일한 테이블을 사용한다.
+            updateBlock(selectedBlockId, {
+              fontSizeCustom: `${px}px`,
+            } as any);
+          }}
+        />
+      </div>
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="줄 간격"
+          value={(() => {
+            const raw = buttonProps.lineHeightCustom ?? "";
+            const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
+            if (match) return Number(match[1]);
+            return 1.4;
+          })()}
+          min={0.8}
+          max={3}
+          step={0.05}
+          presets={[
+            { id: "tight", label: "좁게", value: 1.1 },
+            { id: "normal", label: "보통", value: 1.4 },
+            { id: "relaxed", label: "넓게", value: 1.8 },
+          ]}
+          onChangeValue={(v) => {
+            updateBlock(selectedBlockId, {
+              lineHeightCustom: v.toString(),
+            } as any);
+          }}
+        />
+      </div>
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="글자 간격"
+          unitLabel="(px)"
+          value={(() => {
+            const raw = buttonProps.letterSpacingCustom ?? "";
+            const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
+            if (match) {
+              const em = Number(match[1]);
+              if (Number.isFinite(em)) return em * 16;
+            }
+            return 0;
+          })()}
+          min={-32}
+          max={32}
+          step={1}
+          presets={[
+            { id: "tighter", label: "아주 좁게", value: -1.5 },
+            { id: "tight", label: "좁게", value: -0.5 },
+            { id: "normal", label: "보통", value: 0 },
+            { id: "wide", label: "넓게", value: 1 },
+            { id: "wider", label: "아주 넓게", value: 2 },
+          ]}
+          onChangeValue={(px) => {
+            const em = px / 16;
+            updateBlock(selectedBlockId, {
+              letterSpacingCustom: `${em}em`,
+            } as any);
+          }}
+        />
+      </div>
+    </>
+  );
+}

src/app/editor/panels/DividerPropertiesPanel.tsx

@@ -0,0 +1,137 @@
+"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;
+  selectedBlockId: string;
+  updateBlock: (id: string, partial: Partial<DividerBlockProps>) => void;
+};
+
+export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBlock }: DividerPropertiesPanelProps) {
+  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={dividerProps.align}
+            onChange={(e) => {
+              const value = e.target.value as DividerBlockProps["align"];
+              updateBlock(selectedBlockId, { align: value } as any);
+            }}
+          >
+            <option value="left">왼쪽</option>
+            <option value="center">가운데</option>
+            <option value="right">오른쪽</option>
+          </select>
+        </label>
+      </div>
+      <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={dividerProps.thickness}
+            onChange={(e) => {
+              const value = e.target.value as DividerBlockProps["thickness"];
+              updateBlock(selectedBlockId, { thickness: value } as any);
+            }}
+          >
+            <option value="thin">얇게</option>
+            <option value="medium">보통</option>
+          </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>
+    </>
+  );
+}

src/app/editor/panels/ImagePropertiesPanel.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import type { ImageBlockProps } from "@/features/editor/state/editorStore";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+
+export type ImagePropertiesPanelProps = {
+  imageProps: ImageBlockProps;
+  selectedBlockId: string;
+  updateBlock: (id: string, partial: Partial<ImageBlockProps>) => void;
+};
+
+export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock }: ImagePropertiesPanelProps) {
+  const source: "url" | "upload" =
+    imageProps.sourceType === "asset" || (imageProps.src && imageProps.src.startsWith("/api/image/"))
+      ? "upload"
+      : "url";
+
+  return (
+    <>
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <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={source}
+            onChange={(e) => {
+              const next = e.target.value as "url" | "upload";
+              if (next === "url") {
+                updateBlock(selectedBlockId, {
+                  sourceType: "externalUrl",
+                  assetId: null,
+                } as any);
+              } else {
+                updateBlock(selectedBlockId, {
+                  sourceType: "asset",
+                } as any);
+              }
+            }}
+          >
+            <option value="url">URL</option>
+            <option value="upload">파일 업로드</option>
+          </select>
+        </label>
+      </div>
+
+      {source === "url" && (
+        <div className="space-y-1">
+          <label className="flex flex-col gap-1 text-xs text-slate-400">
+            <span>이미지 URL</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="이미지 URL"
+              value={imageProps.src}
+              onChange={(e) => {
+                const value = e.target.value;
+                updateBlock(selectedBlockId, {
+                  src: value,
+                  sourceType: "externalUrl",
+                  assetId: null,
+                } as any);
+              }}
+            />
+          </label>
+        </div>
+      )}
+
+      {source === "upload" && (
+        <div className="space-y-1">
+          <label className="flex flex-col gap-1 text-xs text-slate-400">
+            <span>이미지 파일 업로드</span>
+            <input
+              type="file"
+              accept="image/*"
+              className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+              aria-label="이미지 파일 업로드"
+              onChange={async (event) => {
+                const file = event.target.files?.[0];
+                if (!file) return;
+
+                try {
+                  const formData = new FormData();
+                  formData.append("file", file);
+
+                  const response = await fetch("/api/image", {
+                    method: "POST",
+                    body: formData,
+                  });
+
+                  if (!response.ok) {
+                    console.error("이미지 업로드 실패", await response.text());
+                    return;
+                  }
+
+                  const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                  const servedUrl = data.servedUrl ?? `/api/image/${data.id}`;
+
+                  updateBlock(selectedBlockId, {
+                    src: servedUrl,
+                    sourceType: "asset",
+                    assetId: data.id,
+                  } as any);
+                } catch (error) {
+                  console.error("이미지 업로드 중 오류", error);
+                } finally {
+                  event.target.value = "";
+                }
+              }}
+            />
+          </label>
+        </div>
+      )}
+      <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={imageProps.alt}
+            onChange={(e) => {
+              updateBlock(selectedBlockId, { alt: e.target.value } as any);
+            }}
+          />
+        </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>
+
+        {/* 카드 배경색 */}
+        <div className="space-y-1">
+          <ColorPickerField
+            label="카드 배경색"
+            ariaLabelColorInput="이미지 카드 배경색 피커"
+            ariaLabelHexInput="이미지 카드 배경색 HEX"
+            value={imageProps.backgroundColorCustom ?? ""}
+            onChange={(hex) => {
+              const next = hex && hex.trim().length > 0 ? hex : undefined;
+              updateBlock(selectedBlockId, { backgroundColorCustom: next } as any);
+            }}
+            palette={TEXT_COLOR_PALETTE}
+          />
+        </div>
+
+        {/* 정렬 */}
+        <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={(() => {
+            if (typeof imageProps.borderRadiusPx === "number") {
+              return imageProps.borderRadiusPx;
+            }
+            const r = imageProps.borderRadius ?? "md";
+            // 토큰만 있는 기존 데이터의 경우, 토큰별 대표값으로 초기화한다.
+            return r === "none" ? 0 : r === "sm" ? 20 : r === "lg" ? 120 : r === "full" ? 180 : 60;
+          })()}
+          min={0}
+          max={200}
+          step={1}
+          presets={[
+            { id: "none", label: "없음", value: 0 },
+            { id: "sm", label: "작게", value: 20 },
+            { id: "md", label: "보통", value: 60 },
+            { id: "lg", label: "크게", value: 120 },
+            { id: "full", label: "완전 둥글게", value: 180 },
+          ]}
+          onChangeValue={(v) => {
+            // 0~50 범위를 토큰으로 매핑한다.
+            const nextToken =
+              v <= 0 ? "none" : v <= 30 ? "sm" : v <= 90 ? "md" : v <= 150 ? "lg" : "full";
+            updateBlock(selectedBlockId, {
+              borderRadius: nextToken,
+              borderRadiusPx: v,
+            } as any);
+          }}
+        />
+      </div>
+    </>
+  );
+}

src/app/editor/panels/ListPropertiesPanel.tsx

@@ -0,0 +1,242 @@
+"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,
+  selectedListItemId,
+  updateBlock,
+}: ListPropertiesPanelProps) {
+  return (
+    <>
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <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);
+              }
+
+              // 기존 하위호환: 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">
+          <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.align}
+            onChange={(e) => {
+              const value = e.target.value as ListBlockProps["align"];
+              updateBlock(selectedBlockId, { align: value } as any);
+            }}
+          >
+            <option value="left">왼쪽</option>
+            <option value="center">가운데</option>
+            <option value="right">오른쪽</option>
+          </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="글자 크기 (px)"
+          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);
+          }}
+        />
+
+        <ColorPickerField
+          label="블록 배경색"
+          ariaLabelColorInput="리스트 배경색 피커"
+          ariaLabelHexInput="리스트 배경색 HEX"
+          value={listProps.backgroundColorCustom ?? ""}
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, { backgroundColorCustom: hex } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+        />
+
+        {/* 불릿 스타일 (● / ○ / ■ / 숫자형 / 없음) */}
+        <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="아이템 간 여백 (px)"
+          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>
+    </>
+  );
+}

src/app/editor/panels/ProjectPropertiesPanel.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useEditorStore } from "@/features/editor/state/editorStore";
+import type { CanvasPreset, ProjectConfig } from "@/features/editor/state/editorStore";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+
+export function ProjectPropertiesPanel() {
+  const projectConfig = useEditorStore((state) => (state as any).projectConfig as ProjectConfig);
+  const updateProjectConfig = useEditorStore(
+    (state) => (state as any).updateProjectConfig as (partial: Partial<ProjectConfig>) => void,
+  );
+
+  const handleChangePreset = (preset: CanvasPreset) => {
+    if (preset === "mobile") {
+      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 390 });
+    } else if (preset === "tablet") {
+      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 768 });
+    } else if (preset === "desktop") {
+      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 1200 });
+    } else if (preset === "full") {
+      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: undefined });
+    } else {
+      updateProjectConfig({ canvasPreset: preset });
+    }
+  };
+
+  const handleChangeCanvasWidth = (value: number) => {
+    if (value === 390) {
+      handleChangePreset("mobile");
+    } else if (value === 768) {
+      handleChangePreset("tablet");
+    } else if (value === 1200) {
+      handleChangePreset("desktop");
+    } else {
+      updateProjectConfig({ canvasPreset: "custom", canvasWidthPx: value });
+    }
+  };
+
+  return (
+    <div className="space-y-4 text-xs text-slate-200">
+      <h3 className="text-sm font-medium text-slate-100">프로젝트 설정</h3>
+
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">프로젝트 제목</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={projectConfig.title}
+            onChange={(e) => updateProjectConfig({ title: e.target.value })}
+          />
+        </label>
+      </div>
+
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">프로젝트 주소 (slug)</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="프로젝트 주소 (slug)"
+            value={projectConfig.slug}
+            onChange={(e) => updateProjectConfig({ slug: e.target.value })}
+          />
+        </label>
+      </div>
+
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="캔버스 너비"
+          unitLabel="(px)"
+          value={projectConfig.canvasWidthPx ?? 1024}
+          min={320}
+          max={1920}
+          step={10}
+          presets={[
+            { id: "mobile", label: "모바일 (390px)", value: 390 },
+            { id: "tablet", label: "태블릿 (768px)", value: 768 },
+            { id: "desktop", label: "데스크톱 (1200px)", value: 1200 },
+          ]}
+          onChangeValue={handleChangeCanvasWidth}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <ColorPickerField
+          label="캔버스 배경색"
+          ariaLabelColorInput="캔버스 배경색"
+          ariaLabelHexInput="캔버스 배경색 HEX"
+          value={projectConfig.canvasBgColorHex ?? "#020617"}
+          onChange={(hex) => updateProjectConfig({ canvasBgColorHex: hex })}
+          palette={TEXT_COLOR_PALETTE}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <ColorPickerField
+          label="페이지 배경색"
+          ariaLabelColorInput="페이지 배경색"
+          ariaLabelHexInput="페이지 배경색 HEX"
+          value={projectConfig.bodyBgColorHex ?? "#020617"}
+          onChange={(hex) => updateProjectConfig({ bodyBgColorHex: hex })}
+          palette={TEXT_COLOR_PALETTE}
+        />
+      </div>
+
+      <div className="space-y-2 border-t border-slate-800 pt-3">
+        <h4 className="text-[11px] font-semibold text-slate-200">SEO / 메타</h4>
+
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">SEO 타이틀</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="SEO 타이틀"
+            placeholder={projectConfig.title || "페이지 제목"}
+            value={projectConfig.seoTitle ?? ""}
+            onChange={(e) => updateProjectConfig({ seoTitle: e.target.value })}
+          />
+        </label>
+
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">메타 디스크립션</span>
+          <textarea
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500 min-h-[56px]"
+            aria-label="메타 디스크립션"
+            placeholder="검색엔진 및 SNS 공유에 노출될 페이지 설명을 입력하세요."
+            value={projectConfig.seoDescription ?? ""}
+            onChange={(e) => updateProjectConfig({ seoDescription: e.target.value })}
+          />
+        </label>
+
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">OG/Twitter 이미지 URL</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="OG/Twitter 이미지 URL"
+            placeholder="예: https://example.com/og-image.png"
+            value={projectConfig.seoOgImageUrl ?? ""}
+            onChange={(e) => updateProjectConfig({ seoOgImageUrl: e.target.value })}
+          />
+        </label>
+
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">Canonical URL</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="Canonical URL"
+            placeholder="예: https://example.com/landing"
+            value={projectConfig.seoCanonicalUrl ?? ""}
+            onChange={(e) => updateProjectConfig({ seoCanonicalUrl: e.target.value })}
+          />
+        </label>
+
+        <label className="flex items-center gap-2 text-[11px] text-slate-300">
+          <input
+            type="checkbox"
+            className="h-3 w-3 rounded border-slate-600 bg-slate-900"
+            aria-label="검색 엔진에 노출하지 않기 (noindex)"
+            checked={Boolean(projectConfig.seoNoIndex)}
+            onChange={(e) => updateProjectConfig({ seoNoIndex: e.target.checked })}
+          />
+          <span>검색 엔진에 노출하지 않기 (noindex)</span>
+        </label>
+      </div>
+
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">페이지 head HTML</span>
+          <textarea
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] font-mono outline-none focus:border-sky-500 min-h-[72px]"
+            aria-label="페이지 head HTML"
+            value={projectConfig.headHtml ?? ""}
+            onChange={(e) => updateProjectConfig({ headHtml: e.target.value })}
+            placeholder="예: &lt;meta name=&quot;description&quot; content=&quot;...&quot; /&gt;"
+          />
+        </label>
+      </div>
+
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">추적 스크립트</span>
+          <textarea
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] font-mono outline-none focus:border-sky-500 min-h-[72px]"
+            aria-label="추적 스크립트"
+            value={projectConfig.trackingScript ?? ""}
+            onChange={(e) => updateProjectConfig({ trackingScript: e.target.value })}
+            placeholder="예: &lt;script&gt;/* GA, Pixel 코드 */&lt;/script&gt;"
+          />
+        </label>
+      </div>
+    </div>
+  );
+}

src/app/editor/panels/PropertiesSidebar.tsx

@@ -0,0 +1,898 @@
+"use client";
+
+import { useState } from "react";
+import type { Block, ButtonBlockProps, FormBlockProps, ListBlockProps, SectionBlockProps, TextBlockProps, VideoBlockProps } from "@/features/editor/state/editorStore";
+import { ButtonPropertiesPanel } from "./ButtonPropertiesPanel";
+import { TextPropertiesPanel } from "./TextPropertiesPanel";
+import { ListPropertiesPanel } from "./ListPropertiesPanel";
+import { DividerPropertiesPanel } from "./DividerPropertiesPanel";
+import { ImagePropertiesPanel } from "./ImagePropertiesPanel";
+import { SectionPropertiesPanel } from "./SectionPropertiesPanel";
+import { VideoPropertiesPanel } from "./VideoPropertiesPanel";
+import { FormInputPropertiesPanel } from "../forms/FormInputPropertiesPanel";
+import { FormSelectPropertiesPanel } from "../forms/FormSelectPropertiesPanel";
+import { FormCheckboxPropertiesPanel } from "../forms/FormCheckboxPropertiesPanel";
+import { FormRadioPropertiesPanel } from "../forms/FormRadioPropertiesPanel";
+import { FormControllerPanel } from "../forms/FormControllerPanel";
+import { ProjectPropertiesPanel } from "./ProjectPropertiesPanel";
+import { Trash2, Copy, SlidersHorizontal, HelpCircle } from "lucide-react";
+
+type BlockHelpProperty = {
+  label: string;
+  description: string;
+};
+
+type BlockHelpContent = {
+  title: string;
+  description: string;
+  properties?: BlockHelpProperty[];
+};
+
+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;
+}
+
+// 우측 속성 패널을 분리한 컴포넌트
+export function PropertiesSidebar(props: PropertiesSidebarProps) {
+  const {
+    blocks,
+    selectedBlockId,
+    selectedListItemId,
+    updateBlock,
+    removeBlock,
+    duplicateBlock,
+    editingBlockId,
+    setEditingText,
+    onMoveSelectedItemUp,
+    onMoveSelectedItemDown,
+    onIndentSelectedItem,
+    onOutdentSelectedItem,
+  } = props;
+
+  const [helpOpen, setHelpOpen] = useState(false);
+
+  const getHelpContentForSelectedBlock = (): BlockHelpContent | null => {
+    if (!selectedBlockId) return null;
+    const selectedBlock = blocks.find((b) => b.id === selectedBlockId);
+    if (!selectedBlock) return null;
+
+    switch (selectedBlock.type) {
+      case "text":
+        return {
+          title: "텍스트 블록 튜토리얼",
+          description:
+            "제목과 본문 텍스트를 입력할 때 사용하는 기본 블록입니다.\n\n좌측 패널에서 텍스트를 추가한 뒤, 캔버스에서 텍스트를 더블클릭하거나 속성 패널에서 내용을 수정해 보세요. 정렬, 크기, 색상 등을 조절해 다양한 스타일의 텍스트를 만들 수 있습니다.",
+          properties: [
+            {
+              label: "선택한 텍스트 블록 내용",
+              description:
+                "이 블록에 실제로 표시될 문장을 입력하는 영역입니다. 캔버스에서 텍스트를 더블클릭했을 때와 동일한 내용이며, 여러 줄을 입력하면 줄바꿈이 그대로 반영됩니다.",
+            },
+            {
+              label: "정렬",
+              description:
+                "텍스트를 왼쪽/가운데/오른쪽 중 어디에 맞출지 결정합니다. 일반 본문은 왼쪽, Hero 제목이나 짧은 강조 문구는 가운데 정렬을 추천합니다.",
+            },
+            {
+              label: "텍스트 스타일 (밑줄/가운데줄/이탤릭)",
+              description:
+                "밑줄은 링크처럼 보이게 하거나 특정 단어를 강조할 때, 가운데줄은 할인 전 가격처럼 취소선을 표현할 때, 이탤릭은 인용구나 제품명 등 살짝 톤을 바꾸고 싶을 때 사용합니다.",
+            },
+            {
+              label: "글자 크기",
+              description:
+                "텍스트의 폰트 크기를 px 단위로 조절합니다. 프리셋(XS~3XL)으로 대략적인 크기를 고른 뒤, 슬라이더/숫자 입력으로 세밀하게 조정할 수 있습니다.",
+            },
+            {
+              label: "글자 간격",
+              description:
+                "문자 사이의 간격(자간)을 조절합니다. 본문은 보통 또는 약간 넓게, 대문자 위주의 짧은 타이틀은 살짝 넓게 설정하면 가독성과 디자인이 좋아집니다.",
+            },
+            {
+              label: "줄 간격",
+              description:
+                "행과 행 사이의 간격(행간)을 정합니다. 본문은 1.5~1.7 정도가 읽기 좋고, 아주 짧은 제목은 1.25 정도로 줄이면 한 덩어리로 단단해 보입니다.",
+            },
+            {
+              label: "굵기",
+              description:
+                "폰트 두께를 100~900 범위에서 조절합니다. 본문은 보통(400), 섹션 제목은 세미볼드(600), 강한 CTA 문구는 볼드(700) 정도를 추천합니다.",
+            },
+            {
+              label: "텍스트 색상",
+              description:
+                "글자 색을 팔레트 또는 HEX 코드로 지정합니다. 본문은 대비가 높은 짙은 색을, 강조 문구는 브랜드 메인 색을 사용하는 것이 좋습니다.",
+            },
+            {
+              label: "블록 배경색",
+              description:
+                "텍스트가 들어 있는 카드/박스 전체 배경색을 지정합니다. 공지사항, 강조 박스, 경고 문구 등을 만들 때 연한 배경색과 함께 사용하면 좋습니다.",
+            },
+            {
+              label: "최대 너비",
+              description:
+                "한 줄 텍스트가 지나치게 길어지지 않도록 최대 줄 길이를 제한합니다. `본문 폭(60ch)`는 일반 문단에, `좁게(40ch)`는 카드/배너 같은 짧은 문구에 적합합니다.",
+            },
+          ],
+        };
+      case "button":
+        return {
+          title: "버튼 블록 튜토리얼",
+          description:
+            "폼 제출이나 링크 이동을 위한 CTA 버튼을 만들 때 사용하는 블록입니다. 라벨, 링크(URL), 정렬, 색상/크기를 조절해 원하는 액션 버튼을 구성해 보세요.",
+          properties: [
+            {
+              label: "버튼 텍스트",
+              description:
+                "버튼 위에 표시될 문구입니다. 예: '지금 시작하기', '문의 남기기'. 짧고 행동을 유도하는 문장을 사용하는 것이 좋습니다.",
+            },
+            {
+              label: "가로 패딩 (px)",
+              description:
+                "버튼 양 옆의 여백을 조절합니다. 값이 클수록 버튼이 가로로 넓어져 더 강조됩니다.",
+            },
+            {
+              label: "세로 패딩 (px)",
+              description:
+                "버튼 위·아래 여백을 조절합니다. 값이 클수록 버튼 높이가 높아져 더 눈에 띱니다.",
+            },
+            {
+              label: "버튼 링크",
+              description:
+                "버튼 클릭 시 이동할 URL 또는 앵커(#section)입니다. 외부 페이지, 페이지 내 섹션, 폼 제출 엔드포인트 등으로 연결할 수 있습니다.",
+            },
+            {
+              label: "정렬",
+              description:
+                "해당 버튼이 포함된 영역 안에서 왼쪽/가운데/오른쪽 중 어디에 위치할지 결정합니다. 주요 CTA 버튼은 가운데 정렬이 많이 쓰입니다.",
+            },
+            {
+              label: "텍스트 색상",
+              description:
+                "버튼 라벨 글자 색입니다. 채움 색상과 충분한 대비가 나도록 설정해야 가독성이 좋습니다.",
+            },
+            {
+              label: "스타일",
+              description:
+                "버튼 외형 스타일입니다. '채움'은 꽉 찬 스타일, '외곽선'은 테두리만 있는 스타일, '고스트'는 배경 없이 텍스트/테두리만 있는 스타일입니다.",
+            },
+            {
+              label: "채움 색상",
+              description:
+                "채움 스타일에서 버튼 내부를 채우는 색입니다. 브랜드 메인 색이나 강조 색을 사용하면 좋습니다.",
+            },
+            {
+              label: "외곽선 색상",
+              description:
+                "외곽선/고스트 스타일에서 버튼 테두리 색입니다. 배경색과의 대비를 고려해 설정합니다.",
+            },
+            {
+              label: "모서리 둥글기",
+              description:
+                "버튼 모서리를 얼마나 둥글게 처리할지 결정합니다. '없음'은 각진 버튼, '완전 둥글게'는 알약 모양 버튼입니다.",
+            },
+            {
+              label: "버튼 너비 모드 / 버튼 고정 너비",
+              description:
+                "버튼이 컨테이너 너비에 맞춰 늘어날지(전체 폭), 내용 길이에 맞출지(자동), 고정 px 너비를 가질지 결정합니다.",
+            },
+            {
+              label: "버튼 크기",
+              description:
+                "버튼 라벨 텍스트의 폰트 크기입니다. 중요한 CTA 버튼은 주변 텍스트보다 조금 더 크게 설정하면 좋습니다.",
+            },
+            {
+              label: "줄 간격 / 글자 간격",
+              description:
+                "버튼 라벨의 행간과 자간을 조절합니다. 글자가 너무 답답해 보이면 자간을 약간 넓히고, 여러 줄 버튼 문구는 줄 간격을 조금 넓혀 주세요.",
+            },
+          ],
+        };
+      case "image":
+        return {
+          title: "이미지 블록 튜토리얼",
+          description:
+            "배너, 썸네일, 설명 이미지를 배치할 때 사용하는 블록입니다. 외부 이미지 URL을 입력하거나 업로드 이미지를 선택하고, 너비/정렬/모서리 둥글기를 조절해 레이아웃에 맞게 배치해 보세요.",
+          properties: [
+            {
+              label: "이미지 소스",
+              description:
+                "이미지를 외부 URL에서 가져올지(URL), 빌더에 업로드한 에셋을 사용할지(파일 업로드) 선택합니다.",
+            },
+            {
+              label: "이미지 URL / 이미지 파일 업로드",
+              description:
+                "URL 모드에서는 외부 이미지 주소를 입력하고, 업로드 모드에서는 로컬 이미지를 업로드해 `/api/image/:id` 형식으로 관리합니다.",
+            },
+            {
+              label: "대체 텍스트",
+              description:
+                "이미지가 로드되지 않거나 스크린리더를 사용하는 사용자에게 보여질 설명 텍스트입니다. 이미지가 전달하는 의미를 한두 문장으로 작성해 주세요.",
+            },
+            {
+              label: "카드 배경색",
+              description:
+                "이미지를 감싸는 카드 영역의 배경색입니다. 투명한 PNG 아이콘이나 로고를 올릴 때 배경을 살짝 깔아주면 더 잘 보입니다.",
+            },
+            {
+              label: "정렬",
+              description:
+                "이미지가 포함된 영역 안에서 왼쪽/가운데/오른쪽 중 어디에 위치할지 결정합니다.",
+            },
+            {
+              label: "너비 모드 / 고정 너비 (px)",
+              description:
+                "이미지를 내용 크기에 맞출지(auto) 또는 px 단위로 고정된 너비를 사용할지 선택합니다. 썸네일 그리드에서는 고정 너비를 사용하는 편이 레이아웃이 안정적입니다.",
+            },
+            {
+              label: "모서리 둥글기",
+              description:
+                "이미지 카드 모서리 둥글기를 px 단위로 조절합니다. 아바타/아이콘은 완전 둥글게, 일반 사진은 살짝 둥글게 설정하면 자연스럽습니다.",
+            },
+          ],
+        };
+      case "list":
+        return {
+          title: "리스트 블록 튜토리얼",
+          description:
+            "불릿/번호 리스트를 만들 때 사용하는 블록입니다. 아이템 텍스트를 수정하고, 정렬/불릿 스타일을 바꿔 체크리스트나 단계별 안내 등을 표현할 수 있습니다.",
+          properties: [
+            {
+              label: "리스트 아이템 (줄바꿈으로 구분)",
+              description:
+                "각 줄이 하나의 리스트 항목이 됩니다. 들여쓰기를 이용한 중첩 리스트는 TDD 기준의 변환 로직에 따라 자동으로 트리 구조로 변환됩니다.",
+            },
+            {
+              label: "정렬",
+              description:
+                "리스트 전체를 왼쪽/가운데/오른쪽 중 어디에 정렬할지 결정합니다. 체크리스트는 왼쪽 정렬, 특징 요약은 가운데 정렬이 자주 사용됩니다.",
+            },
+            {
+              label: "글자 크기 (px)",
+              description:
+                "리스트 텍스트의 폰트 크기를 조절합니다. 본문보다 약간 작게 설정하면 보조 정보 느낌을 줄 수 있습니다.",
+            },
+            {
+              label: "줄 간격",
+              description:
+                "리스트 항목 내부의 행간을 조절합니다. 항목 내용이 길어질수록 1.5~1.8 정도의 넉넉한 값을 추천합니다.",
+            },
+            {
+              label: "텍스트 색상",
+              description:
+                "리스트 텍스트의 색상입니다. 배경색과의 대비를 고려해 본문과 동일하거나 약간 연한 색상을 사용할 수 있습니다.",
+            },
+            {
+              label: "블록 배경색",
+              description:
+                "리스트 전체 카드의 배경색입니다. 단계별 안내나 체크리스트 박스를 강조하는 용도로 사용할 수 있습니다.",
+            },
+            {
+              label: "불릿 스타일",
+              description:
+                "불릿(●/○/■) 또는 번호(1., a., i.) 형식을 선택합니다. 숫자/알파벳/로마 숫자 스타일을 선택하면 자동으로 순서형 리스트(ordered)가 됩니다.",
+            },
+            {
+              label: "아이템 간 여백 (px)",
+              description:
+                "각 리스트 항목 사이의 세로 간격입니다. 설명이 긴 항목이 많다면 여백을 넉넉히 두어 가독성을 확보하세요.",
+            },
+          ],
+        };
+      case "divider":
+        return {
+          title: "구분선 블록 튜토리얼",
+          description:
+            "섹션과 섹션 사이를 나누거나 콘텐츠를 시각적으로 구분할 때 사용하는 블록입니다. 정렬, 두께, 길이, 색상, 여백을 조절해 페이지 흐름을 정리해 보세요.",
+          properties: [
+            {
+              label: "정렬",
+              description:
+                "구분선을 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
+            },
+            {
+              label: "두께",
+              description:
+                "선의 두께입니다. '얇게'는 가벼운 보조 구분선, '보통'은 섹션 경계를 확실히 나눌 때 사용합니다.",
+            },
+            {
+              label: "길이 모드 / 고정 길이 (px)",
+              description:
+                "구분선을 전체 폭으로 쓸지, 내용에 맞출지, 또는 px 단위의 고정 길이를 사용할지 선택합니다.",
+            },
+            {
+              label: "선 색상",
+              description:
+                "구분선 컬러입니다. 너무 진한 색보다는 섹션 배경보다 살짝 진한 정도의 중간 톤을 추천합니다.",
+            },
+            {
+              label: "위/아래 여백",
+              description:
+                "구분선 위·아래에 들어가는 공백입니다. 값이 클수록 섹션이 더 명확하게 나뉘어 보입니다.",
+            },
+          ],
+        };
+      case "section":
+        return {
+          title: "섹션 블록 튜토리얼",
+          description:
+            "레이아웃의 큰 덩어리를 나누는 컨테이너 블록입니다. 배경색/배경 이미지/비디오, 위아래 패딩, 너비를 설정해 Hero, Features, Footer 같은 영역을 구성할 수 있습니다.",
+          properties: [
+            {
+              label: "배경 색상",
+              description:
+                "섹션 전체의 기본 배경색입니다. 페이지의 큰 분위기를 결정하는 요소이므로, 섹션 간 배경 대비를 적절히 주는 것이 좋습니다.",
+            },
+            {
+              label: "배경 이미지 소스 / URL / 파일 업로드",
+              description:
+                "섹션 배경으로 사용할 이미지를 외부 URL 또는 업로드 파일로 지정합니다. Hero 배경, 패턴, 질감 이미지를 설정할 때 사용합니다.",
+            },
+            {
+              label: "배경 이미지 크기 / 위치 / 반복",
+              description:
+                "cover/contain/auto로 크기를 조절하고, 프리셋 또는 X/Y 퍼센트로 위치를 조절하며, 반복 여부를 설정해 패턴 형태로 사용할 수 있습니다.",
+            },
+            {
+              label: "배경 비디오 소스 / URL / 파일 업로드",
+              description:
+                "섹션 배경에 비디오를 설정합니다. 시선을 끌어야 하는 Hero 영역 등에 사용하되, 가독성 저하를 막기 위해 텍스트 대비를 꼭 확인하세요.",
+            },
+            {
+              label: "세로 패딩",
+              description:
+                "섹션 위·아래 여백입니다. 값이 클수록 섹션이 여유 있고 강조되어 보입니다. Hero 섹션은 넉넉한 패딩을, 보조 섹션은 중간 정도를 추천합니다.",
+            },
+          ],
+        };
+      case "video":
+        return {
+          title: "비디오 블록 튜토리얼",
+          description:
+            "YouTube/영상 URL 또는 직접 호스팅한 비디오를 삽입할 때 사용하는 블록입니다. 동영상 주소를 입력하고, 비율/정렬/재생 옵션을 조정해 페이지에 맞게 배치해 보세요.",
+          properties: [
+            {
+              label: "비디오 소스 / 비디오 URL / 비디오 파일 업로드",
+              description:
+                "외부 동영상 URL(YouTube, Vimeo 등)을 직접 입력하거나, 비디오 파일을 업로드해 `/api/video/:id` 형태로 사용할 수 있습니다.",
+            },
+            {
+              label: "포스터 이미지 URL",
+              description:
+                "동영상 재생 전/로딩 중에 보여줄 썸네일 이미지입니다. 영상의 핵심 장면이나 대표 이미지를 사용하면 클릭률을 높일 수 있습니다.",
+            },
+            {
+              label: "카드 배경색",
+              description:
+                "비디오가 들어가는 카드 영역의 배경색입니다. 주변 섹션과의 대비를 위해 살짝 어둡거나 밝은 색을 설정할 수 있습니다.",
+            },
+            {
+              label: "비디오 정렬",
+              description:
+                "비디오를 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
+            },
+            {
+              label: "비디오 너비 모드 / 고정 너비 (px)",
+              description:
+                "비디오를 내용 너비에 맞출지, 가로 전체를 채울지, 특정 px 너비로 고정할지 선택합니다.",
+            },
+            {
+              label: "카드 패딩 / 카드 모서리 둥글기",
+              description:
+                "비디오 주변 카드의 안쪽 여백과 모서리 둥글기입니다. 카드형 레이아웃에서는 적당한 패딩과 둥근 모서리를 주면 디자인이 정돈됩니다.",
+            },
+            {
+              label: "시작 시점 (초) / 종료 시점 (초)",
+              description:
+                "영상의 특정 구간만 재생하고 싶을 때 사용하는 옵션입니다. 예를 들어 10초~30초만 재생하도록 설정할 수 있습니다.",
+            },
+            {
+              label: "화면 비율",
+              description:
+                "동영상 프레임 비율입니다. 대부분의 웹 영상은 16:9를 사용하며, 정사각형/세로형 콘텐츠는 1:1, 4:3 등을 사용할 수 있습니다.",
+            },
+            {
+              label: "자동 재생 / 반복 재생 / 음소거 / 재생 컨트롤 표시",
+              description:
+                "자동 재생/반복 재생/음소거/컨트롤 표시 여부를 설정합니다. 자동 재생 영상은 보통 음소거를 함께 켜 두는 것이 좋습니다.",
+            },
+          ],
+        };
+      case "form":
+        return {
+          title: "폼 컨트롤러 블록 튜토리얼",
+          description:
+            "입력 필드(formInput/select/checkbox/radio)를 하나의 폼으로 묶는 컨트롤러입니다. 전송 대상, 전송 포맷, 너비, 여백 등을 설정해 네이티브 폼 제출을 구성하고, 필드 ID를 연결해 폼 구조를 완성할 수 있습니다.",
+          properties: [
+            {
+              label: "전송 대상 / Webhook 설정",
+              description:
+                "폼 데이터를 내부 처리로만 사용할지, 외부 Webhook/Google Sheets 등으로 전송할지 결정하고, 목적지 URL/전송 포맷/HTTP 메서드 등을 설정합니다.",
+            },
+            {
+              label: "추가 파라미터",
+              description:
+                "`key=value` 형식으로 줄바꿈해 작성하면, 모든 폼 제출에 공통으로 포함될 추가 파라미터를 지정할 수 있습니다. 예: `source=landing`.",
+            },
+            {
+              label: "폼 너비 모드 / 폼 고정 너비 (px)",
+              description:
+                "폼 전체의 가로 폭을 자동/전체 폭/고정 px 값 중에서 선택합니다. 문의 폼은 보통 480~640px 정도의 고정 폭이 읽기 좋습니다.",
+            },
+            {
+              label: "폼 위/아래 여백 (px)",
+              description:
+                "폼 블록 위·아래에 들어가는 공백입니다. 페이지 내 다른 섹션과의 간격을 조절할 때 사용합니다.",
+            },
+            {
+              label: "성공 메시지 / 에러 메시지",
+              description:
+                "폼 전송 성공 또는 실패 시 사용자에게 보여줄 텍스트입니다. 명확하고 친절한 문구로 작성하는 것이 좋습니다.",
+            },
+            {
+              label: "폼 필드 매핑",
+              description:
+                "폼 컨트롤러와 연결할 입력 필드(formInput/select/checkbox/radio)를 체크박스로 선택합니다. 체크된 필드만 실제 폼 제출 payload에 포함됩니다.",
+            },
+            {
+              label: "Submit 버튼",
+              description:
+                "폼 제출을 담당할 버튼 블록을 지정합니다. 별도 버튼 블록을 만들어 이 컨트롤러와 연결하면, 해당 버튼 클릭 시 폼이 제출됩니다.",
+            },
+          ],
+        };
+      case "formInput":
+        return {
+          title: "폼 입력 블록 튜토리얼",
+          description:
+            "이름, 이메일 등 한 줄 텍스트 또는 긴 텍스트 입력 필드를 만들 때 사용하는 블록입니다. 레이블, 플레이스홀더, 필수 여부, 너비 등을 설정해 폼 컨트롤러와 함께 사용합니다.",
+          properties: [
+            {
+              label: "라벨 타입 / 필드 라벨",
+              description:
+                "입력 필드 위나 옆에 표시될 설명입니다. 텍스트 또는 이미지로 라벨을 구성할 수 있으며, 사용자가 어떤 값을 입력해야 하는지 명확하게 알려줍니다.",
+            },
+            {
+              label: "라벨 이미지 URL / 대체 텍스트",
+              description:
+                "라벨을 이미지로 사용할 때 경로와 alt 텍스트를 지정합니다. 로고형 라벨이나 아이콘 기반 UI를 만들 때 활용할 수 있습니다.",
+            },
+            {
+              label: "전송 키",
+              description:
+                "이 입력값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
+            },
+            {
+              label: "필드 타입",
+              description:
+                "텍스트/이메일/긴 텍스트 중 어떤 형태의 입력을 받을지 결정합니다. 이메일 타입은 브라우저 기본 이메일 검증을 활용할 수 있습니다.",
+            },
+            {
+              label: "Placeholder",
+              description:
+                "입력 전 필드 안에 흐릿하게 보여줄 안내 문구입니다. 예: '이메일을 입력해 주세요'.",
+             },
+             {
+               label: "필수 필드",
+               description:
+                "체크 시 이 필드는 반드시 채워야 합니다. 이름/이메일 같은 필수 값에는 활성화하고, 선택 항목에는 비활성화하는 것을 추천합니다.",
+             },
+             {
+               label: "텍스트 크기 / 줄간격 / 자간",
+               description:
+                "입력 값의 폰트 크기(px), 줄간격(px), 자간(px)을 조절해 폼 필드의 가독성과 분위기를 세밀하게 튜닝합니다.",
+             },
+             {
+               label: "텍스트 정렬",
+               description:
+                "필드 안 텍스트를 왼쪽/가운데/오른쪽 중 어디에 정렬할지 결정합니다. 일반 입력은 왼쪽 정렬을 권장합니다.",
+             },
+             {
+               label: "레이아웃 / 라벨/필드 간격",
+               description:
+                "라벨과 필드를 세로(stack) 또는 가로(inline)로 배치하고, inline 모드에서 라벨과 입력 사이 간격(px)을 조절합니다.",
+             },
+             {
+               label: "너비 / 필드 고정 너비",
+               description:
+                "필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다. 짧은 필드는 고정 값, 긴 입력은 전체 폭을 사용할 수 있습니다.",
+             },
+             {
+               label: "필드 가로/세로 패딩",
+               description:
+                "입력 상자 안쪽 여백을 조절합니다. 값이 클수록 필드가 커지고 누르기/입력하기 편해집니다.",
+             },
+             {
+               label: "필드 텍스트/채움/테두리 색상",
+               description:
+                "입력 텍스트, 배경, 테두리 색상을 각각 조절합니다. 에러 상태/강조 상태 등을 표현할 때 조합해서 사용할 수 있습니다.",
+             },
+             {
+               label: "필드 모서리 둥글기",
+               description:
+                "입력 상자의 모서리를 얼마나 둥글게 할지 결정합니다. 페이지의 전체 디자인 톤과 맞춰 사용하세요.",
+             },
+          ],
+        };
+      case "formSelect":
+        return {
+          title: "폼 셀렉트 블록 튜토리얼",
+          description:
+            "드롭다운 선택 필드를 만들 때 사용하는 블록입니다. 옵션 목록과 기본 선택값, 너비를 설정해 폼 컨트롤러와 함께 사용합니다.",
+          properties: [
+            {
+              label: "라벨 타입 / 필드 라벨",
+              description:
+                "셀렉트 필드의 제목 역할을 하는 라벨입니다. 텍스트 또는 이미지로 구성할 수 있으며, 선택해야 할 값의 의미를 설명합니다.",
+            },
+            {
+              label: "전송 키",
+              description:
+                "선택된 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
+            },
+            {
+              label: "옵션",
+              description:
+                "사용자가 선택할 수 있는 옵션 목록입니다. 라벨과 value를 함께 설정하며, '옵션 추가' 버튼으로 새 옵션을 만들 수 있습니다.",
+            },
+            {
+              label: "필수 필드",
+              description:
+                "체크 시 반드시 하나의 옵션을 선택해야 합니다. 중요 선택 항목에는 필수로 설정하는 것을 권장합니다.",
+            },
+            {
+              label: "셀렉트 텍스트 크기 / 줄간격 / 자간",
+              description:
+                "드롭다운 필드의 텍스트 타이포그래피를 px 단위로 조절해 가독성과 분위기를 맞춥니다.",
+            },
+            {
+              label: "필드 너비 / 필드 고정 너비",
+              description:
+                "셀렉트 필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다.",
+            },
+            {
+              label: "셀렉트 가로/세로 패딩",
+              description:
+                "드롭다운 안쪽 여백을 조절해 클릭 영역과 시각적 무게감을 조정합니다.",
+            },
+            {
+              label: "필드 텍스트/채움/테두리 색상",
+              description:
+                "선택 영역의 텍스트, 배경, 테두리 색상을 설정합니다. 폼 전체 톤과 잘 어울리는 색상을 사용하는 것이 좋습니다.",
+            },
+            {
+              label: "필드 모서리 둥글기",
+              description:
+                "셀렉트 박스의 모서리를 얼마나 둥글게 표시할지 결정합니다.",
+            },
+          ],
+        };
+      case "formCheckbox":
+        return {
+          title: "폼 체크박스 블록 튜토리얼",
+          description:
+            "여러 항목 중 복수 선택이 필요한 경우 사용하는 체크박스 그룹 블록입니다. 그룹 타이틀과 옵션 라벨/이미지를 설정해 동의 항목이나 관심사 선택 등을 구성할 수 있습니다.",
+          properties: [
+            {
+              label: "그룹 타이틀 타입 / 그룹 타이틀",
+              description:
+                "체크박스 그룹 전체의 제목입니다. 텍스트 또는 이미지로 표현할 수 있으며, 사용자가 어떤 범주를 선택하는지 알려줍니다.",
+            },
+            {
+              label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
+              description:
+                "그룹 라벨을 이미지로 사용할 때, URL 또는 업로드된 이미지를 선택합니다.",
+            },
+            {
+              label: "전송 키",
+              description:
+                "체크된 옵션들의 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
+            },
+            {
+              label: "옵션 / 옵션 이미지 소스",
+              description:
+                "각 체크박스 옵션의 라벨/값/이미지를 설정합니다. URL 또는 업로드 이미지로 옵션별 아이콘을 붙일 수 있습니다.",
+            },
+            {
+              label: "필수 필드",
+              description:
+                "체크 시 하나 이상 옵션을 선택해야 합니다. 약관 동의 등 필수 동의 항목에 사용합니다.",
+            },
+            {
+              label: "체크박스 텍스트 크기 / 줄간격 / 자간",
+              description:
+                "체크박스 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 항목이 길어질수록 줄간격을 넉넉히 두는 것이 좋습니다.",
+            },
+          ],
+        };
+      case "formRadio":
+        return {
+          title: "폼 라디오 블록 튜토리얼",
+          description:
+            "여러 옵션 중 하나만 선택해야 할 때 사용하는 라디오 버튼 그룹 블록입니다. 옵션 라벨/이미지와 기본 선택값을 설정해 요금제 선택 등 단일 선택 시나리오를 구성할 수 있습니다.",
+          properties: [
+            {
+              label: "그룹 타이틀 타입 / 그룹 타이틀",
+              description:
+                "라디오 그룹의 제목입니다. 요금제 이름, 질문 문구 등 단일 선택의 맥락을 설명합니다.",
+            },
+            {
+              label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
+              description:
+                "그룹 라벨을 이미지로 사용할 때, URL 또는 업로드 이미지를 선택합니다.",
+            },
+            {
+              label: "전송 키",
+              description:
+                "선택된 하나의 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
+            },
+            {
+              label: "옵션 / 옵션 이미지 소스",
+              description:
+                "각 라디오 옵션의 라벨/값/이미지를 설정합니다. 옵션별 아이콘이나 썸네일을 붙여 더 풍부한 선택 UI를 만들 수 있습니다.",
+            },
+            {
+              label: "필수 필드",
+              description:
+                "체크 시 반드시 하나의 옵션을 선택해야 합니다. 요금제/유형 선택처럼 반드시 선택이 필요한 경우에 사용합니다.",
+            },
+            {
+              label: "라디오 텍스트 크기 / 줄간격 / 자간",
+              description:
+                "라디오 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 옵션 설명이 긴 경우 줄간격을 넉넉히 두세요.",
+            },
+          ],
+        };
+      default:
+        return {
+          title: "블록 튜토리얼",
+          description: "이 블록에 대한 자세한 도움말은 추후 추가될 예정입니다.",
+        };
+    }
+  };
+
+  return (
+    <aside
+      data-testid="properties-sidebar"
+      className="w-80 p-4 text-sm border-l border-slate-800 flex flex-col gap-4 overflow-auto pb-scroll bg-slate-950/40"
+      onKeyDownCapture={(e) => {
+        // 속성 패널 안에서 발생한 키 입력은 에디터 단축키/텍스트 블록 편집으로 전달되지 않도록 막는다.
+        e.stopPropagation();
+      }}
+    >
+      <h2 className="font-medium mb-2 flex items-center gap-2 text-slate-200">
+        <SlidersHorizontal className="w-4 h-4 text-sky-400" aria-hidden="true" />
+        <span>속성 패널</span>
+      </h2>
+      {selectedBlockId ? (
+        <div className="space-y-3">
+          <div className="flex gap-2 text-[11px]">
+            <button
+              type="button"
+              className="flex-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-100 hover:bg-red-900/60 hover:border-red-700"
+              onClick={() => removeBlock(selectedBlockId)}
+            >
+              <span className="inline-flex items-center gap-2">
+                <Trash2 className="w-3 h-3" aria-hidden="true" />
+                <span>블록 삭제</span>
+              </span>
+            </button>
+            <button
+              type="button"
+              className="flex-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-100 hover:bg-slate-800"
+              onClick={() => duplicateBlock(selectedBlockId)}
+            >
+              <span className="inline-flex items-center gap-2">
+                <Copy className="w-3 h-3" aria-hidden="true" />
+                <span>블록 복제</span>
+              </span>
+            </button>
+          </div>
+          <div className="flex justify-end text-[11px]">
+            <button
+              type="button"
+              className="inline-flex items-center gap-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-100 hover:bg-slate-800"
+              onClick={() => setHelpOpen(true)}
+            >
+              <HelpCircle className="w-3 h-3" aria-hidden="true" />
+              <span>HELP</span>
+            </button>
+          </div>
+          {(() => {
+            const selectedBlock = blocks.find((b) => b.id === selectedBlockId);
+            if (!selectedBlock) return null;
+
+            if (selectedBlock.type === "text") {
+              const textProps = selectedBlock.props as TextBlockProps;
+
+              return (
+                <TextPropertiesPanel
+                  textProps={textProps}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                  editingBlockId={editingBlockId}
+                  setEditingText={setEditingText}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "button") {
+              const buttonProps = selectedBlock.props as ButtonBlockProps;
+
+              return (
+                <ButtonPropertiesPanel
+                  buttonProps={buttonProps}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "list") {
+              const listProps = selectedBlock.props as ListBlockProps;
+
+              return (
+                <ListPropertiesPanel
+                  listProps={listProps}
+                  selectedBlockId={selectedBlockId}
+                  selectedListItemId={selectedListItemId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "divider") {
+              const dividerProps = selectedBlock.props as any;
+
+              return (
+                <DividerPropertiesPanel
+                  dividerProps={dividerProps}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "image") {
+              const imageProps = selectedBlock.props as any;
+
+              return (
+                <ImagePropertiesPanel
+                  imageProps={imageProps}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "video") {
+              const videoProps = selectedBlock.props as VideoBlockProps;
+
+              return (
+                <VideoPropertiesPanel
+                  videoProps={videoProps}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "section") {
+              const sectionProps = selectedBlock.props as SectionBlockProps;
+
+              return (
+                <SectionPropertiesPanel
+                  sectionProps={sectionProps}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "formInput") {
+              return (
+                <FormInputPropertiesPanel
+                  block={selectedBlock}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "formSelect") {
+              return (
+                <FormSelectPropertiesPanel
+                  block={selectedBlock}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "formCheckbox") {
+              return (
+                <FormCheckboxPropertiesPanel
+                  block={selectedBlock}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "formRadio") {
+              return (
+                <FormRadioPropertiesPanel
+                  block={selectedBlock}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            if (selectedBlock.type === "form") {
+              return (
+                <FormControllerPanel
+                  block={selectedBlock}
+                  blocks={blocks}
+                  selectedBlockId={selectedBlockId}
+                  updateBlock={(id, partial) => updateBlock(id, partial as any)}
+                />
+              );
+            }
+
+            return null;
+          })()}
+        </div>
+      ) : (
+        <ProjectPropertiesPanel />
+      )}
+      {helpOpen && (() => {
+        const help = getHelpContentForSelectedBlock();
+        if (!help) return null;
+
+        return (
+          <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/60">
+            <div className="w-full max-w-md rounded-lg border border-slate-700 bg-slate-900 p-4 text-xs text-slate-100 shadow-xl">
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="text-sm font-medium">{help.title}</h3>
+                <button
+                  type="button"
+                  className="text-slate-400 hover:text-slate-100 text-xs"
+                  onClick={() => setHelpOpen(false)}
+                >
+                  닫기
+                </button>
+              </div>
+              <p className="text-[11px] text-slate-200 whitespace-pre-line">{help.description}</p>
+              {help.properties && help.properties.length > 0 && (
+                <div className="mt-3 border-t border-slate-700 pt-2 space-y-2">
+                  <h4 className="text-[11px] font-semibold text-slate-200">속성별 설명</h4>
+                  <ul className="space-y-1">
+                    {help.properties.map((prop) => (
+                      <li key={prop.label}>
+                        <div className="text-[11px] font-semibold text-slate-100">{prop.label}</div>
+                        <div className="text-[11px] text-slate-300">{prop.description}</div>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </div>
+        );
+      })()}
+    </aside>
+  );
+}

src/app/editor/panels/SectionPropertiesPanel.tsx

@@ -0,0 +1,744 @@
+"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;
+  selectedBlockId: string;
+  updateBlock: (id: string, partial: Partial<SectionBlockProps>) => void;
+};
+
+export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBlock }: SectionPropertiesPanelProps) {
+  const backgroundSource: "none" | "url" | "upload" = (() => {
+    const src = sectionProps.backgroundImageSrc?.trim();
+    const type = sectionProps.backgroundImageSourceType;
+
+    if (type === "asset") return "upload";
+    if (type === "externalUrl") return "url";
+
+    if (src && src.startsWith("/api/image/")) return "upload";
+    if (src) return "url";
+
+    return "none";
+  })();
+
+  const positionMode: "preset" | "custom" = sectionProps.backgroundImagePositionMode ?? "preset";
+
+  const backgroundVideoSource: "none" | "url" | "upload" = (() => {
+    const src = sectionProps.backgroundVideoSrc?.trim();
+    const type = sectionProps.backgroundVideoSourceType;
+
+    if (type === "asset") return "upload";
+    if (type === "externalUrl") return "url";
+
+    if (src && src.startsWith("/api/video/")) return "upload";
+    if (src) return "url";
+
+    return "none";
+  })();
+
+  return (
+    <>
+      {/* 섹션 배경: 커스텀 색상 피커만 사용 */}
+      <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);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+        />
+      </div>
+
+      {/* 섹션 배경 이미지 */}
+      <div className="mt-3 space-y-2 text-xs text-slate-400">
+        <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={backgroundSource}
+            onChange={(e) => {
+              const next = e.target.value as "none" | "url" | "upload";
+              if (next === "none") {
+                updateBlock(selectedBlockId, {
+                  backgroundImageSrc: undefined,
+                  backgroundImageSourceType: undefined,
+                  backgroundImageAssetId: null,
+                } as any);
+              } else if (next === "url") {
+                updateBlock(selectedBlockId, {
+                  backgroundImageSourceType: "externalUrl",
+                  backgroundImageAssetId: null,
+                } as any);
+              } else {
+                updateBlock(selectedBlockId, {
+                  backgroundImageSourceType: "asset",
+                } as any);
+              }
+            }}
+          >
+            <option value="none">없음</option>
+            <option value="url">URL</option>
+            <option value="upload">파일 업로드</option>
+          </select>
+        </label>
+
+        {backgroundSource === "url" && (
+          <label className="flex flex-col gap-1">
+            <span>배경 이미지 URL</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="배경 이미지 URL"
+              value={sectionProps.backgroundImageSrc ?? ""}
+              onChange={(e) => {
+                const value = e.target.value;
+                updateBlock(selectedBlockId, {
+                  backgroundImageSrc: value,
+                  backgroundImageSourceType: "externalUrl",
+                  backgroundImageAssetId: null,
+                } as any);
+              }}
+            />
+          </label>
+        )}
+
+        {backgroundSource === "upload" && (
+          <label className="flex flex-col gap-1">
+            <span>배경 이미지 파일 업로드</span>
+            <input
+              type="file"
+              accept="image/*"
+              className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+              aria-label="배경 이미지 파일 업로드"
+              onChange={async (event) => {
+                const file = event.target.files?.[0];
+                if (!file) return;
+
+                try {
+                  const formData = new FormData();
+                  formData.append("file", file);
+
+                  const response = await fetch("/api/image", {
+                    method: "POST",
+                    body: formData,
+                  });
+
+                  if (!response.ok) {
+                    console.error("배경 이미지 업로드 실패", await response.text());
+                    return;
+                  }
+
+                  const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                  const servedUrl = data.servedUrl ?? `/api/image/${data.id}`;
+
+                  updateBlock(selectedBlockId, {
+                    backgroundImageSrc: servedUrl,
+                    backgroundImageSourceType: "asset",
+                    backgroundImageAssetId: data.id,
+                  } as any);
+                } catch (error) {
+                  console.error("배경 이미지 업로드 중 오류", error);
+                } finally {
+                  event.target.value = "";
+                }
+              }}
+            />
+          </label>
+        )}
+        {backgroundSource !== "none" && (
+          <>
+            <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={positionMode}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    backgroundImagePositionMode: e.target.value as SectionBlockProps["backgroundImagePositionMode"],
+                  } as any)
+                }
+              >
+                <option value="preset">프리셋</option>
+                <option value="custom">커스텀 (X/Y)</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={sectionProps.backgroundImageSize ?? "cover"}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    backgroundImageSize: e.target.value as SectionBlockProps["backgroundImageSize"],
+                  } as any)
+                }
+              >
+                <option value="cover">cover</option>
+                <option value="contain">contain</option>
+                <option value="auto">auto</option>
+              </select>
+            </label>
+
+            {positionMode === "preset" && (
+              <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={sectionProps.backgroundImagePosition ?? "center"}
+                  onChange={(e) =>
+                    updateBlock(selectedBlockId, {
+                      backgroundImagePosition: e.target.value as SectionBlockProps["backgroundImagePosition"],
+                    } as any)
+                  }
+                >
+                  <option value="center">가운데</option>
+                  <option value="top">위</option>
+                  <option value="bottom">아래</option>
+                  <option value="left">왼쪽</option>
+                  <option value="right">오른쪽</option>
+                </select>
+              </label>
+            )}
+
+            {positionMode === "custom" && (
+              <>
+                <NumericPropertyControl
+                  label="배경 이미지 가로 위치"
+                  unitLabel="(%)"
+                  value={
+                    typeof sectionProps.backgroundImagePositionXPercent === "number"
+                      ? sectionProps.backgroundImagePositionXPercent
+                      : 50
+                  }
+                  min={0}
+                  max={100}
+                  step={1}
+                  presets={[
+                    { id: "left", label: "왼쪽", value: 0 },
+                    { id: "center", label: "가운데", value: 50 },
+                    { id: "right", label: "오른쪽", value: 100 },
+                  ]}
+                  onChangeValue={(next) =>
+                    updateBlock(selectedBlockId, {
+                      backgroundImagePositionMode: "custom",
+                      backgroundImagePositionXPercent: next,
+                    } as any)
+                  }
+                />
+
+                <NumericPropertyControl
+                  label="배경 이미지 세로 위치"
+                  unitLabel="(%)"
+                  value={
+                    typeof sectionProps.backgroundImagePositionYPercent === "number"
+                      ? sectionProps.backgroundImagePositionYPercent
+                      : 50
+                  }
+                  min={0}
+                  max={100}
+                  step={1}
+                  presets={[
+                    { id: "top", label: "위", value: 0 },
+                    { id: "center", label: "가운데", value: 50 },
+                    { id: "bottom", label: "아래", value: 100 },
+                  ]}
+                  onChangeValue={(next) =>
+                    updateBlock(selectedBlockId, {
+                      backgroundImagePositionMode: "custom",
+                      backgroundImagePositionYPercent: next,
+                    } as any)
+                  }
+                />
+              </>
+            )}
+
+            <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={sectionProps.backgroundImageRepeat ?? "no-repeat"}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    backgroundImageRepeat: e.target.value as SectionBlockProps["backgroundImageRepeat"],
+                  } as any)
+                }
+              >
+                <option value="no-repeat">반복 없음</option>
+                <option value="repeat">가로/세로 반복</option>
+                <option value="repeat-x">가로 반복</option>
+                <option value="repeat-y">세로 반복</option>
+              </select>
+            </label>
+          </>
+        )}
+      </div>
+
+      {/* 섹션 배경 비디오 */}
+      <div className="mt-3 space-y-2 text-xs text-slate-400">
+        <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={backgroundVideoSource}
+            onChange={(e) => {
+              const next = e.target.value as "none" | "url" | "upload";
+              if (next === "none") {
+                updateBlock(selectedBlockId, {
+                  backgroundVideoSrc: undefined,
+                  backgroundVideoSourceType: undefined,
+                  backgroundVideoAssetId: null,
+                } as any);
+              } else if (next === "url") {
+                updateBlock(selectedBlockId, {
+                  backgroundVideoSourceType: "externalUrl",
+                  backgroundVideoAssetId: null,
+                } as any);
+              } else {
+                updateBlock(selectedBlockId, {
+                  backgroundVideoSourceType: "asset",
+                } as any);
+              }
+            }}
+          >
+            <option value="none">없음</option>
+            <option value="url">URL</option>
+            <option value="upload">파일 업로드</option>
+          </select>
+        </label>
+
+        {backgroundVideoSource === "url" && (
+          <label className="flex flex-col gap-1">
+            <span>배경 비디오 URL</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="배경 비디오 URL"
+              value={sectionProps.backgroundVideoSrc ?? ""}
+              onChange={(e) => {
+                const value = e.target.value;
+                updateBlock(selectedBlockId, {
+                  backgroundVideoSrc: value,
+                  backgroundVideoSourceType: "externalUrl",
+                  backgroundVideoAssetId: null,
+                } as any);
+              }}
+            />
+          </label>
+        )}
+
+        {backgroundVideoSource === "upload" && (
+          <label className="flex flex-col gap-1">
+            <span>배경 비디오 파일 업로드</span>
+            <input
+              type="file"
+              accept="video/*"
+              className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+              aria-label="배경 비디오 파일 업로드"
+              onChange={async (event) => {
+                const file = event.target.files?.[0];
+                if (!file) return;
+
+                try {
+                  const formData = new FormData();
+                  formData.append("file", file);
+
+                  const response = await fetch("/api/video", {
+                    method: "POST",
+                    body: formData,
+                  });
+
+                  if (!response.ok) {
+                    console.error("배경 비디오 업로드 실패", await response.text());
+                    return;
+                  }
+
+                  const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                  const servedUrl = data.servedUrl ?? `/api/video/${data.id}`;
+
+                  updateBlock(selectedBlockId, {
+                    backgroundVideoSrc: servedUrl,
+                    backgroundVideoSourceType: "asset",
+                    backgroundVideoAssetId: data.id,
+                  } as any);
+                } catch (error) {
+                  console.error("배경 비디오 업로드 중 오류", error);
+                } finally {
+                  event.target.value = "";
+                }
+              }}
+            />
+          </label>
+        )}
+      </div>
+
+      {/* 세로 패딩 슬라이더 (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={(() => {
+              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 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="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] ?? { id: `${selectedBlockId}_col_1`, span: 12 };
+            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="최대 폭 (px)"
+          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="컬럼 간 간격 (px)"
+          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>
+    </>
+  );
+}

src/app/editor/panels/TextPropertiesPanel.tsx

@@ -0,0 +1,520 @@
+"use client";
+
+import type { TextBlockProps } from "@/features/editor/state/editorStore";
+import { PropertySliderField } from "@/features/editor/components/PropertySliderField";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+
+export type TextPropertiesPanelProps = {
+  textProps: TextBlockProps;
+  selectedBlockId: string;
+  updateBlock: (id: string, partial: Partial<TextBlockProps>) => void;
+  editingBlockId: string | null;
+  setEditingText: (value: string) => void;
+};
+
+export function TextPropertiesPanel({
+  textProps,
+  selectedBlockId,
+  updateBlock,
+  editingBlockId,
+  setEditingText,
+}: TextPropertiesPanelProps) {
+  const fontSizeMode = textProps.fontSizeMode ?? "scale";
+  const fallbackScale =
+    textProps.size === "sm" ? "sm" : textProps.size === "lg" ? "lg" : "base";
+  const fontSizeScale = textProps.fontSizeScale ?? fallbackScale;
+  const lineHeightMode = textProps.lineHeightMode ?? "scale";
+  const lineHeightScale = textProps.lineHeightScale ?? "normal";
+  const fontWeightMode = textProps.fontWeightMode ?? "scale";
+  const fontWeightScale = textProps.fontWeightScale ?? "normal";
+  const colorPalette = textProps.colorPalette ?? "default";
+  const maxWidthMode = textProps.maxWidthMode ?? "scale";
+  const maxWidthScale = textProps.maxWidthScale ?? "none";
+
+  const fontSizeScaleToPx: Record<NonNullable<TextBlockProps["fontSizeScale"]>, number> = {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+  };
+
+  const parsedFontSize = (() => {
+    const raw = textProps.fontSizeCustom ?? "";
+    const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
+    if (match) return Number(match[1]);
+    return fontSizeScaleToPx[fontSizeScale];
+  })();
+
+  const parsedLineHeight = (() => {
+    const raw = textProps.lineHeightCustom ?? "";
+    const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
+    if (match) return Number(match[1]);
+    return 1.5;
+  })();
+
+  // 글자 간격: 내부 저장은 em 이지만, UI 에서는 px 단위로 보여준다.
+  const parsedLetterSpacingPx = (() => {
+    const raw = textProps.letterSpacingCustom ?? "";
+    const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
+    if (match) {
+      const em = Number(match[1]);
+      if (Number.isFinite(em)) {
+        return em * 16; // 1em = 16px 기준으로 환산
+      }
+    }
+    return 0;
+  })();
+
+  const letterSpacingPreset = (() => {
+    const px = parsedLetterSpacingPx;
+    if (px <= -1) return "tighter" as const;
+    if (px < 0) return "tight" as const;
+    if (px < 1) return "normal" as const;
+    if (px < 3) return "wide" as const;
+    return "wider" as const;
+  })();
+
+  const parsedFontWeight = (() => {
+    const raw = textProps.fontWeightCustom ?? "";
+    const match = raw.match(/([0-9]{3})/);
+    if (match) return Number(match[1]);
+    switch (fontWeightScale) {
+      case "medium":
+        return 500;
+      case "semibold":
+        return 600;
+      case "bold":
+        return 700;
+      default:
+        return 400;
+    }
+  })();
+
+  return (
+    <>
+      <div className="space-y-1">
+        <p className="text-xs text-slate-400">선택한 텍스트 블록 내용</p>
+        <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={textProps.text}
+          onChange={(e) => {
+            const value = e.target.value;
+            updateBlock(selectedBlockId, { text: value });
+            if (editingBlockId === selectedBlockId) {
+              setEditingText(value);
+            }
+          }}
+        />
+      </div>
+
+      <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={textProps.align}
+            onChange={(e) => {
+              const value = e.target.value as "left" | "center" | "right";
+              updateBlock(selectedBlockId, { align: value });
+            }}
+          >
+            <option value="left">왼쪽</option>
+            <option value="center">가운데</option>
+            <option value="right">오른쪽</option>
+          </select>
+        </label>
+      </div>
+
+      <div className="space-y-1">
+        <div className="flex items-center justify-between text-[11px] text-slate-400">
+          <span>텍스트 스타일</span>
+          <div className="flex gap-1">
+            <button
+              type="button"
+              className={`px-2 py-0.5 rounded border text-[11px] ${
+                textProps.underline
+                  ? "border-sky-500 bg-sky-900/40 text-sky-100"
+                  : "border-slate-700 bg-slate-900 text-slate-300"
+              }`}
+              onClick={() => {
+                updateBlock(selectedBlockId, {
+                  underline: !textProps.underline,
+                } as any);
+              }}
+            >
+              밑줄
+            </button>
+            <button
+              type="button"
+              className={`px-2 py-0.5 rounded border text-[11px] ${
+                textProps.strike
+                  ? "border-sky-500 bg-sky-900/40 text-sky-100"
+                  : "border-slate-700 bg-slate-900 text-slate-300"
+              }`}
+              onClick={() => {
+                updateBlock(selectedBlockId, {
+                  strike: !textProps.strike,
+                } as any);
+              }}
+            >
+              가운데줄
+            </button>
+            <button
+              type="button"
+              className={`px-2 py-0.5 rounded border text-[11px] ${
+                textProps.italic
+                  ? "border-sky-500 bg-sky-900/40 text-sky-100"
+                  : "border-slate-700 bg-slate-900 text-slate-300"
+              }`}
+              onClick={() => {
+                updateBlock(selectedBlockId, {
+                  italic: !textProps.italic,
+                } as any);
+              }}
+            >
+              이탤릭
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="글자 크기"
+          unitLabel="(px)"
+          value={Number.isFinite(parsedFontSize) ? parsedFontSize : 16}
+          min={10}
+          max={72}
+          step={1}
+          presets={(
+            ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"] as NonNullable<
+              TextBlockProps["fontSizeScale"]
+            >[]
+          ).map((scale) => ({
+            id: scale,
+            label:
+              scale === "xs"
+                ? "XS"
+                : scale === "sm"
+                ? "S"
+                : scale === "base"
+                ? "M"
+                : scale === "lg"
+                ? "L"
+                : scale === "xl"
+                ? "XL"
+                : scale === "2xl"
+                ? "2XL"
+                : "3XL",
+            value: fontSizeScaleToPx[scale],
+          }))}
+          onChangeValue={(px) => {
+            const raw = textProps.fontSizeCustom ?? "";
+            const suffixMatch = raw.match(/px|rem|em|%/);
+            const suffix = suffixMatch ? suffixMatch[0] : "px";
+
+            const entries = Object.entries(fontSizeScaleToPx) as [
+              NonNullable<TextBlockProps["fontSizeScale"]>,
+              number,
+            ][];
+            const closest = entries.reduce(
+              (best, [scale, value]) => {
+                const dist = Math.abs(value - px);
+                if (dist < best.dist) return { scale, dist };
+                return best;
+              },
+              { scale: fontSizeScale as NonNullable<TextBlockProps["fontSizeScale"]>, dist: Infinity },
+            ).scale;
+
+            updateBlock(selectedBlockId, {
+              fontSizeScale: closest,
+              fontSizeCustom: `${px}${suffix}`,
+              fontSizeMode: "custom",
+            } as any);
+          }}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <span>글자 간격</span>
+          <div className="flex items-center gap-2">
+            <select
+              className="w-32 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+              aria-label="글자 간격 프리셋"
+              value={letterSpacingPreset}
+              onChange={(e) => {
+                const preset = e.target.value as
+                  | "tighter"
+                  | "tight"
+                  | "normal"
+                  | "wide"
+                  | "wider";
+
+                const presetPxMap: Record<
+                  "tighter" | "tight" | "normal" | "wide" | "wider",
+                  number
+                > = {
+                  tighter: -1.5,
+                  tight: -0.5,
+                  normal: 0,
+                  wide: 1,
+                  wider: 2,
+                };
+
+                const px = presetPxMap[preset];
+                const em = px / 16;
+
+                updateBlock(selectedBlockId, {
+                  letterSpacingCustom: `${em}em`,
+                } as any);
+              }}
+            >
+              <option value="tighter">아주 좁게</option>
+              <option value="tight">좁게</option>
+              <option value="normal">보통</option>
+              <option value="wide">넓게</option>
+              <option value="wider">아주 넓게</option>
+            </select>
+
+            <PropertySliderField
+              label=""
+              ariaLabelSlider="글자 간격 슬라이더"
+              ariaLabelInput="글자 간격 커스텀 (px)"
+              value={Number.isFinite(parsedLetterSpacingPx) ? parsedLetterSpacingPx : 0}
+              min={-2}
+              max={10}
+              step={0.1}
+              onChange={(px) => {
+                const em = px / 16;
+                updateBlock(selectedBlockId, {
+                  letterSpacingCustom: `${em}em`,
+                } as any);
+              }}
+            />
+          </div>
+        </label>
+      </div>
+
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="줄 간격"
+          unitLabel=""
+          value={Number.isFinite(parsedLineHeight) ? parsedLineHeight : 1.5}
+          min={-1}
+          max={3}
+          step={0.05}
+          presets={[
+            { id: "tight", label: "좁게", value: 1.25 },
+            { id: "snug", label: "약간 좁게", value: 1.35 },
+            { id: "normal", label: "보통", value: 1.5 },
+            { id: "relaxed", label: "넓게", value: 1.7 },
+            { id: "loose", label: "아주 넓게", value: 1.9 },
+          ]}
+          onChangeValue={(v) => {
+            const preset: Record<NonNullable<TextBlockProps["lineHeightScale"]>, number> = {
+              tight: 1.25,
+              snug: 1.35,
+              normal: 1.5,
+              relaxed: 1.7,
+              loose: 1.9,
+            };
+
+            const entries = Object.entries(preset) as [
+              NonNullable<TextBlockProps["lineHeightScale"]>,
+              number,
+            ][];
+            const closest = entries.reduce(
+              (best, [scale, value]) => {
+                const dist = Math.abs(value - v);
+                if (dist < best.dist) return { scale, dist };
+                return best;
+              },
+              { scale: lineHeightScale as NonNullable<TextBlockProps["lineHeightScale"]>, dist: Infinity },
+            ).scale;
+
+            updateBlock(selectedBlockId, {
+              lineHeightScale: closest,
+              lineHeightCustom: v.toString(),
+              lineHeightMode: "custom",
+            } as any);
+          }}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="굵기"
+          value={Number.isFinite(parsedFontWeight) ? parsedFontWeight : 400}
+          min={100}
+          max={900}
+          step={100}
+          presets={(
+            ["normal", "medium", "semibold", "bold"] as NonNullable<
+              TextBlockProps["fontWeightScale"]
+            >[]
+          ).map((scale) => ({
+            id: scale,
+            label:
+              scale === "normal"
+                ? "보통"
+                : scale === "medium"
+                ? "중간"
+                : scale === "semibold"
+                ? "세미볼드"
+                : "볼드",
+            value:
+              scale === "normal"
+                ? 400
+                : scale === "medium"
+                ? 500
+                : scale === "semibold"
+                ? 600
+                : 700,
+          }))}
+          onChangeValue={(v) => {
+            const preset: Record<NonNullable<TextBlockProps["fontWeightScale"]>, number> = {
+              normal: 400,
+              medium: 500,
+              semibold: 600,
+              bold: 700,
+            };
+
+            const entries = Object.entries(preset) as [
+              NonNullable<TextBlockProps["fontWeightScale"]>,
+              number,
+            ][];
+            const closest = entries.reduce(
+              (best, [scale, value]) => {
+                const dist = Math.abs(value - v);
+                if (dist < best.dist) return { scale, dist };
+                return best;
+              },
+              { scale: fontWeightScale as NonNullable<TextBlockProps["fontWeightScale"]>, dist: Infinity },
+            ).scale;
+
+            updateBlock(selectedBlockId, {
+              fontWeightScale: closest,
+              fontWeightCustom: v.toString(),
+              fontWeightMode: "custom",
+            } as any);
+          }}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <ColorPickerField
+          label="텍스트 색상"
+          ariaLabelColorInput="텍스트 색상 피커"
+          ariaLabelHexInput="텍스트 색상 HEX"
+          value={
+            (textProps.colorCustom && textProps.colorCustom.startsWith("#")
+              ? textProps.colorCustom
+              : TEXT_COLOR_PALETTE.find((p) => p.id === colorPalette)?.color ?? "#ffffff")
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              colorCustom: hex,
+              colorMode: "custom",
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          selectedPaletteId={colorPalette}
+          onPaletteSelect={(item) => {
+            const paletteId = item.id as NonNullable<TextBlockProps["colorPalette"]>;
+            updateBlock(selectedBlockId, {
+              colorPalette: paletteId,
+              colorCustom: item.color,
+              colorMode: "custom",
+            } as any);
+          }}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <ColorPickerField
+          label="블록 배경색"
+          ariaLabelColorInput="텍스트 블록 배경색 피커"
+          ariaLabelHexInput="텍스트 블록 배경색 HEX"
+          value={textProps.backgroundColorCustom ?? ""}
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              backgroundColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <span>최대 너비</span>
+          <div className="flex items-center gap-2">
+            <select
+              className="w-32 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+              aria-label="최대 너비 프리셋"
+              value={maxWidthScale}
+              onChange={(e) => {
+                const value = e.target.value as NonNullable<TextBlockProps["maxWidthScale"]>;
+                let custom = textProps.maxWidthCustom ?? "";
+                if (value === "prose") custom = "60ch";
+                else if (value === "narrow") custom = "40ch";
+                else custom = "";
+                updateBlock(selectedBlockId, {
+                  maxWidthScale: value,
+                  maxWidthMode: custom ? "custom" : "scale",
+                  maxWidthCustom: custom,
+                } as any);
+              }}
+            >
+              <option value="none">제한 없음</option>
+              <option value="prose">본문 폭 (60ch)</option>
+              <option value="narrow">좁게 (40ch)</option>
+            </select>
+            <input
+              type="range"
+              min={20}
+              max={120}
+              step={5}
+              aria-label="최대 너비 슬라이더 (ch 단위)"
+              value={(() => {
+                const raw = textProps.maxWidthCustom ?? "";
+                const match = raw.match(/([0-9]+)ch/);
+                if (match) return Number(match[1]);
+                if (maxWidthScale === "prose") return 60;
+                if (maxWidthScale === "narrow") return 40;
+                return 120;
+              })()}
+              onChange={(e) => {
+                const ch = Number(e.target.value || 60);
+                updateBlock(selectedBlockId, {
+                  maxWidthCustom: `${ch}ch`,
+                  maxWidthMode: "custom",
+                } as any);
+              }}
+              className="flex-1"
+            />
+          </div>
+          <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="최대 너비 커스텀"
+            placeholder="예: 600px, 40rem, 80%, 60ch"
+            value={textProps.maxWidthCustom ?? ""}
+            onChange={(e) => {
+              updateBlock(selectedBlockId, {
+                maxWidthCustom: e.target.value,
+                maxWidthMode: "custom",
+              } as any);
+            }}
+          />
+        </label>
+      </div>
+    </>
+  );
+}

src/app/editor/panels/VideoPropertiesPanel.tsx

@@ -0,0 +1,387 @@
+"use client";
+
+import type { VideoBlockProps } from "@/features/editor/state/editorStore";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+
+export type VideoPropertiesPanelProps = {
+  videoProps: VideoBlockProps;
+  selectedBlockId: string;
+  updateBlock: (id: string, partial: Partial<VideoBlockProps>) => void;
+};
+
+export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock }: VideoPropertiesPanelProps) {
+  // 비디오 소스 유형: 업로드(/api/video/:id) 또는 외부 URL 구분
+  const source: "url" | "upload" =
+    videoProps.sourceType === "asset" || (videoProps.sourceUrl && videoProps.sourceUrl.startsWith("/api/video/"))
+      ? "upload"
+      : "url";
+
+  return (
+    <>
+      {/* 비디오 소스 선택 (URL / 업로드) */}
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <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={source}
+            onChange={(e) => {
+              const next = e.target.value as "url" | "upload";
+              if (next === "url") {
+                updateBlock(selectedBlockId, {
+                  sourceType: "externalUrl",
+                  assetId: null,
+                } as any);
+              } else {
+                updateBlock(selectedBlockId, {
+                  sourceType: "asset",
+                } as any);
+              }
+            }}
+          >
+            <option value="url">URL</option>
+            <option value="upload">파일 업로드</option>
+          </select>
+        </label>
+      </div>
+
+      {/* URL 입력 */}
+      {source === "url" && (
+        <div className="space-y-1">
+          <label className="flex flex-col gap-1 text-xs text-slate-400">
+            <span>비디오 URL</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="비디오 URL"
+              value={videoProps.sourceUrl ?? ""}
+              onChange={(e) => {
+                const value = e.target.value;
+                updateBlock(selectedBlockId, {
+                  sourceUrl: value,
+                  sourceType: "externalUrl",
+                  assetId: null,
+                } as any);
+              }}
+            />
+          </label>
+
+          {/* 접근성: 제목 / aria-label / 캡션 텍스트 (현재는 UI에서 숨김 처리) */}
+          <div className="hidden">
+            <label className="flex flex-col gap-1 mt-2">
+              <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={(videoProps as any).titleText ?? ""}
+                onChange={(e) => {
+                  updateBlock(selectedBlockId, { titleText: e.target.value } as any);
+                }}
+              />
+            </label>
+
+            <label className="mt-2 flex flex-col gap-1">
+              <span>비디오 aria-label</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="비디오 aria-label"
+                value={(videoProps as any).ariaLabel ?? ""}
+                onChange={(e) => {
+                  updateBlock(selectedBlockId, { ariaLabel: e.target.value } as any);
+                }}
+              />
+            </label>
+
+            <label className="mt-2 flex flex-col gap-1">
+              <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={(videoProps as any).captionText ?? ""}
+                onChange={(e) => {
+                  updateBlock(selectedBlockId, { captionText: e.target.value } as any);
+                }}
+              />
+            </label>
+          </div>
+        </div>
+      )}
+
+      <div className="mt-3 space-y-1 text-xs text-slate-400">
+        <label className="flex flex-col gap-1">
+          <span>포스터 이미지 URL</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="포스터 이미지 URL"
+            value={videoProps.posterImageSrc ?? ""}
+            onChange={(e) => {
+              const value = e.target.value;
+              updateBlock(selectedBlockId, {
+                posterImageSrc: value,
+                posterSourceType: "externalUrl",
+                posterAssetId: null,
+              } as any);
+            }}
+          />
+        </label>
+      </div>
+
+      {/* 파일 업로드 */}
+      {source === "upload" && (
+        <div className="space-y-1">
+          <label className="flex flex-col gap-1 text-xs text-slate-400">
+            <span>비디오 파일 업로드</span>
+            <input
+              type="file"
+              accept="video/*"
+              className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+              aria-label="비디오 파일 업로드"
+              onChange={async (event) => {
+                const file = event.target.files?.[0];
+                if (!file) return;
+
+                try {
+                  const formData = new FormData();
+                  formData.append("file", file);
+
+                  const response = await fetch("/api/video", {
+                    method: "POST",
+                    body: formData,
+                  });
+
+                  if (!response.ok) {
+                    console.error("비디오 업로드 실패", await response.text());
+                    return;
+                  }
+
+                  const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                  const servedUrl = data.servedUrl ?? `/api/video/${data.id}`;
+
+                  updateBlock(selectedBlockId, {
+                    sourceUrl: servedUrl,
+                    sourceType: "asset",
+                    assetId: data.id,
+                  } as any);
+                } catch (error) {
+                  console.error("비디오 업로드 중 오류", error);
+                } finally {
+                  event.target.value = "";
+                }
+              }}
+            />
+          </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>
+
+        {/* 카드 배경색 */}
+        <div className="space-y-1">
+          <ColorPickerField
+            label="카드 배경색"
+            ariaLabelColorInput="비디오 카드 배경색 피커"
+            ariaLabelHexInput="비디오 카드 배경색 HEX"
+            value={videoProps.backgroundColorCustom ?? ""}
+            onChange={(hex) => {
+              const next = hex && hex.trim().length > 0 ? hex : undefined;
+              updateBlock(selectedBlockId, { backgroundColorCustom: next } as any);
+            }}
+            palette={TEXT_COLOR_PALETTE}
+          />
+        </div>
+
+        {/* 정렬 */}
+        <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={videoProps.align ?? "center"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                align: e.target.value as VideoBlockProps["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={videoProps.widthMode ?? "auto"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                widthMode: e.target.value as VideoBlockProps["widthMode"],
+              } as any)
+            }
+          >
+            <option value="auto">내용에 맞춤</option>
+            <option value="full">가로 전체</option>
+            <option value="fixed">고정 너비 (px)</option>
+          </select>
+        </label>
+
+        {(videoProps.widthMode ?? "auto") === "fixed" && (
+          <NumericPropertyControl
+            label="고정 너비 (px)"
+            unitLabel="(px)"
+            value={videoProps.widthPx ?? 640}
+            min={160}
+            max={1920}
+            step={10}
+            presets={[
+              { id: "sm", label: "작게", value: 480 },
+              { id: "md", label: "보통", value: 640 },
+              { id: "lg", label: "넓게", value: 960 },
+            ]}
+            onChangeValue={(v) => {
+              updateBlock(selectedBlockId, {
+                widthPx: v,
+              } as any);
+            }}
+          />
+        )}
+
+        {/* 카드 패딩 */}
+        <NumericPropertyControl
+          label="카드 패딩"
+          unitLabel="(px)"
+          value={typeof videoProps.cardPaddingPx === "number" ? videoProps.cardPaddingPx : 0}
+          min={0}
+          max={64}
+          step={2}
+          onChangeValue={(v) => {
+            const safe = Number.isFinite(v) && v >= 0 ? v : 0;
+            updateBlock(selectedBlockId, { cardPaddingPx: safe } as any);
+          }}
+        />
+
+        {/* 카드 모서리 둥글기 */}
+        <NumericPropertyControl
+          label="카드 모서리 둥글기"
+          unitLabel="(px)"
+          value={typeof videoProps.borderRadiusPx === "number" ? videoProps.borderRadiusPx : 0}
+          min={0}
+          max={64}
+          step={1}
+          onChangeValue={(v) => {
+            const safe = Number.isFinite(v) && v >= 0 ? v : 0;
+            updateBlock(selectedBlockId, { borderRadiusPx: safe } as any);
+          }}
+        />
+
+        {/* 시작 시점 (초) */}
+        <NumericPropertyControl
+          label="시작 시점 (초)"
+          unitLabel="(초)"
+          value={typeof videoProps.startTimeSec === "number" ? videoProps.startTimeSec : 0}
+          min={0}
+          max={600}
+          step={1}
+          onChangeValue={(v) => {
+            const safe = Number.isFinite(v) && v >= 0 ? v : 0;
+            updateBlock(selectedBlockId, { startTimeSec: safe } as any);
+          }}
+        />
+
+        {/* 종료 시점 (초) */}
+        <NumericPropertyControl
+          label="종료 시점 (초)"
+          unitLabel="(초)"
+          value={typeof videoProps.endTimeSec === "number" ? videoProps.endTimeSec : 0}
+          min={0}
+          max={600}
+          step={1}
+          onChangeValue={(v) => {
+            const safe = Number.isFinite(v) && v >= 0 ? v : 0;
+            updateBlock(selectedBlockId, { endTimeSec: safe } as any);
+          }}
+        />
+
+        {/* 화면 비율 */}
+        <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={videoProps.aspectRatio ?? "16:9"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                aspectRatio: e.target.value as VideoBlockProps["aspectRatio"],
+              } as any)
+            }
+          >
+            <option value="16:9">16:9</option>
+            <option value="4:3">4:3</option>
+            <option value="1:1">1:1</option>
+          </select>
+        </label>
+
+        {/* 재생 옵션 */}
+        <div className="mt-2 grid grid-cols-2 gap-2">
+          <label className="flex items-center gap-1">
+            <input
+              type="checkbox"
+              className="h-3 w-3 rounded border-slate-700 bg-slate-900"
+              checked={!!videoProps.autoplay}
+              onChange={(e) =>
+                updateBlock(selectedBlockId, {
+                  autoplay: e.target.checked,
+                } as any)
+              }
+            />
+            <span className="text-[11px]">자동 재생</span>
+          </label>
+          <label className="flex items-center gap-1">
+            <input
+              type="checkbox"
+              className="h-3 w-3 rounded border-slate-700 bg-slate-900"
+              checked={!!videoProps.loop}
+              onChange={(e) =>
+                updateBlock(selectedBlockId, {
+                  loop: e.target.checked,
+                } as any)
+              }
+            />
+            <span className="text-[11px]">반복 재생</span>
+          </label>
+          <label className="flex items-center gap-1">
+            <input
+              type="checkbox"
+              className="h-3 w-3 rounded border-slate-700 bg-slate-900"
+              checked={!!videoProps.muted}
+              onChange={(e) =>
+                updateBlock(selectedBlockId, {
+                  muted: e.target.checked,
+                } as any)
+              }
+            />
+            <span className="text-[11px]">음소거</span>
+          </label>
+          <label className="flex items-center gap-1">
+            <input
+              type="checkbox"
+              className="h-3 w-3 rounded border-slate-700 bg-slate-900"
+              checked={videoProps.controls !== false}
+              onChange={(e) =>
+                updateBlock(selectedBlockId, {
+                  controls: e.target.checked,
+                } as any)
+              }
+            />
+            <span className="text-[11px]">재생 컨트롤 표시</span>
+          </label>
+        </div>
+      </div>
+    </>
+  );
+}

src/app/editor/templates/blogTemplate.ts

@@ -0,0 +1,102 @@
+"use client";
+
+import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore";
+
+export function createBlogTemplateBlocks(opts: {
+  sectionId: string;
+  createId: () => string;
+}): { blocks: Block[]; lastSelectedId: string } {
+  const { sectionId, createId } = opts;
+
+  const columns: SectionBlockProps["columns"] = [
+    { id: `${sectionId}_col_1`, span: 4 },
+    { id: `${sectionId}_col_2`, span: 4 },
+    { id: `${sectionId}_col_3`, span: 4 },
+  ];
+
+  const sectionProps: SectionBlockProps = {
+    background: "default",
+    paddingY: "lg",
+    // 블로그 리스트는 넓은 폭과 충분한 카드 간격을 사용한다.
+    paddingYPx: 72,
+    maxWidthPx: 1120,
+    gapXPx: 32,
+    backgroundColorCustom: "#020617",
+    columns,
+  } as any;
+
+  const sectionBlock: Block = {
+    id: sectionId,
+    type: "section",
+    props: sectionProps,
+    sectionId: null,
+    columnId: null,
+  };
+
+  const postDefinitions = [
+    { title: "블로그 포스트 1", summary: "첫 번째 포스트 요약을 여기에 입력하세요." },
+    { title: "블로그 포스트 2", summary: "두 번째 포스트 요약을 여기에 입력하세요." },
+    { title: "블로그 포스트 3", summary: "세 번째 포스트 요약을 여기에 입력하세요." },
+  ];
+
+  const blogBlocks: Block[] = columns.flatMap((col, index) => {
+    const post = postDefinitions[index] ?? postDefinitions[0];
+
+    const imageId = createId();
+    const titleId = createId();
+    const summaryId = createId();
+
+    const imageProps: ImageBlockProps = {
+      src: "https://via.placeholder.com/400x250/1e293b/94a3b8?text=Blog+Image",
+      alt: post.title,
+      align: "center",
+      widthMode: "auto",
+      borderRadius: "md",
+    };
+
+    const titleProps: TextBlockProps = {
+      text: post.title,
+      align: "left",
+      size: "lg",
+      bold: true,
+    } as any;
+
+    const summaryProps: TextBlockProps = {
+      text: post.summary,
+      align: "left",
+      size: "sm",
+      color: "muted",
+    } as any;
+
+    const imageBlock: Block = {
+      id: imageId,
+      type: "image",
+      props: imageProps,
+      sectionId,
+      columnId: col.id,
+    };
+
+    const titleBlock: Block = {
+      id: titleId,
+      type: "text",
+      props: titleProps,
+      sectionId,
+      columnId: col.id,
+    };
+
+    const summaryBlock: Block = {
+      id: summaryId,
+      type: "text",
+      props: summaryProps,
+      sectionId,
+      columnId: col.id,
+    };
+
+    return [imageBlock, titleBlock, summaryBlock];
+  });
+
+  const blocks: Block[] = [sectionBlock, ...blogBlocks];
+  const lastSelectedId = blogBlocks[blogBlocks.length - 1]?.id ?? sectionId;
+
+  return { blocks, lastSelectedId };
+}

src/app/editor/templates/ctaTemplate.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore";
+
+export function createCtaTemplateBlocks(opts: {
+  sectionId: string;
+  createId: () => string;
+}): { blocks: Block[]; lastSelectedId: string } {
+  const { sectionId, createId } = opts;
+
+  const columns: SectionBlockProps["columns"] = [
+    { id: `${sectionId}_col_1`, span: 8 },
+    { id: `${sectionId}_col_2`, span: 4 },
+  ];
+
+  const sectionProps: SectionBlockProps = {
+    background: "primary",
+    paddingY: "md",
+    // CTA 는 강한 색상과 적당한 여백, 비교적 좁은 폭을 사용한다.
+    paddingYPx: 64,
+    maxWidthPx: 960,
+    gapXPx: 24,
+    backgroundColorCustom: "#0c4a6e",
+    columns,
+  } as any;
+
+  const sectionBlock: Block = {
+    id: sectionId,
+    type: "section",
+    props: sectionProps,
+    sectionId: null,
+    columnId: null,
+  };
+
+  const leftColumnId = `${sectionId}_col_1`;
+  const rightColumnId = `${sectionId}_col_2`;
+
+  const textId = createId();
+  const textProps: TextBlockProps = {
+    text: "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.\n망설이지 말고 시작하세요!",
+    align: "left",
+    size: "lg",
+  } as any;
+  const textBlock: Block = {
+    id: textId,
+    type: "text",
+    props: textProps,
+    sectionId,
+    columnId: leftColumnId,
+  };
+
+  const buttonId = createId();
+  const buttonProps: ButtonBlockProps = {
+    label: "CTA 버튼",
+    href: "#",
+    align: "center",
+    size: "lg",
+    variant: "solid",
+    colorPalette: "primary",
+    fullWidth: true,
+    borderRadius: "md",
+    textColorCustom: "#0b1120",
+    fillColorCustom: "#0ea5e9",
+    strokeColorCustom: "#0284c7",
+  };
+  const buttonBlock: Block = {
+    id: buttonId,
+    type: "button",
+    props: buttonProps,
+    sectionId,
+    columnId: rightColumnId,
+  };
+
+  const blocks: Block[] = [sectionBlock, textBlock, buttonBlock];
+  const lastSelectedId = buttonId;
+
+  return { blocks, lastSelectedId };
+}

src/app/editor/templates/faqTemplate.ts

@@ -0,0 +1,127 @@
+"use client";
+
+import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+
+export function createFaqTemplateBlocks(opts: {
+  sectionId: string;
+  createId: () => string;
+}): { blocks: Block[]; lastSelectedId: string } {
+  const { sectionId, createId } = opts;
+
+  const columns: SectionBlockProps["columns"] = [
+    { id: `${sectionId}_col_1`, span: 3 },
+    { id: `${sectionId}_col_2`, span: 9 },
+  ];
+
+  const sectionProps: SectionBlockProps = {
+    background: "default",
+    paddingY: "md",
+    // FAQ 는 비교적 좁은 폭과 보통 여백을 사용한다.
+    paddingYPx: 80,
+    maxWidthPx: 1024,
+    gapXPx: 48,
+    backgroundColorCustom: "#020617",
+    columns,
+  } as any;
+
+  const sectionBlock: Block = {
+    id: sectionId,
+    type: "section",
+    props: sectionProps,
+    sectionId: null,
+    columnId: null,
+  };
+
+  const leftColumnId = `${sectionId}_col_1`;
+  const rightColumnId = `${sectionId}_col_2`;
+
+  // Left Column: Title
+  const titleId = createId();
+  const titleProps: TextBlockProps = {
+    text: "FAQ",
+    align: "left",
+    size: "xl",
+    bold: true,
+  } as any;
+  const titleBlock: Block = {
+    id: titleId,
+    type: "text",
+    props: titleProps,
+    sectionId,
+    columnId: leftColumnId,
+  };
+
+  const subTitleId = createId();
+  const subTitleProps: TextBlockProps = {
+    text: "자주 묻는 질문",
+    align: "left",
+    size: "sm",
+    color: "muted",
+  } as any;
+  const subTitleBlock: Block = {
+    id: subTitleId,
+    type: "text",
+    props: subTitleProps,
+    sectionId,
+    columnId: leftColumnId,
+  };
+
+
+  // Right Column: Q&A List
+  const faqPairs = [
+    {
+      question: "서비스 이용료는 얼마인가요?",
+      answer: "기본 기능은 무료로 제공되며, 프리미엄 기능은 월 구독료가 발생합니다.",
+    },
+    {
+      question: "환불 정책은 어떻게 되나요?",
+      answer: "결제 후 7일 이내에 사용 이력이 없는 경우 전액 환불 가능합니다.",
+    },
+    {
+      question: "팀원 초대 기능이 있나요?",
+      answer: "네, 프로 요금제 이상부터 팀원 초대가 가능합니다.",
+    },
+  ];
+
+  const faqBlocks: Block[] = faqPairs.flatMap((pair) => {
+    const qId = createId();
+    const aId = createId();
+
+    const questionProps: TextBlockProps = {
+      text: pair.question,
+      align: "left",
+      size: "lg",
+      bold: true,
+    } as any;
+
+    const answerProps: TextBlockProps = {
+      text: pair.answer,
+      align: "left",
+      size: "base",
+      color: "muted",
+    } as any;
+
+    const questionBlock: Block = {
+      id: qId,
+      type: "text",
+      props: questionProps,
+      sectionId,
+      columnId: rightColumnId,
+    };
+
+    const answerBlock: Block = {
+      id: aId,
+      type: "text",
+      props: answerProps,
+      sectionId,
+      columnId: rightColumnId,
+    };
+
+    return [questionBlock, answerBlock];
+  });
+
+  const blocks: Block[] = [sectionBlock, titleBlock, subTitleBlock, ...faqBlocks];
+  const lastSelectedId = faqBlocks[faqBlocks.length - 1]?.id ?? sectionId;
+
+  return { blocks, lastSelectedId };
+}

src/app/editor/templates/featuresTemplate.ts

@@ -0,0 +1,75 @@
+"use client";
+
+import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+
+export function createFeaturesTemplateBlocks(opts: {
+  sectionId: string;
+  createId: () => string;
+}): { blocks: Block[]; lastSelectedId: string } {
+  const { sectionId, createId } = opts;
+
+  const columns = [
+    { id: `${sectionId}_col_1`, span: 4 },
+    { id: `${sectionId}_col_2`, span: 4 },
+    { id: `${sectionId}_col_3`, span: 4 },
+  ];
+
+  const sectionProps: SectionBlockProps = {
+    background: "muted",
+    paddingY: "md",
+    // 기능 리스트는 비교적 넓은 폭과 보통 수준의 여백을 사용한다.
+    paddingYPx: 72,
+    maxWidthPx: 1040,
+    gapXPx: 32,
+    backgroundColorCustom: "#0f172a",
+    columns,
+  } as any;
+
+  const sectionBlock: Block = {
+    id: sectionId,
+    type: "section",
+    props: sectionProps,
+    sectionId: null,
+    columnId: null,
+  };
+
+  const featureBlocks: Block[] = columns.flatMap((col, index) => {
+    const titleId = createId();
+    const descId = createId();
+
+    const titleProps: TextBlockProps = {
+      text: `Feature ${index + 1} 제목`,
+      align: "left",
+      size: "lg",
+    } as any;
+
+    const descProps: TextBlockProps = {
+      text: "해당 기능을 간단히 설명하는 텍스트입니다.",
+      align: "left",
+      size: "sm",
+    } as any;
+
+    const title: Block = {
+      id: titleId,
+      type: "text",
+      props: titleProps,
+      sectionId,
+      columnId: col.id,
+    };
+
+    const description: Block = {
+      id: descId,
+      type: "text",
+      props: descProps,
+      sectionId,
+      columnId: col.id,
+    };
+
+    return [title, description];
+  });
+
+  const blocks: Block[] = [sectionBlock, ...featureBlocks];
+  const lastSelectedId = featureBlocks[featureBlocks.length - 1]?.id ?? sectionId;
+
+  return { blocks, lastSelectedId };
+}

src/app/editor/templates/footerTemplate.ts

@@ -0,0 +1,106 @@
+"use client";
+
+import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+
+export function createFooterTemplateBlocks(opts: {
+  sectionId: string;
+  createId: () => string;
+}): { blocks: Block[]; lastSelectedId: string } {
+  const { sectionId, createId } = opts;
+
+  const columns: SectionBlockProps["columns"] = [
+    { id: `${sectionId}_col_1`, span: 4 },
+    { id: `${sectionId}_col_2`, span: 4 },
+    { id: `${sectionId}_col_3`, span: 4 },
+  ];
+
+  const sectionProps: SectionBlockProps = {
+    background: "muted",
+    paddingY: "md",
+    // 푸터는 상대적으로 낮은 높이와 좁은 최대 폭을 사용한다.
+    paddingYPx: 64,
+    maxWidthPx: 1120,
+    backgroundColorCustom: "#020617",
+    columns,
+  } as any;
+
+  const sectionBlock: Block = {
+    id: sectionId,
+    type: "section",
+    props: sectionProps,
+    sectionId: null,
+    columnId: null,
+  };
+
+  const col1Id = `${sectionId}_col_1`;
+  const col2Id = `${sectionId}_col_2`;
+  const col3Id = `${sectionId}_col_3`;
+
+  // Col 1: Brand
+  const brandId = createId();
+  const brandProps: TextBlockProps = {
+    text: "MyLanding",
+    align: "left",
+    size: "xl",
+    bold: true,
+  } as any;
+  const brandBlock: Block = {
+    id: brandId,
+    type: "text",
+    props: brandProps,
+    sectionId,
+    columnId: col1Id,
+  };
+
+  const descId = createId();
+  const descProps: TextBlockProps = {
+    text: "더 나은 웹사이트를 위한 최고의 선택.",
+    align: "left",
+    size: "sm",
+    color: "muted",
+  } as any;
+  const descBlock: Block = {
+    id: descId,
+    type: "text",
+    props: descProps,
+    sectionId,
+    columnId: col1Id,
+  };
+
+  // Col 2: Links
+  const linksId = createId();
+  const linksProps: TextBlockProps = {
+    text: "서비스 소개\n요금제\n고객지원\n문의하기",
+    align: "center",
+    size: "sm",
+    color: "muted",
+  } as any;
+  const linksBlock: Block = {
+    id: linksId,
+    type: "text",
+    props: linksProps,
+    sectionId,
+    columnId: col2Id,
+  };
+
+  // Col 3: Copyright
+  const copyrightId = createId();
+  const copyrightProps: TextBlockProps = {
+    text: "© 2025 MyLanding.\nAll rights reserved.",
+    align: "right",
+    size: "xs",
+    color: "muted",
+  } as any;
+  const copyrightBlock: Block = {
+    id: copyrightId,
+    type: "text",
+    props: copyrightProps,
+    sectionId,
+    columnId: col3Id,
+  };
+
+  const blocks: Block[] = [sectionBlock, brandBlock, descBlock, linksBlock, copyrightBlock];
+  const lastSelectedId = copyrightId;
+
+  return { blocks, lastSelectedId };
+}

src/app/editor/templates/heroTemplate.ts

@@ -0,0 +1,96 @@
+"use client";
+
+import type {
+  Block,
+  SectionBlockProps,
+  TextBlockProps,
+  ButtonBlockProps,
+} from "@/features/editor/state/editorStore";
+
+export function createHeroTemplateBlocks(opts: {
+  sectionId: string;
+  createId: () => string;
+}): { blocks: Block[]; lastSelectedId: string } {
+  const { sectionId, createId } = opts;
+
+  const sectionProps: SectionBlockProps = {
+    background: "default",
+    paddingY: "lg",
+    // 히어로는 가장 여백이 넓고 화면 중앙에 집중되도록 설정한다.
+    paddingYPx: 96,
+    maxWidthPx: 960,
+    gapXPx: 40,
+    backgroundColorCustom: "#020617", // 다크 히어로 섹션
+    columns: [
+      {
+        id: `${sectionId}_col_1`,
+        span: 12,
+      },
+    ],
+  };
+
+  const sectionBlock: Block = {
+    id: sectionId,
+    type: "section",
+    props: sectionProps,
+    sectionId: null,
+    columnId: null,
+  };
+
+  const firstColumnId = `${sectionId}_col_1`;
+
+  const heroHeadlineId = createId();
+  const heroHeadlineProps: TextBlockProps = {
+    text: "Hero 제목을 여기에 입력하세요",
+    align: "center",
+    size: "lg",
+  } as any;
+  const heroHeadline: Block = {
+    id: heroHeadlineId,
+    type: "text",
+    props: heroHeadlineProps,
+    sectionId,
+    columnId: firstColumnId,
+  };
+
+  const heroSubId = createId();
+  const heroSubProps: TextBlockProps = {
+    text: "제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.",
+    align: "center",
+    size: "base",
+  } as any;
+  const heroSub: Block = {
+    id: heroSubId,
+    type: "text",
+    props: heroSubProps,
+    sectionId,
+    columnId: firstColumnId,
+  };
+
+  const heroButtonId = createId();
+  const heroButtonProps: ButtonBlockProps = {
+    label: "지금 시작하기",
+    href: "#",
+    align: "center",
+    size: "md",
+    variant: "solid",
+    colorPalette: "primary",
+    fullWidth: false,
+    borderRadius: "md",
+    fontSizeCustom: "14px",
+    textColorCustom: "#0b1120",
+    fillColorCustom: "#0ea5e9",
+    strokeColorCustom: "#0284c7",
+  };
+  const heroButton: Block = {
+    id: heroButtonId,
+    type: "button",
+    props: heroButtonProps,
+    sectionId,
+    columnId: firstColumnId,
+  };
+
+  const blocks: Block[] = [sectionBlock, heroHeadline, heroSub, heroButton];
+
+  return { blocks, lastSelectedId: heroButtonId };
+}

src/app/editor/templates/pricingTemplate.ts

@@ -0,0 +1,142 @@
+"use client";
+
+import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore";
+
+export function createPricingTemplateBlocks(opts: {
+  sectionId: string;
+  createId: () => string;
+}): { blocks: Block[]; lastSelectedId: string } {
+  const { sectionId, createId } = opts;
+
+  const columns: SectionBlockProps["columns"] = [
+    { id: `${sectionId}_col_1`, span: 4 },
+    { id: `${sectionId}_col_2`, span: 4 },
+    { id: `${sectionId}_col_3`, span: 4 },
+  ];
+
+  const sectionProps: SectionBlockProps = {
+    background: "muted",
+    paddingY: "lg",
+    // 요금제는 꽤 넓은 여백과 넓은 최대 폭, 넉넉한 컬럼 간격을 사용한다.
+    paddingYPx: 88,
+    maxWidthPx: 1120,
+    gapXPx: 40,
+    backgroundColorCustom: "#0f172a",
+    columns,
+  } as any;
+
+  const sectionBlock: Block = {
+    id: sectionId,
+    type: "section",
+    props: sectionProps,
+    sectionId: null,
+    columnId: null,
+  };
+
+  const planDefinitions: Array<{ name: string; price: string; popular?: boolean }> = [
+    { name: "Basic", price: "₩9,900/월" },
+    { name: "Pro", price: "₩29,900/월", popular: true },
+    { name: "Enterprise", price: "문의" },
+  ];
+
+  const pricingBlocks: Block[] = columns.flatMap((col, index) => {
+    const plan = planDefinitions[index] ?? planDefinitions[0];
+    const isPopular = !!plan.popular;
+
+    const blocksInCol: Block[] = [];
+
+    // Popular Badge (only for middle)
+    if (isPopular) {
+      const badgeId = createId();
+      const badgeProps: TextBlockProps = {
+        text: "MOST POPULAR",
+        align: "center",
+        size: "xs",
+        color: "primary",
+        bold: true,
+      } as any;
+      blocksInCol.push({
+        id: badgeId,
+        type: "text",
+        props: badgeProps,
+        sectionId,
+        columnId: col.id,
+      });
+    }
+
+    const nameId = createId();
+    const nameProps: TextBlockProps = {
+      text: plan.name,
+      align: "center",
+      size: "lg",
+      bold: true,
+    } as any;
+    blocksInCol.push({
+      id: nameId,
+      type: "text",
+      props: nameProps,
+      sectionId,
+      columnId: col.id,
+    });
+
+    const priceId = createId();
+    const priceProps: TextBlockProps = {
+      text: plan.price,
+      align: "center",
+      size: "xl", // Price larger
+    } as any;
+    blocksInCol.push({
+      id: priceId,
+      type: "text",
+      props: priceProps,
+      sectionId,
+      columnId: col.id,
+    });
+
+    // Features list (simple text for now)
+    const featuresId = createId();
+    const featuresProps: TextBlockProps = {
+      text: "• 모든 기본 기능\n• 이메일 지원\n• 1GB 스토리지",
+      align: "center",
+      size: "sm",
+      color: "muted",
+    } as any;
+    blocksInCol.push({
+      id: featuresId,
+      type: "text",
+      props: featuresProps,
+      sectionId,
+      columnId: col.id,
+    });
+
+    // Button
+    const buttonId = createId();
+    const buttonProps: ButtonBlockProps = {
+      label: isPopular ? "시작하기" : "선택하기",
+      href: "#",
+      align: "center",
+      size: "md",
+      variant: isPopular ? "solid" : "outline",
+      colorPalette: "primary",
+      fullWidth: true,
+      borderRadius: "md",
+      textColorCustom: isPopular ? "#0b1120" : "#e2e8f0",
+      fillColorCustom: isPopular ? "#0ea5e9" : "transparent",
+      strokeColorCustom: "#0ea5e9",
+    };
+    blocksInCol.push({
+      id: buttonId,
+      type: "button",
+      props: buttonProps,
+      sectionId,
+      columnId: col.id,
+    });
+
+    return blocksInCol;
+  });
+
+  const blocks: Block[] = [sectionBlock, ...pricingBlocks];
+  const lastSelectedId = pricingBlocks[pricingBlocks.length - 1]?.id ?? sectionId;
+
+  return { blocks, lastSelectedId };
+}

src/app/editor/templates/teamTemplate.ts

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

src/app/editor/templates/testimonialsTemplate.ts

@@ -0,0 +1,83 @@
+"use client";
+
+import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+
+export function createTestimonialsTemplateBlocks(opts: {
+  sectionId: string;
+  createId: () => string;
+}): { blocks: Block[]; lastSelectedId: string } {
+  const { sectionId, createId } = opts;
+
+  const columns: SectionBlockProps["columns"] = [
+    { id: `${sectionId}_col_1`, span: 4 },
+    { id: `${sectionId}_col_2`, span: 4 },
+    { id: `${sectionId}_col_3`, span: 4 },
+  ];
+
+  const sectionProps: SectionBlockProps = {
+    background: "default",
+    paddingY: "lg",
+    // 후기 섹션은 중간 폭과 적당한 카드 간격을 사용한다.
+    paddingYPx: 80,
+    maxWidthPx: 1040,
+    gapXPx: 36,
+    backgroundColorCustom: "#020617",
+    columns,
+  } as any;
+
+  const sectionBlock: Block = {
+    id: sectionId,
+    type: "section",
+    props: sectionProps,
+    sectionId: null,
+    columnId: null,
+  };
+
+  const testimonialDefinitions: Array<{ body: string; author: string }> = [
+    { body: "이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.", author: "홍길동" },
+    { body: "디자인을 잘 못해도 깔끔한 페이지를 만들 수 있어요.", author: "김영희" },
+    { body: "팀 전체가 만족하는 빌더입니다.", author: "이철수" },
+  ];
+
+  const testimonialBlocks: Block[] = columns.flatMap((col, index) => {
+    const t = testimonialDefinitions[index] ?? testimonialDefinitions[0];
+
+    const bodyId = createId();
+    const authorId = createId();
+
+    const bodyProps: TextBlockProps = {
+      text: t.body,
+      align: "left",
+      size: "base",
+    } as any;
+
+    const authorProps: TextBlockProps = {
+      text: `- ${t.author}`,
+      align: "left",
+      size: "sm",
+    } as any;
+
+    const bodyBlock: Block = {
+      id: bodyId,
+      type: "text",
+      props: bodyProps,
+      sectionId,
+      columnId: col.id,
+    };
+
+    const authorBlock: Block = {
+      id: authorId,
+      type: "text",
+      props: authorProps,
+      sectionId,
+      columnId: col.id,
+    };
+
+    return [bodyBlock, authorBlock];
+  });
+
+  const blocks: Block[] = [sectionBlock, ...testimonialBlocks];
+  const lastSelectedId = testimonialBlocks[testimonialBlocks.length - 1]?.id ?? sectionId;
+
+  return { blocks, lastSelectedId };
+}

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import "../styles/globals.css";
+import "../styles/builder.css";
 import type { ReactNode } from "react";
 
 export const metadata = {
@@ -8,7 +9,7 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="ko">
+    <html lang="ko" suppressHydrationWarning>
       <body className="min-h-screen bg-slate-950 text-slate-50">
         {children}
       </body>

src/app/login/page.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { FormEvent, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+// 로그인 페이지 컴포넌트
+// - 이메일/비밀번호를 입력받아 /api/auth/login 으로 요청을 전송한다.
+// - 성공 시 /projects 로 이동하고, 실패 시 에러 메시지를 보여준다.
+
+export default function LoginPage() {
+  const router = useRouter();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const checkAuth = async () => {
+      try {
+        const res = await fetch("/api/auth/me");
+        if (!cancelled && res.ok) {
+          router.push("/projects");
+        }
+      } catch {
+        // ignore
+      }
+    };
+
+    void checkAuth();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [router]);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    setError(null);
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+
+      if (!res.ok) {
+        try {
+          const data = await res.json();
+          setError(data?.message ?? "로그인에 실패했습니다. 다시 시도해 주세요.");
+        } catch {
+          setError("로그인에 실패했습니다. 다시 시도해 주세요.");
+        }
+        setLoading(false);
+        return;
+      }
+
+      // 성공 시에는 /projects 로 이동한다.
+      router.push("/projects");
+    } catch {
+      setError("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-slate-950 text-slate-50">
+      <div className="w-full max-w-sm rounded-lg border border-slate-800 bg-slate-900/70 p-6 shadow-xl">
+        <h1 className="text-lg font-semibold mb-1">로그인</h1>
+        <p className="text-xs text-slate-400 mb-4">프로젝트를 관리하려면 먼저 계정으로 로그인하세요.</p>
+
+        {error && <p className="mb-3 text-xs text-red-300">{error}</p>}
+
+        <form onSubmit={handleSubmit} className="space-y-3 text-xs">
+          <div className="space-y-1">
+            <label htmlFor="email" className="block text-slate-200">
+              이메일
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs text-slate-50 focus:outline-none focus:ring-1 focus:ring-sky-500"
+              required
+            />
+          </div>
+
+          <div className="space-y-1">
+            <label htmlFor="password" className="block text-slate-200">
+              비밀번호
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs text-slate-50 focus:outline-none focus:ring-1 focus:ring-sky-500"
+              required
+              minLength={8}
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="mt-2 w-full inline-flex items-center justify-center gap-1 rounded bg-sky-600 hover:bg-sky-500 disabled:opacity-40 disabled:cursor-not-allowed px-3 py-1 text-xs font-medium"
+          >
+            {loading ? "로그인 중..." : "로그인"}
+          </button>
+        </form>
+
+        <p className="mt-4 text-[11px] text-slate-400">
+          아직 계정이 없다면
+          {" "}
+          <Link href="/signup" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
+            회원가입
+          </Link>
+          을 진행해 주세요.
+        </p>
+      </div>
+    </main>
+  );
+}

src/app/p/[slug]/PublicProjectPageClient.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface PublicProjectPageClientProps {
+  html: string;
+}
+
+export default function PublicProjectPageClient({ html }: PublicProjectPageClientProps) {
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (typeof document === "undefined" || typeof window === "undefined") return;
+
+    let toastTimeout: number | null = null;
+
+    const showToast = (message: string) => {
+      setToastMessage(message);
+      if (toastTimeout !== null) {
+        window.clearTimeout(toastTimeout);
+      }
+      toastTimeout = window.setTimeout(() => {
+        setToastMessage(null);
+      }, 4000);
+    };
+
+    const forms = document.querySelectorAll<HTMLFormElement>(
+      'form.pb-form-controller, form[action="/api/forms/submit"]',
+    );
+    if (!forms || forms.length === 0) return;
+
+    forms.forEach((form) => {
+      if (form.dataset.pbInitialized === "1") return;
+      form.dataset.pbInitialized = "1";
+
+      form.addEventListener("submit", (event) => {
+        if (!form) return;
+        if (event && typeof event.preventDefault === "function") {
+          event.preventDefault();
+        }
+
+        const formData = new FormData(form);
+        const configInput = form.querySelector<HTMLInputElement>('input[name="__config"]');
+        let config: any = null;
+        if (configInput && configInput.value) {
+          try {
+            config = JSON.parse(configInput.value);
+          } catch {
+            config = null;
+          }
+        }
+
+        const action = form.getAttribute("action") || "/api/forms/submit";
+
+        fetch(action, { method: "POST", body: formData })
+          .then((res) => res.json().catch(() => ({})))
+          .then((data: any) => {
+            const ok = data && data.ok;
+            const message = data && data.message;
+            if (ok) {
+              const success =
+                message || (config && config.successMessage) || "성공적으로 전송되었습니다.";
+              showToast(success);
+              try {
+                form.reset();
+              } catch {}
+            } else {
+              const errorMsg =
+                message || (config && config.errorMessage) || "전송 중 오류가 발생했습니다.";
+              showToast(errorMsg);
+            }
+          })
+          .catch(() => {
+            const errorMsg =
+              (config && config.errorMessage) || "전송 중 오류가 발생했습니다.";
+            showToast(errorMsg);
+          });
+      });
+    });
+
+    return () => {
+      if (toastTimeout !== null) {
+        window.clearTimeout(toastTimeout);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+      {toastMessage ? (
+        <div
+          style={{
+            position: "fixed",
+            right: "16px",
+            bottom: "16px",
+            zIndex: 50,
+            maxWidth: "320px",
+            padding: "12px 16px",
+            borderRadius: "8px",
+            backgroundColor: "rgba(15, 23, 42, 0.95)",
+            color: "#e5e7eb",
+            fontSize: "14px",
+            lineHeight: "1.4",
+            boxShadow: "0 10px 25px rgba(15, 23, 42, 0.6)",
+            pointerEvents: "none",
+          }}
+        >
+          {toastMessage}
+        </div>
+      ) : null}
+    </>
+  );
+}

src/app/p/[slug]/page.tsx

@@ -0,0 +1,80 @@
+import { notFound } from "next/navigation";
+import { PrismaClient } from "@prisma/client";
+
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+import { buildStaticHtml } from "@/features/export/buildStaticHtml";
+import { getCachedPublicProject } from "@/features/projects/publicCache";
+import PublicProjectPageClient from "./PublicProjectPageClient";
+
+const prisma = new PrismaClient();
+
+interface PageParams {
+  // Next.js App Router 에서는 params 가 Promise 로 전달되므로
+  // 서버 컴포넌트에서 사용하기 전에 await 로 한 번 풀어줘야 한다.
+  params: Promise<{ slug: string }>;
+}
+
+// /p/[slug] 공개 페이지
+// - slug 에 해당하는 Project 의 contentJson 을 불러와 buildStaticHtml 로 정적 HTML 을 생성한다.
+// - Export ZIP 에 포함되는 index.html 과 동일한 app-root DOM 구조를 사용해 렌더링한다.
+// - 인증 없이 접근 가능하며, 폼 제출은 /api/forms/submit 을 통해 정적 Export 와 동일하게 동작한다.
+export default async function PublicProjectPage({ params }: PageParams) {
+  // Next 가 넘겨주는 params 는 Promise 이므로, 먼저 await 해서 slug 를 꺼낸다.
+  const resolvedParams = await params;
+  const slugRaw = resolvedParams.slug ?? "";
+  const slug = slugRaw.toString().trim();
+
+  if (!slug) {
+    notFound();
+  }
+
+  // 1차로 메모리 기반 퍼블릭 캐시에서 스냅샷을 조회한다.
+  const cached = getCachedPublicProject(slug);
+
+  let blocks: Block[];
+  let title: string;
+
+  if (cached) {
+    blocks = cached.contentJson ?? [];
+    title = cached.title ?? "";
+  } else {
+    const project = await prisma.project.findUnique({
+      where: { slug },
+      select: {
+        title: true,
+        slug: true,
+        contentJson: true,
+      },
+    });
+
+    if (!project) {
+      notFound();
+    }
+
+    const rawContent = project.contentJson;
+    let contentBlocks: Block[] = [];
+    if (Array.isArray(rawContent)) {
+      contentBlocks = rawContent as unknown as Block[];
+    }
+    blocks = contentBlocks;
+    title = project.title;
+  }
+
+  // Export index.html 과 동일한 규칙으로 ProjectConfig 를 구성한다.
+  const projectConfig: ProjectConfig = {
+    title,
+    slug,
+    canvasPreset: "full",
+    canvasBgColorHex: "#020617",
+    bodyBgColorHex: "#020617",
+  } as ProjectConfig;
+
+  const fullHtml = buildStaticHtml(blocks, projectConfig);
+
+  // buildStaticHtml 이 생성한 index.html 에서 <main> ... </main> 블록만 추출해 렌더링한다.
+  // 이렇게 하면 Export index.html 과 동일한 main/app-root DOM 구조를 재사용할 수 있다.
+  const mainMatch = fullHtml.match(/<main[\s\S]*?<\/main>/);
+  const mainHtml = mainMatch ? mainMatch[0] : "";
+
+  return <PublicProjectPageClient html={mainHtml} />;
+}

src/app/preview/layout.tsx

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import "../../styles/editor.css";
+
+export default function PreviewLayout({ children }: { children: ReactNode }) {
+  // 프리뷰 화면에서도 에디터 크롬과 동일한 전용 스타일(editor.css)을 사용한다.
+  // 콘텐츠 블록 자체의 모양은 builder.css(pb-*) 기준으로 렌더된다.
+  return children;
+}

src/app/preview/page.tsx

@@ -1,19 +1,208 @@
 "use client";
 
+import type { CSSProperties } from "react";
+import { useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useEditorStore } from "@/features/editor/state/editorStore";
 import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
 
 export default function PreviewPage() {
+  const router = useRouter();
   const blocks = useEditorStore((state) => state.blocks);
+  const projectConfig = useEditorStore((state) => (state as any).projectConfig);
+  const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
+  const updateProjectConfig = useEditorStore((state) => state.updateProjectConfig);
+  const resetHistory = useEditorStore((state) => (state as any).resetHistory as () => void);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const checkAuth = async () => {
+      try {
+        const res = await fetch("/api/auth/me");
+        if (!res.ok && res.status === 401 && !cancelled) {
+          router.push("/login");
+        }
+      } catch {
+        // 네트워크 오류 등은 일단 무시하고, 페이지 접근을 막지 않는다.
+      }
+    };
+
+    void checkAuth();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [router]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const configSlugRaw = (projectConfig as any)?.slug?.trim?.();
+    const configSlug =
+      typeof configSlugRaw === "string" && configSlugRaw.length > 0 ? configSlugRaw : "";
+
+    let querySlug = "";
+    try {
+      const url = new URL(window.location.href);
+      const fromQuery = url.searchParams.get("slug")?.trim();
+
+      if (fromQuery) {
+        querySlug = fromQuery;
+      }
+    } catch {
+      // URL 파싱 오류는 무시하고, autosave 복원 없이 진행한다.
+    }
+
+    const effectiveSlug = querySlug || configSlug;
+    if (!effectiveSlug) return;
+
+    const key = `pb:autosave:${effectiveSlug}`;
+    const raw = window.localStorage.getItem(key);
+
+    if (!raw) {
+      // autosave 스냅샷이 없을 때만 URL 쿼리 슬러그를 projectConfig.slug 에 동기화한다.
+      if (querySlug && querySlug !== configSlug) {
+        updateProjectConfig({ slug: querySlug } as any);
+      }
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(raw) as { blocks?: any[]; projectConfig?: any };
+      if (Array.isArray(parsed.blocks)) {
+        replaceBlocks(parsed.blocks as any);
+      }
+      if (parsed.projectConfig) {
+        updateProjectConfig(parsed.projectConfig as any);
+      } else if (querySlug && querySlug !== configSlug) {
+        // 스냅샷에 projectConfig 가 없을 때만 쿼리 슬러그를 반영한다.
+        updateProjectConfig({ slug: querySlug } as any);
+      }
+
+      // 프리뷰 진입 시 autosave 프로젝트를 복원하는 경우에도 에디터 히스토리는 새 프로젝트 기준으로만 유지되도록 초기화한다.
+      resetHistory();
+    } catch {
+      return;
+    }
+  }, [projectConfig?.slug, replaceBlocks, updateProjectConfig]);
+
+  const canvasStyle: CSSProperties = {};
+  const preset = projectConfig?.canvasPreset ?? "full";
+
+   const mainStyle: CSSProperties = {};
+   if (projectConfig?.bodyBgColorHex && projectConfig.bodyBgColorHex.trim()) {
+     mainStyle.backgroundColor = projectConfig.bodyBgColorHex;
+   }
+
+  const handleExportZip = async () => {
+    try {
+      const payload = {
+        blocks,
+        projectConfig,
+      };
+
+      const response = await fetch("/api/export", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        return;
+      }
+
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const slug = (projectConfig?.slug ?? "").trim() || "page-builder-export";
+
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `${slug}.zip`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("프리뷰 ZIP 내보내기 중 오류", error);
+    }
+  };
+
+  const widthPx =
+    typeof projectConfig?.canvasWidthPx === "number" && projectConfig.canvasWidthPx > 0
+      ? projectConfig.canvasWidthPx
+      : null;
+
+  const projectSlugRaw = (projectConfig as any)?.slug?.trim?.();
+  const projectSlug =
+    typeof projectSlugRaw === "string" && projectSlugRaw.length > 0 ? projectSlugRaw : "";
+  const editorHref = projectSlug
+    ? `/editor?slug=${encodeURIComponent(projectSlug)}`
+    : "/editor";
+
+  if (widthPx != null) {
+    canvasStyle.maxWidth = `${widthPx}px`;
+  } else if (preset === "mobile") {
+    canvasStyle.maxWidth = "390px";
+  } else if (preset === "tablet") {
+    canvasStyle.maxWidth = "768px";
+  } else if (preset === "desktop") {
+    canvasStyle.maxWidth = "1200px";
+  }
+
+  if (projectConfig?.canvasBgColorHex && projectConfig.canvasBgColorHex.trim()) {
+    canvasStyle.backgroundColor = projectConfig.canvasBgColorHex;
+  }
 
   return (
-    <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50">
+    <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50" style={mainStyle}>
       <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between">
+        <div>
           <h1 className="text-xl font-semibold">Page Preview</h1>
           <p className="text-xs text-slate-400">빌더로 만든 페이지를 미리 보는 화면</p>
+        </div>
+        <div className="flex items-center gap-2 text-xs">
+          <button
+            type="button"
+            className="inline-flex items-center rounded border border-slate-700 bg-slate-900 px-3 py-1 text-slate-100 hover:bg-slate-800"
+            onClick={() => {
+              void handleExportZip();
+            }}
+          >
+            페이지 파일로 내보내기 (ZIP)
+          </button>
+          <Link
+            href="/projects"
+            className="inline-flex items-center rounded border border-slate-700 bg-slate-900 px-3 py-1 text-xs text-slate-100 hover:bg-slate-800"
+          >
+            프로젝트 목록
+          </Link>
+          <Link
+            href={editorHref}
+            className="inline-flex items-center rounded border border-slate-700 bg-slate-900 px-3 py-1 text-xs text-slate-100 hover:bg-slate-800"
+          >
+            에디터로 돌아가기
+          </Link>
+        </div>
       </header>
-      {/* 에디터 크롬 없이 순수 페이지 형태로 블록들을 렌더링 */}
-      <PublicPageRenderer blocks={blocks} />
+      {/* 에디터 크롬 없이 순수 페이지 형태로 블록들을 렌더링하되, projectConfig 에 따라 최대 폭을 제한한다. */}
+      <section className="flex flex-1 overflow-auto">
+        <div className="flex-1 flex justify-center px-4 py-6">
+          <div
+            data-testid="preview-canvas-inner"
+            className="w-full"
+            style={canvasStyle}
+          >
+            <PublicPageRenderer
+              blocks={blocks}
+              projectSlug={(projectConfig?.slug ?? "").trim() || undefined}
+            />
+          </div>
+        </div>
+      </section>
     </main>
   );
 }

src/app/projects/[slug]/submissions/page.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter, useParams } from "next/navigation";
+
+// 프로젝트별 폼 제출 내역을 조회해서 보여주는 페이지 컴포넌트.
+// - URL 의 slug 파라미터를 기준으로 /api/projects/[slug]/submissions 에 요청을 보낸다.
+// - 401 이면 로그인 페이지로 이동시키고, 404/500 계열 에러는 한국어 에러 메시지로 안내한다.
+// - 응답 payload 의 name/email/phone/birthdate 는 개별 컬럼으로, 나머지는 "기타 필드" 텍스트로 렌더링한다.
+
+interface SubmissionItem {
+  id: string;
+  createdAt: string;
+  projectSlug: string;
+  // 서버에서 복호화된 폼 필드 전체가 payload 로 내려온다.
+  payload: Record<string, unknown>;
+}
+
+type PageStatus = "idle" | "loading" | "error";
+
+export default function ProjectSubmissionsPage() {
+  const router = useRouter();
+  const params = useParams() as { slug?: string } | null;
+  const slug = (params?.slug ?? "").toString();
+
+  const [submissions, setSubmissions] = useState<SubmissionItem[]>([]);
+  const [status, setStatus] = useState<PageStatus>("idle");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  // 마운트 시 현재 slug 기준으로 폼 제출 내역을 불러온다.
+  useEffect(() => {
+    if (!slug) return;
+
+    let cancelled = false;
+
+    const load = async () => {
+      try {
+        setStatus("loading");
+        setErrorMessage(null);
+
+        const res = await fetch(`/api/projects/${encodeURIComponent(slug)}/submissions`);
+
+        if (!res.ok) {
+          if (cancelled) return;
+
+          if (res.status === 401) {
+            setStatus("error");
+            setErrorMessage("폼 제출 내역을 조회하려면 로그인이 필요합니다. 다시 로그인해 주세요.");
+            router.push("/login");
+            return;
+          }
+
+          if (res.status === 404) {
+            setStatus("error");
+            setErrorMessage(
+              "프로젝트를 찾을 수 없거나 접근 권한이 없습니다. 프로젝트 소유자 계정으로 다시 로그인해 주세요.",
+            );
+            return;
+          }
+
+          setStatus("error");
+          setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+          return;
+        }
+
+        const data = (await res.json()) as SubmissionItem[];
+
+        if (!cancelled) {
+          setSubmissions(Array.isArray(data) ? data : []);
+          setStatus("idle");
+          setErrorMessage(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setStatus("error");
+          setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [slug]);
+
+  // payload 에서 name/email/phone/birthdate 를 제외한 나머지 필드를 "기타" 영역으로 모아 보여준다.
+  const renderOtherFields = (payload: Record<string, unknown>): string => {
+    const knownKeys = new Set(["name", "email", "phone", "birthdate"]);
+    const entries = Object.entries(payload).filter(([key]) => !knownKeys.has(key));
+
+    if (entries.length === 0) {
+      return "-";
+    }
+
+    return entries
+      .map(([key, value]) => {
+        const stringValue = typeof value === "string" ? value : JSON.stringify(value);
+        return `${key}: ${stringValue}`;
+      })
+      .join("\n");
+  };
+
+  return (
+    <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50">
+      <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between bg-slate-950/80 backdrop-blur">
+        <div>
+          <h1 className="text-xl font-semibold">폼 제출 내역</h1>
+          <p className="text-xs text-slate-400">프로젝트에 연결된 폼으로 수집된 제출 데이터를 확인할 수 있습니다.</p>
+        </div>
+        <div className="text-xs text-slate-300 flex flex-col items-end gap-1">
+          <span className="font-mono text-[11px]">{slug}</span>
+          <a
+            href="/projects"
+            role="link"
+            className="text-[11px] text-sky-400 hover:text-sky-300 underline-offset-2 hover:underline"
+            onClick={(event) => {
+              event.preventDefault();
+              router.push("/projects");
+            }}
+          >
+            프로젝트 목록
+          </a>
+        </div>
+      </header>
+
+      <section className="flex-1 px-6 py-4 overflow-auto">
+        {status === "error" && errorMessage && (
+          <p className="text-xs text-red-300 mb-3">{errorMessage}</p>
+        )}
+
+        {status === "loading" && (
+          <p className="text-xs text-slate-400 mb-3">폼 제출 내역을 불러오는 중입니다...</p>
+        )}
+
+        {submissions.length === 0 && status === "idle" && !errorMessage && (
+          <p className="text-xs text-slate-400">아직 수집된 폼 제출 내역이 없습니다.</p>
+        )}
+
+        {submissions.length > 0 && (
+          <table className="w-full text-xs text-left border-collapse mt-2">
+            <thead>
+              <tr className="border-b border-slate-800 text-slate-400">
+                <th className="py-2 pr-4">제출 시각</th>
+                <th className="py-2 pr-4">이름</th>
+                <th className="py-2 pr-4">이메일</th>
+                <th className="py-2 pr-4">전화번호</th>
+                <th className="py-2 pr-4">생년월일</th>
+                <th className="py-2 pr-4">기타 필드</th>
+              </tr>
+            </thead>
+            <tbody>
+              {submissions.map((item) => {
+                const payload = (item.payload ?? {}) as Record<string, unknown>;
+
+                const nameValue = payload["name"];
+                const emailValue = payload["email"];
+                const phoneValue = payload["phone"];
+                const birthdateValue = payload["birthdate"];
+
+                const name = typeof nameValue === "string" ? nameValue : "";
+                const email = typeof emailValue === "string" ? emailValue : "";
+                const phone = typeof phoneValue === "string" ? phoneValue : "";
+                const birthdate = typeof birthdateValue === "string" ? birthdateValue : "";
+
+                return (
+                  <tr key={item.id} className="border-b border-slate-900 hover:bg-slate-900/60">
+                    <td className="py-2 pr-4 text-slate-300 text-[11px]">
+                      {new Date(item.createdAt).toLocaleString()}
+                    </td>
+                    <td className="py-2 pr-4 text-slate-100">{name}</td>
+                    <td className="py-2 pr-4 text-slate-300">{email}</td>
+                    <td className="py-2 pr-4 text-slate-300">{phone}</td>
+                    <td className="py-2 pr-4 text-slate-300">{birthdate}</td>
+                    <td className="py-2 pr-4 text-slate-300 whitespace-pre-wrap">
+                      {renderOtherFields(payload)}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </section>
+    </main>
+  );
+}

src/app/projects/page.tsx

@@ -0,0 +1,420 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  FilePlus2,
+  Trash2,
+  Eye,
+  Pencil,
+  ListChecks,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+
+interface ProjectListItem {
+  id: string;
+  title: string;
+  slug: string;
+  status: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function ProjectsPage() {
+  const router = useRouter();
+  const [projects, setProjects] = useState<ProjectListItem[]>([]);
+  const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [selectedSlugs, setSelectedSlugs] = useState<string[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 10;
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      try {
+        setStatus("loading");
+        setErrorMessage(null);
+
+        const res = await fetch("/api/projects");
+        if (!res.ok) {
+          if (!cancelled) {
+            setStatus("error");
+
+            if (res.status === 401) {
+              setErrorMessage("프로젝트 목록을 불러오는 중 인증 오류가 발생했습니다. 다시 로그인해 주세요.");
+              router.push("/login");
+            } else {
+              setErrorMessage(
+                "프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+              );
+            }
+          }
+          return;
+        }
+
+        const data = (await res.json()) as ProjectListItem[];
+        if (!cancelled) {
+          setProjects(Array.isArray(data) ? data : []);
+          setStatus("idle");
+          setErrorMessage(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setStatus("error");
+          setErrorMessage("프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    const totalPages = Math.max(1, Math.ceil(projects.length / pageSize));
+    setCurrentPage((prev) => Math.min(prev, totalPages));
+  }, [projects.length, pageSize]);
+
+  const handleDelete = async (slug: string) => {
+    if (typeof window !== "undefined") {
+      const confirmed = window.confirm(
+        "이 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
+      );
+
+      if (!confirmed) return;
+    }
+
+    try {
+      const res = await fetch(`/api/projects/${encodeURIComponent(slug)}`, {
+        method: "DELETE",
+      });
+
+      if (!res.ok) {
+        setStatus("error");
+        setErrorMessage("프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        return;
+      }
+
+      setProjects((prev) => prev.filter((p) => p.slug !== slug));
+      setSelectedSlugs((prev) => prev.filter((s) => s !== slug));
+
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem(`pb:project:${slug}`);
+        window.localStorage.removeItem(`pb:autosave:${slug}`);
+      }
+
+      setStatus("idle");
+      setErrorMessage(null);
+    } catch {
+      setStatus("error");
+      setErrorMessage("프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      const res = await fetch("/api/auth/logout", {
+        method: "POST",
+      });
+
+      if (!res.ok) {
+        setStatus("error");
+        setErrorMessage("로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        return;
+      }
+
+      router.push("/login");
+    } catch {
+      setStatus("error");
+      setErrorMessage("로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+    }
+  };
+
+  const totalCount = projects.length;
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const pageProjects = projects.slice(startIndex, endIndex);
+
+  const handleBulkDelete = async () => {
+    const slugs = selectedSlugs;
+    if (slugs.length === 0) return;
+
+    if (typeof window !== "undefined") {
+      const confirmed = window.confirm(
+        "선택한 프로젝트를 모두 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
+      );
+      if (!confirmed) return;
+    }
+
+    try {
+      const results = await Promise.all(
+        slugs.map(async (slug) => {
+          const res = await fetch(`/api/projects/${encodeURIComponent(slug)}`, { method: "DELETE" });
+          return { slug, ok: res.ok };
+        }),
+      );
+
+      const okSlugs = results.filter((r) => r.ok).map((r) => r.slug);
+
+      if (okSlugs.length === 0) {
+        setStatus("error");
+        setErrorMessage("선택한 프로젝트를 삭제하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        return;
+      }
+
+      setProjects((prev) => prev.filter((p) => !okSlugs.includes(p.slug)));
+      setSelectedSlugs((prev) => prev.filter((s) => !okSlugs.includes(s)));
+
+      if (typeof window !== "undefined") {
+        for (const slug of okSlugs) {
+          window.localStorage.removeItem(`pb:project:${slug}`);
+          window.localStorage.removeItem(`pb:autosave:${slug}`);
+        }
+      }
+
+      if (okSlugs.length !== slugs.length) {
+        setStatus("error");
+        setErrorMessage(
+          "일부 프로젝트 삭제에 실패했습니다. 페이지를 새로고침한 뒤 목록을 확인해 주세요.",
+        );
+      } else {
+        setStatus("idle");
+        setErrorMessage(null);
+      }
+    } catch {
+      setStatus("error");
+      setErrorMessage("선택한 프로젝트를 삭제하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+    }
+  };
+
+  return (
+    <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50">
+      <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between bg-slate-950/80 backdrop-blur">
+        <div>
+          <h1 className="text-xl font-semibold">프로젝트 목록</h1>
+          <p className="text-xs text-slate-400">저장된 프로젝트들을 한 눈에 볼 수 있는 목록</p>
+        </div>
+        <div className="flex items-center gap-2 text-xs">
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 rounded border border-slate-700 px-3 py-1 text-slate-200 hover:bg-slate-900"
+            onClick={() => {
+              void handleLogout();
+            }}
+          >
+            로그아웃
+          </button>
+          <Link
+            href="/projects/submissions"
+            className="inline-flex items-center gap-1 rounded border border-emerald-700 bg-emerald-950 px-3 py-1 text-emerald-100 hover:bg-emerald-900 shadow-sm"
+          >
+            <ListChecks className="w-4 h-4" aria-hidden="true" />
+            <span>전체 제출 내역</span>
+          </Link>
+          <Link
+            href="/editor?new=1"
+            className="inline-flex items-center gap-1 rounded border border-sky-700 bg-sky-950 px-3 py-1 text-sky-100 hover:bg-sky-900 shadow-sm"
+          >
+            <FilePlus2 className="w-4 h-4" aria-hidden="true" />
+            <span>새 프로젝트 만들기</span>
+          </Link>
+        </div>
+      </header>
+      <section className="flex-1 px-6 py-4 overflow-auto">
+        {status === "error" && (
+          <p className="text-xs text-red-300 mb-3">
+            {errorMessage ?? "프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."}
+          </p>
+        )}
+        {projects.length === 0 && status === "idle" && (
+          <p className="text-xs text-slate-400">아직 저장된 프로젝트가 없습니다. 에디터에서 프로젝트를 저장해 보세요.</p>
+        )}
+        {projects.length > 0 && (
+          <>
+            <div className="flex items-center justify-between mb-2 text-[11px] text-slate-300">
+              <div className="inline-flex items-center gap-2">
+                <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-slate-900/70 border border-slate-700">
+                  <ListChecks className="w-3 h-3 text-slate-400" aria-hidden="true" />
+                  <span>
+                    선택된 프로젝트: <span className="font-semibold">{selectedSlugs.length}</span>개
+                  </span>
+                </span>
+              </div>
+              <button
+                type="button"
+                className="inline-flex items-center gap-1 rounded border border-red-700 px-2 py-1 text-red-200 hover:bg-red-900/40 disabled:opacity-40 disabled:cursor-not-allowed"
+                disabled={selectedSlugs.length === 0}
+                onClick={() => {
+                  void handleBulkDelete();
+                }}
+              >
+                <Trash2 className="w-3 h-3" aria-hidden="true" />
+                <span>선택 삭제</span>
+              </button>
+            </div>
+            <table className="w-full text-xs text-left border-collapse mt-2">
+              <thead>
+                <tr className="border-b border-slate-800 text-slate-400">
+                  <th className="py-2 pr-2 w-8">
+                    <input
+                      type="checkbox"
+                      className="h-3 w-3 rounded border-slate-700 bg-slate-900 align-middle"
+                      aria-label="전체 선택"
+                      checked={
+                        pageProjects.length > 0 && pageProjects.every((p) => selectedSlugs.includes(p.slug))
+                      }
+                      onChange={(e) => {
+                        if (e.target.checked) {
+                          const slugsOnPage = pageProjects.map((p) => p.slug);
+                          setSelectedSlugs((prev) => Array.from(new Set([...prev, ...slugsOnPage])));
+                        } else {
+                          const slugsOnPage = pageProjects.map((p) => p.slug);
+                          setSelectedSlugs((prev) => prev.filter((s) => !slugsOnPage.includes(s)));
+                        }
+                      }}
+                    />
+                  </th>
+                  <th className="py-2 pr-4">제목</th>
+                  <th className="py-2 pr-4">주소(slug)</th>
+                  <th className="py-2 pr-4">상태</th>
+                  <th className="py-2 pr-4">생성일</th>
+                  <th className="py-2 pr-4">수정일</th>
+                  <th className="py-2 pr-4 text-right">액션</th>
+                </tr>
+              </thead>
+              <tbody>
+                {pageProjects.map((project) => {
+                  const checked = selectedSlugs.includes(project.slug);
+                  return (
+                    <tr key={project.id} className="border-b border-slate-900 hover:bg-slate-900/60">
+                      <td className="py-2 pr-2 w-8">
+                        <input
+                          type="checkbox"
+                          className="h-3 w-3 rounded border-slate-700 bg-slate-900 align-middle"
+                          aria-label={`${project.title} 선택`}
+                          checked={checked}
+                          onChange={(e) => {
+                            if (e.target.checked) {
+                              setSelectedSlugs((prev) =>
+                                prev.includes(project.slug) ? prev : [...prev, project.slug],
+                              );
+                            } else {
+                              setSelectedSlugs((prev) => prev.filter((s) => s !== project.slug));
+                            }
+                          }}
+                        />
+                      </td>
+                      <td className="py-2 pr-4 text-slate-100">{project.title}</td>
+                      <td className="py-2 pr-4 text-slate-300 font-mono text-[11px]">{project.slug}</td>
+                      <td className="py-2 pr-4 text-slate-300">{project.status}</td>
+                      <td className="py-2 pr-4 text-slate-500 text-[11px]">
+                        {new Date(project.createdAt).toLocaleString()}
+                      </td>
+                      <td className="py-2 pr-4 text-slate-500 text-[11px]">
+                        {new Date(project.updatedAt).toLocaleString()}
+                      </td>
+                      <td className="py-2 pl-4 pr-0 text-right text-[11px]">
+                        <div className="inline-flex items-center gap-2">
+                          <Link
+                            href={`/editor?slug=${encodeURIComponent(project.slug)}`}
+                            className="inline-flex items-center gap-1 text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline"
+                          >
+                            <Pencil className="w-3 h-3" aria-hidden="true" />
+                            <span>편집</span>
+                          </Link>
+                          <Link
+                            href={`/preview?slug=${encodeURIComponent(project.slug)}`}
+                            className="inline-flex items-center gap-1 text-slate-300 hover:text-slate-100 underline-offset-2 hover:underline"
+                          >
+                            <Eye className="w-3 h-3" aria-hidden="true" />
+                            <span>미리보기</span>
+                          </Link>
+                          <Link
+                            href={`/projects/${encodeURIComponent(project.slug)}/submissions`}
+                            className="inline-flex items-center gap-1 text-emerald-300 hover:text-emerald-100 underline-offset-2 hover:underline"
+                          >
+                            <ListChecks className="w-3 h-3" aria-hidden="true" />
+                            <span>폼 제출 내역</span>
+                          </Link>
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-1 text-red-300 hover:text-red-200 underline-offset-2 hover:underline"
+                            onClick={() => {
+                              void handleDelete(project.slug);
+                            }}
+                          >
+                            <Trash2 className="w-3 h-3" aria-hidden="true" />
+                            <span>삭제</span>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+
+            <div className="mt-3 flex items-center justify-between text-[11px] text-slate-300">
+              <div className="inline-flex items-center gap-2">
+                <span className="px-2 py-1 rounded-full bg-slate-900/70 border border-slate-700">
+                  전체 {totalCount}개 중{" "}
+                  <span className="font-semibold">
+                    {totalCount === 0 ? 0 : startIndex + 1}–{Math.min(endIndex, totalCount)}
+                  </span>
+                </span>
+              </div>
+              <div className="flex items-center gap-1">
+                {Array.from({ length: totalPages }).map((_, idx) => {
+                  const page = idx + 1;
+                  const isActive = page === currentPage;
+                  return (
+                    <button
+                      key={page}
+                      type="button"
+                      onClick={() => setCurrentPage(page)}
+                      className={`w-6 h-6 rounded-full text-[10px] flex items-center justify-center border transition-colors ${
+                        isActive
+                          ? "bg-sky-600 text-white border-sky-500 shadow-sm"
+                          : "bg-slate-900 text-slate-300 border-slate-700 hover:bg-slate-800"
+                      }`}
+                    >
+                      {page}
+                    </button>
+                  );
+                })}
+              </div>
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  disabled={currentPage === 1}
+                  className="inline-flex items-center gap-1 px-2 py-1 rounded border border-slate-700 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-800"
+                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                >
+                  <ChevronLeft className="w-3 h-3" aria-hidden="true" />
+                  <span>이전</span>
+                </button>
+                <button
+                  type="button"
+                  disabled={currentPage === totalPages}
+                  className="inline-flex items-center gap-1 px-2 py-1 rounded border border-slate-700 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-800"
+                  onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                >
+                  <span>다음</span>
+                  <ChevronRight className="w-3 h-3" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      </section>
+    </main>
+  );
+}

src/app/projects/submissions/page.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+interface SubmissionItem {
+  id: string;
+  createdAt: string;
+  projectSlug: string;
+  projectTitle: string | null;
+  payload: Record<string, unknown>;
+}
+
+type PageStatus = "idle" | "loading" | "error";
+
+export default function AllProjectSubmissionsPage() {
+  const router = useRouter();
+  const [submissions, setSubmissions] = useState<SubmissionItem[]>([]);
+  const [status, setStatus] = useState<PageStatus>("idle");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      try {
+        setStatus("loading");
+        setErrorMessage(null);
+
+        const res = await fetch("/api/projects/submissions");
+
+        if (!res.ok) {
+          if (cancelled) return;
+
+          if (res.status === 401) {
+            setStatus("error");
+            setErrorMessage("폼 제출 내역을 조회하려면 로그인이 필요합니다. 다시 로그인해 주세요.");
+            router.push("/login");
+            return;
+          }
+
+          setStatus("error");
+          setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+          return;
+        }
+
+        const data = (await res.json()) as SubmissionItem[];
+
+        if (!cancelled) {
+          setSubmissions(Array.isArray(data) ? data : []);
+          setStatus("idle");
+          setErrorMessage(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setStatus("error");
+          setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const renderOtherFields = (payload: Record<string, unknown>): string => {
+    const knownKeys = new Set(["name", "email", "phone", "birthdate"]);
+    const entries = Object.entries(payload).filter(([key]) => !knownKeys.has(key));
+
+    if (entries.length === 0) {
+      return "-";
+    }
+
+    return entries
+      .map(([key, value]) => {
+        const stringValue = typeof value === "string" ? value : JSON.stringify(value);
+        return `${key}: ${stringValue}`;
+      })
+      .join("\n");
+  };
+
+  return (
+    <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50">
+      <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between bg-slate-950/80 backdrop-blur">
+        <div>
+          <h1 className="text-xl font-semibold">전체 폼 제출 내역</h1>
+          <p className="text-xs text-slate-400">로그인한 계정의 모든 프로젝트에 대한 폼 제출 데이터를 확인할 수 있습니다.</p>
+        </div>
+        <div className="text-xs text-slate-300 flex flex-col items-end gap-1">
+          <a
+            href="/projects"
+            role="link"
+            className="text-[11px] text-sky-400 hover:text-sky-300 underline-offset-2 hover:underline"
+            onClick={(event) => {
+              event.preventDefault();
+              router.push("/projects");
+            }}
+          >
+            프로젝트 목록
+          </a>
+        </div>
+      </header>
+
+      <section className="flex-1 px-6 py-4 overflow-auto">
+        {status === "error" && errorMessage && (
+          <p className="text-xs text-red-300 mb-3">{errorMessage}</p>
+        )}
+
+        {status === "loading" && (
+          <p className="text-xs text-slate-400 mb-3">폼 제출 내역을 불러오는 중입니다...</p>
+        )}
+
+        {submissions.length === 0 && status === "idle" && !errorMessage && (
+          <p className="text-xs text-slate-400">아직 수집된 폼 제출 내역이 없습니다.</p>
+        )}
+
+        {submissions.length > 0 && (
+          <table className="w-full text-xs text-left border-collapse mt-2">
+            <thead>
+              <tr className="border-b border-slate-800 text-slate-400">
+                <th className="py-2 pr-4">제출 시각</th>
+                <th className="py-2 pr-4">프로젝트</th>
+                <th className="py-2 pr-4">Slug</th>
+                <th className="py-2 pr-4">이름</th>
+                <th className="py-2 pr-4">이메일</th>
+                <th className="py-2 pr-4">전화번호</th>
+                <th className="py-2 pr-4">생년월일</th>
+                <th className="py-2 pr-4">기타 필드</th>
+              </tr>
+            </thead>
+            <tbody>
+              {submissions.map((item) => {
+                const payload = (item.payload ?? {}) as Record<string, unknown>;
+
+                const nameValue = payload["name"];
+                const emailValue = payload["email"];
+                const phoneValue = payload["phone"];
+                const birthdateValue = payload["birthdate"];
+
+                const name = typeof nameValue === "string" ? nameValue : "";
+                const email = typeof emailValue === "string" ? emailValue : "";
+                const phone = typeof phoneValue === "string" ? phoneValue : "";
+                const birthdate = typeof birthdateValue === "string" ? birthdateValue : "";
+
+                return (
+                  <tr key={item.id} className="border-b border-slate-900 hover:bg-slate-900/60">
+                    <td className="py-2 pr-4 text-slate-300 text-[11px]">
+                      {new Date(item.createdAt).toLocaleString()}
+                    </td>
+                    <td className="py-2 pr-4 text-slate-100">{item.projectTitle ?? "-"}</td>
+                    <td className="py-2 pr-4 text-slate-300">{item.projectSlug}</td>
+                    <td className="py-2 pr-4 text-slate-100">{name}</td>
+                    <td className="py-2 pr-4 text-slate-300">{email}</td>
+                    <td className="py-2 pr-4 text-slate-300">{phone}</td>
+                    <td className="py-2 pr-4 text-slate-300">{birthdate}</td>
+                    <td className="py-2 pr-4 text-slate-300 whitespace-pre-wrap">
+                      {renderOtherFields(payload)}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </section>
+    </main>
+  );
+}

src/app/signup/page.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { FormEvent, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+// 회원가입 페이지 컴포넌트
+// - 이메일/비밀번호를 입력받아 /api/auth/signup 으로 요청을 전송한다.
+// - 성공 시 /projects 로 이동하고, 실패 시 에러 메시지를 보여준다.
+
+export default function SignupPage() {
+  const router = useRouter();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const checkAuth = async () => {
+      try {
+        const res = await fetch("/api/auth/me");
+        if (!cancelled && res.ok) {
+          router.push("/projects");
+        }
+      } catch {
+        // ignore
+      }
+    };
+
+    void checkAuth();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [router]);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    setError(null);
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/auth/signup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+
+      if (!res.ok) {
+        try {
+          const data = await res.json();
+          setError(data?.message ?? "회원가입에 실패했습니다. 다시 시도해 주세요.");
+        } catch {
+          setError("회원가입에 실패했습니다. 다시 시도해 주세요.");
+        }
+        setLoading(false);
+        return;
+      }
+
+      router.push("/projects");
+    } catch {
+      setError("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-slate-950 text-slate-50">
+      <div className="w-full max-w-sm rounded-lg border border-slate-800 bg-slate-900/70 p-6 shadow-xl">
+        <h1 className="text-lg font-semibold mb-1">회원가입</h1>
+        <p className="text-xs text-slate-400 mb-4">새 계정을 생성한 뒤 프로젝트를 저장하고 관리할 수 있습니다.</p>
+
+        {error && <p className="mb-3 text-xs text-red-300">{error}</p>}
+
+        <form onSubmit={handleSubmit} className="space-y-3 text-xs">
+          <div className="space-y-1">
+            <label htmlFor="email" className="block text-slate-200">
+              이메일
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs text-slate-50 focus:outline-none focus:ring-1 focus:ring-sky-500"
+              required
+            />
+          </div>
+
+          <div className="space-y-1">
+            <label htmlFor="password" className="block text-slate-200">
+              비밀번호
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs text-slate-50 focus:outline-none focus:ring-1 focus:ring-sky-500"
+              required
+              minLength={8}
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="mt-2 w-full inline-flex items-center justify-center gap-1 rounded bg-sky-600 hover:bg-sky-500 disabled:opacity-40 disabled:cursor-not-allowed px-3 py-1 text-xs font-medium"
+          >
+            {loading ? "회원가입 중..." : "회원가입"}
+          </button>
+        </form>
+
+        <p className="mt-4 text-[11px] text-slate-400">
+          이미 계정이 있다면
+          {" "}
+          <Link href="/login" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
+            로그인
+          </Link>
+          으로 이동해 주세요.
+        </p>
+      </div>
+    </main>
+  );
+}

src/features/auth/authCrypto.ts

@@ -0,0 +1,146 @@
+import bcrypt from "bcryptjs";
+import jwt, { JwtPayload } from "jsonwebtoken";
+import { randomBytes, createCipheriv, createDecipheriv, createHash } from "crypto";
+
+// 인증/보안 관련 공통 유틸리티 함수들을 제공한다.
+// - 비밀번호 해시/검증 (bcrypt 기반)
+// - JWT 액세스 토큰 발급/검증
+// - 민감정보 JSON 암호화/복호화 (AES-256-GCM)
+
+export interface AccessTokenPayload extends JwtPayload {
+  sub: string;
+  email: string;
+  tokenVersion: number;
+}
+
+export interface JwtUserLike {
+  id: string;
+  email: string;
+  tokenVersion: number;
+}
+
+// 내부에서 사용할 JWT 시크릿을 가져온다.
+// - 설정되지 않은 경우에는 명확한 에러를 던져 조기에 문제를 발견한다.
+function getJwtSecret(): string {
+  const secret = process.env.AUTH_JWT_SECRET;
+  if (!secret || secret.length === 0) {
+    throw new Error("AUTH_JWT_SECRET 환경변수가 설정되지 않았습니다.");
+  }
+  return secret;
+}
+
+// 암호화 키 원본 문자열로부터 32바이트 AES 키를 파생한다.
+// - 키 문자열 길이에 관계없이 SHA-256 해시를 사용해 32바이트를 만든다.
+function deriveEncryptionKey(): Buffer {
+  const raw = process.env.AUTH_ENCRYPTION_KEY;
+  if (!raw || raw.length === 0) {
+    throw new Error("AUTH_ENCRYPTION_KEY 환경변수가 설정되지 않았습니다.");
+  }
+  return createHash("sha256").update(raw).digest();
+}
+
+// 최소 비밀번호 길이 (보안 요구사항: 8자 이상)
+const MIN_PASSWORD_LENGTH = 8;
+
+// 비밀번호를 bcrypt 해시로 변환한다.
+export async function hashPassword(plain: string): Promise<string> {
+  if (typeof plain !== "string" || plain.length < MIN_PASSWORD_LENGTH) {
+    throw new Error("비밀번호는 최소 8자 이상이어야 합니다.");
+  }
+
+  // bcryptjs 기본 라운드 수(10)를 사용한다. 필요 시 환경에 맞게 조정 가능.
+  const saltRounds = 10;
+  return await bcrypt.hash(plain, saltRounds);
+}
+
+// 평문 비밀번호와 저장된 해시가 일치하는지 검증한다.
+export async function verifyPassword(plain: string, hash: string): Promise<boolean> {
+  if (!hash) return false;
+  if (!plain || plain.length < MIN_PASSWORD_LENGTH) {
+    // 너무 짧은 비밀번호는 즉시 false 를 반환해 타이밍 공격을 줄인다.
+    return false;
+  }
+
+  return await bcrypt.compare(plain, hash);
+}
+
+// 유저 정보를 기반으로 JWT 액세스 토큰을 발급한다.
+export async function signAccessToken(user: JwtUserLike): Promise<string> {
+  const secret = getJwtSecret();
+
+  const payload: AccessTokenPayload = {
+    sub: user.id,
+    email: user.email,
+    tokenVersion: user.tokenVersion,
+  };
+
+  // 만료 시간은 기본 7일으로 설정한다.
+  const token = jwt.sign(payload, secret, {
+    algorithm: "HS256",
+    expiresIn: "7d",
+  });
+
+  return token;
+}
+
+// JWT 액세스 토큰을 검증하고, 유효하면 페이로드를 반환한다.
+// - 검증 실패(시그니처 오류, 만료 등) 시 null 을 반환한다.
+export async function verifyAccessToken(token: string): Promise<AccessTokenPayload | null> {
+  const secret = getJwtSecret();
+
+  try {
+    const decoded = jwt.verify(token, secret) as AccessTokenPayload;
+    if (!decoded || typeof decoded.sub !== "string") {
+      return null;
+    }
+    return decoded;
+  } catch {
+    return null;
+  }
+}
+
+// JSON 객체를 AES-256-GCM 으로 암호화한다.
+// - 결과는 iv.tag.ciphertext 형태의 base64 조합 문자열이다.
+export async function encryptJson<T extends object>(value: T): Promise<string> {
+  const key = deriveEncryptionKey();
+  const iv = randomBytes(12); // GCM 권장 IV 길이 96bit
+
+  const plain = JSON.stringify(value);
+
+  const cipher = createCipheriv("aes-256-gcm", key, iv);
+  let encrypted = cipher.update(plain, "utf8", "base64");
+  encrypted += cipher.final("base64");
+  const authTag = cipher.getAuthTag();
+
+  const ivB64 = iv.toString("base64");
+  const tagB64 = authTag.toString("base64");
+
+  return `${ivB64}.${tagB64}.${encrypted}`;
+}
+
+// AES-256-GCM 으로 암호화된 JSON 문자열을 복호화한다.
+export async function decryptJson<T = unknown>(ciphertext: string): Promise<T> {
+  const key = deriveEncryptionKey();
+
+  try {
+    const parts = ciphertext.split(".");
+    if (parts.length !== 3) {
+      throw new Error("잘못된 암호문 형식입니다.");
+    }
+
+    const [ivB64, tagB64, dataB64] = parts;
+    const iv = Buffer.from(ivB64, "base64");
+    const authTag = Buffer.from(tagB64, "base64");
+
+    const decipher = createDecipheriv("aes-256-gcm", key, iv);
+    decipher.setAuthTag(authTag);
+
+    let decrypted = decipher.update(dataB64, "base64", "utf8");
+    decrypted += decipher.final("utf8");
+
+    return JSON.parse(decrypted) as T;
+  } catch (error) {
+    // 복호화 실패 시 명시적인 에러를 던져 상위에서 처리할 수 있게 한다.
+    throw new Error("민감정보 복호화에 실패했습니다.");
+  }
+}

src/features/editor/components/ColorPickerField.tsx

@@ -0,0 +1,178 @@
+import type { ChangeEvent } from "react";
+import { useState } from "react";
+
+export type ColorPaletteItem = {
+  // 팔레트 식별자
+  id: string;
+  // UI에 보여줄 이름
+  label: string;
+  // HEX 색상 값
+  color: string;
+};
+
+export type ColorPickerFieldProps = {
+  // 필드 라벨 텍스트
+  label: string;
+  // 컬러 인풋에 대한 접근성 라벨
+  ariaLabelColorInput: string;
+  // HEX 텍스트 인풋에 대한 접근성 라벨
+  ariaLabelHexInput: string;
+  // 현재 선택된 색상 값 (HEX)
+  value: string;
+  // 값 변경 콜백
+  onChange: (value: string) => void;
+  // 선택 가능한 팔레트 목록
+  palette?: ColorPaletteItem[];
+  // 현재 선택된 팔레트 ID (있다면 드롭다운 요약에 표시)
+  selectedPaletteId?: string;
+  // 팔레트 선택 시 호출되는 콜백 (팔레트 메타 정보까지 필요할 때 사용)
+  onPaletteSelect?: (item: ColorPaletteItem) => void;
+};
+
+// 텍스트/버튼 등에서 공통으로 사용하는 기본 색상 팔레트
+export const TEXT_COLOR_PALETTE: ColorPaletteItem[] = [
+  // 기본/중립 계열
+  { 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" },
+
+  // 브랜드/포인트 계열
+  { id: "accent", label: "포인트", color: "#38bdf8" },
+  { id: "accent-deep", label: "포인트 진하게", color: "#0ea5e9" },
+  { id: "accent-soft", label: "포인트 연하게", color: "#bae6fd" },
+
+  // 상태 계열
+  { id: "danger", label: "위험", color: "#f97373" },
+  { id: "danger-deep", label: "위험 진하게", color: "#ef4444" },
+  { id: "success", label: "성공", color: "#22c55e" },
+  { id: "success-soft", label: "성공 연하게", color: "#bbf7d0" },
+  { id: "warning", label: "경고", color: "#eab308" },
+  { id: "info", label: "정보", color: "#0ea5e9" },
+
+  // 보라/핑크 계열
+  { id: "purple", label: "보라", color: "#a855f7" },
+  { id: "purple-soft", label: "연한 보라", color: "#e9d5ff" },
+  { id: "pink", label: "핑크", color: "#ec4899" },
+  { id: "pink-soft", label: "연한 핑크", color: "#f9a8d4" },
+
+  // 배경 대비용 어두운 텍스트
+  { id: "dark", label: "어두운 텍스트", color: "#020617" },
+  { id: "dark-muted", label: "어두운 연한", color: "#64748b" },
+];
+
+export function ColorPickerField({
+  label,
+  ariaLabelColorInput,
+  ariaLabelHexInput,
+  value,
+  onChange,
+  palette = [],
+  selectedPaletteId,
+  onPaletteSelect,
+}: ColorPickerFieldProps) {
+  const [open, setOpen] = useState(false);
+
+  const colorInputValue = value && value.startsWith("#") ? value : "#ffffff";
+  // 컬러 인풋 변경 시 HEX 문자열을 onChange로 전달한다.
+  const handleColorInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+  };
+
+  // 텍스트 인풋 변경 시 그대로 onChange로 전달한다.
+  const handleHexInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+  };
+
+  // 팔레트 버튼 클릭 시 해당 팔레트의 색상으로 onChange를 호출한다.
+  const handlePaletteClick = (item: ColorPaletteItem) => {
+    onChange(item.color);
+    if (onPaletteSelect) {
+      onPaletteSelect(item);
+    }
+  };
+
+  // 현재 선택된 팔레트 정보를 계산한다.
+  // 1) selectedPaletteId 가 넘어오면 ID 기준으로 찾고,
+  // 2) 없으면 현재 value 와 color 가 일치하는 팔레트 항목을 사용한다.
+  let selectedPalette: ColorPaletteItem | null = null;
+  if (palette.length > 0) {
+    if (selectedPaletteId) {
+      selectedPalette = palette.find((item) => item.id === selectedPaletteId) ?? null;
+    } else if (value) {
+      selectedPalette = palette.find((item) => item.color === value) ?? null;
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-1 text-xs text-slate-400">
+      <span>{label}</span>
+      <div className="flex items-center gap-2">
+        <input
+          type="color"
+          aria-label={ariaLabelColorInput}
+          className="h-8 w-8 rounded border border-slate-700 bg-slate-900 p-0"
+          value={colorInputValue}
+          onChange={handleColorInputChange}
+        />
+        <input
+          className="w-28 flex-none rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+          aria-label={ariaLabelHexInput}
+          placeholder="예: #ff0000"
+          value={value}
+          onChange={handleHexInputChange}
+        />
+        {palette.length > 0 ? (
+          <div className="relative text-[11px] flex-none">
+            <button
+              type="button"
+              className="w-28 rounded border border-slate-800 bg-slate-950/60 flex items-center justify-between px-2 py-1 text-left"
+              onClick={() => setOpen((prev) => !prev)}
+            >
+              <span className="flex items-center gap-1">
+                <span
+                  className="inline-block h-3 w-3 rounded-full"
+                  style={{ backgroundColor: selectedPalette?.color ?? value ?? "#ffffff" }}
+                />
+                <span className="truncate text-slate-200">
+                  {selectedPalette?.label ?? "색상 팔레트"}
+                </span>
+              </span>
+              <span className="text-slate-500 text-[10px]">▼</span>
+            </button>
+            {open ? (
+              <div className="absolute right-0 top-full mt-1 w-32 rounded border border-slate-800 bg-slate-950 max-h-40 overflow-auto z-10">
+                {palette.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    className={`w-full flex items-center justify-between px-2 py-1 text-left text-[11px] border-b border-slate-900 last:border-b-0 ${
+                      selectedPaletteId === item.id
+                        ? "bg-sky-900/40 text-sky-100"
+                        : "bg-transparent text-slate-300 hover:bg-slate-900/60"
+                    }`}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handlePaletteClick(item);
+                      setOpen(false);
+                    }}
+                  >
+                    <span className="flex items-center gap-2">
+                      <span
+                        className="inline-block h-3 w-3 rounded-full"
+                        style={{ backgroundColor: item.color }}
+                      />
+                      <span>{item.label}</span>
+                    </span>
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

src/features/editor/components/NumericPropertyControl.tsx

@@ -0,0 +1,97 @@
+import type { ChangeEvent } from "react";
+import { PropertySliderField } from "@/features/editor/components/PropertySliderField";
+
+export type NumericPresetOption = {
+  // 프리셋 식별자 (예: "tight", "normal")
+  id: string;
+  // UI 에 표시할 라벨
+  label: string;
+  // UI 기준 값 (px, 배율 등)
+  value: number;
+};
+
+export type NumericPropertyControlProps = {
+  // 필드 라벨 (예: 글자 크기, 줄 간격)
+  label: string;
+  // 단위 설명 (예: px, 배율 등)
+  unitLabel?: string;
+  // 현재 UI 값
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  // 프리셋 목록 (없으면 select 를 렌더링하지 않음)
+  presets?: NumericPresetOption[];
+  // 값 변경 시 호출되는 콜백 (UI 값 기준)
+  onChangeValue: (value: number) => void;
+};
+
+export function NumericPropertyControl({
+  label,
+  unitLabel,
+  value,
+  min,
+  max,
+  step,
+  presets,
+  onChangeValue,
+}: NumericPropertyControlProps) {
+  // 현재 값에 가장 가까운 프리셋 ID 를 계산한다.
+  const currentPresetId = (() => {
+    if (!presets || presets.length === 0) return "";
+    let bestId = presets[0].id;
+    let bestDist = Math.abs(presets[0].value - value);
+    for (let i = 1; i < presets.length; i += 1) {
+      const dist = Math.abs(presets[i].value - value);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestId = presets[i].id;
+      }
+    }
+    return bestId;
+  })();
+
+  const handlePresetChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    if (!presets || presets.length === 0) return;
+    const id = event.target.value;
+    const found = presets.find((p) => p.id === id);
+    if (!found) return;
+    onChangeValue(found.value);
+  };
+
+  return (
+    <label className="flex flex-col gap-1 text-xs text-slate-400">
+      <span>
+        {label}
+        {unitLabel ? ` ${unitLabel}` : ""}
+      </span>
+      <div className="flex items-center gap-2">
+        {presets && presets.length > 0 ? (
+          <select
+            className="w-32 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            aria-label={`${label} 프리셋`}
+            value={currentPresetId}
+            onChange={handlePresetChange}
+          >
+            {presets.map((preset) => (
+              <option key={preset.id} value={preset.id}>
+                {preset.label}
+              </option>
+            ))}
+          </select>
+        ) : null}
+
+        <PropertySliderField
+          label=""
+          ariaLabelSlider={`${label} 슬라이더`}
+          ariaLabelInput={`${label} 커스텀${unitLabel ? ` ${unitLabel}` : ""}`}
+          value={Number.isFinite(value) ? value : 0}
+          min={min}
+          max={max}
+          step={step}
+          onChange={onChangeValue}
+        />
+      </div>
+    </label>
+  );
+}

src/features/editor/components/PropertySliderField.tsx

@@ -0,0 +1,70 @@
+import type { ChangeEvent } from "react";
+
+export type PropertySliderFieldProps = {
+  // 슬라이더 그룹 전체 라벨 텍스트
+  label: string;
+  // 슬라이더 요소에 대한 접근성 라벨
+  ariaLabelSlider: string;
+  // 텍스트 입력 요소에 대한 접근성 라벨
+  ariaLabelInput: string;
+  // 현재 값 (슬라이더와 입력이 공유)
+  value: number;
+  // 최소 값
+  min: number;
+  // 최대 값
+  max: number;
+  // 슬라이더 스텝
+  step: number;
+  // 값 변경 콜백
+  onChange: (value: number) => void;
+};
+
+export function PropertySliderField({
+  label,
+  ariaLabelSlider,
+  ariaLabelInput,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+}: PropertySliderFieldProps) {
+  // 슬라이더 변경 시 상위에서 전달받은 onChange에 숫자 값으로 전달한다.
+  const handleSliderChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const numeric = Number(event.target.value || 0);
+    onChange(numeric);
+  };
+
+  // 텍스트 입력 변경 시에도 숫자 값으로 파싱하여 onChange를 호출한다.
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const raw = event.target.value;
+    const numeric = Number(raw);
+    if (!Number.isNaN(numeric)) {
+      onChange(numeric);
+    }
+  };
+
+  return (
+    <label className="flex flex-col gap-1 text-xs text-slate-400">
+      <span>{label}</span>
+      <div className="flex items-center gap-2">
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          aria-label={ariaLabelSlider}
+          value={value}
+          onChange={handleSliderChange}
+          className="flex-1"
+        />
+      </div>
+      <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={ariaLabelInput}
+        value={Number.isFinite(value) ? value : ""}
+        onChange={handleInputChange}
+      />
+    </label>
+  );
+}

src/features/editor/utils/buttonHelpers.ts

@@ -0,0 +1,290 @@
+import type { CSSProperties } from "react";
+import type { ButtonBlockProps } from "@/features/editor/state/editorStore";
+
+export type ButtonAlign = "left" | "center" | "right" | null | undefined;
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+export type ButtonVariant = "solid" | "outline" | "ghost" | null | undefined;
+export type ButtonColorPalette = "primary" | "muted" | "danger" | "success" | "neutral" | null | undefined;
+export type ButtonRadius = "none" | "sm" | "md" | "lg" | "full" | null | undefined;
+
+export interface ButtonStyleInput {
+  align?: ButtonAlign;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  colorPalette?: ButtonColorPalette;
+  borderRadius?: ButtonRadius;
+  fullWidth?: boolean | null | undefined;
+  widthMode?: "auto" | "full" | "fixed" | null | undefined;
+  widthPx?: number | null | undefined;
+  paddingX?: number | null | undefined;
+  paddingY?: number | null | undefined;
+  fontSizeCustom?: string | null | undefined;
+  lineHeightCustom?: string | null | undefined;
+  letterSpacingCustom?: string | null | undefined;
+  fillColorCustom?: string | null | undefined;
+  strokeColorCustom?: string | null | undefined;
+  textColorCustom?: string | null | undefined;
+}
+
+export interface ButtonPbTokens {
+  alignClass: string;
+  sizeClass: string;
+  variantClass: string;
+  radiusClass: string;
+  inlineStyles: string[];
+}
+
+export function computeButtonPbTokens(input: ButtonStyleInput): ButtonPbTokens {
+  const align = input.align === "center" ? "center" : input.align === "right" ? "right" : "left";
+  const alignClass =
+    align === "center" ? "pb-text-center" : align === "right" ? "pb-text-right" : "pb-text-left";
+
+  const sizeToken = (input.size as ButtonSize | null) ?? "md";
+  const sizeMap: Record<Exclude<ButtonSize, null | undefined>, string> = {
+    xs: "pb-btn-size-xs",
+    sm: "pb-btn-size-sm",
+    md: "pb-btn-size-md",
+    lg: "pb-btn-size-lg",
+    xl: "pb-btn-size-xl",
+  };
+  const sizeClass = sizeMap[sizeToken as Exclude<ButtonSize, null | undefined>] ?? "pb-btn-size-md";
+
+  const variant = (input.variant as ButtonVariant | null) ?? "solid";
+  const palette = (input.colorPalette as ButtonColorPalette | null) ?? "primary";
+  const variantClass = `pb-btn-variant-${variant}-${palette}`;
+
+  const radiusToken = (input.borderRadius as ButtonRadius | null) ?? "md";
+  const radiusMap: Record<Exclude<ButtonRadius, null | undefined>, string> = {
+    none: "pb-btn-radius-none",
+    sm: "pb-btn-radius-sm",
+    md: "pb-btn-radius-md",
+    lg: "pb-btn-radius-lg",
+    full: "pb-btn-radius-full",
+  };
+  const radiusClass = radiusMap[radiusToken as Exclude<ButtonRadius, null | undefined>] ?? "";
+
+  const inlineStyles: string[] = [];
+
+  const widthMode = input.widthMode ?? (input.fullWidth ? "full" : "auto");
+  if (widthMode === "fixed" && typeof input.widthPx === "number" && input.widthPx > 0) {
+    inlineStyles.push(`width:${pxToEm(input.widthPx)}`);
+  }
+
+  if (typeof input.paddingX === "number") {
+    inlineStyles.push(`padding-left:${pxToEm(input.paddingX)}`);
+    inlineStyles.push(`padding-right:${pxToEm(input.paddingX)}`);
+  }
+
+  if (typeof input.paddingY === "number") {
+    inlineStyles.push(`padding-top:${pxToEm(input.paddingY)}`);
+    inlineStyles.push(`padding-bottom:${pxToEm(input.paddingY)}`);
+  }
+
+  if (input.fillColorCustom && input.fillColorCustom.trim() !== "") {
+    inlineStyles.push(`background-color:${input.fillColorCustom.trim()}`);
+  }
+
+  if (input.strokeColorCustom && input.strokeColorCustom.trim() !== "") {
+    inlineStyles.push(`border-color:${input.strokeColorCustom.trim()}`);
+  }
+
+  if (input.textColorCustom && input.textColorCustom.trim() !== "") {
+    inlineStyles.push(`color:${input.textColorCustom.trim()}`);
+  }
+
+  if (input.fontSizeCustom && input.fontSizeCustom.trim() !== "") {
+    const fontSizeValue = input.fontSizeCustom.trim();
+    if (fontSizeValue.endsWith("px")) {
+      const fontSizeEm = convertPxStringToEm(fontSizeValue);
+      if (fontSizeEm) {
+        inlineStyles.push(`font-size:${fontSizeEm}`);
+      }
+    } else {
+      inlineStyles.push(`font-size:${fontSizeValue}`);
+    }
+  }
+
+  if (input.lineHeightCustom && input.lineHeightCustom.trim() !== "") {
+    const lineHeightValue = input.lineHeightCustom.trim();
+    if (lineHeightValue.endsWith("px")) {
+      const lineHeightEm = convertPxStringToEm(lineHeightValue);
+      if (lineHeightEm) {
+        inlineStyles.push(`line-height:${lineHeightEm}`);
+      }
+    } else {
+      inlineStyles.push(`line-height:${lineHeightValue}`);
+    }
+  }
+
+  if (input.letterSpacingCustom && input.letterSpacingCustom.trim() !== "") {
+    const letterSpacingValue = input.letterSpacingCustom.trim();
+    if (letterSpacingValue.endsWith("px")) {
+      const letterSpacingEm = convertPxStringToEm(letterSpacingValue);
+      if (letterSpacingEm) {
+        inlineStyles.push(`letter-spacing:${letterSpacingEm}`);
+      }
+    } else {
+      inlineStyles.push(`letter-spacing:${letterSpacingValue}`);
+    }
+  }
+
+  return {
+    alignClass,
+    sizeClass,
+    variantClass,
+    radiusClass,
+    inlineStyles,
+  };
+}
+
+// 퍼블릭 렌더러용 버튼 스타일 토큰
+export interface ButtonPublicTokens {
+  alignClass: string;
+  widthClass: string;
+  styleOverrides: CSSProperties;
+}
+
+const pxToEm = (px: number, base = 16) => `${px / base}em`;
+
+const convertPxStringToEm = (value?: string | null) => {
+  if (!value) return null;
+  const match = value.trim().match(/-?\d+(?:\.\d+)?/);
+  if (!match) return null;
+  const px = parseFloat(match[0]);
+  if (!Number.isFinite(px)) return null;
+  return pxToEm(px);
+};
+
+export function computeButtonPublicTokens(props: ButtonBlockProps): ButtonPublicTokens {
+  const align = props.align ?? "left";
+  const alignClass =
+    align === "center" ? "text-center" : align === "right" ? "text-right" : "text-left";
+
+  const styleOverrides: CSSProperties = {};
+
+  // 폰트 크기: fontSizeCustom(px)는 em 으로 변환, 그 외는 그대로 사용
+  const fontSizeEm = convertPxStringToEm(props.fontSizeCustom);
+  if (fontSizeEm) {
+    styleOverrides.fontSize = fontSizeEm;
+  }
+
+  // lineHeightCustom 은 px 단위든 아니든 그대로 사용 (기존 PublicPageRenderer 로직 유지)
+  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+    styleOverrides.lineHeight = props.lineHeightCustom;
+  }
+
+  // letterSpacingCustom 은 px 인 경우만 em 으로 변환, 그 외는 그대로 사용
+  if (props.letterSpacingCustom && props.letterSpacingCustom.trim() !== "") {
+    const letterSpacing = props.letterSpacingCustom.trim();
+    if (letterSpacing.endsWith("px")) {
+      const emValue = convertPxStringToEm(letterSpacing);
+      if (emValue) {
+        styleOverrides.letterSpacing = emValue;
+      }
+    } else {
+      styleOverrides.letterSpacing = letterSpacing;
+    }
+  }
+
+  const widthMode = props.widthMode ?? (props.fullWidth ? "full" : "auto");
+  if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+    styleOverrides.width = pxToEm(props.widthPx);
+  }
+
+  if (typeof props.paddingX === "number" && props.paddingX >= 0) {
+    const paddingEm = pxToEm(props.paddingX);
+    styleOverrides.paddingInline = paddingEm;
+  }
+
+  if (typeof props.paddingY === "number" && props.paddingY >= 0) {
+    const paddingEm = pxToEm(props.paddingY);
+    styleOverrides.paddingBlock = paddingEm;
+  }
+
+  if (props.fillColorCustom && props.fillColorCustom.trim() !== "") {
+    styleOverrides.backgroundColor = props.fillColorCustom;
+  }
+
+  if (props.strokeColorCustom && props.strokeColorCustom.trim() !== "") {
+    styleOverrides.borderColor = props.strokeColorCustom;
+    styleOverrides.borderWidth = "1px";
+    styleOverrides.borderStyle = "solid";
+  }
+
+  if (props.textColorCustom && props.textColorCustom.trim() !== "") {
+    styleOverrides.color = props.textColorCustom;
+  }
+
+  const radiusToken = props.borderRadius ?? "md";
+  const radiusPx =
+    radiusToken === "none"
+      ? 0
+      : radiusToken === "sm"
+        ? 4
+        : radiusToken === "lg"
+          ? 12
+          : radiusToken === "full"
+            ? 9999
+            : 8;
+  styleOverrides.borderRadius = radiusPx === 9999 ? "9999px" : pxToEm(radiusPx);
+
+  const widthClass = widthMode === "full" ? "w-full" : "";
+
+  return {
+    alignClass,
+    widthClass,
+    styleOverrides,
+  };
+}
+
+export interface ButtonEditorTokens {
+  wrapperWidthClass: string;
+  buttonStyle: CSSProperties;
+}
+
+export function computeButtonEditorTokens(props: ButtonBlockProps): ButtonEditorTokens {
+  const baseFullWidth = props.fullWidth ?? false;
+  const widthMode = props.widthMode ?? (baseFullWidth ? "full" : "auto");
+  const isFullWidth = widthMode === "full" || baseFullWidth;
+
+  const wrapperWidthClass = isFullWidth ? "w-full" : "inline-block";
+
+  const buttonStyle: CSSProperties = {};
+
+  if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
+    buttonStyle.fontSize = props.fontSizeCustom;
+  }
+  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+    buttonStyle.lineHeight = props.lineHeightCustom;
+  }
+  if (props.letterSpacingCustom && props.letterSpacingCustom.trim() !== "") {
+    buttonStyle.letterSpacing = props.letterSpacingCustom;
+  }
+
+  if (props.fillColorCustom && props.fillColorCustom.trim() !== "") {
+    buttonStyle.backgroundColor = props.fillColorCustom;
+  }
+  if (props.strokeColorCustom && props.strokeColorCustom.trim() !== "") {
+    buttonStyle.borderColor = props.strokeColorCustom;
+  }
+  if (props.textColorCustom && props.textColorCustom.trim() !== "") {
+    buttonStyle.color = props.textColorCustom;
+  }
+
+  if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+    buttonStyle.width = `${props.widthPx}px`;
+  }
+
+  if (typeof props.paddingX === "number" && props.paddingX >= 0) {
+    buttonStyle.paddingInline = `${props.paddingX}px`;
+  }
+
+  if (typeof props.paddingY === "number" && props.paddingY >= 0) {
+    buttonStyle.paddingBlock = `${props.paddingY}px`;
+  }
+
+  return {
+    wrapperWidthClass,
+    buttonStyle,
+  };
+}

src/features/editor/utils/dividerHelpers.ts

@@ -0,0 +1,164 @@
+import type { CSSProperties } from "react";
+import type { DividerBlockProps } from "@/features/editor/state/editorStore";
+
+export interface DividerEscapers {
+  escapeAttr: (value: string) => string;
+}
+
+export interface DividerExportTokens {
+  style: string;
+}
+
+export const computeDividerExportTokens = (
+  props: DividerBlockProps,
+  escapers: DividerEscapers,
+): DividerExportTokens => {
+  const { escapeAttr } = escapers;
+
+  const thickness = props.thickness === "medium" ? "2px" : "1px";
+  const colorRaw = typeof props.colorHex === "string" ? props.colorHex.trim() : "";
+  const color = colorRaw !== "" ? colorRaw : "#475569";
+  const marginY = typeof props.marginYPx === "number" && props.marginYPx > 0 ? props.marginYPx : 16;
+  const marginEm = pxToEm(marginY);
+
+  const widthMode = props.widthMode ?? "full";
+  const align = props.align ?? "left";
+
+  const styleParts: string[] = [];
+  styleParts.push("border:0");
+  styleParts.push(`border-bottom:${thickness} solid ${escapeAttr(color)}`);
+  styleParts.push(`margin:${marginEm} 0`);
+
+  if (widthMode === "auto") {
+    styleParts.push("width:50%");
+  } else if (widthMode === "fixed") {
+    const widthPx =
+      typeof props.widthPx === "number" && props.widthPx > 0 ? props.widthPx : 320;
+    styleParts.push(`width:${pxToEm(widthPx)}`);
+  }
+
+  if (widthMode === "auto" || widthMode === "fixed") {
+    if (align === "center") {
+      styleParts.push("margin-left:auto");
+      styleParts.push("margin-right:auto");
+    } else if (align === "right") {
+      styleParts.push("margin-left:auto");
+      styleParts.push("margin-right:0");
+    }
+  }
+
+  const style = `${styleParts.join(";")};`;
+
+  return { style };
+};
+
+export interface DividerEditorTokens {
+  thicknessClass: string;
+  innerWidthClass: string;
+  widthPx?: number;
+  borderColor: string;
+  marginPx: number;
+}
+
+export const computeDividerEditorTokens = (props: DividerBlockProps): DividerEditorTokens => {
+  const thicknessClass = props.thickness === "medium" ? "border-t-2" : "border-t";
+
+  const colorRaw = typeof props.colorHex === "string" ? props.colorHex.trim() : "";
+  const borderColor = colorRaw !== "" ? colorRaw : "#475569";
+
+  const widthMode = props.widthMode ?? "full";
+  let innerWidthClass = "w-full";
+  let widthPx: number | undefined;
+
+  if (widthMode === "auto") {
+    innerWidthClass = "w-1/2";
+  } else if (widthMode === "fixed") {
+    innerWidthClass = "";
+    if (typeof props.widthPx === "number" && props.widthPx > 0) {
+      widthPx = props.widthPx;
+    } else {
+      widthPx = 320;
+    }
+  }
+
+  const marginPx =
+    typeof props.marginYPx === "number"
+      ? props.marginYPx
+      : props.marginY === "sm"
+        ? 8
+        : props.marginY === "lg"
+          ? 24
+          : 16;
+
+  return {
+    thicknessClass,
+    innerWidthClass,
+    widthPx,
+    borderColor,
+    marginPx,
+  };
+};
+
+export interface DividerPublicTokens {
+  alignClass: string;
+  thicknessClass: string;
+  innerWidthClass: string;
+  wrapperMarginEm: string;
+  innerStyle: CSSProperties;
+  lineStyle: CSSProperties;
+}
+
+const pxToEm = (px: number, base = 16) => `${px / base}em`;
+
+export const computeDividerPublicTokens = (props: DividerBlockProps): DividerPublicTokens => {
+  const alignClass =
+    props.align === "center"
+      ? "items-center"
+      : props.align === "right"
+        ? "items-end"
+        : "items-start";
+
+  const thicknessClass = props.thickness === "medium" ? "h-[2px]" : "h-px";
+
+  const marginPx =
+    typeof props.marginYPx === "number"
+      ? props.marginYPx
+      : props.marginY === "sm"
+        ? 8
+        : props.marginY === "lg"
+          ? 24
+          : 16;
+  const wrapperMarginEm = pxToEm(marginPx);
+
+  const colorRaw = typeof props.colorHex === "string" ? props.colorHex.trim() : "";
+  const backgroundColor = colorRaw !== "" ? colorRaw : "#475569";
+
+  const widthMode = props.widthMode ?? "full";
+  const innerStyle: CSSProperties = {};
+  let innerWidthClass = "w-full";
+  const lineStyle: CSSProperties = {
+    backgroundColor,
+  };
+
+  if (widthMode === "auto") {
+    innerWidthClass = "w-1/2";
+  } else if (widthMode === "fixed") {
+    innerWidthClass = "";
+    innerStyle.width = "auto";
+
+    if (typeof props.widthPx === "number" && props.widthPx > 0) {
+      lineStyle.width = pxToEm(props.widthPx);
+    } else {
+      lineStyle.width = pxToEm(320);
+    }
+  }
+
+  return {
+    alignClass,
+    thicknessClass,
+    innerWidthClass,
+    wrapperMarginEm,
+    innerStyle,
+    lineStyle,
+  };
+};

src/features/editor/utils/imageHelpers.ts

@@ -0,0 +1,150 @@
+import type { CSSProperties } from "react";
+import type { ImageBlockProps } from "@/features/editor/state/editorStore";
+
+export type ImageWidthMode = "auto" | "full" | "fixed" | null | undefined;
+export type ImageBorderRadiusToken = "none" | "sm" | "md" | "lg" | "full" | null | undefined;
+
+export interface ImageExportStyleInput {
+  backgroundColorCustom?: string | null | undefined;
+  widthMode?: ImageWidthMode;
+  widthPx?: number | null | undefined;
+  borderRadius?: ImageBorderRadiusToken;
+  borderRadiusPx?: number | null | undefined;
+}
+
+export interface ImageExportStyles {
+  wrapperStyleParts: string[];
+  imgStyleParts: string[];
+}
+
+export function computeImageExportStyles(input: ImageExportStyleInput): ImageExportStyles {
+  const wrapperStyleParts: string[] = [];
+  const imgStyleParts: string[] = [];
+
+  if (input.backgroundColorCustom && input.backgroundColorCustom.trim() !== "") {
+    wrapperStyleParts.push(`background-color:${input.backgroundColorCustom.trim()}`);
+  }
+
+  const widthMode: ImageWidthMode = input.widthMode ?? "auto";
+  if (widthMode === "fixed" && typeof input.widthPx === "number" && input.widthPx > 0) {
+    const widthEm = input.widthPx / 16;
+    imgStyleParts.push(`width:${widthEm}em`);
+  }
+
+  const radiusToken: ImageBorderRadiusToken = input.borderRadius ?? "md";
+  const fallbackRadiusPx =
+    radiusToken === "none"
+      ? 0
+      : radiusToken === "sm"
+        ? 4
+        : radiusToken === "lg"
+          ? 16
+          : radiusToken === "full"
+            ? 9999
+            : 8;
+
+  const radiusPx =
+    typeof input.borderRadiusPx === "number" && input.borderRadiusPx >= 0
+      ? input.borderRadiusPx
+      : fallbackRadiusPx;
+
+  if (typeof radiusPx === "number" && radiusPx >= 0) {
+    imgStyleParts.push(`border-radius:${radiusPx === 9999 ? "9999px" : `${radiusPx}px`}`);
+  }
+
+  return {
+    wrapperStyleParts,
+    imgStyleParts,
+  };
+}
+
+export interface ImageEditorTokens {
+  widthPx?: number;
+  radiusPx: number;
+}
+
+export function computeImageEditorTokens(input: ImageExportStyleInput): ImageEditorTokens {
+  const widthMode: ImageWidthMode = input.widthMode ?? "auto";
+  let widthPx: number | undefined;
+
+  if (widthMode === "fixed" && typeof input.widthPx === "number" && input.widthPx > 0) {
+    widthPx = input.widthPx;
+  }
+
+  const radiusToken: ImageBorderRadiusToken = input.borderRadius ?? "md";
+  const fallbackRadiusPx =
+    radiusToken === "none"
+      ? 0
+      : radiusToken === "sm"
+        ? 4
+        : radiusToken === "lg"
+          ? 16
+          : radiusToken === "full"
+            ? 9999
+            : 8;
+
+  const radiusPx =
+    typeof input.borderRadiusPx === "number" && input.borderRadiusPx >= 0
+      ? input.borderRadiusPx
+      : fallbackRadiusPx;
+
+  return {
+    widthPx,
+    radiusPx,
+  };
+}
+
+export interface ImagePublicTokens {
+  alignClass: string;
+  wrapperStyle: CSSProperties;
+  imageStyle: CSSProperties;
+}
+
+const pxToEm = (px: number, base = 16) => `${px / base}em`;
+
+export function computeImagePublicTokens(props: ImageBlockProps): ImagePublicTokens {
+  const alignClass =
+    props.align === "left" ? "justify-start" : props.align === "right" ? "justify-end" : "justify-center";
+
+  const widthMode: ImageWidthMode = props.widthMode ?? "auto";
+
+  const wrapperStyle: CSSProperties = {};
+  const imageStyle: CSSProperties = {
+    display: "block",
+    maxWidth: "100%",
+    height: "auto",
+  };
+
+  if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+    imageStyle.width = pxToEm(props.widthPx);
+  }
+
+  const radiusToken: ImageBorderRadiusToken = props.borderRadius ?? "md";
+  const fallbackRadiusPx =
+    radiusToken === "none"
+      ? 0
+      : radiusToken === "sm"
+        ? 4
+        : radiusToken === "lg"
+          ? 16
+          : radiusToken === "full"
+            ? 9999
+            : 8;
+
+  const radiusPx =
+    typeof props.borderRadiusPx === "number" && props.borderRadiusPx >= 0
+      ? props.borderRadiusPx
+      : fallbackRadiusPx;
+
+  imageStyle.borderRadius = radiusPx === 9999 ? "9999px" : pxToEm(radiusPx);
+
+  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
+    wrapperStyle.backgroundColor = props.backgroundColorCustom.trim();
+  }
+
+  return {
+    alignClass,
+    wrapperStyle,
+    imageStyle,
+  };
+}

src/features/editor/utils/listHelpers.ts

@@ -0,0 +1,192 @@
+import type { CSSProperties } from "react";
+import type { ListBlockProps } from "@/features/editor/state/editorStore";
+
+export interface ListExportTokens {
+  Tag: "ul" | "ol";
+  items: string[];
+  listStyleParts: string[];
+  gapEm: number;
+}
+
+export const computeListExportTokens = (props: ListBlockProps): ListExportTokens => {
+  const ordered = Boolean(props.ordered);
+  const Tag: "ul" | "ol" = ordered ? "ol" : "ul";
+
+  const items: string[] = [];
+
+  if (Array.isArray(props.itemsTree) && props.itemsTree.length > 0) {
+    const walk = (nodes: { text?: string; children?: any[] }[]) => {
+      for (const node of nodes) {
+        if (typeof node.text === "string" && node.text.trim() !== "") {
+          items.push(node.text);
+        }
+        if (Array.isArray(node.children) && node.children.length > 0) {
+          walk(node.children);
+        }
+      }
+    };
+    walk(props.itemsTree as any);
+  } else if (Array.isArray(props.items)) {
+    for (const raw of props.items) {
+      if (typeof raw === "string" && raw.trim() !== "") {
+        items.push(raw);
+      }
+    }
+  }
+
+  const alignToken = props.align;
+  const align = alignToken === "center" ? "center" : alignToken === "right" ? "right" : "left";
+
+  const listStyleParts: string[] = [`text-align:${align}`];
+
+  const bulletStyleRaw = props.bulletStyle ?? (props.ordered ? "decimal" : "disc");
+  const bulletStyle = bulletStyleRaw === "none" ? "none" : bulletStyleRaw;
+  listStyleParts.push(`list-style-type:${bulletStyle}`);
+
+  const gapPx =
+    typeof props.gapYPx === "number"
+      ? props.gapYPx
+      : props.gapY === "sm"
+        ? 4
+        : props.gapY === "lg"
+          ? 16
+          : 8;
+  const gapEm = gapPx / 16;
+
+  // 리스트 아이템 간 간격은 CSS 커스텀 프로퍼티 --pb-list-gap 으로 전달한다.
+  // 이렇게 하면 margin-bottom 계산은 builder.css 레이어에서만 수행되어,
+  // 정적 Export HTML 의 style 속성에 직접적인 margin-bottom 이 포함되지 않는다.
+  listStyleParts.push(`--pb-list-gap:${gapEm}em`);
+
+  if (typeof props.backgroundColorCustom === "string" && props.backgroundColorCustom.trim() !== "") {
+    listStyleParts.push(`background-color:${props.backgroundColorCustom.trim()}`);
+  }
+
+  return {
+    Tag,
+    items,
+    listStyleParts,
+    gapEm,
+  };
+};
+
+export interface ListEditorTokens {
+  gapPx: number;
+  listStyle: CSSProperties;
+  bulletStyle: string;
+}
+
+export const computeListEditorTokens = (props: ListBlockProps): ListEditorTokens => {
+  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;
+
+  return {
+    gapPx,
+    listStyle,
+    bulletStyle,
+  };
+};
+
+export interface ListPublicTokens {
+  alignClass: string;
+  gapEm: number;
+  listStyle: CSSProperties;
+  bulletStyle: string;
+}
+
+const pxToEm = (px: number, base = 16) => `${px / base}em`;
+
+const convertPxStringToEm = (value?: string | null) => {
+  if (!value) return null;
+  const match = value.trim().match(/-?\d+(?:\.\d+)?/);
+  if (!match) return null;
+  const px = parseFloat(match[0]);
+  if (!Number.isFinite(px)) return null;
+  return pxToEm(px);
+};
+
+export const computeListPublicTokens = (props: ListBlockProps): ListPublicTokens => {
+  const alignClass =
+    props.align === "center"
+      ? "pb-text-center"
+      : props.align === "right"
+        ? "pb-text-right"
+        : "pb-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 gapEm = gapPx / 16;
+
+  const listStyle: CSSProperties = {};
+  if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
+    const fontSizeValue = props.fontSizeCustom.trim();
+    if (fontSizeValue.endsWith("px")) {
+      const fontSizeEm = convertPxStringToEm(fontSizeValue);
+      if (fontSizeEm) {
+        listStyle.fontSize = fontSizeEm;
+      }
+    } else {
+      listStyle.fontSize = fontSizeValue;
+    }
+  }
+  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+    const lineHeightValue = props.lineHeightCustom.trim();
+    if (lineHeightValue.endsWith("px")) {
+      const lineHeightEm = convertPxStringToEm(lineHeightValue);
+      if (lineHeightEm) {
+        listStyle.lineHeight = lineHeightEm;
+      }
+    } else {
+      listStyle.lineHeight = lineHeightValue;
+    }
+  }
+  if (props.textColorCustom && props.textColorCustom.trim() !== "") {
+    listStyle.color = props.textColorCustom;
+  }
+  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
+    listStyle.backgroundColor = props.backgroundColorCustom.trim();
+  }
+
+  // 리스트 아이템 간 여백을 CSS 변수로 노출한다. 실제 margin-bottom 은 builder.css 의
+  // .pb-list > li 규칙에서 --pb-list-gap 값을 참조해 계산한다.
+  (listStyle as any)["--pb-list-gap"] = `${gapEm}em`;
+
+  const bulletStyle = bulletStyleRaw;
+
+  return {
+    alignClass,
+    gapEm,
+    listStyle,
+    bulletStyle,
+  };
+};

src/features/editor/utils/sectionHelpers.ts

@@ -0,0 +1,298 @@
+import type { CSSProperties } from "react";
+import type { SectionBlockProps } from "@/features/editor/state/editorStore";
+
+const pxToEm = (px: number, base = 16) => `${px / base}em`;
+
+export interface SectionExportTokens {
+  sectionClasses: string;
+  sectionStyleParts: string[];
+  innerWrapperStyleParts: string[];
+  columnsStyleParts: string[];
+  backgroundVideoHtml: string;
+}
+
+export function computeSectionExportTokens(props: SectionBlockProps): SectionExportTokens {
+  const bgToken = props.background ?? "default";
+  const bgClassMap: Record<SectionBlockProps["background"], string> = {
+    default: "pb-section-bg-default",
+    muted: "pb-section-bg-muted",
+    primary: "pb-section-bg-primary",
+  };
+  const bgClass = bgClassMap[bgToken] ?? "pb-section-bg-default";
+
+  const pyToken = props.paddingY ?? "md";
+  const pyClassMap: Record<SectionBlockProps["paddingY"], string> = {
+    sm: "pb-section-py-sm",
+    md: "pb-section-py-md",
+    lg: "pb-section-py-lg",
+  };
+  const pyClass = pyClassMap[pyToken] ?? "pb-section-py-md";
+
+  const sectionClasses = ["pb-section", bgClass, pyClass].filter(Boolean).join(" ");
+  const sectionStyleParts: string[] = [];
+  const innerWrapperStyleParts: string[] = [];
+  const columnsStyleParts: string[] = [];
+
+  if (typeof props.backgroundColorCustom === "string" && props.backgroundColorCustom.trim() !== "") {
+    sectionStyleParts.push(`background-color:${props.backgroundColorCustom.trim()}`);
+  }
+
+  const bgImgSrc = props.backgroundImageSrc;
+  if (typeof bgImgSrc === "string" && bgImgSrc.trim() !== "") {
+    const url = bgImgSrc.trim();
+    sectionStyleParts.push(`background-image:url(${url})`);
+
+    const size = props.backgroundImageSize ?? "cover";
+    sectionStyleParts.push(`background-size:${size}`);
+
+    const posMode = props.backgroundImagePositionMode ?? "preset";
+    if (posMode === "custom") {
+      const x = props.backgroundImagePositionXPercent;
+      const y = props.backgroundImagePositionYPercent;
+      const xSafe = typeof x === "number" ? x : 50;
+      const ySafe = typeof y === "number" ? y : 50;
+      sectionStyleParts.push(`background-position:${xSafe}% ${ySafe}%`);
+    } else {
+      const posToken = props.backgroundImagePosition ?? "center";
+      const position =
+        posToken === "top"
+          ? "center top"
+          : posToken === "bottom"
+            ? "center bottom"
+            : posToken === "left"
+              ? "left center"
+              : posToken === "right"
+                ? "right center"
+                : "center center";
+      sectionStyleParts.push(`background-position:${position}`);
+    }
+
+    const repeat = props.backgroundImageRepeat ?? "no-repeat";
+    sectionStyleParts.push(`background-repeat:${repeat}`);
+  }
+
+  if (typeof props.paddingYPx === "number" && props.paddingYPx > 0) {
+    const paddingEm = pxToEm(props.paddingYPx);
+    sectionStyleParts.push(`padding-top:${paddingEm}`);
+    sectionStyleParts.push(`padding-bottom:${paddingEm}`);
+  }
+
+  if (typeof props.maxWidthPx === "number" && props.maxWidthPx > 0) {
+    innerWrapperStyleParts.push(`max-width:${pxToEm(props.maxWidthPx)}`);
+  }
+
+  if (typeof props.gapXPx === "number" && props.gapXPx > 0) {
+    columnsStyleParts.push(`column-gap:${pxToEm(props.gapXPx)}`);
+  }
+
+  const bgVideoSrc = props.backgroundVideoSrc;
+  let backgroundVideoHtml = "";
+  if (typeof bgVideoSrc === "string" && bgVideoSrc.trim() !== "") {
+    const url = bgVideoSrc.trim();
+    backgroundVideoHtml = `<video class="pb-section-bg-video" src="${url}" autoplay loop muted playsinline></video>`;
+    sectionStyleParts.push("position:relative");
+    sectionStyleParts.push("overflow:hidden");
+  }
+
+  return {
+    sectionClasses,
+    sectionStyleParts,
+    innerWrapperStyleParts,
+    columnsStyleParts,
+    backgroundVideoHtml,
+  };
+}
+
+export interface SectionPublicTokens {
+  sectionStyle: CSSProperties;
+  innerWrapperStyle: CSSProperties;
+  columnsContainerStyle: CSSProperties;
+  hasBackgroundVideo: boolean;
+  backgroundVideoSrc: string | null;
+}
+
+export function computeSectionPublicTokens(props: SectionBlockProps): SectionPublicTokens {
+  const sectionStyle: CSSProperties = {};
+
+  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
+    sectionStyle.backgroundColor = props.backgroundColorCustom.trim();
+  }
+
+  if (typeof props.paddingYPx === "number" && props.paddingYPx > 0) {
+    const paddingEm = pxToEm(props.paddingYPx);
+    sectionStyle.paddingTop = paddingEm;
+    sectionStyle.paddingBottom = paddingEm;
+  }
+
+  const rawBgVideoSrc = (props as any).backgroundVideoSrc;
+  let hasBackgroundVideo = false;
+  let backgroundVideoSrc: string | null = null;
+  if (typeof rawBgVideoSrc === "string" && rawBgVideoSrc.trim() !== "") {
+    hasBackgroundVideo = true;
+    backgroundVideoSrc = rawBgVideoSrc.trim();
+    sectionStyle.position = "relative";
+    sectionStyle.overflow = "hidden";
+  }
+
+  if (props.backgroundImageSrc && props.backgroundImageSrc.trim() !== "") {
+    const url = props.backgroundImageSrc.trim();
+    sectionStyle.backgroundImage = `url(${url})`;
+
+    const size = props.backgroundImageSize ?? "cover";
+    sectionStyle.backgroundSize = size;
+
+    const posMode = props.backgroundImagePositionMode ?? "preset";
+    if (
+      posMode === "custom" &&
+      typeof props.backgroundImagePositionXPercent === "number" &&
+      typeof props.backgroundImagePositionYPercent === "number"
+    ) {
+      const x = props.backgroundImagePositionXPercent;
+      const y = props.backgroundImagePositionYPercent;
+      sectionStyle.backgroundPosition = `${x}% ${y}%`;
+    } else {
+      const posToken = props.backgroundImagePosition ?? "center";
+      const position =
+        posToken === "top"
+          ? "center top"
+          : posToken === "bottom"
+            ? "center bottom"
+            : posToken === "left"
+              ? "left center"
+              : posToken === "right"
+                ? "right center"
+                : "center center";
+      sectionStyle.backgroundPosition = position;
+    }
+
+    const repeat = props.backgroundImageRepeat ?? "no-repeat";
+    sectionStyle.backgroundRepeat = repeat;
+  }
+
+  const innerWrapperStyle: CSSProperties = {};
+  if (typeof props.maxWidthPx === "number" && props.maxWidthPx > 0) {
+    innerWrapperStyle.maxWidth = pxToEm(props.maxWidthPx);
+  }
+
+  const columnsContainerStyle: CSSProperties = {};
+  if (typeof props.gapXPx === "number" && props.gapXPx > 0) {
+    columnsContainerStyle.columnGap = pxToEm(props.gapXPx);
+  }
+
+  return {
+    sectionStyle,
+    innerWrapperStyle,
+    columnsContainerStyle,
+    hasBackgroundVideo,
+    backgroundVideoSrc,
+  };
+}
+
+export interface SectionEditorTokens {
+  bgClass: string;
+  pyClass: string;
+  alignItemsClass: string;
+  wrapperStyle: CSSProperties;
+  innerWrapperStyle: CSSProperties;
+  columnsContainerStyle: CSSProperties;
+  hasBackgroundVideo: boolean;
+  backgroundVideoSrc: string | null;
+}
+
+export function computeSectionEditorTokens(props: SectionBlockProps): SectionEditorTokens {
+  const bgClass =
+    props.background === "muted"
+      ? "bg-slate-950/40"
+      : props.background === "primary"
+        ? "bg-sky-950/40 border-sky-900/60"
+        : "bg-slate-900/60";
+
+  const pyClass =
+    props.paddingY === "sm"
+      ? "py-4"
+      : props.paddingY === "lg"
+        ? "py-10"
+        : "py-6";
+
+  const alignItemsClass =
+    props.alignItems === "center"
+      ? "items-center"
+      : props.alignItems === "bottom"
+        ? "items-end"
+        : "items-start";
+
+  const wrapperStyle: CSSProperties = {};
+  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
+    wrapperStyle.backgroundColor = props.backgroundColorCustom;
+  }
+
+  if (typeof props.paddingYPx === "number" && props.paddingYPx > 0) {
+    wrapperStyle.paddingTop = `${props.paddingYPx}px`;
+    wrapperStyle.paddingBottom = `${props.paddingYPx}px`;
+  }
+
+  let hasBackgroundVideo = false;
+  let backgroundVideoSrc: string | null = null;
+  if (typeof props.backgroundVideoSrc === "string" && props.backgroundVideoSrc.trim() !== "") {
+    hasBackgroundVideo = true;
+    backgroundVideoSrc = props.backgroundVideoSrc.trim();
+    wrapperStyle.position = "relative";
+    wrapperStyle.overflow = "hidden";
+  }
+
+  if (props.backgroundImageSrc && props.backgroundImageSrc.trim() !== "") {
+    const url = props.backgroundImageSrc.trim();
+    wrapperStyle.backgroundImage = `url(${url})`;
+
+    const size = props.backgroundImageSize ?? "cover";
+    wrapperStyle.backgroundSize = size;
+
+    const posMode = props.backgroundImagePositionMode ?? "preset";
+    if (
+      posMode === "custom" &&
+      typeof props.backgroundImagePositionXPercent === "number" &&
+      typeof props.backgroundImagePositionYPercent === "number"
+    ) {
+      const x = props.backgroundImagePositionXPercent;
+      const y = props.backgroundImagePositionYPercent;
+      wrapperStyle.backgroundPosition = `${x}% ${y}%`;
+    } else {
+      const posToken = props.backgroundImagePosition ?? "center";
+      const position =
+        posToken === "top"
+          ? "center top"
+          : posToken === "bottom"
+            ? "center bottom"
+            : posToken === "left"
+              ? "left center"
+              : posToken === "right"
+                ? "right center"
+                : "center center";
+      wrapperStyle.backgroundPosition = position;
+    }
+
+    const repeat = props.backgroundImageRepeat ?? "no-repeat";
+    wrapperStyle.backgroundRepeat = repeat;
+  }
+
+  const innerWrapperStyle: CSSProperties = {};
+  if (typeof props.maxWidthPx === "number" && props.maxWidthPx > 0) {
+    innerWrapperStyle.maxWidth = `${props.maxWidthPx}px`;
+  }
+
+  const columnsContainerStyle: CSSProperties = {};
+  if (typeof props.gapXPx === "number" && props.gapXPx > 0) {
+    columnsContainerStyle.columnGap = `${props.gapXPx}px`;
+  }
+
+  return {
+    bgClass,
+    pyClass,
+    alignItemsClass,
+    wrapperStyle,
+    innerWrapperStyle,
+    columnsContainerStyle,
+    hasBackgroundVideo,
+    backgroundVideoSrc,
+  };
+}

src/features/editor/utils/textHelpers.ts

@@ -0,0 +1,371 @@
+import type { CSSProperties } from "react";
+import type { TextBlockProps } from "@/features/editor/state/editorStore";
+
+export type TextAlign = "left" | "center" | "right" | null | undefined;
+
+export type TextFontSizeScale = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+export type TextLineHeightScale = "tight" | "snug" | "normal" | "relaxed" | "loose";
+export type TextFontWeightScale = "normal" | "medium" | "semibold" | "bold";
+export type TextColorPalette =
+  | "default"
+  | "muted"
+  | "strong"
+  | "accent"
+  | "danger"
+  | "success"
+  | "warning"
+  | "info"
+  | "neutral";
+
+export interface TextStyleInput {
+  text?: string;
+  align?: TextAlign;
+  size?: "sm" | "base" | "lg" | null | undefined;
+  fontSizeMode?: "scale" | "custom" | null | undefined;
+  fontSizeScale?: TextFontSizeScale | null | undefined;
+  fontSizeCustom?: string | null | undefined;
+  lineHeightMode?: "scale" | "custom" | null | undefined;
+  lineHeightScale?: TextLineHeightScale | null | undefined;
+  lineHeightCustom?: string | null | undefined;
+  fontWeightMode?: "scale" | "custom" | null | undefined;
+  fontWeightScale?: TextFontWeightScale | null | undefined;
+  fontWeightCustom?: string | number | null | undefined;
+  colorMode?: "palette" | "custom" | null | undefined;
+  colorPalette?: TextColorPalette | null | undefined;
+  colorCustom?: string | null | undefined;
+  backgroundColorCustom?: string | null | undefined;
+  maxWidthMode?: "scale" | "custom" | null | undefined;
+  maxWidthScale?: "none" | "prose" | "narrow" | null | undefined;
+  underline?: boolean | null | undefined;
+  strike?: boolean | null | undefined;
+  italic?: boolean | null | undefined;
+}
+
+export interface TextPbTokens {
+  alignClass: string;
+  sizeClass: string;
+  leadingClass: string;
+  weightClass: string;
+  colorClass: string;
+  maxWidthClass: string;
+  extraClasses: string[];
+  inlineStyles: string[];
+}
+
+export function computeTextPbTokens(input: TextStyleInput): TextPbTokens {
+  const align = input.align === "center" ? "center" : input.align === "right" ? "right" : "left";
+  const alignClass =
+    align === "center" ? "pb-text-center" : align === "right" ? "pb-text-right" : "pb-text-left";
+
+  const fontSizeMode = input.fontSizeMode ?? "scale";
+  const fallbackScale: TextFontSizeScale =
+    input.size === "sm" ? "sm" : input.size === "lg" ? "lg" : "base";
+  const fontSizeScale: TextFontSizeScale =
+    (input.fontSizeScale as TextFontSizeScale | null) ?? fallbackScale;
+
+  const fontSizeMap: Record<TextFontSizeScale, string> = {
+    xs: "pb-text-xs",
+    sm: "pb-text-sm",
+    base: "pb-text-base",
+    lg: "pb-text-lg",
+    xl: "pb-text-xl",
+    "2xl": "pb-text-2xl",
+    "3xl": "pb-text-3xl",
+  };
+
+  const sizeClass = fontSizeScale && fontSizeMap[fontSizeScale]
+    ? fontSizeMap[fontSizeScale]
+    : "";
+
+  const lineHeightMode = input.lineHeightMode ?? "scale";
+  const lineHeightScale: TextLineHeightScale = (input.lineHeightScale as TextLineHeightScale | null) ?? "normal";
+  const leadingMap: Record<TextLineHeightScale, string> = {
+    tight: "pb-leading-tight",
+    snug: "pb-leading-snug",
+    normal: "pb-leading-normal",
+    relaxed: "pb-leading-relaxed",
+    loose: "pb-leading-loose",
+  };
+
+  const leadingClass =
+    lineHeightMode === "scale" && lineHeightScale && leadingMap[lineHeightScale]
+      ? leadingMap[lineHeightScale]
+      : "";
+
+  const fontWeightMode = input.fontWeightMode ?? "scale";
+  const fontWeightScale: TextFontWeightScale =
+    (input.fontWeightScale as TextFontWeightScale | null) ?? "normal";
+  const weightMap: Record<TextFontWeightScale, string> = {
+    normal: "pb-font-normal",
+    medium: "pb-font-medium",
+    semibold: "pb-font-semibold",
+    bold: "pb-font-bold",
+  };
+
+  const weightClass =
+    fontWeightMode === "scale" && fontWeightScale && weightMap[fontWeightScale]
+      ? weightMap[fontWeightScale]
+      : "";
+
+  let colorClass = "pb-text-color-strong";
+  const inlineStyles: string[] = [];
+
+  if (input.colorMode === "palette") {
+    const palette: TextColorPalette = (input.colorPalette as TextColorPalette | null) ?? "default";
+    const paletteMap: Record<TextColorPalette, string> = {
+      default: "pb-text-color-default",
+      muted: "pb-text-color-muted",
+      strong: "pb-text-color-strong",
+      accent: "pb-text-color-accent",
+      danger: "pb-text-color-danger",
+      success: "pb-text-color-success",
+      warning: "pb-text-color-warning",
+      info: "pb-text-color-info",
+      neutral: "pb-text-color-neutral",
+    };
+    colorClass = paletteMap[palette] ?? colorClass;
+  } else if (input.colorMode === "custom" && input.colorCustom && input.colorCustom.trim() !== "") {
+    inlineStyles.push(`color:${input.colorCustom.trim()}`);
+  }
+
+  if (input.backgroundColorCustom && input.backgroundColorCustom.trim() !== "") {
+    inlineStyles.push(`background-color:${input.backgroundColorCustom.trim()}`);
+  }
+
+  let maxWidthClass = "";
+  const maxWidthMode = input.maxWidthMode ?? "scale";
+  const maxWidthScale = input.maxWidthScale ?? "none";
+  if (maxWidthMode === "scale") {
+    if (maxWidthScale === "prose") {
+      maxWidthClass = "pb-text-maxw-prose";
+    } else if (maxWidthScale === "narrow") {
+      maxWidthClass = "pb-text-maxw-narrow";
+    }
+  }
+
+  const extraClasses: string[] = ["pb-whitespace-pre-wrap"];
+  if (input.underline) extraClasses.push("pb-underline");
+  if (input.strike) extraClasses.push("pb-line-through");
+  if (input.italic) extraClasses.push("pb-italic");
+
+  return {
+    alignClass,
+    sizeClass,
+    leadingClass,
+    weightClass,
+    colorClass,
+    maxWidthClass,
+    extraClasses,
+    inlineStyles,
+  };
+}
+
+export interface TextEditorTokens {
+  alignClass: string;
+  sizeClass: string;
+  leadingClass: string;
+  weightClass: string;
+  colorClass: string;
+  maxWidthClass: string;
+  decorationClass: string;
+  styleOverrides: CSSProperties;
+}
+
+export function computeTextEditorTokens(props: TextBlockProps): TextEditorTokens {
+  let alignClass = "";
+  let sizeClass = "";
+  let leadingClass = "";
+  let weightClass = "";
+  let colorClass = "";
+  let maxWidthClass = "";
+  let decorationClass = "";
+  const styleOverrides: CSSProperties = {};
+
+  // 정렬: pb-text-*
+  alignClass =
+    props.align === "center"
+      ? "pb-text-center"
+      : props.align === "right"
+        ? "pb-text-right"
+        : "pb-text-left";
+
+  // 폰트 크기: scale/custom + 기존 size 값 fallback
+  const fontSizeMode = props.fontSizeMode ?? "scale";
+  const fallbackScale = props.size === "sm" ? "sm" : props.size === "lg" ? "lg" : "base";
+  const fontSizeScale = props.fontSizeScale ?? fallbackScale;
+
+  // 스케일/커스텀 모드와 무관하게 pb-text-* 스케일 클래스는 항상 유지한다.
+  sizeClass = `pb-text-${fontSizeScale}`;
+
+  // custom 모드에서는 inline 스타일로 실제 폰트 크기를 덮어쓴다.
+  if (fontSizeMode === "custom" && props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
+    styleOverrides.fontSize = props.fontSizeCustom;
+  }
+
+  // 줄 간격: scale/custom
+  const lineHeightMode = props.lineHeightMode ?? "scale";
+  const lineHeightScale = props.lineHeightScale ?? "normal";
+  if (lineHeightMode === "scale") {
+    leadingClass = `pb-leading-${lineHeightScale}`;
+  } else if (lineHeightMode === "custom" && props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+    styleOverrides.lineHeight = props.lineHeightCustom;
+  }
+
+  // 굵기: scale/custom
+  const fontWeightMode = props.fontWeightMode ?? "scale";
+  const fontWeightScale = props.fontWeightScale ?? "normal";
+  if (fontWeightMode === "scale") {
+    weightClass = `pb-font-${fontWeightScale}`;
+  } else if (fontWeightMode === "custom" && props.fontWeightCustom && String(props.fontWeightCustom).trim() !== "") {
+    styleOverrides.fontWeight = props.fontWeightCustom as CSSProperties["fontWeight"];
+  }
+
+  // 색상: colorCustom이 있으면 항상 우선 사용, 없으면 팔레트
+  const colorPalette = props.colorPalette ?? "default";
+  if (props.colorCustom && props.colorCustom.trim() !== "") {
+    styleOverrides.color = props.colorCustom.trim();
+  } else {
+    colorClass = `pb-text-color-${colorPalette}`;
+  }
+
+  // 블록 배경색: backgroundColorCustom 이 설정된 경우 편집기 텍스트 컨테이너 배경에도 반영한다.
+  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
+    styleOverrides.backgroundColor = props.backgroundColorCustom.trim();
+  }
+
+  // 최대 너비: 커스텀 값이 있으면 우선 사용, 없으면 scale 프리셋
+  const maxWidthScale = props.maxWidthScale ?? "none";
+  if (props.maxWidthCustom && props.maxWidthCustom.trim() !== "") {
+    styleOverrides.maxWidth = props.maxWidthCustom.trim();
+  } else if (maxWidthScale === "prose") {
+    maxWidthClass = "pb-text-maxw-prose";
+  } else if (maxWidthScale === "narrow") {
+    maxWidthClass = "pb-text-maxw-narrow";
+  }
+
+  // 글자 간격: 커스텀 값이 있으면 em 단위 그대로 사용
+  if (props.letterSpacingCustom && props.letterSpacingCustom.trim() !== "") {
+    styleOverrides.letterSpacing = props.letterSpacingCustom.trim();
+  }
+
+  // 텍스트 장식: 밑줄/가운데줄/이탤릭
+  if (props.underline) {
+    decorationClass += " pb-underline";
+  }
+  if (props.strike) {
+    decorationClass += " pb-line-through";
+  }
+  if (props.italic) {
+    decorationClass += " pb-italic";
+  }
+
+  return {
+    alignClass,
+    sizeClass,
+    leadingClass,
+    weightClass,
+    colorClass,
+    maxWidthClass,
+    decorationClass,
+    styleOverrides,
+  };
+}
+
+export interface TextPublicTokens {
+  alignClass: string;
+  sizeClass: string;
+  styleOverrides: CSSProperties;
+}
+
+const pxToEm = (px: number, base = 16) => `${px / base}em`;
+
+const convertPxStringToEm = (value?: string | null) => {
+  if (!value) return null;
+  const match = value.trim().match(/-?\d+(?:\.\d+)?/);
+  if (!match) return null;
+  const px = parseFloat(match[0]);
+  if (!Number.isFinite(px)) return null;
+  return pxToEm(px);
+};
+
+export function computeTextPublicTokens(props: TextBlockProps): TextPublicTokens {
+  const alignClass =
+    props.align === "center"
+      ? "text-center"
+      : props.align === "right"
+        ? "text-right"
+        : "text-left";
+
+  const fontSizeMode = props.fontSizeMode ?? "scale";
+  const fallbackScale = props.size === "sm" ? "sm" : props.size === "lg" ? "lg" : "base";
+  const fontSizeScale = props.fontSizeScale ?? fallbackScale;
+
+  const fontSizeScaleToClass: Record<string, string> = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+  };
+
+  let sizeClass = "";
+  const styleOverrides: CSSProperties = {};
+
+  if (fontSizeMode === "scale" && fontSizeScale && fontSizeScaleToClass[fontSizeScale]) {
+    sizeClass = fontSizeScaleToClass[fontSizeScale];
+  } else if (
+    fontSizeMode === "custom" &&
+    props.fontSizeCustom &&
+    props.fontSizeCustom.trim() !== ""
+  ) {
+    const fontSizeValue = props.fontSizeCustom.trim();
+    if (fontSizeValue.endsWith("px")) {
+      const fontSizeEm = convertPxStringToEm(fontSizeValue);
+      if (fontSizeEm) {
+        styleOverrides.fontSize = fontSizeEm;
+      }
+    } else {
+      styleOverrides.fontSize = fontSizeValue;
+    }
+  }
+
+  if (props.colorCustom && props.colorCustom.trim() !== "") {
+    styleOverrides.color = props.colorCustom.trim();
+  }
+
+  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
+    styleOverrides.backgroundColor = props.backgroundColorCustom.trim();
+  }
+
+  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+    const lineHeightValue = props.lineHeightCustom.trim();
+    if (lineHeightValue.endsWith("px")) {
+      const lineHeightEm = convertPxStringToEm(lineHeightValue);
+      if (lineHeightEm) {
+        styleOverrides.lineHeight = lineHeightEm;
+      }
+    } else {
+      styleOverrides.lineHeight = lineHeightValue;
+    }
+  }
+
+  if (props.letterSpacingCustom && props.letterSpacingCustom.trim() !== "") {
+    const letterSpacingValue = props.letterSpacingCustom.trim();
+    if (letterSpacingValue.endsWith("px")) {
+      const letterSpacingEm = convertPxStringToEm(letterSpacingValue);
+      if (letterSpacingEm) {
+        styleOverrides.letterSpacing = letterSpacingEm;
+      }
+    } else {
+      styleOverrides.letterSpacing = letterSpacingValue;
+    }
+  }
+
+  return {
+    alignClass,
+    sizeClass,
+    styleOverrides,
+  };
+}

src/features/editor/utils/videoHelpers.ts

@@ -0,0 +1,231 @@
+import type { CSSProperties } from "react";
+import type { VideoBlockProps } from "@/features/editor/state/editorStore";
+
+export type VideoPlatform = "youtube" | "vimeo" | "html5";
+
+export type VideoPlatformInput = VideoPlatform | "auto" | null | undefined;
+
+// 비디오 sourceUrl 을 정규화한다: null/undefined 를 빈 문자열로 만들고 양 끝 공백을 제거한다.
+export function normalizeVideoSourceUrl(source: string | null | undefined): string {
+  if (!source) {
+    return "";
+  }
+
+  return source.trim();
+}
+
+// platform 값과 URL 을 기반으로 최종 비디오 플랫폼을 결정한다.
+// - platform 이 auto 가 아니면 해당 값을 우선 사용한다.
+// - auto 인 경우 URL 을 검사해 youtube/vimeo/html5 를 판별한다.
+export function resolveVideoPlatform(rawUrl: string, platform: VideoPlatformInput): VideoPlatform {
+  if (platform && platform !== "auto") {
+    return platform;
+  }
+
+  const normalized = normalizeVideoSourceUrl(rawUrl);
+  const lower = normalized.toLowerCase();
+
+  if (lower.includes("youtube.com") || lower.includes("youtu.be")) {
+    return "youtube";
+  }
+
+  if (lower.includes("vimeo.com")) {
+    return "vimeo";
+  }
+
+  return "html5";
+}
+
+export type BuildEmbedUrlOptions = {
+  enableVimeoEmbed?: boolean;
+};
+
+// 플랫폼과 URL 을 기반으로 최종 embed URL 을 생성한다.
+// - YouTube: 항상 watch/short/youtu.be 형태에서 embed URL 로 변환.
+// - Vimeo: enableVimeoEmbed 가 true 인 경우에만 player.vimeo.com 기반 embed URL 로 변환.
+// - HTML5: 항상 정규화된 원본 URL 을 그대로 사용.
+export function buildVideoEmbedUrl(
+  rawUrl: string,
+  platform: VideoPlatform,
+  options?: BuildEmbedUrlOptions,
+): string {
+  const normalized = normalizeVideoSourceUrl(rawUrl);
+
+  if (platform === "youtube") {
+    const idMatch =
+      normalized.match(/[?&]v=([^&]+)/) ||
+      normalized.match(/youtu\.be\/([^?&]+)/) ||
+      normalized.match(/youtube\.com\/shorts\/([^?&]+)/);
+    const videoId = idMatch && idMatch[1] ? idMatch[1] : "";
+    if (videoId) {
+      return `https://www.youtube.com/embed/${videoId}`;
+    }
+    return normalized;
+  }
+
+  if (platform === "vimeo" && options?.enableVimeoEmbed) {
+    const idMatch = normalized.match(/vimeo\.com\/(\d+)/);
+    const videoId = idMatch && idMatch[1] ? idMatch[1] : "";
+    if (videoId) {
+      return `https://player.vimeo.com/video/${videoId}`;
+    }
+    return normalized;
+  }
+
+  return normalized;
+}
+
+export interface VideoExportEscapers {
+  escapeAttr: (value: string) => string;
+}
+
+export interface VideoExportTokens {
+  wrapperStyleParts: string[];
+  videoStyleParts: string[];
+  outerStyleParts: string[];
+  aspectClass: string;
+}
+
+export function computeVideoExportTokens(
+  props: VideoBlockProps,
+  escapers: VideoExportEscapers,
+): VideoExportTokens {
+  const { escapeAttr } = escapers;
+
+  const aspect = props.aspectRatio ?? "16:9";
+  const aspectClass =
+    aspect === "4:3" ? " pb-video-wrapper--4by3" : aspect === "1:1" ? " pb-video-wrapper--1by1" : "";
+
+  const wrapperStyleParts: string[] = [];
+  const videoStyleParts: string[] = [];
+
+  const widthMode = props.widthMode ?? "auto";
+  if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+    const widthEm = pxToEm(props.widthPx);
+    wrapperStyleParts.push(`width:${widthEm}`);
+    videoStyleParts.push(`width:${widthEm}`);
+  } else if (widthMode === "full") {
+    wrapperStyleParts.push("width:100%");
+    videoStyleParts.push("width:100%");
+  }
+
+  if (typeof props.backgroundColorCustom === "string" && props.backgroundColorCustom.trim() !== "") {
+    wrapperStyleParts.push(`background-color:${escapeAttr(props.backgroundColorCustom.trim())}`);
+  }
+
+  if (typeof props.cardPaddingPx === "number" && props.cardPaddingPx >= 0) {
+    wrapperStyleParts.push(`padding:${pxToEm(props.cardPaddingPx)}`);
+  }
+
+  if (typeof props.borderRadiusPx === "number" && props.borderRadiusPx >= 0) {
+    wrapperStyleParts.push(`border-radius:${pxToEm(props.borderRadiusPx)}`);
+  }
+
+  const align =
+    props.align === "left" ? "flex-start" : props.align === "right" ? "flex-end" : "center";
+  const outerStyleParts = ["display:flex", `justify-content:${align}`];
+
+  return {
+    wrapperStyleParts,
+    videoStyleParts,
+    outerStyleParts,
+    aspectClass,
+  };
+}
+
+export interface VideoPublicTokens {
+  wrapperStyle: CSSProperties;
+  videoStyle: CSSProperties;
+  justifyClass: string;
+  aspectClass: string;
+}
+
+const pxToEm = (px: number, base = 16) => `${px / base}em`;
+
+export function computeVideoPublicTokens(props: VideoBlockProps): VideoPublicTokens {
+  const aspect = props.aspectRatio ?? "16:9";
+  const aspectClass =
+    aspect === "4:3" ? " pb-video-wrapper--4by3" : aspect === "1:1" ? " pb-video-wrapper--1by1" : "";
+
+  const wrapperStyle: CSSProperties = {};
+  const videoStyle: CSSProperties = {};
+
+  const widthMode = props.widthMode ?? "auto";
+  if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+    const widthEm = pxToEm(props.widthPx);
+    wrapperStyle.width = widthEm;
+    videoStyle.width = widthEm;
+  } else if (widthMode === "full") {
+    wrapperStyle.width = "100%";
+    videoStyle.width = "100%";
+  }
+
+  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
+    wrapperStyle.backgroundColor = props.backgroundColorCustom.trim();
+  }
+
+  if (typeof (props as any).cardPaddingPx === "number" && (props as any).cardPaddingPx >= 0) {
+    wrapperStyle.padding = pxToEm((props as any).cardPaddingPx as number);
+  }
+
+  if (typeof (props as any).borderRadiusPx === "number" && (props as any).borderRadiusPx >= 0) {
+    wrapperStyle.borderRadius = pxToEm((props as any).borderRadiusPx as number);
+  }
+
+  const align = props.align ?? "center";
+  const justifyClass =
+    align === "left" ? "justify-start" : align === "right" ? "justify-end" : "justify-center";
+
+  return {
+    wrapperStyle,
+    videoStyle,
+    justifyClass,
+    aspectClass,
+  };
+}
+
+export interface VideoEditorTokens {
+  wrapperStyle: CSSProperties;
+  videoStyle: CSSProperties;
+  justifyClass: string;
+  aspectClass: string;
+}
+
+export function computeVideoEditorTokens(props: VideoBlockProps): VideoEditorTokens {
+  const aspect = props.aspectRatio ?? "16:9";
+  const aspectClass =
+    aspect === "4:3" ? " pb-video-wrapper--4by3" : aspect === "1:1" ? " pb-video-wrapper--1by1" : "";
+
+  const wrapperStyle: CSSProperties = {};
+  const videoStyle: CSSProperties = {};
+
+  const widthMode = props.widthMode ?? "auto";
+  if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+    wrapperStyle.width = `${props.widthPx}px`;
+    videoStyle.width = `${props.widthPx}px`;
+  } else if (widthMode === "full") {
+    wrapperStyle.width = "100%";
+    videoStyle.width = "100%";
+  }
+
+  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
+    wrapperStyle.backgroundColor = props.backgroundColorCustom.trim();
+  }
+  if (typeof props.cardPaddingPx === "number" && props.cardPaddingPx >= 0) {
+    wrapperStyle.padding = `${props.cardPaddingPx}px`;
+  }
+  if (typeof props.borderRadiusPx === "number" && props.borderRadiusPx >= 0) {
+    wrapperStyle.borderRadius = `${props.borderRadiusPx}px`;
+  }
+
+  const align = props.align ?? "center";
+  const justifyClass =
+    align === "left" ? "justify-start" : align === "right" ? "justify-end" : "justify-center";
+
+  return {
+    wrapperStyle,
+    videoStyle,
+    justifyClass,
+    aspectClass,
+  };
+}

src/features/export/buildStaticHtml.ts

@@ -0,0 +1 @@
+export { buildStaticHtml } from "@/app/api/export/route";

src/features/projects/publicCache.ts

@@ -0,0 +1,25 @@
+import type { Block } from "@/features/editor/state/editorStore";
+
+interface PublicProjectSnapshot {
+  slug: string;
+  title: string;
+  contentJson: Block[];
+}
+
+function getStore(): Map<string, PublicProjectSnapshot> {
+  const g = globalThis as any;
+  if (!g.__PB_PUBLIC_PROJECTS) {
+    g.__PB_PUBLIC_PROJECTS = new Map<string, PublicProjectSnapshot>();
+  }
+  return g.__PB_PUBLIC_PROJECTS as Map<string, PublicProjectSnapshot>;
+}
+
+export function cachePublicProject(snapshot: PublicProjectSnapshot): void {
+  const store = getStore();
+  store.set(snapshot.slug, snapshot);
+}
+
+export function getCachedPublicProject(slug: string): PublicProjectSnapshot | null {
+  const store = getStore();
+  return store.get(slug) ?? null;
+}

src/styles/builder.css

@@ -0,0 +1,550 @@
+/* Builder export/global design system classes */
+
+/*
+  디자인 토큰: 폰트/라인하이트/색상/텍스트 폭
+  - 에디터 프리뷰와 내보내기 HTML 모두 이 토큰과 pb-* 클래스를 공유한다.
+*/
+:root {
+  /* Font sizes (rem 단위, Tailwind 스케일과 유사) */
+  --pb-font-xs: 0.75rem;   /* 12px */
+  --pb-font-sm: 0.875rem;  /* 14px */
+  --pb-font-base: 1rem;    /* 16px */
+  --pb-font-lg: 1.125rem;  /* 18px */
+  --pb-font-xl: 1.25rem;   /* 20px */
+  --pb-font-2xl: 1.5rem;   /* 24px */
+  --pb-font-3xl: 1.875rem; /* 30px */
+
+  /* Line heights */
+  --pb-leading-tight: 1.25;
+  --pb-leading-snug: 1.35;
+  --pb-leading-normal: 1.5;
+  --pb-leading-relaxed: 1.7;
+  --pb-leading-loose: 1.9;
+
+  /* Text colors (팔레트) */
+  --pb-color-text-default: #e5e7eb; /* slate-200 정도 */
+  --pb-color-text-muted: #9ca3af;   /* slate-400 */
+  --pb-color-text-strong: #f9fafb;  /* slate-50 */
+  --pb-color-text-accent: #38bdf8;  /* sky-400 */
+  --pb-color-text-danger: #f97373;  /* red-400 근처 */
+
+  /* Text max width */
+  --pb-text-maxw-prose: 60ch;
+  --pb-text-maxw-narrow: 40ch;
+}
+
+/* 에디터/프리뷰 공통 기본 타이포 설정 (em/rem 기반) */
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;      /* 기본 16px 기준 */
+  line-height: 1.5;     /* 읽기 좋은 기본 라인하이트 */
+  letter-spacing: 0em;  /* 기본 글자 간격은 0em */
+}
+
+/* Static export root layout */
+.pb-root {
+  display: block;
+}
+
+.pb-root-inner {
+  max-width: 72rem; /* ~1152px */
+  margin-inline: auto;
+  padding-inline: 1.5rem;
+  padding-block: 2.5rem;
+}
+
+.pb-section {
+  display: block;
+}
+
+.pb-section-inner {
+  padding-inline: 1.5rem;
+  margin-inline: auto;
+}
+
+.pb-section-columns {
+  display: flex;
+  gap: 2rem;
+}
+
+.pb-section-column {
+  flex: 1 1 0;
+}
+
+/* Section background video */
+.pb-section-bg-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* Text alignment */
+.pb-text-left {
+  text-align: left;
+}
+.pb-text-center {
+  text-align: center;
+}
+.pb-text-right {
+  text-align: right;
+}
+
+/* Text size scale (디자인 토큰 기반) */
+.pb-text-xs {
+  font-size: var(--pb-font-xs);
+}
+.pb-text-sm {
+  font-size: var(--pb-font-sm);
+}
+.pb-text-base {
+  font-size: var(--pb-font-base);
+}
+.pb-text-lg {
+  font-size: var(--pb-font-lg);
+}
+.pb-text-xl {
+  font-size: var(--pb-font-xl);
+}
+.pb-text-2xl {
+  font-size: var(--pb-font-2xl);
+}
+.pb-text-3xl {
+  font-size: var(--pb-font-3xl);
+}
+
+/* Line-height scale */
+.pb-leading-tight {
+  line-height: var(--pb-leading-tight);
+}
+.pb-leading-snug {
+  line-height: var(--pb-leading-snug);
+}
+.pb-leading-normal {
+  line-height: var(--pb-leading-normal);
+}
+.pb-leading-relaxed {
+  line-height: var(--pb-leading-relaxed);
+}
+.pb-leading-loose {
+  line-height: var(--pb-leading-loose);
+}
+
+/* Font weight scale */
+.pb-font-normal {
+  font-weight: 400;
+}
+.pb-font-medium {
+  font-weight: 500;
+}
+.pb-font-semibold {
+  font-weight: 600;
+}
+.pb-font-bold {
+  font-weight: 700;
+}
+
+/* Text color palette */
+.pb-text-color-default {
+  color: var(--pb-color-text-default);
+}
+.pb-text-color-muted {
+  color: var(--pb-color-text-muted);
+}
+.pb-text-color-strong {
+  color: var(--pb-color-text-strong);
+}
+.pb-text-color-accent {
+  color: var(--pb-color-text-accent);
+}
+.pb-text-color-danger {
+  color: var(--pb-color-text-danger);
+}
+
+/* Additional text colors for presets */
+.pb-text-color-success {
+  color: #22c55e;
+}
+.pb-text-color-warning {
+  color: #eab308;
+}
+.pb-text-color-info {
+  color: #0ea5e9;
+}
+.pb-text-color-neutral {
+  color: #94a3b8;
+}
+
+/* Text decoration & style */
+.pb-underline {
+  text-decoration-line: underline;
+}
+.pb-line-through {
+  text-decoration-line: line-through;
+}
+.pb-italic {
+  font-style: italic;
+}
+
+/* Text max width presets */
+.pb-text-maxw-prose {
+  max-width: var(--pb-text-maxw-prose);
+}
+.pb-text-maxw-narrow {
+  max-width: var(--pb-text-maxw-narrow);
+}
+
+.pb-whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+/* Screen reader only utility (공통 sr-only 클래스) */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.pb-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: #1f2937 #020617;
+}
+
+.pb-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.pb-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.pb-scroll::-webkit-scrollbar-thumb {
+  background-color: #1f2937;
+  border-radius: 9999px;
+  border: 2px solid #020617;
+}
+
+.pb-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: #374151;
+}
+
+.pb-video-wrapper {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+  overflow: hidden;
+}
+
+.pb-video-wrapper--4by3 {
+  padding-bottom: 75%;
+}
+
+.pb-video-wrapper--1by1 {
+  padding-bottom: 100%;
+}
+
+.pb-video-frame {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+}
+
+.pb-video-caption {
+  display: none;
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+
+.pb-btn-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: 500;
+  border-width: 1px;
+  text-decoration: none;
+}
+.pb-btn-size-xs {
+  padding: 0.125rem 0.5rem;
+}
+.pb-btn-size-sm {
+  padding: 0.25rem 0.75rem;
+}
+.pb-btn-size-md {
+  padding: 0.375rem 1rem;
+}
+.pb-btn-size-lg {
+  padding: 0.5rem 1.25rem;
+}
+.pb-btn-size-xl {
+  padding: 0.75rem 1.5rem;
+}
+
+.pb-btn-radius-none {
+  border-radius: 0;
+}
+.pb-btn-radius-sm {
+  border-radius: 0.25rem;
+}
+.pb-btn-radius-md {
+  border-radius: 0.5rem;
+}
+.pb-btn-radius-lg {
+  border-radius: 0.75rem;
+}
+.pb-btn-radius-full {
+  border-radius: 9999px;
+}
+
+.pb-btn-variant-solid-primary {
+  background-color: #0ea5e9;
+  border-color: #0284c7;
+  color: #0b1120;
+}
+.pb-btn-variant-solid-muted {
+  background-color: #1f2937;
+  border-color: #4b5563;
+  color: #e5e7eb;
+}
+.pb-btn-variant-solid-danger {
+  background-color: #ef4444;
+  border-color: #b91c1c;
+  color: #f9fafb;
+}
+.pb-btn-variant-solid-success {
+  background-color: #22c55e;
+  border-color: #15803d;
+  color: #022c22;
+}
+.pb-btn-variant-solid-neutral {
+  background-color: #4b5563;
+  border-color: #374151;
+  color: #e5e7eb;
+}
+
+.pb-btn-variant-outline-primary {
+  background-color: transparent;
+  border-color: #38bdf8;
+  color: #e0f2fe;
+}
+.pb-btn-variant-outline-muted {
+  background-color: transparent;
+  border-color: #4b5563;
+  color: #e5e7eb;
+}
+.pb-btn-variant-outline-danger {
+  background-color: transparent;
+  border-color: #f97373;
+  color: #fecaca;
+}
+.pb-btn-variant-outline-success {
+  background-color: transparent;
+  border-color: #22c55e;
+  color: #bbf7d0;
+}
+.pb-btn-variant-outline-neutral {
+  background-color: transparent;
+  border-color: #64748b;
+  color: #e5e7eb;
+}
+
+.pb-btn-variant-ghost-primary {
+  background-color: transparent;
+  border-color: transparent;
+  color: #38bdf8;
+}
+.pb-btn-variant-ghost-muted {
+  background-color: transparent;
+  border-color: transparent;
+  color: #9ca3af;
+}
+.pb-btn-variant-ghost-danger {
+  background-color: transparent;
+  border-color: transparent;
+  color: #f97373;
+}
+.pb-btn-variant-ghost-success {
+  background-color: transparent;
+  border-color: transparent;
+  color: #4ade80;
+}
+.pb-btn-variant-ghost-neutral {
+  background-color: transparent;
+  border-color: transparent;
+  color: #cbd5f5;
+}
+
+/* Section background variants */
+.pb-section-bg-default {
+  background-color: rgba(15, 23, 42, 0.6); /* slate-900/60 느낌 */
+}
+.pb-section-bg-muted {
+  background-color: rgba(15, 23, 42, 0.4); /* slate-950/40 느낌 */
+}
+.pb-section-bg-primary {
+  background-color: rgba(8, 47, 73, 0.4); /* sky-950/40 느낌 */
+  border-color: rgba(8, 47, 73, 0.6);
+}
+
+/* Section vertical padding scale */
+.pb-section-py-sm {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.pb-section-py-md {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+.pb-section-py-lg {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+/* Simple form styling for static export */
+.pb-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 40rem;
+}
+
+/* Form 컨트롤러용 최소 폼: 레이아웃에 영향이 없도록 margin/padding 을 0 으로 고정한다. */
+.pb-form-controller {
+  margin: 0;
+  padding: 0;
+}
+
+.pb-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.pb-form-field--floating {
+  position: relative;
+  margin-top: 0.5rem; /* 윗쪽 엘리먼트와는 살짝만 띄우고, 간격이 너무 넓지 않도록 조정한다. */
+  /* 플로팅 라벨이 사용하는 공통 세로 패딩 기준값.
+     이 값을 변경하면 인풋 높이와 라벨 위치가 함께 조정되도록 한다. */
+  --pb-input-padding-y: 0.5rem;
+}
+
+.pb-form-field--floating .pb-form-label {
+  position: absolute;
+  /* 인풋 내부 세로 패딩을 기준으로 라벨의 기본 위치를 계산한다. */
+  top: calc(var(--pb-input-padding-y) + 0.3rem);
+  left: 0.75rem;
+  font-size: 0.75rem;
+  color: #9ca3af;
+  pointer-events: none;
+  transform-origin: left top;
+  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
+}
+
+.pb-form-field--floating .pb-input,
+.pb-form-field--floating .pb-textarea {
+  margin-top: 0.25rem;
+  /* 기본 세로 패딩 + 라벨이 들어갈 여유 공간을 함께 적용한다. */
+  padding-top: calc(var(--pb-input-padding-y) + 1rem);
+  padding-bottom: var(--pb-input-padding-y);
+  /* 세로 패딩을 0으로 줄이더라도 플로팅 라벨이 지나치게 눌리지 않도록 최소 높이를 보장한다. */
+  min-height: 2.5rem;
+}
+
+/* 포커스되었거나 값이 입력되어 placeholder 가 사라진 경우, 라벨을 인풋 바깥(상단 보더 근처)으로 플로팅한다. */
+.pb-form-field--floating .pb-input:focus ~ .pb-form-label,
+.pb-form-field--floating .pb-input:not(:placeholder-shown) ~ .pb-form-label,
+.pb-form-field--floating .pb-textarea:focus ~ .pb-form-label,
+.pb-form-field--floating .pb-textarea:not(:placeholder-shown) ~ .pb-form-label {
+  top: -0.3rem; /* 인풋 상단 보더에 살짝 겹치는 정도로만 띄운다. */
+  font-size: 0.725rem;
+  color: #e5e7eb;
+  background-color: #020617; /* 인풋 배경과 맞춰서 보더 라인을 자연스럽게 가린다. */
+  padding: 0 0.25rem;
+}
+
+.pb-form-label {
+  font-size: 0.75rem;
+  color: #e5e7eb;
+}
+
+.pb-form-options {
+  display: flex;
+  font-size: 0.75rem;
+}
+
+.pb-form-options--stacked {
+  flex-direction: column;
+}
+
+.pb-form-options--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pb-form-option {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  color: #e5e7eb;
+}
+
+.pb-input,
+.pb-select,
+.pb-textarea {
+  width: 100%;
+  border-radius: 0.375rem;
+  border: 1px solid #1f2937;
+  background-color: #020617;
+  /* 세로 패딩은 CSS 변수로 정의해 플로팅 라벨/에디터 등이 함께 참조할 수 있게 한다. */
+  padding: var(--pb-input-padding-y, 0.5rem) 0.75rem;
+  font-size: 0.75rem;
+  color: #e5e7eb;
+  box-sizing: border-box;
+}
+
+/* 기본 인풋/셀렉트도 일정 높이 이상을 유지해, 세로 패딩을 0 에 가깝게 줄이더라도 UI 가 붕괴되지 않도록 한다. */
+.pb-input,
+.pb-select {
+  min-height: 2.5rem;
+}
+
+.pb-textarea {
+  min-height: 6rem;
+}
+
+/* List styling for static export */
+.pb-list {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.875rem;
+  line-height: var(--pb-leading-normal);
+  color: var(--pb-color-text-default);
+}
+
+/* 리스트 아이템 간 여백은 --pb-list-gap 커스텀 프로퍼티로 제어한다.
+   - Export/Preview 모두 동일한 gapEm 을 이 변수에 설정하고,
+   - 실제 margin-bottom 계산은 CSS 레이어에서만 수행해 정적 HTML 인라인 스타일에
+     margin-bottom 이 직접 등장하지 않도록 한다. */
+.pb-list > li {
+  margin-bottom: var(--pb-list-gap, 0);
+}
+
+.pb-list > li:last-child {
+  margin-bottom: 0;
+}

src/styles/editor.css

@@ -0,0 +1,10 @@
+/*
+ * editor.css
+ * - 에디터/프리뷰 상단 바, 좌우 패널, 캔버스 외곽 등 "에디터 크롬" 전용 스타일을 정의한다.
+ * - 콘텐츠 블록(text/button/image/video/list/section/form 등)의 모양은 builder.css(pb-*) + 인라인 스타일로만 제어하고,
+ *   이 파일에서는 블록 내부 스타일을 절대 정의하지 않는다.
+ */
+
+/* 초기 상태에서는 별도 규칙 없이 파일만 생성해 두고,
+ * 이후 에디터 전용 레이아웃/패널 스타일을 점진적으로 이동시킨다.
+ */

src/styles/globals.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 html,
 body {

tests/api/auth.spec.ts

@@ -0,0 +1,267 @@
+import "dotenv/config";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+import { hashPassword, signAccessToken } from "@/features/auth/authCrypto";
+
+const BASE_URL = "http://localhost";
+
+// PrismaClient 를 실제 DB 대신 메모리 기반 user 저장소를 사용하는 목으로 대체한다.
+// 이렇게 하면 CI/로컬 어디에서도 DATABASE_URL 이나 실제 DB 없이 Auth API 테스트를 실행할 수 있다.
+const inMemoryUsers: any[] = [];
+
+vi.mock("@prisma/client", () => {
+  class PrismaClientMock {
+    user = {
+      findUnique: async ({ where: { email } }: any) => {
+        return inMemoryUsers.find((u) => u.email === email) ?? null;
+      },
+      create: async ({ data }: any) => {
+        const now = new Date();
+        const user = {
+          id: String(inMemoryUsers.length + 1),
+          createdAt: now,
+          updatedAt: now,
+          ...data,
+        };
+        inMemoryUsers.push(user);
+        return user;
+      },
+    };
+  }
+
+  return { PrismaClient: PrismaClientMock };
+});
+
+beforeEach(() => {
+  // 각 테스트 전에 메모리 유저 저장소를 초기화한다.
+  inMemoryUsers.length = 0;
+  process.env.AUTH_JWT_SECRET = "test-jwt-secret-api";
+  process.env.AUTH_ENCRYPTION_KEY = "0123456789abcdef0123456789abcdef";
+});
+
+describe("/api/auth", () => {
+  describe("POST /api/auth/signup", () => {
+    it("새 이메일과 8자 이상 비밀번호로 회원가입하면 User 가 생성되고 JWT 쿠키가 설정되어야 한다", async () => {
+      const { POST: signup } = await import("@/app/api/auth/signup/route");
+
+      const payload = { email: "user@example.com", password: "securePass1" };
+
+      const res = await signup(
+        new Request(`${BASE_URL}/api/auth/signup`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        }),
+      );
+
+      expect(res.status).toBe(201);
+
+      const json = (await res.json()) as any;
+      expect(json.email).toBe(payload.email);
+      expect(json.id).toBeDefined();
+      // 응답에는 passwordHash 가 포함되면 안 된다.
+      expect(json.passwordHash).toBeUndefined();
+
+      // 메모리 저장소에도 유저가 1명 생성되어야 한다.
+      expect(inMemoryUsers.length).toBe(1);
+      expect(inMemoryUsers[0].email).toBe(payload.email);
+      expect(typeof inMemoryUsers[0].passwordHash).toBe("string");
+
+      // JWT 세션 쿠키가 설정되어야 한다.
+      const setCookie = res.headers.get("set-cookie");
+      expect(setCookie).toBeTruthy();
+      expect(setCookie).toContain("pb_access=");
+      expect(setCookie?.toLowerCase()).toContain("max-age=604800");
+    });
+
+    it("비밀번호가 8자 미만이면 400 과 에러 메시지를 반환해야 한다", async () => {
+      const { POST: signup } = await import("@/app/api/auth/signup/route");
+
+      const res = await signup(
+        new Request(`${BASE_URL}/api/auth/signup`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email: "short@example.com", password: "short" }),
+        }),
+      );
+
+      expect(res.status).toBe(400);
+      const json = (await res.json()) as any;
+      expect(json.message).toBeDefined();
+    });
+
+    it("이미 존재하는 이메일로 회원가입하면 409 를 반환해야 한다", async () => {
+      const { POST: signup } = await import("@/app/api/auth/signup/route");
+
+      // 먼저 한 번 성공적으로 가입
+      await signup(
+        new Request(`${BASE_URL}/api/auth/signup`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email: "dup@example.com", password: "securePass1" }),
+        }),
+      );
+
+      // 같은 이메일로 다시 요청
+      const res = await signup(
+        new Request(`${BASE_URL}/api/auth/signup`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email: "dup@example.com", password: "anotherPass1" }),
+        }),
+      );
+
+      expect(res.status).toBe(409);
+      const json = (await res.json()) as any;
+      expect(json.message).toBeDefined();
+    });
+  });
+
+  describe("POST /api/auth/login", () => {
+    it("올바른 이메일/비밀번호로 로그인하면 200 과 JWT 쿠키를 반환해야 한다", async () => {
+      const { POST: signup } = await import("@/app/api/auth/signup/route");
+      const { POST: login } = await import("@/app/api/auth/login/route");
+
+      const email = "login@example.com";
+      const password = "securePass1";
+
+      // 사전 회원가입
+      await signup(
+        new Request(`${BASE_URL}/api/auth/signup`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email, password }),
+        }),
+      );
+
+      const res = await login(
+        new Request(`${BASE_URL}/api/auth/login`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email, password }),
+        }),
+      );
+
+      expect(res.status).toBe(200);
+      const json = (await res.json()) as any;
+      expect(json.email).toBe(email);
+      expect(json.id).toBeDefined();
+      expect(json.passwordHash).toBeUndefined();
+
+      const setCookie = res.headers.get("set-cookie");
+      expect(setCookie).toBeTruthy();
+      expect(setCookie).toContain("pb_access=");
+    });
+
+    it("잘못된 이메일 또는 비밀번호로 로그인하면 401 을 반환해야 한다", async () => {
+      const { POST: signup } = await import("@/app/api/auth/signup/route");
+      const { POST: login } = await import("@/app/api/auth/login/route");
+
+      const email = "wrong@example.com";
+      const password = "securePass1";
+
+      // 사전 회원가입
+      await signup(
+        new Request(`${BASE_URL}/api/auth/signup`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email, password }),
+        }),
+      );
+
+      // 존재하지 않는 이메일
+      const res1 = await login(
+        new Request(`${BASE_URL}/api/auth/login`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email: "nope@example.com", password }),
+        }),
+      );
+      expect(res1.status).toBe(401);
+
+      // 비밀번호 불일치
+      const res2 = await login(
+        new Request(`${BASE_URL}/api/auth/login`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email, password: "wrongPass1" }),
+        }),
+      );
+      expect(res2.status).toBe(401);
+    });
+  });
+
+  describe("POST /api/auth/logout", () => {
+    it("로그아웃 시 pb_access 쿠키를 제거하는 Set-Cookie 헤더를 반환해야 한다", async () => {
+      const { POST: logout } = await import("@/app/api/auth/logout/route");
+
+      const res = await logout(
+        new Request(`${BASE_URL}/api/auth/logout`, {
+          method: "POST",
+          headers: {
+            cookie: "pb_access=dummy.token.value",
+          },
+        }),
+      );
+
+      expect(res.status).toBe(200);
+      const setCookie = res.headers.get("set-cookie");
+      expect(setCookie).toBeTruthy();
+      expect(setCookie).toContain("pb_access=");
+      expect(setCookie?.toLowerCase()).toContain("max-age=0");
+    });
+
+    it("쿠키가 없어도 200 과 쿠키 제거 헤더를 반환해야 한다", async () => {
+      const { POST: logout } = await import("@/app/api/auth/logout/route");
+
+      const res = await logout(
+        new Request(`${BASE_URL}/api/auth/logout`, {
+          method: "POST",
+        }),
+      );
+
+      expect(res.status).toBe(200);
+      const setCookie = res.headers.get("set-cookie");
+      expect(setCookie).toBeTruthy();
+      expect(setCookie).toContain("pb_access=");
+      expect(setCookie?.toLowerCase()).toContain("max-age=0");
+    });
+  });
+
+  describe("GET /api/auth/me", () => {
+    it("유효한 JWT 쿠키가 있을 때 현재 로그인 유저 정보를 반환해야 한다", async () => {
+      const { GET: me } = await import("@/app/api/auth/me/route");
+
+      const user = { id: "user-1", email: "me@example.com", tokenVersion: 1 };
+      const token = await signAccessToken(user);
+
+      const res = await me(
+        new Request(`${BASE_URL}/api/auth/me`, {
+          headers: {
+            cookie: `pb_access=${token}`,
+          },
+        }),
+      );
+
+      expect(res.status).toBe(200);
+      const json = (await res.json()) as any;
+      expect(json.id).toBe(user.id);
+      expect(json.email).toBe(user.email);
+      expect(json.passwordHash).toBeUndefined();
+    });
+
+    it("JWT 쿠키가 없거나 잘못된 경우 401 을 반환해야 한다", async () => {
+      const { GET: me } = await import("@/app/api/auth/me/route");
+
+      const res1 = await me(new Request(`${BASE_URL}/api/auth/me`));
+      expect(res1.status).toBe(401);
+
+      const res2 = await me(
+        new Request(`${BASE_URL}/api/auth/me`, {
+          headers: { cookie: "pb_access=invalid.token.here" },
+        }),
+      );
+      expect(res2.status).toBe(401);
+    });
+  });
+});

tests/api/export.preview.spec.ts

@@ -0,0 +1,89 @@
+import "dotenv/config";
+import { describe, it, expect } from "vitest";
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+import { buildStaticHtml } from "@/app/api/export/route";
+
+const BASE_URL = "http://localhost";
+
+// /api/export/preview TDD:
+// - blocks + projectConfig 를 받아 HTML 문자열을 바로 반환하는 경량 엔드포인트.
+// - 기존 buildStaticHtml 과 동일한 HTML 을 반환해야 한다.
+
+describe("/api/export/preview", () => {
+  it("POST /api/export/preview 는 blocks + projectConfig 로부터 HTML 문자열을 반환해야 한다", async () => {
+    const blocks: Block[] = [
+      {
+        id: "blk_preview_text",
+        type: "text",
+        props: {
+          text: "Export 미리보기 테스트",
+          align: "center",
+          size: "lg",
+        },
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "Export 미리보기 페이지",
+      slug: "export-preview",
+      canvasPreset: "full",
+    };
+
+    const payload = { blocks, projectConfig };
+
+    const { POST: handlePreview } = await import("@/app/api/export/preview/route");
+
+    const res = await handlePreview(
+      new Request(`${BASE_URL}/api/export/preview`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    expect(res.headers.get("Content-Type")).toBe("text/html; charset=utf-8");
+
+    const html = await res.text();
+
+    expect(html).toContain("<title>Export 미리보기 페이지</title>");
+    expect(html).toContain("Export 미리보기 테스트");
+  });
+
+  it("/api/export/preview 의 HTML 은 동일 입력에 대해 buildStaticHtml 결과와 동일해야 한다", async () => {
+    const blocks: Block[] = [
+      {
+        id: "blk_preview_compare",
+        type: "text",
+        props: {
+          text: "Preview vs Export 동일성 테스트",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "동일성 테스트 페이지",
+      slug: "preview-equality-test",
+      canvasPreset: "full",
+    };
+
+    const payload = { blocks, projectConfig };
+
+    const { POST: handlePreview } = await import("@/app/api/export/preview/route");
+
+    const res = await handlePreview(
+      new Request(`${BASE_URL}/api/export/preview`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      }),
+    );
+
+    const previewHtml = await res.text();
+    const staticHtml = buildStaticHtml(blocks, projectConfig);
+
+    expect(previewHtml).toBe(staticHtml);
+  });
+});

tests/api/formExportSubmit.integration.spec.ts

@@ -0,0 +1,111 @@
+import "dotenv/config";
+import { describe, it, expect, vi } from "vitest";
+import JSZip from "jszip";
+
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+
+const BASE_URL = "http://localhost";
+
+// 정적 Export + main.js + /api/forms/submit 를 묶어서 검증하는 통합 테스트.
+// - /api/export 로 ZIP 을 생성해서 index.html / main.js 를 추출한다.
+// - jsdom DOM 에 index.html 을 주입하고, main.js 스크립트를 실제로 실행한다.
+// - form.pb-form-controller 에서 submit 이벤트를 발생시키면
+//   main.js 가 submit 을 가로채고 /api/forms/submit 로 fetch 를 호출해야 한다.
+
+describe("정적 Export 폼 컨트롤러 통합", () => {
+  it("Export된 index.html + main.js 에서 submit 시 /api/forms/submit 로 fetch 를 호출해야 한다", async () => {
+    const blocks: Block[] = [
+      {
+        id: "form_1",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          fieldIds: ["input_name"],
+          submitButtonId: null,
+          formWidthMode: "full",
+        },
+      } as any,
+      {
+        id: "input_name",
+        type: "formInput",
+        props: {
+          label: "이름",
+          formFieldName: "name",
+          required: true,
+        },
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "폼 통합 테스트",
+      slug: "form-integration-test",
+      canvasPreset: "full",
+    };
+
+    const payload = { blocks, projectConfig };
+
+    const { POST: handleExport } = await import("@/app/api/export/route");
+
+    const res = await handleExport(
+      new Request(`${BASE_URL}/api/export`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      }),
+    );
+
+    expect(res.status).toBe(200);
+
+    const arrayBuffer = await res.arrayBuffer();
+    const zip = await JSZip.loadAsync(arrayBuffer);
+
+    const indexEntry = zip.file("index.html");
+    const jsEntry = zip.file("main.js");
+
+    expect(indexEntry).toBeTruthy();
+    expect(jsEntry).toBeTruthy();
+
+    const html = await indexEntry!.async("string");
+    const mainJs = await jsEntry!.async("string");
+
+    // jsdom DOM 구성: export 된 HTML 을 그대로 주입한다.
+    document.documentElement.innerHTML = html;
+
+    const form = document.querySelector("form.pb-form-controller") as HTMLFormElement | null;
+    expect(form).not.toBeNull();
+
+    // name 필드에 값 채우기 (FormData 에 실제 값이 들어가도록)
+    const nameInput = document.querySelector('input[name="name"]') as HTMLInputElement | null;
+    if (nameInput) {
+      nameInput.value = "Alice";
+    }
+
+    // fetch 를 목킹하여 main.js 의 submit 가로채기 동작을 검증한다.
+    const fetchMock = vi.fn(async () =>
+      new Response(JSON.stringify({ ok: true, message: "ok" }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+    (globalThis as any).fetch = fetchMock;
+
+    // main.js 실행 (IIFE 코드이므로 평가만 하면 즉시 pbInitFormControllers 가 동작한다.)
+    // eslint-disable-next-line no-new-func
+    new Function(mainJs)();
+
+    // submit 이벤트 발생: main.js 가 이를 가로채고 fetch 를 호출해야 한다.
+    const submitEvent = new Event("submit", { bubbles: true, cancelable: true });
+    form!.dispatchEvent(submitEvent);
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    const [url, options] = fetchMock.mock.calls[0] as unknown as [any, RequestInit];
+
+    expect(url).toBe("/api/forms/submit");
+    expect(options.method).toBe("POST");
+    expect(options.body).toBeInstanceOf(FormData);
+
+    const body = options.body as FormData;
+    expect(body.get("__projectSlug")).toBe(projectConfig.slug);
+  });
+});

tests/api/formsSubmit.spec.ts

@@ -0,0 +1,552 @@
+import "dotenv/config";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import type { FormBlockProps } from "@/features/editor/state/editorStore";
+
+const BASE_URL = "http://localhost";
+
+// /api/forms/submit 테스트에서는 실제 DB 대신 메모리 기반 프로젝트/제출 내역 저장소를 사용한다.
+// 이렇게 하면 DATABASE_URL 없이도 Prisma 의 의존성을 만족시키면서 라우트 로직을 검증할 수 있다.
+const inMemoryProjects: any[] = [];
+const inMemoryFormSubmissions: any[] = [];
+
+vi.mock("@prisma/client", () => {
+  class PrismaClientMock {
+    // 프로젝트 조회는 슬러그 기준으로 수행한다.
+    project = {
+      findUnique: async ({ where: { slug } }: any) => {
+        return inMemoryProjects.find((p) => p.slug === slug) ?? null;
+      },
+    };
+
+    // 폼 제출 내역은 단순 배열에 push 하여 테스트에서 검증할 수 있도록 한다.
+    formSubmission = {
+      create: async ({ data }: any) => {
+        const now = new Date();
+        const record = {
+          id: String(inMemoryFormSubmissions.length + 1),
+          createdAt: now,
+          ...data,
+        };
+        inMemoryFormSubmissions.push(record);
+        return record;
+      },
+      findMany: async () => {
+        return [...inMemoryFormSubmissions];
+      },
+    };
+  }
+
+  return { PrismaClient: PrismaClientMock };
+});
+
+beforeEach(() => {
+  // 각 테스트 전에 메모리 스토리지를 초기화하고, 암호화 키를 고정 값으로 설정한다.
+  inMemoryProjects.length = 0;
+  inMemoryFormSubmissions.length = 0;
+  process.env.AUTH_ENCRYPTION_KEY = "0123456789abcdef0123456789abcdef";
+});
+
+// /api/forms/submit 라우트에 대한 기본 TDD:
+// - internal 모드에서 임의 필드가 포함된 FormData 를 받아도 에러 없이 ok:true 를 반환해야 한다.
+// - webhook 모드에서는 config.extraParams / headers 와 함께 x-www-form-urlencoded 로 전달해야 한다.
+
+describe("/api/forms/submit", () => {
+  it("internal 모드에서는 v2 필드 이름(email_address 등)을 포함한 FormData 를 받아도 ok:true 를 반환해야 한다", async () => {
+    const config: FormBlockProps = {
+      kind: "contact",
+      submitTarget: "internal",
+      successMessage: "성공적으로 전송되었습니다.",
+      errorMessage: "전송 중 오류가 발생했습니다.",
+      fieldIds: [],
+      submitButtonId: null,
+    };
+
+    const formData = new FormData();
+    formData.append("email_address", "test@example.com");
+    formData.append("__config", JSON.stringify(config));
+
+    const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+    const res = await handleSubmit(
+      new Request(`${BASE_URL}/api/forms/submit`, {
+        method: "POST",
+        body: formData,
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any;
+    expect(json.ok).toBe(true);
+  });
+
+  it("webhook 모드에서는 extraParams 와 FormData 필드들이 x-www-form-urlencoded payload 로 전달되어야 한다", async () => {
+    const destinationUrl = `${BASE_URL}/webhook-test`;
+
+    const config: FormBlockProps = {
+      kind: "contact",
+      submitTarget: "webhook",
+      destinationUrl,
+      method: "POST",
+      headers: { Authorization: "Bearer test-token" },
+      extraParams: { source: "builder", formId: "contact-hero" },
+      successMessage: "성공적으로 전송되었습니다.",
+      errorMessage: "전송 중 오류가 발생했습니다.",
+      fieldIds: [],
+      submitButtonId: null,
+    };
+
+    // fetch 를 목킹하여 payload 와 헤더가 기대대로 전달되는지 검증한다.
+    const fetchMock = vi.fn(async () => new Response("ok", { status: 200 }));
+    (globalThis as any).fetch = fetchMock;
+
+    const formData = new FormData();
+    formData.append("email_address", "test@example.com");
+    formData.append("__config", JSON.stringify(config));
+
+    const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+    const res = await handleSubmit(
+      new Request(`${BASE_URL}/api/forms/submit`, {
+        method: "POST",
+        body: formData,
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any;
+    expect(json.ok).toBe(true);
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    const [url, options] = fetchMock.mock.calls[0] as unknown as [string, RequestInit];
+    expect(url).toBe(destinationUrl);
+    expect(options.method).toBe("POST");
+    expect(options.headers).toMatchObject({
+      "Content-Type": "application/x-www-form-urlencoded",
+      Authorization: "Bearer test-token",
+    });
+
+    const body = options.body as string;
+    // payload 안에 폼 필드와 extraParams 가 모두 포함되어야 한다.
+    expect(body).toContain("email_address=test%40example.com");
+    expect(body).toContain("source=builder");
+    expect(body).toContain("formId=contact-hero");
+  });
+
+  it("webhook 모드에서 payloadFormat 이 json 인 경우 application/json 으로 JSON body 를 전송해야 한다", async () => {
+    const destinationUrl = `${BASE_URL}/webhook-json-test`;
+
+    const config: FormBlockProps = {
+      kind: "contact",
+      submitTarget: "webhook",
+      destinationUrl,
+      method: "POST",
+      headers: { Authorization: "Bearer json-token" },
+      extraParams: { source: "builder", formId: "contact-json" },
+      successMessage: "성공적으로 전송되었습니다.",
+      errorMessage: "전송 중 오류가 발생했습니다.",
+      fieldIds: [],
+      submitButtonId: null,
+      payloadFormat: "json",
+    };
+
+    const fetchMock = vi.fn(async () => new Response("ok", { status: 200 }));
+    (globalThis as any).fetch = fetchMock;
+
+    const formData = new FormData();
+    formData.append("email_address", "json@example.com");
+    formData.append("__config", JSON.stringify(config));
+
+    const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+    const res = await handleSubmit(
+      new Request(`${BASE_URL}/api/forms/submit`, {
+        method: "POST",
+        body: formData,
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any;
+    expect(json.ok).toBe(true);
+    expect(json.message).toBe(config.successMessage);
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    const [url, options] = fetchMock.mock.calls[0] as unknown as [string, RequestInit];
+    expect(url).toBe(destinationUrl);
+    expect(options.method).toBe("POST");
+    expect(options.headers).toMatchObject({
+      "Content-Type": "application/json",
+      Authorization: "Bearer json-token",
+    });
+
+    const body = options.body as string;
+    const parsed = JSON.parse(body) as Record<string, string>;
+    expect(parsed.email_address).toBe("json@example.com");
+    expect(parsed.source).toBe("builder");
+    expect(parsed.formId).toBe("contact-json");
+  });
+
+  it("webhook 모드 성공 시에도 successMessage 가 응답 message 필드에 포함되어야 한다", async () => {
+    const destinationUrl = `${BASE_URL}/webhook-success-message`;
+
+    const config: FormBlockProps = {
+      kind: "contact",
+      submitTarget: "webhook",
+      destinationUrl,
+      method: "POST",
+      headers: { Authorization: "Bearer success-token" },
+      extraParams: { source: "builder" },
+      successMessage: "웹훅으로 전송되었습니다.",
+      errorMessage: "웹훅 전송 실패",
+      fieldIds: [],
+      submitButtonId: null,
+    };
+
+    const fetchMock = vi.fn(async () => new Response("ok", { status: 200 }));
+    (globalThis as any).fetch = fetchMock;
+
+    const formData = new FormData();
+    formData.append("email_address", "success-webhook@example.com");
+    formData.append("__config", JSON.stringify(config));
+
+    const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+    const res = await handleSubmit(
+      new Request(`${BASE_URL}/api/forms/submit`, {
+        method: "POST",
+        body: formData,
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any;
+    expect(json.ok).toBe(true);
+    expect(json.message).toBe(config.successMessage);
+  });
+
+  it("both 모드에서는 internal 처리 후 webhook 으로도 전송되어야 한다", async () => {
+    const destinationUrl = `${BASE_URL}/webhook-both`;
+
+    const config: FormBlockProps = {
+      kind: "contact",
+      submitTarget: "both",
+      destinationUrl,
+      method: "POST",
+      headers: { Authorization: "Bearer both-token" },
+      extraParams: { source: "builder-both" },
+      successMessage: "양쪽 모두 전송되었습니다.",
+      errorMessage: "both 모드 전송 실패",
+      fieldIds: [],
+      submitButtonId: null,
+    };
+
+    const fetchMock = vi.fn(async () => new Response("ok", { status: 200 }));
+    (globalThis as any).fetch = fetchMock;
+
+    const formData = new FormData();
+    formData.append("email_address", "both@example.com");
+    formData.append("__config", JSON.stringify(config));
+
+    const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+    const res = await handleSubmit(
+      new Request(`${BASE_URL}/api/forms/submit`, {
+        method: "POST",
+        body: formData,
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any;
+    expect(json.ok).toBe(true);
+    expect(json.message).toBe(config.successMessage);
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    const [url, options] = fetchMock.mock.calls[0] as unknown as [string, RequestInit];
+    expect(url).toBe(destinationUrl);
+    expect(options.method).toBe("POST");
+  });
+
+  it("webhook 모드에서 destinationUrl 이 없으면 400 과 destinationUrl_missing 및 errorMessage 가 포함되어야 한다", async () => {
+    const config: FormBlockProps = {
+      kind: "contact",
+      submitTarget: "webhook",
+      // destinationUrl 누락
+      successMessage: "성공 메시지",
+      errorMessage: "Webhook URL 이 설정되지 않았습니다.",
+      fieldIds: [],
+      submitButtonId: null,
+    } as any;
+
+    const formData = new FormData();
+    formData.append("email_address", "missing-destination@example.com");
+    formData.append("__config", JSON.stringify(config));
+
+    const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+    const res = await handleSubmit(
+      new Request(`${BASE_URL}/api/forms/submit`, {
+        method: "POST",
+        body: formData,
+      }),
+    );
+
+    expect(res.status).toBe(400);
+    const json = (await res.json()) as any;
+    expect(json.ok).toBe(false);
+    expect(json.error).toBe("destinationUrl_missing");
+    expect(json.message).toBe(config.errorMessage);
+  });
+
+  it("webhook 모드에서 원격 응답이 실패하면 502 와 webhook_failed, errorMessage 가 포함되어야 한다", async () => {
+    const destinationUrl = `${BASE_URL}/webhook-fail`;
+
+    const config: FormBlockProps = {
+      kind: "contact",
+      submitTarget: "webhook",
+      destinationUrl,
+      method: "POST",
+      headers: {},
+      extraParams: {},
+      successMessage: "성공 메시지",
+      errorMessage: "웹훅 호출이 실패했습니다.",
+      fieldIds: [],
+      submitButtonId: null,
+    };
+
+    const fetchMock = vi.fn(async () => new Response("remote error", { status: 503 }));
+    (globalThis as any).fetch = fetchMock;
+
+    const formData = new FormData();
+    formData.append("email_address", "fail-remote@example.com");
+    formData.append("__config", JSON.stringify(config));
+
+    const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+    const res = await handleSubmit(
+      new Request(`${BASE_URL}/api/forms/submit`, {
+        method: "POST",
+        body: formData,
+      }),
+    );
+
+    expect(res.status).toBe(502);
+    const json = (await res.json()) as any;
+    expect(json.ok).toBe(false);
+    expect(json.error).toBe("webhook_failed");
+    expect(json.message).toBe(config.errorMessage);
+  });
+
+  it("webhook 모드에서 fetch 예외가 발생하면 500 과 webhook_exception, errorMessage 가 포함되어야 한다", async () => {
+    const destinationUrl = `${BASE_URL}/webhook-exception`;
+
+    const config: FormBlockProps = {
+      kind: "contact",
+      submitTarget: "webhook",
+      destinationUrl,
+      method: "POST",
+      headers: {},
+      extraParams: {},
+      successMessage: "성공 메시지",
+      errorMessage: "웹훅 호출 중 예외가 발생했습니다.",
+      fieldIds: [],
+      submitButtonId: null,
+    };
+
+    const fetchMock = vi.fn(async () => {
+      throw new Error("network error");
+    });
+    (globalThis as any).fetch = fetchMock;
+
+    const formData = new FormData();
+    formData.append("email_address", "exception@example.com");
+    formData.append("__config", JSON.stringify(config));
+
+    const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+    const res = await handleSubmit(
+      new Request(`${BASE_URL}/api/forms/submit`, {
+        method: "POST",
+        body: formData,
+      }),
+    );
+
+    expect(res.status).toBe(500);
+    const json = (await res.json()) as any;
+    expect(json.ok).toBe(false);
+    expect(json.error).toBe("webhook_exception");
+    expect(json.message).toBe(config.errorMessage);
+  });
+
+  describe("internal/both 모드의 DB 저장 및 민감정보 암호화", () => {
+    it("internal 모드에서 프로젝트 슬러그와 민감 필드를 포함해 제출하면 FormSubmission 이 암호화/분리된 상태로 저장되어야 한다", async () => {
+      inMemoryProjects.push({
+        id: "proj-1",
+        slug: "project-1",
+        userId: "owner-1",
+      });
+
+      const config: FormBlockProps = {
+        kind: "contact",
+        submitTarget: "internal",
+        successMessage: "성공적으로 전송되었습니다.",
+        errorMessage: "전송 중 오류가 발생했습니다.",
+        fieldIds: [],
+        submitButtonId: null,
+        fields: [
+          { id: "f1", name: "name", type: "text", label: "이름", required: true },
+          { id: "f2", name: "email", type: "email", label: "이메일", required: true },
+          { id: "f3", name: "phone", type: "text", label: "전화번호", required: false },
+          { id: "f4", name: "birth", type: "text", label: "생년월일", required: false },
+          { id: "f5", name: "message", type: "textarea", label: "메시지", required: true },
+        ],
+      };
+
+      const formData = new FormData();
+      formData.append("name", "홍길동");
+      formData.append("email", "test@example.com");
+      formData.append("phone", "010-1234-5678");
+      formData.append("birth", "1990-01-02");
+      formData.append("message", "문의 내용");
+      formData.append("__projectSlug", "project-1");
+      formData.append("__config", JSON.stringify(config));
+
+      const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+      const res = await handleSubmit(
+        new Request(`${BASE_URL}/api/forms/submit`, {
+          method: "POST",
+          body: formData,
+        }),
+      );
+
+      expect(res.status).toBe(200);
+      const json = (await res.json()) as any;
+      expect(json.ok).toBe(true);
+
+      expect(inMemoryFormSubmissions.length).toBe(1);
+      const saved = inMemoryFormSubmissions[0] as any;
+
+      expect(saved.projectSlug).toBe("project-1");
+      expect(saved.projectId).toBe("proj-1");
+      expect(saved.userId).toBe("owner-1");
+
+      expect(saved.payloadJson).toBeTruthy();
+      expect(saved.payloadJson.name).toBe("홍길동");
+      expect(saved.payloadJson.message).toBe("문의 내용");
+      expect(saved.payloadJson.email).toBeUndefined();
+      expect(saved.payloadJson.phone).toBeUndefined();
+      expect(saved.payloadJson.birth).toBeUndefined();
+
+      expect(typeof saved.sensitiveEnc).toBe("string");
+
+      const { decryptJson } = await import("@/features/auth/authCrypto");
+      const sensitive = await decryptJson<Record<string, string>>(saved.sensitiveEnc);
+      expect(sensitive.email).toBe("test@example.com");
+      expect(sensitive.phone).toBe("010-1234-5678");
+      expect(sensitive.birth).toBe("1990-01-02");
+    });
+
+    it("프로젝트를 찾지 못해도 projectSlug 만으로 FormSubmission 이 저장되어야 한다", async () => {
+      const config: FormBlockProps = {
+        kind: "contact",
+        submitTarget: "internal",
+        successMessage: "ok",
+        errorMessage: "err",
+        fieldIds: [],
+        submitButtonId: null,
+      };
+
+      const formData = new FormData();
+      formData.append("email", "no-project@example.com");
+      formData.append("__projectSlug", "unknown-slug");
+      formData.append("__config", JSON.stringify(config));
+
+      const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+      const res = await handleSubmit(
+        new Request(`${BASE_URL}/api/forms/submit`, {
+          method: "POST",
+          body: formData,
+        }),
+      );
+
+      expect(res.status).toBe(200);
+      const json = (await res.json()) as any;
+      expect(json.ok).toBe(true);
+
+      expect(inMemoryFormSubmissions.length).toBe(1);
+      const saved = inMemoryFormSubmissions[0] as any;
+
+      expect(saved.projectSlug).toBe("unknown-slug");
+      expect(saved.projectId ?? null).toBeNull();
+      expect(saved.userId ?? null).toBeNull();
+    });
+
+    it("config.fields 가 비어 있어도 email/phone/birthdate 키는 민감정보로 암호화되어야 한다", async () => {
+      inMemoryProjects.push({
+        id: "proj-2",
+        slug: "project-2",
+        userId: "owner-2",
+      });
+
+      const config: FormBlockProps = {
+        kind: "contact",
+        submitTarget: "internal",
+        successMessage: "ok",
+        errorMessage: "err",
+        fieldIds: [],
+        submitButtonId: null,
+        // fields 를 비워 두고, 실제 FormData 키 이름만으로 민감 필드를 판별하도록 한다.
+      } as any;
+
+      const formData = new FormData();
+      formData.append("name", "홍길동");
+      formData.append("email", "hgd@example.com");
+      formData.append("phone", "010-1111-2222");
+      formData.append("birthdate", "1990-01-01");
+      formData.append("message", "테스트 문의입니다");
+      formData.append("__projectSlug", "project-2");
+      formData.append("__config", JSON.stringify(config));
+
+      const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
+
+      const res = await handleSubmit(
+        new Request(`${BASE_URL}/api/forms/submit`, {
+          method: "POST",
+          body: formData,
+        }),
+      );
+
+      expect(res.status).toBe(200);
+      const json = (await res.json()) as any;
+      expect(json.ok).toBe(true);
+
+      expect(inMemoryFormSubmissions.length).toBe(1);
+      const saved = inMemoryFormSubmissions[0] as any;
+
+      // project 연관 정보
+      expect(saved.projectSlug).toBe("project-2");
+      expect(saved.projectId).toBe("proj-2");
+      expect(saved.userId).toBe("owner-2");
+
+      // payloadJson 에는 비민감 필드만 남아야 한다.
+      expect(saved.payloadJson).toBeTruthy();
+      expect(saved.payloadJson.name).toBe("홍길동");
+      expect(saved.payloadJson.message).toBe("테스트 문의입니다");
+      expect(saved.payloadJson.email).toBeUndefined();
+      expect(saved.payloadJson.phone).toBeUndefined();
+      expect(saved.payloadJson.birthdate).toBeUndefined();
+
+      // 민감 필드는 암호화된 sensitiveEnc 에만 존재해야 한다.
+      expect(typeof saved.sensitiveEnc).toBe("string");
+
+      const { decryptJson } = await import("@/features/auth/authCrypto");
+      const sensitive = await decryptJson<Record<string, string>>(saved.sensitiveEnc);
+      expect(sensitive.email).toBe("hgd@example.com");
+      expect(sensitive.phone).toBe("010-1111-2222");
+      expect(sensitive.birthdate).toBe("1990-01-01");
+    });
+  });
+});

tests/api/projectSubmissions.spec.ts

@@ -0,0 +1,296 @@
+import "dotenv/config";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { signAccessToken } from "@/features/auth/authCrypto";
+
+const BASE_URL = "http://localhost";
+
+const inMemoryProjects: any[] = [];
+const inMemoryFormSubmissions: any[] = [];
+
+vi.mock("@prisma/client", () => {
+  class PrismaClientMock {
+    project = {
+      findUnique: async ({ where: { slug } }: any) => {
+        return inMemoryProjects.find((p) => p.slug === slug) ?? null;
+      },
+    };
+
+    formSubmission = {
+      findMany: async (args: any = {}) => {
+        const where = args.where ?? {};
+        const orderBy = args.orderBy;
+        const take = args.take;
+
+        let items = [...inMemoryFormSubmissions];
+
+        if (where.projectId) {
+          items = items.filter((s) => s.projectId === where.projectId);
+        }
+
+        if (where.userId) {
+          items = items.filter((s) => s.userId === where.userId);
+        }
+
+        if (orderBy?.createdAt === "desc") {
+          items = items.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+        }
+
+        if (typeof take === "number") {
+          items = items.slice(0, take);
+        }
+
+        return items;
+      },
+    };
+  }
+
+  return { PrismaClient: PrismaClientMock };
+});
+
+const TEST_USER = { id: "user-1", email: "submissions@example.com", tokenVersion: 1 };
+const OTHER_USER = { id: "user-2", email: "submissions2@example.com", tokenVersion: 1 };
+
+async function buildAuthHeadersFor(user: { id: string; email: string; tokenVersion: number }) {
+  const token = await signAccessToken(user);
+  return { cookie: `pb_access=${token}` };
+}
+
+async function buildAuthHeaders() {
+  return buildAuthHeadersFor(TEST_USER);
+}
+
+beforeEach(() => {
+  process.env.AUTH_JWT_SECRET = "test-jwt-secret-submissions";
+  process.env.AUTH_ENCRYPTION_KEY = "0123456789abcdef0123456789abcdef";
+  inMemoryProjects.length = 0;
+  inMemoryFormSubmissions.length = 0;
+});
+
+describe("/api/projects/[slug]/submissions", () => {
+  it("로그인한 소유자가 자신의 프로젝트 제출 내역을 조회할 수 있어야 한다", async () => {
+    const project = {
+      id: "proj-1",
+      slug: "project-with-submissions",
+      userId: TEST_USER.id,
+    };
+    inMemoryProjects.push(project);
+
+    const createdAt = new Date();
+    inMemoryFormSubmissions.push({
+      id: "sub-1",
+      projectId: project.id,
+      projectSlug: project.slug,
+      userId: TEST_USER.id,
+      createdAt,
+      payloadJson: { name: "홍길동", message: "문의" },
+      sensitiveEnc: undefined,
+      metaJson: null,
+    });
+
+    const { GET: getSubmissions } = await import("@/app/api/projects/[slug]/submissions/route");
+
+    const headers = await buildAuthHeaders();
+
+    const res = await getSubmissions(
+      new Request(`${BASE_URL}/api/projects/${project.slug}/submissions`, {
+        headers,
+      }),
+      { params: { slug: project.slug } } as any,
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any[];
+    expect(Array.isArray(json)).toBe(true);
+    expect(json.length).toBe(1);
+    expect(json[0].id).toBe("sub-1");
+    expect(json[0].projectSlug).toBe(project.slug);
+    expect(json[0].payload.name).toBe("홍길동");
+    expect(json[0].payload.message).toBe("문의");
+  });
+
+  it("민감정보는 암호화되어 저장되더라도 조회 시 복호화된 값으로 응답 payload 에 포함되어야 한다", async () => {
+    const project = {
+      id: "proj-2",
+      slug: "project-sensitive",
+      userId: TEST_USER.id,
+    };
+    inMemoryProjects.push(project);
+
+    const { encryptJson } = await import("@/features/auth/authCrypto");
+    const sensitive = { email: "test@example.com", phone: "010-0000-0000" };
+    const sensitiveEnc = await encryptJson(sensitive);
+
+    const createdAt = new Date();
+    inMemoryFormSubmissions.push({
+      id: "sub-2",
+      projectId: project.id,
+      projectSlug: project.slug,
+      userId: TEST_USER.id,
+      createdAt,
+      payloadJson: { name: "김철수" },
+      sensitiveEnc,
+      metaJson: null,
+    });
+
+    const { GET: getSubmissions } = await import("@/app/api/projects/[slug]/submissions/route");
+
+    const headers = await buildAuthHeaders();
+
+    const res = await getSubmissions(
+      new Request(`${BASE_URL}/api/projects/${project.slug}/submissions`, {
+        headers,
+      }),
+      { params: { slug: project.slug } } as any,
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any[];
+    expect(json.length).toBe(1);
+    expect(json[0].payload.name).toBe("김철수");
+    expect(json[0].payload.email).toBe("test@example.com");
+    expect(json[0].payload.phone).toBe("010-0000-0000");
+  });
+
+  it("로그인하지 않은 경우 401 을 반환해야 한다", async () => {
+    const { GET: getSubmissions } = await import("@/app/api/projects/[slug]/submissions/route");
+
+    const res = await getSubmissions(
+      new Request(`${BASE_URL}/api/projects/any/submissions`),
+      { params: { slug: "any" } } as any,
+    );
+
+    expect(res.status).toBe(401);
+  });
+
+  it("다른 사용자가 소유한 프로젝트 제출 내역에 접근하면 404 를 반환해야 한다", async () => {
+    const project = {
+      id: "proj-3",
+      slug: "owner-only-project",
+      userId: OTHER_USER.id,
+    };
+    inMemoryProjects.push(project);
+
+    const { GET: getSubmissions } = await import("@/app/api/projects/[slug]/submissions/route");
+
+    const headers = await buildAuthHeaders();
+
+    const res = await getSubmissions(
+      new Request(`${BASE_URL}/api/projects/${project.slug}/submissions`, {
+        headers,
+      }),
+      { params: { slug: project.slug } } as any,
+    );
+
+    expect(res.status).toBe(404);
+  });
+});
+
+describe("/api/projects/submissions", () => {
+  it("로그인한 사용자가 자신의 모든 프로젝트 제출 내역을 조회할 수 있어야 한다", async () => {
+    const project1 = {
+      id: "proj-1",
+      slug: "proj-1-slug",
+      userId: TEST_USER.id,
+    };
+    const project2 = {
+      id: "proj-2",
+      slug: "proj-2-slug",
+      userId: OTHER_USER.id,
+    };
+    inMemoryProjects.push(project1, project2);
+
+    const createdAt = new Date();
+    inMemoryFormSubmissions.push(
+      {
+        id: "sub-1",
+        projectId: project1.id,
+        projectSlug: project1.slug,
+        userId: TEST_USER.id,
+        createdAt,
+        payloadJson: { name: "홍길동" },
+        sensitiveEnc: undefined,
+        metaJson: null,
+      },
+      {
+        id: "sub-2",
+        projectId: project2.id,
+        projectSlug: project2.slug,
+        userId: OTHER_USER.id,
+        createdAt,
+        payloadJson: { name: "다른 유저" },
+        sensitiveEnc: undefined,
+        metaJson: null,
+      },
+    );
+
+    const { GET: getAllSubmissions } = await import("@/app/api/projects/submissions/route");
+
+    const headers = await buildAuthHeaders();
+
+    const res = await getAllSubmissions(
+      new Request(`${BASE_URL}/api/projects/submissions`, {
+        headers,
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any[];
+    expect(Array.isArray(json)).toBe(true);
+    expect(json.length).toBe(1);
+    expect(json[0].id).toBe("sub-1");
+    expect(json[0].projectSlug).toBe(project1.slug);
+    expect(json[0].payload.name).toBe("홍길동");
+  });
+
+  it("민감정보는 전체 조회에서도 복호화된 값으로 payload 에 합쳐져야 한다", async () => {
+    const project = {
+      id: "proj-sensitive",
+      slug: "proj-sensitive",
+      userId: TEST_USER.id,
+    };
+    inMemoryProjects.push(project);
+
+    const { encryptJson } = await import("@/features/auth/authCrypto");
+    const sensitive = { email: "all@example.com", phone: "010-9999-8888" };
+    const sensitiveEnc = await encryptJson(sensitive);
+
+    const createdAt = new Date();
+    inMemoryFormSubmissions.push({
+      id: "sub-sensitive",
+      projectId: project.id,
+      projectSlug: project.slug,
+      userId: TEST_USER.id,
+      createdAt,
+      payloadJson: { name: "전체조회", message: "테스트" },
+      sensitiveEnc,
+      metaJson: null,
+    });
+
+    const { GET: getAllSubmissions } = await import("@/app/api/projects/submissions/route");
+    const headers = await buildAuthHeaders();
+
+    const res = await getAllSubmissions(
+      new Request(`${BASE_URL}/api/projects/submissions`, {
+        headers,
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any[];
+    expect(json.length).toBe(1);
+    expect(json[0].payload.name).toBe("전체조회");
+    expect(json[0].payload.message).toBe("테스트");
+    expect(json[0].payload.email).toBe("all@example.com");
+    expect(json[0].payload.phone).toBe("010-9999-8888");
+  });
+
+  it("로그인하지 않은 경우 401 을 반환해야 한다", async () => {
+    const { GET: getAllSubmissions } = await import("@/app/api/projects/submissions/route");
+
+    const res = await getAllSubmissions(
+      new Request(`${BASE_URL}/api/projects/submissions`),
+    );
+
+    expect(res.status).toBe(401);
+  });
+});

tests/api/projects.spec.ts

@@ -1,10 +1,118 @@
 import "dotenv/config";
-import { describe, it, expect } from "vitest";
-import { POST as createProject } from "@/app/api/projects/route";
-import { GET as getProjectBySlug } from "@/app/api/projects/[slug]/route";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { signAccessToken } from "@/features/auth/authCrypto";
+
+// PrismaClient를 실제 DB 대신 메모리 기반 저장소를 사용하는 목으로 대체한다.
+// 이렇게 하면 CI/로컬 어디에서도 DATABASE_URL 이나 실제 DB 없이 API 테스트를 실행할 수 있다.
+const inMemoryProjects: any[] = [];
+
+vi.mock("@prisma/client", () => {
+  class PrismaClientMock {
+    project = {
+      create: async ({ data }: any) => {
+        const now = new Date();
+        const project = {
+          id: String(inMemoryProjects.length + 1),
+          status: "DRAFT",
+          createdAt: now,
+          updatedAt: now,
+          ...data,
+        };
+        inMemoryProjects.push(project);
+        return project;
+      },
+      findUnique: async ({ where: { slug } }: any) => {
+        return inMemoryProjects.find((p) => p.slug === slug) ?? null;
+      },
+      upsert: async ({ where: { slug }, update, create }: any) => {
+        const index = inMemoryProjects.findIndex((p) => p.slug === slug);
+        if (index >= 0) {
+          const existing = inMemoryProjects[index];
+          const updated = {
+            ...existing,
+            ...update,
+            updatedAt: new Date(),
+          };
+          inMemoryProjects[index] = updated;
+          return updated;
+        }
+
+        const now = new Date();
+        const project = {
+          id: String(inMemoryProjects.length + 1),
+          status: "DRAFT",
+          createdAt: now,
+          updatedAt: now,
+          ...create,
+        };
+        inMemoryProjects.push(project);
+        return project;
+      },
+      delete: async ({ where: { slug } }: any) => {
+        const index = inMemoryProjects.findIndex((p) => p.slug === slug);
+        if (index === -1) {
+          const error: any = new Error("Project not found");
+          error.code = "P2025";
+          throw error;
+        }
+
+        const [removed] = inMemoryProjects.splice(index, 1);
+        return removed;
+      },
+      findMany: async ({ where, orderBy, take, select }: any = {}) => {
+        let items = [...inMemoryProjects];
+
+        if (where?.userId) {
+          items = items.filter((p) => p.userId === where.userId);
+        }
+
+        if (orderBy?.createdAt === "desc") {
+          items.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+        }
+
+        if (typeof take === "number") {
+          items = items.slice(0, take);
+        }
+
+        if (select) {
+          return items.map((p) => {
+            const picked: any = {};
+            for (const key of Object.keys(select)) {
+              if (select[key]) {
+                picked[key] = p[key];
+              }
+            }
+            return picked;
+          });
+        }
+
+        return items;
+      },
+    };
+  }
+
+  return { PrismaClient: PrismaClientMock };
+});
 
 const BASE_URL = "http://localhost";
 
+const TEST_USER = { id: "user-1", email: "projects@example.com", tokenVersion: 1 };
+const OTHER_USER = { id: "user-2", email: "projects2@example.com", tokenVersion: 1 };
+
+async function buildAuthHeadersFor(user: { id: string; email: string; tokenVersion: number }) {
+  const token = await signAccessToken(user);
+  return { cookie: `pb_access=${token}` };
+}
+
+async function buildAuthHeaders() {
+  return buildAuthHeadersFor(TEST_USER);
+}
+
+beforeEach(() => {
+  process.env.AUTH_JWT_SECRET = "test-jwt-secret-projects";
+  inMemoryProjects.length = 0;
+});
+
 describe("/api/projects", () => {
   it("POST /api/projects 로 프로젝트를 생성하고 GET /api/projects/[slug] 로 조회할 수 있어야 한다", async () => {
     const payload = {
@@ -19,10 +127,14 @@ describe("/api/projects", () => {
       ],
     };
 
+    const { POST: createProject } = await import("@/app/api/projects/route");
+
+    const headers = await buildAuthHeaders();
+
     const createResponse = await createProject(
       new Request(`${BASE_URL}/api/projects`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", ...headers },
         body: JSON.stringify(payload),
       }),
     );
@@ -37,8 +149,12 @@ describe("/api/projects", () => {
     expect(created.title).toBe(payload.title);
     expect(created.slug).toBe(payload.slug);
 
+    const { GET: getProjectBySlug } = await import("@/app/api/projects/[slug]/route");
+
+    const getHeaders = await buildAuthHeaders();
+
     const getResponse = await getProjectBySlug(
-      new Request(`${BASE_URL}/api/projects/${payload.slug}`),
+      new Request(`${BASE_URL}/api/projects/${payload.slug}`, { headers: getHeaders }),
       { params: { slug: payload.slug } } as any,
     );
 
@@ -47,4 +163,319 @@ describe("/api/projects", () => {
     expect(fetched.slug).toBe(payload.slug);
     expect(fetched.contentJson).toEqual(payload.contentJson);
   });
+
+  it("GET /api/projects 는 최근 생성 순으로 프로젝트 목록을 반환해야 한다", async () => {
+    const { POST: createProject } = await import("@/app/api/projects/route");
+
+    const firstPayload = {
+      title: "첫 번째 프로젝트",
+      slug: "first-project",
+      contentJson: [],
+    };
+
+    const secondPayload = {
+      title: "두 번째 프로젝트",
+      slug: "second-project",
+      contentJson: [],
+    };
+
+    const headers = await buildAuthHeaders();
+
+    await createProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: JSON.stringify(firstPayload),
+      }),
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 5));
+
+    await createProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: JSON.stringify(secondPayload),
+      }),
+    );
+
+    const { GET: listProjects } = await import("@/app/api/projects/route");
+
+    const listHeaders = await buildAuthHeaders();
+
+    const res = await listProjects(new Request(`${BASE_URL}/api/projects`, { headers: listHeaders }));
+
+    expect(res.status).toBe(200);
+    const list = (await res.json()) as any[];
+
+    expect(list.length).toBeGreaterThanOrEqual(2);
+    expect(list[0].slug).toBe("second-project");
+    expect(list[1].slug).toBe("first-project");
+  });
+
+  it("DELETE /api/projects/[slug] 로 프로젝트를 삭제할 수 있어야 한다", async () => {
+    const { POST: createProject } = await import("@/app/api/projects/route");
+
+    const slug = `delete-slug-${Date.now()}`;
+    const payload = {
+      title: "삭제 테스트 프로젝트",
+      slug,
+      contentJson: [],
+    };
+
+    const headers = await buildAuthHeaders();
+
+    await createProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: JSON.stringify(payload),
+      }),
+    );
+
+    const { DELETE: deleteProject, GET: getProjectBySlug } = await import("@/app/api/projects/[slug]/route");
+
+    const deleteHeaders = await buildAuthHeaders();
+
+    const deleteResponse = await deleteProject(
+      new Request(`${BASE_URL}/api/projects/${slug}`, { method: "DELETE", headers: deleteHeaders }),
+      { params: { slug } } as any,
+    );
+
+    expect(deleteResponse.status).toBe(200);
+
+    const getAfterDelete = await getProjectBySlug(
+      new Request(`${BASE_URL}/api/projects/${slug}`, { headers: deleteHeaders }),
+      { params: { slug } } as any,
+    );
+
+    expect(getAfterDelete.status).toBe(404);
+  });
+
+  it("동일 slug 로 두 번 POST 하면 두 번째 요청은 기존 프로젝트를 업데이트해야 한다", async () => {
+    const { POST: handleProject } = await import("@/app/api/projects/route");
+
+    const slug = "duplicate-slug";
+
+    const firstPayload = {
+      title: "첫 번째 제목",
+      slug,
+      contentJson: [
+        {
+          id: "blk_first",
+          type: "text",
+          props: { text: "첫 번째 내용", align: "left", size: "base" },
+        },
+      ],
+    };
+
+    const secondPayload = {
+      title: "두 번째 제목",
+      slug,
+      contentJson: [
+        {
+          id: "blk_second",
+          type: "text",
+          props: { text: "두 번째 내용", align: "left", size: "base" },
+        },
+      ],
+    };
+
+    const headers = await buildAuthHeaders();
+
+    const firstRes = await handleProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: JSON.stringify(firstPayload),
+      }),
+    );
+
+    expect(firstRes.status).toBe(201);
+
+    const secondRes = await handleProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: JSON.stringify(secondPayload),
+      }),
+    );
+
+    expect([200, 201]).toContain(secondRes.status);
+    const updated = (await secondRes.json()) as any;
+
+    expect(updated.slug).toBe(slug);
+    expect(updated.title).toBe("두 번째 제목");
+    expect(updated.contentJson).toEqual(secondPayload.contentJson);
+  });
+
+  it("GET /api/projects 는 현재 로그인 유저의 프로젝트만 반환해야 한다", async () => {
+    const { POST: createProject, GET: listProjects } = await import("@/app/api/projects/route");
+
+    const slugA = "user-a-project";
+    const slugB = "user-b-project";
+
+    const headersA = await buildAuthHeadersFor(TEST_USER);
+    const headersB = await buildAuthHeadersFor(OTHER_USER);
+
+    const payloadA = {
+      title: "유저 A 프로젝트",
+      slug: slugA,
+      contentJson: [],
+    };
+
+    const payloadB = {
+      title: "유저 B 프로젝트",
+      slug: slugB,
+      contentJson: [],
+    };
+
+    await createProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headersA },
+        body: JSON.stringify(payloadA),
+      }),
+    );
+
+    await createProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headersB },
+        body: JSON.stringify(payloadB),
+      }),
+    );
+
+    const resA = await listProjects(
+      new Request(`${BASE_URL}/api/projects`, { headers: headersA }),
+    );
+    expect(resA.status).toBe(200);
+    const listA = (await resA.json()) as any[];
+    const slugsA = listA.map((p) => p.slug);
+    expect(slugsA).toContain(slugA);
+    expect(slugsA).not.toContain(slugB);
+
+    const resB = await listProjects(
+      new Request(`${BASE_URL}/api/projects`, { headers: headersB }),
+    );
+    expect(resB.status).toBe(200);
+    const listB = (await resB.json()) as any[];
+    const slugsB = listB.map((p) => p.slug);
+    expect(slugsB).toContain(slugB);
+    expect(slugsB).not.toContain(slugA);
+  });
+
+  it("다른 유저가 이미 소유한 slug 로 POST 하면 409 를 반환해야 한다", async () => {
+    const { POST: handleProject } = await import("@/app/api/projects/route");
+
+    const slug = "shared-slug";
+
+    const ownerPayload = {
+      title: "소유자 프로젝트",
+      slug,
+      contentJson: [],
+    };
+
+    const otherPayload = {
+      title: "다른 유저 프로젝트",
+      slug,
+      contentJson: [],
+    };
+
+    const ownerHeaders = await buildAuthHeadersFor(TEST_USER);
+    const otherHeaders = await buildAuthHeadersFor(OTHER_USER);
+
+    const firstRes = await handleProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...ownerHeaders },
+        body: JSON.stringify(ownerPayload),
+      }),
+    );
+    expect(firstRes.status).toBe(201);
+
+    const secondRes = await handleProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...otherHeaders },
+        body: JSON.stringify(otherPayload),
+      }),
+    );
+
+    expect(secondRes.status).toBe(409);
+  });
+  
+  it("GET /api/projects/[slug] 는 소유자가 아닌 유저에게 404 를 반환해야 한다", async () => {
+    const { POST: handleProject } = await import("@/app/api/projects/route");
+    const { GET: getProjectBySlug } = await import("@/app/api/projects/[slug]/route");
+
+    const slug = "owner-only-slug";
+
+    const ownerHeaders = await buildAuthHeadersFor(TEST_USER);
+    const otherHeaders = await buildAuthHeadersFor(OTHER_USER);
+
+    const payload = {
+      title: "소유자 프로젝트",
+      slug,
+      contentJson: [],
+    };
+
+    const createRes = await handleProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...ownerHeaders },
+        body: JSON.stringify(payload),
+      }),
+    );
+    expect(createRes.status).toBe(201);
+
+    const resOther = await getProjectBySlug(
+      new Request(`${BASE_URL}/api/projects/${slug}`, { headers: otherHeaders }),
+      { params: { slug } } as any,
+    );
+    expect(resOther.status).toBe(404);
+
+    const resOwner = await getProjectBySlug(
+      new Request(`${BASE_URL}/api/projects/${slug}`, { headers: ownerHeaders }),
+      { params: { slug } } as any,
+    );
+    expect(resOwner.status).toBe(200);
+  });
+
+  it("DELETE /api/projects/[slug] 는 소유자가 아닌 유저가 호출하면 404 를 반환하고 실제 데이터는 삭제되지 않아야 한다", async () => {
+    const { POST: handleProject } = await import("@/app/api/projects/route");
+    const { DELETE: deleteProject, GET: getProjectBySlug } = await import("@/app/api/projects/[slug]/route");
+
+    const slug = "owner-delete-slug";
+
+    const ownerHeaders = await buildAuthHeadersFor(TEST_USER);
+    const otherHeaders = await buildAuthHeadersFor(OTHER_USER);
+
+    const payload = {
+      title: "삭제 소유자 프로젝트",
+      slug,
+      contentJson: [],
+    };
+
+    const createRes = await handleProject(
+      new Request(`${BASE_URL}/api/projects`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...ownerHeaders },
+        body: JSON.stringify(payload),
+      }),
+    );
+    expect(createRes.status).toBe(201);
+
+    const deleteResOther = await deleteProject(
+      new Request(`${BASE_URL}/api/projects/${slug}`, { method: "DELETE", headers: otherHeaders }),
+      { params: { slug } } as any,
+    );
+    expect(deleteResOther.status).toBe(404);
+
+    const resOwner = await getProjectBySlug(
+      new Request(`${BASE_URL}/api/projects/${slug}`, { headers: ownerHeaders }),
+      { params: { slug } } as any,
+    );
+    expect(resOwner.status).toBe(200);
+  });
 });

tests/api/videoServe.spec.ts

@@ -0,0 +1,82 @@
+import "dotenv/config";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { promises as fs } from "fs";
+import path from "path";
+
+const BASE_URL = "http://localhost";
+
+// /api/video/:id 서브 라우트 TDD
+// - 존재하는 업로드 파일 id 로 GET /api/video/:id 를 호출하면 200 과 비디오 바이트를 반환해야 한다.
+// - 존재하지 않는 id 로 호출하면 404 를 반환해야 한다.
+
+// Prisma 엔진이 실제로 로드되지 않도록 PrismaClient 를 단순 목으로 대체한다.
+vi.mock("@prisma/client", () => {
+  class PrismaClient {
+    asset = {
+      // GET /api/video/:id 에서는 MIME 타입 조회에만 사용되므로, 테스트에서는 null 을 반환한다.
+      findUnique: async () => null,
+    };
+  }
+
+  return { PrismaClient };
+});
+
+describe("/api/video/:id 서브 라우트", () => {
+  const uploadsDir = path.join(process.cwd(), "uploads");
+  let testId: string;
+  let filePath: string;
+
+  beforeEach(async () => {
+    await fs.mkdir(uploadsDir, { recursive: true });
+    testId = `test-video-${Date.now()}`;
+    filePath = path.join(uploadsDir, testId);
+    await fs.writeFile(filePath, Buffer.from("dummy-video-bytes"));
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.unlink(filePath);
+    } catch {
+      // 이미 삭제된 경우는 무시한다.
+    }
+  });
+
+  it("업로드된 비디오 파일이 존재하면 200 과 비디오 바이트를 반환해야 한다", async () => {
+    const { GET: handleGet } = await import("@/app/api/video/[id]/route");
+
+    const requestUrl = `${BASE_URL}/api/video/${testId}`;
+    const res = await handleGet(
+      new Request(requestUrl, {
+        headers: {
+          // Referer 기반 핫링크 방지 로직이 있으므로, 동일 호스트의 referer 를 포함한다.
+          referer: `${BASE_URL}/editor`,
+        },
+      }),
+      // Next 16 타입 정의에서는 context.params 가 Promise 형태이므로, Promise 로 감싼다.
+      { params: Promise.resolve({ id: testId }) } as any,
+    );
+
+    expect(res.status).toBe(200);
+    expect(res.headers.get("Content-Type")).toBe("video/mp4");
+
+    const arrayBuffer = await res.arrayBuffer();
+    const buf = Buffer.from(arrayBuffer);
+    expect(buf.length).toBeGreaterThan(0);
+  });
+
+  it("존재하지 않는 비디오 id 로 요청하면 404 를 반환해야 한다", async () => {
+    const { GET: handleGet } = await import("@/app/api/video/[id]/route");
+
+    const missingId = `missing-${Date.now()}`;
+    const res = await handleGet(
+      new Request(`${BASE_URL}/api/video/${missingId}`, {
+        headers: {
+          referer: `${BASE_URL}/editor`,
+        },
+      }),
+      { params: Promise.resolve({ id: missingId }) } as any,
+    );
+
+    expect(res.status).toBe(404);
+  });
+});

tests/api/videoUpload.spec.ts

@@ -0,0 +1,52 @@
+import "dotenv/config";
+import { describe, it, expect, vi } from "vitest";
+import { promises as fs } from "fs";
+import path from "path";
+
+const BASE_URL = "http://localhost";
+
+// /api/video 업로드 TDD
+// - POST /api/video 로 FormData(file) 를 전송하면 업로드 파일이 uploads 디렉터리에 저장되고
+//   id / servedUrl(`/api/video/:id`) 을 반환해야 한다.
+
+// Prisma 엔진이 실제로 로드되지 않도록 PrismaClient 를 목 처리한다.
+vi.mock("@prisma/client", () => {
+  class PrismaClient {
+    project = {
+      upsert: async () => ({ id: "project-mock" }),
+    };
+
+    asset = {
+      create: async () => ({ id: "asset-mock" }),
+    };
+  }
+
+  return { PrismaClient };
+});
+
+describe("/api/video 업로드", () => {
+  it("POST /api/video 는 업로드된 비디오 파일을 저장하고 id/servedUrl 을 반환해야 한다", async () => {
+    const { POST: handleUpload } = await import("@/app/api/video/route");
+
+    const formData = new FormData();
+    const blob = new Blob(["dummy-video"], { type: "video/mp4" });
+    // FormData 에서는 File/Blob 모두 허용되므로, Blob 을 그대로 사용한다.
+    formData.append("file", blob as any);
+
+    const res = await handleUpload(
+      new Request(`${BASE_URL}/api/video`, {
+        method: "POST",
+        body: formData,
+      }),
+    );
+
+    expect(res.status).toBe(201);
+    const json = (await res.json()) as { id: string; servedUrl?: string | null };
+    expect(json.id).toBeTruthy();
+    expect(json.servedUrl).toBe(`/api/video/${json.id}`);
+
+    const filePath = path.join(process.cwd(), "uploads", json.id);
+    const stat = await fs.stat(filePath);
+    expect(stat.isFile()).toBe(true);
+  });
+});

tests/e2e/auth.spec.ts

@@ -0,0 +1,112 @@
+import { test, expect } from "@playwright/test";
+
+// 인증 라우트 가드 E2E
+// - 비로그인 사용자가 보호된 페이지에 접근하면 /login 으로 리다이렉트되어야 한다.
+
+test("비로그인 사용자가 /projects 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => {
+  // /api/projects 응답을 401 으로 목 처리해 비로그인 상태를 시뮬레이션한다.
+  await page.route("**/api/projects", async (route) => {
+    await route.fulfill({
+      status: 401,
+      contentType: "application/json",
+      body: JSON.stringify({ message: "로그인이 필요합니다." }),
+    });
+  });
+
+  await page.goto("/projects");
+
+  // 최종적으로 로그인 페이지의 헤더가 보여야 한다.
+  await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible();
+});
+
+test("비로그인 사용자가 /editor 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => {
+  // /api/auth/me 를 401 으로 응답하도록 목 처리해 비로그인 상태를 시뮬레이션한다.
+  await page.route("**/api/auth/me", async (route) => {
+    await route.fulfill({
+      status: 401,
+      contentType: "application/json",
+      body: JSON.stringify({ message: "인증이 필요합니다." }),
+    });
+  });
+
+  await page.goto("/editor");
+
+  await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible();
+});
+
+test("비로그인 사용자가 /preview 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => {
+  await page.route("**/api/auth/me", async (route) => {
+    await route.fulfill({
+      status: 401,
+      contentType: "application/json",
+      body: JSON.stringify({ message: "인증이 필요합니다." }),
+    });
+  });
+
+  await page.goto("/preview");
+
+  await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible();
+});
+
+test("회원가입 후에는 /projects, /editor, /preview 에 정상 접근할 수 있어야 한다", async ({ page }) => {
+  const email = `e2e+${Date.now()}@example.com`;
+  const password = "securePass1";
+
+  // 백엔드/DB 에 의존하지 않고 프론트 동작만 검증하기 위해 관련 API 를 모두 목 처리한다.
+  // isLoggedIn 플래그를 두고, 회원가입 전에는 /api/auth/me 가 401 을, 회원가입 후에는 200 을 반환하도록 시뮬레이션한다.
+  let isLoggedIn = false;
+
+  await page.route("**/api/auth/signup", async (route) => {
+    isLoggedIn = true;
+
+    await route.fulfill({
+      status: 201,
+      contentType: "application/json",
+      body: JSON.stringify({ id: "user-1", email }),
+    });
+  });
+
+  await page.route("**/api/auth/me", async (route) => {
+    if (!isLoggedIn) {
+      await route.fulfill({
+        status: 401,
+        contentType: "application/json",
+        body: JSON.stringify({ message: "인증이 필요합니다." }),
+      });
+      return;
+    }
+
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ id: "user-1", email, tokenVersion: 1 }),
+    });
+  });
+
+  await page.route("**/api/projects", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify([]),
+    });
+  });
+
+  // 1) 회원가입
+  await page.goto("/signup");
+
+  await page.getByLabel("이메일").fill(email);
+  await page.getByLabel("비밀번호").fill(password);
+  await page.getByRole("button", { name: "회원가입" }).click();
+
+  // /projects 로 이동했는지, 헤더가 보이는지 확인
+  await expect(page).toHaveURL(/\/projects/);
+  await expect(page.getByRole("heading", { name: "프로젝트 목록" })).toBeVisible();
+
+  // 2) /editor 접근 확인 – 로그인 페이지로 리다이렉트되면 안 된다.
+  await page.goto("/editor");
+  await expect(page.getByRole("heading", { name: "Page Editor" })).toBeVisible();
+
+  // 3) /preview 접근 확인
+  await page.goto("/preview");
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+});

tests/e2e/form-editor-preview-parity.spec.ts

@@ -0,0 +1,359 @@
+import { test, expect } from "@playwright/test";
+
+function parsePx(value: string): number {
+  const n = parseFloat(value || "");
+  return Number.isFinite(n) ? n : 0;
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.route("**/api/auth/me", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ id: "user-form-parity", email: "form-parity@example.com", tokenVersion: 1 }),
+    });
+  });
+});
+
+test("formInput: 에디터 캔버스와 프리뷰에서 높이/패딩/색상이 동일해야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+  const sidebar = page.getByTestId("properties-sidebar");
+
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+
+  await sidebar.getByRole("textbox", { name: "필드 라벨" }).fill("에디터-프리뷰 인풋");
+  await sidebar.getByLabel("텍스트 정렬").selectOption("center");
+  await sidebar.getByRole("combobox", { name: "너비", exact: true }).selectOption("fixed");
+  await sidebar.getByLabel("필드 고정 너비 커스텀 (px)").fill("320");
+  await sidebar.getByLabel("필드 텍스트 색상 HEX").fill("#ff0000");
+  await sidebar.getByLabel("필드 채움 색상 HEX").fill("#00ff88");
+  await sidebar.getByLabel("필드 테두리 색상 HEX").fill("#0000ff");
+
+  const editorInput = canvas.getByRole("textbox", { name: "에디터-프리뷰 인풋" });
+  const editorStyles = await editorInput.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLInputElement);
+    return {
+      height: s.height,
+      paddingTop: s.paddingTop,
+      paddingBottom: s.paddingBottom,
+      fontSize: s.fontSize,
+      color: s.color,
+      backgroundColor: s.backgroundColor,
+      borderColor: s.borderColor,
+      borderRadius: s.borderRadius,
+    };
+  });
+
+  const editorAttrs = await editorInput.evaluate((el) => {
+    const input = el as HTMLInputElement;
+    return {
+      type: input.type,
+      name: input.name,
+      placeholder: input.placeholder,
+    };
+  });
+
+  await Promise.all([
+    page.waitForURL(/\/preview/),
+    page.getByRole("link", { name: "프리뷰 열기" }).click(),
+  ]);
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewInput = page.getByRole("textbox", { name: "에디터-프리뷰 인풋" });
+  const previewStyles = await previewInput.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLInputElement);
+    return {
+      height: s.height,
+      paddingTop: s.paddingTop,
+      paddingBottom: s.paddingBottom,
+      fontSize: s.fontSize,
+      color: s.color,
+      backgroundColor: s.backgroundColor,
+      borderColor: s.borderColor,
+      borderRadius: s.borderRadius,
+    };
+  });
+
+  const editorHeight = parsePx(editorStyles.height);
+  const previewHeight = parsePx(previewStyles.height);
+  expect(Math.abs(previewHeight - editorHeight)).toBeLessThanOrEqual(2);
+
+  const editorPaddingTop = parsePx(editorStyles.paddingTop);
+  const previewPaddingTop = parsePx(previewStyles.paddingTop);
+  expect(Math.abs(previewPaddingTop - editorPaddingTop)).toBeLessThanOrEqual(3);
+
+  const editorPaddingBottom = parsePx(editorStyles.paddingBottom);
+  const previewPaddingBottom = parsePx(previewStyles.paddingBottom);
+  expect(Math.abs(previewPaddingBottom - editorPaddingBottom)).toBeLessThanOrEqual(3);
+
+  expect(previewStyles.fontSize).toBe(editorStyles.fontSize);
+  expect(previewStyles.color).toBe(editorStyles.color);
+  expect(previewStyles.backgroundColor).toBe(editorStyles.backgroundColor);
+  expect(previewStyles.borderColor).toBe(editorStyles.borderColor);
+  expect(previewStyles.borderRadius).toBe(editorStyles.borderRadius);
+
+  const previewAttrs = await previewInput.evaluate((el) => {
+    const input = el as HTMLInputElement;
+    return {
+      type: input.type,
+      name: input.name,
+      placeholder: input.placeholder,
+    };
+  });
+
+  expect(previewAttrs.type).toBe(editorAttrs.type);
+  expect(previewAttrs.placeholder).toBe(editorAttrs.placeholder);
+  expect(previewAttrs.name).toBe(editorAttrs.name);
+});
+
+test("formSelect: 에디터 캔버스와 프리뷰에서 높이/패딩/색상이 동일해야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+  const sidebar = page.getByTestId("properties-sidebar");
+
+  await page.getByRole("button", { name: "셀렉트(Select)" }).click();
+
+  await sidebar.getByRole("textbox", { name: "필드 라벨" }).fill("에디터-프리뷰 셀렉트");
+  await sidebar.getByLabel("필드 너비").selectOption("fixed");
+  await sidebar.getByLabel("필드 고정 너비 커스텀 (px)").fill("360");
+  await sidebar.getByLabel("셀렉트 텍스트 색상 HEX").fill("#ff00ff");
+  await sidebar.getByLabel("셀렉트 채움 색상 HEX").fill("#0033ff");
+  await sidebar.getByLabel("셀렉트 테두리 색상 HEX").fill("#00ffaa");
+
+  const editorSelect = canvas.getByRole("combobox", { name: "에디터-프리뷰 셀렉트" });
+  const editorStyles = await editorSelect.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLSelectElement);
+    return {
+      height: s.height,
+      paddingTop: s.paddingTop,
+      paddingBottom: s.paddingBottom,
+      fontSize: s.fontSize,
+      color: s.color,
+      backgroundColor: s.backgroundColor,
+      borderColor: s.borderColor,
+      borderRadius: s.borderRadius,
+    };
+  });
+
+  const editorSelectAttrs = await editorSelect.evaluate((el) => {
+    const select = el as HTMLSelectElement;
+    return {
+      name: select.name,
+      value: select.value,
+    };
+  });
+
+  await Promise.all([
+    page.waitForURL(/\/preview/),
+    page.getByRole("link", { name: "프리뷰 열기" }).click(),
+  ]);
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewSelect = page.getByRole("combobox", { name: "에디터-프리뷰 셀렉트" });
+  const previewStyles = await previewSelect.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLSelectElement);
+    return {
+      height: s.height,
+      paddingTop: s.paddingTop,
+      paddingBottom: s.paddingBottom,
+      fontSize: s.fontSize,
+      color: s.color,
+      backgroundColor: s.backgroundColor,
+      borderColor: s.borderColor,
+      borderRadius: s.borderRadius,
+    };
+  });
+
+  const editorHeight = parsePx(editorStyles.height);
+  const previewHeight = parsePx(previewStyles.height);
+  expect(Math.abs(previewHeight - editorHeight)).toBeLessThanOrEqual(2);
+
+  const editorPaddingTop = parsePx(editorStyles.paddingTop);
+  const previewPaddingTop = parsePx(previewStyles.paddingTop);
+  expect(Math.abs(previewPaddingTop - editorPaddingTop)).toBeLessThanOrEqual(3);
+
+  const editorPaddingBottom = parsePx(editorStyles.paddingBottom);
+  const previewPaddingBottom = parsePx(previewStyles.paddingBottom);
+  expect(Math.abs(previewPaddingBottom - editorPaddingBottom)).toBeLessThanOrEqual(3);
+
+  expect(previewStyles.fontSize).toBe(editorStyles.fontSize);
+  expect(previewStyles.color).toBe(editorStyles.color);
+  expect(previewStyles.backgroundColor).toBe(editorStyles.backgroundColor);
+  expect(previewStyles.borderColor).toBe(editorStyles.borderColor);
+  expect(previewStyles.borderRadius).toBe(editorStyles.borderRadius);
+
+  const previewSelectAttrs = await previewSelect.evaluate((el) => {
+    const select = el as HTMLSelectElement;
+    return {
+      name: select.name,
+      value: select.value,
+    };
+  });
+
+  expect(previewSelectAttrs.name).toBe(editorSelectAttrs.name);
+  expect(previewSelectAttrs.value).toBe(editorSelectAttrs.value);
+});
+
+test("formCheckbox/formRadio: 에디터 캔버스와 프리뷰에서 그룹 너비/라벨 간격/옵션 간격이 동일해야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+  const sidebar = page.getByTestId("properties-sidebar");
+
+  await page.getByRole("button", { name: "다중 선택(Checkbox)" }).click();
+
+  await sidebar.getByLabel("그룹 타이틀", { exact: true }).fill("에디터-프리뷰 체크 그룹");
+  await sidebar.getByLabel("그룹 타이틀 표시 방식").selectOption("visible");
+  await sidebar.getByLabel(/^레이아웃/).selectOption("inline");
+  await sidebar.getByLabel("라벨/필드 간격 (px) 커스텀 (px)").fill("32");
+  await sidebar.getByLabel("필드 너비").selectOption("fixed");
+  await sidebar.getByLabel("필드 고정 너비 커스텀 (px)").fill("360");
+  await sidebar.getByLabel("체크박스 옵션 간격 (px) 커스텀 (px)").fill("20");
+  const editorCheckboxLabel = canvas.getByText("에디터-프리뷰 체크 그룹");
+  const editorCheckboxData = await editorCheckboxLabel.evaluate((el) => {
+    const groupEl = (el as HTMLElement).parentElement as HTMLElement;
+    const groupStyle = window.getComputedStyle(groupEl);
+    const optionsEl = groupEl.querySelector(".pb-form-options") as HTMLElement | null;
+    const optionsStyle = optionsEl ? window.getComputedStyle(optionsEl) : null;
+    const firstOptionInput = optionsEl?.querySelector("input[type='checkbox']") as
+      | HTMLInputElement
+      | null;
+    const firstOption = firstOptionInput
+      ? { type: firstOptionInput.type, name: firstOptionInput.name, value: firstOptionInput.value }
+      : { type: "", name: "", value: "" };
+    return {
+      groupWidth: groupStyle.width,
+      groupColumnGap: groupStyle.columnGap,
+      optionsRowGap: optionsStyle ? optionsStyle.rowGap : "",
+      firstOption,
+    };
+  });
+
+  await page.getByRole("button", { name: "단일 선택(Radio)" }).click();
+
+  await sidebar.getByLabel("그룹 타이틀", { exact: true }).fill("에디터-프리뷰 라디오 그룹");
+  await sidebar.getByLabel("그룹 타이틀 표시 방식").selectOption("visible");
+  await sidebar.getByLabel("그룹 타이틀 레이아웃").selectOption("inline");
+  await sidebar.getByLabel("라벨/필드 간격 (px) 커스텀 (px)").fill("32");
+  await sidebar.getByLabel("필드 너비").selectOption("fixed");
+  await sidebar.getByLabel("필드 고정 너비 커스텀 (px)").fill("360");
+  await sidebar.getByLabel("라디오 옵션 간격 (px) 커스텀 (px)").fill("20");
+  const editorRadioLabel = canvas.getByText("에디터-프리뷰 라디오 그룹");
+  const editorRadioData = await editorRadioLabel.evaluate((el) => {
+    const groupEl = (el as HTMLElement).parentElement as HTMLElement;
+    const groupStyle = window.getComputedStyle(groupEl);
+    const optionsEl = groupEl.querySelector(".pb-form-options") as HTMLElement | null;
+    const optionsStyle = optionsEl ? window.getComputedStyle(optionsEl) : null;
+    const firstOptionInput = optionsEl?.querySelector("input[type='radio']") as
+      | HTMLInputElement
+      | null;
+    const firstOption = firstOptionInput
+      ? { type: firstOptionInput.type, name: firstOptionInput.name, value: firstOptionInput.value }
+      : { type: "", name: "", value: "" };
+    return {
+      groupWidth: groupStyle.width,
+      groupColumnGap: groupStyle.columnGap,
+      optionsRowGap: optionsStyle ? optionsStyle.rowGap : "",
+      firstOption,
+    };
+  });
+
+  await Promise.all([
+    page.waitForURL(/\/preview/),
+    page.getByRole("link", { name: "프리뷰 열기" }).click(),
+  ]);
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewCheckboxGroup = page.getByTestId("preview-form-checkbox-group").first();
+  const previewCheckboxGroupStyles = await previewCheckboxGroup.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLElement);
+    return {
+      width: s.width,
+      columnGap: s.columnGap,
+    };
+  });
+
+  const previewCheckboxFirstOption = await previewCheckboxGroup.evaluate((el) => {
+    const input = (el as HTMLElement).querySelector("input[type='checkbox']") as
+      | HTMLInputElement
+      | null;
+    return input
+      ? { type: input.type, name: input.name, value: input.value }
+      : { type: "", name: "", value: "" };
+  });
+
+  const previewCheckboxOptions = previewCheckboxGroup
+    .getByTestId("preview-form-checkbox-options")
+    .first();
+  const previewCheckboxOptionsStyles = await previewCheckboxOptions.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLElement);
+    return {
+      rowGap: s.rowGap,
+    };
+  });
+
+  const previewRadioGroup = page.getByTestId("preview-form-radio-group").first();
+  const previewRadioGroupStyles = await previewRadioGroup.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLElement);
+    return {
+      width: s.width,
+      columnGap: s.columnGap,
+    };
+  });
+
+  const previewRadioFirstOption = await previewRadioGroup.evaluate((el) => {
+    const input = (el as HTMLElement).querySelector("input[type='radio']") as
+      | HTMLInputElement
+      | null;
+    return input
+      ? { type: input.type, name: input.name, value: input.value }
+      : { type: "", name: "", value: "" };
+  });
+
+  const previewRadioOptions = previewRadioGroup
+    .getByTestId("preview-form-radio-options")
+    .first();
+  const previewRadioOptionsStyles = await previewRadioOptions.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLElement);
+    return {
+      rowGap: s.rowGap,
+    };
+  });
+
+  const editorCheckboxWidth = parsePx(editorCheckboxData.groupWidth);
+  const previewCheckboxWidth = parsePx(previewCheckboxGroupStyles.width);
+  expect(Math.abs(previewCheckboxWidth - editorCheckboxWidth)).toBeLessThanOrEqual(96);
+
+  const editorCheckboxLabelGap = parsePx(editorCheckboxData.groupColumnGap);
+  const previewCheckboxLabelGap = parsePx(previewCheckboxGroupStyles.columnGap);
+  expect(Math.abs(previewCheckboxLabelGap - editorCheckboxLabelGap)).toBeLessThanOrEqual(8);
+
+  const editorCheckboxOptionGap = parsePx(editorCheckboxData.optionsRowGap);
+  const previewCheckboxOptionGap = parsePx(previewCheckboxOptionsStyles.rowGap);
+  expect(Math.abs(previewCheckboxOptionGap - editorCheckboxOptionGap)).toBeLessThanOrEqual(8);
+
+  const editorRadioWidth = parsePx(editorRadioData.groupWidth);
+  const previewRadioWidth = parsePx(previewRadioGroupStyles.width);
+  expect(Math.abs(previewRadioWidth - editorRadioWidth)).toBeLessThanOrEqual(96);
+
+  const editorRadioLabelGap = parsePx(editorRadioData.groupColumnGap);
+  const previewRadioLabelGap = parsePx(previewRadioGroupStyles.columnGap);
+  expect(Math.abs(previewRadioLabelGap - editorRadioLabelGap)).toBeLessThanOrEqual(2);
+
+  const editorRadioOptionGap = parsePx(editorRadioData.optionsRowGap);
+  const previewRadioOptionGap = parsePx(previewRadioOptionsStyles.rowGap);
+  expect(Math.abs(previewRadioOptionGap - editorRadioOptionGap)).toBeLessThanOrEqual(8);
+
+  expect(editorCheckboxData.firstOption.type).toBe("checkbox");
+  expect(previewCheckboxFirstOption.type).toBe(editorCheckboxData.firstOption.type);
+  expect(previewCheckboxFirstOption.name).toBe(editorCheckboxData.firstOption.name);
+  expect(previewCheckboxFirstOption.value).toBe(editorCheckboxData.firstOption.value);
+
+  expect(editorRadioData.firstOption.type).toBe("radio");
+  expect(previewRadioFirstOption.type).toBe(editorRadioData.firstOption.type);
+  expect(previewRadioFirstOption.name).toBe(editorRadioData.firstOption.name);
+  expect(previewRadioFirstOption.value).toBe(editorRadioData.firstOption.value);
+});

tests/e2e/form-submission-flow.spec.ts

@@ -0,0 +1,260 @@
+import { test, expect } from "@playwright/test";
+
+// E2E: 에디터에서 폼 컨트롤러를 추가해 프로젝트를 저장하고,
+// 프리뷰에서 실제 폼을 제출하면 DB에 저장된 뒤
+// 프로젝트의 "폼 제출 내역" 페이지에서 해당 데이터가 표시되는지 검증한다.
+test("프리뷰 폼 제출 후 제출 내역 페이지에서 데이터가 보여야 한다", async ({ page, request }) => {
+  // 고유한 테스트용 이메일/프로젝트 slug 를 생성한다.
+  const now = Date.now();
+  const email = `form-e2e-${now}@example.com`;
+  const password = "form-e2e-password";
+  const projectSlug = `form-e2e-project-${now}`;
+
+  // 1) 실제 /api/auth/signup API 를 호출해 테스트용 유저를 생성하고,
+  //    응답 헤더의 Set-Cookie 에서 pb_access 토큰 값을 추출한다.
+  const signupRes = await request.post("/api/auth/signup", {
+    headers: { "Content-Type": "application/json" },
+    data: { email, password },
+  });
+
+  // 디버깅용: CI 등에서 500 이 떨어질 때 응답 바디를 함께 로그로 출력해 원인을 파악할 수 있게 한다.
+  const signupStatus = signupRes.status();
+  if (signupStatus !== 201) {
+    // text() 는 한 번만 읽을 수 있으므로, status 체크 이후에만 호출한다.
+    // CI 로그에서 이 메시지를 보고 실제 에러 원인(AUTH_JWT_SECRET, DATABASE_URL, Prisma 오류 등)을 추적한다.
+    console.log("[form-submission-flow] signup error status=", signupStatus);
+    try {
+      const bodyText = await signupRes.text();
+      console.log("[form-submission-flow] signup error body=", bodyText);
+    } catch (e) {
+      console.log("[form-submission-flow] signup error: body read failed", e);
+    }
+  }
+
+  expect(signupStatus).toBe(201);
+
+  const setCookieHeader = signupRes.headers()["set-cookie"];
+  expect(setCookieHeader).toBeTruthy();
+
+  const cookieHeaderString = Array.isArray(setCookieHeader)
+    ? setCookieHeader.join("; ")
+    : (setCookieHeader as string);
+
+  const match = cookieHeaderString.match(/pb_access=([^;]+)/);
+  expect(match).not.toBeNull();
+
+  const accessToken = match![1];
+
+  // 브라우저 컨텍스트에 pb_access 쿠키를 직접 주입해
+  // /api/auth/me, /api/projects, /api/projects/[slug]/submissions 에서
+  // 실제 인증 플로우를 그대로 타도록 한다.
+  await page.context().addCookies([
+    {
+      name: "pb_access",
+      value: accessToken,
+      domain: "localhost",
+      path: "/",
+      httpOnly: true,
+      secure: false,
+      sameSite: "Lax",
+    },
+  ]);
+
+  // 2) 에디터에서 프로젝트 제목/slug 를 설정하고 폼 관련 블록들을 추가한다.
+  await page.goto("/editor");
+
+  const propertiesSidebar = page.getByTestId("properties-sidebar");
+  await propertiesSidebar.getByLabel("프로젝트 제목").fill("E2E 폼 프로젝트");
+  await propertiesSidebar.getByLabel("프로젝트 주소 (slug)").fill(projectSlug);
+
+  // v2 컨트롤러에서는 더 이상 기본 contact 폼이 프리뷰에 임의로 생성되지 않으므로,
+  // 실제 입력 필드 3개와 버튼 1개를 먼저 추가해 두고, 마지막에 FormBlock 을 추가해 매핑한다.
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "버튼" }).click();
+
+  // 마지막으로 "폼 컨트롤러" 블록을 추가하면 해당 블록이 자동으로 선택되어
+  // 우측 속성 패널에 FormControllerPanel 이 표시된다.
+  await page.getByRole("button", { name: "폼 컨트롤러" }).click();
+
+  const fieldMappingGroup = page.getByRole("group", { name: "폼 필드 매핑" });
+  const fieldCheckboxes = fieldMappingGroup.locator("> label > input[type='checkbox']");
+  const fieldCount = await fieldCheckboxes.count();
+  for (let i = 0; i < fieldCount; i += 1) {
+    await fieldCheckboxes.nth(i).check({ force: true });
+  }
+
+  const submitSelect = page.getByRole("combobox", { name: "Submit 버튼" });
+  // 첫 번째 옵션은 "(선택 안 함)" 이므로, 이후 옵션 중 첫 번째 버튼을 선택한다.
+  await submitSelect.selectOption({ index: 1 });
+
+  // 3) "저장 (로컬 + 서버)" 액션으로 프로젝트를 서버에 실제 저장한다.
+  await page.getByRole("button", { name: "메뉴 ▼" }).click();
+  await page.getByRole("button", { name: "프로젝트 저장/불러오기" }).click();
+  await page.getByRole("button", { name: "저장 (로컬 + 서버)" }).click();
+
+  // 저장 후 /projects 페이지로 리다이렉트 되었는지 확인하고,
+  // 방금 저장한 slug 가 목록에 노출되는지 검증한다.
+  await expect(page).toHaveURL(/\/_?projects/);
+  await expect(page.getByText(projectSlug)).toBeVisible();
+
+  // 해당 프로젝트 행에서 "편집" 링크를 클릭해 /editor?slug=... 로 이동한다.
+  const projectRow = page.locator("tr", { hasText: projectSlug }).first();
+  await Promise.all([
+    page.waitForURL(/\/editor/, { timeout: 15000 }),
+    projectRow.getByRole("link", { name: "편집" }).click({ force: true }),
+  ]);
+
+  // 에디터 헤더의 "프리뷰 열기" 링크를 클릭해 프리뷰 페이지로 이동한다.
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+
+  await expect(page).toHaveURL(/\/preview/);
+
+  // 4) 프리뷰 화면의 폼에 값을 입력하고 매핑된 버튼을 클릭한다.
+  const nameValue = "홍길동";
+  const emailValue = `submitted-${now}@example.com`;
+  const messageValue = "E2E 테스트 메시지";
+
+  const textboxes = page.getByTestId("preview-form-input");
+  const inputCount = await textboxes.count();
+  // 최소 이름/이메일 2개 필드는 항상 존재해야 한다.
+  expect(inputCount).toBeGreaterThanOrEqual(2);
+
+  await textboxes.nth(0).fill(nameValue);
+  await textboxes.nth(1).fill(emailValue);
+  if (inputCount >= 3) {
+    await textboxes.nth(2).fill(messageValue);
+  }
+
+  // 프리뷰에는 기본 submit 버튼이 없고, 사용자 버튼 블록이 submit 으로 동작해야 한다.
+  await page.getByRole("link", { name: "버튼" }).click();
+
+  // 폼 제출 성공 메시지가 표시되어야 한다.
+  await expect(page.getByText("성공적으로 전송되었습니다.")).toBeVisible();
+
+  // 5) 프리뷰 헤더의 "프로젝트 목록" 링크를 통해 다시 /projects 로 이동한다.
+  await page.getByRole("link", { name: "프로젝트 목록" }).click();
+  await expect(page).toHaveURL(/\/_?projects/);
+
+  // 동일한 프로젝트 행에서 "폼 제출 내역" 링크를 클릭해 제출 내역 페이지로 이동한다.
+  const submissionsRow = page.locator("tr", { hasText: projectSlug }).first();
+  await submissionsRow.getByRole("link", { name: "폼 제출 내역" }).click();
+
+  // URL 이 /projects/[slug]/submissions 형태인지 확인한다.
+  await expect(page).toHaveURL(new RegExp(`/projects/${projectSlug}/submissions`));
+
+  // 6) 제출 내역 페이지에서 헤더와 slug 가 올바르게 표시되는지 검증한다.
+  await expect(page.getByRole("heading", { name: "폼 제출 내역" })).toBeVisible();
+  await expect(page.getByText(projectSlug)).toBeVisible();
+
+  // 테이블에 방금 제출한 값들이 포함되어 있어야 한다.
+  await expect(page.getByText(nameValue)).toBeVisible();
+  await expect(page.getByText(emailValue)).toBeVisible();
+  if (inputCount >= 3) {
+    await expect(page.getByText(messageValue)).toBeVisible();
+  }
+});
+
+test("퍼블릭 페이지 폼 제출 후 제출 내역 페이지에서 데이터가 보여야 한다", async ({ page, request }) => {
+  const now = Date.now();
+  const email = `public-form-e2e-${now}@example.com`;
+  const password = "public-form-e2e-password";
+  const projectSlug = `public-form-e2e-project-${now}`;
+
+  const signupRes = await request.post("/api/auth/signup", {
+    headers: { "Content-Type": "application/json" },
+    data: { email, password },
+  });
+
+  expect(signupRes.status()).toBe(201);
+
+  const setCookieHeader = signupRes.headers()["set-cookie"];
+  expect(setCookieHeader).toBeTruthy();
+
+  const cookieHeaderString = Array.isArray(setCookieHeader)
+    ? setCookieHeader.join("; ")
+    : (setCookieHeader as string);
+
+  const match = cookieHeaderString.match(/pb_access=([^;]+)/);
+  expect(match).not.toBeNull();
+
+  const accessToken = match![1];
+
+  await page.context().addCookies([
+    {
+      name: "pb_access",
+      value: accessToken,
+      domain: "localhost",
+      path: "/",
+      httpOnly: true,
+      secure: false,
+      sameSite: "Lax",
+    },
+  ]);
+
+  await page.goto("/editor");
+
+  const propertiesSidebar = page.getByTestId("properties-sidebar");
+  await propertiesSidebar.getByLabel("프로젝트 제목").fill("E2E 퍼블릭 폼 프로젝트");
+  await propertiesSidebar.getByLabel("프로젝트 주소 (slug)").fill(projectSlug);
+
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "버튼" }).click();
+  await page.getByRole("button", { name: "폼 컨트롤러" }).click();
+
+  const fieldMappingGroup = page.getByRole("group", { name: "폼 필드 매핑" });
+  const fieldCheckboxes = fieldMappingGroup.locator("> label > input[type='checkbox']");
+  const fieldCount = await fieldCheckboxes.count();
+  for (let i = 0; i < fieldCount; i += 1) {
+    await fieldCheckboxes.nth(i).check({ force: true });
+  }
+
+  const submitSelect = page.getByRole("combobox", { name: "Submit 버튼" });
+  await submitSelect.selectOption({ index: 1 });
+
+  await page.getByRole("button", { name: "메뉴 ▼" }).click();
+  await page.getByRole("button", { name: "프로젝트 저장/불러오기" }).click();
+  await page.getByRole("button", { name: "저장 (로컬 + 서버)" }).click();
+
+  await expect(page).toHaveURL(/\/_?projects/);
+  await expect(page.getByText(projectSlug)).toBeVisible();
+
+  await page.goto(`/p/${projectSlug}`);
+
+  const nameValue = "홍길동";
+  const emailValue = `public-submitted-${now}@example.com`;
+  const messageValue = "퍼블릭 E2E 테스트 메시지";
+
+  const inputs = page.locator("input.pb-input");
+  const inputCount = await inputs.count();
+  expect(inputCount).toBeGreaterThanOrEqual(2);
+
+  await inputs.nth(0).fill(nameValue);
+  await inputs.nth(1).fill(emailValue);
+  if (inputCount >= 3) {
+    await inputs.nth(2).fill(messageValue);
+  }
+
+  await page.getByRole("button", { name: "버튼" }).click();
+
+  await expect(page.getByText("성공적으로 전송되었습니다.")).toBeVisible();
+
+  await page.goto("/projects");
+  await expect(page).toHaveURL(/\/_?projects/);
+
+  const submissionsRow = page.locator("tr", { hasText: projectSlug }).first();
+  await submissionsRow.getByRole("link", { name: "폼 제출 내역" }).click();
+
+  await expect(page).toHaveURL(new RegExp(`/projects/${projectSlug}/submissions`));
+  await expect(page.getByRole("heading", { name: "폼 제출 내역" })).toBeVisible();
+  await expect(page.getByText(projectSlug)).toBeVisible();
+
+  await expect(page.getByText(nameValue)).toBeVisible();
+  await expect(page.getByText(emailValue)).toBeVisible();
+  if (inputCount >= 3) {
+    await expect(page.getByText(messageValue)).toBeVisible();
+  }
+});

tests/e2e/projects.spec.ts

@@ -0,0 +1,225 @@
+import { test, expect } from "@playwright/test";
+
+test("서로 다른 유저는 /projects 에서 자신의 프로젝트만 볼 수 있어야 한다", async ({ page }) => {
+  type Project = {
+    id: string;
+    title: string;
+    slug: string;
+    status: string;
+    createdAt: string;
+    updatedAt: string;
+  };
+
+  let currentUser: "A" | "B" = "A";
+  const projectsA: Project[] = [];
+  const projectsB: Project[] = [];
+  let nextId = 1;
+
+  const nowIso = () => new Date().toISOString();
+
+  await page.route("**/api/auth/me", async (route) => {
+    const email = currentUser === "A" ? "user-a@example.com" : "user-b@example.com";
+    const id = currentUser === "A" ? "user-a" : "user-b";
+
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ id, email, tokenVersion: 1 }),
+    });
+  });
+
+  await page.route("**/api/projects*", async (route) => {
+    const request = route.request();
+    const url = new URL(request.url());
+    const method = request.method();
+
+    const ownerProjects = currentUser === "A" ? projectsA : projectsB;
+    const otherProjects = currentUser === "A" ? projectsB : projectsA;
+
+    if (url.pathname === "/api/projects" && method === "GET") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify(ownerProjects),
+      });
+      return;
+    }
+
+    if (url.pathname === "/api/projects" && method === "POST") {
+      const bodyText = request.postData() ?? "{}";
+      const body = JSON.parse(bodyText) as Partial<Project> & { title?: string; slug?: string };
+      const slug = body.slug ?? "";
+      const title = body.title ?? "";
+
+      const conflict = otherProjects.find((p) => p.slug === slug);
+      if (conflict) {
+        await route.fulfill({
+          status: 409,
+          contentType: "application/json",
+          body: JSON.stringify({ message: "이미 다른 사용자가 사용 중인 프로젝트 주소입니다." }),
+        });
+        return;
+      }
+
+      const existingIndex = ownerProjects.findIndex((p) => p.slug === slug);
+      const now = nowIso();
+
+      let project: Project;
+      if (existingIndex >= 0) {
+        const existing = ownerProjects[existingIndex];
+        project = { ...existing, title: title || existing.title, updatedAt: now };
+        ownerProjects[existingIndex] = project;
+      } else {
+        project = {
+          id: String(nextId++),
+          title: title || "제목 없음",
+          slug,
+          status: "DRAFT",
+          createdAt: now,
+          updatedAt: now,
+        };
+        ownerProjects.push(project);
+      }
+
+      await route.fulfill({
+        status: 201,
+        contentType: "application/json",
+        body: JSON.stringify(project),
+      });
+      return;
+    }
+
+    await route.fulfill({
+      status: 404,
+      contentType: "application/json",
+      body: JSON.stringify({ message: "Not implemented in E2E mock" }),
+    });
+  });
+
+  // 1) 유저 A: 에디터에서 프로젝트를 저장하고, /projects 에서 자신의 프로젝트만 보여야 한다.
+  await page.goto("/editor");
+
+  const propertiesSidebarA = page.getByTestId("properties-sidebar");
+  await propertiesSidebarA.getByLabel("프로젝트 제목").fill("유저 A 프로젝트");
+  await propertiesSidebarA.getByLabel("프로젝트 주소 (slug)").fill("user-a-project");
+
+  await page.getByRole("button", { name: "메뉴 ▼" }).click();
+  await page.getByRole("button", { name: "프로젝트 저장/불러오기" }).click();
+  await page.getByRole("button", { name: "저장 (로컬 + 서버)" }).click();
+
+  await expect(page).toHaveURL(/\/_?projects/);
+  await expect(page.getByText("user-a-project")).toBeVisible();
+  await expect(page.getByText("user-b-project")).toHaveCount(0);
+
+  // 2) 유저 B: currentUser 전환 후 별도 프로젝트를 저장하고, /projects 에서 자신의 것만 보여야 한다.
+  currentUser = "B";
+
+  await page.goto("/editor");
+
+  const propertiesSidebarB = page.getByTestId("properties-sidebar");
+  await propertiesSidebarB.getByLabel("프로젝트 제목").fill("유저 B 프로젝트");
+  await propertiesSidebarB.getByLabel("프로젝트 주소 (slug)").fill("user-b-project");
+
+  await page.getByRole("button", { name: "메뉴 ▼" }).click();
+  await page.getByRole("button", { name: "프로젝트 저장/불러오기" }).click();
+  await page.getByRole("button", { name: "저장 (로컬 + 서버)" }).click();
+
+  await expect(page).toHaveURL(/\/_?projects/);
+  await expect(page.getByText("user-b-project")).toBeVisible();
+  await expect(page.getByText("user-a-project")).toHaveCount(0);
+
+  // 3) 다시 유저 A 로 전환했을 때, /projects 에서는 유저 A 의 프로젝트만 보여야 한다.
+  currentUser = "A";
+
+  await page.goto("/projects");
+
+  await expect(page.getByText("user-a-project")).toBeVisible();
+  await expect(page.getByText("user-b-project")).toHaveCount(0);
+});
+
+test("프로젝트 목록에서 '폼 제출 내역' 링크를 클릭하면 해당 프로젝트의 제출 내역 페이지로 이동해야 한다", async ({ page }) => {
+  // 로그인된 사용자 시나리오를 가정한다.
+  await page.route("**/api/auth/me", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ id: "user-e2e", email: "e2e@example.com", tokenVersion: 1 }),
+    });
+  });
+
+  // /api/projects 응답을 목킹해 목록 페이지에 하나의 프로젝트가 보이도록 한다.
+  await page.route("**/api/projects", async (route) => {
+    const request = route.request();
+    const url = new URL(request.url());
+    const method = request.method();
+
+    if (url.pathname === "/api/projects" && method === "GET") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([
+          {
+            id: "1",
+            title: "테스트 프로젝트 A",
+            slug: "test-project-a",
+            status: "DRAFT",
+            createdAt: new Date("2025-01-01T00:00:00.000Z").toISOString(),
+            updatedAt: new Date("2025-01-01T00:00:00.000Z").toISOString(),
+          },
+        ]),
+      });
+      return;
+    }
+
+    await route.fulfill({
+      status: 404,
+      contentType: "application/json",
+      body: JSON.stringify({ message: "Not implemented in E2E mock" }),
+    });
+  });
+
+  // 선택한 프로젝트의 폼 제출 내역 API 응답도 목킹해, 제출 데이터가 테이블에 렌더링되는지 검증한다.
+  await page.route("**/api/projects/test-project-a/submissions", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify([
+        {
+          id: "sub-1",
+          projectId: "1",
+          userId: "user-e2e",
+          createdAt: new Date("2025-01-02T12:34:56.000Z").toISOString(),
+          payload: {
+            name: "홍길동",
+            email: "user@example.com",
+            phone: "010-1234-5678",
+            birthdate: "1990-01-01",
+            message: "안녕하세요",
+          },
+        },
+      ]),
+    });
+  });
+
+  // 프로젝트 목록 페이지로 이동한다.
+  await page.goto("/projects");
+
+  // 목록에 테스트 프로젝트가 보여야 한다.
+  await expect(page.getByText("테스트 프로젝트 A")).toBeVisible();
+  await expect(page.getByText("test-project-a")).toBeVisible();
+
+  // 액션 영역의 "폼 제출 내역" 링크를 클릭하면 제출 내역 페이지로 이동해야 한다.
+  await page.getByRole("link", { name: "폼 제출 내역" }).click();
+
+  await expect(page).toHaveURL(/\/projects\/test-project-a\/submissions/);
+
+  // 제출 내역 페이지의 헤더와 slug, 제출 데이터가 렌더링되어야 한다.
+  await expect(page.getByRole("heading", { name: "폼 제출 내역" })).toBeVisible();
+  await expect(page.getByText("test-project-a")).toBeVisible();
+
+  await expect(page.getByText("홍길동")).toBeVisible();
+  await expect(page.getByText("user@example.com")).toBeVisible();
+  await expect(page.getByText("010-1234-5678")).toBeVisible();
+  await expect(page.getByText("1990-01-01")).toBeVisible();
+  await expect(page.getByText("message: 안녕하세요")).toBeVisible();
+});

tests/fixtures/sample-image.png

@@ -0,0 +1 @@
+PNG TEST FIXTURE