feat: til archive 페이지 추가

Author: toothlessdev

.vitepress/config.mts

@@ -23,6 +23,7 @@ export default defineConfig({
         nav: [
             { text: "Home", link: "/" },
             { text: "Blog", link: "/posts/" },
+            { text: "Archive", link: "/archive" },
         ],
 
         sidebar: {
@@ -42,6 +43,7 @@ export default defineConfig({
     },
 
     rewrites: {
+        "contents/archive/:slug*": "archive/:slug*",
         "contents/posts/index.md": "posts/index.md",
         "contents/posts/:slug*": "posts/:slug*",
         "contents/projects/index.md": "projects/index.md",

contents/archive/index.md

@@ -0,0 +1,5 @@
+<script setup>
+import ArchiveContent from '@/components/ArchiveContent/ArchiveContent.vue'
+</script>
+
+<ArchiveContent />

data/posts.json

@@ -135,21 +135,21 @@
     }
   },
   {
-    "url": "/posts/React/build-react-1",
+    "url": "/posts/Web/indexed-db",
     "frontmatter": {
-      "title": "DIY React 1 - JSX 마크업을 Virtual DOM 객체로 변환하기",
+      "title": "IndexedDB 를 TypeOrm 처럼 사용하기",
       "createdAt": "2025-10-07T00:00:00.000Z",
-      "category": "React",
-      "description": "React의 핵심 개념과 동작 원리를 이해하기 위해, React를 직접 구현해보는 시리즈의 첫 번째 글입니다. 이번 글에서는 JSX 마크업을 Virtual DOM 객체로 변환하는 과정을 다룹니다."
+      "category": "Web",
+      "description": "IndexedDB 는 브라우저 내장 데이터베이스로, 대용량 데이터를 클라이언트에 저장할 수 있습니다. 이 글에서는 TypeOrm 스타일의 추상화를 통해 IndexedDB 를 더 쉽게 사용하는 방법을 소개합니다."
     }
   },
   {
-    "url": "/posts/Web/indexed-db",
+    "url": "/posts/React/build-react-1",
     "frontmatter": {
-      "title": "IndexedDB 를 TypeOrm 처럼 사용하기",
+      "title": "DIY React 1 - JSX 마크업을 Virtual DOM 객체로 변환하기",
       "createdAt": "2025-10-07T00:00:00.000Z",
-      "category": "Web",
-      "description": "IndexedDB 는 브라우저 내장 데이터베이스로, 대용량 데이터를 클라이언트에 저장할 수 있습니다. 이 글에서는 TypeOrm 스타일의 추상화를 통해 IndexedDB 를 더 쉽게 사용하는 방법을 소개합니다."
+      "category": "React",
+      "description": "React의 핵심 개념과 동작 원리를 이해하기 위해, React를 직접 구현해보는 시리즈의 첫 번째 글입니다. 이번 글에서는 JSX 마크업을 Virtual DOM 객체로 변환하는 과정을 다룹니다."
     }
   },
   {

src/components/ArchiveContent/ArchiveContent.css

@@ -0,0 +1,92 @@
+.archive-content {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+}
+
+.til-header {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.til-header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--vp-c-text-1);
+}
+
+.til-description {
+    font-size: 1.1rem;
+    color: var(--vp-c-text-2);
+    font-style: italic;
+}
+
+@media (max-width: 768px) {
+    .til-header {
+        margin-bottom: 2rem;
+    }
+
+    .til-header h1 {
+        font-size: 1.5rem;
+    }
+
+    .til-description {
+        font-size: 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .til-header {
+        margin-bottom: 1.5rem;
+    }
+
+    .til-header h1 {
+        font-size: 1.25rem;
+    }
+
+    .til-description {
+        font-size: 0.75rem;
+    }
+}
+
+.til-input-section {
+    margin-bottom: 2rem;
+    padding: 0 0.25rem;
+}
+
+.til-input-section h3 {
+    font-size: 1.3rem;
+    margin-bottom: 1rem;
+    color: var(--vp-c-text-1);
+}
+
+.til-divider {
+    height: 1px;
+    background: var(--vp-c-divider);
+    margin: 3rem 0;
+}
+
+.til-list-section {
+    margin-bottom: 2rem;
+}
+
+.til-list-section h3 {
+    font-size: 1.3rem;
+    margin-bottom: 0.5rem;
+    color: var(--vp-c-text-1);
+}
+
+.til-list-description {
+    font-size: 0.95rem;
+    color: var(--vp-c-text-2);
+    margin-bottom: 1.5rem;
+}
+
+.giscus-input :deep(.giscus),
+.giscus-input :deep(iframe) {
+    margin-top: 0;
+}
+
+.giscus-frame {
+    margin-top: 0;
+}

src/components/ArchiveContent/ArchiveContent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useData } from "vitepress";
+import Giscus from "@giscus/vue";
+import { GISCUS } from "@/constants/giscus";
+import "./ArchiveContent.css";
+
+const { isDark, lang } = useData();
+
+const theme = computed(() => (isDark.value ? "dark" : "light"));
+const mapping = "pathname";
+const uiLang = computed(() => (lang.value?.startsWith("ko") ? "ko" : "en"));
+</script>
+
+<template>
+    <div class="archive-content">
+        <header class="til-header">
+            <h1>📚 Archive of TIL</h1>
+            <p class="til-description">매일 하나씩, 아주 작은 것이라도 배우고 기록합니다.</p>
+        </header>
+
+        <section class="til-giscus-section">
+            <Giscus
+                class="giscus-comments"
+                :repo="GISCUS.repo"
+                :repo-id="GISCUS.repoId"
+                :category="GISCUS.category"
+                :category-id="GISCUS.categoryId"
+                :mapping="mapping"
+                strict="0"
+                reactions-enabled="0"
+                emit-metadata="0"
+                input-position="top"
+                :theme="theme"
+                :lang="uiLang"
+                crossorigin="anonymous"
+                loading="lazy"
+            />
+        </section>
+    </div>
+</template>

src/components/PostComment/PostComment.vue

@@ -3,13 +3,7 @@ import { computed } from "vue";
 import { useData } from "vitepress";
 import Giscus from "@giscus/vue";
 import { isProduction } from "@/constants/env";
-
-const GISCUS = {
-    repo: "toothlessdev/toothlessdev.github.io",
-    repoId: "R_kgDOK8A2Yg",
-    category: "General",
-    categoryId: "DIC_kwDOK8A2Ys4Cv8uz",
-} as const;
+import { GISCUS } from "@/constants/giscus";
 
 const { isDark, lang } = useData();
 

src/constants/giscus.ts

@@ -0,0 +1,6 @@
+export const GISCUS = {
+    repo: "toothlessdev/toothlessdev.github.io",
+    repoId: "R_kgDOK8A2Yg",
+    category: "General",
+    categoryId: "DIC_kwDOK8A2Ys4Cv8uz",
+} as const;