feat: POP 시연 준비 — 5개 화면 + 버그 수정 + 재고검증

2026-04-09 14:28:57 +09:00
parent 0d62af8c8b
commit bfac350ed4
25 changed files with 2804 additions and 284 deletions
--- a/frontend/components/pop/hardcoded/common/ConfirmModal.tsx
+++ b/frontend/components/pop/hardcoded/common/ConfirmModal.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+
+export interface ConfirmModalProps {
+  open: boolean;
+  title?: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: "primary" | "danger" | "success";
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+/**
+ * POP 공용 확인 모달 (native confirm() 대체)
+ * 모바일 친화 디자인, bottom-sheet 스타일
+ */
+export function ConfirmModal({
+  open,
+  title,
+  message,
+  confirmText = "확인",
+  cancelText = "취소",
+  variant = "primary",
+  onConfirm,
+  onCancel,
+}: ConfirmModalProps) {
+  if (!open) return null;
+
+  const confirmBg =
+    variant === "danger"
+      ? "bg-gradient-to-b from-red-500 to-red-600 hover:from-red-600 hover:to-red-700"
+      : variant === "success"
+      ? "bg-gradient-to-b from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700"
+      : "bg-gradient-to-b from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700";
+
+  return (
+    <div className="fixed inset-0 z-[100]" onClick={onCancel}>
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black/50" />
+
+      {/* Center modal */}
+      <div className="absolute inset-0 flex items-center justify-center p-6">
+        <div
+          className="w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Body */}
+          <div className="px-6 py-7 text-center">
+            {title && (
+              <h3 className="text-lg font-bold text-gray-900 mb-3">{title}</h3>
+            )}
+            <p className="text-base text-gray-700 whitespace-pre-line leading-relaxed">
+              {message}
+            </p>
+          </div>
+
+          {/* Buttons */}
+          <div className="flex border-t border-gray-100">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="flex-1 py-4 text-base font-semibold text-gray-600 hover:bg-gray-50 active:bg-gray-100 transition-colors"
+            >
+              {cancelText}
+            </button>
+            <div className="w-px bg-gray-100" />
+            <button
+              type="button"
+              onClick={onConfirm}
+              className={`flex-1 py-4 text-base font-bold text-white transition-all active:scale-[0.98] ${confirmBg}`}
+            >
+              {confirmText}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}