Next.jsでハーフモーダル（Bottom Sheet）を実装する方法

"use client";

import { useState } from "react";

export default function Page() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        モーダルを開く
      </button>

      {isOpen && (
        <div className="fixed inset-0 bg-black/50">
          <div className="fixed bottom-0 w-full bg-white p-4 rounded-t-2xl">
            <button onClick={() => setIsOpen(false)}>
              閉じる
            </button>
            <p>ハーフモーダルです</p>
          </div>
        </div>
      )}
    </div>
  );
}

"use client";

.modal {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal.open {
  transform: translateY(0);
}

<div
  className={`fixed bottom-0 w-full bg-white p-4 rounded-t-2xl transition-transform duration-300 ${
    isOpen ? "translate-y-0" : "translate-y-full"
  }`}
>

<div
  className="fixed inset-0 bg-black/50"
  onClick={() => setIsOpen(false)}
>
  <div onClick={(e) => e.stopPropagation()}>
    モーダル内容
  </div>
</div>

useEffect(() => {
  if (isOpen) {
    document.getElementById("modal")?.focus();
  }
}, [isOpen]);

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
>

useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === "Escape") setIsOpen(false);
  };

  window.addEventListener("keydown", handleKeyDown);
  return () => window.removeEventListener("keydown", handleKeyDown);
}, []);

"use client";

import { useState, useRef } from "react";

export default function BottomSheet() {
  const [isOpen, setIsOpen] = useState(true);
  const startY = useRef(0);

  const handleTouchStart = (e: React.TouchEvent) => {
    startY.current = e.touches[0].clientY;
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    const currentY = e.touches[0].clientY;
    const diff = currentY - startY.current;

    // 下方向にスワイプした場合のみ
    if (diff > 100) {
      setIsOpen(false);
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50">
      <div
        className="fixed bottom-0 w-full bg-white p-4 rounded-t-2xl"
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
      >
        <div className="w-12 h-1 bg-gray-300 mx-auto mb-2 rounded" />
        <p>スワイプで閉じるモーダル</p>
      </div>
    </div>
  );
}

const [translateY, setTranslateY] = useState(0);

const handleTouchMove = (e: React.TouchEvent) => {
  const currentY = e.touches[0].clientY;
  const diff = currentY - startY.current;

  if (diff > 0) {
    setTranslateY(diff);
  }
};

const handleTouchEnd = () => {
  if (translateY > 100) {
    setIsOpen(false);
  } else {
    setTranslateY(0);
  }
};

<div
  style={{ transform: `translateY(${translateY}px)` }}
>

import { useState, useEffect } from "react";

useEffect(() => {
  document.body.style.overflow = isOpen ? "hidden" : "auto";
}, [isOpen]);

z-index: 50;

"use client";