[검색] 인풋창 말줄임표 적용 및 최근 검색어 디자인 수정#1

- 인풋창 말줄임표 적용 - 최근 검색어 디자인에 맞춰 수정.(삭제부분에 대해서는 추가작업 해야함)
2025-10-29 12:43:01 +09:00
parent 7a10ec25c3
commit 720314b02c
9 changed files with 198 additions and 125 deletions
--- a/com.twin.app.shoptime/assets/images/close_btn_white.png
+++ b/com.twin.app.shoptime/assets/images/close_btn_white.png
--- a/com.twin.app.shoptime/assets/images/timeStamp_gray.png
+++ b/com.twin.app.shoptime/assets/images/timeStamp_gray.png
--- a/com.twin.app.shoptime/assets/images/timeStamp_white.png
+++ b/com.twin.app.shoptime/assets/images/timeStamp_white.png
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.jsx
@@ -1,14 +1,24 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';

 import { useDispatch } from 'react-redux';

 import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';

+import closeImg from '../../../assets/images/close_btn_white.png';
 import { getSearch } from '../../actions/searchActions';
 import TFullPopup from '../../components/TFullPopup/TFullPopup';
-import TInput, { ICONS, KINDS } from '../../components/TInput/TInput';
+import TInput, {
+  ICONS,
+  KINDS,
+} from '../../components/TInput/TInput';
 import { useSearchHistory } from '../../hooks/useSearchHistory';
 import css from './SearchInputOverlay.module.less';

@@ -146,7 +156,9 @@ const SearchInputOverlay = ({
            // 커서를 마지막 위치로 이동 (텍스트 선택 대신)
            const length = input.value.length;
            input.setSelectionRange(length, length);
-            console.log('[SearchInputOverlay] 📍 Input focused and ready for input');
+            console.log(
+              '[SearchInputOverlay] 📍 Input focused and ready for input'
+            );
          }
        }
      }, 50); // Overlay 애니메이션 고려한 최소 지연
