From 0e83c4242406240b14d0f7b02d02fccc1867986b Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Mon, 24 Aug 2026 01:41:03 -0400
Subject: [PATCH] feat: add StickerWallModal component for full-size sticker
 wall viewing

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/components/StickerWallModal.jsx | 41 ++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 frontend/src/components/StickerWallModal.jsx

diff --git a/frontend/src/components/StickerWallModal.jsx b/frontend/src/components/StickerWallModal.jsx
new file mode 100644
index 0000000..20b6df9
--- /dev/null
+++ b/frontend/src/components/StickerWallModal.jsx
@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+
+function StickerWallModal({ isOpen, onClose, imageUrl }) {
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !imageUrl) return null;
+
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 p-4"
+      onClick={handleOverlayClick}
+    >
+      <div className="relative max-w-[90vw] max-h-[90vh]">
+        <button
+          onClick={onClose}
+          className="absolute -top-3 -right-3 w-8 h-8 bg-gray-800 hover:bg-gray-700 text-white rounded-full flex items-center justify-center text-sm font-bold shadow-lg z-10 transition"
+        >
+          ×
+        </button>
+        <img
+          src={imageUrl}
+          alt="Sticker Wall"
+          className="max-w-full max-h-[85vh] object-contain rounded-lg"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default StickerWallModal;