주식 히스토리 API 및 블로그 작성 API 추가

src/pages/blog/Blog.jsx

@@ -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="마크다운으로 글을 작성하세요...&#10;&#10;예시:&#10;# 제목&#10;## 소제목&#10;**굵게** *기울임* `코드`"
+                        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>
     );
 };