// ==========================================
// 📂 app/page.tsx
// 서버 컴포넌트 기반의 아주 단순한 앱 라우터 예제
// ==========================================

export default async function HomePage() {
  // 컴포넌트 함수 자체에 async를 붙일 수 있습니다! (서버 컴포넌트의 특권)
  // 렌더링 진화의 꽃: 별도의 getServerSideProps 함수가 필요 없어졌습니다.
  
  return (
    <main className="min-h-screen p-8 bg-gray-50 flex flex-col items-center justify-center">
      <h1 className="text-4xl font-extrabold text-blue-600 mb-4">
        Welcome to Next.js 14+
      </h1>
      <p className="text-lg text-gray-700">
        서버 컴포넌트 기반의 App Router 패러다임에 오신 것을 환영합니다!
      </p>
    </main>
  );
}

// ==========================================
// 📂 app/(shop)/product/[id]/page.tsx
// 동적 라우팅 페이지 예시
// ==========================================

// App Router의 페이지 컴포넌트는 기본적으로 서버 컴포넌트입니다.
export default async function ProductDetailPage({ 
  params 
}: { 
  params: Promise<{ id: string }> 
}) {
  // params 객체에서 동적 경로 값(id)을 비동기로 추출합니다. (Next.js 15+ 권장)
  const { id } = await params;
  
  // 데이터베이스나 API에서 상품 정보를 조회 (서버단에서 실행됨)
  // const product = await getProductById(id);

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold">상품 상세 페이지</h1>
      <p className="mt-4 text-gray-600">
        조회 요청된 상품 ID: <span className="text-blue-500 font-bold">{id}</span>
      </p>
    </div>
  );
}

// ==========================================
// 📂 app/page.tsx (서버 컴포넌트)
// ==========================================
import LikeButton from './LikeButton';

export default async function BlogPostPage() {
  // DB에서 데이터 직접 조회 (서버단에서 안전하고 빠르게 실행됨)
  // 서버 컴포넌트이므로 "use client"가 필요 없습니다.
  const post = await db.post.findUnique({ id: 1 });
  
  return (
    <article className="max-w-2xl mx-auto p-8">
      {/* 정적인 콘텐츠는 서버에서 렌더링되어 완성된 HTML로 전송됨 (SEO 완벽) */}
      <h1 className="text-3xl font-bold">{post.title}</h1>
      <div className="mt-4 text-gray-700">{post.content}</div>
      
      <div className="mt-8 border-t pt-4">
        {/* 사용자와 상호작용하는 부분만 클라이언트 컴포넌트로 분리하여 삽입 */}
        <LikeButton initialCount={post.likes} />
      </div>
    </article>
  );
}

// ==========================================
// 📂 app/LikeButton.tsx (클라이언트 컴포넌트)
// ==========================================
"use client"; // 파일의 최상단에 선언하여 클라이언트 컴포넌트임을 명시!

import { useState } from 'react';

export default function LikeButton({ initialCount }: { initialCount: number }) {
  // useState와 onClick 같은 이벤트는 클라이언트 컴포넌트에서만 사용 가능합니다.
  const [likes, setLikes] = useState(initialCount);

  return (
    <button 
      onClick={() => setLikes(likes + 1)}
      className="px-4 py-2 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition"
    >
      ❤️ 좋아요 {likes}
    </button>
  );
}

// ==========================================
// 📂 app/news/page.tsx
// 서버 컴포넌트에서 fetch 캐싱 옵션 활용하기
// ==========================================