@@ -200,17 +212,22 @@ const SearchInputOverlay = ({
              const keyword = typeof item === 'object' ? item.query : item;

              return (
-                <SpottableKeyword
-                  key={`recentResult-${index}`}
-                  className={css.keywordButton}
-                  onClick={() => {
-                    // 검색어 설정 후 검색 실행
-                    handleClick(keyword);
-                  }}
-                  spotlightId={`recent-Resultkeyword-${index}`}
-                >
-                  {keyword}
-                </SpottableKeyword>
+                <div className={css.keywordBox}>
+                  <SpottableKeyword
+                    key={`recentResult-${index}`}
+                    className={css.keywordButton}
+                    onClick={() => {
+                      // 검색어 설정 후 검색 실행
+                      handleClick(keyword);
+                    }}
+                    spotlightId={`recent-Resultkeyword-${index}`}
+                  >
+                    {keyword}
+                  </SpottableKeyword>
+                  <SpottableKeyword className={css.closeBtn}>
+                    <img src={closeImg} className={css.closeBtnImg} />
+                  </SpottableKeyword>
+                </div>
              );
            })}
          </div>
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.module.less
@@ -1,4 +1,5 @@
-@import "../../style/CommonStyle.module.less";
+@import '../../style/CommonStyle.module.less';
+@import '../../style/utils.module.less';

 // TFullPopup wrapper - TFullPopup의 기본 스타일을 override하지 않음
 .tFullPopupWrapper {
@@ -89,20 +90,22 @@
    margin: 0 !important;
    width: calc(100% - 121px) !important;
    height: 90px !important;
-    padding: 20px 40px 20px 0px !important;
+    line-height: 90px;
+    padding: 0px 40px 0px 0px !important;
    border: none !important;
    background-color: #fff !important;
-
+    .elip(1);
    input {
      text-align: left;
      color: black;
      font-size: 42px;
-      font-family: "LG Smart UI";
+      font-family: 'LG Smart UI';
      font-weight: 700;
      line-height: 42px;
      outline: none;
      border: none;
      background: transparent;
+      width: 100%;
    }

    * {
@@ -124,46 +127,81 @@
  z-index: 2;
  display: flex;
  flex-direction: column;
-  justify-content: center;
-  .keywordButton {
-    height: 64px;
-    background: white;
-    border-radius: 100px;
-    border: 5px solid #dadada;
-    padding: 0 20px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    display: inline-flex;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    width: fit-content;
+  justify-content: flex-start;
+  .keywordBox {
+    display: flex;
+    align-items: center;
    margin-bottom: 16px; // bubble들 사이의 마진
-    > * {
-      margin-bottom: 5px;
+    .keywordButton {
+      height: 64px;
+      background: white;
+      border-radius: 100px;
+      border: 5px solid #fff;
+      padding: 0 20px 0 50px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      display: inline-flex;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      width: fit-content;
+      > * {
+        margin-bottom: 5px;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }

-      &:last-child {
-        margin-bottom: 0;
+      color: black;
+      font-size: 24px;
+      font-family: 'LG Smart UI';
+      font-weight: 700;
+      line-height: 24px;
+      text-align: center;
+      word-wrap: break-word;
+      //timeStamp
+      background-image: url(../../../assets/images/timeStamp_gray.png);
+      background-position: 15px center;
+      background-repeat: no-repeat;
+      background-size: 26px 25px;
+      &:hover {
+        background: @PRIMARY_COLOR_RED;
+        border: 5px solid @PRIMARY_COLOR_RED;
+        color: #fff;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        //timeStamp
+        background-image: url(../../../assets/images/timeStamp_white.png);
+        background-position: 15px center;
+        background-repeat: no-repeat;
+        background-size: 26px 25px;
+      }
+
+      &:focus {
+        background: @PRIMARY_COLOR_RED;
+        border: 5px solid @PRIMARY_COLOR_RED;
+        box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+        outline: none;
+        color: #fff;
+        //timeStamp
+        background-image: url(../../../assets/images/timeStamp_white.png);
+        background-position: 15px center;
+        background-repeat: no-repeat;
+        background-size: 26px 25px;
      }
    }
+    .closeBtn {
+      width: 50px;
+      height: 50px;
+      background: transparent;
+      margin-left: 10px;
+      .closeBtnImg {
+        width: 100%;
+      }

-    color: black;
-    font-size: 24px;
-    font-family: "LG Smart UI";
-    font-weight: 700;
-    line-height: 24px;
-    text-align: center;
-    word-wrap: break-word;
-
-    &:hover {
-      border-color: @PRIMARY_COLOR_RED;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    &:focus {
-      border: 5px solid @PRIMARY_COLOR_RED;
-      box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
-      outline: none;
+      &:focus {
+        background: #c70850;
+        border-radius: 100%;
+      }
    }
  }
 }
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less
@@ -113,6 +113,7 @@
        align-items: center;
        z-index: 1001;
        position: relative;
+
        &:focus {
          outline: none; // rely on wrapper focus state for highlight
        }
@@ -121,10 +122,11 @@
          margin: 0 !important;
          width: calc(100% - 121px) !important;
          height: 90px !important;
-          padding: 20px 40px 20px 0px !important;
+          line-height: 90px;
+          padding: 0px 40px 0px 0px !important;
          border: none !important;
          background-color: #fff !important;
-
+          .elip(1);
          input {
            text-align: left;
            color: black;
--- a/com.twin.app.shoptime/src/views/SearchPanel/TInput/TInput.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/TInput/TInput.module.less
@@ -1,5 +1,5 @@
-@import "../../../style/CommonStyle.module.less";
-@import "../../../style/utils.module.less";
+@import '../../../style/CommonStyle.module.less';
+@import '../../../style/utils.module.less';

 .container {
  width: fit-content;
@@ -62,7 +62,7 @@
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
-    background-image: url("../../../../assets/images/searchpanel/ico_search_submit.png");
+    background-image: url('../../../../assets/images/searchpanel/ico_search_submit.png');

    &:focus {
      width: 42px;
@@ -81,7 +81,7 @@
    }

    &:focus {
-      outline: 2px solid #C70850;
+      outline: 2px solid #c70850;
      outline-offset: 2px;
      border-radius: 50px;
    }
--- a/com.twin.app.shoptime/src/views/SearchPanel/TInput/TInputSimple.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/TInput/TInputSimple.module.less
@@ -1,5 +1,5 @@
-@import "../../../style/CommonStyle.module.less";
-@import "../../../style/utils.module.less";
+@import '../../../style/CommonStyle.module.less';
+@import '../../../style/utils.module.less';

 .container {
  width: fit-content;
@@ -16,7 +16,7 @@

  // ✨ [Phase 6] 포커스 상태 스타일
  &:focus {
-    outline: 2px solid #C70850;
+    outline: 2px solid #c70850;
    outline-offset: 2px;
    border-radius: 50px;
  }
@@ -67,7 +67,7 @@
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
-    background-image: url("../../../../assets/images/searchpanel/ico_search_submit.png");
+    background-image: url('../../../../assets/images/searchpanel/ico_search_submit.png');

    &:focus {
      width: 42px;
@@ -84,11 +84,11 @@
      font-family: @baseFont;
      font-size: 42px;
      font-weight: 700;
-      line-height: 42px;
+      line-height: 90px;
      white-space: nowrap; // 한 줄 표시
      overflow: hidden; // 넘치는 부분 숨김
      text-overflow: ellipsis; // 넘치면 ... 표시
-
+      width: 100%;
      // placeholder 효과 (텍스트가 없을 때)
      &:empty::before {
        content: attr(data-placeholder);
@@ -98,7 +98,7 @@
    }

    &:focus {
-      outline: 2px solid #C70850;
+      outline: 2px solid #c70850;
      outline-offset: 2px;
      border-radius: 50px;
    }
--- a/com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less
@@ -1,5 +1,6 @@
 // src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less
-@import "../../../style/CommonStyle.module.less";
+@import '../../../style/CommonStyle.module.less';
+@import '../../../style/utils.module.less';

 // TFullPopup wrapper - TFullPopup의 기본 스타일을 override하지 않음

@@ -136,10 +137,11 @@
    margin: 0 !important;
    width: calc(100% - 121px) !important;
    height: 90px !important;
-    padding: 20px 40px 20px 0px !important;
+    padding: 0px 40px 0px 0px !important;
+    line-height: 90px;
    border: none !important;
    background-color: #fff !important;
-
+    .elip(1);
    // 내부 요소들의 포커스 제거 (TInputSimple 구성요소 포함)
    * {
      outline: none !important;
@@ -154,23 +156,23 @@
    }
  }

-    // 검색 아이콘 스타일
-    .searchIcon {
-      width: 41px;
-      height: 41px;
-      position: relative;
+  // 검색 아이콘 스타일
+  .searchIcon {
+    width: 41px;
+    height: 41px;
+    position: relative;

-      &::before {
-        content: '';
-        width: 36.27px;
-        height: 36.27px;
-        position: absolute;
-        left: 1.95px;
-        top: 1.95px;
-        border: 3.9px solid black;
-        border-radius: 50%;
-      }
+    &::before {
+      content: '';
+      width: 36.27px;
+      height: 36.27px;
+      position: absolute;
+      left: 1.95px;
+      top: 1.95px;
+      border: 3.9px solid black;
+      border-radius: 50%;
    }
+  }
 }

 .microphoneButton {
@@ -215,8 +217,6 @@
    outline: none;
  }

-  
-
  // active 상태 (음성 입력 모드 - 항상 빨간색)
  &.active {
    .microphoneCircle {
@@ -297,8 +297,8 @@
  // active 상태 (음성 입력 모드 - 블루 색상)
  &.active {
    .microphoneCircle {
-      background-color: #4A90E2;
-      border-color: #4A90E2;
+      background-color: #4a90e2;
+      border-color: #4a90e2;
      box-shadow: 0 0 22px 0 rgba(74, 144, 226, 0.5);

      .microphoneIcon {
@@ -309,7 +309,7 @@

  &.active.focused {
    .microphoneCircle {
-      background-color: #4A90E2;
+      background-color: #4a90e2;
      border-color: white;
      box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
    }
@@ -389,7 +389,7 @@
  max-width: 480px; // 430px → 480px
  max-height: 400px; // 350px → 400px
  overflow-y: auto;
-  font-family: "LG Smart";
+  font-family: 'LG Smart';
  border: 2px solid rgba(255, 255, 255, 0.3); // 더 밝은 테두리
  z-index: 10006; // 가장 높은 z-index
  pointer-events: auto; // 마우스 이벤트 허용
@@ -399,11 +399,11 @@
 .eventDebugHeader {
  font-weight: 700; // bold → 700
  margin-bottom: 16px; // 14px → 16px
-  border-bottom: 3px solid #FFD700; // 흰색 → 금색
+  border-bottom: 3px solid #ffd700; // 흰색 → 금색
  padding-bottom: 12px; // 10px → 12px
  font-size: 24px; // 22px → 24px
-  color: #FFD700; // 금색으로 더 눈에 띄게
-  font-family: "LG Smart";
+  color: #ffd700; // 금색으로 더 눈에 띄게
+  font-family: 'LG Smart';
  letter-spacing: 0.5px; // 글자 간격
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); // 텍스트 그림자로 선명하게
 }
@@ -431,17 +431,17 @@
    color: rgba(255, 255, 255, 0.75); // 0.6 → 0.75 (더 밝게)
    font-size: 18px; // 16px → 18px (더 크게)
    margin-bottom: 6px; // 4px → 6px
-    font-family: "Courier New", monospace;
+    font-family: 'Courier New', monospace;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); // 그림자로 선명함
  }

  .logEvent {
-    color: #FFE082; // 흰색 → 밝은 노란색
+    color: #ffe082; // 흰색 → 밝은 노란색
    font-weight: 700; // bold → 700 (더 굵게)
    font-size: 20px; // 18px → 20px
-    font-family: "LG Smart";
+    font-family: 'LG Smart';
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); // 그림자
    letter-spacing: 0.5px; // 글자 간격
  }
@@ -453,45 +453,45 @@
    word-break: break-all;
    padding-left: 12px; // 10px → 12px
    border-left: 3px solid rgba(255, 200, 100, 0.6); // 더 밝은 테두리
-    font-family: "LG Smart";
+    font-family: 'LG Smart';
    font-weight: 500; // font-weight 추가
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); // 그림자
  }

  // 이벤트 타입별 색상 (더 밝고 선명하게)
  &.success .logEvent {
-    color: #66BB6A; // 더 밝은 초록색
+    color: #66bb6a; // 더 밝은 초록색
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  }
  &.success .logDetails {
-    border-left-color: #66BB6A;
+    border-left-color: #66bb6a;
    color: rgba(255, 255, 255, 0.98); // 더 밝게
  }

  &.error .logEvent {
-    color: #EF5350; // 더 밝은 빨강색
+    color: #ef5350; // 더 밝은 빨강색
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  }
  &.error .logDetails {
-    border-left-color: #EF5350;
+    border-left-color: #ef5350;
    color: rgba(255, 255, 255, 0.98); // 더 밝게
  }

  &.warning .logEvent {
-    color: #FFA726; // 더 밝은 주황색
+    color: #ffa726; // 더 밝은 주황색
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  }
  &.warning .logDetails {
-    border-left-color: #FFA726;
+    border-left-color: #ffa726;
    color: rgba(255, 255, 255, 0.98); // 더 밝게
  }

  &.info .logEvent {
-    color: #42A5F5; // 더 밝은 파란색
+    color: #42a5f5; // 더 밝은 파란색
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  }
  &.info .logDetails {
-    border-left-color: #42A5F5;
+    border-left-color: #42a5f5;
    color: rgba(255, 255, 255, 0.98); // 더 밝게
  }
 }
@@ -501,7 +501,7 @@
  font-style: italic;
  text-align: center;
  padding: 30px 0; // 20px → 30px
-  font-family: "LG Smart";
+  font-family: 'LG Smart';
  font-size: 18px; // 명시적 크기 지정
  font-weight: 500;
 }
@@ -562,8 +562,8 @@
  }

  &.active {
-    background: #FFB81C; // 활성화 상태 (노란색)
-    border-color: #FFB81C;
+    background: #ffb81c; // 활성화 상태 (노란색)
+    border-color: #ffb81c;
    box-shadow: 0 0 22px 0 rgba(255, 184, 28, 0.5);

    .debugToggleIcon {
@@ -580,8 +580,12 @@
 }

@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }

 // ============================================================
@@ -603,8 +607,12 @@
 }

@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }

 // ============================================================
@@ -622,7 +630,7 @@
  flex-direction: column;
  cursor: auto;
  pointer-events: auto;
-  font-family: "LG Smart", Arial, sans-serif;
+  font-family: 'LG Smart', Arial, sans-serif;
  color: white;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
  animation: slideUp 0.3s ease;
@@ -657,7 +665,7 @@
 .dashboardTitle {
  font-size: 36px; // 32px → 36px (더 크게)
  font-weight: 900; // bold → 900 (더 굵게)
-  color: #FFB81C; // Shoptime 브랜드 색상
+  color: #ffb81c; // Shoptime 브랜드 색상
  letter-spacing: 0.5px;
 }

@@ -714,7 +722,7 @@
    margin: 0 0 16px 0;
    font-size: 28px; // 24px → 28px (더 크게)
    font-weight: 900; // bold → 900 (더 굵게)
-    color: #4CAF50;
+    color: #4caf50;
    border-bottom: 2px solid rgba(76, 175, 80, 0.3);
    padding-bottom: 12px;
  }
@@ -757,14 +765,14 @@
  }

  .stateValue {
-    color: #2196F3;
+    color: #2196f3;
    font-weight: 700; // 500 → 700 (더 굵게)
    word-break: break-all;
    max-width: 60%;
    font-size: 20px; // 16px → 20px (더 크게)

    &.active {
-      color: #4CAF50;
+      color: #4caf50;
    }
  }
 }
@@ -808,7 +816,7 @@
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 14px; // 12px → 14px
-    color: #4CAF50;
+    color: #4caf50;
    font-family: monospace;
    font-size: 20px; // 16px → 20px (더 크게)
    font-weight: 700; // 굵게 추가
@@ -824,10 +832,10 @@
 .errorBlock {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
-  border-left: 4px solid #F44336;
+  border-left: 4px solid #f44336;
  padding: 14px; // 12px → 14px
  border-radius: 4px;
-  color: #FF6B6B;
+  color: #ff6b6b;
  font-size: 21px; // 17px → 21px (더 크게)
  font-weight: 700; // 굵게 추가
  line-height: 1.6; // 1.5 → 1.6
@@ -872,10 +880,18 @@
    background: rgba(255, 255, 255, 0.03);
  }

-  &.success { border-left: 3px solid #4CAF50; }
-  &.error { border-left: 3px solid #F44336; }
-  &.warning { border-left: 3px solid #FF9800; }
-  &.info { border-left: 3px solid #2196F3; }
+  &.success {
+    border-left: 3px solid #4caf50;
+  }
+  &.error {
+    border-left: 3px solid #f44336;
+  }
+  &.warning {
+    border-left: 3px solid #ff9800;
+  }
+  &.info {
+    border-left: 3px solid #2196f3;
+  }
 }

 .timelineIndex {