mobile download

2026-05-28 14:44:19 +09:00
parent e2816b037f
commit 3503ef33f5
152 changed files with 11021 additions and 687 deletions
@@ -0,0 +1,106 @@
+import React, { useEffect } from 'react';
+
+interface BottomSheetProps {
+  open: boolean;
+  title?: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  height?: 'auto' | 'half' | 'full';
+}
+
+export default function BottomSheet({
+  open,
+  title,
+  onClose,
+  children,
+  height = 'auto',
+}: BottomSheetProps) {
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = prev; };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div className="bs-root" role="dialog" aria-modal="true">
+      <button type="button" className="bs-backdrop" aria-label="닫기" onClick={onClose} />
+      <div className={`bs-panel bs-${height}`}>
+        <div className="bs-handle" />
+        {title && (
+          <div className="bs-header">
+            <h2>{title}</h2>
+            <button type="button" className="bs-close" onClick={onClose} aria-label="닫기">✕</button>
+          </div>
+        )}
+        <div className="bs-body">{children}</div>
+      </div>
+      <style>{`
+        .bs-root {
+          position: fixed;
+          inset: 0;
+          z-index: 150;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+        }
+        .bs-backdrop {
+          position: absolute;
+          inset: 0;
+          background: rgba(0, 0, 0, 0.55);
+          border: none;
+          min-height: auto;
+        }
+        .bs-panel {
+          position: relative;
+          background: var(--gc-bg-elevated);
+          border-radius: 20px 20px 0 0;
+          max-height: 90vh;
+          display: flex;
+          flex-direction: column;
+          animation: bsUp 0.28s ease;
+        }
+        .bs-auto { max-height: 70vh; }
+        .bs-half { height: 55vh; }
+        .bs-full { height: calc(100% - var(--gc-safe-top) - 24px); }
+        .bs-handle {
+          width: 36px;
+          height: 4px;
+          background: var(--gc-border);
+          border-radius: 2px;
+          margin: 8px auto 4px;
+        }
+        .bs-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 8px 16px 12px;
+          border-bottom: 1px solid var(--gc-border);
+        }
+        .bs-header h2 {
+          font-size: 17px;
+          font-weight: 600;
+        }
+        .bs-close {
+          min-height: 36px;
+          min-width: 36px;
+          font-size: 18px;
+          color: var(--gc-text-muted);
+        }
+        .bs-body {
+          flex: 1;
+          overflow-y: auto;
+          padding: 16px;
+          padding-bottom: calc(16px + var(--gc-safe-bottom));
+          -webkit-overflow-scrolling: touch;
+        }
+        @keyframes bsUp {
+          from { transform: translateY(100%); }
+          to { transform: translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+}