feat: 뉴스 미리보기 — AI 요약 상단 + 본문/메모 분리

- AI 요약: 파란 박스로 상단에 별도 표시
- 본문 입력: extracted_text에 추가 (기사 전문 붙여넣기)
- 메모: user_note에 저장 (개인 메모)
- 기사 선택 시 편집 상태 초기화

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-06 15:42:33 +09:00
parent e10b0f2883
commit db34a06243

View File

@@ -24,6 +24,8 @@
let currentPage = $state(1);
let noteEditing = $state(false);
let noteText = $state('');
let contentEditing = $state(false);
let contentText = $state('');
let expandedSources = $state({});
onMount(async () => {
@@ -71,6 +73,8 @@
function selectArticle(article) {
selectedArticle = article;
noteEditing = false;
contentEditing = false;
if (!article.is_read) markRead(article);
}
@@ -95,6 +99,22 @@
}
}
async function saveContent() {
try {
// 본문은 extracted_text에 추가 (기존 요약 유지 + 본문 합산)
const newText = selectedArticle.extracted_text + '\n\n---\n\n' + contentText;
await api(`/documents/${selectedArticle.id}/content`, {
method: 'PUT',
body: JSON.stringify({ content: newText }),
});
selectedArticle.extracted_text = newText;
contentEditing = false;
addToast('success', '본문 저장됨');
} catch (e) {
addToast('error', '본문 저장 실패');
}
}
async function saveNote() {
try {
await api(`/documents/${selectedArticle.id}`, {
@@ -269,35 +289,68 @@
<!-- 본문 -->
<div class="p-5">
<h2 class="text-lg font-bold mb-3">{selectedArticle.title}</h2>
<!-- AI 요약 -->
{#if selectedArticle.ai_summary}
<div class="mb-4 p-3 bg-[var(--accent)]/5 border border-[var(--accent)]/20 rounded-lg">
<h4 class="text-[10px] font-semibold text-[var(--accent)] uppercase mb-1">AI 요약</h4>
<div class="text-sm markdown-body">
{@html renderMd(selectedArticle.ai_summary)}
</div>
</div>
{/if}
<!-- RSS 원문 -->
<div class="markdown-body mb-4">
{@html renderMd(selectedArticle.extracted_text || '')}
</div>
<!-- 본문 입력 -->
{#if noteEditing}
<div class="mt-4 border-t border-[var(--border)] pt-4">
<h4 class="text-xs font-semibold text-[var(--text-dim)] mb-2">본문 / 메모 입력</h4>
<div class="border-t border-[var(--border)] pt-4 mt-4">
<h4 class="text-xs font-semibold text-[var(--text-dim)] mb-2">본문 입력</h4>
{#if contentEditing}
<textarea
bind:value={contentText}
class="w-full h-32 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-sm text-[var(--text)] resize-y outline-none focus:border-[var(--accent)]"
placeholder="기사 전문을 붙여넣으세요..."
></textarea>
<div class="flex gap-2 mt-2">
<button onclick={saveContent} class="px-3 py-1 text-xs bg-[var(--accent)] text-white rounded">저장</button>
<button onclick={() => contentEditing = false} class="px-3 py-1 text-xs text-[var(--text-dim)]">취소</button>
</div>
{:else}
<button
onclick={() => { contentText = ''; contentEditing = true; }}
class="text-xs text-[var(--text-dim)] hover:text-[var(--accent)]"
>+ 본문 입력</button>
{/if}
</div>
<!-- 메모 -->
<div class="border-t border-[var(--border)] pt-4 mt-4">
<h4 class="text-xs font-semibold text-[var(--text-dim)] mb-2">메모</h4>
{#if noteEditing}
<textarea
bind:value={noteText}
class="w-full h-32 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-sm text-[var(--text)] resize-y outline-none focus:border-[var(--accent)]"
placeholder="기사 본문이나 메모를 입력하세요..."
class="w-full h-20 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-sm text-[var(--text)] resize-y outline-none focus:border-[var(--accent)]"
placeholder="메모를 입력하세요..."
></textarea>
<div class="flex gap-2 mt-2">
<button onclick={saveNote} class="px-3 py-1 text-xs bg-[var(--accent)] text-white rounded">저장</button>
<button onclick={() => noteEditing = false} class="px-3 py-1 text-xs text-[var(--text-dim)]">취소</button>
</div>
</div>
{:else}
<button
onclick={() => { noteText = selectedArticle.user_note || ''; noteEditing = true; }}
class="mt-4 text-xs text-[var(--text-dim)] hover:text-[var(--accent)]"
>+ 본문/메모 입력</button>
{#if selectedArticle.user_note}
<div class="mt-2 p-3 bg-[var(--bg)] rounded-lg text-sm">
{selectedArticle.user_note}
</div>
{:else}
<button
onclick={() => { noteText = selectedArticle.user_note || ''; noteEditing = true; }}
class="text-xs text-[var(--text-dim)] hover:text-[var(--accent)]"
>+ 메모 추가</button>
{#if selectedArticle.user_note}
<div class="mt-2 p-3 bg-[var(--bg)] rounded-lg text-sm">
{selectedArticle.user_note}
</div>
{/if}
{/if}
{/if}
</div>
</div>
</div>
{/if}