feat: 시리즈 관련 UX 개선 기능 추가

src/app/blog/_components/SeriesAside/index.tsx

@@ -33,8 +33,7 @@ const SeriesAside = ({ series }: SeriesAsideProps) => {
         {series.map((seriesItem) => (
           <li
             key={seriesItem.series}
-            className="w-[240px] shrink-0 snap-start sm:w-[280px] md:w-[300px]
-              lg:w-full"
+            className="w-60 shrink-0 snap-start sm:w-70 md:w-75 lg:w-full"
           >
             <SeriesCard
               key={seriesItem.series}

src/app/blog/series/[series_slug]/page.tsx

@@ -30,26 +30,43 @@ const SeriesPage = async ({ params }: SeriesPageProps) => {
     return getPostMeta(ref.category, ref.slug);
   });
 
+  const firstPost = posts[posts.length - 1];
+
   return (
     <div
-      className="mx-auto flex w-full max-w-[886px] flex-col gap-8 py-8 sm:py-12"
+      className="mx-auto flex w-full max-w-221.5 flex-col gap-8 py-8 sm:py-12"
     >
-      <header className="px-4 sm:px-0">
+      <header className="flex items-end justify-between px-4 sm:px-0">
+        <div>
+          <Link
+            href="/blog"
+            className="typo-14-m mb-5 inline-flex items-center gap-1.5
+              text-neutral-500 hover:text-neutral-900 dark:text-neutral-400
+              dark:hover:text-neutral-100"
+          >
+            <ArrowHeadSVG className="size-5 shrink-0 rotate-90" />
+            블로그 홈
+          </Link>
+          <h1
+            className="typo-24-b sm:typo-32-b mb-2 text-neutral-900
+              dark:text-neutral-100"
+          >
+            {currentSeriesInfo?.seriesName}
+          </h1>
+        </div>
         <Link
-          href="/blog"
-          className="typo-14-m mb-5 inline-flex items-center gap-1.5
-            text-neutral-500 hover:text-neutral-900 dark:text-neutral-400
-            dark:hover:text-neutral-100"
+          href={firstPost.href}
+          className="dark:focus-visible:outline-brand inline-flex h-8
+            items-center justify-center gap-x-1 rounded-full border
+            border-neutral-300 bg-white px-3 py-2 text-xs whitespace-nowrap
+            text-neutral-900 hover:bg-neutral-100 focus-visible:outline-2
+            focus-visible:outline-offset-2 focus-visible:outline-neutral-700
+            active:bg-neutral-200 sm:text-sm dark:border-neutral-700
+            dark:bg-neutral-900 dark:text-neutral-100
+            dark:hover:bg-neutral-800/70 dark:active:bg-neutral-700"
         >
-          <ArrowHeadSVG className="size-5 shrink-0 rotate-90" />
-          블로그 홈
+          첫 게시글 보기
         </Link>
-        <h1
-          className="typo-24-b sm:typo-32-b mb-2 text-neutral-900
-            dark:text-neutral-100"
-        >
-          {currentSeriesInfo?.seriesName}
-        </h1>
       </header>
       <section className="px-4 sm:px-0">
         <div

src/content/posts/etc/2025-9-24-blog-renewal-v2-planning.md

@@ -2,7 +2,7 @@
 title: 블로그 리뉴얼 V2 기획 개인 브랜딩
 series: blog
 tags: ["블로그", "리뉴얼", "정보구조", "검색", "시리즈"]
-date: "2026-02-27"
+date: "2026.02.27"
 ---
 
 블로그를 한동안 운영하다 보니 구조를 다시 잡아야겠다고 느꼈다.

src/scripts/buildAllPosts.ts

@@ -17,11 +17,14 @@ import type { Post } from "@/types/posts.types";
 import fs from "fs";
 import path from "path";
 
-const processSinglePost = async (fileInfo: PostFileInfo) => {
-  const { category, slug, filePath } = fileInfo;
+interface ParsedPost {
+  fileInfo: PostFileInfo;
+  data: { [key: string]: string };
+  content: string;
+}
 
-  const fileContents = fs.readFileSync(filePath, "utf8");
-  const { data, content } = parseMarkdownFrontmatter(fileContents);
+const processSinglePost = async ({ fileInfo, data, content }: ParsedPost) => {
+  const { category, slug } = fileInfo;
 
   const html = await convertMarkdownToHtml(content);
   const htmlOutPath = getPostHtmlFilePath(category, slug);
@@ -55,7 +58,35 @@ export const buildAllPosts = async () => {
     fs.mkdirSync(path.join(POSTS_JSON_DIR, category), { recursive: true });
   });
 
-  const buildTasks = postFiles.map((fileInfo) => processSinglePost(fileInfo));
+  const parsedPosts: ParsedPost[] = postFiles.map((fileInfo) => {
+    const fileContents = fs.readFileSync(fileInfo.filePath, "utf8");
+    const { data, content } = parseMarkdownFrontmatter(fileContents);
+    return { fileInfo, data, content };
+  });
+
+  const seriesMap: Record<string, ParsedPost[]> = {};
+  parsedPosts.forEach((post) => {
+    const series = post.data.series;
+    if (series) {
+      if (!seriesMap[series]) seriesMap[series] = [];
+      seriesMap[series].push(post);
+    }
+  });
+
+  Object.keys(seriesMap).forEach((series) => {
+    seriesMap[series]
+      .sort((a, b) => {
+        const dateA = new Date(a.data.date || 0).getTime();
+        const dateB = new Date(b.data.date || 0).getTime();
+        return dateA - dateB;
+      })
+      .forEach((post, index) => {
+        const originalTitle = post.data.title || "Default Title";
+        post.data.title = `[${series} - ${index + 1}] ${originalTitle}`;
+      });
+  });
+
+  const buildTasks = parsedPosts.map((post) => processSinglePost(post));
 
   await Promise.all(buildTasks);
 

src/styles/typography.css

@@ -78,7 +78,7 @@
 @utility typo-18-b {
   font-size: 18px;
   font-weight: 700;
-  line-height: 1;
+  line-height: 1.2;
   letter-spacing: -0.025em;
 }