From 720314b02c7d51244a4f8e07bf24a192dc312053 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Wed, 29 Oct 2025 12:43:01 +0900 Subject: [PATCH] =?UTF-8?q?[=EA=B2=80=EC=83=89]=20=EC=9D=B8=ED=92=8B?= =?UTF-8?q?=EC=B0=BD=20=EB=A7=90=EC=A4=84=EC=9E=84=ED=91=9C=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20=EB=B0=8F=20=EC=B5=9C=EA=B7=BC=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=EC=96=B4=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 인풋창 말줄임표 적용 - 최근 검색어 디자인에 맞춰 수정.(삭제부분에 대해서는 추가작업 해야함) --- .../assets/images/close_btn_white.png | Bin 0 -> 631 bytes .../assets/images/timeStamp_gray.png | Bin 0 -> 2092 bytes .../assets/images/timeStamp_white.png | Bin 0 -> 1404 bytes .../views/SearchPanel/SearchInputOverlay.jsx | 47 +++++-- .../SearchInputOverlay.module.less | 116 +++++++++------ .../SearchPanel/SearchPanel.new.module.less | 6 +- .../SearchPanel/TInput/TInput.module.less | 8 +- .../TInput/TInputSimple.module.less | 14 +- .../VoiceInputOverlay.module.less | 132 ++++++++++-------- 9 files changed, 198 insertions(+), 125 deletions(-) create mode 100644 com.twin.app.shoptime/assets/images/close_btn_white.png create mode 100644 com.twin.app.shoptime/assets/images/timeStamp_gray.png create mode 100644 com.twin.app.shoptime/assets/images/timeStamp_white.png diff --git a/com.twin.app.shoptime/assets/images/close_btn_white.png b/com.twin.app.shoptime/assets/images/close_btn_white.png new file mode 100644 index 0000000000000000000000000000000000000000..ab2ecf383f5eb1ff14c456556b0104e7a634691a GIT binary patch literal 631 zcmeAS@N?(olHy`uVBq!ia0vp^(?FPm4M^HB7Cr(}oCO|{#S9FJ79h;%I?XTvD9BhG zBXL$Kx1%$1xA7&zyI2GN?55($1m$ZEwTApe2a z5!F?bE7E}cnduJ-4I!@BVgnwKG$m% z0-X_xyS9Hc1}6I!SENF5z(Hq^gO_^g`3zV#G4FbdOD+`Z{Q- z+M`WtVls8zO3lT>7p?gb#lLIiig#>}s(=B#{phjy_sb__)NlOg9g!o0E8c+OD=t|7 W<8x8$J@-}&q{`FP&t;ucLK6VIgZJ_P literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/images/timeStamp_gray.png b/com.twin.app.shoptime/assets/images/timeStamp_gray.png new file mode 100644 index 0000000000000000000000000000000000000000..47c6219a4e72b660e1bfeb8b57178e4ee5b76652 GIT binary patch literal 2092 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 WCAN~9tl`xF0000 zK{^Lijs6zi_lAAgb$oWIQ;4!}ljuaSznAS%h4e+dK;>a13AP^7P;FE0X&2=c5Cc!qMi#_x`%Hyig>cne-4%Z!vt?O^_T8yf4C@-g*`Y_ z`iK*TrVHp6x(^TnSk8F7F!Q*mUy?NPno3Z=mYMk4{@_eF>23AzoF=$$ zX6|s;Mm=oS{Gjb|IhZMz&>@&`@Vcz|rY+nTF!KwR&rjyqS-8Flr^8ejPCCeMwaVVK%SM@(l;RN(6Y-yCtv8?{b zB~%Yf?oHe1YvtOx<0#@NobDJ*EbfNafs#3P5)Sz31uyXNcx8?qovap4Fd1k2=x6{t z=Gd9XiJpZl70y}Cgqs6*n8vSYvlEWmmLd`HW+fbvjCi$hsdNA|w6op*OfB9~D;MFS z8K}pKpJ96O1ar(;H~|q!L_Ds{9sQ|=Tj&Y$)7pgTq>4G|1`@zgyc~Lf{1l9eJCU2MSU@6J#LJ;4$j>3!a3^NS zlR+XF#LJ;4$TwBQwXJ}HIXM}xBU<9+FaT8Zj7`|vOyuL7$RHuKc!SzsREz64a+gBL zko{b|E(92AJ|NnswBN%*K>M=M+^4Wh%eO!tc?~lM?Hz*u>{C?hK-oeu@s%_j4$k4{ zZLPu!OTn{k@6f)6V+(yjx0N+v);>i9?Q7G9t*p_N+@qc8*0_6uZVUQy2mz`^yEgi} zb_7thXiTz z5d}^;@ieJFu`Tl2)Az!`4&IHiEc?bcwfXaOlqDjc5*BZXw_eSoPG$w5t{ z${-9SsCh4C%tk+|a82-h=V<|_-KQ_1d*^9_=8jO0`vMd1JpCVE=vWX?>)*Tp0000< KMNUMnLSTZsNtV?B literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.jsx index 69791018..e62258b3 100644 --- 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 ( - { - // 검색어 설정 후 검색 실행 - handleClick(keyword); - }} - spotlightId={`recent-Resultkeyword-${index}`} - > - {keyword} - +
+ { + // 검색어 설정 후 검색 실행 + handleClick(keyword); + }} + spotlightId={`recent-Resultkeyword-${index}`} + > + {keyword} + + + + +
); })} diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.module.less index 48124070..9d59533f 100644 --- 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%; + } } } } diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less index bdf941a8..de247ac8 100644 --- 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; diff --git a/com.twin.app.shoptime/src/views/SearchPanel/TInput/TInput.module.less b/com.twin.app.shoptime/src/views/SearchPanel/TInput/TInput.module.less index d31edea2..056fe6b7 100644 --- 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; } diff --git a/com.twin.app.shoptime/src/views/SearchPanel/TInput/TInputSimple.module.less b/com.twin.app.shoptime/src/views/SearchPanel/TInput/TInputSimple.module.less index a1c70085..a6be3678 100644 --- 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; } diff --git a/com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less b/com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less index f1cbfe61..7e5fdd51 100644 --- 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 {