zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

게시물 HTML 블록 분리

Browse Source
This commit is contained in:
zenn
2026-06-26 15:23:19 +09:00
parent c77cf1032b
commit 8e3bf4a874
16 changed files with 233 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/admin/AdminEditorBlockPanel.vue
View File

@@ -114,10 +114,18 @@ const panelTitle = computed(() => {
return '텍스트 색상'
}
if (props.panel.kind === 'embed') {
if (props.panel.kind === 'html') {
return 'HTML'
}
if (props.panel.kind === 'link') {
return '링크'
}
if (props.panel.kind === 'iframe') {
return 'iframe'
}
if (props.panel.kind === 'quote') {
return '인용'
}
@@ -154,8 +162,16 @@ const panelMeta = computed(() => {
return '선택한 텍스트'
}
if (props.panel.kind === 'embed') {
return 'URL·iframe'
if (props.panel.kind === 'html') {
return '사용자 HTML'
}
if (props.panel.kind === 'link') {
return 'URL 카드'
}
if (props.panel.kind === 'iframe') {
return 'sandbox iframe'
}
if (props.panel.kind === 'quote') {
@@ -252,17 +268,25 @@ const onPanelFocusOut = (event) => {
</div>
</template>
<template v-else-if="panel.kind === 'embed'">
<template v-else-if="['html', 'link', 'iframe'].includes(panel.kind)">
<label class="admin-editor-block-panel__field grid gap-2 text-sm">
<span class="font-semibold text-[#394047]">HTML 코드 또는 URL</span>
<span class="font-semibold text-[#394047]">
{{ panel.kind === 'link' ? 'URL' : panel.kind === 'iframe' ? 'iframe 코드' : 'HTML 코드' }}
</span>
<textarea
class="min-h-28 resize-y rounded border border-[#d7dde2] bg-[#eff1f2] px-3 py-2 font-mono text-xs leading-5 text-[#15171a] outline-none transition-colors focus:border-[#8e9cac]"
:value="panel.url"
placeholder="https://www.youtube.com/watch?v=... 또는 <iframe src=&quot;...&quot;></iframe>"
:placeholder="panel.kind === 'link' ? 'https://example.com' : panel.kind === 'iframe' ? '<iframe src=&quot;https://...&quot;></iframe>' : '<table>...</table>'"
@input="emit('update-embed-url', $event.target.value)"
/>
</label>
<p class="admin-editor-block-panel__hint mt-3 text-xs leading-relaxed text-[#8e9cac]">
<p v-if="panel.kind === 'html'" class="admin-editor-block-panel__hint mt-3 text-xs leading-relaxed text-[#8e9cac]">
본문 HTML은 그대로 표시하되 script, iframe, 이벤트 속성 같은 실행성 코드는 제거합니다. iframe은 /iframe 블록을 사용합니다.
</p>
<p v-else-if="panel.kind === 'link'" class="admin-editor-block-panel__hint mt-3 text-xs leading-relaxed text-[#8e9cac]">
YouTube·X(트위터)·Mastodon URL은 임베드로, 그 외 외부 URL은 링크 카드로 표시합니다.
</p>
<p v-else class="admin-editor-block-panel__hint mt-3 text-xs leading-relaxed text-[#8e9cac]">
YouTube·YouTube Shorts, X(트위터) 게시물 URL과 외부 서비스 iframe 코드를 지원합니다. iframe은 src 등 허용된 속성만 사용합니다.
</p>
</template>