Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jaybe
|
bd6be2fb97 |
+15
-67
@@ -5,6 +5,9 @@ on:
|
||||
branches:
|
||||
- main
|
||||
- feature/**
|
||||
pull_request:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
test:
|
||||
@@ -14,78 +17,27 @@ jobs:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: npm
|
||||
|
||||
- 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: Install Playwright browsers
|
||||
run: |
|
||||
npx playwright install --with-deps
|
||||
|
||||
- name: Run Playwright E2E tests
|
||||
run: npm run e2e
|
||||
run: |
|
||||
npx playwright test
|
||||
|
||||
pr_and_merge:
|
||||
needs: test
|
||||
@@ -94,11 +46,6 @@ jobs:
|
||||
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 }}
|
||||
@@ -155,3 +102,4 @@ jobs:
|
||||
-H "Authorization: token $CI_TOKEN" \
|
||||
"$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls/$pr_number/merge" \
|
||||
-d "$merge_payload" || true
|
||||
# CI 테스트용 더미 주석
|
||||
|
||||
@@ -12,7 +12,6 @@ node_modules/
|
||||
# Playwright
|
||||
playwright-report/
|
||||
blob-report/
|
||||
test-results/
|
||||
|
||||
# Docker
|
||||
**/.DS_Store
|
||||
@@ -20,8 +19,5 @@ test-results/
|
||||
# Plans (exclude from Git)
|
||||
메인플랜.md
|
||||
최초플랜.md
|
||||
MAIN_PLAN.md
|
||||
|
||||
/src/generated/prisma
|
||||
|
||||
uploads/
|
||||
Generated
+2
-256
@@ -12,11 +12,7 @@
|
||||
"@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",
|
||||
@@ -28,9 +24,6 @@
|
||||
"@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",
|
||||
@@ -2793,13 +2786,6 @@
|
||||
"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",
|
||||
@@ -2839,34 +2825,6 @@
|
||||
"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",
|
||||
@@ -3953,12 +3911,6 @@
|
||||
"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",
|
||||
@@ -4027,12 +3979,6 @@
|
||||
"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",
|
||||
@@ -4315,12 +4261,6 @@
|
||||
"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",
|
||||
@@ -4614,15 +4554,6 @@
|
||||
"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",
|
||||
@@ -6051,12 +5982,6 @@
|
||||
"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",
|
||||
@@ -6094,12 +6019,6 @@
|
||||
"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",
|
||||
@@ -6689,28 +6608,6 @@
|
||||
"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",
|
||||
@@ -6727,39 +6624,6 @@
|
||||
"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",
|
||||
@@ -6804,15 +6668,6 @@
|
||||
"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",
|
||||
@@ -7133,42 +6988,6 @@
|
||||
"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",
|
||||
@@ -7176,12 +6995,6 @@
|
||||
"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",
|
||||
@@ -7225,15 +7038,6 @@
|
||||
"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",
|
||||
@@ -7346,6 +7150,7 @@
|
||||
"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": {
|
||||
@@ -7750,12 +7555,6 @@
|
||||
"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",
|
||||
@@ -8027,12 +7826,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"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",
|
||||
@@ -8140,27 +7933,6 @@
|
||||
"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",
|
||||
@@ -8405,12 +8177,6 @@
|
||||
"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",
|
||||
@@ -8476,6 +8242,7 @@
|
||||
"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"
|
||||
@@ -8533,12 +8300,6 @@
|
||||
"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",
|
||||
@@ -8777,15 +8538,6 @@
|
||||
"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",
|
||||
@@ -9475,12 +9227,6 @@
|
||||
"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",
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"start:e2e": "next start -p 3000",
|
||||
"lint": "next lint",
|
||||
"test": "vitest run",
|
||||
"e2e": "playwright test"
|
||||
@@ -19,11 +18,7 @@
|
||||
"@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",
|
||||
@@ -35,9 +30,6 @@
|
||||
"@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",
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { defineConfig, devices } from "@playwright/test";
|
||||
|
||||
const isCI = !!process.env.CI;
|
||||
|
||||
export default defineConfig({
|
||||
testDir: "./tests/e2e",
|
||||
timeout: 30_000,
|
||||
@@ -18,12 +16,4 @@ 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,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
-- 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;
|
||||
@@ -1,19 +0,0 @@
|
||||
-- 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;
|
||||
+2
-34
@@ -5,8 +5,8 @@
|
||||
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
|
||||
|
||||
generator client {
|
||||
provider = "prisma-client-js"
|
||||
binaryTargets = ["native", "linux-musl-arm64-openssl-3.0.x"]
|
||||
provider = "prisma-client"
|
||||
output = "../src/generated/prisma"
|
||||
}
|
||||
|
||||
datasource db {
|
||||
@@ -24,25 +24,6 @@ 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 {
|
||||
@@ -61,16 +42,3 @@ 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())
|
||||
}
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
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 },
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
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 });
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
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 },
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,220 +0,0 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { PrismaClient } from "@prisma/client";
|
||||
import { verifyAccessToken } from "@/features/auth/authCrypto";
|
||||
|
||||
// 대시보드 개요 API (/api/dashboard/overview)
|
||||
// - 로그인한 사용자의 프로젝트/폼 제출 통계를 집계해 요약/프로젝트별 지표를 반환한다.
|
||||
// - DB 스키마: Project, FormSubmission
|
||||
// - 인증: pb_access 쿠키(JWT)를 검증해 현재 사용자 식별
|
||||
|
||||
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,
|
||||
};
|
||||
}
|
||||
|
||||
interface SummaryStats {
|
||||
totalProjects: number;
|
||||
totalSubmissions: number;
|
||||
todaySubmissions: number;
|
||||
last7DaysSubmissions: number;
|
||||
}
|
||||
|
||||
interface DailySubmissionItem {
|
||||
// 일별 제출 수 그래프를 위한 집계 데이터
|
||||
date: string; // YYYY-MM-DD (UTC 기준)
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface ProjectStatsItem {
|
||||
projectId: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
status: string;
|
||||
totalSubmissions: number;
|
||||
lastSubmissionAt: string | null;
|
||||
}
|
||||
|
||||
// GET /api/dashboard/overview
|
||||
// - 현재 로그인 사용자의 프로젝트 목록/폼 제출 내역을 조회해 통계를 계산한다.
|
||||
export async function GET(request: Request) {
|
||||
const authUser = await getAuthUserFromRequest(request);
|
||||
if (!authUser) {
|
||||
return NextResponse.json(
|
||||
{ message: "대시보드를 조회하려면 로그인이 필요합니다." },
|
||||
{ status: 401 },
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
// 현재 사용자 소유 프로젝트와, 해당 사용자가 소유한 제출 내역을 한 번에 로드한다.
|
||||
const [projects, submissions] = await Promise.all([
|
||||
prisma.project.findMany({
|
||||
where: { userId: authUser.id },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
slug: true,
|
||||
status: true,
|
||||
},
|
||||
}),
|
||||
prisma.formSubmission.findMany({
|
||||
where: { userId: authUser.id },
|
||||
select: {
|
||||
id: true,
|
||||
projectId: true,
|
||||
projectSlug: true,
|
||||
createdAt: true,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
|
||||
const totalProjects = projects.length;
|
||||
const totalSubmissions = submissions.length;
|
||||
|
||||
// 오늘/최근 7일 기준 시각 계산
|
||||
const now = new Date();
|
||||
const startOfToday = new Date(now);
|
||||
startOfToday.setHours(0, 0, 0, 0);
|
||||
const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
|
||||
|
||||
let todaySubmissions = 0;
|
||||
let last7DaysSubmissions = 0;
|
||||
|
||||
for (const submission of submissions) {
|
||||
const createdAt = submission.createdAt instanceof Date
|
||||
? submission.createdAt
|
||||
: new Date(submission.createdAt as unknown as string);
|
||||
|
||||
if (createdAt >= startOfToday) {
|
||||
todaySubmissions += 1;
|
||||
}
|
||||
|
||||
if (createdAt >= sevenDaysAgo) {
|
||||
last7DaysSubmissions += 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 프로젝트별 통계 맵을 구성한다.
|
||||
const statsByProjectId = new Map<
|
||||
string,
|
||||
{
|
||||
projectId: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
status: string;
|
||||
totalSubmissions: number;
|
||||
lastSubmissionAt: Date | null;
|
||||
}
|
||||
>();
|
||||
|
||||
for (const project of projects) {
|
||||
statsByProjectId.set(project.id, {
|
||||
projectId: project.id,
|
||||
title: project.title,
|
||||
slug: project.slug,
|
||||
status: project.status,
|
||||
totalSubmissions: 0,
|
||||
lastSubmissionAt: null,
|
||||
});
|
||||
}
|
||||
|
||||
for (const submission of submissions) {
|
||||
const stat = submission.projectId ? statsByProjectId.get(submission.projectId) : null;
|
||||
if (!stat) continue;
|
||||
|
||||
stat.totalSubmissions += 1;
|
||||
|
||||
const createdAt = submission.createdAt instanceof Date
|
||||
? submission.createdAt
|
||||
: new Date(submission.createdAt as unknown as string);
|
||||
|
||||
if (!stat.lastSubmissionAt || createdAt > stat.lastSubmissionAt) {
|
||||
stat.lastSubmissionAt = createdAt;
|
||||
}
|
||||
}
|
||||
|
||||
const projectStats: ProjectStatsItem[] = Array.from(statsByProjectId.values()).map((item) => ({
|
||||
projectId: item.projectId,
|
||||
title: item.title,
|
||||
slug: item.slug,
|
||||
status: item.status,
|
||||
totalSubmissions: item.totalSubmissions,
|
||||
lastSubmissionAt: item.lastSubmissionAt ? item.lastSubmissionAt.toISOString() : null,
|
||||
}));
|
||||
|
||||
const summaryStats: SummaryStats = {
|
||||
totalProjects,
|
||||
totalSubmissions,
|
||||
todaySubmissions,
|
||||
last7DaysSubmissions,
|
||||
};
|
||||
|
||||
// 일별 전체 제출 수를 집계해 그래프용 데이터로 변환한다.
|
||||
const countsByDate = new Map<string, number>();
|
||||
|
||||
for (const submission of submissions) {
|
||||
const createdAt = submission.createdAt instanceof Date
|
||||
? submission.createdAt
|
||||
: new Date(submission.createdAt as unknown as string);
|
||||
|
||||
const dateKey = createdAt.toISOString().slice(0, 10); // YYYY-MM-DD
|
||||
const prev = countsByDate.get(dateKey) ?? 0;
|
||||
countsByDate.set(dateKey, prev + 1);
|
||||
}
|
||||
|
||||
const dailySubmissions: DailySubmissionItem[] = Array.from(countsByDate.entries())
|
||||
.map(([date, count]) => ({ date, count }))
|
||||
.sort((a, b) => a.date.localeCompare(b.date));
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
summaryStats,
|
||||
projectStats,
|
||||
dailySubmissions,
|
||||
},
|
||||
{ status: 200 },
|
||||
);
|
||||
} catch (error: any) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
message: "대시보드 데이터를 계산하는 중 오류가 발생했습니다.",
|
||||
error: error?.message,
|
||||
},
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
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",
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,915 +0,0 @@
|
||||
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, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
|
||||
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 =
|
||||
typeof projectConfig?.bodyBgColorHex === "string" ? projectConfig.bodyBgColorHex.trim() : "";
|
||||
const bodyBgPart = bodyBgRaw ? `background-color:${bodyBgRaw};` : "";
|
||||
const bodyStyle = `${bodyBgPart}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";
|
||||
const cssVars: string[] = [];
|
||||
if (isFloating && typeof props.paddingY === "number" && props.paddingY >= 0) {
|
||||
const em = props.paddingY / 16;
|
||||
cssVars.push(`--pb-input-padding-y:${em}rem`);
|
||||
}
|
||||
|
||||
// strokeColorCustom 이 있으면 플로팅 라벨 패치 색으로 사용할 CSS 변수에 전달한다.
|
||||
if (typeof props.strokeColorCustom === "string" && props.strokeColorCustom.trim() !== "") {
|
||||
cssVars.push(`--pb-input-border-color:${escapeAttr(props.strokeColorCustom.trim())}`);
|
||||
}
|
||||
|
||||
const fieldStyleAttr = cssVars.length > 0 ? ` style="${cssVars.join(";")}"` : "";
|
||||
|
||||
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`,
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,262 +0,0 @@
|
||||
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 });
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
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 });
|
||||
}
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
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 });
|
||||
}
|
||||
}
|
||||
@@ -1,100 +1,24 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { PrismaClient } from "@prisma/client";
|
||||
import { verifyAccessToken } from "@/features/auth/authCrypto";
|
||||
import { PrismaClient } from "@/generated/prisma/client";
|
||||
|
||||
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,
|
||||
interface Params {
|
||||
params: {
|
||||
slug: string;
|
||||
};
|
||||
}
|
||||
|
||||
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;
|
||||
export async function GET(_request: Request, { params }: Params) {
|
||||
const { slug } = params;
|
||||
|
||||
const project = await prisma.project.findUnique({
|
||||
where: { slug },
|
||||
});
|
||||
|
||||
if (!project || (project.userId && project.userId !== authUser.id)) {
|
||||
if (!project) {
|
||||
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 },
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
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 });
|
||||
}
|
||||
@@ -1,82 +1,9 @@
|
||||
import { NextResponse } from "next/server";
|
||||
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";
|
||||
import { PrismaClient } from "@/generated/prisma/client";
|
||||
|
||||
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;
|
||||
|
||||
@@ -85,49 +12,14 @@ export async function POST(request: Request) {
|
||||
}
|
||||
|
||||
try {
|
||||
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: {
|
||||
const project = await prisma.project.create({
|
||||
data: {
|
||||
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(
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
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 });
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
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 });
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
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 });
|
||||
}
|
||||
}
|
||||
@@ -1,361 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
|
||||
|
||||
// 대시보드 페이지 (/dashboard)
|
||||
// - /api/dashboard/overview 에서 요약/프로젝트별 통계를 가져와 카드 형태로 렌더링한다.
|
||||
// - 비로그인(401) 응답 시 로그인 페이지로 리다이렉트하고 에러 메시지를 표시한다.
|
||||
|
||||
interface SummaryStats {
|
||||
totalProjects: number;
|
||||
totalSubmissions: number;
|
||||
todaySubmissions: number;
|
||||
last7DaysSubmissions: number;
|
||||
}
|
||||
|
||||
interface DailySubmissionItem {
|
||||
// 일별 제출 수 그래프를 위한 집계 데이터
|
||||
date: string; // YYYY-MM-DD
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface ProjectStatsItem {
|
||||
projectId: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
status: string;
|
||||
totalSubmissions: number;
|
||||
lastSubmissionAt: string | null;
|
||||
}
|
||||
|
||||
type PageStatus = "idle" | "loading" | "error";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter();
|
||||
const locale = useAppLocale();
|
||||
const t = getDashboardMessages(locale);
|
||||
|
||||
const [summary, setSummary] = useState<SummaryStats | null>(null);
|
||||
const [projects, setProjects] = useState<ProjectStatsItem[]>([]);
|
||||
const [dailySubmissions, setDailySubmissions] = useState<DailySubmissionItem[]>([]);
|
||||
const [status, setStatus] = useState<PageStatus>("idle");
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
// 마운트 시 대시보드 개요 데이터를 불러온다.
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
setStatus("loading");
|
||||
setErrorMessage(null);
|
||||
|
||||
const res = await fetch("/api/dashboard/overview");
|
||||
|
||||
if (!res.ok) {
|
||||
if (cancelled) return;
|
||||
|
||||
if (res.status === 401) {
|
||||
setStatus("error");
|
||||
setErrorMessage(t.errorUnauthorized);
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("error");
|
||||
setErrorMessage(t.errorGeneric);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = (await res.json()) as {
|
||||
summaryStats: SummaryStats;
|
||||
projectStats: ProjectStatsItem[];
|
||||
dailySubmissions?: DailySubmissionItem[];
|
||||
};
|
||||
|
||||
if (cancelled) return;
|
||||
|
||||
setSummary(data.summaryStats ?? null);
|
||||
setProjects(Array.isArray(data.projectStats) ? data.projectStats : []);
|
||||
setDailySubmissions(
|
||||
Array.isArray(data.dailySubmissions) ? data.dailySubmissions : [],
|
||||
);
|
||||
setStatus("idle");
|
||||
setErrorMessage(null);
|
||||
} catch {
|
||||
if (!cancelled) {
|
||||
setStatus("error");
|
||||
setErrorMessage(t.errorGeneric);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
void load();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
const safeSummary: SummaryStats =
|
||||
summary ?? {
|
||||
totalProjects: 0,
|
||||
totalSubmissions: 0,
|
||||
todaySubmissions: 0,
|
||||
last7DaysSubmissions: 0,
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/auth/logout", {
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
return;
|
||||
}
|
||||
|
||||
router.push("/login");
|
||||
} catch {
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleTheme = () => {
|
||||
if (typeof document === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
const root = document.documentElement;
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
root.classList.toggle("dark");
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{t.title}</h1>
|
||||
<p className="text-sm text-slate-500 mt-1 dark:text-slate-400">{t.description}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
aria-current="page"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-semibold bg-sky-600 text-white shadow-sm hover:bg-sky-700"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navDashboard}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
|
||||
>
|
||||
<FolderKanban className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navProjects}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects/submissions"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-emerald-700 hover:bg-emerald-50 hover:text-emerald-800 dark:text-emerald-200 dark:hover:bg-emerald-900/60 dark:hover:text-emerald-100"
|
||||
>
|
||||
<ListChecks className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navSubmissions}</span>
|
||||
</Link>
|
||||
</nav>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={handleToggleTheme}
|
||||
>
|
||||
<SunMoon className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.themeToggleLabel}</span>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
{t.menuLabel}
|
||||
</button>
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full px-3 py-2 text-left text-xs text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
setIsMenuOpen(false);
|
||||
void handleLogout();
|
||||
}}
|
||||
>
|
||||
{t.logoutLabel}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="flex-1 px-6 py-4 space-y-4 overflow-auto bg-slate-50/60 dark:bg-transparent">
|
||||
{status === "error" && errorMessage && (
|
||||
<p className="text-xs text-red-500 dark:text-red-300">{errorMessage}</p>
|
||||
)}
|
||||
|
||||
{status === "loading" && (
|
||||
<p className="text-xs text-slate-400">{t.loadingText}</p>
|
||||
)}
|
||||
|
||||
{/* 상단 요약 위젯 영역 */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
|
||||
<div
|
||||
data-testid="dashboard-summary-total-projects"
|
||||
className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
|
||||
{t.summaryTotalProjectsLabel}
|
||||
</span>
|
||||
<span className="text-2xl font-bold tracking-tight">{safeSummary.totalProjects}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-testid="dashboard-summary-total-submissions"
|
||||
className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
|
||||
{t.summaryTotalSubmissionsLabel}
|
||||
</span>
|
||||
<span className="text-2xl font-bold tracking-tight">{safeSummary.totalSubmissions}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-testid="dashboard-summary-today-submissions"
|
||||
className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
|
||||
{t.summaryTodaySubmissionsLabel}
|
||||
</span>
|
||||
<span className="text-2xl font-bold tracking-tight">{safeSummary.todaySubmissions}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-testid="dashboard-summary-last7days-submissions"
|
||||
className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
|
||||
{t.summaryLast7DaysSubmissionsLabel}
|
||||
</span>
|
||||
<span className="text-2xl font-bold tracking-tight">{safeSummary.last7DaysSubmissions}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 일별 제출 수 간단 그래프 영역 */}
|
||||
<div
|
||||
data-testid="dashboard-daily-chart"
|
||||
className="mt-2 rounded-xl border border-slate-200 bg-white/80 px-4 py-3 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<div className="flex items-baseline justify-between mb-2">
|
||||
<h2 className="text-sm font-semibold text-slate-800 dark:text-slate-200">{t.chartTitle}</h2>
|
||||
<span className="text-[10px] text-slate-500 dark:text-slate-500">{t.chartSubtitle}</span>
|
||||
</div>
|
||||
|
||||
{dailySubmissions.length === 0 ? (
|
||||
<p className="text-[11px] text-slate-500 dark:text-slate-400">{t.chartEmptyLabel}</p>
|
||||
) : (
|
||||
<div className="flex items-end gap-2 text-[10px]">
|
||||
{dailySubmissions.map((item) => (
|
||||
<div
|
||||
key={item.date}
|
||||
data-testid="dashboard-daily-chart-bar"
|
||||
className="flex flex-col items-center gap-1"
|
||||
>
|
||||
<div
|
||||
className="w-6 rounded-t bg-emerald-500/80"
|
||||
style={{ height: `${Math.max(8, item.count * 12)}px` }}
|
||||
/>
|
||||
<span className="text-slate-700 font-semibold dark:text-slate-300">{item.count}</span>
|
||||
<span className="text-slate-500 dark:text-slate-500">{item.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 프로젝트 카드 리스트 영역 */}
|
||||
<div className="mt-2">
|
||||
<h2 className="text-base font-semibold mb-2 text-slate-800 dark:text-slate-100">
|
||||
{t.sectionProjectsTitle}
|
||||
</h2>
|
||||
|
||||
{projects.length === 0 && status === "idle" && !errorMessage && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{t.sectionProjectsEmpty}</p>
|
||||
)}
|
||||
|
||||
{projects.length > 0 && (
|
||||
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.map((project) => {
|
||||
const lastSubmitted = project.lastSubmissionAt
|
||||
? new Date(project.lastSubmissionAt).toLocaleString()
|
||||
: t.projectLatestSubmissionEmpty;
|
||||
|
||||
return (
|
||||
<article
|
||||
key={project.projectId}
|
||||
data-testid="dashboard-project-card"
|
||||
className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<div className="flex items-baseline justify-between gap-2">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-50">{project.title}</h3>
|
||||
<p className="text-[11px] text-slate-500 font-mono dark:text-slate-400">{project.slug}</p>
|
||||
</div>
|
||||
<span className="text-[10px] px-2 py-0.5 rounded-full border border-slate-300 bg-slate-50 text-slate-700 dark:border-slate-700 dark:bg-transparent dark:text-slate-300">
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-1 flex items-center justify-between text-[11px] text-slate-700 dark:text-slate-300">
|
||||
<span>
|
||||
{t.projectTotalSubmissionsPrefix}
|
||||
<span className="font-semibold">{project.totalSubmissions}</span>
|
||||
{t.projectTotalSubmissionsSuffix}
|
||||
</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">
|
||||
{t.projectLatestSubmissionPrefix} {lastSubmitted}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex items-center gap-2 text-[11px]">
|
||||
<Link
|
||||
href={`/projects/${encodeURIComponent(project.slug)}/submissions`}
|
||||
className="text-emerald-700 hover:text-emerald-900 underline-offset-2 hover:underline dark:text-emerald-300 dark:hover:text-emerald-100"
|
||||
>
|
||||
{t.projectViewSubmissionsLink}
|
||||
</Link>
|
||||
<Link
|
||||
href={`/p/${encodeURIComponent(project.slug)}`}
|
||||
className="text-sky-700 hover:text-sky-900 underline-offset-2 hover:underline dark:text-sky-300 dark:hover:text-sky-200"
|
||||
>
|
||||
{t.projectOpenPublicPageLink}
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,166 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorCanvasMessages } from "@/features/i18n/messages/editorCanvas";
|
||||
|
||||
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 locale = useAppLocale();
|
||||
const m = getEditorCanvasMessages(locale);
|
||||
|
||||
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 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">
|
||||
{m.emptyStateHint}
|
||||
</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;
|
||||
}
|
||||
|
||||
export function EditorCanvasDragPreview({ block }: DragPreviewProps) {
|
||||
if (!block) return null;
|
||||
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorCanvasMessages(locale);
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none rounded border border-sky-500 bg-white px-3 py-2 text-xs text-slate-900 shadow-lg opacity-90 min-w-[160px] max-w-[260px] dark:bg-slate-900 dark:text-slate-100">
|
||||
<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 || m.previewFallbackTextBlock
|
||||
: block.type === "button"
|
||||
? (block.props as ButtonBlockProps).label || m.previewFallbackButtonBlock
|
||||
: block.type === "image"
|
||||
? (block.props as ImageBlockProps).alt || m.previewFallbackImageBlock
|
||||
: block.type === "list"
|
||||
? m.previewFallbackListBlock
|
||||
: block.type === "divider"
|
||||
? m.previewFallbackDividerBlock
|
||||
: m.previewFallbackSectionBlock}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DragPreview({ block }: DragPreviewProps) {
|
||||
return <EditorCanvasDragPreview block={block} />;
|
||||
}
|
||||
@@ -1,664 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorFormCheckboxPanelMessages } from "@/features/i18n/messages/editorFormCheckboxPanel";
|
||||
|
||||
interface FormCheckboxPropertiesPanelProps {
|
||||
block: Block;
|
||||
selectedBlockId: string | null;
|
||||
updateBlock: (id: string, partial: any) => void;
|
||||
}
|
||||
|
||||
export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBlock }: FormCheckboxPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorFormCheckboxPanelMessages(locale);
|
||||
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-800 dark:text-slate-200">{m.sectionTitle}</h3>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.groupTitleTypeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.groupLabelMode ?? "text"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
groupLabelMode: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="text">{m.groupTitleTypeOptionText}</option>
|
||||
<option value="image">{m.groupTitleTypeOptionImage}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.groupTitleDisplayLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={groupLabelDisplay}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
groupLabelDisplay: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="visible">{m.groupTitleDisplayOptionVisible}</option>
|
||||
<option value="hidden">{m.groupTitleDisplayOptionHidden}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{groupLabelDisplay === "visible" && (
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>{m.layoutLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.labelLayout ?? "stacked"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelLayout: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="stacked">{m.layoutOptionStacked}</option>
|
||||
<option value="inline">{m.layoutOptionInline}</option>
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>{m.optionLayoutLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.optionLayout ?? "stacked"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
optionLayout: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="stacked">{m.layoutOptionStacked}</option>
|
||||
<option value="inline">{m.layoutOptionInline}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{groupLabelDisplay === "visible" && (checkboxProps.labelLayout ?? "stacked") === "inline" && (
|
||||
<NumericPropertyControl
|
||||
label={m.labelGapLabel}
|
||||
unitLabel="(px)"
|
||||
value={typeof checkboxProps.labelGapPx === "number" ? checkboxProps.labelGapPx : 8}
|
||||
min={0}
|
||||
max={80}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "tight", label: "Tight", value: 4 },
|
||||
{ id: "normal", label: "Normal", value: 8 },
|
||||
{ id: "relaxed", label: "Relaxed", value: 12 },
|
||||
{ id: "extra", label: "Extra", value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelGapPx: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.groupTitleLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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">{m.groupTitleImageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={source}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
groupLabelImageSource: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="url">{m.groupTitleImageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.groupTitleImageSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{source === "url" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-400">{m.groupTitleImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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">{m.groupTitleImageUploadLabel}</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={m.groupTitleImageUploadAria}
|
||||
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-500 dark:text-slate-400">{m.submitKeyLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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-500 dark:text-slate-400">{m.optionsLabel}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
const next = Array.isArray((checkboxProps as any).options)
|
||||
? [...(checkboxProps as any).options]
|
||||
: [];
|
||||
next.push({
|
||||
label: "New option",
|
||||
value: `option_${next.length + 1}`,
|
||||
});
|
||||
updateBlock(selectedBlockId, {
|
||||
options: next,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
{m.addOptionButtonLabel}
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.optionImageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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">{m.optionImageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.optionImageSourceOptionUpload}</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="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-1">
|
||||
<input
|
||||
className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.optionLabelPlaceholder}
|
||||
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-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.optionValuePlaceholder}
|
||||
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-300 bg-white text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-red-900/60 dark: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-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.optionImageUrlPlaceholder}
|
||||
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-500 dark:text-slate-400">{m.optionImageUploadLabel}</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={m.optionImageUploadAria}
|
||||
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">{m.requiredNoticeText}</span>
|
||||
</label>
|
||||
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
{/* px 기반 체크박스 타이포 입력값을 노출하여 em 스케일 변환을 위한 근거를 남긴다 */}
|
||||
<NumericPropertyControl
|
||||
label={m.textSizeLabel}
|
||||
unitLabel={m.textSizeUnitLabel}
|
||||
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={m.lineHeightLabel}
|
||||
unitLabel={m.lineHeightUnitLabel}
|
||||
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: "Tight", value: 18 },
|
||||
{ id: "normal", label: "Normal", value: 24 },
|
||||
{ id: "loose", label: "Loose", value: 32 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
lineHeightCustom: `${v}px`,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
{/* 자간 px 입력을 통한 폼 체크박스 미세 조정값을 노출 */}
|
||||
<NumericPropertyControl
|
||||
label={m.letterSpacingLabel}
|
||||
unitLabel={m.letterSpacingUnitLabel}
|
||||
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: "Tight", value: -1 },
|
||||
{ id: "normal", label: "Normal", value: 0 },
|
||||
{ id: "wide", label: "Wide", value: 2 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
letterSpacingCustom: `${v}px`,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-400">
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.widthMode ?? "full"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthMode: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">{m.widthModeOptionAuto}</option>
|
||||
<option value="full">{m.widthModeOptionFull}</option>
|
||||
<option value="fixed">{m.widthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
{(checkboxProps.widthMode ?? "full") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
value={checkboxProps.widthPx ?? 240}
|
||||
min={80}
|
||||
max={800}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: "Small", value: 200 },
|
||||
{ id: "md", label: "Medium", value: 280 },
|
||||
{ id: "lg", label: "Large", value: 360 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthPx: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<NumericPropertyControl
|
||||
label={m.paddingXLabel}
|
||||
unitLabel={m.paddingXUnitLabel}
|
||||
value={typeof checkboxProps.paddingX === "number" ? checkboxProps.paddingX : 12}
|
||||
min={0}
|
||||
max={60}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "xs", label: "Extra thin", value: 6 },
|
||||
{ id: "sm", label: "Thin", value: 10 },
|
||||
{ id: "md", label: "Normal", value: 12 },
|
||||
{ id: "lg", label: "Wide", value: 16 },
|
||||
{ id: "xl", label: "Extra wide", value: 20 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
paddingX: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label={m.paddingYLabel}
|
||||
unitLabel={m.paddingYUnitLabel}
|
||||
value={typeof checkboxProps.paddingY === "number" ? checkboxProps.paddingY : 10}
|
||||
min={0}
|
||||
max={40}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "xs", label: "Extra thin", value: 6 },
|
||||
{ id: "sm", label: "Thin", value: 8 },
|
||||
{ id: "md", label: "Normal", value: 10 },
|
||||
{ id: "lg", label: "Wide", value: 12 },
|
||||
{ id: "xl", label: "Extra wide", value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
paddingY: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label={m.optionGapLabel}
|
||||
unitLabel={m.optionGapUnitLabel}
|
||||
value={typeof checkboxProps.optionGapPx === "number" ? checkboxProps.optionGapPx : 4}
|
||||
min={0}
|
||||
max={40}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "tight", label: "Tight", value: 2 },
|
||||
{ id: "normal", label: "Normal", value: 4 },
|
||||
{ id: "relaxed", label: "Relaxed", value: 8 },
|
||||
{ id: "extra", label: "Extra", value: 12 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
optionGapPx: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
checkboxProps.textColorCustom && checkboxProps.textColorCustom.trim() !== ""
|
||||
? checkboxProps.textColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
textColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
textColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label={m.fillColorLabel}
|
||||
ariaLabelColorInput={m.fillColorPickerAria}
|
||||
ariaLabelHexInput={m.fillColorHexAria}
|
||||
value={
|
||||
checkboxProps.fillColorCustom && checkboxProps.fillColorCustom.trim() !== ""
|
||||
? checkboxProps.fillColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
fillColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
fillColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label={m.strokeColorLabel}
|
||||
ariaLabelColorInput={m.strokeColorPickerAria}
|
||||
ariaLabelHexInput={m.strokeColorHexAria}
|
||||
value={
|
||||
checkboxProps.strokeColorCustom && checkboxProps.strokeColorCustom.trim() !== ""
|
||||
? checkboxProps.strokeColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strokeColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strokeColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label={m.borderRadiusLabel}
|
||||
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: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 4 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, 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>
|
||||
);
|
||||
}
|
||||
@@ -1,434 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorFormControllerPanelMessages } from "@/features/i18n/messages/editorFormControllerPanel";
|
||||
|
||||
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 locale = useAppLocale();
|
||||
const m = getEditorFormControllerPanelMessages(locale);
|
||||
|
||||
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">
|
||||
{m.introTextPrefix}
|
||||
<code className="font-mono text-[11px]">/api/forms/submit</code>
|
||||
{m.introTextSuffix}
|
||||
</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.submitTargetLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={formProps.submitTarget ?? "internal"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
submitTarget: e.target.value as FormBlockProps["submitTarget"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="internal">{m.submitTargetOptionInternal}</option>
|
||||
<option value="webhook">{m.submitTargetOptionWebhook}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{formProps.submitTarget === "webhook" && (
|
||||
<div className="space-y-3">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.webhookUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.webhookUrlPlaceholder}
|
||||
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-500 dark:text-slate-400">{m.payloadFormatLabel}</span>
|
||||
<select
|
||||
className="w-40 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={formProps.payloadFormat ?? "form"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
payloadFormat: e.target.value as any,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="form">{m.payloadFormatOptionForm}</option>
|
||||
<option value="json">{m.payloadFormatOptionJson}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex items-center justify-between gap-2">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.httpMethodLabel}</span>
|
||||
<select
|
||||
className="w-28 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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-500 dark:text-slate-400">{m.authTokenLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.authTokenPlaceholder}
|
||||
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-500 dark:text-slate-400">{m.extraParamsLabel}</span>
|
||||
<textarea
|
||||
className="w-full h-16 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.extraParamsPlaceholder}
|
||||
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-300 bg-white px-2 py-1 text-[11px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={() => setShowSheetsGuide(true)}
|
||||
>
|
||||
{m.sheetsGuideButtonLabel}
|
||||
</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-800 dark:text-slate-200">{m.layoutSectionTitle}</h3>
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<span>{m.formWidthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={formProps.formWidthMode ?? "auto"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
formWidthMode: e.target.value as FormBlockProps["formWidthMode"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">{m.formWidthModeOptionAuto}</option>
|
||||
<option value="full">{m.formWidthModeOptionFull}</option>
|
||||
<option value="fixed">{m.formWidthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(formProps.formWidthMode ?? "auto") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label={m.formFixedWidthLabel}
|
||||
unitLabel="(px)"
|
||||
value={typeof formProps.formWidthPx === "number" ? formProps.formWidthPx : 480}
|
||||
min={160}
|
||||
max={1200}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: m.formFixedWidthPresetNarrow, value: 320 },
|
||||
{ id: "md", label: m.formFixedWidthPresetNormal, value: 480 },
|
||||
{ id: "lg", label: m.formFixedWidthPresetWide, value: 640 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
formWidthPx: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<NumericPropertyControl
|
||||
label={m.marginYLabel}
|
||||
unitLabel="(px)"
|
||||
value={typeof formProps.marginYPx === "number" ? formProps.marginYPx : 24}
|
||||
min={0}
|
||||
max={160}
|
||||
step={4}
|
||||
presets={[
|
||||
{ id: "none", label: m.marginYPresetNone, value: 0 },
|
||||
{ id: "compact", label: m.marginYPresetCompact, value: 16 },
|
||||
{ id: "normal", label: m.marginYPresetNormal, value: 24 },
|
||||
{ id: "spacious", label: m.marginYPresetSpacious, 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-800 dark:text-slate-200">{m.messagesSectionTitle}</h3>
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<span>{m.successMessageLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.successMessagePlaceholder}
|
||||
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-500 dark:text-slate-400">
|
||||
<span>{m.errorMessageLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.errorMessagePlaceholder}
|
||||
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-800 dark:text-slate-200">{m.controllerSectionTitle}</h3>
|
||||
|
||||
<fieldset className="space-y-2" aria-label={m.fieldMappingAriaLabel}>
|
||||
<legend className="text-[11px] text-slate-400 mb-1">{m.fieldMappingLegend}</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-800 dark:text-slate-200"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3 w-3 rounded border border-slate-300 bg-white text-slate-900 dark:border-slate-600 dark:bg-slate-900"
|
||||
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 border-slate-300 bg-white text-slate-900 dark:border-slate-600 dark:bg-slate-900"
|
||||
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>{m.requiredLabel}</span>
|
||||
</label>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</fieldset>
|
||||
|
||||
<div className="space-y-1">
|
||||
<span className="text-[11px] text-slate-400">{m.submitButtonLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.submitButtonAriaLabel}
|
||||
value={formProps.submitButtonId ?? ""}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
submitButtonId: e.target.value || null,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="">{m.submitButtonNoneOptionLabel}</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-black/60">
|
||||
<div className="w-full max-w-xl rounded border border-slate-200 bg-white px-4 py-3 text-xs text-slate-900 shadow-lg dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h4 className="text-[11px] font-semibold">{m.sheetsGuideHeading}</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[11px] text-slate-400 hover:text-slate-100"
|
||||
onClick={() => setShowSheetsGuide(false)}
|
||||
aria-label={m.sheetsGuideCloseAriaLabel}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||
{m.sheetsGuideIntro}
|
||||
</p>
|
||||
<ol className="list-decimal list-inside space-y-1 text-[11px] text-slate-400 mt-2">
|
||||
<li>{m.sheetsGuideStep1}</li>
|
||||
<li>{m.sheetsGuideStep2}</li>
|
||||
<li>{m.sheetsGuideStep3}</li>
|
||||
</ol>
|
||||
<div className="mt-2 space-y-1">
|
||||
<span className="text-[11px] text-slate-500 dark:text-slate-400">{m.sheetsGuideExampleCodeLabel}</span>
|
||||
<textarea
|
||||
className="w-full h-40 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
readOnly
|
||||
value={sheetsScriptExample}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,435 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorFormInputPanelMessages } from "@/features/i18n/messages/editorFormInputPanel";
|
||||
|
||||
interface FormInputPropertiesPanelProps {
|
||||
block: Block;
|
||||
selectedBlockId: string | null;
|
||||
updateBlock: (id: string, partial: any) => void;
|
||||
}
|
||||
|
||||
export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }: FormInputPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorFormInputPanelMessages(locale);
|
||||
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-800 dark:text-slate-200">{m.sectionTitle}</h3>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.labelTypeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={inputProps.labelMode ?? "text"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelMode: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="text">{m.labelTypeOptionText}</option>
|
||||
<option value="image">{m.labelTypeOptionImage}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.fieldLabelLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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-500 dark:text-slate-400">{m.labelDisplayLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={labelDisplay}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelDisplay: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="visible">{m.labelDisplayOptionVisible}</option>
|
||||
<option value="hidden">{m.labelDisplayOptionHidden}</option>
|
||||
<option value="floating">{m.labelDisplayOptionFloating}</option>
|
||||
</select>
|
||||
</label>
|
||||
{labelDisplay === "visible" && (
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>{m.layoutLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={inputProps.labelLayout ?? "stacked"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelLayout: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="stacked">{m.layoutOptionStacked}</option>
|
||||
<option value="inline">{m.layoutOptionInline}</option>
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
{labelDisplay === "visible" && (inputProps.labelLayout ?? "stacked") === "inline" && (
|
||||
<NumericPropertyControl
|
||||
label={m.labelGapLabel}
|
||||
unitLabel={m.labelGapUnitLabel}
|
||||
value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8}
|
||||
min={0}
|
||||
max={80}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "tight", label: "Tight", value: 4 },
|
||||
{ id: "normal", label: "Normal", value: 8 },
|
||||
{ id: "relaxed", label: "Relaxed", value: 12 },
|
||||
{ id: "extra", label: "Extra", value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelGapPx: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{inputProps.labelMode === "image" && (
|
||||
<>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.labelImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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-500 dark:text-slate-400">{m.labelImageAltLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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-500 dark:text-slate-400">{m.submitKeyLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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-500 dark:text-slate-400">{m.fieldTypeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.fieldTypeAria}
|
||||
value={inputProps.inputType ?? "text"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
inputType: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="text">{m.fieldTypeOptionText}</option>
|
||||
<option value="email">{m.fieldTypeOptionEmail}</option>
|
||||
<option value="textarea">{m.fieldTypeOptionTextarea}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.placeholderLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.placeholderAria}
|
||||
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 dark:text-slate-400">{m.requiredNoticeText}</span>
|
||||
</label>
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
<NumericPropertyControl
|
||||
label={m.textSizeLabel}
|
||||
unitLabel={m.textSizeUnitLabel}
|
||||
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={m.lineHeightLabel}
|
||||
unitLabel={m.lineHeightUnitLabel}
|
||||
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: "Tight", value: 18 },
|
||||
{ id: "normal", label: "Normal", value: 24 },
|
||||
{ id: "loose", label: "Loose", value: 32 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
lineHeightCustom: `${v}px`,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
{/* 자간 px 입력으로 폼 입력 타이포를 세밀하게 조정 */}
|
||||
<NumericPropertyControl
|
||||
label={m.letterSpacingLabel}
|
||||
unitLabel={m.letterSpacingUnitLabel}
|
||||
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: "Tight", value: -1 },
|
||||
{ id: "normal", label: "Normal", value: 0 },
|
||||
{ id: "wide", label: "Wide", value: 2 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
letterSpacingCustom: `${v}px`,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>{m.textAlignLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={inputProps.align ?? "left"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
align: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="left">{m.textAlignOptionLeft}</option>
|
||||
<option value="center">{m.textAlignOptionCenter}</option>
|
||||
<option value="right">{m.textAlignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.widthModeAria}
|
||||
value={inputProps.widthMode ?? "full"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthMode: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">{m.widthModeOptionAuto}</option>
|
||||
<option value="full">{m.widthModeOptionFull}</option>
|
||||
<option value="fixed">{m.widthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
<NumericPropertyControl
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
value={inputProps.widthPx ?? 240}
|
||||
min={80}
|
||||
max={800}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: "Small", value: 200 },
|
||||
{ id: "md", label: "Medium", value: 280 },
|
||||
{ id: "lg", label: "Large", value: 360 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
widthPx: v,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label={m.paddingXLabel}
|
||||
unitLabel={m.paddingXUnitLabel}
|
||||
value={typeof inputProps.paddingX === "number" ? inputProps.paddingX : 12}
|
||||
min={0}
|
||||
max={60}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "xs", label: "Extra thin", value: 6 },
|
||||
{ id: "sm", label: "Thin", value: 10 },
|
||||
{ id: "md", label: "Normal", value: 12 },
|
||||
{ id: "lg", label: "Wide", value: 16 },
|
||||
{ id: "xl", label: "Extra wide", value: 20 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
paddingX: v,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label={m.paddingYLabel}
|
||||
unitLabel={m.paddingYUnitLabel}
|
||||
value={typeof inputProps.paddingY === "number" ? inputProps.paddingY : 10}
|
||||
min={0}
|
||||
max={40}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "xs", label: "Extra thin", value: 6 },
|
||||
{ id: "sm", label: "Thin", value: 8 },
|
||||
{ id: "md", label: "Normal", value: 10 },
|
||||
{ id: "lg", label: "Wide", value: 12 },
|
||||
{ id: "xl", label: "Extra wide", value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
paddingY: v,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
inputProps.textColorCustom && inputProps.textColorCustom.trim() !== ""
|
||||
? inputProps.textColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
textColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
textColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label={m.fillColorLabel}
|
||||
ariaLabelColorInput={m.fillColorPickerAria}
|
||||
ariaLabelHexInput={m.fillColorHexAria}
|
||||
value={
|
||||
inputProps.fillColorCustom && inputProps.fillColorCustom.trim() !== ""
|
||||
? inputProps.fillColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
fillColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
fillColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label={m.strokeColorLabel}
|
||||
ariaLabelColorInput={m.strokeColorPickerAria}
|
||||
ariaLabelHexInput={m.strokeColorHexAria}
|
||||
value={
|
||||
inputProps.strokeColorCustom && inputProps.strokeColorCustom.trim() !== ""
|
||||
? inputProps.strokeColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strokeColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strokeColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label={m.borderRadiusLabel}
|
||||
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: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 4 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, 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>
|
||||
);
|
||||
}
|
||||
@@ -1,673 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorFormRadioPanelMessages } from "@/features/i18n/messages/editorFormRadioPanel";
|
||||
|
||||
interface FormRadioPropertiesPanelProps {
|
||||
block: Block;
|
||||
selectedBlockId: string | null;
|
||||
updateBlock: (id: string, partial: any) => void;
|
||||
}
|
||||
|
||||
export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }: FormRadioPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorFormRadioPanelMessages(locale);
|
||||
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-800 dark:text-slate-200">{m.sectionTitle}</h3>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.groupTitleTypeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={radioProps.groupLabelMode ?? "text"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
groupLabelMode: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="text">{m.groupTitleTypeOptionText}</option>
|
||||
<option value="image">{m.groupTitleTypeOptionImage}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.groupTitleDisplayLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={groupLabelDisplay}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
groupLabelDisplay: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="visible">{m.groupTitleDisplayOptionVisible}</option>
|
||||
<option value="hidden">{m.groupTitleDisplayOptionHidden}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{groupLabelDisplay === "visible" && (
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>{m.layoutLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={radioProps.labelLayout ?? "stacked"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelLayout: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="stacked">{m.layoutOptionStacked}</option>
|
||||
<option value="inline">{m.layoutOptionInline}</option>
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>{m.optionLayoutLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={radioProps.optionLayout ?? "stacked"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
optionLayout: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="stacked">{m.optionLayoutOptionStacked}</option>
|
||||
<option value="inline">{m.optionLayoutOptionInline}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{groupLabelDisplay === "visible" && (radioProps.labelLayout ?? "stacked") === "inline" && (
|
||||
<NumericPropertyControl
|
||||
label={m.labelGapLabel}
|
||||
unitLabel="(px)"
|
||||
value={typeof radioProps.labelGapPx === "number" ? radioProps.labelGapPx : 8}
|
||||
min={0}
|
||||
max={80}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "tight", label: "Tight", value: 4 },
|
||||
{ id: "normal", label: "Normal", value: 8 },
|
||||
{ id: "relaxed", label: "Relaxed", value: 12 },
|
||||
{ id: "extra", label: "Extra", value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelGapPx: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.groupTitleLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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">{m.groupTitleImageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={source}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
groupLabelImageSource: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="url">{m.groupTitleImageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.groupTitleImageSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{source === "url" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-400">{m.groupTitleImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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">{m.groupTitleImageUploadLabel}</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={m.groupTitleImageUploadAria}
|
||||
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-500 dark:text-slate-400">{m.submitKeyLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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-500 dark:text-slate-400">{m.optionsLabel}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-red-900/60 dark:hover:border-red-700"
|
||||
onClick={() => {
|
||||
const next = Array.isArray((radioProps as any).options)
|
||||
? [...(radioProps as any).options]
|
||||
: [];
|
||||
next.push({
|
||||
label: "New option",
|
||||
value: `option_${next.length + 1}`,
|
||||
});
|
||||
updateBlock(selectedBlockId, {
|
||||
options: next,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
{m.addOptionButtonLabel}
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.optionImageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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">{m.optionImageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.optionImageSourceOptionUpload}</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="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-1">
|
||||
<input
|
||||
className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.optionLabelPlaceholder}
|
||||
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-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.optionValuePlaceholder}
|
||||
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-300 bg-white text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-red-900/60 dark: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-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.optionImageUrlPlaceholder}
|
||||
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-500 dark:text-slate-400">{m.optionImageUploadLabel}</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={m.optionImageUploadAria}
|
||||
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">{m.requiredNoticeText}</span>
|
||||
</label>
|
||||
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
|
||||
<NumericPropertyControl
|
||||
label={m.textSizeLabel}
|
||||
unitLabel={m.textSizeUnitLabel}
|
||||
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);
|
||||
}}
|
||||
/>
|
||||
|
||||
<NumericPropertyControl
|
||||
label={m.lineHeightLabel}
|
||||
unitLabel={m.lineHeightUnitLabel}
|
||||
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: "Tight", value: 18 },
|
||||
{ id: "normal", label: "Normal", value: 24 },
|
||||
{ id: "loose", label: "Loose", value: 32 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
lineHeightCustom: `${v}px`,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
<NumericPropertyControl
|
||||
label={m.letterSpacingLabel}
|
||||
unitLabel={m.letterSpacingUnitLabel}
|
||||
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: "Tight", value: -1 },
|
||||
{ id: "normal", label: "Normal", value: 0 },
|
||||
{ id: "wide", label: "Wide", value: 2 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
letterSpacingCustom: `${v}px`,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-400">
|
||||
<span>Field width</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={radioProps.widthMode ?? "full"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthMode: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">Auto</option>
|
||||
<option value="full">Full width</option>
|
||||
<option value="fixed">Fixed width</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(radioProps.widthMode ?? "full") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="Field fixed width"
|
||||
unitLabel="(px)"
|
||||
value={radioProps.widthPx ?? 240}
|
||||
min={80}
|
||||
max={800}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: "Small", value: 200 },
|
||||
{ id: "md", label: "Medium", value: 280 },
|
||||
{ id: "lg", label: "Large", value: 360 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
widthPx: v,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<NumericPropertyControl
|
||||
label={m.paddingXLabel}
|
||||
unitLabel={m.paddingXUnitLabel}
|
||||
value={typeof radioProps.paddingX === "number" ? radioProps.paddingX : 12}
|
||||
min={0}
|
||||
max={60}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "xs", label: "Extra small", value: 6 },
|
||||
{ id: "sm", label: "Small", value: 10 },
|
||||
{ id: "md", label: "Medium", value: 12 },
|
||||
{ id: "lg", label: "Large", value: 16 },
|
||||
{ id: "xl", label: "Extra large", value: 20 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
paddingX: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
|
||||
<NumericPropertyControl
|
||||
label={m.paddingYLabel}
|
||||
unitLabel={m.paddingYUnitLabel}
|
||||
value={typeof radioProps.paddingY === "number" ? radioProps.paddingY : 10}
|
||||
min={0}
|
||||
max={40}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "xs", label: "Extra small", value: 6 },
|
||||
{ id: "sm", label: "Small", value: 8 },
|
||||
{ id: "md", label: "Medium", value: 10 },
|
||||
{ id: "lg", label: "Large", value: 12 },
|
||||
{ id: "xl", label: "Extra large", value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
paddingY: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
|
||||
<NumericPropertyControl
|
||||
label={m.optionGapLabel}
|
||||
unitLabel={m.optionGapUnitLabel}
|
||||
value={typeof radioProps.optionGapPx === "number" ? radioProps.optionGapPx : 4}
|
||||
min={0}
|
||||
max={40}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "tight", label: "Tight", value: 2 },
|
||||
{ id: "normal", label: "Normal", value: 4 },
|
||||
{ id: "relaxed", label: "Relaxed", value: 8 },
|
||||
{ id: "extra", label: "Extra", value: 12 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
optionGapPx: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
|
||||
<ColorPickerField
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
radioProps.textColorCustom && radioProps.textColorCustom.trim() !== ""
|
||||
? radioProps.textColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
textColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
textColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorPickerField
|
||||
label={m.fillColorLabel}
|
||||
ariaLabelColorInput={m.fillColorPickerAria}
|
||||
ariaLabelHexInput={m.fillColorHexAria}
|
||||
value={
|
||||
radioProps.fillColorCustom && radioProps.fillColorCustom.trim() !== ""
|
||||
? radioProps.fillColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
fillColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
fillColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorPickerField
|
||||
label={m.strokeColorLabel}
|
||||
ariaLabelColorInput={m.strokeColorPickerAria}
|
||||
ariaLabelHexInput={m.strokeColorHexAria}
|
||||
value={
|
||||
radioProps.strokeColorCustom && radioProps.strokeColorCustom.trim() !== ""
|
||||
? radioProps.strokeColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strokeColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strokeColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
<NumericPropertyControl
|
||||
label={m.borderRadiusLabel}
|
||||
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: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 4 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, 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>
|
||||
);
|
||||
}
|
||||
@@ -1,443 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorFormSelectPanelMessages } from "@/features/i18n/messages/editorFormSelectPanel";
|
||||
|
||||
interface FormSelectPropertiesPanelProps {
|
||||
block: Block;
|
||||
selectedBlockId: string | null;
|
||||
updateBlock: (id: string, partial: any) => void;
|
||||
}
|
||||
|
||||
export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock }: FormSelectPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorFormSelectPanelMessages(locale);
|
||||
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-800 dark:text-slate-200">{m.sectionTitle}</h3>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.labelTypeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={selectProps.labelMode ?? "text"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelMode: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="text">{m.labelTypeOptionText}</option>
|
||||
<option value="image">{m.labelTypeOptionImage}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.labelDisplayLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={labelDisplay}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelDisplay: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="visible">{m.labelDisplayOptionVisible}</option>
|
||||
<option value="hidden">{m.labelDisplayOptionHidden}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{labelDisplay === "visible" && (
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>{m.layoutLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={selectProps.labelLayout ?? "stacked"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelLayout: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="stacked">{m.layoutOptionStacked}</option>
|
||||
<option value="inline">{m.layoutOptionInline}</option>
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{labelDisplay === "visible" && (selectProps.labelLayout ?? "stacked") === "inline" && (
|
||||
<NumericPropertyControl
|
||||
label={m.labelGapLabel}
|
||||
unitLabel="(px)"
|
||||
value={typeof selectProps.labelGapPx === "number" ? selectProps.labelGapPx : 8}
|
||||
min={0}
|
||||
max={80}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "tight", label: "Tight", value: 4 },
|
||||
{ id: "normal", label: "Normal", value: 8 },
|
||||
{ id: "relaxed", label: "Relaxed", value: 12 },
|
||||
{ id: "extra", label: "Extra", value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
labelGapPx: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.fieldLabelLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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-500 dark:text-slate-400">{m.submitKeyLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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-500 dark:text-slate-400">{m.optionsLabel}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
const next = Array.isArray((selectProps as any).options)
|
||||
? [...(selectProps as any).options]
|
||||
: [];
|
||||
next.push({
|
||||
label: "New option",
|
||||
value: `option_${next.length + 1}`,
|
||||
});
|
||||
updateBlock(selectedBlockId, {
|
||||
options: next,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
{m.addOptionButtonLabel}
|
||||
</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="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-1">
|
||||
<input
|
||||
className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.optionLabelPlaceholder}
|
||||
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-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={m.optionValuePlaceholder}
|
||||
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-300 bg-white text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-red-900/60 dark: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">{m.requiredNoticeText}</span>
|
||||
</label>
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
<NumericPropertyControl
|
||||
label={m.textSizeLabel}
|
||||
unitLabel={m.textSizeUnitLabel}
|
||||
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={m.lineHeightLabel}
|
||||
unitLabel={m.lineHeightUnitLabel}
|
||||
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: "Tight", value: 18 },
|
||||
{ id: "normal", label: "Normal", value: 24 },
|
||||
{ id: "loose", label: "Loose", value: 32 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
lineHeightCustom: `${v}px`,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
{/* 자간 px 입력을 제공하여 TDD 시나리오와 동기화한다 */}
|
||||
<NumericPropertyControl
|
||||
label={m.letterSpacingLabel}
|
||||
unitLabel={m.letterSpacingUnitLabel}
|
||||
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: "Tight", value: -1 },
|
||||
{ id: "normal", label: "Normal", value: 0 },
|
||||
{ id: "wide", label: "Wide", value: 2 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
letterSpacingCustom: `${v}px`,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={selectProps.widthMode ?? "full"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthMode: e.target.value,
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">Auto</option>
|
||||
<option value="full">Full</option>
|
||||
<option value="fixed">Fixed</option>
|
||||
</select>
|
||||
</label>
|
||||
{(selectProps.widthMode ?? "full") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
value={selectProps.widthPx ?? 240}
|
||||
min={80}
|
||||
max={800}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: "Small", value: 200 },
|
||||
{ id: "md", label: "Medium", value: 280 },
|
||||
{ id: "lg", label: "Large", value: 360 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthPx: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<NumericPropertyControl
|
||||
label={m.paddingXLabel}
|
||||
unitLabel={m.paddingXUnitLabel}
|
||||
value={typeof selectProps.paddingX === "number" ? selectProps.paddingX : 12}
|
||||
min={0}
|
||||
max={60}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "xs", label: "Extra thin", value: 6 },
|
||||
{ id: "sm", label: "Thin", value: 10 },
|
||||
{ id: "md", label: "Normal", value: 12 },
|
||||
{ id: "lg", label: "Wide", value: 16 },
|
||||
{ id: "xl", label: "Extra wide", value: 20 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
paddingX: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label={m.paddingYLabel}
|
||||
unitLabel={m.paddingYUnitLabel}
|
||||
value={typeof selectProps.paddingY === "number" ? selectProps.paddingY : 10}
|
||||
min={0}
|
||||
max={40}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "xs", label: "Extra thin", value: 6 },
|
||||
{ id: "sm", label: "Thin", value: 8 },
|
||||
{ id: "md", label: "Normal", value: 10 },
|
||||
{ id: "lg", label: "Wide", value: 12 },
|
||||
{ id: "xl", label: "Extra wide", value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
paddingY: v,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
selectProps.textColorCustom && selectProps.textColorCustom.trim() !== ""
|
||||
? selectProps.textColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
textColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
textColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label={m.fillColorLabel}
|
||||
ariaLabelColorInput={m.fillColorPickerAria}
|
||||
ariaLabelHexInput={m.fillColorHexAria}
|
||||
value={
|
||||
selectProps.fillColorCustom && selectProps.fillColorCustom.trim() !== ""
|
||||
? selectProps.fillColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
fillColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
fillColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label={m.strokeColorLabel}
|
||||
ariaLabelColorInput={m.strokeColorPickerAria}
|
||||
ariaLabelHexInput={m.strokeColorHexAria}
|
||||
value={
|
||||
selectProps.strokeColorCustom && selectProps.strokeColorCustom.trim() !== ""
|
||||
? selectProps.strokeColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strokeColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strokeColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label={m.borderRadiusLabel}
|
||||
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: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 4 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, 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>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import type { ReactNode } from "react";
|
||||
import "../../styles/editor.css";
|
||||
|
||||
export default function EditorLayout({ children }: { children: ReactNode }) {
|
||||
// 에디터 전용 전역 스타일(editor.css)을 로드하기 위한 중첩 레이아웃.
|
||||
// 실제 마크업 구조는 page.tsx 에서 정의하며, 여기서는 children 을 그대로 반환한다.
|
||||
return children;
|
||||
}
|
||||
+574
-2032
File diff suppressed because it is too large
Load Diff
@@ -1,570 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { useEditorStore } from "@/features/editor/state/editorStore";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorSidebarMessages } from "@/features/i18n/messages/editorSidebar";
|
||||
import {
|
||||
FilePlus2,
|
||||
ListChecks,
|
||||
Type,
|
||||
MousePointerClick,
|
||||
Image as ImageIcon,
|
||||
Video,
|
||||
Minus,
|
||||
List,
|
||||
LayoutTemplate,
|
||||
Pencil,
|
||||
FileText,
|
||||
ListFilter,
|
||||
CircleDot,
|
||||
SquareCheck,
|
||||
} from "lucide-react";
|
||||
|
||||
// 좌측 블록/폼/템플릿 추가 사이드바를 분리한 컴포넌트
|
||||
export function BlocksSidebar() {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorSidebarMessages(locale);
|
||||
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(locale), [addTextBlock, locale]);
|
||||
const handleAddButton = useCallback(() => addButtonBlock(locale), [addButtonBlock, locale]);
|
||||
const handleAddImage = useCallback(() => addImageBlock(), [addImageBlock]);
|
||||
const handleAddVideo = useCallback(() => addVideoBlock(), [addVideoBlock]);
|
||||
const handleAddDivider = useCallback(() => addDividerBlock(), [addDividerBlock]);
|
||||
const handleAddList = useCallback(() => addListBlock(locale), [addListBlock, locale]);
|
||||
const handleAddSection = useCallback(() => addSectionBlock(), [addSectionBlock]);
|
||||
|
||||
const handleAddFormBlock = useCallback(() => addFormBlock(locale), [addFormBlock, locale]);
|
||||
const handleAddFormInput = useCallback(() => addFormInputBlock(locale), [addFormInputBlock, locale]);
|
||||
const handleAddFormSelect = useCallback(() => addFormSelectBlock(locale), [addFormSelectBlock, locale]);
|
||||
const handleAddFormRadio = useCallback(() => addFormRadioBlock(locale), [addFormRadioBlock, locale]);
|
||||
const handleAddFormCheckbox = useCallback(
|
||||
() => addFormCheckboxBlock(locale),
|
||||
[addFormCheckboxBlock, locale],
|
||||
);
|
||||
|
||||
const handleAddHeroTemplate = useCallback(
|
||||
() => addHeroTemplateSection(locale),
|
||||
[addHeroTemplateSection, locale],
|
||||
);
|
||||
const handleAddFeaturesTemplate = useCallback(
|
||||
() => addFeaturesTemplateSection(locale),
|
||||
[addFeaturesTemplateSection, locale],
|
||||
);
|
||||
const handleAddCtaTemplate = useCallback(
|
||||
() => addCtaTemplateSection(locale),
|
||||
[addCtaTemplateSection, locale],
|
||||
);
|
||||
const handleAddFaqTemplate = useCallback(
|
||||
() => addFaqTemplateSection(locale),
|
||||
[addFaqTemplateSection, locale],
|
||||
);
|
||||
const handleAddPricingTemplate = useCallback(
|
||||
() => addPricingTemplateSection(locale),
|
||||
[addPricingTemplateSection, locale],
|
||||
);
|
||||
const handleAddTestimonialsTemplate = useCallback(
|
||||
() => addTestimonialsTemplateSection(locale),
|
||||
[addTestimonialsTemplateSection, locale],
|
||||
);
|
||||
const handleAddBlogTemplate = useCallback(
|
||||
() => addBlogTemplateSection(locale),
|
||||
[addBlogTemplateSection, locale],
|
||||
);
|
||||
const handleAddTeamTemplate = useCallback(
|
||||
() => addTeamTemplateSection(locale),
|
||||
[addTeamTemplateSection, locale],
|
||||
);
|
||||
const handleAddFooterTemplate = useCallback(
|
||||
() => addFooterTemplateSection(locale),
|
||||
[addFooterTemplateSection, locale],
|
||||
);
|
||||
|
||||
const [isBlocksOpen, setIsBlocksOpen] = useState(true);
|
||||
const [isFormsOpen, setIsFormsOpen] = useState(true);
|
||||
const [isTemplatesOpen, setIsTemplatesOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<aside
|
||||
data-testid="blocks-sidebar"
|
||||
className="w-60 border-r border-slate-200 bg-white p-4 text-sm space-y-3 overflow-y-auto pb-scroll dark:border-slate-800 dark:bg-slate-950/40"
|
||||
>
|
||||
<h2 className="font-medium flex items-center gap-2 text-slate-900 dark:text-slate-100">
|
||||
<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>{m.blocksTitle}</span>
|
||||
</span>
|
||||
</button>
|
||||
</h2>
|
||||
{isBlocksOpen && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddText}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Type className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.blocksText}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddButton}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<MousePointerClick className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.blocksButton}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddImage}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<ImageIcon className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.blocksImage}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddVideo}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Video className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.blocksVideo}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddDivider}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Minus className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.blocksDivider}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddList}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<List className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.blocksList}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddSection}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<LayoutTemplate className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.blocksSection}</span>
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="pt-3 border-t border-slate-200 mt-3 space-y-2 dark:border-slate-800">
|
||||
<h3 className="text-[11px] font-medium text-slate-800 flex items-center gap-2 dark:text-slate-200">
|
||||
<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>{m.formsTitle}</span>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
{isFormsOpen && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-emerald-200 bg-emerald-50 px-3 py-2 text-left text-xs text-emerald-900 hover:bg-emerald-100 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-100 dark:hover:bg-emerald-900"
|
||||
onClick={handleAddFormBlock}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<FilePlus2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.formsController}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddFormInput}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<FileText className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.formsInput}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddFormSelect}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<ListFilter className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.formsSelect}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddFormRadio}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<CircleDot className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.formsRadio}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddFormCheckbox}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<SquareCheck className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.formsCheckbox}</span>
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t border-slate-200 mt-3 space-y-3 dark:border-slate-800">
|
||||
<h3 className="text-[11px] font-medium text-slate-800 flex items-center gap-2 dark:text-slate-200">
|
||||
<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>{m.templatesTitle}</span>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
|
||||
{isTemplatesOpen && (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupHeroCta}</p>
|
||||
<div className="space-y-2">
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddHeroTemplate}
|
||||
>
|
||||
{m.templateHeroLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-hero"
|
||||
className="shrink-0 flex h-6 w-10 rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<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">{m.templateHeroDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddCtaTemplate}
|
||||
>
|
||||
{m.templateCtaLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-cta"
|
||||
className="shrink-0 flex h-6 w-10 rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<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">{m.templateCtaDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupContent}</p>
|
||||
<div className="space-y-2">
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddFeaturesTemplate}
|
||||
>
|
||||
{m.templateFeaturesLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-features"
|
||||
className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<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">{m.templateFeaturesDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddFaqTemplate}
|
||||
>
|
||||
{m.templateFaqLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-faq"
|
||||
className="shrink-0 flex h-6 w-10 items-start gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<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">{m.templateFaqDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddPricingTemplate}
|
||||
>
|
||||
{m.templatePricingLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-pricing"
|
||||
className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<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">{m.templatePricingDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddBlogTemplate}
|
||||
>
|
||||
{m.templateBlogLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-blog"
|
||||
className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<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">{m.templateBlogDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupTrust}</p>
|
||||
<div className="space-y-2">
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddTestimonialsTemplate}
|
||||
>
|
||||
{m.templateTestimonialsLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-testimonials"
|
||||
className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<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">{m.templateTestimonialsDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddTeamTemplate}
|
||||
>
|
||||
{m.templateTeamLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-team"
|
||||
className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<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">{m.templateTeamDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupFooter}</p>
|
||||
<div className="space-y-2">
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddFooterTemplate}
|
||||
>
|
||||
{m.templateFooterLabel}
|
||||
</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-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<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">{m.templateFooterDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -1,499 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorButtonPanelMessages } from "@/features/i18n/messages/editorButtonPanel";
|
||||
|
||||
export type ButtonPropertiesPanelProps = {
|
||||
buttonProps: ButtonBlockProps;
|
||||
selectedBlockId: string;
|
||||
updateBlock: (id: string, partial: Partial<ButtonBlockProps>) => void;
|
||||
};
|
||||
|
||||
export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBlock }: ButtonPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorButtonPanelMessages(locale);
|
||||
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>{m.buttonTextLabel}</span>
|
||||
<textarea
|
||||
className="w-full min-h-[60px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.buttonTextAria}
|
||||
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-800 dark:text-slate-200">{m.imageSectionTitle}</h4>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.imageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.imageSourceAria}
|
||||
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">{m.imageSourceOptionNone}</option>
|
||||
<option value="url">{m.imageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.imageSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{imageSource === "url" && (
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.imageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.imageUrlAria}
|
||||
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>{m.imageUploadLabel}</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={m.imageUploadAria}
|
||||
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("Button image upload failed", 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 while uploading button image", error);
|
||||
} finally {
|
||||
event.target.value = "";
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{imageSource !== "none" && (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.imageAltLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.imageAltAria}
|
||||
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>{m.imagePlacementLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.imagePlacementAria}
|
||||
value={buttonProps.imagePlacement ?? "left"}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
imagePlacement: e.target.value as any,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
<option value="left">{m.imagePlacementOptionLeft}</option>
|
||||
<option value="right">{m.imagePlacementOptionRight}</option>
|
||||
<option value="top">{m.imagePlacementOptionTop}</option>
|
||||
<option value="bottom">{m.imagePlacementOptionBottom}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label={m.paddingXLabel}
|
||||
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={m.paddingYLabel}
|
||||
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>{m.linkLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.linkAria}
|
||||
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>{m.alignLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.alignAria}
|
||||
value={buttonProps.align ?? "left"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<ButtonBlockProps["align"]>;
|
||||
updateBlock(selectedBlockId, { align: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{/* 버튼 크기 스케일 컨트롤은 paddingX/paddingY 및 폰트 크기(px) 컨트롤로 충분하므로 제거했다. */}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
buttonProps.textColorCustom && buttonProps.textColorCustom.trim() !== ""
|
||||
? buttonProps.textColorCustom
|
||||
: ""
|
||||
}
|
||||
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>{m.styleLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.styleAria}
|
||||
value={buttonProps.variant ?? "solid"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<ButtonBlockProps["variant"]>;
|
||||
updateBlock(selectedBlockId, { variant: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="solid">{m.styleOptionSolid}</option>
|
||||
<option value="outline">{m.styleOptionOutline}</option>
|
||||
<option value="ghost">{m.styleOptionGhost}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label={m.fillColorLabel}
|
||||
ariaLabelColorInput={m.fillColorPickerAria}
|
||||
ariaLabelHexInput={m.fillColorHexAria}
|
||||
value={
|
||||
buttonProps.fillColorCustom && buttonProps.fillColorCustom.trim() !== ""
|
||||
? buttonProps.fillColorCustom
|
||||
: ""
|
||||
}
|
||||
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={m.strokeColorLabel}
|
||||
ariaLabelColorInput={m.strokeColorPickerAria}
|
||||
ariaLabelHexInput={m.strokeColorHexAria}
|
||||
value={
|
||||
buttonProps.strokeColorCustom && buttonProps.strokeColorCustom.trim() !== ""
|
||||
? buttonProps.strokeColorCustom
|
||||
: ""
|
||||
}
|
||||
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={m.borderRadiusLabel}
|
||||
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: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 1 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 2 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 3 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, 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>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.widthModeAria}
|
||||
value={buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
widthMode: e.target.value as NonNullable<ButtonBlockProps["widthMode"]>,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
<option value="auto">{m.widthModeOptionAuto}</option>
|
||||
<option value="full">{m.widthModeOptionFull}</option>
|
||||
<option value="fixed">{m.widthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
{(buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")) === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
value={buttonProps.widthPx ?? 240}
|
||||
min={80}
|
||||
max={600}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: m.fixedWidthPresetSmall, value: 180 },
|
||||
{ id: "md", label: m.fixedWidthPresetMedium, value: 240 },
|
||||
{ id: "lg", label: m.fixedWidthPresetLarge, value: 320 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
widthPx: v,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label={m.fontSizeLabel}
|
||||
unitLabel={m.fontSizeUnitLabel}
|
||||
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={m.lineHeightLabel}
|
||||
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: m.lineHeightPresetTight, value: 1.1 },
|
||||
{ id: "normal", label: m.lineHeightPresetNormal, value: 1.4 },
|
||||
{ id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
lineHeightCustom: v.toString(),
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label={m.letterSpacingLabel}
|
||||
unitLabel={m.letterSpacingUnitLabel}
|
||||
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: m.letterSpacingPresetTighter, value: -1.5 },
|
||||
{ id: "tight", label: m.letterSpacingPresetTight, value: -0.5 },
|
||||
{ id: "normal", label: m.letterSpacingPresetNormal, value: 0 },
|
||||
{ id: "wide", label: m.letterSpacingPresetWide, value: 1 },
|
||||
{ id: "wider", label: m.letterSpacingPresetWider, value: 2 },
|
||||
]}
|
||||
onChangeValue={(px) => {
|
||||
const em = px / 16;
|
||||
updateBlock(selectedBlockId, {
|
||||
letterSpacingCustom: `${em}em`,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,142 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorDividerPropertiesPanelMessages } from "@/features/i18n/messages/editorDividerPropertiesPanel";
|
||||
|
||||
export type DividerPropertiesPanelProps = {
|
||||
dividerProps: DividerBlockProps;
|
||||
selectedBlockId: string;
|
||||
updateBlock: (id: string, partial: Partial<DividerBlockProps>) => void;
|
||||
};
|
||||
|
||||
export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBlock }: DividerPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorDividerPropertiesPanelMessages(locale);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>{m.alignLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.alignAria}
|
||||
value={dividerProps.align}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as DividerBlockProps["align"];
|
||||
updateBlock(selectedBlockId, { align: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>{m.thicknessLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.thicknessAria}
|
||||
value={dividerProps.thickness}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as DividerBlockProps["thickness"];
|
||||
updateBlock(selectedBlockId, { thickness: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="thin">{m.thicknessOptionThin}</option>
|
||||
<option value="medium">{m.thicknessOptionMedium}</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-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
|
||||
{/* 길이/너비 모드 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.lengthModeLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.lengthModeAria}
|
||||
value={dividerProps.widthMode ?? "full"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<DividerBlockProps["widthMode"]>;
|
||||
updateBlock(selectedBlockId, { widthMode: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="auto">{m.lengthModeOptionAuto}</option>
|
||||
<option value="full">{m.lengthModeOptionFull}</option>
|
||||
<option value="fixed">{m.lengthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(dividerProps.widthMode ?? "full") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label={m.fixedLengthLabel}
|
||||
unitLabel={m.fixedLengthUnitLabel}
|
||||
value={dividerProps.widthPx ?? 320}
|
||||
min={40}
|
||||
max={1200}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: m.fixedLengthPresetShort, value: 240 },
|
||||
{ id: "md", label: m.fixedLengthPresetNormal, value: 320 },
|
||||
{ id: "lg", label: m.fixedLengthPresetLong, value: 480 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { widthPx: v } as any);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 색상 */}
|
||||
<ColorPickerField
|
||||
label={m.colorLabel}
|
||||
ariaLabelColorInput={m.colorPickerAria}
|
||||
ariaLabelHexInput={m.colorHexAria}
|
||||
value={
|
||||
dividerProps.colorHex && dividerProps.colorHex.trim() !== ""
|
||||
? dividerProps.colorHex
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, { colorHex: hex } as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, { colorHex: item.color } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 상하 여백 (슬라이더) */}
|
||||
<NumericPropertyControl
|
||||
label={m.marginLabel}
|
||||
unitLabel={m.marginUnitLabel}
|
||||
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: m.marginPresetSmall, value: 8 },
|
||||
{ id: "md", label: m.marginPresetNormal, value: 16 },
|
||||
{ id: "lg", label: m.marginPresetLarge, value: 24 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { marginYPx: v } as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,242 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorImagePanelMessages } from "@/features/i18n/messages/editorImagePanel";
|
||||
|
||||
export type ImagePropertiesPanelProps = {
|
||||
imageProps: ImageBlockProps;
|
||||
selectedBlockId: string;
|
||||
updateBlock: (id: string, partial: Partial<ImageBlockProps>) => void;
|
||||
};
|
||||
|
||||
export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock }: ImagePropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorImagePanelMessages(locale);
|
||||
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>{m.imageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.imageSourceAria}
|
||||
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">{m.imageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.imageSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{source === "url" && (
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>{m.imageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.imageUrlAria}
|
||||
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>{m.imageUploadLabel}</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={m.imageUploadAria}
|
||||
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("Image upload failed", 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 while uploading image", 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>{m.altLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.altAria}
|
||||
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-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
|
||||
{/* 카드 배경색 */}
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label={m.cardBackgroundLabel}
|
||||
ariaLabelColorInput={m.cardBackgroundPickerAria}
|
||||
ariaLabelHexInput={m.cardBackgroundHexAria}
|
||||
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>{m.alignLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.alignAria}
|
||||
value={imageProps.align ?? "center"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
align: e.target.value as ImageBlockProps["align"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* 너비 모드 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.widthModeAria}
|
||||
value={imageProps.widthMode ?? "auto"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthMode: e.target.value as ImageBlockProps["widthMode"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">{m.widthModeOptionAuto}</option>
|
||||
<option value="fixed">{m.widthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(imageProps.widthMode ?? "auto") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
value={imageProps.widthPx ?? 320}
|
||||
min={40}
|
||||
max={1200}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: m.fixedWidthPresetSmall, value: 240 },
|
||||
{ id: "md", label: m.fixedWidthPresetMedium, value: 320 },
|
||||
{ id: "lg", label: m.fixedWidthPresetLarge, value: 480 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
widthPx: v,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 모서리 둥글기 */}
|
||||
<NumericPropertyControl
|
||||
label={m.borderRadiusLabel}
|
||||
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: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 20 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 60 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 120 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,248 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorListPanelMessages } from "@/features/i18n/messages/editorListPanel";
|
||||
|
||||
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) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorListPanelMessages(locale);
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>{m.listItemsLabel}</span>
|
||||
<textarea
|
||||
className="w-full min-h-[80px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.listItemsAria}
|
||||
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>{m.alignLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.alignAria}
|
||||
value={listProps.align}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as ListBlockProps["align"];
|
||||
updateBlock(selectedBlockId, { align: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</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-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
|
||||
{/* 글자 크기 */}
|
||||
<NumericPropertyControl
|
||||
label={m.fontSizeLabel}
|
||||
unitLabel={m.fontSizeUnitLabel}
|
||||
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: m.fontSizePresetSmall, value: 12 },
|
||||
{ id: "md", label: m.fontSizePresetMedium, value: 14 },
|
||||
{ id: "lg", label: m.fontSizePresetLarge, value: 18 },
|
||||
]}
|
||||
onChangeValue={(px) => {
|
||||
updateBlock(selectedBlockId, { fontSizeCustom: `${px}px` } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 줄 간격 */}
|
||||
<NumericPropertyControl
|
||||
label={m.lineHeightLabel}
|
||||
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: m.lineHeightPresetTight, value: 1.2 },
|
||||
{ id: "normal", label: m.lineHeightPresetNormal, value: 1.5 },
|
||||
{ id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { lineHeightCustom: v.toString() } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 텍스트 색상 */}
|
||||
<ColorPickerField
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
// textColorCustom 이 비어 있으면 커스텀 색상을 사용하지 않고, "없음" 상태로 취급한다.
|
||||
// 이 경우 HEX 인풋은 빈 문자열을 유지하고, 팔레트 라벨은 "없음"으로 표시된다.
|
||||
value={
|
||||
listProps.textColorCustom && listProps.textColorCustom.trim() !== ""
|
||||
? listProps.textColorCustom
|
||||
: ""
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, { textColorCustom: hex } as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, { textColorCustom: item.color } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorPickerField
|
||||
label={m.backgroundColorLabel}
|
||||
ariaLabelColorInput={m.backgroundColorPickerAria}
|
||||
ariaLabelHexInput={m.backgroundColorHexAria}
|
||||
value={listProps.backgroundColorCustom ?? ""}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, { backgroundColorCustom: hex } as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
/>
|
||||
|
||||
{/* 불릿 스타일 (● / ○ / ■ / 숫자형 / 없음) */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.bulletStyleLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.bulletStyleAria}
|
||||
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">{m.bulletStyleOptionDisc}</option>
|
||||
<option value="circle">{m.bulletStyleOptionCircle}</option>
|
||||
<option value="square">{m.bulletStyleOptionSquare}</option>
|
||||
<option value="decimal">{m.bulletStyleOptionDecimal}</option>
|
||||
<option value="lower-alpha">{m.bulletStyleOptionLowerAlpha}</option>
|
||||
<option value="upper-alpha">{m.bulletStyleOptionUpperAlpha}</option>
|
||||
<option value="lower-roman">{m.bulletStyleOptionLowerRoman}</option>
|
||||
<option value="upper-roman">{m.bulletStyleOptionUpperRoman}</option>
|
||||
<option value="none">{m.bulletStyleOptionNone}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* 아이템 간 여백 (슬라이더) */}
|
||||
<NumericPropertyControl
|
||||
label={m.gapLabel}
|
||||
unitLabel={m.gapUnitLabel}
|
||||
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: m.gapPresetTight, value: 4 },
|
||||
{ id: "normal", label: m.gapPresetNormal, value: 8 },
|
||||
{ id: "relaxed", label: m.gapPresetRelaxed, value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { gapYPx: v } as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,198 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorProjectPropertiesPanelMessages } from "@/features/i18n/messages/editorProjectPropertiesPanel";
|
||||
|
||||
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 locale = useAppLocale();
|
||||
const m = getEditorProjectPropertiesPanelMessages(locale);
|
||||
|
||||
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-900 dark:text-slate-200">
|
||||
<h3 className="text-sm font-medium text-slate-100">{m.sectionTitle}</h3>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.projectTitleLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.projectTitleAria}
|
||||
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-500 dark:text-slate-400">{m.projectSlugLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.projectSlugAria}
|
||||
value={projectConfig.slug}
|
||||
onChange={(e) => updateProjectConfig({ slug: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label={m.canvasWidthLabel}
|
||||
unitLabel={m.canvasWidthUnitLabel}
|
||||
value={projectConfig.canvasWidthPx ?? 1024}
|
||||
min={320}
|
||||
max={1920}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "mobile", label: m.canvasWidthPresetMobile, value: 390 },
|
||||
{ id: "tablet", label: m.canvasWidthPresetTablet, value: 768 },
|
||||
{ id: "desktop", label: m.canvasWidthPresetDesktop, value: 1200 },
|
||||
]}
|
||||
onChangeValue={handleChangeCanvasWidth}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label={m.canvasBgLabel}
|
||||
ariaLabelColorInput={m.canvasBgColorAria}
|
||||
ariaLabelHexInput={m.canvasBgHexAria}
|
||||
value={projectConfig.canvasBgColorHex ?? "#020617"}
|
||||
onChange={(hex) => updateProjectConfig({ canvasBgColorHex: hex })}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label={m.pageBgLabel}
|
||||
ariaLabelColorInput={m.pageBgColorAria}
|
||||
ariaLabelHexInput={m.pageBgHexAria}
|
||||
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-800 dark:text-slate-200">{m.seoSectionTitle}</h4>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.seoTitleLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.seoTitleAria}
|
||||
placeholder={projectConfig.title || m.seoTitlePlaceholderFallback}
|
||||
value={projectConfig.seoTitle ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ seoTitle: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.seoDescriptionLabel}</span>
|
||||
<textarea
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 min-h-[56px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.seoDescriptionAria}
|
||||
placeholder={m.seoDescriptionPlaceholder}
|
||||
value={projectConfig.seoDescription ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ seoDescription: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.seoOgImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.seoOgImageUrlAria}
|
||||
placeholder={m.seoOgImageUrlPlaceholder}
|
||||
value={projectConfig.seoOgImageUrl ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ seoOgImageUrl: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.seoCanonicalUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.seoCanonicalUrlAria}
|
||||
placeholder={m.seoCanonicalUrlPlaceholder}
|
||||
value={projectConfig.seoCanonicalUrl ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ seoCanonicalUrl: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center gap-2 text-[11px] text-slate-600 dark:text-slate-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3 w-3 rounded border-slate-300 bg-white text-sky-600 dark:border-slate-600 dark:bg-slate-900"
|
||||
aria-label={m.seoNoIndexAria}
|
||||
checked={Boolean(projectConfig.seoNoIndex)}
|
||||
onChange={(e) => updateProjectConfig({ seoNoIndex: e.target.checked })}
|
||||
/>
|
||||
<span>{m.seoNoIndexLabel}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.headHtmlLabel}</span>
|
||||
<textarea
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 min-h-[72px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.headHtmlAria}
|
||||
value={projectConfig.headHtml ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ headHtml: e.target.value })}
|
||||
placeholder={m.headHtmlPlaceholder}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.trackingScriptLabel}</span>
|
||||
<textarea
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 min-h-[72px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.trackingScriptAria}
|
||||
value={projectConfig.trackingScript ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ trackingScript: e.target.value })}
|
||||
placeholder={m.trackingScriptPlaceholder}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,337 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorPropertiesSidebarMessages } from "@/features/i18n/messages/editorPropertiesSidebar";
|
||||
|
||||
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 locale = useAppLocale();
|
||||
const m = getEditorPropertiesSidebarMessages(locale);
|
||||
|
||||
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 m.text;
|
||||
case "button":
|
||||
return m.button;
|
||||
case "image":
|
||||
return m.image;
|
||||
case "list":
|
||||
return m.list;
|
||||
case "divider":
|
||||
return m.divider;
|
||||
case "section":
|
||||
return m.section;
|
||||
case "video":
|
||||
return m.video;
|
||||
case "form":
|
||||
return m.form;
|
||||
case "formInput":
|
||||
return m.formInput;
|
||||
case "formSelect":
|
||||
return m.formSelect;
|
||||
case "formCheckbox":
|
||||
return m.formCheckbox;
|
||||
case "formRadio":
|
||||
return m.formRadio;
|
||||
default:
|
||||
return m.fallback;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<aside
|
||||
data-testid="properties-sidebar"
|
||||
className="w-80 p-4 text-sm border-l border-slate-200 bg-white flex flex-col gap-4 overflow-auto pb-scroll dark:border-slate-800 dark:bg-slate-950/40"
|
||||
onKeyDownCapture={(e) => {
|
||||
// 속성 패널 안에서 발생한 키 입력은 에디터 단축키/텍스트 블록 편집으로 전달되지 않도록 막는다.
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<h2 className="font-medium mb-2 flex items-center gap-2 text-slate-900 dark:text-slate-100">
|
||||
<SlidersHorizontal className="w-4 h-4 text-sky-400" aria-hidden="true" />
|
||||
<span>{m.panelTitle}</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-200 bg-slate-50 px-2 py-1 text-slate-900 hover:bg-red-50 hover:border-red-300 hover:text-red-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-red-900/60 dark: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>{m.actionDeleteBlock}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-2 py-1 text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark: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>{m.actionDuplicateBlock}</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-200 bg-slate-50 px-2 py-1 text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={() => setHelpOpen(true)}
|
||||
>
|
||||
<HelpCircle className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{m.actionHelp}</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-200 bg-white p-4 text-xs text-slate-900 shadow-xl dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-sm font-medium">{help.title}</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-slate-100 text-xs"
|
||||
onClick={() => setHelpOpen(false)}
|
||||
>
|
||||
{m.modalCloseLabel}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-600 dark: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-900 dark:text-slate-200">{m.modalPropertiesSectionTitle}</h4>
|
||||
<ul className="space-y-1">
|
||||
{help.properties.map((prop) => (
|
||||
<li key={prop.label}>
|
||||
<div className="text-[11px] font-semibold text-slate-600 dark:text-slate:-100">{prop.label}</div>
|
||||
<div className="text-[11px] text-slate-500 dark:text-slate-300">{prop.description}</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -1,748 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorSectionPanelMessages } from "@/features/i18n/messages/editorSectionPanel";
|
||||
|
||||
export type SectionPropertiesPanelProps = {
|
||||
sectionProps: SectionBlockProps;
|
||||
selectedBlockId: string;
|
||||
updateBlock: (id: string, partial: Partial<SectionBlockProps>) => void;
|
||||
};
|
||||
|
||||
export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBlock }: SectionPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorSectionPanelMessages(locale);
|
||||
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={m.backgroundColorLabel}
|
||||
ariaLabelColorInput={m.backgroundColorPickerAria}
|
||||
ariaLabelHexInput={m.backgroundColorHexAria}
|
||||
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>{m.backgroundImageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.backgroundImageSourceAria}
|
||||
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">{m.backgroundImageSourceOptionNone}</option>
|
||||
<option value="url">{m.backgroundImageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.backgroundImageSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{backgroundSource === "url" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.backgroundImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.backgroundImageUrlAria}
|
||||
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>{m.backgroundImageUploadLabel}</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={m.backgroundImageUploadAria}
|
||||
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>{m.backgroundImagePositionModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.backgroundImagePositionModeAria}
|
||||
value={positionMode}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
backgroundImagePositionMode: e.target.value as SectionBlockProps["backgroundImagePositionMode"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="preset">{m.backgroundImagePositionModeOptionPreset}</option>
|
||||
<option value="custom">{m.backgroundImagePositionModeOptionCustom}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.backgroundImageSizeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.backgroundImageSizeAria}
|
||||
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>{m.backgroundImagePositionLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.backgroundImagePositionAria}
|
||||
value={sectionProps.backgroundImagePosition ?? "center"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
backgroundImagePosition: e.target.value as SectionBlockProps["backgroundImagePosition"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="center">{m.backgroundImagePositionOptionCenter}</option>
|
||||
<option value="top">{m.backgroundImagePositionOptionTop}</option>
|
||||
<option value="bottom">{m.backgroundImagePositionOptionBottom}</option>
|
||||
<option value="left">{m.backgroundImagePositionOptionLeft}</option>
|
||||
<option value="right">{m.backgroundImagePositionOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{positionMode === "custom" && (
|
||||
<>
|
||||
<NumericPropertyControl
|
||||
label={m.backgroundImagePositionXLabel}
|
||||
unitLabel="(%)"
|
||||
value={
|
||||
typeof sectionProps.backgroundImagePositionXPercent === "number"
|
||||
? sectionProps.backgroundImagePositionXPercent
|
||||
: 50
|
||||
}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "left", label: m.backgroundImagePositionOptionLeft, value: 0 },
|
||||
{ id: "center", label: m.backgroundImagePositionOptionCenter, value: 50 },
|
||||
{ id: "right", label: m.backgroundImagePositionOptionRight, value: 100 },
|
||||
]}
|
||||
onChangeValue={(next) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
backgroundImagePositionMode: "custom",
|
||||
backgroundImagePositionXPercent: next,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
|
||||
<NumericPropertyControl
|
||||
label={m.backgroundImagePositionYLabel}
|
||||
unitLabel="(%)"
|
||||
value={
|
||||
typeof sectionProps.backgroundImagePositionYPercent === "number"
|
||||
? sectionProps.backgroundImagePositionYPercent
|
||||
: 50
|
||||
}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "top", label: m.backgroundImagePositionOptionTop, value: 0 },
|
||||
{ id: "center", label: m.backgroundImagePositionOptionCenter, value: 50 },
|
||||
{ id: "bottom", label: m.backgroundImagePositionOptionBottom, value: 100 },
|
||||
]}
|
||||
onChangeValue={(next) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
backgroundImagePositionMode: "custom",
|
||||
backgroundImagePositionYPercent: next,
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.backgroundImageRepeatLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.backgroundImageRepeatAria}
|
||||
value={sectionProps.backgroundImageRepeat ?? "no-repeat"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
backgroundImageRepeat: e.target.value as SectionBlockProps["backgroundImageRepeat"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="no-repeat">{m.backgroundImageRepeatOptionNone}</option>
|
||||
<option value="repeat">{m.backgroundImageRepeatOptionBoth}</option>
|
||||
<option value="repeat-x">{m.backgroundImageRepeatOptionX}</option>
|
||||
<option value="repeat-y">{m.backgroundImageRepeatOptionY}</option>
|
||||
</select>
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 섹션 배경 비디오 */}
|
||||
<div className="mt-3 space-y-2 text-xs text-slate-400">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.backgroundVideoSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.backgroundVideoSourceAria}
|
||||
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">{m.backgroundVideoSourceOptionNone}</option>
|
||||
<option value="url">{m.backgroundVideoSourceOptionUrl}</option>
|
||||
<option value="upload">{m.backgroundVideoSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{backgroundVideoSource === "url" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.backgroundVideoUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.backgroundVideoUrlAria}
|
||||
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>{m.backgroundVideoUploadLabel}</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={m.backgroundVideoUploadAria}
|
||||
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>
|
||||
|
||||
{/* 세로 패딩 슬라이더 - 프리셋 + 자유 슬라이더 */}
|
||||
<div className="mt-3 space-y-1">
|
||||
<NumericPropertyControl
|
||||
label={m.paddingYLabel}
|
||||
unitLabel={m.paddingYUnitLabel}
|
||||
value={typeof sectionProps.paddingYPx === "number" ? sectionProps.paddingYPx : 48}
|
||||
min={16}
|
||||
max={80}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "x-tight", label: m.paddingYPresetExtraTight, value: 16 },
|
||||
{ id: "tight", label: m.paddingYPresetTight, value: 32 },
|
||||
{ id: "normal", label: m.paddingYPresetNormal, value: 48 },
|
||||
{ id: "relaxed", label: m.paddingYPresetRelaxed, value: 64 },
|
||||
{ id: "x-relaxed", label: m.paddingYPresetExtraRelaxed, 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">{m.layoutSectionTitle}</h4>
|
||||
|
||||
{/* 컬럼 레이아웃 프리셋 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.columnLayoutLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.columnLayoutAria}
|
||||
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">{m.columnLayoutOptionOneFull}</option>
|
||||
<option value="two-equal">{m.columnLayoutOptionTwoEqual}</option>
|
||||
<option value="two-1-2">{m.columnLayoutOptionTwoOneTwo}</option>
|
||||
<option value="two-2-1">{m.columnLayoutOptionTwoTwoOne}</option>
|
||||
<option value="three-equal">{m.columnLayoutOptionThreeEqual}</option>
|
||||
<option value="custom">{m.columnLayoutOptionCustom}</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>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
|
||||
{/* 최대 폭 슬라이더 - 프리셋 + 자유 슬라이더 */}
|
||||
<NumericPropertyControl
|
||||
label={m.maxWidthLabel}
|
||||
unitLabel={m.maxWidthUnitLabel}
|
||||
value={typeof sectionProps.maxWidthPx === "number" ? sectionProps.maxWidthPx : 960}
|
||||
min={640}
|
||||
max={1440}
|
||||
step={16}
|
||||
presets={[
|
||||
{ id: "x-narrow", label: m.maxWidthPresetExtraNarrow, value: 640 },
|
||||
{ id: "narrow", label: m.maxWidthPresetNarrow, value: 800 },
|
||||
{ id: "normal", label: m.maxWidthPresetNormal, value: 960 },
|
||||
{ id: "wide", label: m.maxWidthPresetWide, value: 1200 },
|
||||
{ id: "x-wide", label: m.maxWidthPresetExtraWide, value: 1440 },
|
||||
]}
|
||||
onChangeValue={(next) => {
|
||||
const safe = Number.isFinite(next) ? next : 960;
|
||||
updateBlock(selectedBlockId, { maxWidthPx: safe } as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 컬럼 간 간격 슬라이더 - 프리셋 + 자유 슬라이더 */}
|
||||
<NumericPropertyControl
|
||||
label={m.gapXLabel}
|
||||
unitLabel={m.gapXUnitLabel}
|
||||
value={typeof sectionProps.gapXPx === "number" ? sectionProps.gapXPx : 24}
|
||||
min={0}
|
||||
max={64}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "zero", label: m.gapXPresetZero, value: 0 },
|
||||
{ id: "tight", label: m.gapXPresetTight, value: 16 },
|
||||
{ id: "normal", label: m.gapXPresetNormal, value: 24 },
|
||||
{ id: "relaxed", label: m.gapXPresetRelaxed, value: 32 },
|
||||
{ id: "x-relaxed", label: m.gapXPresetExtraRelaxed, value: 48 },
|
||||
{ id: "max", label: m.gapXPresetMax, 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>{m.alignItemsLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.alignItemsAria}
|
||||
value={sectionProps.alignItems ?? "top"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<SectionBlockProps["alignItems"]>;
|
||||
updateBlock(selectedBlockId, { alignItems: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="top">{m.alignItemsOptionTop}</option>
|
||||
<option value="center">{m.alignItemsOptionCenter}</option>
|
||||
<option value="bottom">{m.alignItemsOptionBottom}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,524 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorTextPanelMessages } from "@/features/i18n/messages/editorTextPanel";
|
||||
|
||||
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 locale = useAppLocale();
|
||||
const m = getEditorTextPanelMessages(locale);
|
||||
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">{m.selectedTextLabel}</p>
|
||||
<textarea
|
||||
className="w-full min-h-[80px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.selectedTextAria}
|
||||
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>{m.alignLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.alignAria}
|
||||
value={textProps.align}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as "left" | "center" | "right";
|
||||
updateBlock(selectedBlockId, { align: value });
|
||||
}}
|
||||
>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between text-[11px] text-slate-400">
|
||||
<span>{m.textStyleLabel}</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-300 bg-white text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
}`}
|
||||
onClick={() => {
|
||||
updateBlock(selectedBlockId, {
|
||||
underline: !textProps.underline,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
{m.underlineLabel}
|
||||
</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-300 bg-white text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
}`}
|
||||
onClick={() => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strike: !textProps.strike,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
{m.strikeLabel}
|
||||
</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-300 bg-white text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
}`}
|
||||
onClick={() => {
|
||||
updateBlock(selectedBlockId, {
|
||||
italic: !textProps.italic,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
{m.italicLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label={m.fontSizeLabel}
|
||||
unitLabel={m.fontSizeUnitLabel}
|
||||
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>{m.letterSpacingLabel}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
className="w-32 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.letterSpacingPresetAria}
|
||||
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">{m.letterSpacingPresetTighter}</option>
|
||||
<option value="tight">{m.letterSpacingPresetTight}</option>
|
||||
<option value="normal">{m.letterSpacingPresetNormal}</option>
|
||||
<option value="wide">{m.letterSpacingPresetWide}</option>
|
||||
<option value="wider">{m.letterSpacingPresetWider}</option>
|
||||
</select>
|
||||
|
||||
<PropertySliderField
|
||||
label=""
|
||||
ariaLabelSlider={m.letterSpacingSliderAria}
|
||||
ariaLabelInput={m.letterSpacingInputAria}
|
||||
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={m.lineHeightLabel}
|
||||
unitLabel=""
|
||||
value={Number.isFinite(parsedLineHeight) ? parsedLineHeight : 1.5}
|
||||
min={-1}
|
||||
max={3}
|
||||
step={0.05}
|
||||
presets={[
|
||||
{ id: "tight", label: m.lineHeightPresetTight, value: 1.25 },
|
||||
{ id: "snug", label: m.lineHeightPresetSnug, value: 1.35 },
|
||||
{ id: "normal", label: m.lineHeightPresetNormal, value: 1.5 },
|
||||
{ id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.7 },
|
||||
{ id: "loose", label: m.lineHeightPresetLoose, 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={m.fontWeightLabel}
|
||||
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"
|
||||
? m.fontWeightPresetNormal
|
||||
: scale === "medium"
|
||||
? m.fontWeightPresetMedium
|
||||
: scale === "semibold"
|
||||
? m.fontWeightPresetSemibold
|
||||
: m.fontWeightPresetBold,
|
||||
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={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
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={m.backgroundColorLabel}
|
||||
ariaLabelColorInput={m.backgroundColorPickerAria}
|
||||
ariaLabelHexInput={m.backgroundColorHexAria}
|
||||
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>{m.maxWidthLabel}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
className="w-32 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.maxWidthPresetAria}
|
||||
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">{m.maxWidthPresetNone}</option>
|
||||
<option value="prose">{m.maxWidthPresetProse}</option>
|
||||
<option value="narrow">{m.maxWidthPresetNarrow}</option>
|
||||
</select>
|
||||
<input
|
||||
type="range"
|
||||
min={20}
|
||||
max={120}
|
||||
step={5}
|
||||
aria-label={m.maxWidthSliderAria}
|
||||
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-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.maxWidthCustomAria}
|
||||
placeholder={m.maxWidthPlaceholder}
|
||||
value={textProps.maxWidthCustom ?? ""}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
maxWidthCustom: e.target.value,
|
||||
maxWidthMode: "custom",
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,391 +0,0 @@
|
||||
"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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorVideoPanelMessages } from "@/features/i18n/messages/editorVideoPanel";
|
||||
|
||||
export type VideoPropertiesPanelProps = {
|
||||
videoProps: VideoBlockProps;
|
||||
selectedBlockId: string;
|
||||
updateBlock: (id: string, partial: Partial<VideoBlockProps>) => void;
|
||||
};
|
||||
|
||||
export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock }: VideoPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorVideoPanelMessages(locale);
|
||||
// 비디오 소스 유형: 업로드(/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>{m.sourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.sourceAria}
|
||||
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">{m.sourceOptionUrl}</option>
|
||||
<option value="upload">{m.sourceOptionUpload}</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>{m.urlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.urlAria}
|
||||
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>{m.titleLabel}</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={m.titleAria}
|
||||
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>{m.ariaLabelLabel}</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={m.ariaLabelAria}
|
||||
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>{m.captionTextLabel}</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={m.captionTextAria}
|
||||
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>{m.posterImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.posterImageUrlAria}
|
||||
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>{m.uploadLabel}</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={m.uploadAria}
|
||||
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-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
|
||||
{/* 카드 배경색 */}
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label={m.cardBackgroundLabel}
|
||||
ariaLabelColorInput={m.cardBackgroundPickerAria}
|
||||
ariaLabelHexInput={m.cardBackgroundHexAria}
|
||||
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>{m.alignLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.alignAria}
|
||||
value={videoProps.align ?? "center"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
align: e.target.value as VideoBlockProps["align"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* 너비 모드 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.widthModeAria}
|
||||
value={videoProps.widthMode ?? "auto"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthMode: e.target.value as VideoBlockProps["widthMode"],
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">{m.widthModeOptionAuto}</option>
|
||||
<option value="full">{m.widthModeOptionFull}</option>
|
||||
<option value="fixed">{m.widthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(videoProps.widthMode ?? "auto") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
value={videoProps.widthPx ?? 640}
|
||||
min={160}
|
||||
max={1920}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: m.fixedWidthPresetSmall, value: 480 },
|
||||
{ id: "md", label: m.fixedWidthPresetMedium, value: 640 },
|
||||
{ id: "lg", label: m.fixedWidthPresetLarge, value: 960 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
widthPx: v,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 카드 패딩 */}
|
||||
<NumericPropertyControl
|
||||
label={m.cardPaddingLabel}
|
||||
unitLabel={m.cardPaddingUnitLabel}
|
||||
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={m.cardBorderRadiusLabel}
|
||||
unitLabel={m.cardBorderRadiusUnitLabel}
|
||||
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={m.startTimeLabel}
|
||||
unitLabel={m.startTimeUnitLabel}
|
||||
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={m.endTimeLabel}
|
||||
unitLabel={m.endTimeUnitLabel}
|
||||
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>{m.aspectRatioLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={m.aspectRatioAria}
|
||||
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]">{m.autoplayLabel}</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]">{m.loopLabel}</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]">{m.mutedLabel}</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]">{m.controlsLabel}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore";
|
||||
import type { EditorBlogTemplateMessages } from "@/features/i18n/messages/editorTemplates";
|
||||
|
||||
export function createBlogTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
messages: EditorBlogTemplateMessages;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId, messages } = 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 blogBlocks: Block[] = columns.flatMap((col, index) => {
|
||||
const post = messages.posts[index] ?? messages.posts[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 };
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore";
|
||||
import type { EditorCtaTemplateMessages } from "@/features/i18n/messages/editorTemplates";
|
||||
|
||||
export function createCtaTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
messages: EditorCtaTemplateMessages;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId, messages } = 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: messages.body,
|
||||
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: messages.buttonLabel,
|
||||
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 };
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
import type { EditorFaqTemplateMessages } from "@/features/i18n/messages/editorTemplates";
|
||||
|
||||
export function createFaqTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
messages: EditorFaqTemplateMessages;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId, messages } = 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: messages.title,
|
||||
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: messages.subtitle,
|
||||
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 faqBlocks: Block[] = messages.items.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 };
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
import type { EditorFeaturesTemplateMessages } from "@/features/i18n/messages/editorTemplates";
|
||||
|
||||
export function createFeaturesTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
messages: EditorFeaturesTemplateMessages;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId, messages } = 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: `${messages.itemTitlePrefix} ${index + 1}${messages.itemTitleSuffix}`.trim(),
|
||||
align: "left",
|
||||
size: "lg",
|
||||
} as any;
|
||||
|
||||
const descProps: TextBlockProps = {
|
||||
text: messages.itemDescription,
|
||||
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 };
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
import type { EditorFooterTemplateMessages } from "@/features/i18n/messages/editorTemplates";
|
||||
|
||||
export function createFooterTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
messages: EditorFooterTemplateMessages;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId, messages } = 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: messages.description,
|
||||
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: messages.linksText,
|
||||
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 };
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type {
|
||||
Block,
|
||||
SectionBlockProps,
|
||||
TextBlockProps,
|
||||
ButtonBlockProps,
|
||||
} from "@/features/editor/state/editorStore";
|
||||
import type { EditorHeroTemplateMessages } from "@/features/i18n/messages/editorTemplates";
|
||||
|
||||
export function createHeroTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
messages: EditorHeroTemplateMessages;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId, messages } = 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: messages.headline,
|
||||
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: messages.subheadline,
|
||||
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: messages.primaryButtonLabel,
|
||||
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 };
|
||||
}
|
||||
@@ -1,140 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore";
|
||||
import type { EditorPricingTemplateMessages } from "@/features/i18n/messages/editorTemplates";
|
||||
|
||||
export function createPricingTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
messages: EditorPricingTemplateMessages;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId, messages } = 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 = messages.plans;
|
||||
|
||||
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: messages.featuresText,
|
||||
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 ? messages.primaryButtonLabel : messages.secondaryButtonLabel,
|
||||
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 };
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore";
|
||||
import type { EditorTeamTemplateMessages } from "@/features/i18n/messages/editorTemplates";
|
||||
|
||||
export function createTeamTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
messages: EditorTeamTemplateMessages;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId, messages } = 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 teamBlocks: Block[] = columns.flatMap((col, index) => {
|
||||
const m = messages.members[index] ?? messages.members[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 };
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
import type { EditorTestimonialsTemplateMessages } from "@/features/i18n/messages/editorTemplates";
|
||||
|
||||
export function createTestimonialsTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
messages: EditorTestimonialsTemplateMessages;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId, messages } = 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 = messages.items;
|
||||
|
||||
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 };
|
||||
}
|
||||
+4
-21
@@ -1,33 +1,16 @@
|
||||
import "../styles/globals.css";
|
||||
import "../styles/builder.css";
|
||||
import type { ReactNode } from "react";
|
||||
import { headers, cookies } from "next/headers";
|
||||
import { LocaleProvider } from "@/features/i18n/LocaleProvider";
|
||||
import { LocaleSwitcher } from "@/features/i18n/LocaleSwitcher";
|
||||
import { resolveLocaleFromAcceptLanguage, DEFAULT_LOCALE } from "@/features/i18n/locale";
|
||||
|
||||
export const metadata = {
|
||||
title: "Page Builder",
|
||||
description: "No-code single page builder",
|
||||
};
|
||||
|
||||
export default async function RootLayout({ children }: { children: ReactNode }) {
|
||||
const cookieStore = await cookies();
|
||||
const cookieLocale = cookieStore.get("pb-locale")?.value;
|
||||
|
||||
const headerList = await headers();
|
||||
const acceptLanguage = headerList.get("accept-language");
|
||||
|
||||
const localeFromCookie = cookieLocale === "en" || cookieLocale === "ko" ? cookieLocale : null;
|
||||
const locale = (localeFromCookie ?? resolveLocaleFromAcceptLanguage(acceptLanguage ?? undefined)) ?? DEFAULT_LOCALE;
|
||||
|
||||
export default function RootLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<html lang={locale} suppressHydrationWarning>
|
||||
<body className="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<LocaleProvider initialLocale={locale}>
|
||||
{children}
|
||||
<LocaleSwitcher />
|
||||
</LocaleProvider>
|
||||
<html lang="ko">
|
||||
<body className="min-h-screen bg-slate-950 text-slate-50">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -1,161 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { SunMoon } from "lucide-react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getAuthMessages } from "@/features/i18n/messages/auth";
|
||||
|
||||
// 로그인 페이지 컴포넌트
|
||||
// - 이메일/비밀번호를 입력받아 /api/auth/login 으로 요청을 전송한다.
|
||||
// - 성공 시 /projects 로 이동하고, 실패 시 에러 메시지를 보여준다.
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const locale = useAppLocale();
|
||||
const { login: t } = getAuthMessages(locale);
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleToggleTheme = () => {
|
||||
if (typeof document === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
const root = document.documentElement;
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
root.classList.toggle("dark");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/auth/me");
|
||||
if (!cancelled && res.ok) {
|
||||
router.push("/dashboard");
|
||||
}
|
||||
} 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 ?? t.errorLoginFailed);
|
||||
} catch {
|
||||
setError(t.errorLoginFailed);
|
||||
}
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 성공 시에는 /dashboard 로 이동한다.
|
||||
router.push("/dashboard");
|
||||
} catch {
|
||||
setError(t.errorNetwork);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen flex items-center justify-center bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<div className="w-full max-w-sm rounded-lg border border-slate-200 bg-white p-6 shadow-xl dark:border-slate-800 dark:bg-slate-900/70">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<h1 className="text-lg font-semibold">{t.title}</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-2 py-1 text-[11px] font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={handleToggleTheme}
|
||||
>
|
||||
<SunMoon className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.themeToggleLabel}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mb-4 dark:text-slate-400">{t.description}</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-800 dark:text-slate-200">
|
||||
{t.emailLabel}
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="password" className="block text-slate-800 dark:text-slate-200">
|
||||
{t.passwordLabel}
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
|
||||
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 ? t.submitLoading : t.submitIdle}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-4 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
{t.signupPromptPrefix}
|
||||
{" "}
|
||||
<Link href="/signup" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
|
||||
{t.signupLinkText}
|
||||
</Link>
|
||||
{t.signupPromptSuffix && " "}
|
||||
{t.signupPromptSuffix}
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { getPublicPageRendererMessages } from "@/features/i18n/messages/publicPageRenderer";
|
||||
|
||||
interface PublicProjectPageClientProps {
|
||||
html: string;
|
||||
}
|
||||
|
||||
export default function PublicProjectPageClient({ html }: PublicProjectPageClientProps) {
|
||||
const m = getPublicPageRendererMessages(null);
|
||||
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) || m.submitSuccessDefault;
|
||||
showToast(success);
|
||||
try {
|
||||
form.reset();
|
||||
} catch {}
|
||||
} else {
|
||||
const errorMsg = message || (config && config.errorMessage) || m.submitErrorDefault;
|
||||
showToast(errorMsg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
const errorMsg = (config && config.errorMessage) || m.submitErrorDefault;
|
||||
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}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
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} />;
|
||||
}
|
||||
+7
-14
@@ -1,19 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function HomePage() {
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// 메인 페이지 진입 시 대시보드로 안내한다.
|
||||
router.push("/dashboard");
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">대시보드로 이동 중입니다...</p>
|
||||
<main className="flex min-h-screen items-center justify-center">
|
||||
<div className="text-center space-y-4">
|
||||
<h1 className="text-3xl font-bold">Page Builder MVP</h1>
|
||||
<p className="text-sm text-slate-400">
|
||||
에디터와 블록 시스템을 이 위에서 TDD로 구현합니다.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
import type { ReactNode } from "react";
|
||||
import "../../styles/editor.css";
|
||||
|
||||
export default function PreviewLayout({ children }: { children: ReactNode }) {
|
||||
// 프리뷰 화면에서도 에디터 크롬과 동일한 전용 스타일(editor.css)을 사용한다.
|
||||
// 콘텐츠 블록 자체의 모양은 builder.css(pb-*) 기준으로 렌더된다.
|
||||
return children;
|
||||
}
|
||||
+6
-202
@@ -1,215 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import type { CSSProperties } from "react";
|
||||
import { useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getPreviewMessages } from "@/features/i18n/messages/preview";
|
||||
import { useEditorStore } from "@/features/editor/state/editorStore";
|
||||
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
|
||||
|
||||
export default function PreviewPage() {
|
||||
const router = useRouter();
|
||||
const locale = useAppLocale();
|
||||
const m = getPreviewMessages(locale);
|
||||
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 = {};
|
||||
{
|
||||
const raw = typeof projectConfig?.bodyBgColorHex === "string" ? projectConfig.bodyBgColorHex.trim() : "";
|
||||
if (raw) {
|
||||
mainStyle.backgroundColor = raw;
|
||||
}
|
||||
}
|
||||
|
||||
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" style={mainStyle}>
|
||||
<header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">{m.headerTitle}</h1>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{m.headerDescription}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center rounded border border-slate-300 bg-white px-3 py-1 text-slate-800 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
void handleExportZip();
|
||||
}}
|
||||
>
|
||||
{m.exportZipButtonLabel}
|
||||
</button>
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center rounded border border-slate-300 bg-white px-3 py-1 text-xs text-slate-800 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
{m.navProjects}
|
||||
</Link>
|
||||
<Link
|
||||
href={editorHref}
|
||||
className="inline-flex items-center rounded border border-slate-300 bg-white px-3 py-1 text-xs text-slate-800 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
{m.navBackToEditor}
|
||||
</Link>
|
||||
</div>
|
||||
<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">
|
||||
<h1 className="text-xl font-semibold">Page Preview</h1>
|
||||
<p className="text-xs text-slate-400">빌더로 만든 페이지를 미리 보는 화면</p>
|
||||
</header>
|
||||
{/* 에디터 크롬 없이 순수 페이지 형태로 블록들을 렌더링하되, 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>
|
||||
{/* 에디터 크롬 없이 순수 페이지 형태로 블록들을 렌더링 */}
|
||||
<PublicPageRenderer blocks={blocks} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,274 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useParams } from "next/navigation";
|
||||
import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
|
||||
import { getSubmissionsMessages } from "@/features/i18n/messages/submissions";
|
||||
|
||||
// 프로젝트별 폼 제출 내역을 조회해서 보여주는 페이지 컴포넌트.
|
||||
// - 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 locale = useAppLocale();
|
||||
const t = getDashboardMessages(locale);
|
||||
const m = getSubmissionsMessages(locale);
|
||||
|
||||
const [submissions, setSubmissions] = useState<SubmissionItem[]>([]);
|
||||
const [status, setStatus] = useState<PageStatus>("idle");
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
// 마운트 시 현재 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(m.errorUnauthorized);
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
if (res.status === 404) {
|
||||
setStatus("error");
|
||||
setErrorMessage(m.errorGeneric);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("error");
|
||||
setErrorMessage(m.errorGeneric);
|
||||
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(m.errorGeneric);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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");
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/auth/logout", {
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
setErrorMessage(m.errorLogout);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push("/login");
|
||||
} catch {
|
||||
setErrorMessage(m.errorLogout);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleTheme = () => {
|
||||
if (typeof document === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
const root = document.documentElement;
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
root.classList.toggle("dark");
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{m.headerTitle}</h1>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{m.headerDescription}</p>
|
||||
<p className="mt-1 text-[11px] font-mono text-slate-500 dark:text-slate-400">{slug}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navDashboard}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
|
||||
>
|
||||
<FolderKanban className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navProjects}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects/submissions"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-emerald-700 hover:bg-emerald-50 hover:text-emerald-800 dark:text-emerald-200 dark:hover:bg-emerald-900/60 dark:hover:text-emerald-100"
|
||||
>
|
||||
<ListChecks className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navSubmissions}</span>
|
||||
</Link>
|
||||
</nav>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={handleToggleTheme}
|
||||
>
|
||||
<SunMoon className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.themeToggleLabel}</span>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
{t.menuLabel}
|
||||
</button>
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full px-3 py-2 text-left text-xs text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
setIsMenuOpen(false);
|
||||
void handleLogout();
|
||||
}}
|
||||
>
|
||||
{t.logoutLabel}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="flex-1 px-6 py-4 overflow-auto bg-slate-50/60 dark:bg-transparent">
|
||||
{status === "error" && errorMessage && (
|
||||
<p className="text-xs text-red-500 mb-3 dark:text-red-300">{errorMessage}</p>
|
||||
)}
|
||||
|
||||
{status === "loading" && (
|
||||
<p className="text-xs text-slate-500 mb-3 dark:text-slate-400">{m.loadingText}</p>
|
||||
)}
|
||||
|
||||
{submissions.length === 0 && status === "idle" && !errorMessage && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{m.emptyText}</p>
|
||||
)}
|
||||
|
||||
{submissions.length > 0 && (
|
||||
<table className="w-full text-xs text-left border-collapse mt-2">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 text-slate-600 dark:border-slate-800 dark:text-slate-400">
|
||||
<th className="py-2 pr-4">{m.tableHeaderCreatedAt}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderName}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderEmail}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderPhone}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderBirthdate}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderOtherFields}</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-200 hover:bg-slate-50 dark:border-slate-900 dark:hover:bg-slate-900/60"
|
||||
>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300 text-[11px]">
|
||||
{new Date(item.createdAt).toLocaleString()}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-slate-900 dark:text-slate-100">{name}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{email}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{phone}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{birthdate}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300 whitespace-pre-wrap">
|
||||
{renderOtherFields(payload)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,488 +0,0 @@
|
||||
"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,
|
||||
LayoutDashboard,
|
||||
FolderKanban,
|
||||
SunMoon,
|
||||
} from "lucide-react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
|
||||
import { getProjectsMessages } from "@/features/i18n/messages/projects";
|
||||
|
||||
interface ProjectListItem {
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
status: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const router = useRouter();
|
||||
const locale = useAppLocale();
|
||||
const t = getDashboardMessages(locale);
|
||||
const p = getProjectsMessages(locale);
|
||||
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 [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
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(p.errorFetchUnauthorized);
|
||||
router.push("/login");
|
||||
} else {
|
||||
setErrorMessage(p.errorFetchGeneric);
|
||||
}
|
||||
}
|
||||
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(p.errorFetchGeneric);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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(p.confirmDeleteSingle);
|
||||
|
||||
if (!confirmed) return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${encodeURIComponent(slug)}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
setStatus("error");
|
||||
setErrorMessage(p.errorDeleteSingle);
|
||||
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(p.errorDeleteSingle);
|
||||
}
|
||||
};
|
||||
|
||||
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(p.confirmDeleteBulk);
|
||||
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(p.errorDeleteBulkAllFailed);
|
||||
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(p.errorDeleteBulkSomeFailed);
|
||||
} else {
|
||||
setStatus("idle");
|
||||
setErrorMessage(null);
|
||||
}
|
||||
} catch {
|
||||
setStatus("error");
|
||||
setErrorMessage(p.errorDeleteBulkAllFailed);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleTheme = () => {
|
||||
if (typeof document === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
const root = document.documentElement;
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
root.classList.toggle("dark");
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{p.headerTitle}</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">{p.headerDescription}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navDashboard}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects"
|
||||
aria-current="page"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-semibold bg-sky-600 text-white shadow-sm hover:bg-sky-700"
|
||||
>
|
||||
<FolderKanban className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navProjects}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects/submissions"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-emerald-700 hover:bg-emerald-50 hover:text-emerald-800 dark:text-emerald-200 dark:hover:bg-emerald-900/60 dark:hover:text-emerald-100"
|
||||
>
|
||||
<ListChecks className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navSubmissions}</span>
|
||||
</Link>
|
||||
</nav>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={handleToggleTheme}
|
||||
>
|
||||
<SunMoon className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.themeToggleLabel}</span>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
{t.menuLabel}
|
||||
</button>
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full px-3 py-2 text-left text-xs text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
setIsMenuOpen(false);
|
||||
void handleLogout();
|
||||
}}
|
||||
>
|
||||
{t.logoutLabel}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section className="flex-1 px-6 py-4 overflow-auto bg-slate-50/60 dark:bg-transparent">
|
||||
{status === "error" && (
|
||||
<p className="text-xs text-red-500 mb-3 dark:text-red-300">
|
||||
{errorMessage ?? p.errorFetchGeneric}
|
||||
</p>
|
||||
)}
|
||||
{projects.length === 0 && status === "idle" && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">아직 저장된 프로젝트가 없습니다. 에디터에서 프로젝트를 저장해 보세요.</p>
|
||||
)}
|
||||
{projects.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
data-testid="projects-toolbar"
|
||||
className="flex items-center justify-between mb-2 text-[11px] text-slate-600 dark: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 border bg-slate-100 border-slate-300 text-slate-700 dark:bg-slate-900/70 dark:border-slate-700 dark:text-slate-200">
|
||||
<ListChecks className="w-3 h-3 text-slate-400 dark:text-slate-500" aria-hidden="true" />
|
||||
<span>
|
||||
{p.toolbarSelectedPrefix}
|
||||
<span className="font-semibold">{selectedSlugs.length}</span>
|
||||
{p.toolbarSelectedSuffix}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded border px-2 py-1 text-xs font-medium border-red-300 text-red-700 bg-red-50 hover:bg-red-100 disabled:opacity-40 disabled:cursor-not-allowed dark:border-red-700 dark:text-red-200 dark:bg-red-900/40 dark:hover:bg-red-900/60"
|
||||
disabled={selectedSlugs.length === 0}
|
||||
onClick={() => {
|
||||
void handleBulkDelete();
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{p.toolbarDeleteSelected}</span>
|
||||
</button>
|
||||
<Link
|
||||
href="/editor?new=1"
|
||||
className="inline-flex items-center gap-1 rounded border px-2 py-1 text-xs font-medium border-sky-500 bg-sky-600 text-white hover:bg-sky-700 shadow-sm dark:border-sky-700 dark:bg-sky-950 dark:text-sky-100 dark:hover:bg-sky-900"
|
||||
>
|
||||
<FilePlus2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{p.toolbarCreateNew}</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<table className="w-full text-xs text-left border-collapse mt-2">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 text-slate-600 dark:border-slate-800 dark: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={p.tableHeaderSelectAllAria}
|
||||
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">{p.tableHeaderTitle}</th>
|
||||
<th className="py-2 pr-4">{p.tableHeaderSlug}</th>
|
||||
<th className="py-2 pr-4">{p.tableHeaderStatus}</th>
|
||||
<th className="py-2 pr-4">{p.tableHeaderCreatedAt}</th>
|
||||
<th className="py-2 pr-4">{p.tableHeaderUpdatedAt}</th>
|
||||
<th className="py-2 pr-4 text-right">{p.tableHeaderActions}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{pageProjects.map((project) => {
|
||||
const checked = selectedSlugs.includes(project.slug);
|
||||
return (
|
||||
<tr
|
||||
key={project.id}
|
||||
className="border-b border-slate-200 hover:bg-slate-50 dark:border-slate-900 dark: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}${p.tableRowSelectAriaSuffix}`}
|
||||
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-900 dark:text-slate-100">{project.title}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300 font-mono text-[11px]">{project.slug}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{project.status}</td>
|
||||
<td className="py-2 pr-4 text-slate-500 dark:text-slate-400 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-600 hover:text-sky-700 underline-offset-2 hover:underline dark:text-sky-300 dark:hover:text-sky-200"
|
||||
>
|
||||
<Pencil className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{p.actionEdit}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/preview?slug=${encodeURIComponent(project.slug)}`}
|
||||
className="inline-flex items-center gap-1 text-slate-600 hover:text-slate-800 underline-offset-2 hover:underline dark:text-slate-300 dark:hover:text-slate-100"
|
||||
>
|
||||
<Eye className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{p.actionPreview}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/projects/${encodeURIComponent(project.slug)}/submissions`}
|
||||
className="inline-flex items-center gap-1 text-emerald-600 hover:text-emerald-700 underline-offset-2 hover:underline dark:text-emerald-300 dark:hover:text-emerald-100"
|
||||
>
|
||||
<ListChecks className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{p.actionViewSubmissions}</span>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 text-red-600 hover:text-red-700 underline-offset-2 hover:underline dark:text-red-300 dark:hover:text-red-200"
|
||||
onClick={() => {
|
||||
void handleDelete(project.slug);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{p.actionDelete}</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="mt-3 flex items-center justify-between text-[11px] text-slate-600 dark:text-slate-300">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="px-2 py-1 rounded-full bg-slate-100 border border-slate-300 text-slate-700 dark:bg-slate-900/70 dark:border-slate-700 dark:text-slate-200">
|
||||
{p.pagerTotalPrefix}
|
||||
{totalCount}
|
||||
{p.pagerTotalCountSuffix}
|
||||
<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-white text-slate-700 border-slate-300 hover:bg-slate-100 dark:bg-slate-900 dark:text-slate-300 dark:border-slate-700 dark: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-300 text-slate-700 bg-white disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:bg-slate-900 dark:hover:bg-slate-800"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
<ChevronLeft className="w-3 h-3" aria-hidden="true" />
|
||||
<span>{p.pagerPrevLabel}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={currentPage === totalPages}
|
||||
className="inline-flex items-center gap-1 px-2 py-1 rounded border border-slate-300 text-slate-700 bg-white disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:bg-slate-900 dark:hover:bg-slate-800"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
>
|
||||
<span>{p.pagerNextLabel}</span>
|
||||
<ChevronRight className="w-3 h-3" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,257 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
|
||||
import { getSubmissionsMessages } from "@/features/i18n/messages/submissions";
|
||||
|
||||
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 locale = useAppLocale();
|
||||
const t = getDashboardMessages(locale);
|
||||
const m = getSubmissionsMessages(locale);
|
||||
const [submissions, setSubmissions] = useState<SubmissionItem[]>([]);
|
||||
const [status, setStatus] = useState<PageStatus>("idle");
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
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(m.errorUnauthorized);
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("error");
|
||||
setErrorMessage(m.errorGeneric);
|
||||
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(m.errorGeneric);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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");
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/auth/logout", {
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
setErrorMessage(m.errorLogout);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push("/login");
|
||||
} catch {
|
||||
setErrorMessage(m.errorLogout);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{m.headerTitle}</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">{m.headerDescription}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navDashboard}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
|
||||
>
|
||||
<FolderKanban className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navProjects}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects/submissions"
|
||||
aria-current="page"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-semibold bg-emerald-600 text-white shadow-sm hover:bg-emerald-700"
|
||||
>
|
||||
<ListChecks className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.navSubmissions}</span>
|
||||
</Link>
|
||||
</nav>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
if (typeof document === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
const root = document.documentElement;
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
root.classList.toggle("dark");
|
||||
}}
|
||||
>
|
||||
<SunMoon className="w-4 h-4" aria-hidden="true" />
|
||||
<span>{t.themeToggleLabel}</span>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
{t.menuLabel}
|
||||
</button>
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full px-3 py-2 text-left text-xs text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
setIsMenuOpen(false);
|
||||
void handleLogout();
|
||||
}}
|
||||
>
|
||||
{t.logoutLabel}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="flex-1 px-6 py-4 overflow-auto bg-slate-50/60 dark:bg-transparent">
|
||||
{status === "error" && errorMessage && (
|
||||
<p className="text-xs text-red-500 mb-3 dark:text-red-300">{errorMessage}</p>
|
||||
)}
|
||||
|
||||
{status === "loading" && (
|
||||
<p className="text-xs text-slate-500 mb-3 dark:text-slate-400">{m.loadingText}</p>
|
||||
)}
|
||||
|
||||
{status === "idle" && !errorMessage && submissions.length === 0 && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{m.emptyText}</p>
|
||||
)}
|
||||
|
||||
{submissions.length > 0 && (
|
||||
<table className="w-full text-xs text-left border-collapse mt-2">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 text-slate-600 dark:border-slate-800 dark:text-slate-400">
|
||||
<th className="py-2 pr-4">{m.tableHeaderCreatedAt}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderProject}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderSlug}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderName}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderEmail}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderPhone}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderBirthdate}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderOtherFields}</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-200 hover:bg-slate-50 dark:border-slate-900 dark:hover:bg-slate-900/60"
|
||||
>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300 text-[11px]">
|
||||
{new Date(item.createdAt).toLocaleString()}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-slate-900 dark:text-slate-100">{item.projectTitle ?? "-"}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{item.projectSlug}</td>
|
||||
<td className="py-2 pr-4 text-slate-900 dark:text-slate-100">{name}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{email}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{phone}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{birthdate}</td>
|
||||
<td className="py-2 pr-4 text-slate-600 dark:text-slate-300 whitespace-pre-wrap">
|
||||
{renderOtherFields(payload)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,219 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getAuthMessages } from "@/features/i18n/messages/auth";
|
||||
|
||||
type PasswordStrengthLabel = "weak" | "medium" | "strong";
|
||||
|
||||
function getPasswordStrengthLabel(password: string): PasswordStrengthLabel | null {
|
||||
if (!password || password.length < 4) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let score = 0;
|
||||
if (/[a-z]/.test(password)) score += 1;
|
||||
if (/[A-Z]/.test(password)) score += 1;
|
||||
if (/[0-9]/.test(password)) score += 1;
|
||||
if (/[^a-zA-Z0-9]/.test(password)) score += 1;
|
||||
if (password.length >= 12) score += 1;
|
||||
|
||||
if (password.length < 8 || score <= 2) {
|
||||
return "weak";
|
||||
}
|
||||
|
||||
if (score === 3) {
|
||||
return "medium";
|
||||
}
|
||||
|
||||
return "strong";
|
||||
}
|
||||
|
||||
export default function SignupPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const locale = useAppLocale();
|
||||
const { signup: t } = getAuthMessages(locale);
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [passwordConfirm, setPasswordConfirm] = 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("/dashboard");
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
void checkAuth();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
setError(null);
|
||||
if (password !== passwordConfirm) {
|
||||
setError(t.mismatchError);
|
||||
return;
|
||||
}
|
||||
|
||||
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 ?? t.signupFailedFallbackError);
|
||||
} catch {
|
||||
setError(t.signupFailedFallbackError);
|
||||
}
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push("/dashboard");
|
||||
} catch {
|
||||
setError(t.errorNetwork);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const strengthLabel = getPasswordStrengthLabel(password);
|
||||
let strengthText: string | null = null;
|
||||
if (strengthLabel) {
|
||||
strengthText =
|
||||
strengthLabel === "weak"
|
||||
? t.passwordStrengthWeak
|
||||
: strengthLabel === "medium"
|
||||
? t.passwordStrengthMedium
|
||||
: t.passwordStrengthStrong;
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen flex items-center justify-center bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<div className="w-full max-w-sm rounded-lg border border-slate-200 bg-white p-6 shadow-xl dark:border-slate-800 dark:bg-slate-900/70">
|
||||
<h1 className="text-lg font-semibold mb-1">{t.title}</h1>
|
||||
<p className="text-xs text-slate-500 mb-4 dark:text-slate-400">{t.description}</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-800 dark:text-slate-200">
|
||||
{t.emailLabel}
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="password" className="block text-slate-800 dark:text-slate-200">
|
||||
{t.passwordLabel}
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{strengthLabel && (
|
||||
<div className="mt-1 space-y-1">
|
||||
<div className="h-1.5 rounded-full bg-slate-200/70 dark:bg-slate-700/70 overflow-hidden">
|
||||
<div
|
||||
data-testid="password-strength-bar"
|
||||
className={
|
||||
"h-full transition-all " +
|
||||
(strengthLabel === "weak"
|
||||
? "w-1/3 bg-red-500"
|
||||
: strengthLabel === "medium"
|
||||
? "w-2/3 bg-amber-500"
|
||||
: "w-full bg-emerald-600")
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className={
|
||||
"text-[11px] " +
|
||||
(strengthLabel === "weak"
|
||||
? "text-red-500 dark:text-red-300"
|
||||
: strengthLabel === "medium"
|
||||
? "text-amber-500 dark:text-amber-300"
|
||||
: "text-emerald-600 dark:text-emerald-300")
|
||||
}
|
||||
>
|
||||
{t.passwordStrengthPrefix} {strengthText}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="passwordConfirm" className="block text-slate-800 dark:text-slate-200">
|
||||
{t.passwordConfirmLabel}
|
||||
</label>
|
||||
<input
|
||||
id="passwordConfirm"
|
||||
type="password"
|
||||
value={passwordConfirm}
|
||||
onChange={(e) => setPasswordConfirm(e.target.value)}
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
|
||||
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 ? t.submitLoading : t.submitIdle}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-4 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
{t.loginPromptPrefix}
|
||||
{" "}
|
||||
<Link href="/login" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
|
||||
{t.loginLinkText}
|
||||
</Link>
|
||||
{t.loginPromptSuffix && " "}
|
||||
{t.loginPromptSuffix}
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,146 +0,0 @@
|
||||
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("민감정보 복호화에 실패했습니다.");
|
||||
}
|
||||
}
|
||||
@@ -1,187 +0,0 @@
|
||||
import type { ChangeEvent } from "react";
|
||||
import { useState } from "react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorColorPickerFieldMessages } from "@/features/i18n/messages/editorColorPickerField";
|
||||
|
||||
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: "" },
|
||||
// 투명
|
||||
{ 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 locale = useAppLocale();
|
||||
const m = getEditorColorPickerFieldMessages(locale);
|
||||
|
||||
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 {
|
||||
// value 가 빈 문자열이어도 color 가 "" 인 팔레트 항목(예: "없음")을 선택된 상태로 인식할 수 있도록
|
||||
// 항상 color 매칭으로 selectedPalette 를 계산한다.
|
||||
selectedPalette = palette.find((item) => item.color === value) ?? null;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1 text-xs text-slate-500 dark: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-300 bg-white p-0 dark:border-slate-700 dark:bg-slate-900"
|
||||
value={colorInputValue}
|
||||
onChange={handleColorInputChange}
|
||||
/>
|
||||
<input
|
||||
className="w-28 flex-none rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={ariaLabelHexInput}
|
||||
placeholder={m.hexPlaceholder}
|
||||
value={value}
|
||||
onChange={handleHexInputChange}
|
||||
/>
|
||||
{palette.length > 0 ? (
|
||||
<div className="relative text-[11px] flex-none">
|
||||
<button
|
||||
type="button"
|
||||
className="w-28 rounded border border-slate-300 bg-white flex items-center justify-between px-2 py-1 text-left text-slate-900 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100"
|
||||
onClick={() => setOpen((prev) => !prev)}
|
||||
>
|
||||
<span className="flex items-center gap-1">
|
||||
<span
|
||||
className="inline-block h-3 w-3 rounded-full border border-slate-300 dark:border-slate-700"
|
||||
style={{ backgroundColor: selectedPalette?.color ?? value ?? "#ffffff" }}
|
||||
/>
|
||||
<span className="truncate text-slate-700 dark:text-slate-100">
|
||||
{selectedPalette
|
||||
? m.paletteLabels[selectedPalette.id] ?? selectedPalette.label
|
||||
: m.dropdownLabelDefault}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-slate-400 dark:text-slate-500 text-[10px]">▼</span>
|
||||
</button>
|
||||
{open ? (
|
||||
<div className="absolute right-0 top-full mt-1 w-32 rounded border border-slate-300 bg-white max-h-40 overflow-auto z-10 dark:border-slate-800 dark:bg-slate-950">
|
||||
{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-200 last:border-b-0 dark:border-slate-800 ${
|
||||
selectedPaletteId === item.id
|
||||
? "bg-sky-100 text-sky-900 dark:bg-sky-900/40 dark:text-sky-100"
|
||||
: "bg-white text-slate-900 hover:bg-slate-100 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
}`}
|
||||
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 border border-slate-300 dark:border-slate-700"
|
||||
style={{ backgroundColor: item.color }}
|
||||
/>
|
||||
<span>{m.paletteLabels[item.id] ?? item.label}</span>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
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-500 dark: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-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
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} 커스텀`}
|
||||
value={Number.isFinite(value) ? value : 0}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
onChange={onChangeValue}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
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-500 dark: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-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label={ariaLabelInput}
|
||||
value={Number.isFinite(value) ? value : ""}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,290 +0,0 @@
|
||||
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,
|
||||
};
|
||||
}
|
||||
@@ -1,164 +0,0 @@
|
||||
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,
|
||||
};
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,150 +0,0 @@
|
||||
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,
|
||||
};
|
||||
}
|
||||
@@ -1,192 +0,0 @@
|
||||
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,
|
||||
};
|
||||
};
|
||||
@@ -1,298 +0,0 @@
|
||||
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,
|
||||
};
|
||||
}
|
||||
@@ -1,371 +0,0 @@
|
||||
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,
|
||||
};
|
||||
}
|
||||
@@ -1,231 +0,0 @@
|
||||
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,
|
||||
};
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { buildStaticHtml } from "@/app/api/export/route";
|
||||
@@ -1,39 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { createContext, useContext, useState } from "react";
|
||||
import type { AppLocale } from "./locale";
|
||||
import { DEFAULT_LOCALE } from "./locale";
|
||||
|
||||
type LocaleContextValue = {
|
||||
locale: AppLocale;
|
||||
setLocale: (locale: AppLocale) => void;
|
||||
};
|
||||
|
||||
const LocaleContext = createContext<LocaleContextValue>({
|
||||
locale: DEFAULT_LOCALE,
|
||||
setLocale: () => {
|
||||
// no-op default
|
||||
},
|
||||
});
|
||||
|
||||
export function LocaleProvider({
|
||||
initialLocale,
|
||||
children,
|
||||
}: {
|
||||
initialLocale: AppLocale;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const [locale, setLocale] = useState<AppLocale>(initialLocale);
|
||||
|
||||
return <LocaleContext.Provider value={{ locale, setLocale }}>{children}</LocaleContext.Provider>;
|
||||
}
|
||||
|
||||
export function useAppLocale(): AppLocale {
|
||||
return useContext(LocaleContext).locale;
|
||||
}
|
||||
|
||||
export function useLocaleActions() {
|
||||
const { setLocale } = useContext(LocaleContext);
|
||||
return { setLocale };
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useAppLocale, useLocaleActions } from "./LocaleProvider";
|
||||
import type { AppLocale } from "./locale";
|
||||
|
||||
export function LocaleSwitcher() {
|
||||
const locale = useAppLocale();
|
||||
const { setLocale } = useLocaleActions();
|
||||
|
||||
const handleToggle = () => {
|
||||
const nextLocale: AppLocale = locale === "en" ? "ko" : "en";
|
||||
setLocale(nextLocale);
|
||||
|
||||
try {
|
||||
const maxAgeSeconds = 60 * 60 * 24 * 365; // 1 year
|
||||
document.cookie = `pb-locale=${nextLocale}; path=/; max-age=${maxAgeSeconds}`;
|
||||
} catch {
|
||||
// 쿠키 저장 실패는 무시 (로케일 상태는 여전히 컨텍스트에서 유지된다)
|
||||
}
|
||||
};
|
||||
|
||||
const labelText = locale === "en" ? "EN" : "KO";
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-50 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Toggle locale"
|
||||
className="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white/80 px-2 py-1 text-slate-700 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/80 dark:text-slate-100"
|
||||
onClick={handleToggle}
|
||||
>
|
||||
{labelText}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
export const SUPPORTED_LOCALES = ["en", "ko"] as const;
|
||||
export type AppLocale = (typeof SUPPORTED_LOCALES)[number];
|
||||
|
||||
// 기본 로케일은 항상 en
|
||||
export const DEFAULT_LOCALE: AppLocale = "en";
|
||||
|
||||
// Accept-Language 헤더 문자열에서 앱 로케일(en/ko)을 결정한다.
|
||||
// - ko 가 포함되어 있으면 ko
|
||||
// - 그렇지 않으면 기본(en)
|
||||
export function resolveLocaleFromAcceptLanguage(header: string | null | undefined): AppLocale {
|
||||
if (!header) {
|
||||
return DEFAULT_LOCALE;
|
||||
}
|
||||
|
||||
const value = header.toLowerCase();
|
||||
|
||||
if (value.includes("ko")) {
|
||||
return "ko";
|
||||
}
|
||||
|
||||
return DEFAULT_LOCALE;
|
||||
}
|
||||
@@ -1,120 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type LoginMessages = {
|
||||
title: string;
|
||||
description: string;
|
||||
emailLabel: string;
|
||||
passwordLabel: string;
|
||||
submitIdle: string;
|
||||
submitLoading: string;
|
||||
themeToggleLabel: string;
|
||||
errorLoginFailed: string;
|
||||
errorNetwork: string;
|
||||
signupPromptPrefix: string;
|
||||
signupLinkText: string;
|
||||
signupPromptSuffix: string;
|
||||
};
|
||||
|
||||
export type SignupMessages = {
|
||||
title: string;
|
||||
description: string;
|
||||
emailLabel: string;
|
||||
passwordLabel: string;
|
||||
passwordConfirmLabel: string;
|
||||
submitIdle: string;
|
||||
submitLoading: string;
|
||||
mismatchError: string;
|
||||
signupFailedFallbackError: string;
|
||||
errorNetwork: string;
|
||||
passwordStrengthPrefix: string;
|
||||
passwordStrengthWeak: string;
|
||||
passwordStrengthMedium: string;
|
||||
passwordStrengthStrong: string;
|
||||
loginPromptPrefix: string;
|
||||
loginLinkText: string;
|
||||
loginPromptSuffix: string;
|
||||
};
|
||||
|
||||
export type AuthMessages = {
|
||||
login: LoginMessages;
|
||||
signup: SignupMessages;
|
||||
};
|
||||
|
||||
const AUTH_MESSAGES: Record<AppLocale, AuthMessages> = {
|
||||
en: {
|
||||
login: {
|
||||
title: "Log in",
|
||||
description: "Sign in to manage and save your projects.",
|
||||
emailLabel: "Email",
|
||||
passwordLabel: "Password",
|
||||
submitIdle: "Log in",
|
||||
submitLoading: "Logging in...",
|
||||
themeToggleLabel: "Toggle theme",
|
||||
errorLoginFailed: "Failed to log in. Please try again.",
|
||||
errorNetwork: "A network error occurred. Please try again later.",
|
||||
signupPromptPrefix: "Don't have an account yet?",
|
||||
signupLinkText: "Sign up",
|
||||
signupPromptSuffix: "",
|
||||
},
|
||||
signup: {
|
||||
title: "Sign up",
|
||||
description: "Create a new account to save and manage your projects.",
|
||||
emailLabel: "Email",
|
||||
passwordLabel: "Password",
|
||||
passwordConfirmLabel: "Confirm password",
|
||||
submitIdle: "Sign up",
|
||||
submitLoading: "Signing up...",
|
||||
mismatchError: "Password and confirmation do not match.",
|
||||
signupFailedFallbackError: "Failed to sign up. Please try again.",
|
||||
errorNetwork: "A network error occurred. Please try again later.",
|
||||
passwordStrengthPrefix: "Password strength:",
|
||||
passwordStrengthWeak: "Weak",
|
||||
passwordStrengthMedium: "Medium",
|
||||
passwordStrengthStrong: "Strong",
|
||||
loginPromptPrefix: "Already have an account?",
|
||||
loginLinkText: "Log in",
|
||||
loginPromptSuffix: "",
|
||||
},
|
||||
},
|
||||
ko: {
|
||||
login: {
|
||||
title: "로그인",
|
||||
description: "프로젝트를 관리하려면 먼저 계정으로 로그인하세요.",
|
||||
emailLabel: "이메일",
|
||||
passwordLabel: "비밀번호",
|
||||
submitIdle: "로그인",
|
||||
submitLoading: "로그인 중...",
|
||||
themeToggleLabel: "테마 전환",
|
||||
errorLoginFailed: "로그인에 실패했습니다. 다시 시도해 주세요.",
|
||||
errorNetwork: "네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
|
||||
signupPromptPrefix: "아직 계정이 없다면",
|
||||
signupLinkText: "회원가입",
|
||||
signupPromptSuffix: "을 진행해 주세요.",
|
||||
},
|
||||
signup: {
|
||||
title: "회원가입",
|
||||
description: "새 계정을 생성한 뒤 프로젝트를 저장하고 관리할 수 있습니다.",
|
||||
emailLabel: "이메일",
|
||||
passwordLabel: "비밀번호",
|
||||
passwordConfirmLabel: "비밀번호 확인",
|
||||
submitIdle: "회원가입",
|
||||
submitLoading: "회원가입 중...",
|
||||
mismatchError: "비밀번호와 비밀번호 확인이 일치하지 않습니다.",
|
||||
signupFailedFallbackError: "회원가입에 실패했습니다. 다시 시도해 주세요.",
|
||||
errorNetwork: "네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
|
||||
passwordStrengthPrefix: "비밀번호 난이도:",
|
||||
passwordStrengthWeak: "약함",
|
||||
passwordStrengthMedium: "보통",
|
||||
passwordStrengthStrong: "강함",
|
||||
loginPromptPrefix: "이미 계정이 있다면",
|
||||
loginLinkText: "로그인",
|
||||
loginPromptSuffix: "으로 이동해 주세요.",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export function getAuthMessages(locale: AppLocale | null | undefined): AuthMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return AUTH_MESSAGES[key] ?? AUTH_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
// 대시보드/프로젝트 목록/전체 제출 내역 상단 GNB 및 헤더용 i18n 메시지
|
||||
// - 로그인/회원가입과 동일하게 en(기본), ko 를 지원한다.
|
||||
|
||||
export type DashboardMessages = {
|
||||
// 메인 대시보드 헤더 제목/설명
|
||||
title: string;
|
||||
description: string;
|
||||
// 상단 GNB 탭 레이블
|
||||
navDashboard: string;
|
||||
navProjects: string;
|
||||
navSubmissions: string;
|
||||
// 헤더 오른쪽 액션 버튼/메뉴
|
||||
themeToggleLabel: string;
|
||||
menuLabel: string;
|
||||
logoutLabel: string;
|
||||
summaryTotalProjectsLabel: string;
|
||||
summaryTotalSubmissionsLabel: string;
|
||||
summaryTodaySubmissionsLabel: string;
|
||||
summaryLast7DaysSubmissionsLabel: string;
|
||||
chartTitle: string;
|
||||
chartSubtitle: string;
|
||||
chartEmptyLabel: string;
|
||||
sectionProjectsTitle: string;
|
||||
sectionProjectsEmpty: string;
|
||||
projectTotalSubmissionsPrefix: string;
|
||||
projectTotalSubmissionsSuffix: string;
|
||||
projectLatestSubmissionPrefix: string;
|
||||
projectLatestSubmissionEmpty: string;
|
||||
projectViewSubmissionsLink: string;
|
||||
projectOpenPublicPageLink: string;
|
||||
errorUnauthorized: string;
|
||||
errorGeneric: string;
|
||||
loadingText: string;
|
||||
};
|
||||
|
||||
const DASHBOARD_MESSAGES: Record<AppLocale, DashboardMessages> = {
|
||||
en: {
|
||||
title: "Dashboard",
|
||||
description: "A quick overview of your projects and form submissions.",
|
||||
navDashboard: "Dashboard",
|
||||
navProjects: "Projects",
|
||||
navSubmissions: "All submissions",
|
||||
themeToggleLabel: "Toggle theme",
|
||||
menuLabel: "Menu",
|
||||
logoutLabel: "Log out",
|
||||
summaryTotalProjectsLabel: "Projects",
|
||||
summaryTotalSubmissionsLabel: "Total form submissions",
|
||||
summaryTodaySubmissionsLabel: "Submissions today",
|
||||
summaryLast7DaysSubmissionsLabel: "Submissions in last 7 days",
|
||||
chartTitle: "Recent submissions (daily)",
|
||||
chartSubtitle: "Only dates with recent activity are shown.",
|
||||
chartEmptyLabel: "No daily submission data yet.",
|
||||
sectionProjectsTitle: "Submissions by project",
|
||||
sectionProjectsEmpty: "No projects created yet or no submissions have been received.",
|
||||
projectTotalSubmissionsPrefix: "Total ",
|
||||
projectTotalSubmissionsSuffix: " submissions",
|
||||
projectLatestSubmissionPrefix: "Last submission:",
|
||||
projectLatestSubmissionEmpty: "No submissions yet",
|
||||
projectViewSubmissionsLink: "View form submissions",
|
||||
projectOpenPublicPageLink: "Open public page",
|
||||
errorUnauthorized: "You need to be signed in to view the dashboard. Please log in again.",
|
||||
errorGeneric: "An error occurred while loading the dashboard. Please try again later.",
|
||||
loadingText: "Loading dashboard data...",
|
||||
},
|
||||
ko: {
|
||||
title: "대시보드",
|
||||
description: "프로젝트와 폼 제출 현황을 한눈에 확인할 수 있는 요약 화면입니다.",
|
||||
navDashboard: "대시보드",
|
||||
navProjects: "프로젝트 목록",
|
||||
navSubmissions: "전체 제출 내역",
|
||||
themeToggleLabel: "테마 전환",
|
||||
menuLabel: "메뉴",
|
||||
logoutLabel: "로그아웃",
|
||||
summaryTotalProjectsLabel: "프로젝트 수",
|
||||
summaryTotalSubmissionsLabel: "전체 폼 제출 수",
|
||||
summaryTodaySubmissionsLabel: "오늘 제출 수",
|
||||
summaryLast7DaysSubmissionsLabel: "최근 7일 제출 수",
|
||||
chartTitle: "최근 제출 추이 (일별)",
|
||||
chartSubtitle: "최근 활동이 있는 날짜만 표시됩니다.",
|
||||
chartEmptyLabel: "아직 일별 제출 내역이 없습니다.",
|
||||
sectionProjectsTitle: "프로젝트별 제출 현황",
|
||||
sectionProjectsEmpty: "아직 생성된 프로젝트가 없거나 제출 내역이 없습니다.",
|
||||
projectTotalSubmissionsPrefix: "총 제출 ",
|
||||
projectTotalSubmissionsSuffix: "건",
|
||||
projectLatestSubmissionPrefix: "최근 제출:",
|
||||
projectLatestSubmissionEmpty: "제출 내역 없음",
|
||||
projectViewSubmissionsLink: "폼 제출 내역 보기",
|
||||
projectOpenPublicPageLink: "퍼블릭 페이지 열기",
|
||||
errorUnauthorized:
|
||||
"대시보드를 보려면 로그인이 필요합니다. 다시 로그인해 주세요.",
|
||||
errorGeneric:
|
||||
"대시보드 데이터를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
|
||||
loadingText: "대시보드 데이터를 불러오는 중입니다...",
|
||||
},
|
||||
};
|
||||
|
||||
export function getDashboardMessages(locale: AppLocale | null | undefined): DashboardMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return DASHBOARD_MESSAGES[key] ?? DASHBOARD_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,164 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorMessages = {
|
||||
headerTitle: string;
|
||||
headerDescription: string;
|
||||
navProjects: string;
|
||||
navPreview: string;
|
||||
undoLabel: string;
|
||||
redoLabel: string;
|
||||
menuLabel: string;
|
||||
menuProjectSaveLoad: string;
|
||||
menuJsonImportExport: string;
|
||||
menuExportZip: string;
|
||||
menuClearCanvas: string;
|
||||
menuDeleteProject: string;
|
||||
confirmClearCanvas: string;
|
||||
confirmDeleteProject: string;
|
||||
modalProjectTitle: string;
|
||||
modalProjectTitleLabel: string;
|
||||
modalProjectSlugLabel: string;
|
||||
modalSaveButton: string;
|
||||
modalLoadButton: string;
|
||||
projectMessageSlugRequired: string;
|
||||
projectMessageSaveFailed: string;
|
||||
projectMessageSaveError: string;
|
||||
projectMessageSaveSuccessPrefix: string;
|
||||
projectMessageLoadSlugRequired: string;
|
||||
projectMessageLoadFailed: string;
|
||||
projectMessageLoadLocalSuccessPrefix: string;
|
||||
projectMessageLoadServerSuccessPrefix: string;
|
||||
projectMessageInvalidFormat: string;
|
||||
projectMessageLoadError: string;
|
||||
projectMessageDeleteSlugMissing: string;
|
||||
projectMessageDeleteFailed: string;
|
||||
projectMessageDeleteSuccess: string;
|
||||
projectMessageDeleteError: string;
|
||||
jsonModalTitle: string;
|
||||
jsonModalSubtitle: string;
|
||||
jsonExportButton: string;
|
||||
jsonClearCanvasButton: string;
|
||||
jsonEditorStateLabel: string;
|
||||
jsonImportLabel: string;
|
||||
jsonApplyButton: string;
|
||||
listItemToolbarMoveUpLabel: string;
|
||||
listItemToolbarMoveDownLabel: string;
|
||||
listItemToolbarIndentLabel: string;
|
||||
listItemToolbarOutdentLabel: string;
|
||||
|
||||
imageBlockEmptyPreviewPlaceholder: string;
|
||||
columnAreaLabel: string;
|
||||
};
|
||||
|
||||
const EDITOR_MESSAGES: Record<AppLocale, EditorMessages> = {
|
||||
en: {
|
||||
headerTitle: "Page Editor",
|
||||
headerDescription: "Build and edit your landing pages with a visual editor.",
|
||||
navProjects: "Projects",
|
||||
navPreview: "Open preview",
|
||||
undoLabel: "Undo",
|
||||
redoLabel: "Redo",
|
||||
menuLabel: "Menu",
|
||||
menuProjectSaveLoad: "Save / load project",
|
||||
menuJsonImportExport: "JSON export / import",
|
||||
menuExportZip: "Export as page files (ZIP)",
|
||||
menuClearCanvas: "Clear canvas",
|
||||
menuDeleteProject: "Delete project",
|
||||
confirmClearCanvas:
|
||||
"Clear all blocks on the canvas? This can only be undone with the undo history.",
|
||||
confirmDeleteProject:
|
||||
"Delete the current project? This cannot be undone. Local and autosave data will also be removed.",
|
||||
modalProjectTitle: "Save / load project",
|
||||
modalProjectTitleLabel: "Project title",
|
||||
modalProjectSlugLabel: "Project address (e.g. my-landing)",
|
||||
modalSaveButton: "Save (local + server)",
|
||||
modalLoadButton: "Load",
|
||||
projectMessageSlugRequired: "Please enter a project address.",
|
||||
projectMessageSaveFailed: "Failed to save the project.",
|
||||
projectMessageSaveError: "An error occurred while saving the project.",
|
||||
projectMessageSaveSuccessPrefix: "Project saved: ",
|
||||
projectMessageLoadSlugRequired: "Please enter an address to load.",
|
||||
projectMessageLoadFailed: "Failed to load the project.",
|
||||
projectMessageLoadLocalSuccessPrefix: "Loaded project from local: ",
|
||||
projectMessageLoadServerSuccessPrefix: "Loaded project from server: ",
|
||||
projectMessageInvalidFormat: "Project data format is invalid.",
|
||||
projectMessageLoadError: "An error occurred while loading the project.",
|
||||
projectMessageDeleteSlugMissing: "There is no project address to delete.",
|
||||
projectMessageDeleteFailed: "Failed to delete the project.",
|
||||
projectMessageDeleteSuccess: "Project deleted.",
|
||||
projectMessageDeleteError: "An error occurred while deleting the project.",
|
||||
jsonModalTitle: "JSON Export / Import",
|
||||
jsonModalSubtitle: "* Import or export the current editor state as JSON.",
|
||||
jsonExportButton: "Export JSON",
|
||||
jsonClearCanvasButton: "Clear canvas",
|
||||
jsonEditorStateLabel: "Editor state JSON",
|
||||
jsonImportLabel: "Import from JSON",
|
||||
jsonApplyButton: "Apply JSON",
|
||||
listItemToolbarMoveUpLabel: "Move item up",
|
||||
listItemToolbarMoveDownLabel: "Move item down",
|
||||
listItemToolbarIndentLabel: "Indent item",
|
||||
listItemToolbarOutdentLabel: "Outdent item",
|
||||
|
||||
imageBlockEmptyPreviewPlaceholder:
|
||||
"Enter an image URL or upload a file to see the preview here.",
|
||||
columnAreaLabel: "Column area",
|
||||
},
|
||||
ko: {
|
||||
headerTitle: "페이지 에디터",
|
||||
headerDescription: "랜딩 페이지를 시각적으로 구성할 수 있는 에디터입니다.",
|
||||
navProjects: "프로젝트 목록",
|
||||
navPreview: "프리뷰 열기",
|
||||
undoLabel: "실행 취소",
|
||||
redoLabel: "다시 실행",
|
||||
menuLabel: "메뉴",
|
||||
menuProjectSaveLoad: "프로젝트 저장/불러오기",
|
||||
menuJsonImportExport: "JSON 내보내기/불러오기",
|
||||
menuExportZip: "페이지 파일로 내보내기 (ZIP)",
|
||||
menuClearCanvas: "캔버스 초기화",
|
||||
menuDeleteProject: "프로젝트 삭제",
|
||||
confirmClearCanvas:
|
||||
"캔버스를 모두 초기화할까요? 이 작업은 실행 취소 히스토리로만 되돌릴 수 있습니다.",
|
||||
confirmDeleteProject:
|
||||
"현재 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
|
||||
modalProjectTitle: "프로젝트 저장 / 불러오기",
|
||||
modalProjectTitleLabel: "프로젝트 제목",
|
||||
modalProjectSlugLabel: "프로젝트 주소 (예: my-landing)",
|
||||
modalSaveButton: "저장 (로컬 + 서버)",
|
||||
modalLoadButton: "불러오기",
|
||||
projectMessageSlugRequired: "프로젝트 주소를 입력해 주세요.",
|
||||
projectMessageSaveFailed: "프로젝트 저장에 실패했습니다.",
|
||||
projectMessageSaveError: "프로젝트 저장 중 오류가 발생했습니다.",
|
||||
projectMessageSaveSuccessPrefix: "프로젝트가 저장되었습니다: ",
|
||||
projectMessageLoadSlugRequired: "불러올 주소를 입력해 주세요.",
|
||||
projectMessageLoadFailed: "프로젝트를 불러오지 못했습니다.",
|
||||
projectMessageLoadLocalSuccessPrefix: "로컬에서 프로젝트를 불러왔습니다: ",
|
||||
projectMessageLoadServerSuccessPrefix: "프로젝트를 불러왔습니다: ",
|
||||
projectMessageInvalidFormat: "프로젝트 데이터 형식이 올바르지 않습니다.",
|
||||
projectMessageLoadError: "프로젝트 불러오기 중 오류가 발생했습니다.",
|
||||
projectMessageDeleteSlugMissing: "삭제할 프로젝트 주소가 없습니다.",
|
||||
projectMessageDeleteFailed: "프로젝트 삭제에 실패했습니다.",
|
||||
projectMessageDeleteSuccess: "프로젝트가 삭제되었습니다.",
|
||||
projectMessageDeleteError: "프로젝트 삭제 중 오류가 발생했습니다.",
|
||||
jsonModalTitle: "JSON Export / Import",
|
||||
jsonModalSubtitle: "* 에디터 내용을 가져오거나 내보낼 수 있습니다.",
|
||||
jsonExportButton: "JSON 내보내기",
|
||||
jsonClearCanvasButton: "캔버스 초기화",
|
||||
jsonEditorStateLabel: "에디터 상태 JSON",
|
||||
jsonImportLabel: "JSON에서 불러오기",
|
||||
jsonApplyButton: "JSON 적용하기",
|
||||
listItemToolbarMoveUpLabel: "아이템 위로 이동",
|
||||
listItemToolbarMoveDownLabel: "아이템 아래로 이동",
|
||||
listItemToolbarIndentLabel: "아이템 들여쓰기",
|
||||
listItemToolbarOutdentLabel: "아이템 내어쓰기",
|
||||
|
||||
imageBlockEmptyPreviewPlaceholder:
|
||||
"이미지 URL 을 입력하거나 파일을 업로드하면 여기에서 미리보기가 표시됩니다.",
|
||||
columnAreaLabel: "컬럼 영역",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorMessages(locale: AppLocale | null | undefined): EditorMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_MESSAGES[key] ?? EDITOR_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorBlockDefaultsMessages = {
|
||||
text: {
|
||||
defaultText: string;
|
||||
};
|
||||
list: {
|
||||
firstItemText: string;
|
||||
};
|
||||
button: {
|
||||
label: string;
|
||||
};
|
||||
form: {
|
||||
nameLabel: string;
|
||||
emailLabel: string;
|
||||
messageLabel: string;
|
||||
successMessage: string;
|
||||
errorMessage: string;
|
||||
};
|
||||
formInput: {
|
||||
label: string;
|
||||
};
|
||||
formSelect: {
|
||||
label: string;
|
||||
option1Label: string;
|
||||
option2Label: string;
|
||||
};
|
||||
formCheckbox: {
|
||||
groupLabel: string;
|
||||
option1Label: string;
|
||||
option2Label: string;
|
||||
};
|
||||
formRadio: {
|
||||
groupLabel: string;
|
||||
optionALabel: string;
|
||||
optionBLabel: string;
|
||||
};
|
||||
};
|
||||
|
||||
const EDITOR_BLOCK_DEFAULTS_MESSAGES: Record<AppLocale, EditorBlockDefaultsMessages> = {
|
||||
en: {
|
||||
text: {
|
||||
defaultText: "New text",
|
||||
},
|
||||
list: {
|
||||
firstItemText: "List item 1",
|
||||
},
|
||||
button: {
|
||||
label: "Button",
|
||||
},
|
||||
form: {
|
||||
nameLabel: "Name",
|
||||
emailLabel: "Email",
|
||||
messageLabel: "Message",
|
||||
successMessage: "Your message has been sent successfully.",
|
||||
errorMessage: "An error occurred while submitting.",
|
||||
},
|
||||
formInput: {
|
||||
label: "Input field",
|
||||
},
|
||||
formSelect: {
|
||||
label: "Select field",
|
||||
option1Label: "Option 1",
|
||||
option2Label: "Option 2",
|
||||
},
|
||||
formCheckbox: {
|
||||
groupLabel: "Checkbox group",
|
||||
option1Label: "Check 1",
|
||||
option2Label: "Check 2",
|
||||
},
|
||||
formRadio: {
|
||||
groupLabel: "Radio group",
|
||||
optionALabel: "Option A",
|
||||
optionBLabel: "Option B",
|
||||
},
|
||||
},
|
||||
ko: {
|
||||
text: {
|
||||
defaultText: "새 텍스트",
|
||||
},
|
||||
list: {
|
||||
firstItemText: "리스트 아이템 1",
|
||||
},
|
||||
button: {
|
||||
label: "버튼",
|
||||
},
|
||||
form: {
|
||||
nameLabel: "이름",
|
||||
emailLabel: "이메일",
|
||||
messageLabel: "메시지",
|
||||
successMessage: "성공적으로 전송되었습니다.",
|
||||
errorMessage: "전송 중 오류가 발생했습니다.",
|
||||
},
|
||||
formInput: {
|
||||
label: "입력 필드",
|
||||
},
|
||||
formSelect: {
|
||||
label: "셀렉트 필드",
|
||||
option1Label: "옵션 1",
|
||||
option2Label: "옵션 2",
|
||||
},
|
||||
formCheckbox: {
|
||||
groupLabel: "체크박스 그룹",
|
||||
option1Label: "옵션 1",
|
||||
option2Label: "옵션 2",
|
||||
},
|
||||
formRadio: {
|
||||
groupLabel: "라디오 그룹",
|
||||
optionALabel: "옵션 A",
|
||||
optionBLabel: "옵션 B",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorBlockDefaultsMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorBlockDefaultsMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_BLOCK_DEFAULTS_MESSAGES[key] ?? EDITOR_BLOCK_DEFAULTS_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,286 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorButtonPanelMessages = {
|
||||
buttonTextLabel: string;
|
||||
buttonTextAria: string;
|
||||
|
||||
imageSectionTitle: string;
|
||||
imageSourceLabel: string;
|
||||
imageSourceAria: string;
|
||||
imageSourceOptionNone: string;
|
||||
imageSourceOptionUrl: string;
|
||||
imageSourceOptionUpload: string;
|
||||
|
||||
imageUrlLabel: string;
|
||||
imageUrlAria: string;
|
||||
imageUploadLabel: string;
|
||||
imageUploadAria: string;
|
||||
|
||||
imageAltLabel: string;
|
||||
imageAltAria: string;
|
||||
|
||||
imagePlacementLabel: string;
|
||||
imagePlacementAria: string;
|
||||
imagePlacementOptionLeft: string;
|
||||
imagePlacementOptionRight: string;
|
||||
imagePlacementOptionTop: string;
|
||||
imagePlacementOptionBottom: string;
|
||||
|
||||
paddingXLabel: string;
|
||||
paddingYLabel: string;
|
||||
|
||||
linkLabel: string;
|
||||
linkAria: string;
|
||||
|
||||
alignLabel: string;
|
||||
alignAria: string;
|
||||
alignOptionLeft: string;
|
||||
alignOptionCenter: string;
|
||||
alignOptionRight: string;
|
||||
|
||||
textColorLabel: string;
|
||||
textColorPickerAria: string;
|
||||
textColorHexAria: string;
|
||||
|
||||
styleLabel: string;
|
||||
styleAria: string;
|
||||
styleOptionSolid: string;
|
||||
styleOptionOutline: string;
|
||||
styleOptionGhost: string;
|
||||
|
||||
fillColorLabel: string;
|
||||
fillColorPickerAria: string;
|
||||
fillColorHexAria: string;
|
||||
|
||||
strokeColorLabel: string;
|
||||
strokeColorPickerAria: string;
|
||||
strokeColorHexAria: string;
|
||||
|
||||
borderRadiusLabel: string;
|
||||
borderRadiusPresetNone: string;
|
||||
borderRadiusPresetSmall: string;
|
||||
borderRadiusPresetMedium: string;
|
||||
borderRadiusPresetLarge: string;
|
||||
borderRadiusPresetFull: string;
|
||||
|
||||
widthModeLabel: string;
|
||||
widthModeAria: string;
|
||||
widthModeOptionAuto: string;
|
||||
widthModeOptionFull: string;
|
||||
widthModeOptionFixed: string;
|
||||
|
||||
fixedWidthLabel: string;
|
||||
fixedWidthUnitLabel: string;
|
||||
fixedWidthPresetSmall: string;
|
||||
fixedWidthPresetMedium: string;
|
||||
fixedWidthPresetLarge: string;
|
||||
|
||||
fontSizeLabel: string;
|
||||
fontSizeUnitLabel: string;
|
||||
|
||||
lineHeightLabel: string;
|
||||
lineHeightPresetTight: string;
|
||||
lineHeightPresetNormal: string;
|
||||
lineHeightPresetRelaxed: string;
|
||||
|
||||
letterSpacingLabel: string;
|
||||
letterSpacingUnitLabel: string;
|
||||
letterSpacingPresetTighter: string;
|
||||
letterSpacingPresetTight: string;
|
||||
letterSpacingPresetNormal: string;
|
||||
letterSpacingPresetWide: string;
|
||||
letterSpacingPresetWider: string;
|
||||
};
|
||||
|
||||
const EDITOR_BUTTON_PANEL_MESSAGES: Record<AppLocale, EditorButtonPanelMessages> = {
|
||||
en: {
|
||||
buttonTextLabel: "Button text",
|
||||
buttonTextAria: "Button text",
|
||||
|
||||
imageSectionTitle: "Button image",
|
||||
imageSourceLabel: "Button image source",
|
||||
imageSourceAria: "Button image source",
|
||||
imageSourceOptionNone: "None",
|
||||
imageSourceOptionUrl: "URL",
|
||||
imageSourceOptionUpload: "File upload",
|
||||
|
||||
imageUrlLabel: "Button image URL",
|
||||
imageUrlAria: "Button image URL",
|
||||
imageUploadLabel: "Button image file upload",
|
||||
imageUploadAria: "Button image file upload",
|
||||
|
||||
imageAltLabel: "Button image alt text",
|
||||
imageAltAria: "Button image alt text",
|
||||
|
||||
imagePlacementLabel: "Button image placement",
|
||||
imagePlacementAria: "Button image placement",
|
||||
imagePlacementOptionLeft: "Text left",
|
||||
imagePlacementOptionRight: "Text right",
|
||||
imagePlacementOptionTop: "Text top",
|
||||
imagePlacementOptionBottom: "Text bottom",
|
||||
|
||||
paddingXLabel: "Horizontal padding",
|
||||
paddingYLabel: "Vertical padding",
|
||||
|
||||
linkLabel: "Button link",
|
||||
linkAria: "Button link",
|
||||
|
||||
alignLabel: "Alignment",
|
||||
alignAria: "Button alignment",
|
||||
alignOptionLeft: "Left",
|
||||
alignOptionCenter: "Center",
|
||||
alignOptionRight: "Right",
|
||||
|
||||
textColorLabel: "Text color",
|
||||
textColorPickerAria: "Button text color picker",
|
||||
textColorHexAria: "Button text color HEX",
|
||||
|
||||
styleLabel: "Style",
|
||||
styleAria: "Button style",
|
||||
styleOptionSolid: "Fill",
|
||||
styleOptionOutline: "Outline",
|
||||
styleOptionGhost: "Ghost",
|
||||
|
||||
fillColorLabel: "Fill color",
|
||||
fillColorPickerAria: "Button fill color picker",
|
||||
fillColorHexAria: "Button fill color HEX",
|
||||
|
||||
strokeColorLabel: "Border color",
|
||||
strokeColorPickerAria: "Button border color picker",
|
||||
strokeColorHexAria: "Button border color HEX",
|
||||
|
||||
borderRadiusLabel: "Border radius",
|
||||
borderRadiusPresetNone: "None",
|
||||
borderRadiusPresetSmall: "Small",
|
||||
borderRadiusPresetMedium: "Medium",
|
||||
borderRadiusPresetLarge: "Large",
|
||||
borderRadiusPresetFull: "Full",
|
||||
|
||||
widthModeLabel: "Button width mode",
|
||||
widthModeAria: "Button width mode",
|
||||
widthModeOptionAuto: "Auto",
|
||||
widthModeOptionFull: "Full width",
|
||||
widthModeOptionFixed: "Fixed",
|
||||
|
||||
fixedWidthLabel: "Button fixed width",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
fixedWidthPresetSmall: "Small",
|
||||
fixedWidthPresetMedium: "Medium",
|
||||
fixedWidthPresetLarge: "Wide",
|
||||
|
||||
fontSizeLabel: "Button font size",
|
||||
fontSizeUnitLabel: "(px)",
|
||||
|
||||
lineHeightLabel: "Line height",
|
||||
lineHeightPresetTight: "Tight",
|
||||
lineHeightPresetNormal: "Normal",
|
||||
lineHeightPresetRelaxed: "Relaxed",
|
||||
|
||||
letterSpacingLabel: "Letter spacing",
|
||||
letterSpacingUnitLabel: "(px)",
|
||||
letterSpacingPresetTighter: "Very tight",
|
||||
letterSpacingPresetTight: "Tight",
|
||||
letterSpacingPresetNormal: "Normal",
|
||||
letterSpacingPresetWide: "Wide",
|
||||
letterSpacingPresetWider: "Very wide",
|
||||
},
|
||||
ko: {
|
||||
buttonTextLabel: "버튼 텍스트",
|
||||
buttonTextAria: "버튼 텍스트",
|
||||
|
||||
imageSectionTitle: "버튼 이미지",
|
||||
imageSourceLabel: "버튼 이미지 소스",
|
||||
imageSourceAria: "버튼 이미지 소스",
|
||||
imageSourceOptionNone: "사용 안 함",
|
||||
imageSourceOptionUrl: "URL",
|
||||
imageSourceOptionUpload: "파일 업로드",
|
||||
|
||||
imageUrlLabel: "버튼 이미지 URL",
|
||||
imageUrlAria: "버튼 이미지 URL",
|
||||
imageUploadLabel: "버튼 이미지 파일 업로드",
|
||||
imageUploadAria: "버튼 이미지 파일 업로드",
|
||||
|
||||
imageAltLabel: "버튼 이미지 대체 텍스트",
|
||||
imageAltAria: "버튼 이미지 대체 텍스트",
|
||||
|
||||
imagePlacementLabel: "버튼 이미지 위치",
|
||||
imagePlacementAria: "버튼 이미지 위치",
|
||||
imagePlacementOptionLeft: "텍스트 왼쪽",
|
||||
imagePlacementOptionRight: "텍스트 오른쪽",
|
||||
imagePlacementOptionTop: "텍스트 위쪽",
|
||||
imagePlacementOptionBottom: "텍스트 아래쪽",
|
||||
|
||||
paddingXLabel: "가로 패딩",
|
||||
paddingYLabel: "세로 패딩",
|
||||
|
||||
linkLabel: "버튼 링크",
|
||||
linkAria: "버튼 링크",
|
||||
|
||||
alignLabel: "정렬",
|
||||
alignAria: "버튼 정렬",
|
||||
alignOptionLeft: "왼쪽",
|
||||
alignOptionCenter: "가운데",
|
||||
alignOptionRight: "오른쪽",
|
||||
|
||||
textColorLabel: "텍스트 색상",
|
||||
textColorPickerAria: "버튼 텍스트 색상 피커",
|
||||
textColorHexAria: "버튼 텍스트 색상 HEX",
|
||||
|
||||
styleLabel: "스타일",
|
||||
styleAria: "버튼 스타일",
|
||||
styleOptionSolid: "채움",
|
||||
styleOptionOutline: "외곽선",
|
||||
styleOptionGhost: "고스트",
|
||||
|
||||
fillColorLabel: "채움 색상",
|
||||
fillColorPickerAria: "버튼 채움 색상 피커",
|
||||
fillColorHexAria: "버튼 채움 색상 HEX",
|
||||
|
||||
strokeColorLabel: "외곽선 색상",
|
||||
strokeColorPickerAria: "버튼 외곽선 색상 피커",
|
||||
strokeColorHexAria: "버튼 외곽선 색상 HEX",
|
||||
|
||||
borderRadiusLabel: "모서리 둥글기",
|
||||
borderRadiusPresetNone: "없음",
|
||||
borderRadiusPresetSmall: "작게",
|
||||
borderRadiusPresetMedium: "보통",
|
||||
borderRadiusPresetLarge: "크게",
|
||||
borderRadiusPresetFull: "완전 둥글게",
|
||||
|
||||
widthModeLabel: "버튼 너비 모드",
|
||||
widthModeAria: "버튼 너비 모드",
|
||||
widthModeOptionAuto: "자동",
|
||||
widthModeOptionFull: "전체 폭",
|
||||
widthModeOptionFixed: "고정 값",
|
||||
|
||||
fixedWidthLabel: "버튼 고정 너비",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
fixedWidthPresetSmall: "작게",
|
||||
fixedWidthPresetMedium: "보통",
|
||||
fixedWidthPresetLarge: "넓게",
|
||||
|
||||
fontSizeLabel: "버튼 크기",
|
||||
fontSizeUnitLabel: "(px)",
|
||||
|
||||
lineHeightLabel: "줄 간격",
|
||||
lineHeightPresetTight: "좁게",
|
||||
lineHeightPresetNormal: "보통",
|
||||
lineHeightPresetRelaxed: "넓게",
|
||||
|
||||
letterSpacingLabel: "글자 간격",
|
||||
letterSpacingUnitLabel: "(px)",
|
||||
letterSpacingPresetTighter: "아주 좁게",
|
||||
letterSpacingPresetTight: "좁게",
|
||||
letterSpacingPresetNormal: "보통",
|
||||
letterSpacingPresetWide: "넓게",
|
||||
letterSpacingPresetWider: "아주 넓게",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorButtonPanelMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorButtonPanelMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_BUTTON_PANEL_MESSAGES[key] ?? EDITOR_BUTTON_PANEL_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorCanvasMessages = {
|
||||
emptyStateHint: string;
|
||||
previewFallbackTextBlock: string;
|
||||
previewFallbackButtonBlock: string;
|
||||
previewFallbackImageBlock: string;
|
||||
previewFallbackListBlock: string;
|
||||
previewFallbackDividerBlock: string;
|
||||
previewFallbackSectionBlock: string;
|
||||
};
|
||||
|
||||
const EDITOR_CANVAS_MESSAGES: Record<AppLocale, EditorCanvasMessages> = {
|
||||
en: {
|
||||
emptyStateHint: 'Click the "Text" button on the left to add your first block.',
|
||||
previewFallbackTextBlock: "Text block",
|
||||
previewFallbackButtonBlock: "Button block",
|
||||
previewFallbackImageBlock: "Image block",
|
||||
previewFallbackListBlock: "List block",
|
||||
previewFallbackDividerBlock: "Divider block",
|
||||
previewFallbackSectionBlock: "Section block",
|
||||
},
|
||||
ko: {
|
||||
emptyStateHint: '왼쪽에서 "텍스트" 버튼을 눌러 블록을 추가해 보세요.',
|
||||
previewFallbackTextBlock: "텍스트 블록",
|
||||
previewFallbackButtonBlock: "버튼 블록",
|
||||
previewFallbackImageBlock: "이미지 블록",
|
||||
previewFallbackListBlock: "리스트 블록",
|
||||
previewFallbackDividerBlock: "구분선 블록",
|
||||
previewFallbackSectionBlock: "섹션 블록",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorCanvasMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorCanvasMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_CANVAS_MESSAGES[key] ?? EDITOR_CANVAS_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorColorPickerFieldMessages = {
|
||||
dropdownLabelDefault: string;
|
||||
hexPlaceholder: string;
|
||||
paletteLabels: Record<string, string>;
|
||||
};
|
||||
|
||||
const EDITOR_COLOR_PICKER_FIELD_MESSAGES: Record<AppLocale, EditorColorPickerFieldMessages> = {
|
||||
en: {
|
||||
dropdownLabelDefault: "Color palette",
|
||||
hexPlaceholder: "e.g. #ff0000",
|
||||
paletteLabels: {
|
||||
default: "None",
|
||||
transparent: "Transparent",
|
||||
muted: "Muted",
|
||||
strong: "Strong highlight",
|
||||
neutral: "Neutral",
|
||||
accent: "Accent",
|
||||
"accent-deep": "Accent (deep)",
|
||||
"accent-soft": "Accent (soft)",
|
||||
danger: "Danger",
|
||||
"danger-deep": "Danger (strong)",
|
||||
success: "Success",
|
||||
"success-soft": "Success (soft)",
|
||||
warning: "Warning",
|
||||
info: "Info",
|
||||
purple: "Purple",
|
||||
"purple-soft": "Purple (soft)",
|
||||
pink: "Pink",
|
||||
"pink-soft": "Pink (soft)",
|
||||
dark: "Dark text",
|
||||
"dark-muted": "Dark muted",
|
||||
},
|
||||
},
|
||||
ko: {
|
||||
dropdownLabelDefault: "색상 팔레트",
|
||||
hexPlaceholder: "예: #ff0000",
|
||||
paletteLabels: {
|
||||
default: "없음",
|
||||
transparent: "투명",
|
||||
muted: "연한",
|
||||
strong: "강조",
|
||||
neutral: "중립",
|
||||
accent: "포인트",
|
||||
"accent-deep": "포인트 진하게",
|
||||
"accent-soft": "포인트 연하게",
|
||||
danger: "위험",
|
||||
"danger-deep": "위험 진하게",
|
||||
success: "성공",
|
||||
"success-soft": "성공 연하게",
|
||||
warning: "경고",
|
||||
info: "정보",
|
||||
purple: "보라",
|
||||
"purple-soft": "연한 보라",
|
||||
pink: "핑크",
|
||||
"pink-soft": "연한 핑크",
|
||||
dark: "어두운 텍스트",
|
||||
"dark-muted": "어두운 연한",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorColorPickerFieldMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorColorPickerFieldMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_COLOR_PICKER_FIELD_MESSAGES[key] ?? EDITOR_COLOR_PICKER_FIELD_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorDividerPropertiesPanelMessages = {
|
||||
alignLabel: string;
|
||||
alignAria: string;
|
||||
alignOptionLeft: string;
|
||||
alignOptionCenter: string;
|
||||
alignOptionRight: string;
|
||||
|
||||
thicknessLabel: string;
|
||||
thicknessAria: string;
|
||||
thicknessOptionThin: string;
|
||||
thicknessOptionMedium: string;
|
||||
|
||||
styleSectionTitle: string;
|
||||
|
||||
lengthModeLabel: string;
|
||||
lengthModeAria: string;
|
||||
lengthModeOptionAuto: string;
|
||||
lengthModeOptionFull: string;
|
||||
lengthModeOptionFixed: string;
|
||||
|
||||
fixedLengthLabel: string;
|
||||
fixedLengthUnitLabel: string;
|
||||
fixedLengthPresetShort: string;
|
||||
fixedLengthPresetNormal: string;
|
||||
fixedLengthPresetLong: string;
|
||||
|
||||
colorLabel: string;
|
||||
colorPickerAria: string;
|
||||
colorHexAria: string;
|
||||
|
||||
marginLabel: string;
|
||||
marginUnitLabel: string;
|
||||
marginPresetSmall: string;
|
||||
marginPresetNormal: string;
|
||||
marginPresetLarge: string;
|
||||
};
|
||||
|
||||
const EDITOR_DIVIDER_PROPERTIES_PANEL_MESSAGES: Record<AppLocale, EditorDividerPropertiesPanelMessages> = {
|
||||
en: {
|
||||
alignLabel: "Alignment",
|
||||
alignAria: "Divider alignment",
|
||||
alignOptionLeft: "Left",
|
||||
alignOptionCenter: "Center",
|
||||
alignOptionRight: "Right",
|
||||
|
||||
thicknessLabel: "Thickness",
|
||||
thicknessAria: "Divider thickness",
|
||||
thicknessOptionThin: "Thin",
|
||||
thicknessOptionMedium: "Normal",
|
||||
|
||||
styleSectionTitle: "Divider style",
|
||||
|
||||
lengthModeLabel: "Length mode",
|
||||
lengthModeAria: "Divider length mode",
|
||||
lengthModeOptionAuto: "Fit content",
|
||||
lengthModeOptionFull: "Full width",
|
||||
lengthModeOptionFixed: "Fixed length",
|
||||
|
||||
fixedLengthLabel: "Fixed length",
|
||||
fixedLengthUnitLabel: "(px)",
|
||||
fixedLengthPresetShort: "Short",
|
||||
fixedLengthPresetNormal: "Normal",
|
||||
fixedLengthPresetLong: "Long",
|
||||
|
||||
colorLabel: "Line color",
|
||||
colorPickerAria: "Divider color picker",
|
||||
colorHexAria: "Divider color HEX",
|
||||
|
||||
marginLabel: "Vertical margin",
|
||||
marginUnitLabel: "(px)",
|
||||
marginPresetSmall: "Small",
|
||||
marginPresetNormal: "Normal",
|
||||
marginPresetLarge: "Large",
|
||||
},
|
||||
|
||||
ko: {
|
||||
alignLabel: "정렬",
|
||||
alignAria: "구분선 정렬",
|
||||
alignOptionLeft: "왼쪽",
|
||||
alignOptionCenter: "가운데",
|
||||
alignOptionRight: "오른쪽",
|
||||
|
||||
thicknessLabel: "두께",
|
||||
thicknessAria: "구분선 두께",
|
||||
thicknessOptionThin: "얇게",
|
||||
thicknessOptionMedium: "보통",
|
||||
|
||||
styleSectionTitle: "구분선 스타일",
|
||||
|
||||
lengthModeLabel: "길이 모드",
|
||||
lengthModeAria: "구분선 길이 모드",
|
||||
lengthModeOptionAuto: "내용에 맞춤",
|
||||
lengthModeOptionFull: "전체 폭",
|
||||
lengthModeOptionFixed: "고정 길이",
|
||||
|
||||
fixedLengthLabel: "고정 길이",
|
||||
fixedLengthUnitLabel: "(px)",
|
||||
fixedLengthPresetShort: "짧게",
|
||||
fixedLengthPresetNormal: "보통",
|
||||
fixedLengthPresetLong: "길게",
|
||||
|
||||
colorLabel: "선 색상",
|
||||
colorPickerAria: "구분선 색상 피커",
|
||||
colorHexAria: "구분선 색상 HEX",
|
||||
|
||||
marginLabel: "위/아래 여백",
|
||||
marginUnitLabel: "(px)",
|
||||
marginPresetSmall: "작게",
|
||||
marginPresetNormal: "보통",
|
||||
marginPresetLarge: "크게",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorDividerPropertiesPanelMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorDividerPropertiesPanelMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_DIVIDER_PROPERTIES_PANEL_MESSAGES[key] ?? EDITOR_DIVIDER_PROPERTIES_PANEL_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,298 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorFormCheckboxPanelMessages = {
|
||||
sectionTitle: string;
|
||||
|
||||
groupTitleTypeLabel: string;
|
||||
groupTitleTypeOptionText: string;
|
||||
groupTitleTypeOptionImage: string;
|
||||
|
||||
groupTitleDisplayLabel: string;
|
||||
groupTitleDisplayOptionVisible: string;
|
||||
groupTitleDisplayOptionHidden: string;
|
||||
|
||||
layoutLabel: string;
|
||||
layoutOptionStacked: string;
|
||||
layoutOptionInline: string;
|
||||
|
||||
optionLayoutLabel: string;
|
||||
optionLayoutOptionStacked: string;
|
||||
optionLayoutOptionInline: string;
|
||||
|
||||
labelGapLabel: string;
|
||||
|
||||
groupTitleLabel: string;
|
||||
|
||||
submitKeyLabel: string;
|
||||
|
||||
optionsLabel: string;
|
||||
addOptionButtonLabel: string;
|
||||
optionLabelPlaceholder: string;
|
||||
optionValuePlaceholder: string;
|
||||
|
||||
optionImageSourceLabel: string;
|
||||
optionImageSourceOptionUrl: string;
|
||||
optionImageSourceOptionUpload: string;
|
||||
|
||||
optionImageUrlPlaceholder: string;
|
||||
optionImageUploadLabel: string;
|
||||
optionImageUploadAria: string;
|
||||
|
||||
groupTitleImageSourceLabel: string;
|
||||
groupTitleImageSourceOptionUrl: string;
|
||||
groupTitleImageSourceOptionUpload: string;
|
||||
|
||||
groupTitleImageUrlLabel: string;
|
||||
groupTitleImageUploadLabel: string;
|
||||
groupTitleImageUploadAria: string;
|
||||
|
||||
requiredNoticeText: string;
|
||||
|
||||
styleSectionTitle: string;
|
||||
|
||||
textSizeLabel: string;
|
||||
textSizeUnitLabel: string;
|
||||
|
||||
lineHeightLabel: string;
|
||||
lineHeightUnitLabel: string;
|
||||
|
||||
letterSpacingLabel: string;
|
||||
letterSpacingUnitLabel: string;
|
||||
|
||||
widthModeLabel: string;
|
||||
widthModeOptionAuto: string;
|
||||
widthModeOptionFull: string;
|
||||
widthModeOptionFixed: string;
|
||||
|
||||
fixedWidthLabel: string;
|
||||
fixedWidthUnitLabel: string;
|
||||
|
||||
paddingXLabel: string;
|
||||
paddingXUnitLabel: string;
|
||||
|
||||
paddingYLabel: string;
|
||||
paddingYUnitLabel: string;
|
||||
|
||||
optionGapLabel: string;
|
||||
optionGapUnitLabel: string;
|
||||
|
||||
textColorLabel: string;
|
||||
textColorPickerAria: string;
|
||||
textColorHexAria: string;
|
||||
|
||||
fillColorLabel: string;
|
||||
fillColorPickerAria: string;
|
||||
fillColorHexAria: string;
|
||||
|
||||
strokeColorLabel: string;
|
||||
strokeColorPickerAria: string;
|
||||
strokeColorHexAria: string;
|
||||
|
||||
borderRadiusLabel: string;
|
||||
borderRadiusPresetNone: string;
|
||||
borderRadiusPresetSmall: string;
|
||||
borderRadiusPresetMedium: string;
|
||||
borderRadiusPresetLarge: string;
|
||||
borderRadiusPresetFull: string;
|
||||
};
|
||||
|
||||
const EDITOR_FORM_CHECKBOX_PANEL_MESSAGES: Record<AppLocale, EditorFormCheckboxPanelMessages> = {
|
||||
en: {
|
||||
sectionTitle: "Checkbox field",
|
||||
|
||||
groupTitleTypeLabel: "Group title type",
|
||||
groupTitleTypeOptionText: "Text",
|
||||
groupTitleTypeOptionImage: "Image",
|
||||
|
||||
groupTitleDisplayLabel: "Group title display mode",
|
||||
groupTitleDisplayOptionVisible: "Visible (default)",
|
||||
groupTitleDisplayOptionHidden: "Hidden",
|
||||
|
||||
layoutLabel: "Layout",
|
||||
layoutOptionStacked: "Vertical (default)",
|
||||
layoutOptionInline: "Horizontal (inline)",
|
||||
|
||||
optionLayoutLabel: "Option layout",
|
||||
optionLayoutOptionStacked: "Vertical (default)",
|
||||
optionLayoutOptionInline: "Horizontal (inline)",
|
||||
|
||||
labelGapLabel: "Label/field gap",
|
||||
|
||||
groupTitleLabel: "Group title",
|
||||
|
||||
submitKeyLabel: "Submit key",
|
||||
|
||||
optionsLabel: "Options",
|
||||
addOptionButtonLabel: "Add option",
|
||||
optionLabelPlaceholder: "Label",
|
||||
optionValuePlaceholder: "Value (value)",
|
||||
|
||||
optionImageSourceLabel: "Option image source",
|
||||
optionImageSourceOptionUrl: "URL",
|
||||
optionImageSourceOptionUpload: "File upload",
|
||||
|
||||
optionImageUrlPlaceholder: "Option image URL (optional)",
|
||||
optionImageUploadLabel: "Option image file upload",
|
||||
optionImageUploadAria: "Option image file upload",
|
||||
|
||||
groupTitleImageSourceLabel: "Group title image source",
|
||||
groupTitleImageSourceOptionUrl: "URL",
|
||||
groupTitleImageSourceOptionUpload: "File upload",
|
||||
|
||||
groupTitleImageUrlLabel: "Group title image URL",
|
||||
groupTitleImageUploadLabel: "Group title image file upload",
|
||||
groupTitleImageUploadAria: "Group title image file upload",
|
||||
|
||||
requiredNoticeText: "Required state is configured in the form controller.",
|
||||
|
||||
styleSectionTitle: "Field style",
|
||||
|
||||
textSizeLabel: "Checkbox text size",
|
||||
textSizeUnitLabel: "(px)",
|
||||
|
||||
lineHeightLabel: "Checkbox line height",
|
||||
lineHeightUnitLabel: "(px)",
|
||||
|
||||
letterSpacingLabel: "Checkbox letter spacing",
|
||||
letterSpacingUnitLabel: "(px)",
|
||||
|
||||
widthModeLabel: "Field width",
|
||||
widthModeOptionAuto: "Auto",
|
||||
widthModeOptionFull: "Full width",
|
||||
widthModeOptionFixed: "Fixed value",
|
||||
|
||||
fixedWidthLabel: "Field fixed width",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
|
||||
paddingXLabel: "Checkbox horizontal padding",
|
||||
paddingXUnitLabel: "(px)",
|
||||
|
||||
paddingYLabel: "Checkbox vertical padding",
|
||||
paddingYUnitLabel: "(px)",
|
||||
|
||||
optionGapLabel: "Checkbox option gap",
|
||||
optionGapUnitLabel: "(px)",
|
||||
|
||||
textColorLabel: "Text color",
|
||||
textColorPickerAria: "Checkbox text color picker",
|
||||
textColorHexAria: "Checkbox text color HEX",
|
||||
|
||||
fillColorLabel: "Background color",
|
||||
fillColorPickerAria: "Checkbox background color picker",
|
||||
fillColorHexAria: "Checkbox background color HEX",
|
||||
|
||||
strokeColorLabel: "Border color",
|
||||
strokeColorPickerAria: "Checkbox border color picker",
|
||||
strokeColorHexAria: "Checkbox border color HEX",
|
||||
|
||||
borderRadiusLabel: "Field border radius",
|
||||
borderRadiusPresetNone: "None",
|
||||
borderRadiusPresetSmall: "Small",
|
||||
borderRadiusPresetMedium: "Medium",
|
||||
borderRadiusPresetLarge: "Large",
|
||||
borderRadiusPresetFull: "Fully rounded",
|
||||
},
|
||||
ko: {
|
||||
sectionTitle: "체크박스 필드",
|
||||
|
||||
groupTitleTypeLabel: "그룹 타이틀 타입",
|
||||
groupTitleTypeOptionText: "텍스트",
|
||||
groupTitleTypeOptionImage: "이미지",
|
||||
|
||||
groupTitleDisplayLabel: "그룹 타이틀 표시 방식",
|
||||
groupTitleDisplayOptionVisible: "표시 (기본)",
|
||||
groupTitleDisplayOptionHidden: "숨김",
|
||||
|
||||
layoutLabel: "레이아웃",
|
||||
layoutOptionStacked: "세로 (기본)",
|
||||
layoutOptionInline: "가로 (인라인)",
|
||||
|
||||
optionLayoutLabel: "옵션 레이아웃",
|
||||
optionLayoutOptionStacked: "세로 (기본)",
|
||||
optionLayoutOptionInline: "가로 (인라인)",
|
||||
|
||||
labelGapLabel: "라벨/필드 간격",
|
||||
|
||||
groupTitleLabel: "그룹 타이틀",
|
||||
|
||||
submitKeyLabel: "전송 키",
|
||||
|
||||
optionsLabel: "옵션",
|
||||
addOptionButtonLabel: "옵션 추가",
|
||||
optionLabelPlaceholder: "라벨",
|
||||
optionValuePlaceholder: "값(value)",
|
||||
|
||||
optionImageSourceLabel: "옵션 이미지 소스",
|
||||
optionImageSourceOptionUrl: "URL",
|
||||
optionImageSourceOptionUpload: "파일 업로드",
|
||||
|
||||
optionImageUrlPlaceholder: "옵션 이미지 URL (선택)",
|
||||
optionImageUploadLabel: "옵션 이미지 파일 업로드",
|
||||
optionImageUploadAria: "옵션 이미지 파일 업로드",
|
||||
|
||||
groupTitleImageSourceLabel: "그룹 타이틀 이미지 소스",
|
||||
groupTitleImageSourceOptionUrl: "URL",
|
||||
groupTitleImageSourceOptionUpload: "파일 업로드",
|
||||
|
||||
groupTitleImageUrlLabel: "그룹 타이틀 이미지 URL",
|
||||
groupTitleImageUploadLabel: "그룹 타이틀 이미지 파일 업로드",
|
||||
groupTitleImageUploadAria: "그룹 타이틀 이미지 파일 업로드",
|
||||
|
||||
requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
|
||||
|
||||
styleSectionTitle: "필드 스타일",
|
||||
|
||||
textSizeLabel: "체크박스 텍스트 크기",
|
||||
textSizeUnitLabel: "(px)",
|
||||
|
||||
lineHeightLabel: "체크박스 줄간격",
|
||||
lineHeightUnitLabel: "(px)",
|
||||
|
||||
letterSpacingLabel: "체크박스 자간",
|
||||
letterSpacingUnitLabel: "(px)",
|
||||
|
||||
widthModeLabel: "필드 너비",
|
||||
widthModeOptionAuto: "자동",
|
||||
widthModeOptionFull: "전체 폭",
|
||||
widthModeOptionFixed: "고정 값",
|
||||
|
||||
fixedWidthLabel: "필드 고정 너비",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
|
||||
paddingXLabel: "체크박스 가로 패딩",
|
||||
paddingXUnitLabel: "(px)",
|
||||
|
||||
paddingYLabel: "체크박스 세로 패딩",
|
||||
paddingYUnitLabel: "(px)",
|
||||
|
||||
optionGapLabel: "체크박스 옵션 간격",
|
||||
optionGapUnitLabel: "(px)",
|
||||
|
||||
textColorLabel: "텍스트 색상",
|
||||
textColorPickerAria: "체크박스 텍스트 색상 피커",
|
||||
textColorHexAria: "체크박스 텍스트 색상 HEX",
|
||||
|
||||
fillColorLabel: "배경 색상",
|
||||
fillColorPickerAria: "체크박스 배경 색상 피커",
|
||||
fillColorHexAria: "체크박스 배경 색상 HEX",
|
||||
|
||||
strokeColorLabel: "테두리 색상",
|
||||
strokeColorPickerAria: "체크박스 테두리 색상 피커",
|
||||
strokeColorHexAria: "체크박스 테두리 색상 HEX",
|
||||
|
||||
borderRadiusLabel: "필드 모서리 둥글기",
|
||||
borderRadiusPresetNone: "없음",
|
||||
borderRadiusPresetSmall: "작게",
|
||||
borderRadiusPresetMedium: "보통",
|
||||
borderRadiusPresetLarge: "크게",
|
||||
borderRadiusPresetFull: "완전 둥글게",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorFormCheckboxPanelMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorFormCheckboxPanelMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_FORM_CHECKBOX_PANEL_MESSAGES[key] ?? EDITOR_FORM_CHECKBOX_PANEL_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,223 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorFormControllerPanelMessages = {
|
||||
introTextPrefix: string;
|
||||
introTextSuffix: string;
|
||||
|
||||
submitTargetLabel: string;
|
||||
submitTargetOptionInternal: string;
|
||||
submitTargetOptionWebhook: string;
|
||||
|
||||
webhookUrlLabel: string;
|
||||
webhookUrlPlaceholder: string;
|
||||
|
||||
payloadFormatLabel: string;
|
||||
payloadFormatOptionForm: string;
|
||||
payloadFormatOptionJson: string;
|
||||
|
||||
httpMethodLabel: string;
|
||||
|
||||
authTokenLabel: string;
|
||||
authTokenPlaceholder: string;
|
||||
|
||||
extraParamsLabel: string;
|
||||
extraParamsPlaceholder: string;
|
||||
|
||||
layoutSectionTitle: string;
|
||||
formWidthModeLabel: string;
|
||||
formWidthModeOptionAuto: string;
|
||||
formWidthModeOptionFull: string;
|
||||
formWidthModeOptionFixed: string;
|
||||
|
||||
formFixedWidthLabel: string;
|
||||
|
||||
formFixedWidthPresetNarrow: string;
|
||||
formFixedWidthPresetNormal: string;
|
||||
formFixedWidthPresetWide: string;
|
||||
|
||||
marginYLabel: string;
|
||||
marginYPresetNone: string;
|
||||
marginYPresetCompact: string;
|
||||
marginYPresetNormal: string;
|
||||
marginYPresetSpacious: string;
|
||||
|
||||
messagesSectionTitle: string;
|
||||
successMessageLabel: string;
|
||||
successMessagePlaceholder: string;
|
||||
errorMessageLabel: string;
|
||||
errorMessagePlaceholder: string;
|
||||
|
||||
controllerSectionTitle: string;
|
||||
fieldMappingLegend: string;
|
||||
fieldMappingAriaLabel: string;
|
||||
requiredLabel: string;
|
||||
|
||||
submitButtonLabel: string;
|
||||
submitButtonAriaLabel: string;
|
||||
|
||||
submitButtonNoneOptionLabel: string;
|
||||
|
||||
sheetsGuideButtonLabel: string;
|
||||
sheetsGuideHeading: string;
|
||||
sheetsGuideCloseAriaLabel: string;
|
||||
sheetsGuideIntro: string;
|
||||
sheetsGuideStep1: string;
|
||||
sheetsGuideStep2: string;
|
||||
sheetsGuideStep3: string;
|
||||
sheetsGuideExampleCodeLabel: string;
|
||||
};
|
||||
|
||||
const EDITOR_FORM_CONTROLLER_PANEL_MESSAGES: Record<AppLocale, EditorFormControllerPanelMessages> = {
|
||||
en: {
|
||||
introTextPrefix:
|
||||
"This form is first submitted to the ",
|
||||
introTextSuffix:
|
||||
" endpoint on the public page, then processed internally or forwarded to a webhook depending on the settings.",
|
||||
|
||||
submitTargetLabel: "Submit target",
|
||||
submitTargetOptionInternal: "Internal only (no webhook)",
|
||||
submitTargetOptionWebhook: "Forward to external webhook / Google Sheets",
|
||||
|
||||
webhookUrlLabel: "Webhook URL (e.g. Google Apps Script web app URL)",
|
||||
webhookUrlPlaceholder: "e.g. https://script.google.com/macros/s/.../exec",
|
||||
|
||||
payloadFormatLabel: "Payload format",
|
||||
payloadFormatOptionForm: "Form data (x-www-form-urlencoded)",
|
||||
payloadFormatOptionJson: "JSON (application/json)",
|
||||
|
||||
httpMethodLabel: "HTTP method",
|
||||
|
||||
authTokenLabel: "Authorization token (optional)",
|
||||
authTokenPlaceholder: "e.g. Bearer xxxxxx",
|
||||
|
||||
extraParamsLabel: "Additional parameters (key=value lines, separated by line breaks)",
|
||||
extraParamsPlaceholder: "e.g.\nsource=landing\nformId=contact-hero",
|
||||
|
||||
layoutSectionTitle: "Form layout",
|
||||
formWidthModeLabel: "Form width mode",
|
||||
formWidthModeOptionAuto: "Auto",
|
||||
formWidthModeOptionFull: "Full width",
|
||||
formWidthModeOptionFixed: "Fixed value",
|
||||
|
||||
formFixedWidthLabel: "Form fixed width",
|
||||
|
||||
formFixedWidthPresetNarrow: "Narrow",
|
||||
formFixedWidthPresetNormal: "Normal",
|
||||
formFixedWidthPresetWide: "Wide",
|
||||
|
||||
marginYLabel: "Form top/bottom margin",
|
||||
marginYPresetNone: "None",
|
||||
marginYPresetCompact: "Compact",
|
||||
marginYPresetNormal: "Normal",
|
||||
marginYPresetSpacious: "Spacious",
|
||||
|
||||
messagesSectionTitle: "Form messages",
|
||||
successMessageLabel: "Success message",
|
||||
successMessagePlaceholder: "e.g. Your message has been sent successfully.",
|
||||
errorMessageLabel: "Error message",
|
||||
errorMessagePlaceholder: "e.g. An error occurred while submitting.",
|
||||
|
||||
controllerSectionTitle: "Form controller",
|
||||
fieldMappingLegend: "Form field mapping",
|
||||
fieldMappingAriaLabel: "Form field mapping",
|
||||
requiredLabel: "Required",
|
||||
|
||||
submitButtonLabel: "Submit button",
|
||||
submitButtonAriaLabel: "Submit button",
|
||||
|
||||
submitButtonNoneOptionLabel: "(None)",
|
||||
|
||||
sheetsGuideButtonLabel: "Google Sheets integration guide",
|
||||
sheetsGuideHeading: "Google Sheets integration guide",
|
||||
sheetsGuideCloseAriaLabel: "Close Google Sheets integration guide",
|
||||
sheetsGuideIntro:
|
||||
"You must enter the Google Apps Script web app URL, not the spreadsheet URL itself. Follow the steps below to connect Google Sheets without writing code.",
|
||||
sheetsGuideStep1:
|
||||
"In Google Sheets, create a new spreadsheet and add headers like name, email, message in the first row.",
|
||||
sheetsGuideStep2:
|
||||
"From the menu, open \"Extensions → Apps Script\" and paste the example code below.",
|
||||
sheetsGuideStep3:
|
||||
"From \"Deploy → New deployment\", deploy as a web app and paste the issued web app URL (…/exec) into the Webhook URL field.",
|
||||
sheetsGuideExampleCodeLabel: "Example Apps Script code",
|
||||
},
|
||||
ko: {
|
||||
introTextPrefix:
|
||||
"이 폼은 퍼블릭 페이지에서 ",
|
||||
introTextSuffix:
|
||||
" 엔드포인트로 먼저 전송된 뒤, 설정에 따라 내부 처리 또는 Webhook 으로 전달됩니다.",
|
||||
|
||||
submitTargetLabel: "전송 대상",
|
||||
submitTargetOptionInternal: "서버 처리 전용 (Webhook 없이 사용)",
|
||||
submitTargetOptionWebhook: "외부 Webhook / Google Sheets 로 전달",
|
||||
|
||||
webhookUrlLabel: "Webhook URL (예: Google Apps Script 웹 앱 URL)",
|
||||
webhookUrlPlaceholder: "예: https://script.google.com/macros/s/.../exec",
|
||||
|
||||
payloadFormatLabel: "전송 포맷",
|
||||
payloadFormatOptionForm: "폼 데이터 (x-www-form-urlencoded)",
|
||||
payloadFormatOptionJson: "JSON (application/json)",
|
||||
|
||||
httpMethodLabel: "HTTP 메서드",
|
||||
|
||||
authTokenLabel: "Authorization 토큰 (옵션)",
|
||||
authTokenPlaceholder: "예: Bearer xxxxxx",
|
||||
|
||||
extraParamsLabel: "추가 파라미터 (key=value 형식, 줄바꿈으로 구분)",
|
||||
extraParamsPlaceholder: "예:\nsource=landing\nformId=contact-hero",
|
||||
|
||||
layoutSectionTitle: "폼 레이아웃",
|
||||
formWidthModeLabel: "폼 너비 모드",
|
||||
formWidthModeOptionAuto: "자동",
|
||||
formWidthModeOptionFull: "전체 폭",
|
||||
formWidthModeOptionFixed: "고정 값",
|
||||
|
||||
formFixedWidthLabel: "폼 고정 너비",
|
||||
|
||||
formFixedWidthPresetNarrow: "좁게",
|
||||
formFixedWidthPresetNormal: "보통",
|
||||
formFixedWidthPresetWide: "넓게",
|
||||
|
||||
marginYLabel: "폼 위/아래 여백",
|
||||
marginYPresetNone: "없음",
|
||||
marginYPresetCompact: "좁게",
|
||||
marginYPresetNormal: "보통",
|
||||
marginYPresetSpacious: "넓게",
|
||||
|
||||
messagesSectionTitle: "폼 메시지",
|
||||
successMessageLabel: "성공 메시지",
|
||||
successMessagePlaceholder: "예: 성공적으로 전송되었습니다.",
|
||||
errorMessageLabel: "에러 메시지",
|
||||
errorMessagePlaceholder: "예: 전송 중 오류가 발생했습니다.",
|
||||
|
||||
controllerSectionTitle: "폼 컨트롤러",
|
||||
fieldMappingLegend: "폼 필드 매핑",
|
||||
fieldMappingAriaLabel: "폼 필드 매핑",
|
||||
requiredLabel: "필수",
|
||||
|
||||
submitButtonLabel: "Submit 버튼",
|
||||
submitButtonAriaLabel: "Submit 버튼",
|
||||
|
||||
submitButtonNoneOptionLabel: "선택 안 함",
|
||||
|
||||
sheetsGuideButtonLabel: "Google Sheets 연동 가이드",
|
||||
sheetsGuideHeading: "Google Sheets 연동 가이드",
|
||||
sheetsGuideCloseAriaLabel: "Google Sheets 연동 가이드 닫기",
|
||||
sheetsGuideIntro:
|
||||
"구글 시트 주소를 그대로 입력하는 것이 아니라, 시트에 연결된 Google Apps Script 웹 앱 URL 을 입력해야 합니다. 아래 순서를 따르면 코드를 잘 모르는 사용자도 연동할 수 있습니다.",
|
||||
sheetsGuideStep1:
|
||||
"Google Sheets 에서 새 스프레드시트를 만들고, 1행에 name, email, message 같은 헤더를 추가합니다.",
|
||||
sheetsGuideStep2:
|
||||
'시트 메뉴의 "확장 프로그램 → 앱스 스크립트" 를 열고 아래 예제 코드를 붙여넣습니다.',
|
||||
sheetsGuideStep3:
|
||||
'"배포 → 새 배포" 에서 웹 앱으로 배포한 뒤, 발급된 웹 앱 URL(…/exec) 을 Webhook URL 칸에 붙여넣습니다.',
|
||||
sheetsGuideExampleCodeLabel: "예시 Apps Script 코드",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorFormControllerPanelMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorFormControllerPanelMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_FORM_CONTROLLER_PANEL_MESSAGES[key] ?? EDITOR_FORM_CONTROLLER_PANEL_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,359 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorFormInputPanelMessages = {
|
||||
sectionTitle: string;
|
||||
styleSectionTitle: string;
|
||||
|
||||
labelTypeLabel: string;
|
||||
labelTypeOptionText: string;
|
||||
labelTypeOptionImage: string;
|
||||
|
||||
fieldLabelLabel: string;
|
||||
|
||||
labelDisplayLabel: string;
|
||||
labelDisplayOptionVisible: string;
|
||||
labelDisplayOptionHidden: string;
|
||||
labelDisplayOptionFloating: string;
|
||||
|
||||
layoutLabel: string;
|
||||
layoutOptionStacked: string;
|
||||
layoutOptionInline: string;
|
||||
labelGapLabel: string;
|
||||
labelGapUnitLabel: string;
|
||||
|
||||
// Presets for label gap
|
||||
labelGapPresetTight: string;
|
||||
labelGapPresetNormal: string;
|
||||
labelGapPresetRelaxed: string;
|
||||
labelGapPresetExtra: string;
|
||||
|
||||
labelImageUrlLabel: string;
|
||||
labelImageAltLabel: string;
|
||||
|
||||
submitKeyLabel: string;
|
||||
|
||||
fieldTypeLabel: string;
|
||||
fieldTypeAria: string;
|
||||
fieldTypeOptionText: string;
|
||||
fieldTypeOptionEmail: string;
|
||||
fieldTypeOptionTextarea: string;
|
||||
|
||||
placeholderLabel: string;
|
||||
placeholderAria: string;
|
||||
|
||||
requiredNoticeText: string;
|
||||
|
||||
textSizeLabel: string;
|
||||
textSizeUnitLabel: string;
|
||||
|
||||
lineHeightLabel: string;
|
||||
lineHeightUnitLabel: string;
|
||||
|
||||
// Presets for line height
|
||||
lineHeightPresetTight: string;
|
||||
lineHeightPresetNormal: string;
|
||||
lineHeightPresetLoose: string;
|
||||
|
||||
letterSpacingLabel: string;
|
||||
letterSpacingUnitLabel: string;
|
||||
|
||||
// Presets for letter spacing
|
||||
letterSpacingPresetTight: string;
|
||||
letterSpacingPresetNormal: string;
|
||||
letterSpacingPresetWide: string;
|
||||
|
||||
textAlignLabel: string;
|
||||
textAlignOptionLeft: string;
|
||||
textAlignOptionCenter: string;
|
||||
textAlignOptionRight: string;
|
||||
|
||||
widthModeLabel: string;
|
||||
widthModeAria: string;
|
||||
widthModeOptionAuto: string;
|
||||
widthModeOptionFull: string;
|
||||
widthModeOptionFixed: string;
|
||||
|
||||
fixedWidthLabel: string;
|
||||
fixedWidthUnitLabel: string;
|
||||
|
||||
// Presets for fixed width
|
||||
fixedWidthPresetSmall: string;
|
||||
fixedWidthPresetMedium: string;
|
||||
fixedWidthPresetLarge: string;
|
||||
|
||||
paddingXLabel: string;
|
||||
paddingXUnitLabel: string;
|
||||
|
||||
// Presets for horizontal padding
|
||||
paddingXPresetXs: string;
|
||||
paddingXPresetSm: string;
|
||||
paddingXPresetMd: string;
|
||||
paddingXPresetLg: string;
|
||||
paddingXPresetXl: string;
|
||||
|
||||
paddingYLabel: string;
|
||||
paddingYUnitLabel: string;
|
||||
|
||||
// Presets for vertical padding
|
||||
paddingYPresetXs: string;
|
||||
paddingYPresetSm: string;
|
||||
paddingYPresetMd: string;
|
||||
paddingYPresetLg: string;
|
||||
paddingYPresetXl: string;
|
||||
|
||||
textColorLabel: string;
|
||||
textColorPickerAria: string;
|
||||
textColorHexAria: string;
|
||||
|
||||
fillColorLabel: string;
|
||||
fillColorPickerAria: string;
|
||||
fillColorHexAria: string;
|
||||
|
||||
strokeColorLabel: string;
|
||||
strokeColorPickerAria: string;
|
||||
strokeColorHexAria: string;
|
||||
|
||||
borderRadiusLabel: string;
|
||||
borderRadiusPresetNone: string;
|
||||
borderRadiusPresetSmall: string;
|
||||
borderRadiusPresetMedium: string;
|
||||
borderRadiusPresetLarge: string;
|
||||
borderRadiusPresetFull: string;
|
||||
};
|
||||
|
||||
const EDITOR_FORM_INPUT_PANEL_MESSAGES: Record<AppLocale, EditorFormInputPanelMessages> = {
|
||||
en: {
|
||||
sectionTitle: "Input field",
|
||||
styleSectionTitle: "Field style",
|
||||
|
||||
labelTypeLabel: "Label type",
|
||||
labelTypeOptionText: "Text",
|
||||
labelTypeOptionImage: "Image",
|
||||
|
||||
fieldLabelLabel: "Field label",
|
||||
|
||||
labelDisplayLabel: "Label display mode",
|
||||
labelDisplayOptionVisible: "Visible (default)",
|
||||
labelDisplayOptionHidden: "Hidden",
|
||||
labelDisplayOptionFloating: "Floating label",
|
||||
|
||||
layoutLabel: "Layout",
|
||||
layoutOptionStacked: "Vertical (default)",
|
||||
layoutOptionInline: "Horizontal (inline)",
|
||||
labelGapLabel: "Label/field gap",
|
||||
labelGapUnitLabel: "(px)",
|
||||
|
||||
labelGapPresetTight: "Tight",
|
||||
labelGapPresetNormal: "Normal",
|
||||
labelGapPresetRelaxed: "Relaxed",
|
||||
labelGapPresetExtra: "Extra",
|
||||
|
||||
labelImageUrlLabel: "Label image URL",
|
||||
labelImageAltLabel: "Label image alt text",
|
||||
|
||||
submitKeyLabel: "Submit key",
|
||||
|
||||
fieldTypeLabel: "Field type",
|
||||
fieldTypeAria: "Field type",
|
||||
fieldTypeOptionText: "Text",
|
||||
fieldTypeOptionEmail: "Email",
|
||||
fieldTypeOptionTextarea: "Multiline text",
|
||||
|
||||
placeholderLabel: "Placeholder",
|
||||
placeholderAria: "Placeholder",
|
||||
|
||||
requiredNoticeText: "Required state is configured in the form controller.",
|
||||
|
||||
textSizeLabel: "Field text size",
|
||||
textSizeUnitLabel: "(px)",
|
||||
|
||||
lineHeightLabel: "Field line height",
|
||||
lineHeightUnitLabel: "(px)",
|
||||
|
||||
lineHeightPresetTight: "Tight",
|
||||
lineHeightPresetNormal: "Normal",
|
||||
lineHeightPresetLoose: "Loose",
|
||||
|
||||
letterSpacingLabel: "Field letter spacing",
|
||||
letterSpacingUnitLabel: "(px)",
|
||||
|
||||
letterSpacingPresetTight: "Tight",
|
||||
letterSpacingPresetNormal: "Normal",
|
||||
letterSpacingPresetWide: "Wide",
|
||||
|
||||
textAlignLabel: "Text alignment",
|
||||
textAlignOptionLeft: "Left",
|
||||
textAlignOptionCenter: "Center",
|
||||
textAlignOptionRight: "Right",
|
||||
|
||||
widthModeLabel: "Width",
|
||||
widthModeAria: "Width",
|
||||
widthModeOptionAuto: "Auto",
|
||||
widthModeOptionFull: "Full width",
|
||||
widthModeOptionFixed: "Fixed value",
|
||||
|
||||
fixedWidthLabel: "Field fixed width",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
|
||||
fixedWidthPresetSmall: "Small",
|
||||
fixedWidthPresetMedium: "Medium",
|
||||
fixedWidthPresetLarge: "Large",
|
||||
|
||||
paddingXLabel: "Field horizontal padding",
|
||||
paddingXUnitLabel: "(px)",
|
||||
|
||||
paddingXPresetXs: "Extra thin",
|
||||
paddingXPresetSm: "Thin",
|
||||
paddingXPresetMd: "Normal",
|
||||
paddingXPresetLg: "Wide",
|
||||
paddingXPresetXl: "Extra wide",
|
||||
|
||||
paddingYLabel: "Field vertical padding",
|
||||
paddingYUnitLabel: "(px)",
|
||||
|
||||
paddingYPresetXs: "Extra thin",
|
||||
paddingYPresetSm: "Thin",
|
||||
paddingYPresetMd: "Normal",
|
||||
paddingYPresetLg: "Wide",
|
||||
paddingYPresetXl: "Extra wide",
|
||||
|
||||
textColorLabel: "Field text color",
|
||||
textColorPickerAria: "Field text color picker",
|
||||
textColorHexAria: "Field text color HEX",
|
||||
|
||||
fillColorLabel: "Field fill color",
|
||||
fillColorPickerAria: "Field fill color picker",
|
||||
fillColorHexAria: "Field fill color HEX",
|
||||
|
||||
strokeColorLabel: "Field border color",
|
||||
strokeColorPickerAria: "Field border color picker",
|
||||
strokeColorHexAria: "Field border color HEX",
|
||||
|
||||
borderRadiusLabel: "Field border radius",
|
||||
borderRadiusPresetNone: "None",
|
||||
borderRadiusPresetSmall: "Small",
|
||||
borderRadiusPresetMedium: "Medium",
|
||||
borderRadiusPresetLarge: "Large",
|
||||
borderRadiusPresetFull: "Fully rounded",
|
||||
},
|
||||
ko: {
|
||||
sectionTitle: "입력 필드",
|
||||
styleSectionTitle: "필드 스타일",
|
||||
|
||||
labelTypeLabel: "라벨 타입",
|
||||
labelTypeOptionText: "텍스트",
|
||||
labelTypeOptionImage: "이미지",
|
||||
|
||||
fieldLabelLabel: "필드 라벨",
|
||||
|
||||
labelDisplayLabel: "라벨 표시 방식",
|
||||
labelDisplayOptionVisible: "표시 (기본)",
|
||||
labelDisplayOptionHidden: "숨김",
|
||||
labelDisplayOptionFloating: "플로팅 라벨",
|
||||
|
||||
layoutLabel: "레이아웃",
|
||||
layoutOptionStacked: "세로 (기본)",
|
||||
layoutOptionInline: "가로 (인라인)",
|
||||
labelGapLabel: "라벨/필드 간격",
|
||||
labelGapUnitLabel: "(px)",
|
||||
|
||||
labelGapPresetTight: "타이트",
|
||||
labelGapPresetNormal: "보통",
|
||||
labelGapPresetRelaxed: "느슨",
|
||||
labelGapPresetExtra: "넓게",
|
||||
|
||||
labelImageUrlLabel: "라벨 이미지 URL",
|
||||
labelImageAltLabel: "라벨 이미지 대체 텍스트",
|
||||
|
||||
submitKeyLabel: "전송 키",
|
||||
|
||||
fieldTypeLabel: "필드 타입",
|
||||
fieldTypeAria: "필드 타입",
|
||||
fieldTypeOptionText: "텍스트",
|
||||
fieldTypeOptionEmail: "이메일",
|
||||
fieldTypeOptionTextarea: "긴 텍스트",
|
||||
|
||||
placeholderLabel: "Placeholder",
|
||||
placeholderAria: "Placeholder",
|
||||
|
||||
requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
|
||||
|
||||
textSizeLabel: "필드 텍스트 크기",
|
||||
textSizeUnitLabel: "(px)",
|
||||
|
||||
lineHeightLabel: "필드 줄간격",
|
||||
lineHeightUnitLabel: "(px)",
|
||||
|
||||
lineHeightPresetTight: "타이트",
|
||||
lineHeightPresetNormal: "보통",
|
||||
lineHeightPresetLoose: "루즈",
|
||||
|
||||
letterSpacingLabel: "필드 자간",
|
||||
letterSpacingUnitLabel: "(px)",
|
||||
|
||||
letterSpacingPresetTight: "좁게",
|
||||
letterSpacingPresetNormal: "보통",
|
||||
letterSpacingPresetWide: "넓게",
|
||||
|
||||
textAlignLabel: "텍스트 정렬",
|
||||
textAlignOptionLeft: "왼쪽",
|
||||
textAlignOptionCenter: "가운데",
|
||||
textAlignOptionRight: "오른쪽",
|
||||
|
||||
widthModeLabel: "너비",
|
||||
widthModeAria: "너비",
|
||||
widthModeOptionAuto: "자동",
|
||||
widthModeOptionFull: "전체 폭",
|
||||
widthModeOptionFixed: "고정 값",
|
||||
|
||||
fixedWidthLabel: "필드 고정 너비",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
|
||||
fixedWidthPresetSmall: "작게",
|
||||
fixedWidthPresetMedium: "보통",
|
||||
fixedWidthPresetLarge: "넓게",
|
||||
|
||||
paddingXLabel: "필드 가로 패딩",
|
||||
paddingXUnitLabel: "(px)",
|
||||
|
||||
paddingXPresetXs: "아주 얇게",
|
||||
paddingXPresetSm: "얇게",
|
||||
paddingXPresetMd: "보통",
|
||||
paddingXPresetLg: "넓게",
|
||||
paddingXPresetXl: "아주 넓게",
|
||||
|
||||
paddingYLabel: "필드 세로 패딩",
|
||||
paddingYUnitLabel: "(px)",
|
||||
|
||||
paddingYPresetXs: "아주 얇게",
|
||||
paddingYPresetSm: "얇게",
|
||||
paddingYPresetMd: "보통",
|
||||
paddingYPresetLg: "넓게",
|
||||
paddingYPresetXl: "아주 넓게",
|
||||
|
||||
textColorLabel: "필드 텍스트 색상",
|
||||
textColorPickerAria: "필드 텍스트 색상 피커",
|
||||
textColorHexAria: "필드 텍스트 색상 HEX",
|
||||
|
||||
fillColorLabel: "필드 채움 색상",
|
||||
fillColorPickerAria: "필드 채움 색상 피커",
|
||||
fillColorHexAria: "필드 채움 색상 HEX",
|
||||
|
||||
strokeColorLabel: "필드 테두리 색상",
|
||||
strokeColorPickerAria: "필드 테두리 색상 피커",
|
||||
strokeColorHexAria: "필드 테두리 색상 HEX",
|
||||
|
||||
borderRadiusLabel: "필드 모서리 둥글기",
|
||||
borderRadiusPresetNone: "없음",
|
||||
borderRadiusPresetSmall: "작게",
|
||||
borderRadiusPresetMedium: "보통",
|
||||
borderRadiusPresetLarge: "크게",
|
||||
borderRadiusPresetFull: "완전 둥글게",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorFormInputPanelMessages(locale: AppLocale | null | undefined): EditorFormInputPanelMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_FORM_INPUT_PANEL_MESSAGES[key] ?? EDITOR_FORM_INPUT_PANEL_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,282 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorFormRadioPanelMessages = {
|
||||
sectionTitle: string;
|
||||
|
||||
// Group title & option configuration
|
||||
groupTitleTypeLabel: string;
|
||||
groupTitleTypeOptionText: string;
|
||||
groupTitleTypeOptionImage: string;
|
||||
|
||||
groupTitleDisplayLabel: string;
|
||||
groupTitleDisplayOptionVisible: string;
|
||||
groupTitleDisplayOptionHidden: string;
|
||||
|
||||
layoutLabel: string;
|
||||
layoutOptionStacked: string;
|
||||
layoutOptionInline: string;
|
||||
|
||||
optionLayoutLabel: string;
|
||||
optionLayoutOptionStacked: string;
|
||||
optionLayoutOptionInline: string;
|
||||
|
||||
labelGapLabel: string;
|
||||
|
||||
groupTitleLabel: string;
|
||||
|
||||
submitKeyLabel: string;
|
||||
|
||||
optionsLabel: string;
|
||||
addOptionButtonLabel: string;
|
||||
optionLabelPlaceholder: string;
|
||||
optionValuePlaceholder: string;
|
||||
|
||||
optionImageSourceLabel: string;
|
||||
optionImageSourceOptionUrl: string;
|
||||
optionImageSourceOptionUpload: string;
|
||||
|
||||
optionImageUrlPlaceholder: string;
|
||||
optionImageUploadLabel: string;
|
||||
optionImageUploadAria: string;
|
||||
|
||||
groupTitleImageSourceLabel: string;
|
||||
groupTitleImageSourceOptionUrl: string;
|
||||
groupTitleImageSourceOptionUpload: string;
|
||||
|
||||
groupTitleImageUrlLabel: string;
|
||||
groupTitleImageUploadLabel: string;
|
||||
groupTitleImageUploadAria: string;
|
||||
|
||||
requiredNoticeText: string;
|
||||
|
||||
styleSectionTitle: string;
|
||||
|
||||
textSizeLabel: string;
|
||||
textSizeUnitLabel: string;
|
||||
|
||||
lineHeightLabel: string;
|
||||
lineHeightUnitLabel: string;
|
||||
|
||||
letterSpacingLabel: string;
|
||||
letterSpacingUnitLabel: string;
|
||||
|
||||
fixedWidthLabel: string;
|
||||
fixedWidthUnitLabel: string;
|
||||
|
||||
paddingXLabel: string;
|
||||
paddingXUnitLabel: string;
|
||||
|
||||
paddingYLabel: string;
|
||||
paddingYUnitLabel: string;
|
||||
|
||||
optionGapLabel: string;
|
||||
optionGapUnitLabel: string;
|
||||
|
||||
textColorLabel: string;
|
||||
textColorPickerAria: string;
|
||||
textColorHexAria: string;
|
||||
|
||||
fillColorLabel: string;
|
||||
fillColorPickerAria: string;
|
||||
fillColorHexAria: string;
|
||||
|
||||
strokeColorLabel: string;
|
||||
strokeColorPickerAria: string;
|
||||
strokeColorHexAria: string;
|
||||
|
||||
borderRadiusLabel: string;
|
||||
borderRadiusPresetNone: string;
|
||||
borderRadiusPresetSmall: string;
|
||||
borderRadiusPresetMedium: string;
|
||||
borderRadiusPresetLarge: string;
|
||||
borderRadiusPresetFull: string;
|
||||
};
|
||||
|
||||
const EDITOR_FORM_RADIO_PANEL_MESSAGES: Record<AppLocale, EditorFormRadioPanelMessages> = {
|
||||
en: {
|
||||
sectionTitle: "Radio field",
|
||||
|
||||
groupTitleTypeLabel: "Group title type",
|
||||
groupTitleTypeOptionText: "Text",
|
||||
groupTitleTypeOptionImage: "Image",
|
||||
|
||||
groupTitleDisplayLabel: "Group title display mode",
|
||||
groupTitleDisplayOptionVisible: "Visible (default)",
|
||||
groupTitleDisplayOptionHidden: "Hidden",
|
||||
|
||||
layoutLabel: "Group title layout",
|
||||
layoutOptionStacked: "Vertical (default)",
|
||||
layoutOptionInline: "Horizontal (inline)",
|
||||
|
||||
optionLayoutLabel: "Option layout",
|
||||
optionLayoutOptionStacked: "Vertical (default)",
|
||||
optionLayoutOptionInline: "Horizontal (inline)",
|
||||
|
||||
labelGapLabel: "Label/field gap",
|
||||
|
||||
groupTitleLabel: "Group title",
|
||||
|
||||
submitKeyLabel: "Submit key",
|
||||
|
||||
optionsLabel: "Options",
|
||||
addOptionButtonLabel: "Add option",
|
||||
optionLabelPlaceholder: "Label",
|
||||
optionValuePlaceholder: "Value (value)",
|
||||
|
||||
optionImageSourceLabel: "Option image source",
|
||||
optionImageSourceOptionUrl: "URL",
|
||||
optionImageSourceOptionUpload: "File upload",
|
||||
|
||||
optionImageUrlPlaceholder: "Option image URL (optional)",
|
||||
optionImageUploadLabel: "Option image file upload",
|
||||
optionImageUploadAria: "Option image file upload",
|
||||
|
||||
groupTitleImageSourceLabel: "Group title image source",
|
||||
groupTitleImageSourceOptionUrl: "URL",
|
||||
groupTitleImageSourceOptionUpload: "File upload",
|
||||
|
||||
groupTitleImageUrlLabel: "Group title image URL",
|
||||
groupTitleImageUploadLabel: "Group title image file upload",
|
||||
groupTitleImageUploadAria: "Group title image file upload",
|
||||
|
||||
requiredNoticeText: "Required state is configured in the form controller.",
|
||||
|
||||
styleSectionTitle: "Field style",
|
||||
|
||||
textSizeLabel: "Radio text size",
|
||||
textSizeUnitLabel: "(px)",
|
||||
|
||||
lineHeightLabel: "Radio line height",
|
||||
lineHeightUnitLabel: "(px)",
|
||||
|
||||
letterSpacingLabel: "Radio letter spacing",
|
||||
letterSpacingUnitLabel: "(px)",
|
||||
|
||||
fixedWidthLabel: "Field fixed width",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
|
||||
paddingXLabel: "Radio horizontal padding",
|
||||
paddingXUnitLabel: "(px)",
|
||||
|
||||
paddingYLabel: "Radio vertical padding",
|
||||
paddingYUnitLabel: "(px)",
|
||||
|
||||
optionGapLabel: "Radio option gap",
|
||||
optionGapUnitLabel: "(px)",
|
||||
|
||||
textColorLabel: "Text color",
|
||||
textColorPickerAria: "Radio text color picker",
|
||||
textColorHexAria: "Radio text color HEX",
|
||||
|
||||
fillColorLabel: "Background color",
|
||||
fillColorPickerAria: "Radio background color picker",
|
||||
fillColorHexAria: "Radio background color HEX",
|
||||
|
||||
strokeColorLabel: "Border color",
|
||||
strokeColorPickerAria: "Radio border color picker",
|
||||
strokeColorHexAria: "Radio border color HEX",
|
||||
|
||||
borderRadiusLabel: "Field border radius",
|
||||
borderRadiusPresetNone: "None",
|
||||
borderRadiusPresetSmall: "Small",
|
||||
borderRadiusPresetMedium: "Medium",
|
||||
borderRadiusPresetLarge: "Large",
|
||||
borderRadiusPresetFull: "Fully rounded",
|
||||
},
|
||||
ko: {
|
||||
sectionTitle: "라디오 필드",
|
||||
|
||||
groupTitleTypeLabel: "그룹 타이틀 타입",
|
||||
groupTitleTypeOptionText: "텍스트",
|
||||
groupTitleTypeOptionImage: "이미지",
|
||||
|
||||
groupTitleDisplayLabel: "그룹 타이틀 표시 방식",
|
||||
groupTitleDisplayOptionVisible: "표시 (기본)",
|
||||
groupTitleDisplayOptionHidden: "숨김",
|
||||
|
||||
layoutLabel: "그룹 타이틀 레이아웃",
|
||||
layoutOptionStacked: "세로 (기본)",
|
||||
layoutOptionInline: "가로 (인라인)",
|
||||
|
||||
optionLayoutLabel: "옵션 레이아웃",
|
||||
optionLayoutOptionStacked: "세로 (기본)",
|
||||
optionLayoutOptionInline: "가로 (인라인)",
|
||||
|
||||
labelGapLabel: "라벨/필드 간격",
|
||||
|
||||
groupTitleLabel: "그룹 타이틀",
|
||||
|
||||
submitKeyLabel: "전송 키",
|
||||
|
||||
optionsLabel: "옵션",
|
||||
addOptionButtonLabel: "옵션 추가",
|
||||
optionLabelPlaceholder: "라벨",
|
||||
optionValuePlaceholder: "값(value)",
|
||||
|
||||
optionImageSourceLabel: "옵션 이미지 소스",
|
||||
optionImageSourceOptionUrl: "URL",
|
||||
optionImageSourceOptionUpload: "파일 업로드",
|
||||
|
||||
optionImageUrlPlaceholder: "옵션 이미지 URL (선택)",
|
||||
optionImageUploadLabel: "옵션 이미지 파일 업로드",
|
||||
optionImageUploadAria: "옵션 이미지 파일 업로드",
|
||||
|
||||
groupTitleImageSourceLabel: "그룹 타이틀 이미지 소스",
|
||||
groupTitleImageSourceOptionUrl: "URL",
|
||||
groupTitleImageSourceOptionUpload: "파일 업로드",
|
||||
|
||||
groupTitleImageUrlLabel: "그룹 타이틀 이미지 URL",
|
||||
groupTitleImageUploadLabel: "그룹 타이틀 이미지 파일 업로드",
|
||||
groupTitleImageUploadAria: "그룹 타이틀 이미지 파일 업로드",
|
||||
|
||||
requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
|
||||
|
||||
styleSectionTitle: "필드 스타일",
|
||||
|
||||
textSizeLabel: "라디오 텍스트 크기",
|
||||
textSizeUnitLabel: "(px)",
|
||||
|
||||
lineHeightLabel: "라디오 줄간격",
|
||||
lineHeightUnitLabel: "(px)",
|
||||
|
||||
letterSpacingLabel: "라디오 자간",
|
||||
letterSpacingUnitLabel: "(px)",
|
||||
|
||||
fixedWidthLabel: "필드 고정 너비",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
|
||||
paddingXLabel: "라디오 가로 패딩",
|
||||
paddingXUnitLabel: "(px)",
|
||||
|
||||
paddingYLabel: "라디오 세로 패딩",
|
||||
paddingYUnitLabel: "(px)",
|
||||
|
||||
optionGapLabel: "라디오 옵션 간격",
|
||||
optionGapUnitLabel: "(px)",
|
||||
|
||||
textColorLabel: "텍스트 색상",
|
||||
textColorPickerAria: "라디오 텍스트 색상 피커",
|
||||
textColorHexAria: "라디오 텍스트 색상 HEX",
|
||||
|
||||
fillColorLabel: "배경 색상",
|
||||
fillColorPickerAria: "라디오 배경 색상 피커",
|
||||
fillColorHexAria: "라디오 배경 색상 HEX",
|
||||
|
||||
strokeColorLabel: "테두리 색상",
|
||||
strokeColorPickerAria: "라디오 테두리 색상 피커",
|
||||
strokeColorHexAria: "라디오 테두리 색상 HEX",
|
||||
|
||||
borderRadiusLabel: "필드 모서리 둥글기",
|
||||
borderRadiusPresetNone: "없음",
|
||||
borderRadiusPresetSmall: "작게",
|
||||
borderRadiusPresetMedium: "보통",
|
||||
borderRadiusPresetLarge: "크게",
|
||||
borderRadiusPresetFull: "완전 둥글게",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorFormRadioPanelMessages(locale: AppLocale | null | undefined): EditorFormRadioPanelMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_FORM_RADIO_PANEL_MESSAGES[key] ?? EDITOR_FORM_RADIO_PANEL_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,226 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorFormSelectPanelMessages = {
|
||||
sectionTitle: string;
|
||||
|
||||
labelTypeLabel: string;
|
||||
labelTypeOptionText: string;
|
||||
labelTypeOptionImage: string;
|
||||
|
||||
labelDisplayLabel: string;
|
||||
labelDisplayOptionVisible: string;
|
||||
labelDisplayOptionHidden: string;
|
||||
|
||||
layoutLabel: string;
|
||||
layoutOptionStacked: string;
|
||||
layoutOptionInline: string;
|
||||
|
||||
labelGapLabel: string;
|
||||
|
||||
fieldLabelLabel: string;
|
||||
submitKeyLabel: string;
|
||||
|
||||
optionsLabel: string;
|
||||
addOptionButtonLabel: string;
|
||||
optionLabelPlaceholder: string;
|
||||
optionValuePlaceholder: string;
|
||||
|
||||
requiredNoticeText: string;
|
||||
|
||||
styleSectionTitle: string;
|
||||
|
||||
textSizeLabel: string;
|
||||
textSizeUnitLabel: string;
|
||||
|
||||
lineHeightLabel: string;
|
||||
lineHeightUnitLabel: string;
|
||||
|
||||
letterSpacingLabel: string;
|
||||
letterSpacingUnitLabel: string;
|
||||
|
||||
widthModeLabel: string;
|
||||
widthModeOptionAuto: string;
|
||||
widthModeOptionFull: string;
|
||||
widthModeOptionFixed: string;
|
||||
|
||||
fixedWidthLabel: string;
|
||||
fixedWidthUnitLabel: string;
|
||||
|
||||
paddingXLabel: string;
|
||||
paddingXUnitLabel: string;
|
||||
|
||||
paddingYLabel: string;
|
||||
paddingYUnitLabel: string;
|
||||
|
||||
textColorLabel: string;
|
||||
textColorPickerAria: string;
|
||||
textColorHexAria: string;
|
||||
|
||||
fillColorLabel: string;
|
||||
fillColorPickerAria: string;
|
||||
fillColorHexAria: string;
|
||||
|
||||
strokeColorLabel: string;
|
||||
strokeColorPickerAria: string;
|
||||
strokeColorHexAria: string;
|
||||
|
||||
borderRadiusLabel: string;
|
||||
borderRadiusPresetNone: string;
|
||||
borderRadiusPresetSmall: string;
|
||||
borderRadiusPresetMedium: string;
|
||||
borderRadiusPresetLarge: string;
|
||||
borderRadiusPresetFull: string;
|
||||
};
|
||||
|
||||
const EDITOR_FORM_SELECT_PANEL_MESSAGES: Record<AppLocale, EditorFormSelectPanelMessages> = {
|
||||
en: {
|
||||
sectionTitle: "Select field",
|
||||
|
||||
labelTypeLabel: "Label type",
|
||||
labelTypeOptionText: "Text",
|
||||
labelTypeOptionImage: "Image",
|
||||
|
||||
labelDisplayLabel: "Label display mode",
|
||||
labelDisplayOptionVisible: "Visible (default)",
|
||||
labelDisplayOptionHidden: "Hidden",
|
||||
|
||||
layoutLabel: "Layout",
|
||||
layoutOptionStacked: "Vertical (default)",
|
||||
layoutOptionInline: "Horizontal (inline)",
|
||||
|
||||
labelGapLabel: "Label/field gap",
|
||||
|
||||
fieldLabelLabel: "Field label",
|
||||
submitKeyLabel: "Submit key",
|
||||
|
||||
optionsLabel: "Options",
|
||||
addOptionButtonLabel: "Add option",
|
||||
optionLabelPlaceholder: "Label",
|
||||
optionValuePlaceholder: "Value (value)",
|
||||
|
||||
requiredNoticeText: "Required state is configured in the form controller.",
|
||||
|
||||
styleSectionTitle: "Field style",
|
||||
|
||||
textSizeLabel: "Select text size",
|
||||
textSizeUnitLabel: "(px)",
|
||||
|
||||
lineHeightLabel: "Select line height",
|
||||
lineHeightUnitLabel: "(px)",
|
||||
|
||||
letterSpacingLabel: "Select letter spacing",
|
||||
letterSpacingUnitLabel: "(px)",
|
||||
|
||||
widthModeLabel: "Field width",
|
||||
widthModeOptionAuto: "Auto",
|
||||
widthModeOptionFull: "Full width",
|
||||
widthModeOptionFixed: "Fixed value",
|
||||
|
||||
fixedWidthLabel: "Field fixed width",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
|
||||
paddingXLabel: "Select horizontal padding",
|
||||
paddingXUnitLabel: "(px)",
|
||||
|
||||
paddingYLabel: "Select vertical padding",
|
||||
paddingYUnitLabel: "(px)",
|
||||
|
||||
textColorLabel: "Field text color",
|
||||
textColorPickerAria: "Select text color picker",
|
||||
textColorHexAria: "Select text color HEX",
|
||||
|
||||
fillColorLabel: "Field fill color",
|
||||
fillColorPickerAria: "Select fill color picker",
|
||||
fillColorHexAria: "Select fill color HEX",
|
||||
|
||||
strokeColorLabel: "Field border color",
|
||||
strokeColorPickerAria: "Select border color picker",
|
||||
strokeColorHexAria: "Select border color HEX",
|
||||
|
||||
borderRadiusLabel: "Field border radius",
|
||||
borderRadiusPresetNone: "None",
|
||||
borderRadiusPresetSmall: "Small",
|
||||
borderRadiusPresetMedium: "Medium",
|
||||
borderRadiusPresetLarge: "Large",
|
||||
borderRadiusPresetFull: "Fully rounded",
|
||||
},
|
||||
ko: {
|
||||
sectionTitle: "셀렉트 필드",
|
||||
|
||||
labelTypeLabel: "라벨 타입",
|
||||
labelTypeOptionText: "텍스트",
|
||||
labelTypeOptionImage: "이미지",
|
||||
|
||||
labelDisplayLabel: "라벨 표시 방식",
|
||||
labelDisplayOptionVisible: "표시 (기본)",
|
||||
labelDisplayOptionHidden: "숨김",
|
||||
|
||||
layoutLabel: "레이아웃",
|
||||
layoutOptionStacked: "세로 (기본)",
|
||||
layoutOptionInline: "가로 (인라인)",
|
||||
|
||||
labelGapLabel: "라벨/필드 간격",
|
||||
|
||||
fieldLabelLabel: "필드 라벨",
|
||||
submitKeyLabel: "전송 키",
|
||||
|
||||
optionsLabel: "옵션",
|
||||
addOptionButtonLabel: "옵션 추가",
|
||||
optionLabelPlaceholder: "라벨",
|
||||
optionValuePlaceholder: "값(value)",
|
||||
|
||||
requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
|
||||
|
||||
styleSectionTitle: "필드 스타일",
|
||||
|
||||
textSizeLabel: "셀렉트 텍스트 크기",
|
||||
textSizeUnitLabel: "(px)",
|
||||
|
||||
lineHeightLabel: "셀렉트 줄간격",
|
||||
lineHeightUnitLabel: "(px)",
|
||||
|
||||
letterSpacingLabel: "셀렉트 자간",
|
||||
letterSpacingUnitLabel: "(px)",
|
||||
|
||||
widthModeLabel: "필드 너비",
|
||||
widthModeOptionAuto: "자동",
|
||||
widthModeOptionFull: "전체 폭",
|
||||
widthModeOptionFixed: "고정 값",
|
||||
|
||||
fixedWidthLabel: "필드 고정 너비",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
|
||||
paddingXLabel: "셀렉트 가로 패딩",
|
||||
paddingXUnitLabel: "(px)",
|
||||
|
||||
paddingYLabel: "셀렉트 세로 패딩",
|
||||
paddingYUnitLabel: "(px)",
|
||||
|
||||
textColorLabel: "필드 텍스트 색상",
|
||||
textColorPickerAria: "셀렉트 텍스트 색상 피커",
|
||||
textColorHexAria: "셀렉트 텍스트 색상 HEX",
|
||||
|
||||
fillColorLabel: "필드 채움 색상",
|
||||
fillColorPickerAria: "셀렉트 채움 색상 피커",
|
||||
fillColorHexAria: "셀렉트 채움 색상 HEX",
|
||||
|
||||
strokeColorLabel: "필드 테두리 색상",
|
||||
strokeColorPickerAria: "셀렉트 테두리 색상 피커",
|
||||
strokeColorHexAria: "셀렉트 테두리 색상 HEX",
|
||||
|
||||
borderRadiusLabel: "필드 모서리 둥글기",
|
||||
borderRadiusPresetNone: "없음",
|
||||
borderRadiusPresetSmall: "작게",
|
||||
borderRadiusPresetMedium: "보통",
|
||||
borderRadiusPresetLarge: "크게",
|
||||
borderRadiusPresetFull: "완전 둥글게",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorFormSelectPanelMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorFormSelectPanelMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_FORM_SELECT_PANEL_MESSAGES[key] ?? EDITOR_FORM_SELECT_PANEL_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorImagePanelMessages = {
|
||||
imageSourceLabel: string;
|
||||
imageSourceAria: string;
|
||||
imageSourceOptionUrl: string;
|
||||
imageSourceOptionUpload: string;
|
||||
|
||||
imageUrlLabel: string;
|
||||
imageUrlAria: string;
|
||||
|
||||
imageUploadLabel: string;
|
||||
imageUploadAria: string;
|
||||
|
||||
altLabel: string;
|
||||
altAria: string;
|
||||
|
||||
styleSectionTitle: string;
|
||||
|
||||
cardBackgroundLabel: string;
|
||||
cardBackgroundPickerAria: string;
|
||||
cardBackgroundHexAria: string;
|
||||
|
||||
alignLabel: string;
|
||||
alignAria: string;
|
||||
alignOptionLeft: string;
|
||||
alignOptionCenter: string;
|
||||
alignOptionRight: string;
|
||||
|
||||
widthModeLabel: string;
|
||||
widthModeAria: string;
|
||||
widthModeOptionAuto: string;
|
||||
widthModeOptionFixed: string;
|
||||
|
||||
fixedWidthLabel: string;
|
||||
fixedWidthUnitLabel: string;
|
||||
fixedWidthPresetSmall: string;
|
||||
fixedWidthPresetMedium: string;
|
||||
fixedWidthPresetLarge: string;
|
||||
|
||||
borderRadiusLabel: string;
|
||||
borderRadiusPresetNone: string;
|
||||
borderRadiusPresetSmall: string;
|
||||
borderRadiusPresetMedium: string;
|
||||
borderRadiusPresetLarge: string;
|
||||
borderRadiusPresetFull: string;
|
||||
};
|
||||
|
||||
const EDITOR_IMAGE_PANEL_MESSAGES: Record<AppLocale, EditorImagePanelMessages> = {
|
||||
en: {
|
||||
imageSourceLabel: "Image source",
|
||||
imageSourceAria: "Image source",
|
||||
imageSourceOptionUrl: "URL",
|
||||
imageSourceOptionUpload: "File upload",
|
||||
|
||||
imageUrlLabel: "Image URL",
|
||||
imageUrlAria: "Image URL",
|
||||
|
||||
imageUploadLabel: "Image file upload",
|
||||
imageUploadAria: "Image file upload",
|
||||
|
||||
altLabel: "Alt text",
|
||||
altAria: "Alt text",
|
||||
|
||||
styleSectionTitle: "Image style",
|
||||
|
||||
cardBackgroundLabel: "Card background color",
|
||||
cardBackgroundPickerAria: "Image card background color picker",
|
||||
cardBackgroundHexAria: "Image card background color HEX",
|
||||
|
||||
alignLabel: "Alignment",
|
||||
alignAria: "Image alignment",
|
||||
alignOptionLeft: "Left",
|
||||
alignOptionCenter: "Center",
|
||||
alignOptionRight: "Right",
|
||||
|
||||
widthModeLabel: "Width mode",
|
||||
widthModeAria: "Image width mode",
|
||||
widthModeOptionAuto: "Fit to content",
|
||||
widthModeOptionFixed: "Fixed width",
|
||||
|
||||
fixedWidthLabel: "Fixed width",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
fixedWidthPresetSmall: "Small",
|
||||
fixedWidthPresetMedium: "Medium",
|
||||
fixedWidthPresetLarge: "Wide",
|
||||
|
||||
borderRadiusLabel: "Border radius",
|
||||
borderRadiusPresetNone: "None",
|
||||
borderRadiusPresetSmall: "Small",
|
||||
borderRadiusPresetMedium: "Medium",
|
||||
borderRadiusPresetLarge: "Large",
|
||||
borderRadiusPresetFull: "Fully rounded",
|
||||
},
|
||||
ko: {
|
||||
imageSourceLabel: "이미지 소스",
|
||||
imageSourceAria: "이미지 소스",
|
||||
imageSourceOptionUrl: "URL",
|
||||
imageSourceOptionUpload: "파일 업로드",
|
||||
|
||||
imageUrlLabel: "이미지 URL",
|
||||
imageUrlAria: "이미지 URL",
|
||||
|
||||
imageUploadLabel: "이미지 파일 업로드",
|
||||
imageUploadAria: "이미지 파일 업로드",
|
||||
|
||||
altLabel: "대체 텍스트",
|
||||
altAria: "대체 텍스트",
|
||||
|
||||
styleSectionTitle: "이미지 스타일",
|
||||
|
||||
cardBackgroundLabel: "카드 배경색",
|
||||
cardBackgroundPickerAria: "이미지 카드 배경색 피커",
|
||||
cardBackgroundHexAria: "이미지 카드 배경색 HEX",
|
||||
|
||||
alignLabel: "정렬",
|
||||
alignAria: "이미지 정렬",
|
||||
alignOptionLeft: "왼쪽",
|
||||
alignOptionCenter: "가운데",
|
||||
alignOptionRight: "오른쪽",
|
||||
|
||||
widthModeLabel: "너비 모드",
|
||||
widthModeAria: "이미지 너비 모드",
|
||||
widthModeOptionAuto: "내용에 맞춤",
|
||||
widthModeOptionFixed: "고정 너비",
|
||||
|
||||
fixedWidthLabel: "고정 너비",
|
||||
fixedWidthUnitLabel: "(px)",
|
||||
fixedWidthPresetSmall: "작게",
|
||||
fixedWidthPresetMedium: "보통",
|
||||
fixedWidthPresetLarge: "넓게",
|
||||
|
||||
borderRadiusLabel: "모서리 둥글기",
|
||||
borderRadiusPresetNone: "없음",
|
||||
borderRadiusPresetSmall: "작게",
|
||||
borderRadiusPresetMedium: "보통",
|
||||
borderRadiusPresetLarge: "크게",
|
||||
borderRadiusPresetFull: "완전 둥글게",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorImagePanelMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorImagePanelMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_IMAGE_PANEL_MESSAGES[key] ?? EDITOR_IMAGE_PANEL_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,160 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorListPanelMessages = {
|
||||
listItemsLabel: string;
|
||||
listItemsAria: string;
|
||||
|
||||
alignLabel: string;
|
||||
alignAria: string;
|
||||
alignOptionLeft: string;
|
||||
alignOptionCenter: string;
|
||||
alignOptionRight: string;
|
||||
|
||||
styleSectionTitle: string;
|
||||
|
||||
fontSizeLabel: string;
|
||||
fontSizeUnitLabel: string;
|
||||
fontSizePresetSmall: string;
|
||||
fontSizePresetMedium: string;
|
||||
fontSizePresetLarge: string;
|
||||
|
||||
lineHeightLabel: string;
|
||||
lineHeightPresetTight: string;
|
||||
lineHeightPresetNormal: string;
|
||||
lineHeightPresetRelaxed: string;
|
||||
|
||||
textColorLabel: string;
|
||||
textColorPickerAria: string;
|
||||
textColorHexAria: string;
|
||||
|
||||
backgroundColorLabel: string;
|
||||
backgroundColorPickerAria: string;
|
||||
backgroundColorHexAria: string;
|
||||
|
||||
bulletStyleLabel: string;
|
||||
bulletStyleAria: string;
|
||||
bulletStyleOptionDisc: string;
|
||||
bulletStyleOptionCircle: string;
|
||||
bulletStyleOptionSquare: string;
|
||||
bulletStyleOptionDecimal: string;
|
||||
bulletStyleOptionLowerAlpha: string;
|
||||
bulletStyleOptionUpperAlpha: string;
|
||||
bulletStyleOptionLowerRoman: string;
|
||||
bulletStyleOptionUpperRoman: string;
|
||||
bulletStyleOptionNone: string;
|
||||
|
||||
gapLabel: string;
|
||||
gapUnitLabel: string;
|
||||
gapPresetTight: string;
|
||||
gapPresetNormal: string;
|
||||
gapPresetRelaxed: string;
|
||||
};
|
||||
|
||||
const EDITOR_LIST_PANEL_MESSAGES: Record<AppLocale, EditorListPanelMessages> = {
|
||||
en: {
|
||||
listItemsLabel: "List items (separated by line breaks)",
|
||||
listItemsAria: "List items",
|
||||
|
||||
alignLabel: "Alignment",
|
||||
alignAria: "List alignment",
|
||||
alignOptionLeft: "Left",
|
||||
alignOptionCenter: "Center",
|
||||
alignOptionRight: "Right",
|
||||
|
||||
styleSectionTitle: "List style",
|
||||
|
||||
fontSizeLabel: "Font size",
|
||||
fontSizeUnitLabel: "(px)",
|
||||
fontSizePresetSmall: "Small",
|
||||
fontSizePresetMedium: "Medium",
|
||||
fontSizePresetLarge: "Large",
|
||||
|
||||
lineHeightLabel: "Line height",
|
||||
lineHeightPresetTight: "Tight",
|
||||
lineHeightPresetNormal: "Normal",
|
||||
lineHeightPresetRelaxed: "Relaxed",
|
||||
|
||||
textColorLabel: "Text color",
|
||||
textColorPickerAria: "List text color picker",
|
||||
textColorHexAria: "List text color HEX",
|
||||
|
||||
backgroundColorLabel: "Block background color",
|
||||
backgroundColorPickerAria: "List background color picker",
|
||||
backgroundColorHexAria: "List background color HEX",
|
||||
|
||||
bulletStyleLabel: "Bullet style",
|
||||
bulletStyleAria: "List bullet style",
|
||||
bulletStyleOptionDisc: "Default (●)",
|
||||
bulletStyleOptionCircle: "Circle (○)",
|
||||
bulletStyleOptionSquare: "Square (■)",
|
||||
bulletStyleOptionDecimal: "Decimal (1.)",
|
||||
bulletStyleOptionLowerAlpha: "Lower alpha (a.)",
|
||||
bulletStyleOptionUpperAlpha: "Upper alpha (A.)",
|
||||
bulletStyleOptionLowerRoman: "Lower roman (i.)",
|
||||
bulletStyleOptionUpperRoman: "Upper roman (I.)",
|
||||
bulletStyleOptionNone: "None",
|
||||
|
||||
gapLabel: "Item gap",
|
||||
gapUnitLabel: "(px)",
|
||||
gapPresetTight: "Tight",
|
||||
gapPresetNormal: "Normal",
|
||||
gapPresetRelaxed: "Relaxed",
|
||||
},
|
||||
ko: {
|
||||
listItemsLabel: "리스트 아이템 (줄바꿈으로 구분)",
|
||||
listItemsAria: "리스트 아이템들",
|
||||
|
||||
alignLabel: "정렬",
|
||||
alignAria: "리스트 정렬",
|
||||
alignOptionLeft: "왼쪽",
|
||||
alignOptionCenter: "가운데",
|
||||
alignOptionRight: "오른쪽",
|
||||
|
||||
styleSectionTitle: "리스트 스타일",
|
||||
|
||||
fontSizeLabel: "글자 크기",
|
||||
fontSizeUnitLabel: "(px)",
|
||||
fontSizePresetSmall: "작게",
|
||||
fontSizePresetMedium: "보통",
|
||||
fontSizePresetLarge: "크게",
|
||||
|
||||
lineHeightLabel: "줄 간격",
|
||||
lineHeightPresetTight: "좁게",
|
||||
lineHeightPresetNormal: "보통",
|
||||
lineHeightPresetRelaxed: "넓게",
|
||||
|
||||
textColorLabel: "텍스트 색상",
|
||||
textColorPickerAria: "리스트 텍스트 색상 피커",
|
||||
textColorHexAria: "리스트 텍스트 색상 HEX",
|
||||
|
||||
backgroundColorLabel: "블록 배경색",
|
||||
backgroundColorPickerAria: "리스트 배경색 피커",
|
||||
backgroundColorHexAria: "리스트 배경색 HEX",
|
||||
|
||||
bulletStyleLabel: "불릿 스타일",
|
||||
bulletStyleAria: "리스트 불릿 스타일",
|
||||
bulletStyleOptionDisc: "기본 (●)",
|
||||
bulletStyleOptionCircle: "원 (○)",
|
||||
bulletStyleOptionSquare: "사각 (■)",
|
||||
bulletStyleOptionDecimal: "숫자 (1.)",
|
||||
bulletStyleOptionLowerAlpha: "알파벳 소문자 (a.)",
|
||||
bulletStyleOptionUpperAlpha: "알파벳 대문자 (A.)",
|
||||
bulletStyleOptionLowerRoman: "로마 숫자 소문자 (i.)",
|
||||
bulletStyleOptionUpperRoman: "로마 숫자 대문자 (I.)",
|
||||
bulletStyleOptionNone: "없음",
|
||||
|
||||
gapLabel: "아이템 간 여백",
|
||||
gapUnitLabel: "(px)",
|
||||
gapPresetTight: "좁게",
|
||||
gapPresetNormal: "보통",
|
||||
gapPresetRelaxed: "넓게",
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorListPanelMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorListPanelMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_LIST_PANEL_MESSAGES[key] ?? EDITOR_LIST_PANEL_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
import type { AppLocale } from "../locale";
|
||||
import { DEFAULT_LOCALE } from "../locale";
|
||||
|
||||
export type EditorProjectPropertiesPanelMessages = {
|
||||
sectionTitle: string;
|
||||
|
||||
projectTitleLabel: string;
|
||||
projectTitleAria: string;
|
||||
|
||||
projectSlugLabel: string;
|
||||
projectSlugAria: string;
|
||||
|
||||
canvasWidthLabel: string;
|
||||
canvasWidthUnitLabel: string;
|
||||
canvasWidthPresetMobile: string;
|
||||
canvasWidthPresetTablet: string;
|
||||
canvasWidthPresetDesktop: string;
|
||||
|
||||
canvasBgLabel: string;
|
||||
canvasBgColorAria: string;
|
||||
canvasBgHexAria: string;
|
||||
|
||||
pageBgLabel: string;
|
||||
pageBgColorAria: string;
|
||||
pageBgHexAria: string;
|
||||
|
||||
seoSectionTitle: string;
|
||||
|
||||
seoTitleLabel: string;
|
||||
seoTitleAria: string;
|
||||
seoTitlePlaceholderFallback: string;
|
||||
|
||||
seoDescriptionLabel: string;
|
||||
seoDescriptionAria: string;
|
||||
seoDescriptionPlaceholder: string;
|
||||
|
||||
seoOgImageUrlLabel: string;
|
||||
seoOgImageUrlAria: string;
|
||||
seoOgImageUrlPlaceholder: string;
|
||||
|
||||
seoCanonicalUrlLabel: string;
|
||||
seoCanonicalUrlAria: string;
|
||||
seoCanonicalUrlPlaceholder: string;
|
||||
|
||||
seoNoIndexAria: string;
|
||||
seoNoIndexLabel: string;
|
||||
|
||||
headHtmlLabel: string;
|
||||
headHtmlAria: string;
|
||||
headHtmlPlaceholder: string;
|
||||
|
||||
trackingScriptLabel: string;
|
||||
trackingScriptAria: string;
|
||||
trackingScriptPlaceholder: string;
|
||||
};
|
||||
|
||||
const EDITOR_PROJECT_PROPERTIES_PANEL_MESSAGES: Record<AppLocale, EditorProjectPropertiesPanelMessages> = {
|
||||
en: {
|
||||
sectionTitle: "Project settings",
|
||||
|
||||
projectTitleLabel: "Project title",
|
||||
projectTitleAria: "Project title",
|
||||
|
||||
projectSlugLabel: "Project slug",
|
||||
projectSlugAria: "Project slug",
|
||||
|
||||
canvasWidthLabel: "Canvas width",
|
||||
canvasWidthUnitLabel: "(px)",
|
||||
canvasWidthPresetMobile: "Mobile (390px)",
|
||||
canvasWidthPresetTablet: "Tablet (768px)",
|
||||
canvasWidthPresetDesktop: "Desktop (1200px)",
|
||||
|
||||
canvasBgLabel: "Canvas background color",
|
||||
canvasBgColorAria: "Canvas background color",
|
||||
canvasBgHexAria: "Canvas background HEX",
|
||||
|
||||
pageBgLabel: "Page background color",
|
||||
pageBgColorAria: "Page background color",
|
||||
pageBgHexAria: "Page background HEX",
|
||||
|
||||
seoSectionTitle: "SEO / meta",
|
||||
|
||||
seoTitleLabel: "SEO title",
|
||||
seoTitleAria: "SEO title",
|
||||
seoTitlePlaceholderFallback: "Page title",
|
||||
|
||||
seoDescriptionLabel: "Meta description",
|
||||
seoDescriptionAria: "Meta description",
|
||||
seoDescriptionPlaceholder: "Enter a description for search engines and social sharing.",
|
||||
|
||||
seoOgImageUrlLabel: "OG/Twitter image URL",
|
||||
seoOgImageUrlAria: "OG/Twitter image URL",
|
||||
seoOgImageUrlPlaceholder: "e.g. https://example.com/og-image.png",
|
||||
|
||||
seoCanonicalUrlLabel: "Canonical URL",
|
||||
seoCanonicalUrlAria: "Canonical URL",
|
||||
seoCanonicalUrlPlaceholder: "e.g. https://example.com/landing",
|
||||
|
||||
seoNoIndexAria: "Hide from search engines (noindex)",
|
||||
seoNoIndexLabel: "Hide from search engines (noindex)",
|
||||
|
||||
headHtmlLabel: "Page head HTML",
|
||||
headHtmlAria: "Page head HTML",
|
||||
headHtmlPlaceholder: 'e.g. <meta name="description" content="..." />',
|
||||
|
||||
trackingScriptLabel: "Tracking script",
|
||||
trackingScriptAria: "Tracking script",
|
||||
trackingScriptPlaceholder: 'e.g. <script>/* GA, Pixel code */</script>',
|
||||
},
|
||||
|
||||
ko: {
|
||||
sectionTitle: "프로젝트 설정",
|
||||
|
||||
projectTitleLabel: "프로젝트 제목",
|
||||
projectTitleAria: "프로젝트 제목",
|
||||
|
||||
projectSlugLabel: "프로젝트 주소 (slug)",
|
||||
projectSlugAria: "프로젝트 주소 (slug)",
|
||||
|
||||
canvasWidthLabel: "캔버스 너비",
|
||||
canvasWidthUnitLabel: "(px)",
|
||||
canvasWidthPresetMobile: "모바일 (390px)",
|
||||
canvasWidthPresetTablet: "태블릿 (768px)",
|
||||
canvasWidthPresetDesktop: "데스크톱 (1200px)",
|
||||
|
||||
canvasBgLabel: "캔버스 배경색",
|
||||
canvasBgColorAria: "캔버스 배경색",
|
||||
canvasBgHexAria: "캔버스 배경색 HEX",
|
||||
|
||||
pageBgLabel: "페이지 배경색",
|
||||
pageBgColorAria: "페이지 배경색",
|
||||
pageBgHexAria: "페이지 배경색 HEX",
|
||||
|
||||
seoSectionTitle: "SEO / 메타",
|
||||
|
||||
seoTitleLabel: "SEO 타이틀",
|
||||
seoTitleAria: "SEO 타이틀",
|
||||
seoTitlePlaceholderFallback: "페이지 제목",
|
||||
|
||||
seoDescriptionLabel: "메타 디스크립션",
|
||||
seoDescriptionAria: "메타 디스크립션",
|
||||
seoDescriptionPlaceholder: "검색엔진 및 SNS 공유에 노출될 페이지 설명을 입력하세요.",
|
||||
|
||||
seoOgImageUrlLabel: "OG/Twitter 이미지 URL",
|
||||
seoOgImageUrlAria: "OG/Twitter 이미지 URL",
|
||||
seoOgImageUrlPlaceholder: "예: https://example.com/og-image.png",
|
||||
|
||||
seoCanonicalUrlLabel: "Canonical URL",
|
||||
seoCanonicalUrlAria: "Canonical URL",
|
||||
seoCanonicalUrlPlaceholder: "예: https://example.com/landing",
|
||||
|
||||
seoNoIndexAria: "검색 엔진에 노출하지 않기 (noindex)",
|
||||
seoNoIndexLabel: "검색 엔진에 노출하지 않기 (noindex)",
|
||||
|
||||
headHtmlLabel: "페이지 head HTML",
|
||||
headHtmlAria: "페이지 head HTML",
|
||||
headHtmlPlaceholder: '예: <meta name="description" content="..." />',
|
||||
|
||||
trackingScriptLabel: "추적 스크립트",
|
||||
trackingScriptAria: "추적 스크립트",
|
||||
trackingScriptPlaceholder: '예: <script>/* GA, Pixel 코드 */</script>',
|
||||
},
|
||||
};
|
||||
|
||||
export function getEditorProjectPropertiesPanelMessages(
|
||||
locale: AppLocale | null | undefined,
|
||||
): EditorProjectPropertiesPanelMessages {
|
||||
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
|
||||
return EDITOR_PROJECT_PROPERTIES_PANEL_MESSAGES[key] ?? EDITOR_PROJECT_PROPERTIES_PANEL_MESSAGES[DEFAULT_LOCALE];
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user