export default async function NewsPage() {
  // 1. 실시간 데이터 (캐시 안함 - 매번 요청)
  const realtimeRes = await fetch('https://api.example.com/stock-price', {
    cache: 'no-store' // 캐시를 전혀 하지 않음 (SSR 방식)
  });
  const stock = await realtimeRes.json();

  // 2. 주기적 갱신 데이터 (10초마다 캐시 갱신 - ISR 방식)
  const newsRes = await fetch('https://api.example.com/latest-news', {
    next: { revalidate: 10 } // 10초 동안은 빠르고 동일한 응답 반환
  });
  const newsList = await newsRes.json();

  return (
    <div className="p-8 space-y-8">
      <section className="bg-red-50 p-6 rounded-xl border border-red-200">
        <h2 className="text-xl font-bold text-red-600 mb-2">📈 실시간 삼성전자 주가</h2>
        <p className="text-3xl font-mono">{stock.price.toLocaleString()} 원</p>
        <p className="text-sm text-gray-500 mt-2">* 새로고침할 때마다 데이터가 변동됩니다.</p>
      </section>

      <section className="bg-blue-50 p-6 rounded-xl border border-blue-200">
        <h2 className="text-xl font-bold text-blue-600 mb-4">📰 최근 뉴스 (10초 캐시)</h2>
        <ul className="space-y-2">
          {newsList.map((news: any) => (
            <li key={news.id} className="text-gray-800 border-b pb-2">{news.title}</li>
          ))}
        </ul>
        <p className="text-sm text-gray-500 mt-4">* 10초 내에 새로고침하면 DB를 조회하지 않고 엄청 빠르게 캐시를 줍니다.</p>
      </section>
    </div>
  );
}

// ==========================================
// 📂 app/dashboard/error.tsx
// ==========================================
'use client' // Error components must be Client Components

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // 외부 에러 트래킹 서비스(Sentry 등)로 로깅할 수 있습니다.
    console.error(error)
  }, [error])

  return (
    <div className="p-4 bg-red-500/10 border border-red-500 rounded-lg flex flex-col items-center">
      <h2 className="text-red-500 font-bold mb-4">데이터를 불러오는 중 문제가 발생했습니다!</h2>
      <button
        onClick={() => reset()} // 컴포넌트 재렌더링 시도 (Recover)
        className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition"
      >
        다시 시도하기
      </button>
    </div>
  )
}

// ==========================================
// 📂 app/dashboard/loading.tsx
// ==========================================
export default function Loading() {
  // 실제 페이지(page.tsx)가 렌더링되기 전 즉시 브라우저로 스트리밍됩니다.
  return (
    <div className="p-4 space-y-4 animate-pulse">
      <div className="h-8 bg-slate-700 rounded w-1/4"></div>
      <div className="h-32 bg-slate-700 rounded w-full"></div>
      <div className="h-32 bg-slate-700 rounded w-full"></div>
    </div>
  )
}

// ==========================================
// 📂 app/products/[id]/page.tsx
// 동적 라우팅 페이지 및 동적 SEO 메타 데이터 생성
// ==========================================

import { Metadata } from 'next';

// 동적 라우팅 페이지는 params 객체를 비동기(Promise) 형태로 전달받습니다.
type Props = {
  params: Promise<{ id: string }>;
}

// 1️⃣ 동적 메타 데이터 생성 (카카오톡 공유, 구글 검색 엔진 최적화용)
// 컴포넌트 렌더링 전에 서버에서 실행되어 <head> 태그에 주입됩니다.
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = await params;
  
  // SEO를 위해 DB에서 해당 상품 정보 조회
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  return {
    title: `${product.name} 구매하기 | Minstudio Store`,
    description: product.description,
    openGraph: {
      title: product.name,
      images: [product.thumbnail_url], // 카톡 공유 시 나타나는 썸네일
    },
  };
}

// 2️⃣ 실제 화면 렌더링 컴포넌트
export default async function ProductDetailPage({ params }: Props) {
  // Promise 형태의 params를 await로 풀어냅니다. (Next.js 15+ 권장)
  const { id } = await params;
  
  // 메타데이터에서 조회했던 데이터를 한 번 더 조회합니다.
  // ※ 걱정 마세요! Next.js가 똑똑하게 두 번째 요청은 가로채서 캐시된 응답을 줍니다. (Deduplication)
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  return (
    <div className="max-w-4xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-4">상품 번호: {id}</h1>
      <div className="flex gap-8">
        <img src={product.image} alt={product.name} className="w-1/2 rounded-2xl shadow" />
        <div>
          <h2 className="text-2xl font-bold">{product.name}</h2>
          <p className="text-xl text-blue-600 font-bold mt-4">{product.price.toLocaleString()}원</p>
          <button className="mt-8 px-8 py-3 bg-black text-white font-bold rounded-full w-full">
            장바구니 담기
          </button>
        </div>
      </div>
    </div>
  );
}

