[251022] feat: HowAboutThese-3

🕐 커밋 시간: 2025. 10. 22. 21:31:35 📊 변경 통계: • 총 파일: 3개 • 추가: +65줄 • 삭제: -36줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.module.less ~ com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx ~ com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.module.less 🔧 주요 변경 내용: • 소규모 기능 개선 • 코드 정리 및 최적화
2025-10-22 21:31:37 +09:00
parent 8f00bc24cb
commit c60c97ccfd
3 changed files with 65 additions and 36 deletions
--- a/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.module.less
@@ -1,12 +1,13 @@
+@import "../../../style/CommonStyle.module.less";
+
 .container {
  width: 100%;
  height: 860px;
-  padding: 30px 60px;
+  padding: 32px 60px; // Increased top/bottom padding from 30px to 32px to accommodate 2px focus border
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
-  gap: 19px;
  background: linear-gradient(
    360deg,
    rgba(221.25, 221.25, 221.25, 0) 0%,
@@ -28,6 +29,7 @@
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
+  margin-bottom: 19px;
 }

 .headerLeft {
@@ -67,7 +69,6 @@
  display: inline-flex;
  justify-content: center;
  align-items: center;
-  gap: 10px;
 }

 .title {
@@ -88,7 +89,10 @@
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
-  gap: 10px;
+}
+
+.headerRight > * + * {
+  margin-top: 10px;
 }

 .seeMoreButton {
@@ -105,8 +109,9 @@
  transition: background-color 0.2s ease;

  &:focus {
-    outline: 2px solid #00a0e9;
+    outline: 2px solid @PRIMARY_COLOR_RED;
    outline-offset: 2px;
+    box-shadow: 0 0 22px rgba(0, 0, 0, 0.5);
  }

  &:hover {
@@ -131,10 +136,13 @@
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
-  gap: 15px;
  overflow: hidden;
 }

+.bubblesContainer > * + * {
+  margin-top: 15px;
+}
+
 /* Primary Bubble (Pink) */
 .bubblePrimary {
  height: 64px;
@@ -148,15 +156,14 @@
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
-  gap: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;

  &:focus {
-    outline: 2px solid #00a0e9;
+    outline: 2px solid @PRIMARY_COLOR_RED;
    outline-offset: 2px;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0 0 0 2px #00a0e9;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0 0 0 2px @PRIMARY_COLOR_RED, 0 0 22px rgba(0, 0, 0, 0.5);
  }

  &:hover {
@@ -167,6 +174,10 @@
  &:active {
    transform: translateY(0);
  }
+
+  > * + * {
+    margin-top: 20px;
+  }
 }

 /* Secondary Bubbles (White) */
@@ -180,14 +191,14 @@
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
-  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;

  &:focus {
-    outline: 2px solid #00a0e9;
+    outline: 2px solid @PRIMARY_COLOR_RED;
    outline-offset: 2px;
+    box-shadow: 0 0 22px rgba(0, 0, 0, 0.5);
  }

  &:hover {
@@ -199,6 +210,10 @@
  &:active {
    transform: translateY(0);
  }
+
+  > * + * {
+    margin-top: 10px;
+  }
 }

 .bubbleText {
--- a/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx
@@ -7,11 +7,18 @@ import Spottable from '@enact/spotlight/Spottable';

 import { getShopperHouseSearch } from '../../../actions/searchActions';
 import icShoptime from '../../../../assets/images/icons/ic-shoptime.png';
+import TButton from '../../../components/TButton/TButton.jsx';
 import css from './HowAboutThese.small.module.less';

 const SpottableBubble = Spottable('div');
 const SpottableSeeMoreButton = Spottable('div');

+const Bubble = ({ query, onClick }) => (
+  <SpottableBubble className={css.bubble} onClick={() => onClick(query)}>
+    <div className={css.bubbleText}>{query}</div>
+  </SpottableBubble>
+);
+
 const HowAboutTheseSmall = ({ relativeQueries = [], onQueryClick, onSeeMoreClick }) => {
  const dispatch = useDispatch();

@@ -75,30 +82,26 @@ const HowAboutTheseSmall = ({ relativeQueries = [], onQueryClick, onSeeMoreClick
      {/* Bubbles Section */}
      <div className={css.bubblesContainer}>
        {displayQueries.map((query, index) => (
-          <SpottableBubble
+          <Bubble
            key={`query-${index}`}
-            className={css.bubble}
-            onClick={() => handleQueryClick(query)}
-          >
-            <div className={css.bubbleText}>{query}</div>
-          </SpottableBubble>
+            query={query}
+            onClick={handleQueryClick}
+          />
        ))}

        {/* Fade 효과를 위한 추가 요소 (피그마 디자인 참고) */}
-        {queries.length > 2 && (
+        {/* {queries.length > 2 && (
          <div className={css.fadeContainer}>
            <div className={css.fadeOverlay} />
-            <SpottableBubble className={css.bubble}>
-              <div className={css.bubbleText}>{queries[2]}</div>
-            </SpottableBubble>
+            <Bubble query={queries[2]} onClick={handleQueryClick} />
          </div>
-        )}
+        )} */}
      </div>

      {/* See More Button */}
-      <SpottableSeeMoreButton className={css.seeMoreButton} onClick={handleSeeMoreClick}>
+      <TButton className={css.seeMoreButton} size="small" onClick={handleSeeMoreClick}>
        <div className={css.seeMoreText}>SEE MORE</div>
-      </SpottableSeeMoreButton>
+      </TButton>
    </div>
  );
 };
--- a/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.module.less
@@ -1,12 +1,17 @@
+@import "../../../style/CommonStyle.module.less";
+
 .container {
  width: 100%;
  height: 100%;
-  padding: 30px 60px; // 상하 30px, 좌우 60px
+  padding: 32px 60px; // 상하 32px (30px + 2px for focus border), 좌우 60px
  background: #DDDDDD;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
-  gap: 19px;
+}
+
+.container > * + * {
+  margin-left: 19px;
 }

 /* Header Section */
@@ -40,7 +45,6 @@
  display: inline-flex;
  justify-content: center;
  align-items: center;
-  gap: 10px;
  white-space: nowrap; // ⭐ 1줄로 표시
 }

@@ -60,33 +64,37 @@
  display: flex; // horizontal layout
  justify-content: flex-start;
  align-items: flex-start;
-  gap: 15px;
+}
+
+.bubblesContainer > * + * {
+  margin-left: 15px;
 }

 .bubble {
-  padding: 20px;
+  padding: 16px;
  background: white;
  border-radius: 100px;
-  outline: 1px solid #DADADA;
-  outline-offset: -1px;
+  border: 4px solid #DADADA;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
-  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0; // 버블이 줄어들지 않도록

  &:focus {
-    outline: 2px solid #00a0e9;
-    outline-offset: 2px;
+    border: 4px solid @PRIMARY_COLOR_RED;
  }

  &:hover {
    background: #f8f8f8;
    transform: translateY(-1px);
  }
+
+  > * + * {
+    margin-top: 10px;
+  }
 }

 .fadeContainer {
@@ -122,7 +130,9 @@
  font-family: 'LG Smart UI', sans-serif;
  font-weight: 700;
  line-height: 24px;
-  word-wrap: break-word;
+  white-space: nowrap;  // ✨ 텍스트를 한 줄로 유지
+  text-overflow: ellipsis;  // ✨ 넘치는 부분 "..." 표시
+  overflow: hidden;  // ✨ 넘친 부분 숨김
 }

 /* See More Button */
@@ -139,8 +149,9 @@
  flex-shrink: 0; // 고정 너비 유지

  &:focus {
-    outline: 2px solid #00a0e9;
+    outline: 2px solid @PRIMARY_COLOR_RED;
    outline-offset: 2px;
+    box-shadow: 0 0 22px rgba(0, 0, 0, 0.5);
  }

  &:hover {