라우팅 추가 및 CSS 구성
- 개인 블로그 - 로또 - 여행 로고 이미지 추가 및 변경
This commit is contained in:
190
src/pages/blog/Blog.jsx
Normal file
190
src/pages/blog/Blog.jsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { getBlogPosts } from '../../data/blog';
|
||||
import './Blog.css';
|
||||
|
||||
const renderInline = (text) => {
|
||||
const pattern = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g;
|
||||
const parts = text.split(pattern).filter(Boolean);
|
||||
|
||||
return parts.map((part, index) => {
|
||||
if (part.startsWith('**')) {
|
||||
return (
|
||||
<strong key={`${part}-${index}`}>{part.replace(/\*\*/g, '')}</strong>
|
||||
);
|
||||
}
|
||||
if (part.startsWith('*')) {
|
||||
return <em key={`${part}-${index}`}>{part.replace(/\*/g, '')}</em>;
|
||||
}
|
||||
if (part.startsWith('`')) {
|
||||
return <code key={`${part}-${index}`}>{part.replace(/`/g, '')}</code>;
|
||||
}
|
||||
return <span key={`${part}-${index}`}>{part}</span>;
|
||||
});
|
||||
};
|
||||
|
||||
const renderMarkdown = (body) => {
|
||||
const lines = body.split(/\r?\n/);
|
||||
const blocks = [];
|
||||
let list = [];
|
||||
let code = [];
|
||||
let inCode = false;
|
||||
|
||||
const flushList = () => {
|
||||
if (list.length) {
|
||||
blocks.push({ type: 'list', items: list });
|
||||
list = [];
|
||||
}
|
||||
};
|
||||
|
||||
const flushCode = () => {
|
||||
if (code.length) {
|
||||
blocks.push({ type: 'code', value: code.join('\n') });
|
||||
code = [];
|
||||
}
|
||||
};
|
||||
|
||||
lines.forEach((line) => {
|
||||
if (line.startsWith('```')) {
|
||||
if (inCode) {
|
||||
flushCode();
|
||||
inCode = false;
|
||||
} else {
|
||||
flushList();
|
||||
inCode = true;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (inCode) {
|
||||
code.push(line);
|
||||
return;
|
||||
}
|
||||
|
||||
if (/^[-*]\s+/.test(line)) {
|
||||
list.push(line.replace(/^[-*]\s+/, ''));
|
||||
return;
|
||||
}
|
||||
|
||||
flushList();
|
||||
|
||||
if (!line.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (line.startsWith('### ')) {
|
||||
blocks.push({ type: 'h3', value: line.replace(/^###\s+/, '') });
|
||||
return;
|
||||
}
|
||||
if (line.startsWith('## ')) {
|
||||
blocks.push({ type: 'h2', value: line.replace(/^##\s+/, '') });
|
||||
return;
|
||||
}
|
||||
if (line.startsWith('# ')) {
|
||||
blocks.push({ type: 'h1', value: line.replace(/^#\s+/, '') });
|
||||
return;
|
||||
}
|
||||
|
||||
blocks.push({ type: 'p', value: line });
|
||||
});
|
||||
|
||||
flushList();
|
||||
flushCode();
|
||||
|
||||
return blocks.map((block, index) => {
|
||||
if (block.type === 'h1') return <h1 key={index}>{block.value}</h1>;
|
||||
if (block.type === 'h2') return <h2 key={index}>{block.value}</h2>;
|
||||
if (block.type === 'h3') return <h3 key={index}>{block.value}</h3>;
|
||||
if (block.type === 'list')
|
||||
return (
|
||||
<ul key={index}>
|
||||
{block.items.map((item, itemIndex) => (
|
||||
<li key={itemIndex}>{renderInline(item)}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
if (block.type === 'code')
|
||||
return (
|
||||
<pre key={index} className="md-code">
|
||||
<code>{block.value}</code>
|
||||
</pre>
|
||||
);
|
||||
return (
|
||||
<p key={index} className="md-paragraph">
|
||||
{renderInline(block.value)}
|
||||
</p>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const Blog = () => {
|
||||
const posts = useMemo(() => getBlogPosts(), []);
|
||||
const [activeSlug, setActiveSlug] = useState(posts[0]?.slug);
|
||||
const activePost = posts.find((post) => post.slug === activeSlug) || posts[0];
|
||||
|
||||
return (
|
||||
<div className="blog">
|
||||
<header className="blog-header">
|
||||
<div>
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<div className="blog-grid">
|
||||
<aside className="blog-list">
|
||||
{posts.map((post) => (
|
||||
<button
|
||||
key={post.slug}
|
||||
type="button"
|
||||
className={`blog-list__item${
|
||||
post.slug === activeSlug ? ' is-active' : ''
|
||||
}`}
|
||||
onClick={() => setActiveSlug(post.slug)}
|
||||
>
|
||||
<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>
|
||||
))}
|
||||
</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>
|
||||
<div className="blog-article__body">
|
||||
{renderMarkdown(activePost.body)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="blog-empty">
|
||||
아직 작성된 글이 없습니다. `src/content/blog`에 마크다운 파일을
|
||||
추가해 주세요.
|
||||
</p>
|
||||
)}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blog;
|
||||
Reference in New Issue
Block a user