// ==========================================
// 📂 app/OptimizationDemo.tsx
// Next.js 내장 컴포넌트 실전 예제
// ==========================================

import Image from 'next/image';
import Link from 'next/link';

export default function OptimizationDemo() {
  return (
    <div className="p-8 max-w-3xl mx-auto space-y-12">
      
      {/* 1. <Link> 컴포넌트 사용 (SPA 부드러운 이동) */}
      <section>
        <h2 className="text-2xl font-bold mb-4">🚀 놀라운 속도의 페이지 이동</h2>
        <nav className="flex gap-4">
          {/* 외부 링크가 아닌 내부 라우팅은 무조건 Link 사용 */}
          <Link 
            href="/about" 
            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
          >
            소개 페이지로 즉시 이동
          </Link>
          <Link 
            href="/blog" 
            className="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition"
          >
            블로그 둘러보기
          </Link>
        </nav>
        <p className="mt-2 text-sm text-gray-500">
          * 링크가 화면에 보이는 순간 백그라운드에서 다음 페이지 데이터를 미리 불러옵니다(Prefetching).
        </p>
      </section>

      {/* 2. <Image> 컴포넌트 사용 (WebP 변환, Lazy loading) */}
      <section>
        <h2 className="text-2xl font-bold mb-4">🖼️ 극도로 최적화된 이미지 렌더링</h2>
        
        <div className="border border-gray-200 rounded-xl overflow-hidden shadow-lg inline-block">
          {/* 일반 img 태그 대신 Image 태그 사용 */}
          <Image 
            src="/heavy-landscape.jpg" // public 폴더에 저장된 이미지
            alt="멋진 풍경 이미지"
            width={800}               // Layout Shift(화면 덜컹거림)를 막기 위해 width 명시 필수
            height={450}              // Layout Shift(화면 덜컹거림)를 막기 위해 height 명시 필수
            priority={true}           // 첫 화면에 바로 보여야 하는 가장 중요한 이미지일 경우 우선순위 배정
            placeholder="blur"        // 로딩 중일 때 흐릿한 잔상(블러) 효과를 표시하여 UX 극대화
            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII="
            className="object-cover"
          />
        </div>
        
        <ul className="mt-4 text-sm text-gray-600 list-disc pl-5 space-y-1">
          <li>원본이 5MB짜리 무거운 사진이라도 브라우저에 맞게 <b>WebP/AVIF로 자동 압축</b>됩니다.</li>
          <li>화면 스크롤을 내려서 <b>이미지가 시야에 들어올 때만 다운로드</b>합니다. (Lazy loading 기본 적용)</li>
        </ul>
      </section>

    </div>
  );
}

// ==========================================
// 📂 app/page.tsx
// 서버 액션(Server Actions)을 사용한 게시글 작성
// ==========================================
import { revalidatePath } from 'next/cache';

// 1️⃣ 데이터베이스에 접근하는 마법의 서버 함수 (API 라우트 불필요!)
async function createPost(formData: FormData) {
  "use server"; // 이 함수는 절대로 브라우저로 전송되지 않고 서버에서만 실행됩니다!

  // 폼에서 전송된 데이터 추출
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  // 바로 데이터베이스에 저장해버림 (완벽한 보안)
  await db.post.create({
    data: { title, content }
  });

  // 2️⃣ 저장이 완료되면 '/posts' 경로의 캐시를 박살내고 화면을 최신화!
  revalidatePath('/posts');
}

export default function ServerActionDemo() {
  return (
    <div className="p-8 max-w-xl mx-auto border rounded-xl bg-white shadow-sm mt-10">
      <h2 className="text-2xl font-bold mb-6 text-gray-800">새 글 작성</h2>
      
      {/* 3️⃣ 기존의 onSubmit, e.preventDefault(), fetch()... 전부 버리세요! 
          그냥 action 속성에 함수만 넘겨주면 Next.js가 다 알아서 처리합니다. */}
      <form action={createPost} className="space-y-4">
        
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-1">제목</label>
          <input 
            type="text" 
            name="title" // name 속성이 서버 액션 formData의 Key가 됩니다.
            required 
            className="w-full border p-2 rounded-lg"
          />
        </div>
        
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-1">내용</label>
          <textarea 
            name="content" 
            required 
            className="w-full border p-2 rounded-lg h-32"
          />
        </div>
        
        <button 
          type="submit" 
          className="w-full bg-blue-600 text-white font-bold py-3 rounded-lg hover:bg-blue-700 transition"
        >
          저장하기
        </button>
      </form>
    </div>
  );
}

