주식 히스토리 API 및 블로그 작성 API 추가
This commit is contained in:
@@ -10,6 +10,30 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.blog-header__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.blog-new-btn {
|
||||
align-self: flex-start;
|
||||
border: 1px solid rgba(192, 132, 252, 0.45);
|
||||
background: rgba(192, 132, 252, 0.1);
|
||||
color: var(--accent-blog);
|
||||
border-radius: 999px;
|
||||
padding: 8px 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.blog-new-btn:hover {
|
||||
background: rgba(192, 132, 252, 0.2);
|
||||
border-color: rgba(192, 132, 252, 0.7);
|
||||
}
|
||||
|
||||
.blog-kicker {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
@@ -56,23 +80,27 @@
|
||||
.blog-toggle-list {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
/* 사이드바 토글 버튼(top-left) 과 겹치지 않도록 오른쪽 하단 배치 */
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
top: auto;
|
||||
left: auto;
|
||||
z-index: 1000;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(10, 12, 20, 0.8);
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(192, 132, 252, 0.45);
|
||||
background: rgba(10, 12, 20, 0.88);
|
||||
color: var(--accent-blog);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.blog-toggle-list:hover {
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@@ -103,31 +131,84 @@
|
||||
color: var(--accent-blog);
|
||||
}
|
||||
|
||||
.blog-list__item {
|
||||
.blog-list__item-wrap {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: var(--shadow-inset);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog-list__item:hover {
|
||||
.blog-list__item-wrap:hover {
|
||||
border-color: var(--line-strong);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: var(--shadow-sm), var(--shadow-inset);
|
||||
}
|
||||
|
||||
.blog-list__item.is-active {
|
||||
.blog-list__item-wrap.is-active {
|
||||
border-color: rgba(192, 132, 252, 0.5);
|
||||
box-shadow: 0 4px 20px rgba(192, 132, 252, 0.12), var(--shadow-inset);
|
||||
background: rgba(192, 132, 252, 0.05);
|
||||
}
|
||||
|
||||
.blog-list__item-btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.blog-list__actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 0 12px 10px;
|
||||
}
|
||||
|
||||
.blog-list__action-btn {
|
||||
font-size: 11px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.blog-list__action-btn:hover {
|
||||
border-color: var(--accent-blog);
|
||||
color: var(--accent-blog);
|
||||
}
|
||||
|
||||
.blog-list__action-btn--del:hover {
|
||||
border-color: #f04452;
|
||||
color: #f04452;
|
||||
}
|
||||
|
||||
.blog-article__edit-btn {
|
||||
font-size: 11px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.blog-article__edit-btn:hover {
|
||||
border-color: var(--accent-blog);
|
||||
color: var(--accent-blog);
|
||||
}
|
||||
|
||||
.blog-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -376,6 +457,12 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.blog-header__actions {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.blog-toggle-list {
|
||||
display: block;
|
||||
}
|
||||
@@ -427,7 +514,7 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.blog-list__item {
|
||||
.blog-list__item-btn {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
@@ -476,3 +563,207 @@
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 블로그 에디터 모달 ──────────────────────────────────────────────────── */
|
||||
|
||||
.blog-editor-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(4, 6, 14, 0.75);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blog-editor {
|
||||
background: #0c0f1e;
|
||||
border: 1px solid rgba(192, 132, 252, 0.25);
|
||||
border-radius: var(--radius-xl, 20px);
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(192, 132, 252, 0.06);
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
max-height: 92vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog-editor__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 24px 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.blog-editor__heading {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-blog);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.blog-editor__close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
line-height: 1;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.blog-editor__close:hover {
|
||||
color: var(--text-bright, #fff);
|
||||
}
|
||||
|
||||
.blog-editor__title-input {
|
||||
margin: 14px 24px 0;
|
||||
padding: 10px 14px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
color: var(--text-bright, #f8f3ee);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.blog-editor__title-input:focus {
|
||||
border-color: rgba(192, 132, 252, 0.5);
|
||||
}
|
||||
|
||||
.blog-editor__title-input::placeholder {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.blog-editor__tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 12px 24px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.blog-editor__tab-bar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 12px 24px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.blog-editor__tab {
|
||||
padding: 5px 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.blog-editor__tab.is-active {
|
||||
border-color: rgba(192, 132, 252, 0.55);
|
||||
background: rgba(192, 132, 252, 0.12);
|
||||
color: var(--accent-blog);
|
||||
}
|
||||
|
||||
.blog-editor__textarea {
|
||||
flex: 1;
|
||||
margin: 10px 24px 0;
|
||||
padding: 14px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
color: var(--text-bright, #f8f3ee);
|
||||
font-size: 14px;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
line-height: 1.75;
|
||||
resize: none;
|
||||
outline: none;
|
||||
min-height: 320px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.blog-editor__textarea:focus {
|
||||
border-color: rgba(192, 132, 252, 0.4);
|
||||
}
|
||||
|
||||
.blog-editor__preview {
|
||||
flex: 1;
|
||||
margin: 10px 24px 0;
|
||||
padding: 14px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
overflow-y: auto;
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.blog-editor__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 14px 24px 18px;
|
||||
border-top: 1px solid var(--line);
|
||||
flex-shrink: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.blog-editor__save-btn {
|
||||
border-color: rgba(192, 132, 252, 0.55) !important;
|
||||
background: rgba(192, 132, 252, 0.15) !important;
|
||||
color: var(--accent-blog) !important;
|
||||
}
|
||||
|
||||
.blog-editor__save-btn:hover:not(:disabled) {
|
||||
background: rgba(192, 132, 252, 0.25) !important;
|
||||
}
|
||||
|
||||
.blog-editor__save-btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-editor-overlay {
|
||||
align-items: flex-end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.blog-editor {
|
||||
max-width: 100%;
|
||||
max-height: 95vh;
|
||||
border-radius: var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;
|
||||
}
|
||||
|
||||
.blog-editor__title-input,
|
||||
.blog-editor__tag-row,
|
||||
.blog-editor__tab-bar,
|
||||
.blog-editor__textarea,
|
||||
.blog-editor__preview {
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.blog-editor__header,
|
||||
.blog-editor__footer {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.blog-new-btn {
|
||||
align-self: stretch;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { getBlogPosts } from '../../data/blog';
|
||||
import {
|
||||
getBlogPostsApi,
|
||||
createBlogPost,
|
||||
updateBlogPost,
|
||||
deleteBlogPost,
|
||||
} from '../../api';
|
||||
import './Blog.css';
|
||||
|
||||
// ── 마크다운 렌더러 ──────────────────────────────────────────────────────────
|
||||
|
||||
const renderInline = (text) => {
|
||||
const normalized = text.replace(/<br\s*\/?>/gi, '\n');
|
||||
const pattern =
|
||||
@@ -122,9 +130,7 @@ const renderMarkdown = (body) => {
|
||||
|
||||
flushList();
|
||||
|
||||
if (!line.trim()) {
|
||||
return;
|
||||
}
|
||||
if (!line.trim()) return;
|
||||
|
||||
if (line.startsWith('###### ')) {
|
||||
blocks.push({ type: 'h6', value: line.replace(/^######\s+/, '') });
|
||||
@@ -193,62 +199,255 @@ const renderMarkdown = (body) => {
|
||||
});
|
||||
};
|
||||
|
||||
// ── 블로그 에디터 모달 ────────────────────────────────────────────────────────
|
||||
|
||||
const PRESET_TAGS = ['일상', '개발', '공부', '아이디어', '기타'];
|
||||
|
||||
const BlogEditor = ({ post, onSave, onClose }) => {
|
||||
const [title, setTitle] = useState(post?.title || '');
|
||||
const [tags, setTags] = useState(post?.tags || []);
|
||||
const [body, setBody] = useState(post?.body || '');
|
||||
const [showPreview, setShowPreview] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const textareaRef = useRef(null);
|
||||
|
||||
// Tab 키로 들여쓰기 삽입
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
const el = textareaRef.current;
|
||||
const start = el.selectionStart;
|
||||
const end = el.selectionEnd;
|
||||
const next = body.substring(0, start) + ' ' + body.substring(end);
|
||||
setBody(next);
|
||||
requestAnimationFrame(() => {
|
||||
el.selectionStart = el.selectionEnd = start + 2;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTag = (tag) => {
|
||||
setTags((prev) =>
|
||||
prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
|
||||
);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!title.trim()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
const excerpt = body
|
||||
.split(/\r?\n/)
|
||||
.find((l) => l.trim() && !l.startsWith('#'))
|
||||
?.trim()
|
||||
.slice(0, 120) || '';
|
||||
await onSave({
|
||||
title: title.trim(),
|
||||
tags,
|
||||
body,
|
||||
excerpt,
|
||||
date: post?.date || today,
|
||||
});
|
||||
onClose();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ESC 키로 닫기
|
||||
useEffect(() => {
|
||||
const handler = (e) => { if (e.key === 'Escape') onClose(); };
|
||||
document.addEventListener('keydown', handler);
|
||||
return () => document.removeEventListener('keydown', handler);
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<div className="blog-editor-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
|
||||
<div className="blog-editor">
|
||||
<div className="blog-editor__header">
|
||||
<h2 className="blog-editor__heading">
|
||||
{post?.id ? '글 수정' : '새 글 쓰기'}
|
||||
</h2>
|
||||
<button type="button" className="blog-editor__close" onClick={onClose} aria-label="닫기">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="blog-editor__title-input"
|
||||
type="text"
|
||||
placeholder="제목을 입력하세요"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<div className="blog-editor__tag-row">
|
||||
{PRESET_TAGS.map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
type="button"
|
||||
className={`blog-category-chip${tags.includes(tag) ? ' is-active' : ''}`}
|
||||
onClick={() => toggleTag(tag)}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="blog-editor__tab-bar">
|
||||
<button
|
||||
type="button"
|
||||
className={`blog-editor__tab${!showPreview ? ' is-active' : ''}`}
|
||||
onClick={() => setShowPreview(false)}
|
||||
>
|
||||
편집
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`blog-editor__tab${showPreview ? ' is-active' : ''}`}
|
||||
onClick={() => setShowPreview(true)}
|
||||
>
|
||||
미리보기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showPreview ? (
|
||||
<div className="blog-article__body blog-editor__preview">
|
||||
{body
|
||||
? renderMarkdown(body)
|
||||
: <p style={{ color: 'var(--muted)' }}>본문을 입력하면 여기에 미리보기가 표시됩니다.</p>
|
||||
}
|
||||
</div>
|
||||
) : (
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
className="blog-editor__textarea"
|
||||
placeholder="마크다운으로 글을 작성하세요... 예시: # 제목 ## 소제목 **굵게** *기울임* `코드`"
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
spellCheck={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="blog-editor__footer">
|
||||
<button type="button" className="button" onClick={onClose}>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="button blog-editor__save-btn"
|
||||
onClick={handleSave}
|
||||
disabled={saving || !title.trim()}
|
||||
>
|
||||
{saving ? '저장 중...' : '저장'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ── 메인 Blog 컴포넌트 ───────────────────────────────────────────────────────
|
||||
|
||||
const Blog = () => {
|
||||
const posts = useMemo(() => getBlogPosts(), []);
|
||||
const staticPosts = useMemo(() => getBlogPosts(), []);
|
||||
const [apiPosts, setApiPosts] = useState([]);
|
||||
const [apiError, setApiError] = useState(false);
|
||||
const [editorPost, setEditorPost] = useState(null); // null=닫힘, {}=새글, post=수정
|
||||
const [isEditorOpen, setIsEditorOpen] = useState(false);
|
||||
|
||||
// API 글 불러오기
|
||||
useEffect(() => {
|
||||
getBlogPostsApi()
|
||||
.then((data) => {
|
||||
const posts = Array.isArray(data) ? data : (data?.posts ?? []);
|
||||
setApiPosts(posts.map((p) => ({ ...p, slug: `api-${p.id}` })));
|
||||
})
|
||||
.catch(() => setApiError(true));
|
||||
}, []);
|
||||
|
||||
// 정적 + API 글 병합 (API 글이 앞에 표시)
|
||||
const allPosts = useMemo(() => {
|
||||
const combined = [...apiPosts, ...staticPosts];
|
||||
return combined.sort((a, b) => {
|
||||
const aDate = Date.parse(a.date || '') || 0;
|
||||
const bDate = Date.parse(b.date || '') || 0;
|
||||
return bDate - aDate;
|
||||
});
|
||||
}, [apiPosts, staticPosts]);
|
||||
|
||||
const categoryNames = ['일상', '개발', '공부', '아이디어'];
|
||||
const categorized = useMemo(() => {
|
||||
const map = new Map(categoryNames.map((name) => [name, []]));
|
||||
const misc = [];
|
||||
|
||||
posts.forEach((post) => {
|
||||
allPosts.forEach((post) => {
|
||||
const matched = categoryNames.find((name) => post.tags.includes(name));
|
||||
if (matched) {
|
||||
map.get(matched).push(post);
|
||||
} else {
|
||||
misc.push(post);
|
||||
}
|
||||
if (matched) map.get(matched).push(post);
|
||||
else misc.push(post);
|
||||
});
|
||||
|
||||
return {
|
||||
categories: categoryNames.map((name) => ({
|
||||
name,
|
||||
items: map.get(name),
|
||||
})),
|
||||
categories: categoryNames.map((name) => ({ name, items: map.get(name) })),
|
||||
misc,
|
||||
};
|
||||
}, [posts]);
|
||||
}, [allPosts]);
|
||||
|
||||
const [selectedCategory, setSelectedCategory] = useState('전체');
|
||||
const [page, setPage] = useState(1);
|
||||
const [showList, setShowList] = useState(false);
|
||||
const pageSize = 10;
|
||||
|
||||
const filteredPosts = useMemo(() => {
|
||||
if (selectedCategory === '전체') return posts;
|
||||
if (selectedCategory === '전체') return allPosts;
|
||||
if (selectedCategory === '기타') return categorized.misc;
|
||||
return posts.filter((post) => post.tags.includes(selectedCategory));
|
||||
}, [posts, categorized.misc, selectedCategory]);
|
||||
return allPosts.filter((post) => post.tags.includes(selectedCategory));
|
||||
}, [allPosts, categorized.misc, selectedCategory]);
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(filteredPosts.length / pageSize));
|
||||
const pagedPosts = filteredPosts.slice((page - 1) * pageSize, page * pageSize);
|
||||
|
||||
const [activeSlug, setActiveSlug] = useState(pagedPosts[0]?.slug);
|
||||
const activePost =
|
||||
pagedPosts.find((post) => post.slug === activeSlug) || pagedPosts[0];
|
||||
const activePost = pagedPosts.find((p) => p.slug === activeSlug) || pagedPosts[0];
|
||||
|
||||
useEffect(() => { if (page > totalPages) setPage(1); }, [page, totalPages]);
|
||||
useEffect(() => {
|
||||
if (page > totalPages) {
|
||||
setPage(1);
|
||||
}
|
||||
}, [page, totalPages]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pagedPosts.find((post) => post.slug === activeSlug)) {
|
||||
if (!pagedPosts.find((p) => p.slug === activeSlug)) {
|
||||
setActiveSlug(pagedPosts[0]?.slug);
|
||||
}
|
||||
}, [pagedPosts, activeSlug]);
|
||||
useEffect(() => { setPage(1); }, [selectedCategory]);
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1);
|
||||
}, [selectedCategory]);
|
||||
// 에디터 저장 핸들러
|
||||
const handleSave = useCallback(async (data) => {
|
||||
if (editorPost?.id) {
|
||||
// 수정
|
||||
const updated = await updateBlogPost(editorPost.id, data);
|
||||
setApiPosts((prev) =>
|
||||
prev.map((p) =>
|
||||
p.id === editorPost.id ? { ...p, ...updated, slug: `api-${updated.id ?? editorPost.id}` } : p
|
||||
)
|
||||
);
|
||||
} else {
|
||||
// 새 글
|
||||
const created = await createBlogPost(data);
|
||||
setApiPosts((prev) => [{ ...created, slug: `api-${created.id}` }, ...prev]);
|
||||
setActiveSlug(`api-${created.id}`);
|
||||
}
|
||||
}, [editorPost]);
|
||||
|
||||
// 삭제 핸들러
|
||||
const handleDelete = useCallback(async (post) => {
|
||||
if (!window.confirm(`"${post.title}" 글을 삭제하시겠습니까?`)) return;
|
||||
await deleteBlogPost(post.id);
|
||||
setApiPosts((prev) => prev.filter((p) => p.id !== post.id));
|
||||
if (activeSlug === post.slug) setActiveSlug(null);
|
||||
}, [activeSlug]);
|
||||
|
||||
const openNewEditor = () => { setEditorPost({}); setIsEditorOpen(true); };
|
||||
const openEditEditor = (post) => { setEditorPost(post); setIsEditorOpen(true); };
|
||||
const closeEditor = useCallback(() => { setIsEditorOpen(false); setEditorPost(null); }, []);
|
||||
|
||||
return (
|
||||
<div className="blog">
|
||||
@@ -257,14 +456,19 @@ const Blog = () => {
|
||||
<p className="blog-kicker">Journal</p>
|
||||
<h1>개인 블로그</h1>
|
||||
<p className="blog-sub">
|
||||
마크다운 파일을 추가하면 자동으로 글이 목록에 추가됩니다.
|
||||
글을 작성하고 태그를 달아 정리하세요.
|
||||
</p>
|
||||
</div>
|
||||
<div className="blog-status">
|
||||
<p className="blog-status__title">이번 주의 기록</p>
|
||||
<p className="blog-status__desc">
|
||||
손에 닿는 생각을 즉시 적어두고, 나중에 다시 꺼내어 다듬습니다.
|
||||
</p>
|
||||
<div className="blog-header__actions">
|
||||
<div className="blog-status">
|
||||
<p className="blog-status__title">이번 주의 기록</p>
|
||||
<p className="blog-status__desc">
|
||||
손에 닿는 생각을 즉시 적어두고, 나중에 다시 꺼내어 다듬습니다.
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" className="blog-new-btn" onClick={openNewEditor}>
|
||||
+ 새 글 쓰기
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -283,32 +487,54 @@ const Blog = () => {
|
||||
<button
|
||||
key={name}
|
||||
type="button"
|
||||
className={`blog-category-chip${
|
||||
selectedCategory === name ? ' is-active' : ''
|
||||
}`}
|
||||
className={`blog-category-chip${selectedCategory === name ? ' is-active' : ''}`}
|
||||
onClick={() => setSelectedCategory(name)}
|
||||
>
|
||||
{name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{pagedPosts.map((post) => (
|
||||
<button
|
||||
<div
|
||||
key={post.slug}
|
||||
type="button"
|
||||
className={`blog-list__item${
|
||||
post.slug === activeSlug ? ' is-active' : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveSlug(post.slug);
|
||||
setShowList(false); // 모바일에서 글 선택 시 리스트 숨김
|
||||
}}
|
||||
className={`blog-list__item-wrap${post.slug === activeSlug ? ' is-active' : ''}`}
|
||||
>
|
||||
<p className="blog-list__title">{post.title}</p>
|
||||
<p className="blog-list__excerpt">{post.excerpt}</p>
|
||||
<span className="blog-list__meta">{post.date || '작성일 미정'}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="blog-list__item-btn"
|
||||
onClick={() => {
|
||||
setActiveSlug(post.slug);
|
||||
setShowList(false);
|
||||
}}
|
||||
>
|
||||
<p className="blog-list__title">{post.title}</p>
|
||||
<p className="blog-list__excerpt">{post.excerpt}</p>
|
||||
<span className="blog-list__meta">{post.date || '작성일 미정'}</span>
|
||||
</button>
|
||||
{post.id && (
|
||||
<div className="blog-list__actions">
|
||||
<button
|
||||
type="button"
|
||||
className="blog-list__action-btn"
|
||||
title="수정"
|
||||
onClick={() => openEditEditor(post)}
|
||||
>
|
||||
편집
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="blog-list__action-btn blog-list__action-btn--del"
|
||||
title="삭제"
|
||||
onClick={() => handleDelete(post)}
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="blog-pagination">
|
||||
<button
|
||||
type="button"
|
||||
@@ -318,35 +544,41 @@ const Blog = () => {
|
||||
>
|
||||
이전
|
||||
</button>
|
||||
<span className="blog-page-indicator">
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
<span className="blog-page-indicator">{page} / {totalPages}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="blog-page-btn"
|
||||
onClick={() =>
|
||||
setPage((prev) => Math.min(totalPages, prev + 1))
|
||||
}
|
||||
onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
|
||||
disabled={page === totalPages}
|
||||
>
|
||||
다음
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<article className="blog-article">
|
||||
{activePost ? (
|
||||
<>
|
||||
<div className="blog-article__meta">
|
||||
<span>{activePost.date || '작성일 미정'}</span>
|
||||
{activePost.tags.length > 0 && (
|
||||
<span className="blog-tags">
|
||||
{activePost.tags.map((tag) => (
|
||||
<span key={tag} className="blog-tag">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
{activePost.tags.length > 0 && (
|
||||
<span className="blog-tags">
|
||||
{activePost.tags.map((tag) => (
|
||||
<span key={tag} className="blog-tag">{tag}</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
{activePost.id && (
|
||||
<button
|
||||
type="button"
|
||||
className="blog-article__edit-btn"
|
||||
onClick={() => openEditEditor(activePost)}
|
||||
>
|
||||
편집
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="blog-article__body">
|
||||
{renderMarkdown(activePost.body)}
|
||||
@@ -354,8 +586,9 @@ const Blog = () => {
|
||||
</>
|
||||
) : (
|
||||
<p className="blog-empty">
|
||||
아직 작성된 글이 없습니다. `src/content/blog`에 마크다운 파일을
|
||||
추가해 주세요.
|
||||
{apiError
|
||||
? '블로그 API에 연결할 수 없습니다. 백엔드 서버를 확인해 주세요.'
|
||||
: '아직 작성된 글이 없습니다. 새 글 쓰기 버튼으로 첫 글을 작성해 보세요.'}
|
||||
</p>
|
||||
)}
|
||||
</article>
|
||||
@@ -376,9 +609,7 @@ const Blog = () => {
|
||||
>
|
||||
<div className="blog-category-card__head">
|
||||
<span>{group.name}</span>
|
||||
<span className="blog-category-card__count">
|
||||
{group.items.length}건
|
||||
</span>
|
||||
<span className="blog-category-card__count">{group.items.length}건</span>
|
||||
</div>
|
||||
<div className="blog-category-card__list">
|
||||
{group.items.length ? (
|
||||
@@ -386,9 +617,7 @@ const Blog = () => {
|
||||
<span key={post.slug}>{post.title}</span>
|
||||
))
|
||||
) : (
|
||||
<span className="blog-category-card__empty">
|
||||
아직 글이 없습니다.
|
||||
</span>
|
||||
<span className="blog-category-card__empty">아직 글이 없습니다.</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
@@ -400,9 +629,7 @@ const Blog = () => {
|
||||
>
|
||||
<div className="blog-category-card__head">
|
||||
<span>기타</span>
|
||||
<span className="blog-category-card__count">
|
||||
{categorized.misc.length}건
|
||||
</span>
|
||||
<span className="blog-category-card__count">{categorized.misc.length}건</span>
|
||||
</div>
|
||||
<div className="blog-category-card__list">
|
||||
{categorized.misc.length ? (
|
||||
@@ -410,14 +637,20 @@ const Blog = () => {
|
||||
<span key={post.slug}>{post.title}</span>
|
||||
))
|
||||
) : (
|
||||
<span className="blog-category-card__empty">
|
||||
아직 글이 없습니다.
|
||||
</span>
|
||||
<span className="blog-category-card__empty">아직 글이 없습니다.</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{isEditorOpen && (
|
||||
<BlogEditor
|
||||
post={editorPost}
|
||||
onSave={handleSave}
|
||||
onClose={closeEditor}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user