예제 소스

MoreGames.tsx

"use client";

import { useEffect, useState } from "react";
import { GAME_SERVICES, serviceHref, type GameService } from "@/lib/services";
import styles from "./MoreGames.module.css";

type Props = {
  open: boolean;
  onClose: () => void;
  /** 현재 게임 id — 목록에서 제외 */
  excludeId?: string;
};

export function MoreGames({ open, onClose, excludeId }: Props) {
  const [items, setItems] = useState<{ service: GameService; href: string }[]>([]);

  useEffect(() => {
    if (!open) return;
    const host = window.location.hostname;
    setItems(
      GAME_SERVICES.filter((s) => s.id !== excludeId).map((service) => ({
        service,
        href: serviceHref(service, host),
      })),
    );
  }, [open, excludeId]);

  if (!open) return null;

  return (
    <div
      className={styles.backdrop}
      role="dialog"
      aria-modal="true"
      aria-label="다른 게임"
      onClick={onClose}
    >
      <div className={styles.sheet} onClick={(e) => e.stopPropagation()}>
        <h2>다른 게임</h2>
        <p>아래 게임을 고르면 해당 서비스로 이동합니다.</p>
        <ul className={styles.list}>
          {items.map(({ service, href }) => (
            <li key={service.id}>
              <a className={styles.card} href={href}>
                <span className={styles.name}>{service.name}</span>
                <span className={styles.url}>{href}</span>
              </a>
            </li>
          ))}
        </ul>
        <button type="button" className={styles.close} onClick={onClose}>
          닫기
        </button>
      </div>
    </div>
  );
}