라우팅 추가 및 CSS 구성
- 개인 블로그 - 로또 - 여행 로고 이미지 추가 및 변경
This commit is contained in:
191
src/pages/blog/Blog.css
Normal file
191
src/pages/blog/Blog.css
Normal file
@@ -0,0 +1,191 @@
|
||||
.blog {
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.blog-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.blog-kicker {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
font-size: 12px;
|
||||
color: var(--accent);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.blog-header h1 {
|
||||
font-family: var(--font-display);
|
||||
margin: 0 0 12px;
|
||||
font-size: clamp(30px, 4vw, 40px);
|
||||
}
|
||||
|
||||
.blog-sub {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.blog-status {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.blog-status__title {
|
||||
margin: 0 0 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.blog-status__desc {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
|
||||
gap: 22px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.blog-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.blog-list__item {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.blog-list__item:hover {
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.blog-list__item.is-active {
|
||||
border-color: rgba(247, 168, 165, 0.6);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.blog-list__title {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.blog-list__excerpt {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.blog-list__meta {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.blog-article {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 24px;
|
||||
background: rgba(9, 10, 16, 0.65);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.blog-article__meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.blog-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.blog-tag {
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
font-size: 11px;
|
||||
text-transform: none;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.blog-article__body h1,
|
||||
.blog-article__body h2,
|
||||
.blog-article__body h3 {
|
||||
font-family: var(--font-display);
|
||||
margin: 22px 0 10px;
|
||||
}
|
||||
|
||||
.blog-article__body h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.blog-article__body h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.blog-article__body h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.md-paragraph {
|
||||
margin: 0 0 14px;
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.blog-article__body ul {
|
||||
margin: 0 0 16px;
|
||||
padding-left: 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.blog-article__body code {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.md-code {
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.blog-empty {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.blog-header,
|
||||
.blog-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
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