예제 소스

page.tsx

"use client";

import Link from "next/link";
import { useState } from "react";
import { MoreGames } from "@/components/MoreGames";

/** 홈(입국장) — 콘텐츠 부족 페이지 광고 게재 금지(애드센스)로 광고 미표시 */
export default function HomePage() {
  const [showMore, setShowMore] = useState(false);

  return (
    <main
      style={{
        minHeight: "100dvh",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 16,
        padding: 24,
        textAlign: "center",
      }}
    >
      <h1 style={{ fontFamily: "Cormorant Garamond, serif", fontSize: 42, margin: 0 }}>
        MariaGO
      </h1>
      <p style={{ color: "#a89880", margin: 0 }}>사람 vs VLM 바둑</p>
      <Link
        href="/play"
        style={{
          marginTop: 12,
          padding: "12px 28px",
          borderRadius: 999,
          background: "#c4a574",
          color: "#1a1714",
          fontWeight: 600,
          textDecoration: "none",
        }}
      >
        도장 입장
      </Link>
      <button
        type="button"
        onClick={() => setShowMore(true)}
        style={{
          padding: "12px 28px",
          borderRadius: 999,
          background: "transparent",
          color: "#a89880",
          fontWeight: 600,
          border: "1px solid #3a332c",
          cursor: "pointer",
          font: "inherit",
        }}
      >
        다른 게임
      </button>
      <MoreGames open={showMore} onClose={() => setShowMore(false)} excludeId="baduk" />
    </main>
  );
}