fix: 모바일 반응형 개선 및 누락 요소 수정 (#36)

- CategoryFilter: 모바일 2줄 레이아웃, 언어 토글 KO/EN 축약
- PostHeader: 날짜 표시 추가
- SeriesNav: lang 기반 다국어 처리 (이전편/다음편 → Prev/Next)
- ArchiveClient: img → Next.js Image 교체
- archive/logs slug 페이지: overflow-x-hidden 추가

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Aprasaks

src/app/archive/[slug]/page.tsx

@@ -68,7 +68,7 @@ export default async function PostPage({ params, searchParams }: PageProps) {
   const next = currentIndex < seriesPosts.length - 1 ? seriesPosts[currentIndex + 1] : null;
 
   return (
-    <main className="mx-auto max-w-3xl px-4 sm:px-6 py-12 min-h-[calc(100vh-64px-56px)]">
+    <main className="mx-auto max-w-3xl px-4 sm:px-6 py-12 min-h-[calc(100vh-64px-56px)] overflow-x-hidden">
       {/* JSON-LD 구조화 데이터 */}
       <script
         type="application/ld+json"

src/app/logs/[slug]/page.tsx

@@ -46,7 +46,7 @@ export default async function LogPage({ params }: PageProps) {
   if (!log) notFound();
 
   return (
-    <main className="mx-auto max-w-3xl px-4 sm:px-6 py-12 min-h-[calc(100vh-64px-56px)]">
+    <main className="mx-auto max-w-3xl px-4 sm:px-6 py-12 min-h-[calc(100vh-64px-56px)] overflow-x-hidden">
       {/* JSON-LD */}
       <script
         type="application/ld+json"

src/components/archive/ArchiveClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import Image from 'next/image';
 import type { Post, Category, PostLang, Series } from '@/types/archive';
 import PostGrid from './PostGrid';
 import ChatBot from './ChatBot';
@@ -85,7 +86,7 @@ export default function ArchiveClient({
           onClick={() => setMobileChat(true)}
           className="md:hidden fixed bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-2 rounded-full bg-zinc-900 border border-white/20 px-5 py-3 text-sm font-medium text-zinc-100 shadow-xl hover:bg-zinc-800 transition-colors cursor-pointer"
         >
-          <img src="/images/emoticon-small.png" alt="해고리" className="w-6 h-6 object-contain" />
+          <Image src="/images/emoticon-small.png" alt="해고리" width={24} height={24} className="object-contain" />
           <span>사서에게 도움요청하기</span>
         </button>
       )}

src/components/archive/CategoryFilter.tsx

@@ -47,33 +47,35 @@ export default function CategoryFilter({
   };
 
   return (
-    <nav className="flex items-center gap-2">
-      <div className="flex flex-1 flex-wrap items-center gap-2">
+    <nav className="flex flex-col gap-2 sm:flex-row sm:items-center">
+      {/* 카테고리 */}
+      <div className="flex flex-1 flex-wrap items-center gap-1.5">
         {categories.map((cat) => (
           <button
             key={cat.id}
             onClick={() => onChange(cat.id)}
             className={[
-              'cursor-pointer rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
+              'cursor-pointer rounded-full px-3 py-1 text-xs sm:px-4 sm:py-1.5 sm:text-sm font-medium transition-colors',
               selected === cat.id
                 ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900'
                 : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100',
             ].join(' ')}
           >
             {cat.label}
-            <span className="ml-1.5 text-xs opacity-60">{cat.count}</span>
+            <span className="ml-1 text-xs opacity-60">{cat.count}</span>
           </button>
         ))}
       </div>
 
+      {/* 시리즈 + 언어 토글 */}
       <div className="flex shrink-0 items-center gap-2">
         {/* 시리즈 드롭다운 */}
         {series.length > 0 && (
           <div ref={dropdownRef} className="relative">
             <button
               onClick={() => setSeriesOpen((v) => !v)}
               className={[
-                'cursor-pointer rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors',
+                'cursor-pointer rounded-full border px-3 py-1 text-xs sm:px-3.5 sm:py-1.5 sm:text-sm font-medium transition-colors',
                 seriesOpen || selectedSeries
                   ? 'border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900'
                   : 'border-zinc-300 text-zinc-500 hover:text-zinc-900 dark:border-zinc-600 dark:hover:text-zinc-100',
@@ -108,31 +110,30 @@ export default function CategoryFilter({
         )}
 
         {/* 언어 토글 */}
-        <div className="flex items-center overflow-hidden rounded-full border border-zinc-300 text-sm font-medium dark:border-zinc-600">
+        <div className="flex items-center overflow-hidden rounded-full border border-zinc-300 text-xs sm:text-sm font-medium dark:border-zinc-600">
           <button
             onClick={() => onLangChange('ko')}
             className={[
-              'cursor-pointer px-3 py-1.5 transition-colors',
+              'cursor-pointer px-2.5 py-1 sm:px-3 sm:py-1.5 transition-colors',
               lang === 'ko'
                 ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900'
                 : 'text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300',
             ].join(' ')}
           >
-            한국어
+            <span className="sm:hidden">KO</span>
+            <span className="hidden sm:inline">한국어</span>
           </button>
-          <span className="text-zinc-300 select-none dark:text-zinc-600">
-            /
-          </span>
+          <span className="text-zinc-300 select-none dark:text-zinc-600">/</span>
           <button
             onClick={() => onLangChange('en')}
             className={[
-              'cursor-pointer px-3 py-1.5 transition-colors',
+              'cursor-pointer px-2.5 py-1 sm:px-3 sm:py-1.5 transition-colors',
               lang === 'en'
                 ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900'
                 : 'text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300',
             ].join(' ')}
           >
-            English
+            EN
           </button>
         </div>
       </div>

src/components/archive/PostHeader.tsx

@@ -46,6 +46,11 @@ export default function PostHeader({ post }: PostHeaderProps) {
         </p>
       )}
 
+      {/* 날짜 */}
+      <time dateTime={post.date} className="mt-4 block text-xs text-zinc-600 tabular-nums">
+        {post.date}
+      </time>
+
       <div className="mt-6 border-b border-zinc-800" />
     </header>
   );

src/components/archive/SeriesNav.tsx

@@ -13,7 +13,7 @@ export default function SeriesNav({ prev, next, lang }: SeriesNavProps) {
   return (
     <nav className="mt-16 border-t border-white/10 pt-8">
       <p className="mb-4 text-xs font-medium tracking-widest text-zinc-500 uppercase">
-        Series
+        {lang === 'ko' ? '시리즈' : 'Series'}
       </p>
       <div className="grid grid-cols-2 gap-4">
         {/* 이전 편 */}
@@ -23,7 +23,7 @@ export default function SeriesNav({ prev, next, lang }: SeriesNavProps) {
               href={`/archive/${prev.slug}?lang=${lang}`}
               className="group flex flex-col gap-1 rounded-xl border border-white/10 bg-white/5 p-4 transition-colors hover:border-white/20 hover:bg-white/10"
             >
-              <span className="text-xs text-zinc-500">← 이전 편</span>
+              <span className="text-xs text-zinc-500">{lang === 'ko' ? '← 이전 편' : '← Prev'}</span>
               <span className="text-sm font-medium text-zinc-200 line-clamp-2 group-hover:text-white transition-colors">
                 {prev.title}
               </span>
@@ -40,7 +40,7 @@ export default function SeriesNav({ prev, next, lang }: SeriesNavProps) {
               href={`/archive/${next.slug}?lang=${lang}`}
               className="group flex flex-col gap-1 rounded-xl border border-white/10 bg-white/5 p-4 text-right transition-colors hover:border-white/20 hover:bg-white/10"
             >
-              <span className="text-xs text-zinc-500">다음 편 →</span>
+              <span className="text-xs text-zinc-500">{lang === 'ko' ? '다음 편 →' : 'Next →'}</span>
               <span className="text-sm font-medium text-zinc-200 line-clamp-2 group-hover:text-white transition-colors">
                 {next.title}
               </span>