Qwik

// Qwik City - 파일 기반 라우팅 구조
// src/routes/
// ├── index.tsx          → /
// ├── about/
// │   └── index.tsx      → /about
// ├── products/
// │   ├── index.tsx      → /products
// │   └── [id]/
// │       └── index.tsx  → /products/:id (동적 라우트)
// └── layout.tsx         → 레이아웃 (모든 페이지 공통)

// ============================================
// src/routes/products/[id]/index.tsx
// 동적 라우팅 + 데이터 로딩 예시
// ============================================
import { component$ } from '@builder.io/qwik';
import { routeLoader$, useLocation } from '@builder.io/qwik-city';
import type { DocumentHead } from '@builder.io/qwik-city';

// routeLoader$: 서버에서 데이터 로딩 (Next.js의 getServerSideProps와 유사)
// 이 함수는 절대 클라이언트에 전송되지 않음 (서버 전용)
export const useProductData = routeLoader$(async (requestEvent) => {
  const productId = requestEvent.params.id;

  // DB 직접 접근 가능 (서버에서만 실행됨)
  const product = await db.products.findUnique({
    where: { id: productId }
  });

  if (!product) {
    // 404 페이지로 리다이렉트
    throw requestEvent.redirect(302, '/404');
  }

  return product;
});

// 페이지 컴포넌트
export default component$(() => {
  // useLoader의 반환값 사용
  const product = useProductData();
  const loc = useLocation();

  return (
    <main class="product-detail">
      {/* .value로 데이터 접근 */}
      <h1>{product.value.name}</h1>
      <p class="price">{product.value.price.toLocaleString()}원</p>
      <p>{product.value.description}</p>

      <!-- 현재 URL 정보 -->
      <p>현재 경로: {loc.url.pathname}</p>
      <p>상품 ID: {loc.params.id}</p>
    </main>
  );
});

// SEO: 동적 메타 태그 설정
export const head: DocumentHead = ({ resolveValue }) => {
  const product = resolveValue(useProductData);

  return {
    title: `${product.name} | My Shop`,
    meta: [
      { name: 'description', content: product.description },
      { property: 'og:title', content: product.name },
      { property: 'og:image', content: product.imageUrl },
    ],
  };
};

// ============================================
// src/routes/layout.tsx - 레이아웃 컴포넌트
// ============================================
import { component$, Slot } from '@builder.io/qwik';

export default component$(() => {
  return (
    <>
      <header>
        <nav>
          <a href="/">홈</a>
          <a href="/products">상품</a>
          <a href="/about">소개</a>
        </nav>
      </header>

      {/* Slot: 자식 페이지가 렌더링되는 위치 */}
      <Slot />

      <footer>
        <p>© 2024 My Shop</p>
      </footer>
    </>
  );
});