From fa8d3aa2a6824e8f1803bcdeb9a570eda0ef8e47 Mon Sep 17 00:00:00 2001
From: Chaebean Yang <kazed0102@kaist.ac.kr>
Date: Tue, 10 Jun 2025 01:47:37 +0900
Subject: [PATCH] =?UTF-8?q?add=20comments(Why=20didn=E2=80=99t=20I=20do=20?=
 =?UTF-8?q?this=20sooner=3F)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[tripId]/[memoryId]/+page.svelte          | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte b/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
index 1cbc371..9d3ffbb 100644
--- a/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
+++ b/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
@@ -22,6 +22,7 @@
   let droppedGradientLayers = [];
   let droppedWheelStyle = {};
   let droppedCurrentImage = null;
+  let isDroppedVisible = true;
 
   $: tripId = $page.params.tripId;
   $: memoryId = $page.params.memoryId;
@@ -85,6 +86,7 @@
       droppedMemory = memorySnap.val();
       droppedColumnGroups = await extractColumnwiseColors(droppedMemory.images, false);
       droppedImageIndex = 0;
+      isDroppedVisible = true;
     }
   }
 
@@ -268,7 +270,7 @@
 
   function handleDrop(event) {
     event.preventDefault();
-    if (droppedMemory) return;
+    if (droppedMemory && isDroppedVisible) return;
 
     const droppedTripId = event.dataTransfer.getData("tripId");
     const droppedMemoryId = event.dataTransfer.getData("memoryId");
@@ -276,10 +278,14 @@
   }
 
   function allowDrop(event) {
-    if (!droppedMemory) {
+    if (!droppedMemory || !isDroppedVisible) {
       event.preventDefault();
     }
   }
+
+  function closeDroppedWheel() {
+    isDroppedVisible = false;
+  }
 </script>
 
 
@@ -336,7 +342,9 @@
 
         <!-- rightside dropped view -->
         <div class="wheel-section drop-zone" on:drop={handleDrop} on:dragover={allowDrop}>
-          {#if droppedMemory}
+          {#if droppedMemory && isDroppedVisible}
+            <img src="/lucide_x.png" alt="Close" class="close-button" on:click={closeDroppedWheel} />
+        
             <div class="dropped-mask">
               <div class="dropped-wheel" style={droppedWheelStyle}>
                 {#each droppedGradientLayers as style}
@@ -344,9 +352,11 @@
                 {/each}
               </div>
             </div>
+        
             {#if droppedCurrentImage}
               <img class="dropped-img" src={droppedCurrentImage} alt="Dropped Image" />
             {/if}
+        
             <div class="dropped-controls">
               <button on:click={prevDroppedImage}>
                 <img src="/lucide_chevron-up.png" alt="Up" width="24" height="24" />
@@ -570,5 +580,15 @@
     right: -15vw;
     border-radius: 50%;
   }
+
+  .close-button {
+    position: absolute;
+    top: -48px;
+    right: 2rem;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    z-index: 5;
+  }
 </style>