라우팅 추가 및 CSS 구성

- 개인 블로그
 - 로또
 - 여행

로고 이미지 추가 및 변경

src/pages/blog/Blog.css

@@ -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;
+    }
+}

src/pages/blog/Blog.jsx

@@ -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;

src/pages/home/Home.css

@@ -0,0 +1,203 @@
+.home {
+    display: grid;
+    gap: 60px;
+}
+
+.home > section {
+    animation: fadeUp 0.7s ease both;
+}
+
+.home > section:nth-child(1) {
+    animation-delay: 0.05s;
+}
+
+.home > section:nth-child(2) {
+    animation-delay: 0.12s;
+}
+
+.home > section:nth-child(3) {
+    animation-delay: 0.18s;
+}
+
+.home-hero {
+    display: grid;
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
+    gap: 32px;
+    align-items: center;
+}
+
+.home-hero__kicker {
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.28em;
+    color: var(--accent);
+    margin: 0 0 12px;
+}
+
+.home-hero h1 {
+    font-family: var(--font-display);
+    font-size: clamp(32px, 4vw, 46px);
+    margin: 0 0 16px;
+}
+
+.home-hero__lead {
+    color: var(--muted);
+    line-height: 1.7;
+    margin: 0 0 24px;
+}
+
+.home-hero__actions {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.home-hero__card {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 24px;
+    padding: 24px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+}
+
+.home-hero__card-title {
+    margin: 0 0 12px;
+    color: var(--muted);
+    font-size: 13px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+.home-hero__card-body h2 {
+    font-family: var(--font-display);
+    font-size: 24px;
+    margin: 0 0 12px;
+}
+
+.home-hero__stats {
+    margin-top: 20px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+    border-top: 1px solid var(--line);
+    padding-top: 16px;
+}
+
+.stat-label {
+    margin: 0;
+    color: var(--muted);
+    font-size: 12px;
+}
+
+.stat-value {
+    margin: 6px 0 0;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.home-section__header {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 18px;
+}
+
+.home-section__header h2 {
+    margin: 0;
+    font-size: 26px;
+    font-family: var(--font-display);
+}
+
+.home-section__header p {
+    margin: 0;
+    color: var(--muted);
+}
+
+.home-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 16px;
+}
+
+.home-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: 16px;
+    text-decoration: none;
+    color: inherit;
+    padding: 18px;
+    border-radius: 18px;
+    border: 1px solid var(--line);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
+    transition: transform 0.2s ease, border-color 0.2s ease;
+}
+
+.home-card:hover {
+    transform: translateY(-4px);
+    border-color: rgba(255, 255, 255, 0.22);
+}
+
+.home-card__title {
+    font-weight: 600;
+    font-size: 18px;
+    margin: 0 0 8px;
+}
+
+.home-card__desc {
+    margin: 0;
+    color: var(--muted);
+    font-size: 14px;
+}
+
+.home-card__cta {
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    color: var(--accent);
+}
+
+.home-posts {
+    display: grid;
+    gap: 12px;
+}
+
+.home-post {
+    text-decoration: none;
+    color: inherit;
+    border: 1px solid var(--line);
+    padding: 16px 18px;
+    border-radius: 16px;
+    background: var(--surface);
+    display: grid;
+    gap: 8px;
+    transition: border-color 0.2s ease;
+}
+
+.home-post:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+.home-post__title {
+    margin: 0;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.home-post__excerpt {
+    margin: 0;
+    color: var(--muted);
+}
+
+.home-post__meta {
+    font-size: 12px;
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+}
+
+@media (max-width: 900px) {
+    .home-hero {
+        grid-template-columns: 1fr;
+    }
+}

src/pages/home/Home.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { navLinks } from '../../routes.jsx';
+import { getBlogPosts } from '../../data/blog';
+import './Home.css';
+
+const Home = () => {
+    const posts = getBlogPosts().slice(0, 3);
+    const highlights = navLinks.filter((link) => link.id !== 'home');
+
+    return (
+        <div className="home">
+            <section className="home-hero">
+                <div className="home-hero__text">
+                    <p className="home-hero__kicker">Personal Archive</p>
+                    <h1>기록을 모으고, 이야기를 이어붙이는 작은 집.</h1>
+                    <p className="home-hero__lead">
+                        개발 실험, 여행 스냅, 그리고 생각을 모아두는 공간입니다. 블로그 글은
+                        마크다운으로 작성해 계속 추가할 수 있어요.
+                    </p>
+                    <div className="home-hero__actions">
+                        <Link className="button primary" to="/blog">
+                            블로그 둘러보기
+                        </Link>
+                        <Link className="button ghost" to="/travel">
+                            여행 갤러리 열기
+                        </Link>
+                    </div>
+                </div>
+                <div className="home-hero__card">
+                    <p className="home-hero__card-title">이번 달 집중 테마</p>
+                    <div className="home-hero__card-body">
+                        <h2>느린 기록, 깊은 회고</h2>
+                        <p>
+                            빠르게 업데이트하는 대신, 한 번쯤 되돌아보며 기록하는 걸 목표로
+                            합니다. 글은 매주 한 편씩 추가될 예정이에요.
+                        </p>
+                    </div>
+                    <div className="home-hero__stats">
+                        <div>
+                            <p className="stat-label">게시 글</p>
+                            <p className="stat-value">{posts.length}편</p>
+                        </div>
+                        <div>
+                            <p className="stat-label">다음 업데이트</p>
+                            <p className="stat-value">이번 주말</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section className="home-section">
+                <div className="home-section__header">
+                    <h2>공간 둘러보기</h2>
+                    <p>확장 가능한 구조로 구성해 이후에도 쉽게 페이지를 추가할 수 있습니다.</p>
+                </div>
+                <div className="home-grid">
+                    {highlights.map((item) => (
+                        <Link key={item.id} to={item.path} className="home-card">
+                            <div>
+                                <p className="home-card__title">{item.label}</p>
+                                <p className="home-card__desc">{item.description}</p>
+                            </div>
+                            <span className="home-card__cta">열기</span>
+                        </Link>
+                    ))}
+                </div>
+            </section>
+
+            <section className="home-section">
+                <div className="home-section__header">
+                    <h2>최근 블로그</h2>
+                    <p>마크다운 파일을 추가하면 자동으로 목록에 반영됩니다.</p>
+                </div>
+                <div className="home-posts">
+                    {posts.map((post) => (
+                        <Link key={post.slug} to="/blog" className="home-post">
+                            <p className="home-post__title">{post.title}</p>
+                            <p className="home-post__excerpt">{post.excerpt}</p>
+                            <span className="home-post__meta">{post.date || '작성일 미정'}</span>
+                        </Link>
+                    ))}
+                </div>
+            </section>
+        </div>
+    );
+};
+
+export default Home;

src/pages/lotto/Functions.jsx

@@ -0,0 +1,367 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { deleteHistory, getHistory, getLatest, recommend } from '../../api';
+
+const fmtKST = (value) => value?.replace('T', ' ') ?? '';
+
+const ballClass = (n) => {
+    if (n <= 10) return 'lotto-ball range-a';
+    if (n <= 20) return 'lotto-ball range-b';
+    if (n <= 30) return 'lotto-ball range-c';
+    if (n <= 40) return 'lotto-ball range-d';
+    return 'lotto-ball range-e';
+};
+
+const Ball = ({ n }) => <span className={ballClass(n)}>{n}</span>;
+
+const NumberRow = ({ nums }) => (
+    <div className="lotto-row">
+        {nums.map((n) => (
+            <Ball key={n} n={n} />
+        ))}
+    </div>
+);
+
+export default function Functions() {
+    const [latest, setLatest] = useState(null);
+    const [params, setParams] = useState({
+        recent_window: 200,
+        recent_weight: 2.0,
+        avoid_recent_k: 5,
+    });
+    const presets = useMemo(
+        () => [
+            { name: '기본', recent_window: 200, recent_weight: 2.0, avoid_recent_k: 5 },
+            { name: '최근 가중치↑', recent_window: 100, recent_weight: 3.0, avoid_recent_k: 10 },
+            { name: '안전(분산)', recent_window: 300, recent_weight: 1.6, avoid_recent_k: 8 },
+            { name: '공격(최근)', recent_window: 80, recent_weight: 3.5, avoid_recent_k: 12 },
+        ],
+        []
+    );
+
+    const [result, setResult] = useState(null);
+    const [history, setHistory] = useState([]);
+    const [loading, setLoading] = useState({
+        latest: false,
+        recommend: false,
+        history: false,
+    });
+    const [error, setError] = useState('');
+
+    const refreshLatest = async () => {
+        setLoading((s) => ({ ...s, latest: true }));
+        setError('');
+        try {
+            const data = await getLatest();
+            setLatest(data);
+        } catch (e) {
+            setError(e?.message ?? String(e));
+        } finally {
+            setLoading((s) => ({ ...s, latest: false }));
+        }
+    };
+
+    const refreshHistory = async () => {
+        setLoading((s) => ({ ...s, history: true }));
+        setError('');
+        try {
+            const data = await getHistory(30);
+            setHistory(data.items ?? []);
+        } catch (e) {
+            setError(e?.message ?? String(e));
+        } finally {
+            setLoading((s) => ({ ...s, history: false }));
+        }
+    };
+
+    const onRecommend = async () => {
+        setLoading((s) => ({ ...s, recommend: true }));
+        setError('');
+        try {
+            const data = await recommend(params);
+            setResult(data);
+            await refreshHistory();
+        } catch (e) {
+            setError(e?.message ?? String(e));
+        } finally {
+            setLoading((s) => ({ ...s, recommend: false }));
+        }
+    };
+
+    const onDelete = async (id) => {
+        const ok = confirm(`히스토리 #${id}를 삭제할까요?`);
+        if (!ok) return;
+
+        setError('');
+        try {
+            await deleteHistory(id);
+            setHistory((prev) => prev.filter((item) => item.id !== id));
+        } catch (e) {
+            setError(e?.message ?? String(e));
+        }
+    };
+
+    const copyNumbers = async (nums) => {
+        const text = nums.join(', ');
+        try {
+            await navigator.clipboard.writeText(text);
+            alert(`복사 완료: ${text}`);
+        } catch {
+            prompt('복사해서 사용하세요:', text);
+        }
+    };
+
+    useEffect(() => {
+        refreshLatest();
+        refreshHistory();
+    }, []);
+
+    return (
+        <div className="lotto-functions">
+            {error ? (
+                <div className="lotto-alert">
+                    <div>
+                        <p className="lotto-alert__title">오류</p>
+                        <p className="lotto-alert__message">{error}</p>
+                    </div>
+                    <button className="button ghost small" onClick={() => setError('')}>
+                        닫기
+                    </button>
+                </div>
+            ) : null}
+
+            <div className="lotto-grid">
+                <section className="lotto-panel">
+                    <div className="lotto-panel__head">
+                        <div>
+                            <p className="lotto-panel__eyebrow">Latest Draw</p>
+                            <h3>최신 회차</h3>
+                            <p className="lotto-panel__sub">
+                                최신 회차와 번호를 빠르게 확인할 수 있습니다.
+                            </p>
+                        </div>
+                        <div className="lotto-panel__actions">
+                            {loading.latest ? <span className="lotto-chip">로딩 중</span> : null}
+                            <button
+                                className="button ghost small"
+                                onClick={refreshLatest}
+                                disabled={loading.latest}
+                            >
+                                새로고침
+                            </button>
+                        </div>
+                    </div>
+
+                    {latest ? (
+                        <>
+                            <div className="lotto-meta">
+                                <div>
+                                    <p className="lotto-meta__title">{latest.drawNo}회</p>
+                                    <p className="lotto-meta__date">{latest.date}</p>
+                                </div>
+                                <button
+                                    className="button small"
+                                    onClick={() => copyNumbers(latest.numbers)}
+                                >
+                                    번호 복사
+                                </button>
+                            </div>
+                            <NumberRow nums={latest.numbers} />
+                            <p className="lotto-bonus">
+                                보너스 <strong>{latest.bonus}</strong>
+                            </p>
+                        </>
+                    ) : (
+                        <p className="lotto-empty">최신 회차 데이터가 없습니다.</p>
+                    )}
+                </section>
+
+                <section className="lotto-panel">
+                    <div className="lotto-panel__head">
+                        <div>
+                            <p className="lotto-panel__eyebrow">Recommendation</p>
+                            <h3>추천 생성</h3>
+                            <p className="lotto-panel__sub">
+                                파라미터를 조정해 다른 추천 전략을 만들 수 있습니다.
+                            </p>
+                        </div>
+                        <div className="lotto-panel__actions">
+                            {loading.recommend ? <span className="lotto-chip">계산 중</span> : null}
+                        </div>
+                    </div>
+
+                    <div className="lotto-presets">
+                        {presets.map((preset) => (
+                            <button
+                                key={preset.name}
+                                className="button ghost small"
+                                onClick={() =>
+                                    setParams({
+                                        recent_window: preset.recent_window,
+                                        recent_weight: preset.recent_weight,
+                                        avoid_recent_k: preset.avoid_recent_k,
+                                    })
+                                }
+                            >
+                                {preset.name}
+                            </button>
+                        ))}
+                    </div>
+
+                    <div className="lotto-form">
+                        <label className="lotto-field">
+                            recent_window
+                            <span>최근 N회차 가중치 범위</span>
+                            <input
+                                type="number"
+                                min={20}
+                                max={1000}
+                                value={params.recent_window}
+                                onChange={(e) =>
+                                    setParams((s) => ({
+                                        ...s,
+                                        recent_window: Number(e.target.value),
+                                    }))
+                                }
+                            />
+                        </label>
+
+                        <label className="lotto-field">
+                            recent_weight
+                            <span>최근 회차 가중치</span>
+                            <input
+                                type="number"
+                                step="0.1"
+                                min={0.5}
+                                max={10}
+                                value={params.recent_weight}
+                                onChange={(e) =>
+                                    setParams((s) => ({
+                                        ...s,
+                                        recent_weight: Number(e.target.value),
+                                    }))
+                                }
+                            />
+                        </label>
+
+                        <label className="lotto-field">
+                            avoid_recent_k
+                            <span>최근 K회차 중복 회피</span>
+                            <input
+                                type="number"
+                                min={0}
+                                max={50}
+                                value={params.avoid_recent_k}
+                                onChange={(e) =>
+                                    setParams((s) => ({
+                                        ...s,
+                                        avoid_recent_k: Number(e.target.value),
+                                    }))
+                                }
+                            />
+                        </label>
+                    </div>
+
+                    <button
+                        className="button primary"
+                        onClick={onRecommend}
+                        disabled={loading.recommend}
+                    >
+                        추천 받기
+                    </button>
+
+                    {result ? (
+                        <div className="lotto-result">
+                            <div className="lotto-result__meta">
+                                <div>
+                                    <p className="lotto-result__id">추천 ID #{result.id}</p>
+                                    <p className="lotto-result__based">
+                                        기준 회차 {result.based_on_latest_draw ?? '-'}
+                                    </p>
+                                </div>
+                                <button
+                                    className="button small"
+                                    onClick={() => copyNumbers(result.numbers)}
+                                >
+                                    번호 복사
+                                </button>
+                            </div>
+                            <NumberRow nums={result.numbers} />
+                            <details className="lotto-details">
+                                <summary>설명 보기</summary>
+                                <pre>{JSON.stringify(result.explain, null, 2)}</pre>
+                            </details>
+                        </div>
+                    ) : (
+                        <p className="lotto-empty">아직 추천 결과가 없습니다.</p>
+                    )}
+                </section>
+            </div>
+
+            <section className="lotto-panel">
+                <div className="lotto-panel__head">
+                    <div>
+                        <p className="lotto-panel__eyebrow">History</p>
+                        <h3>추천 히스토리</h3>
+                        <p className="lotto-panel__sub">
+                            최근 추천 결과를 모아서 확인할 수 있습니다.
+                        </p>
+                    </div>
+                    <div className="lotto-panel__actions">
+                        <span className="lotto-chip">{history.length}건</span>
+                        <button
+                            className="button ghost small"
+                            onClick={refreshHistory}
+                            disabled={loading.history}
+                        >
+                            새로고침
+                        </button>
+                    </div>
+                </div>
+
+                {loading.history ? <p className="lotto-empty">불러오는 중...</p> : null}
+
+                {history.length === 0 ? (
+                    <p className="lotto-empty">저장된 히스토리가 없습니다.</p>
+                ) : (
+                    <div className="lotto-history">
+                        {history.map((item) => (
+                            <div key={item.id} className="lotto-history__item">
+                                <div className="lotto-history__meta">
+                                    <p>#{item.id}</p>
+                                    <p>{fmtKST(item.created_at)}</p>
+                                    <p>기준 회차 {item.based_on_draw ?? '-'}</p>
+                                </div>
+                                <div className="lotto-history__body">
+                                    <NumberRow nums={item.numbers} />
+                                    <p className="lotto-history__params">
+                                        window={item.params?.recent_window}, weight=
+                                        {item.params?.recent_weight}, avoid_k=
+                                        {item.params?.avoid_recent_k}
+                                    </p>
+                                </div>
+                                <div className="lotto-history__actions">
+                                    <button
+                                        className="button ghost small"
+                                        onClick={() => copyNumbers(item.numbers)}
+                                    >
+                                        복사
+                                    </button>
+                                    <button
+                                        className="button danger small"
+                                        onClick={() => onDelete(item.id)}
+                                    >
+                                        삭제
+                                    </button>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </section>
+
+            <footer className="lotto-foot">
+                backend: FastAPI / nginx proxy / DB: sqlite
+            </footer>
+        </div>
+    );
+}

src/pages/lotto/Lotto.css

@@ -0,0 +1,339 @@
+.lotto {
+    display: grid;
+    gap: 24px;
+}
+
+.lotto-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+    gap: 22px;
+    align-items: center;
+}
+
+.lotto-kicker {
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    font-size: 12px;
+    color: var(--accent);
+    margin: 0 0 10px;
+}
+
+.lotto-header h1 {
+    margin: 0 0 12px;
+    font-family: var(--font-display);
+    font-size: clamp(30px, 4vw, 40px);
+}
+
+.lotto-sub {
+    margin: 0;
+    color: var(--muted);
+}
+
+.lotto-card {
+    border: 1px solid var(--line);
+    border-radius: 20px;
+    padding: 20px;
+    background: var(--surface);
+}
+
+.lotto-card__title {
+    margin: 0 0 12px;
+    font-weight: 600;
+}
+
+.lotto-card ul {
+    margin: 0;
+    padding-left: 18px;
+    color: var(--muted);
+    display: grid;
+    gap: 6px;
+}
+
+.lotto-functions {
+    display: grid;
+    gap: 24px;
+}
+
+.lotto-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 18px;
+}
+
+.lotto-panel {
+    border: 1px solid var(--line);
+    background: var(--surface);
+    border-radius: 24px;
+    padding: 20px;
+    display: grid;
+    gap: 16px;
+}
+
+.lotto-panel__head {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.lotto-panel__eyebrow {
+    margin: 0 0 6px;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.22em;
+    color: var(--accent);
+}
+
+.lotto-panel__sub {
+    margin: 6px 0 0;
+    color: var(--muted);
+    font-size: 13px;
+}
+
+.lotto-panel__actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.lotto-chip {
+    font-size: 11px;
+    padding: 6px 10px;
+    border-radius: 999px;
+    border: 1px solid var(--line);
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+}
+
+.lotto-row {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.lotto-ball {
+    width: 40px;
+    height: 40px;
+    border-radius: 999px;
+    display: grid;
+    place-items: center;
+    font-weight: 600;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.lotto-ball.range-a {
+    background: rgba(247, 168, 165, 0.22);
+}
+
+.lotto-ball.range-b {
+    background: rgba(253, 212, 177, 0.22);
+}
+
+.lotto-ball.range-c {
+    background: rgba(151, 201, 170, 0.22);
+}
+
+.lotto-ball.range-d {
+    background: rgba(133, 165, 216, 0.22);
+}
+
+.lotto-ball.range-e {
+    background: rgba(196, 170, 220, 0.22);
+}
+
+.lotto-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.lotto-meta__title {
+    margin: 0;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.lotto-meta__date {
+    margin: 6px 0 0;
+    color: var(--muted);
+    font-size: 13px;
+}
+
+.lotto-bonus {
+    margin: 0;
+    color: var(--muted);
+}
+
+.lotto-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.lotto-form {
+    display: grid;
+    gap: 12px;
+}
+
+.lotto-field {
+    display: grid;
+    gap: 6px;
+    font-size: 13px;
+}
+
+.lotto-field span {
+    color: var(--muted);
+    font-size: 12px;
+}
+
+.lotto-field input {
+    border: 1px solid var(--line);
+    background: rgba(0, 0, 0, 0.25);
+    color: var(--text);
+    border-radius: 12px;
+    padding: 10px 12px;
+    outline: none;
+}
+
+.lotto-field input:focus {
+    border-color: rgba(247, 168, 165, 0.6);
+}
+
+.lotto-result {
+    border-top: 1px solid var(--line);
+    padding-top: 16px;
+    display: grid;
+    gap: 12px;
+}
+
+.lotto-result__meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.lotto-result__id {
+    margin: 0;
+    font-weight: 600;
+}
+
+.lotto-result__based {
+    margin: 4px 0 0;
+    color: var(--muted);
+    font-size: 12px;
+}
+
+.lotto-details summary {
+    cursor: pointer;
+    color: var(--muted);
+}
+
+.lotto-details pre {
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 12px;
+    padding: 12px;
+    font-size: 12px;
+    overflow-x: auto;
+    border: 1px solid var(--line);
+}
+
+.lotto-empty {
+    margin: 0;
+    color: var(--muted);
+}
+
+.lotto-alert {
+    border: 1px solid rgba(247, 116, 125, 0.4);
+    background: rgba(247, 116, 125, 0.12);
+    border-radius: 18px;
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: flex-start;
+}
+
+.lotto-alert__title {
+    margin: 0 0 6px;
+    font-weight: 600;
+}
+
+.lotto-alert__message {
+    margin: 0;
+    color: var(--muted);
+    font-size: 13px;
+}
+
+.lotto-history {
+    display: grid;
+    gap: 12px;
+}
+
+.lotto-history__item {
+    border: 1px solid var(--line);
+    border-radius: 18px;
+    padding: 16px;
+    display: grid;
+    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.4fr) minmax(0, 0.2fr);
+    gap: 14px;
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.lotto-history__meta {
+    color: var(--muted);
+    font-size: 12px;
+    display: grid;
+    gap: 6px;
+}
+
+.lotto-history__body {
+    display: grid;
+    gap: 8px;
+}
+
+.lotto-history__params {
+    margin: 0;
+    color: var(--muted);
+    font-size: 12px;
+}
+
+.lotto-history__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+}
+
+.lotto-foot {
+    text-align: center;
+    color: var(--muted);
+    font-size: 12px;
+}
+
+.button.small {
+    padding: 8px 12px;
+    font-size: 12px;
+}
+
+.button.danger {
+    border-color: rgba(247, 116, 125, 0.5);
+    color: #fbc4c8;
+    background: rgba(247, 116, 125, 0.15);
+}
+
+@media (max-width: 900px) {
+    .lotto-header {
+        grid-template-columns: 1fr;
+    }
+
+    .lotto-history__item {
+        grid-template-columns: 1fr;
+    }
+}

src/pages/lotto/Lotto.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Functions from './Functions';
+import './Lotto.css';
+
+const Lotto = () => {
+    return (
+        <div className="lotto">
+            <header className="lotto-header">
+                <div>
+                    <p className="lotto-kicker">Playground</p>
+                    <h1>Lotto Lab</h1>
+                    <p className="lotto-sub">
+                        기존 로또 추천 기능을 그대로 유지하면서 새로운 블로그 스타일에 맞게
+                        레이아웃을 정리했습니다.
+                    </p>
+                </div>
+                <div className="lotto-card">
+                    <p className="lotto-card__title">다음 업데이트 아이디어</p>
+                    <ul>
+                        <li>로또 기록을 캘린더 형태로 정리</li>
+                        <li>자주 등장하는 번호 조합 분석</li>
+                        <li>그래프로 추첨 추세 확인</li>
+                    </ul>
+                </div>
+            </header>
+
+            <Functions />
+        </div>
+    );
+};
+
+export default Lotto;

src/pages/travel/Travel.css

@@ -0,0 +1,109 @@
+.travel {
+    display: grid;
+    gap: 28px;
+}
+
+.travel-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
+    gap: 24px;
+    align-items: center;
+}
+
+.travel-kicker {
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    font-size: 12px;
+    color: var(--accent);
+    margin: 0 0 10px;
+}
+
+.travel-header h1 {
+    font-family: var(--font-display);
+    margin: 0 0 12px;
+    font-size: clamp(30px, 4vw, 40px);
+}
+
+.travel-sub {
+    margin: 0;
+    color: var(--muted);
+}
+
+.travel-note {
+    border: 1px solid var(--line);
+    border-radius: 20px;
+    padding: 20px;
+    background: var(--surface);
+}
+
+.travel-note__title {
+    margin: 0 0 8px;
+    font-weight: 600;
+}
+
+.travel-note__desc {
+    margin: 0;
+    color: var(--muted);
+}
+
+.travel-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 18px;
+}
+
+.travel-card {
+    position: relative;
+    border-radius: 20px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    min-height: 220px;
+}
+
+.travel-card.is-wide {
+    grid-column: span 2;
+}
+
+.travel-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    filter: saturate(1.05);
+}
+
+.travel-card__overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.7));
+    color: #f8f4f0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: 6px;
+    padding: 18px;
+}
+
+.travel-card__title {
+    margin: 0;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.travel-card__meta {
+    margin: 0;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: rgba(248, 244, 240, 0.8);
+}
+
+@media (max-width: 900px) {
+    .travel-header {
+        grid-template-columns: 1fr;
+    }
+
+    .travel-card.is-wide {
+        grid-column: span 1;
+    }
+}

src/pages/travel/Travel.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { travelGallery } from '../../data/travel';
+import './Travel.css';
+
+const Travel = () => {
+    return (
+        <div className="travel">
+            <header className="travel-header">
+                <div>
+                    <p className="travel-kicker">Visual Diary</p>
+                    <h1>Travel Archive</h1>
+                    <p className="travel-sub">
+                        여행에서 본 색감과 분위기를 모아 전시하는 페이지입니다.
+                    </p>
+                </div>
+                <div className="travel-note">
+                    <p className="travel-note__title">렌더링 포인트</p>
+                    <p className="travel-note__desc">
+                        사진마다 그리드 크기를 다르게 배치해 리듬을 만들었습니다.
+                    </p>
+                </div>
+            </header>
+
+            <section className="travel-grid">
+                {travelGallery.map((photo, index) => (
+                    <article
+                        key={photo.id}
+                        className={`travel-card ${index % 3 === 0 ? 'is-wide' : ''}`}
+                    >
+                        <img src={photo.image} alt={photo.title} loading="lazy" />
+                        <div className="travel-card__overlay">
+                            <p className="travel-card__title">{photo.title}</p>
+                            <p className="travel-card__meta">
+                                {photo.location} · {photo.month}
+                            </p>
+                        </div>
+                    </article>
+                ))}
+            </section>
+        </div>
+    );
+};
+
+export default Travel;