예제 소스

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: 44,
          margin: 0,
          color: "#d4a574",
        }}
      >
        Omook
      </h1>
      <p style={{ color: "#a89880", margin: 0, lineHeight: 1.55 }}>
        사람 vs AI 오목
        <br />
        모바일 도장
      </p>
      <Link
        href="/play"
        style={{
          marginTop: 8,
          padding: "14px 32px",
          borderRadius: 999,
          background: "linear-gradient(180deg, #d4a574, #c99a6b)",
          color: "#2a2018",
          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="omook" />
    </main>
  );
}