hyungi/hyungi_document_server
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 뉴스 페이지 모바일 최적화 — 데스크톱/모바일 공존

Browse Source 
데스크톱: 사이드바 필터 + 하단 미리보기 (기존 유지)
모바일: 드롭다운 필터 + 전체화면 미리보기 + 하단 원문 버튼
- body scroll lock (모바일 전체화면 시)
- 스크롤 위치 복원
- active 터치 피드백
- 안읽음 건수 표시
- 페이지네이션 10개 제한

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-06 15:56:33 +09:00
parent db34a06243
commit fc50008843
1 changed files with 156 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
frontend/src/routes/news/+page.svelte
View File

@@ -1,5 +1,7 @@
<script>
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { api } from '$lib/api';
import { addToast } from '$lib/stores/ui';
import { marked } from 'marked';
@@ -7,10 +9,8 @@
function renderMd(text) {
return DOMPurify.sanitize(marked(text), {
USE_PROFILES: { html: true },
FORBID_TAGS: ['style', 'script'],
FORBID_ATTR: ['onerror', 'onclick'],
ALLOW_UNKNOWN_PROTOCOLS: false,
USE_PROFILES: { html: true }, FORBID_TAGS: ['style', 'script'],
FORBID_ATTR: ['onerror', 'onclick'], ALLOW_UNKNOWN_PROTOCOLS: false,
});
}
@@ -20,23 +20,25 @@
let selectedArticle = $state(null);
let filterSource = $state('');
let showUnreadOnly = $state(false);
let sourceTree = $state({}); // { 경향신문: ['문화', '사회'], NYT: ['World'] }
let sourceTree = $state({});
let currentPage = $state(1);
let noteEditing = $state(false);
let noteText = $state('');
let contentEditing = $state(false);
let contentText = $state('');
let filterOpen = $state(false);
let expandedSources = $state({});
let savedScrollY = 0;
const PAPER_NAMES = {
'경향신문': '경향신문', '朝日新聞': '朝日新聞', 'NYT': 'NYT',
'Le Monde': 'Le Monde', 'Der Spiegel': 'Der Spiegel', '新华网': '新华网',
};
onMount(async () => {
try {
const srcData = await api('/news/sources');
const tree = {};
// 신문사 매핑: 이름에서 마지막 단어를 분야로 분리
const PAPER_NAMES = {
'경향신문': '경향신문', '朝日新聞': '朝日新聞', 'NYT': 'NYT',
'Le Monde': 'Le Monde', 'Der Spiegel': 'Der Spiegel', '新华网': '新华网',
};
srcData.forEach(s => {
let paper = '';
for (const [key] of Object.entries(PAPER_NAMES)) {
@@ -60,30 +62,37 @@
params.set('page_size', '30');
if (filterSource) params.set('source', filterSource);
if (showUnreadOnly) params.set('unread_only', 'true');
const data = await api(`/news/articles?${params}`);
articles = data.items;
total = data.total;
} catch (err) {
addToast('error', '뉴스 로딩 실패');
} finally {
loading = false;
}
} finally { loading = false; }
}
function selectArticle(article) {
savedScrollY = document.querySelector('.news-list')?.scrollTop || 0;
selectedArticle = article;
noteEditing = false;
contentEditing = false;
// body scroll lock (모바일)
document.body.style.overflow = 'hidden';
if (!article.is_read) markRead(article);
}
function closeArticle() {
selectedArticle = null;
document.body.style.overflow = '';
// 스크롤 복원
requestAnimationFrame(() => {
const list = document.querySelector('.news-list');
if (list) list.scrollTop = savedScrollY;
});
}
async function markRead(article) {
try {
await api(`/documents/${article.id}`, {
method: 'PATCH',
body: JSON.stringify({ is_read: true }),
});
await api(`/documents/${article.id}`, { method: 'PATCH', body: JSON.stringify({ is_read: true }) });
article.is_read = true;
articles = [...articles];
} catch (e) {}
@@ -94,39 +103,26 @@
const result = await api('/news/mark-all-read', { method: 'POST' });
addToast('success', `${result.marked}건 읽음 처리`);
articles = articles.map(a => ({ ...a, is_read: true }));
} catch (e) {
addToast('error', '실패');
}
} catch (e) { addToast('error', '실패'); }
}
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 }),
});
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', '본문 저장 실패');
}
} catch (e) { addToast('error', '저장 실패'); }
}
async function saveNote() {
try {
await api(`/documents/${selectedArticle.id}`, {
method: 'PATCH',
body: JSON.stringify({ user_note: noteText }),
});
await api(`/documents/${selectedArticle.id}`, { method: 'PATCH', body: JSON.stringify({ user_note: noteText }) });
selectedArticle.user_note = noteText;
noteEditing = false;
addToast('success', '저장됨');
} catch (e) {
addToast('error', '저장 실패');
}
addToast('success', '메모 저장됨');
} catch (e) { addToast('error', '저장 실패'); }
}
function timeAgo(dateStr) {
@@ -135,56 +131,46 @@
if (mins < 60) return `${mins}분 전`;
const hours = Math.floor(mins / 60);
if (hours < 24) return `${hours}시간 전`;
const days = Math.floor(hours / 24);
return `${days}일 전`;
return `${Math.floor(hours / 24)}일 전`;
}
function applyFilter(src) {
filterSource = src;
filterOpen = false;
}
// 필터 변경 시에만 1페이지 리셋
let prevFilter = '';
$effect(() => {
const key = `${filterSource}|${showUnreadOnly}`;
if (key !== prevFilter) {
prevFilter = key;
currentPage = 1;
loadArticles();
}
if (key !== prevFilter) { prevFilter = key; currentPage = 1; loadArticles(); }
});
let unreadCount = $derived(articles.filter(a => !a.is_read).length);
</script>
<div class="flex h-full">
<!-- 좌측 필터 -->
<div class="w-48 shrink-0 border-r border-[var(--border)] bg-[var(--sidebar-bg)] p-3 overflow-y-auto">
<!-- 데스크톱 사이드바 필터 -->
<div class="hidden lg:block w-48 shrink-0 border-r border-[var(--border)] bg-[var(--sidebar-bg)] p-3 overflow-y-auto">
<h2 class="text-xs font-semibold text-[var(--text-dim)] uppercase mb-3">필터</h2>
<button
onclick={() => { filterSource = ''; }}
class="w-full text-left px-2 py-1.5 rounded text-sm mb-1 {filterSource === '' ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text-dim)] hover:bg-[var(--surface)]'}"
>📰 전체</button>
<button onclick={() => applyFilter('')} class="w-full text-left px-2 py-1.5 rounded text-sm mb-1 {filterSource === '' ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text-dim)] hover:bg-[var(--surface)]'}">📰 전체</button>
{#each Object.entries(sourceTree) as [paper, categories]}
<div class="mb-0.5">
<button
onclick={() => { filterSource = paper; expandedSources[paper] = !expandedSources[paper]; }}
class="w-full text-left px-2 py-1.5 rounded text-sm flex items-center justify-between
{filterSource === paper ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text-dim)] hover:bg-[var(--surface)]'}"
>
<button onclick={() => { applyFilter(paper); expandedSources[paper] = !expandedSources[paper]; }}
class="w-full text-left px-2 py-1.5 rounded text-sm flex items-center justify-between {filterSource === paper ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text-dim)] hover:bg-[var(--surface)]'}">
<span>{paper}</span>
<span class="text-[10px]">{expandedSources[paper] ? '▼' : '▶'}</span>
</button>
{#if expandedSources[paper] && categories.length > 0}
{#each categories as cat}
<button
onclick={() => { filterSource = `${paper}/${cat}`; }}
class="w-full text-left pl-6 pr-2 py-1 rounded text-xs
{filterSource === `${paper}/${cat}` ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text-dim)] hover:bg-[var(--surface)]'}"
>{cat}</button>
<button onclick={() => applyFilter(`${paper}/${cat}`)}
class="w-full text-left pl-6 pr-2 py-1 rounded text-xs {filterSource === `${paper}/${cat}` ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text-dim)] hover:bg-[var(--surface)]'}">{cat}</button>
{/each}
{/if}
</div>
{/each}
<hr class="my-3 border-[var(--border)]">
<label class="flex items-center gap-2 px-2 text-xs text-[var(--text-dim)]">
<input type="checkbox" bind:checked={showUnreadOnly} class="rounded">
읽지 않음만
@@ -194,45 +180,61 @@
<!-- 메인 -->
<div class="flex-1 flex flex-col min-h-0">
<!-- 상단 바 -->
<div class="flex items-center justify-between px-4 py-2 border-b border-[var(--border)] shrink-0">
<span class="text-xs text-[var(--text-dim)]">{total}건</span>
<button
onclick={markAllRead}
class="text-xs text-[var(--text-dim)] hover:text-[var(--accent)] px-2 py-1 rounded border border-[var(--border)]"
>전체 읽음</button>
<div class="flex items-center justify-between px-3 py-2 border-b border-[var(--border)] shrink-0">
<div class="flex items-center gap-2">
<!-- 모바일 필터 드롭다운 -->
<button onclick={() => filterOpen = !filterOpen}
class="lg:hidden flex items-center gap-1 px-2 py-1 text-xs rounded border border-[var(--border)] text-[var(--text-dim)]">
📰 {filterSource || '전체'} <span class="text-[10px]">{filterOpen ? '▲' : '▼'}</span>
</button>
<!-- 모바일 안읽음 -->
<label class="lg:hidden flex items-center gap-1 text-xs text-[var(--text-dim)]">
<input type="checkbox" bind:checked={showUnreadOnly} class="rounded"> 안읽음
</label>
<span class="text-xs text-[var(--text-dim)]">{total}건</span>
{#if unreadCount > 0}
<span class="text-[10px] text-[var(--accent)]">● {unreadCount} 안읽음</span>
{/if}
</div>
<button onclick={markAllRead} class="text-xs text-[var(--text-dim)] hover:text-[var(--accent)] px-2 py-1 rounded border border-[var(--border)]">전체 읽음</button>
</div>
<!-- 상단: 기사 리스트 -->
<div class="overflow-y-auto {selectedArticle ? 'h-[40%] shrink-0 border-b border-[var(--border)]' : 'flex-1'}">
<!-- 모바일 필터 드롭다운 내용 -->
{#if filterOpen}
<div class="lg:hidden border-b border-[var(--border)] bg-[var(--sidebar-bg)] px-3 py-2 max-h-60 overflow-y-auto">
<button onclick={() => applyFilter('')} class="block w-full text-left px-2 py-2 rounded text-sm {filterSource === '' ? 'text-[var(--accent)]' : 'text-[var(--text-dim)]'}">📰 전체</button>
{#each Object.entries(sourceTree) as [paper, categories]}
<button onclick={() => applyFilter(paper)} class="block w-full text-left px-2 py-2 rounded text-sm {filterSource === paper ? 'text-[var(--accent)]' : 'text-[var(--text-dim)]'}">{paper}</button>
{#each categories as cat}
<button onclick={() => applyFilter(`${paper}/${cat}`)} class="block w-full text-left pl-6 pr-2 py-1.5 rounded text-xs {filterSource === `${paper}/${cat}` ? 'text-[var(--accent)]' : 'text-[var(--text-dim)]'}">{cat}</button>
{/each}
{/each}
</div>
{/if}
<!-- 기사 리스트 -->
<div class="news-list flex-1 overflow-y-auto {selectedArticle ? 'hidden lg:block lg:h-[40%] lg:shrink-0 lg:border-b lg:border-[var(--border)]' : ''}">
{#if loading}
<div class="p-4 space-y-2">
{#each Array(5) as _}
<div class="h-12 bg-[var(--surface)] rounded animate-pulse"></div>
<div class="h-16 bg-[var(--surface)] rounded animate-pulse"></div>
{/each}
</div>
{:else if articles.length === 0}
<div class="text-center py-16 text-[var(--text-dim)]">
<p class="text-sm">뉴스가 없습니다</p>
</div>
<div class="text-center py-16 text-[var(--text-dim)]"><p class="text-sm">뉴스가 없습니다</p></div>
{:else}
{#each articles as article}
<button
onclick={() => selectArticle(article)}
class="w-full text-left px-4 py-2.5 border-b border-[var(--border)]/30 hover:bg-[var(--surface)] transition-colors
{selectedArticle?.id === article.id ? 'bg-[var(--accent)]/5 border-l-2 border-l-[var(--accent)]' : ''}"
>
<button onclick={() => selectArticle(article)}
class="w-full text-left px-4 py-3 border-b border-[var(--border)]/30 hover:bg-[var(--surface)] active:bg-[var(--surface)] transition-colors
{selectedArticle?.id === article.id ? 'bg-[var(--accent)]/5 border-l-2 border-l-[var(--accent)]' : ''}">
<div class="flex items-start gap-2">
<span class="mt-1 text-[10px] {article.is_read ? 'text-[var(--text-dim)]' : 'text-[var(--accent)]'}">
{article.is_read ? '○' : '●'}
</span>
<span class="mt-1.5 text-[10px] shrink-0 {article.is_read ? 'text-[var(--text-dim)]' : 'text-[var(--accent)]'}">{article.is_read ? '○' : '●'}</span>
<div class="min-w-0 flex-1">
<p class="text-sm truncate {article.is_read ? 'text-[var(--text-dim)]' : 'font-medium'}">{article.title}</p>
<p class="text-xs text-[var(--text-dim)] truncate mt-0.5">{(article.ai_summary?.replace(/[*#_`~]/g, '') || article.extracted_text?.split('\n').filter(l => l.trim() && l !== article.title)[0] || '').slice(0, 120)}</p>
<div class="flex items-center gap-2 mt-0.5 text-[10px] text-[var(--text-dim)]">
<p class="text-sm leading-snug {article.is_read ? 'text-[var(--text-dim)]' : 'font-medium'}">{article.title}</p>
<p class="text-xs text-[var(--text-dim)] mt-1 line-clamp-2">{(article.ai_summary?.replace(/[*#_`~]/g, '') || article.extracted_text?.split('\n').filter(l => l.trim() && l !== article.title)[0] || '').slice(0, 120)}</p>
<div class="flex items-center gap-2 mt-1 text-[10px] text-[var(--text-dim)]">
<span>{article.ai_sub_group || ''}</span>
{#if article.ai_tags?.length}
<span>{article.ai_tags[0]?.split('/').pop()}</span>
{/if}
{#if article.ai_tags?.length}<span>{article.ai_tags[0]?.split('/').pop()}</span>{/if}
<span>{timeAgo(article.created_at)}</span>
</div>
</div>
@@ -243,112 +245,51 @@
</div>
<!-- 페이지네이션 -->
{#if total > 30}
{#if total > 30 && !selectedArticle}
<div class="flex justify-center gap-1 py-2 border-t border-[var(--border)] shrink-0">
{#each Array(Math.ceil(total / 30)) as _, i}
<button
onclick={() => { currentPage = i + 1; loadArticles(); }}
class="px-2 py-0.5 rounded text-xs {currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'text-[var(--text-dim)]'}"
>{i + 1}</button>
{#each Array(Math.min(Math.ceil(total / 30), 10)) as _, i}
<button onclick={() => { currentPage = i + 1; loadArticles(); }}
class="px-2.5 py-1 rounded text-xs {currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'text-[var(--text-dim)]'}">{i + 1}</button>
{/each}
</div>
{/if}
<!-- 하단: 기사 미리보기 -->
<!-- 데스크톱 미리보기 (하단) -->
{#if selectedArticle}
<div class="flex-1 overflow-y-auto bg-[var(--surface)] min-h-0">
<!-- 미리보기 헤더 -->
<div class="hidden lg:block lg:flex-1 lg:overflow-y-auto bg-[var(--surface)] min-h-0">
<div class="flex items-center justify-between px-5 py-2 border-b border-[var(--border)] sticky top-0 bg-[var(--surface)]">
<div class="flex items-center gap-2 text-xs text-[var(--text-dim)]">
<span>{selectedArticle.ai_sub_group}</span>
<span>·</span>
<span>{timeAgo(selectedArticle.created_at)}</span>
<span>·</span>
<span>{selectedArticle.file_format}</span>
<span>{selectedArticle.ai_sub_group}</span><span>·</span><span>{timeAgo(selectedArticle.created_at)}</span>
</div>
<div class="flex items-center gap-2">
{#if selectedArticle.edit_url}
<a
href={selectedArticle.edit_url}
target="_blank"
rel="noopener noreferrer"
class="text-xs text-[var(--accent)] hover:underline"
>원문 보기 →</a>
{/if}
<a
href="/documents/{selectedArticle.id}"
class="text-xs text-[var(--text-dim)] hover:text-[var(--text)]"
>문서 상세</a>
<button
onclick={() => selectedArticle = null}
class="text-xs text-[var(--text-dim)] hover:text-[var(--text)]"
>닫기</button>
{#if selectedArticle.edit_url}<a href={selectedArticle.edit_url} target="_blank" rel="noopener noreferrer" class="text-xs text-[var(--accent)]">원문 →</a>{/if}
<button onclick={closeArticle} class="text-xs text-[var(--text-dim)] hover:text-[var(--text)]">닫기</button>
</div>
</div>
<!-- 본문 -->
<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 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>
<!-- 본문 입력 -->
<div class="markdown-body mb-4">{@html renderMd(selectedArticle.extracted_text || '')}</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 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}
<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" 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-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>
<textarea bind:value={noteText} 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" 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>
{: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}
<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}
</div>
</div>
@@ -356,3 +297,50 @@
{/if}
</div>
</div>
<!-- 모바일 전체화면 미리보기 -->
{#if selectedArticle}
<div class="lg:hidden fixed inset-0 z-30 bg-[var(--bg)] overflow-y-auto">
<div class="sticky top-0 z-10 flex items-center justify-between px-4 py-3 border-b border-[var(--border)] bg-[var(--surface)]">
<button onclick={closeArticle} class="text-sm text-[var(--accent)]">← 목록</button>
{#if selectedArticle.edit_url}<a href={selectedArticle.edit_url} target="_blank" rel="noopener noreferrer" class="text-sm text-[var(--accent)]">원문 →</a>{/if}
</div>
<div class="p-4 pb-20">
<h2 class="text-lg font-bold mb-2">{selectedArticle.title}</h2>
<div class="flex items-center gap-2 mb-4 text-xs text-[var(--text-dim)]">
<span>{selectedArticle.ai_sub_group}</span><span>·</span><span>{timeAgo(selectedArticle.created_at)}</span>
</div>
{#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}
<div class="markdown-body mb-4">{@html renderMd(selectedArticle.extracted_text || '')}</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 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" placeholder="기사 전문..."></textarea>
<div class="flex gap-2 mt-2"><button onclick={saveContent} class="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded">저장</button><button onclick={() => contentEditing = false} class="px-3 py-1.5 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-20 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-sm text-[var(--text)] resize-y outline-none" placeholder="메모..."></textarea>
<div class="flex gap-2 mt-2"><button onclick={saveNote} class="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded">저장</button><button onclick={() => noteEditing = false} class="px-3 py-1.5 text-xs text-[var(--text-dim)]">취소</button></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}
</div>
</div>
<!-- 모바일 하단 원문 버튼 -->
{#if selectedArticle.edit_url}
<div class="fixed bottom-0 left-0 right-0 p-3 bg-[var(--surface)] border-t border-[var(--border)] lg:hidden">
<a href={selectedArticle.edit_url} target="_blank" rel="noopener noreferrer"
class="block w-full text-center py-2.5 bg-[var(--accent)] text-white rounded-lg text-sm font-medium">원문 보기 →</a>
</div>
{/if}
</div>
{/if}