[251024] fix: SearchInputOvelray update-2

🕐 커밋 시간: 2025. 10. 24. 21:10:35

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +105줄
  • 삭제: -17줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.module.less
  ~ com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.v2.module.less
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoiceApiError.module.less
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoiceResponse.module.less

🔧 주요 변경 내용:
  • API 서비스 레이어 개선
  • 중간 규모 기능 개선

com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.module.less

@@ -125,9 +125,6 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  * {
-    margin-bottom: 5px;
-  }
   .keywordButton {
     height: 64px;
     background: white;
@@ -141,6 +138,7 @@
     cursor: pointer;
     transition: all 0.2s ease;
     width: fit-content;
+    margin-bottom: 16px; // bubble들 사이의 마진
     > * {
       margin-bottom: 5px;
 

com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.v2.module.less

@@ -13,7 +13,14 @@
     display: inline-flex;
     justify-content: flex-start;
     align-items: center;
-    gap: 19px;
+
+    > * {
+      margin-right: 19px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
 
     .topBoxTitle {
       width: 254px;
@@ -28,7 +35,14 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        gap: 10px;
+
+        > * {
+          margin-right: 10px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
 
         .text {
           text-align: center;
@@ -50,7 +64,14 @@
       display: flex;
       justify-content: flex-start;
       align-items: flex-start;
-      gap: 15px;
+
+      > * {
+        margin-right: 15px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
 
       .topBoxListItem {
         padding: 20px;
@@ -62,10 +83,17 @@
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
-        gap: 10px;
         cursor: pointer;
         transition: all 0.2s ease;
 
+        > * {
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
         .text {
           text-align: center;
           color: black;

com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less

@@ -635,7 +635,14 @@
   padding: 24px;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+
+  > * {
+    margin-bottom: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 // 대시보드 섹션
@@ -660,8 +667,15 @@
 .stateGrid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
   font-size: 22px; // 18px → 22px (더 크게)
+
+  > * {
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
   font-weight: 700; // 전체 텍스트 굵게
 
   @media (max-width: 1400px) {
@@ -702,13 +716,27 @@
 .textBlock {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+
+  > * {
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .textItem {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+
+  > * {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 
   .textLabel {
     color: rgba(255, 255, 255, 0.8);
@@ -760,13 +788,19 @@
 .timelineList {
   display: flex;
   flex-direction: column;
-  gap: 0;
 }
 
 .timelineItem {
   display: flex;
-  gap: 12px;
   padding: 14px; // 12px → 14px
+
+  > * {
+    margin-right: 12px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   align-items: flex-start;
   font-size: 20px; // 16px → 20px (더 크게)
@@ -808,10 +842,17 @@
 
 .timelineEvent {
   display: flex;
-  gap: 12px;
   align-items: center;
   margin-bottom: 4px;
 
+  > * {
+    margin-right: 12px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
   .eventName {
     font-weight: 800; // 600 → 800 (더 굵게)
     color: white;

com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoiceApiError.module.less

@@ -104,10 +104,17 @@
 
       .buttonContainer {
         display: flex;
-        gap: 20px;
         margin-top: 20px;
         pointer-events: all; // 버튼은 포커스 가능
 
+        > * {
+          margin-right: 20px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
         .retryButton,
         .restartButton {
           min-width: 160px;

com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoiceResponse.module.less

@@ -28,7 +28,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+
+  > * {
+    margin-right: 4px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 // 타이핑 애니메이션 텍스트
@@ -66,8 +73,15 @@
   left: 30px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
   z-index: 9999;
+
+  > * {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .debugLine {