// ==========================================
// 📂 app/api/users/route.ts
// 완벽한 REST API 서버 구축 예제
// ==========================================
import { NextRequest, NextResponse } from 'next/server';

// 1️⃣ HTTP GET 요청 처리: URL /api/users 로 GET 요청이 올 때 실행됨
export async function GET(request: NextRequest) {
  // 쿼리스트링(Query Parameter) 읽기 예: /api/users?id=123
  const searchParams = request.nextUrl.searchParams;
  const id = searchParams.get('id');

  // DB에서 유저 목록 조회 로직 (가상)
  const users = [
    { id: 1, name: '김민수', role: 'admin' },
    { id: 2, name: '이영희', role: 'user' },
  ];

  // NextResponse.json()을 사용하면 완벽한 JSON 응답을 전송합니다.
  return NextResponse.json(users, { status: 200 });
}

// 2️⃣ HTTP POST 요청 처리: URL /api/users 로 데이터 등록 요청이 올 때 실행됨
export async function POST(request: NextRequest) {
  try {
    // 클라이언트가 보낸 JSON Body 읽어오기
    const body = await request.json();
    
    // DB 저장 로직 (가상)
    const newUser = { id: 3, ...body };
    console.log("새 회원가입 완료:", newUser);

    return NextResponse.json(
      { message: '유저가 성공적으로 생성되었습니다.', user: newUser },
      { status: 201 } // 201 Created 응답 코드
    );
  } catch (error) {
    return NextResponse.json(
      { error: '잘못된 요청 양식입니다.' },
      { status: 400 } // 에러 처리도 매우 깔끔하게 가능!
    );
  }
}

// ==========================================
// 📂 middleware.ts (반드시 app 폴더 밖인 프로젝트 최상단 src/ 경로에 위치)
// 쿠키 기반의 강력한 로그인 인증 방어벽
// ==========================================
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 사용자가 진입하려 하는 목적지 URL을 가져옵니다. (예: /dashboard/settings)
  const path = request.nextUrl.pathname;
  
  // 1. 보안이 필요한 경로인지 확인 (이 예제에서는 /dashboard 로 시작하는 모든 경로)
  const isProtectedRoute = path.startsWith('/dashboard');

  // 2. 브라우저의 쿠키에서 로그인 인증 토큰(세션)을 꺼내봅니다.
  const hasToken = request.cookies.has('auth_session_token');

  // 3. 만약 보호된 경로로 들어가려는데 토큰이 없다면? => 철통 방어!
  if (isProtectedRoute && !hasToken) {
    console.log("🚨 미인증 사용자 접근 시도! 로그인 페이지로 쫓아냅니다.");
    
    // 강제로 /login 페이지로 돌려보냅니다.
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 4. 로그인된 유저이거나 보호된 경로가 아니라면 무사통과!
  return NextResponse.next();
}

// 💡 보너스 팁: 미들웨어가 모든 파일(이미지, CSS 등)에서 매번 실행되면 성능이 떨어지므로,
// 아래 config를 통해 '특정 경로'에서만 미들웨어가 작동하도록 필터링을 걸어줍니다.
export const config = {
  matcher: [
    /*
     * 다음으로 시작하는 경로는 무시합니다:
     * - api (API 라우트)
     * - _next/static (정적 스크립트)
     * - _next/image (이미지 최적화 파일)
     * - favicon.ico (파비콘)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

// ==========================================
// 📂 app/dashboard/layout.tsx
// 병렬 라우트는 layout 함수의 props로 자동으로 주입됩니다!
// ==========================================
export default function DashboardLayout({
  children,   // 기본 app/dashboard/page.tsx
  analytics,  // app/dashboard/@analytics/page.tsx
  team,       // app/dashboard/@team/page.tsx
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <div className="flex flex-col gap-6 p-6">
      <header className="bg-slate-800 p-4 rounded-xl">
        {/* 공통 헤더나 제목을 배치하는 children 영역 */}
        {children}
      </header>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* 두 컴포넌트가 병렬로(독립적으로) 데이터를 Fetching하고 렌더링됩니다. */}
        {/* 둘 중 하나가 느려도 다른 하나는 먼저 화면에 표시될 수 있습니다. */}
        <section className="border border-purple-500/30 bg-purple-500/5 rounded-xl p-4">
          <h2 className="text-purple-400 font-bold mb-4">Analytics Slot</h2>
          {analytics}
        </section>

        <section className="border border-emerald-500/30 bg-emerald-500/5 rounded-xl p-4">
          <h2 className="text-emerald-400 font-bold mb-4">Team Slot</h2>
          {team}
        </section>
      </div>
    </div>
  )
}

