[251021] fix: VoicePromptScreen Layout Enhanced

🕐 커밋 시간: 2025. 10. 21. 10:05:09

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +13줄
  • 삭제: -18줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoicePromptScreen.module.less

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoicePromptScreen.module.less (unknown):
    ✅ Added: translate()

Performance: 코드 최적화로 성능 개선 기대

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

@@ -2,9 +2,6 @@
 @import "../../../style/CommonStyle.module.less";
 
 // TFullPopup wrapper - TFullPopup의 기본 스타일을 override하지 않음
-.tFullPopupWrapper {
-  // TFullPopup의 기본 동작 유지
-}
 
 .voiceOverlayContainer {
   position: fixed;
@@ -311,8 +308,7 @@
   flex: 1;
   display: flex;
   justify-content: center;
-  // align-items: center;
-  margin-top: 100px;
+  align-items: center;
   padding-right: 120px;
   z-index: 1002;
   pointer-events: none; // 빈 공간 클릭 시 dimBackground로 이벤트 전달

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

@@ -4,19 +4,20 @@
 .container {
   width: 642px;
   height: 437px;
-  position: relative;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, calc(-50% - 100px));
   border-radius: 12px;
   pointer-events: all; // 실제 컨텐츠는 클릭 가능
-  // modeContent의 스타일을 여기로 이동
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   margin-top: 100px;
   padding-right: 120px;
 }
 
 .title {
-  width: 642px;
-  left: 0;
-  top: 0;
-  position: absolute;
   text-align: center;
   color: white;
   font-size: 42px;
@@ -24,12 +25,10 @@
   font-weight: 700;
   line-height: 42px;
   word-wrap: break-word;
+  margin-bottom: 60px;
 }
 
 .suggestionsContainer {
-  left: 0;
-  top: 57px;
-  position: absolute;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
@@ -53,15 +52,15 @@
 
   &:hover {
     background: rgba(88, 88, 88, 0.6);
-    outline: 2px rgba(251, 251, 251, 0.3) solid;
+    outline: 4px rgba(251, 251, 251, 0.3) solid;
     transform: translateY(-2px);
     box-shadow: 0px 12px 35px rgba(0, 0, 0, 0.45);
   }
 
   &:focus {
     background: rgba(100, 100, 100, 0.7);
-    outline: 3px rgba(251, 251, 251, 0.5) solid;
-    outline-offset: -3px;
+    outline: 2px solid @PRIMARY_COLOR_RED;
+    outline-offset: -2px;
     box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.55);
     transform: translateY(-3px);
   }
@@ -74,7 +73,7 @@
   font-family: "LG Smart UI";
   font-weight: 700;
   line-height: 24px;
-  word-wrap: break-word;
+  white-space: nowrap;
   letter-spacing: -1px;
 }