fix: React 에러 및 Tailwind V4 코드 품질 개선 (#38)

- topic-container: Math.random() 제거 → 최신 3개 고정 (LCP 안정화)
- ChatBot: useEffect deps에 onHighlight 추가
- CategoryFilter: max-w-[6rem] → max-w-24
- hero-section: min-h-[420px] → min-h-105, rounded-[2.5rem] → rounded-5xl
- page.tsx: h-[420px] → h-105

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

Author: Aprasaks

src/app/page.tsx

@@ -14,7 +14,7 @@ export default function Home() {
           <HeroSection />
         </section>
 
-        <aside className="md:col-span-5 h-[420px]">
+        <aside className="md:col-span-5 h-105">
           <TopicContainer />
         </aside>
       </div>

src/components/archive/CategoryFilter.tsx

@@ -71,7 +71,7 @@ export default function CategoryFilter({
             <button
               onClick={() => setSeriesOpen((v) => !v)}
               className={[
-                '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 max-w-[6rem] sm:max-w-none truncate',
+                '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 max-w-24 sm:max-w-none truncate',
                 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',

src/components/archive/ChatBot.tsx

@@ -52,7 +52,7 @@ export default function ChatBot({ onHighlight, lang }: ChatBotProps) {
   useEffect(() => {
     setMessages([createMessage('assistant', GREETING[lang] ?? GREETING.ko)]);
     onHighlight([]);
-  }, [lang]);
+  }, [lang, onHighlight]);
 
   const bottomRef = useRef<HTMLDivElement>(null);
 

src/components/home/hero-section.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 
 export default function HeroSection() {
   return (
-    <div className="relative overflow-hidden rounded-[2.5rem] border border-white/10 bg-zinc-950/20 px-10 py-14 transition-all hover:border-white/20 hover:shadow-2xl md:px-12 md:py-16 min-h-[420px]">
+    <div className="relative overflow-hidden rounded-5xl border border-white/10 bg-zinc-950/20 px-10 py-14 transition-all hover:border-white/20 hover:shadow-2xl md:px-12 md:py-16 min-h-105">
       <div className="pointer-events-none absolute inset-0 z-0 opacity-80 select-none">
         <Image
           src="/images/coded-library.webp"

src/components/home/topic-container.tsx

@@ -5,9 +5,7 @@ import { getAllPosts } from '@/lib/posts';
 export default function TopicContainer() {
   const posts = getAllPosts('ko');
 
-  const featured = [...posts]
-    .sort(() => Math.random() - 0.5)
-    .slice(0, 3);
+  const featured = posts.slice(0, 3);
 
   return (
     <div className="flex h-full flex-col gap-3">