// ==========================================
// 📂 app/feed/layout.tsx
// 병렬 라우트(@modal)와 결합하여 모달을 구현합니다.
// ==========================================
export default function FeedLayout({
  children,
  modal // 이 슬롯에 가로챈 라우트 컴포넌트가 들어옵니다!
}: { children: React.ReactNode, modal: React.ReactNode }) {
  return (
    <>
      {children} {/* 피드 리스트 */}
      {modal}    {/* 모달 오버레이 영역 */}
    </>
  )
}

// ==========================================
// 📂 app/feed/@modal/(..)photo/[id]/page.tsx
// 링크 클릭 시 /photo/[id] 로의 이동을 가로챕니다!
// ==========================================
import { Modal } from '@/components/Modal'
import { getPhoto } from '@/lib/db'

export default async function PhotoInterceptedModal({
  params
}: { params: { id: string } }) {
  const photo = await getPhoto(params.id)
  
  // 사용자는 페이지 이동 없이 그 자리에 모달이 뜨는 것을 경험합니다.
  // URL은 정상적으로 /photo/1 등으로 변경되어 뒤로가기도 완벽 지원됩니다.
  return (
    <Modal>
      <img src={photo.url} alt={photo.title} className="w-full rounded-xl" />
      <h2 className="text-xl font-bold mt-4">{photo.title}</h2>
    </Modal>
  )
}

import React from 'react';
import Button from './Button';

export default function App() {
  return (
    <div className="p-8 text-center bg-slate-50 rounded-xl border border-slate-200">
      <h2 className="text-2xl font-bold text-slate-800 mb-6">스타일링 전략 믹스매치</h2>
      
      <div className="flex justify-center gap-4">
        {/* Tailwind + CSS Modules가 결합된 버튼 컴포넌트 */}
        <Button variant="primary">Primary 버튼</Button>
        <Button variant="secondary">Secondary 버튼</Button>
      </div>

      <p className="mt-8 text-slate-500 text-sm">
        ☝️ 위 버튼들은 Tailwind의 유틸리티 클래스와 <br />
        CSS Modules의 스코프 스타일이 결합되어 렌더링되었습니다.
      </p>
    </div>
  );
}

// ==========================================
// 📂 app/lib/db.ts (서버 환경 전용)
// ==========================================
import mysql from 'mysql2/promise'

export const dbPool = mysql.createPool({
  host: 'db.example.com',
  // 서버에서만 접근 가능하므로 안전합니다! 
  // (클라이언트 번들에는 절대 포함되지 않습니다)
  password: process.env.DATABASE_PASSWORD, 
})


// ==========================================
// 📂 app/components/PaymentForm.tsx (클라이언트 컴포넌트)
// ==========================================
'use client'

import { loadStripe } from '@stripe/stripe-js'

export function PaymentForm() {
  // NEXT_PUBLIC_ 접두사가 있으므로 브라우저용 JS 번들에 포함됩니다.
  // 빌드 시점에 문자열 "pk_test_12345" 로 자동 치환(Replace)됩니다.
  const handlePayment = async () => {
    const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY!)
    // 결제 로직 수행...
  }

  return <button onClick={handlePayment}>결제하기</button>
}

// 💡 실무 베스트 프랙티스
// Next.js 환경 변수는 런타임에 읽어오는 게 아니라 "빌드 타임"에 코드에 박힙니다.
// 따라서 클라이언트 변수를 변경했다면 반드시 프로젝트를 다시 빌드(Re-build)해야 합니다!