// ❌ template.tsx 에 사이드바를 둔 안티패턴

// 📁 app/study/template.tsx
'use client';
import { useState } from 'react';

export default function StudyTemplate({
  children,
}: {
  children: React.ReactNode;
}) {
  // ★ 사용자가 /study/javascript → /study/typescript 이동하면
  //   template 이 새로 마운트 → expanded 가 다시 false 로 리셋
  const [expanded, setExpanded] = useState(false);

  return (
    <div>
      <aside>
        <button onClick={() => setExpanded(!expanded)}>
          {expanded ? '접기' : '펼치기'}
        </button>
        {expanded && <NavList />}
      </aside>
      <main>{children}</main>
    </div>
  );
}

// 사용자 경험:
// 1. /study 진입 → 사이드바 접힘 상태
// 2. 사용자가 "펼치기" 클릭 → 열림
// 3. /study/javascript 진입 → template 재마운트 → 다시 접힘 😡
// 4. 다시 펼치기 → 또 다른 카테고리 이동 → 또 리셋
//
// 이런 상태 리셋은 사용자에게 매우 짜증나는 UX

// ✅ layout 으로 상태 유지 + 필요시 template 로 진입 애니메이션

// 📁 app/study/layout.tsx — 사이드바, 상태 유지
import { Sidebar } from './Sidebar';

export default function StudyLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">{children}</main>
    </div>
  );
}

// 📁 app/study/Sidebar.tsx — Client (상태 보유)
'use client';
import { useState } from 'react';

export function Sidebar() {
  // ★ 이 state 는 카테고리 이동에도 살아남
  //   layout 이 재마운트되지 않으므로
  const [expanded, setExpanded] = useState(false);

  return (
    <aside>
      <button onClick={() => setExpanded(!expanded)}>
        {expanded ? '접기' : '펼치기'}
      </button>
      {expanded && <NavList />}
    </aside>
  );
}

// 📁 app/study/template.tsx — 페이지별 fade-in (선택)
'use client';
import { motion } from 'framer-motion';

export default function StudyTemplate({
  children,
}: {
  children: React.ReactNode;
}) {
  // ★ 페이지 이동마다 fade-in 다시 — template 이라 매번 마운트
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.2 }}
    >
      {children}
    </motion.div>
  );
}

// 사용자 경험:
// 1. /study 진입 → 사이드바 접힘
// 2. 사용자가 "펼치기" 클릭 → 열림
// 3. /study/javascript 진입 → 사이드바 그대로 열림 유지 😊
//                              page 본문은 fade-in (template)
// 4. /study/typescript 이동 → 사이드바 그대로, 본문만 fade-in
//
// 상태가 자연스럽게 살아남고, 본문 전환은 부드러움

// 폴더 구조:
// app/study/
// ├── layout.tsx        ← 사이드바 (상태 유지)
// ├── template.tsx      ← 페이지 진입 애니메이션 (매번 마운트)
// ├── Sidebar.tsx       ← Client
// ├── page.tsx          ← /study
// ├── [category]/page.tsx
// └── [category]/[slug]/page.tsx