optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 인풋창 말줄임표 적용
 - 최근 검색어 디자인에 맞춰 수정.(삭제부분에 대해서는 추가작업 해야함)
This commit is contained in:
junghoon86.park
2025-10-29 12:43:01 +09:00
parent 7a10ec25c3
commit 720314b02c
9 changed files with 198 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
com.twin.app.shoptime/assets/images/close_btn_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 631 B

BIN
com.twin.app.shoptime/assets/images/timeStamp_gray.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
com.twin.app.shoptime/assets/images/timeStamp_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

47
com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.jsx
View File

@@ -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 { useDispatch } from 'react-redux';
import Spotlight from '@enact/spotlight'; import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable'; import Spottable from '@enact/spotlight/Spottable';
import closeImg from '../../../assets/images/close_btn_white.png';
import { getSearch } from '../../actions/searchActions'; import { getSearch } from '../../actions/searchActions';
import TFullPopup from '../../components/TFullPopup/TFullPopup'; 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 { useSearchHistory } from '../../hooks/useSearchHistory';
import css from './SearchInputOverlay.module.less'; import css from './SearchInputOverlay.module.less';
@@ -146,7 +156,9 @@ const SearchInputOverlay = ({
// 커서를 마지막 위치로 이동 (텍스트 선택 대신) // 커서를 마지막 위치로 이동 (텍스트 선택 대신)
const length = input.value.length; const length = input.value.length;
input.setSelectionRange(length, 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 애니메이션 고려한 최소 지연 }, 50); // Overlay 애니메이션 고려한 최소 지연
@@ -200,17 +212,22 @@ const SearchInputOverlay = ({
const keyword = typeof item === 'object' ? item.query : item; const keyword = typeof item === 'object' ? item.query : item;
return ( return (
<SpottableKeyword <div className={css.keywordBox}>
key={`recentResult-${index}`} <SpottableKeyword
className={css.keywordButton} key={`recentResult-${index}`}
onClick={() => { className={css.keywordButton}
// 검색어 설정 후 검색 실행 onClick={() => {
handleClick(keyword); // 검색어 설정 후 검색 실행
}} handleClick(keyword);
spotlightId={`recent-Resultkeyword-${index}`} }}
> spotlightId={`recent-Resultkeyword-${index}`}
{keyword} >
</SpottableKeyword> {keyword}
</SpottableKeyword>
<SpottableKeyword className={css.closeBtn}>
<img src={closeImg} className={css.closeBtnImg} />
</SpottableKeyword>
</div>
); );
})} })}
</div> </div>

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

@@ -1,4 +1,5 @@
@import "../../style/CommonStyle.module.less"; @import '../../style/CommonStyle.module.less';
@import '../../style/utils.module.less';
// TFullPopup wrapper - TFullPopup의 기본 스타일을 override하지 않음 // TFullPopup wrapper - TFullPopup의 기본 스타일을 override하지 않음
.tFullPopupWrapper { .tFullPopupWrapper {
@@ -89,20 +90,22 @@
margin: 0 !important; margin: 0 !important;
width: calc(100% - 121px) !important; width: calc(100% - 121px) !important;
height: 90px !important; height: 90px !important;
padding: 20px 40px 20px 0px !important; line-height: 90px;
padding: 0px 40px 0px 0px !important;
border: none !important; border: none !important;
background-color: #fff !important; background-color: #fff !important;
.elip(1);
input { input {
text-align: left; text-align: left;
color: black; color: black;
font-size: 42px; font-size: 42px;
font-family: "LG Smart UI"; font-family: 'LG Smart UI';
font-weight: 700; font-weight: 700;
line-height: 42px; line-height: 42px;
outline: none; outline: none;
border: none; border: none;
background: transparent; background: transparent;
width: 100%;
} }
* { * {
@@ -124,46 +127,81 @@
z-index: 2; z-index: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
.keywordButton { .keywordBox {
height: 64px; display: flex;
background: white; align-items: center;
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;
margin-bottom: 16px; // bubble들 사이의 마진 margin-bottom: 16px; // bubble들 사이의 마진
> * { .keywordButton {
margin-bottom: 5px; 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 { color: black;
margin-bottom: 0; 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; &:focus {
font-size: 24px; background: #c70850;
font-family: "LG Smart UI"; border-radius: 100%;
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;
} }
} }
} }

6
com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less
View File

@@ -113,6 +113,7 @@
align-items: center; align-items: center;
z-index: 1001; z-index: 1001;
position: relative; position: relative;
&:focus { &:focus {
outline: none; // rely on wrapper focus state for highlight outline: none; // rely on wrapper focus state for highlight
} }
@@ -121,10 +122,11 @@
margin: 0 !important; margin: 0 !important;
width: calc(100% - 121px) !important; width: calc(100% - 121px) !important;
height: 90px !important; height: 90px !important;
padding: 20px 40px 20px 0px !important; line-height: 90px;
padding: 0px 40px 0px 0px !important;
border: none !important; border: none !important;
background-color: #fff !important; background-color: #fff !important;
.elip(1);
input { input {
text-align: left; text-align: left;
color: black; color: black;

8
com.twin.app.shoptime/src/views/SearchPanel/TInput/TInput.module.less
View File

@@ -1,5 +1,5 @@
@import "../../../style/CommonStyle.module.less"; @import '../../../style/CommonStyle.module.less';
@import "../../../style/utils.module.less"; @import '../../../style/utils.module.less';
.container { .container {
width: fit-content; width: fit-content;
@@ -62,7 +62,7 @@
top: 50%; top: 50%;
right: 30px; right: 30px;
transform: translateY(-50%); transform: translateY(-50%);
background-image: url("../../../../assets/images/searchpanel/ico_search_submit.png"); background-image: url('../../../../assets/images/searchpanel/ico_search_submit.png');
&:focus { &:focus {
width: 42px; width: 42px;
@@ -81,7 +81,7 @@
} }
&:focus { &:focus {
outline: 2px solid #C70850; outline: 2px solid #c70850;
outline-offset: 2px; outline-offset: 2px;
border-radius: 50px; border-radius: 50px;
} }

14
com.twin.app.shoptime/src/views/SearchPanel/TInput/TInputSimple.module.less
View File

@@ -1,5 +1,5 @@
@import "../../../style/CommonStyle.module.less"; @import '../../../style/CommonStyle.module.less';
@import "../../../style/utils.module.less"; @import '../../../style/utils.module.less';
.container { .container {
width: fit-content; width: fit-content;
@@ -16,7 +16,7 @@
// ✨ [Phase 6] 포커스 상태 스타일 // ✨ [Phase 6] 포커스 상태 스타일
&:focus { &:focus {
outline: 2px solid #C70850; outline: 2px solid #c70850;
outline-offset: 2px; outline-offset: 2px;
border-radius: 50px; border-radius: 50px;
} }
@@ -67,7 +67,7 @@
top: 50%; top: 50%;
right: 30px; right: 30px;
transform: translateY(-50%); transform: translateY(-50%);
background-image: url("../../../../assets/images/searchpanel/ico_search_submit.png"); background-image: url('../../../../assets/images/searchpanel/ico_search_submit.png');
&:focus { &:focus {
width: 42px; width: 42px;
@@ -84,11 +84,11 @@
font-family: @baseFont; font-family: @baseFont;
font-size: 42px; font-size: 42px;
font-weight: 700; font-weight: 700;
line-height: 42px; line-height: 90px;
white-space: nowrap; // 한 줄 표시 white-space: nowrap; // 한 줄 표시
overflow: hidden; // 넘치는 부분 숨김 overflow: hidden; // 넘치는 부분 숨김
text-overflow: ellipsis; // 넘치면 ... 표시 text-overflow: ellipsis; // 넘치면 ... 표시
width: 100%;
// placeholder 효과 (텍스트가 없을 때) // placeholder 효과 (텍스트가 없을 때)
&:empty::before { &:empty::before {
content: attr(data-placeholder); content: attr(data-placeholder);
@@ -98,7 +98,7 @@
} }
&:focus { &:focus {
outline: 2px solid #C70850; outline: 2px solid #c70850;
outline-offset: 2px; outline-offset: 2px;
border-radius: 50px; border-radius: 50px;
} }

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

@@ -1,5 +1,6 @@
// src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less // 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하지 않음 // TFullPopup wrapper - TFullPopup의 기본 스타일을 override하지 않음
@@ -136,10 +137,11 @@
margin: 0 !important; margin: 0 !important;
width: calc(100% - 121px) !important; width: calc(100% - 121px) !important;
height: 90px !important; height: 90px !important;
padding: 20px 40px 20px 0px !important; padding: 0px 40px 0px 0px !important;
line-height: 90px;
border: none !important; border: none !important;
background-color: #fff !important; background-color: #fff !important;
.elip(1);
// 내부 요소들의 포커스 제거 (TInputSimple 구성요소 포함) // 내부 요소들의 포커스 제거 (TInputSimple 구성요소 포함)
* { * {
outline: none !important; outline: none !important;
@@ -154,23 +156,23 @@
} }
} }
// 검색 아이콘 스타일 // 검색 아이콘 스타일
.searchIcon { .searchIcon {
width: 41px; width: 41px;
height: 41px; height: 41px;
position: relative; position: relative;
&::before { &::before {
content: ''; content: '';
width: 36.27px; width: 36.27px;
height: 36.27px; height: 36.27px;
position: absolute; position: absolute;
left: 1.95px; left: 1.95px;
top: 1.95px; top: 1.95px;
border: 3.9px solid black; border: 3.9px solid black;
border-radius: 50%; border-radius: 50%;
}
} }
}
} }
.microphoneButton { .microphoneButton {
@@ -215,8 +217,6 @@
outline: none; outline: none;
} }
// active 상태 (음성 입력 모드 - 항상 빨간색) // active 상태 (음성 입력 모드 - 항상 빨간색)
&.active { &.active {
.microphoneCircle { .microphoneCircle {
@@ -297,8 +297,8 @@
// active 상태 (음성 입력 모드 - 블루 색상) // active 상태 (음성 입력 모드 - 블루 색상)
&.active { &.active {
.microphoneCircle { .microphoneCircle {
background-color: #4A90E2; background-color: #4a90e2;
border-color: #4A90E2; border-color: #4a90e2;
box-shadow: 0 0 22px 0 rgba(74, 144, 226, 0.5); box-shadow: 0 0 22px 0 rgba(74, 144, 226, 0.5);
.microphoneIcon { .microphoneIcon {
@@ -309,7 +309,7 @@
&.active.focused { &.active.focused {
.microphoneCircle { .microphoneCircle {
background-color: #4A90E2; background-color: #4a90e2;
border-color: white; border-color: white;
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
} }
@@ -389,7 +389,7 @@
max-width: 480px; // 430px → 480px max-width: 480px; // 430px → 480px
max-height: 400px; // 350px → 400px max-height: 400px; // 350px → 400px
overflow-y: auto; overflow-y: auto;
font-family: "LG Smart"; font-family: 'LG Smart';
border: 2px solid rgba(255, 255, 255, 0.3); // 더 밝은 테두리 border: 2px solid rgba(255, 255, 255, 0.3); // 더 밝은 테두리
z-index: 10006; // 가장 높은 z-index z-index: 10006; // 가장 높은 z-index
pointer-events: auto; // 마우스 이벤트 허용 pointer-events: auto; // 마우스 이벤트 허용
@@ -399,11 +399,11 @@
.eventDebugHeader { .eventDebugHeader {
font-weight: 700; // bold → 700 font-weight: 700; // bold → 700
margin-bottom: 16px; // 14px → 16px margin-bottom: 16px; // 14px → 16px
border-bottom: 3px solid #FFD700; // 흰색 → 금색 border-bottom: 3px solid #ffd700; // 흰색 → 금색
padding-bottom: 12px; // 10px → 12px padding-bottom: 12px; // 10px → 12px
font-size: 24px; // 22px → 24px font-size: 24px; // 22px → 24px
color: #FFD700; // 금색으로 더 눈에 띄게 color: #ffd700; // 금색으로 더 눈에 띄게
font-family: "LG Smart"; font-family: 'LG Smart';
letter-spacing: 0.5px; // 글자 간격 letter-spacing: 0.5px; // 글자 간격
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); // 텍스트 그림자로 선명하게 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 (더 밝게) color: rgba(255, 255, 255, 0.75); // 0.6 → 0.75 (더 밝게)
font-size: 18px; // 16px → 18px (더 크게) font-size: 18px; // 16px → 18px (더 크게)
margin-bottom: 6px; // 4px → 6px margin-bottom: 6px; // 4px → 6px
font-family: "Courier New", monospace; font-family: 'Courier New', monospace;
font-weight: 500; font-weight: 500;
letter-spacing: 0.3px; letter-spacing: 0.3px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); // 그림자로 선명함 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); // 그림자로 선명함
} }
.logEvent { .logEvent {
color: #FFE082; // 흰색 → 밝은 노란색 color: #ffe082; // 흰색 → 밝은 노란색
font-weight: 700; // bold → 700 (더 굵게) font-weight: 700; // bold → 700 (더 굵게)
font-size: 20px; // 18px → 20px font-size: 20px; // 18px → 20px
font-family: "LG Smart"; font-family: 'LG Smart';
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); // 그림자 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); // 그림자
letter-spacing: 0.5px; // 글자 간격 letter-spacing: 0.5px; // 글자 간격
} }
@@ -453,45 +453,45 @@
word-break: break-all; word-break: break-all;
padding-left: 12px; // 10px → 12px padding-left: 12px; // 10px → 12px
border-left: 3px solid rgba(255, 200, 100, 0.6); // 더 밝은 테두리 border-left: 3px solid rgba(255, 200, 100, 0.6); // 더 밝은 테두리
font-family: "LG Smart"; font-family: 'LG Smart';
font-weight: 500; // font-weight 추가 font-weight: 500; // font-weight 추가
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); // 그림자 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); // 그림자
} }
// 이벤트 타입별 색상 (더 밝고 선명하게) // 이벤트 타입별 색상 (더 밝고 선명하게)
&.success .logEvent { &.success .logEvent {
color: #66BB6A; // 더 밝은 초록색 color: #66bb6a; // 더 밝은 초록색
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
} }
&.success .logDetails { &.success .logDetails {
border-left-color: #66BB6A; border-left-color: #66bb6a;
color: rgba(255, 255, 255, 0.98); // 더 밝게 color: rgba(255, 255, 255, 0.98); // 더 밝게
} }
&.error .logEvent { &.error .logEvent {
color: #EF5350; // 더 밝은 빨강색 color: #ef5350; // 더 밝은 빨강색
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
} }
&.error .logDetails { &.error .logDetails {
border-left-color: #EF5350; border-left-color: #ef5350;
color: rgba(255, 255, 255, 0.98); // 더 밝게 color: rgba(255, 255, 255, 0.98); // 더 밝게
} }
&.warning .logEvent { &.warning .logEvent {
color: #FFA726; // 더 밝은 주황색 color: #ffa726; // 더 밝은 주황색
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
} }
&.warning .logDetails { &.warning .logDetails {
border-left-color: #FFA726; border-left-color: #ffa726;
color: rgba(255, 255, 255, 0.98); // 더 밝게 color: rgba(255, 255, 255, 0.98); // 더 밝게
} }
&.info .logEvent { &.info .logEvent {
color: #42A5F5; // 더 밝은 파란색 color: #42a5f5; // 더 밝은 파란색
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
} }
&.info .logDetails { &.info .logDetails {
border-left-color: #42A5F5; border-left-color: #42a5f5;
color: rgba(255, 255, 255, 0.98); // 더 밝게 color: rgba(255, 255, 255, 0.98); // 더 밝게
} }
} }
@@ -501,7 +501,7 @@
font-style: italic; font-style: italic;
text-align: center; text-align: center;
padding: 30px 0; // 20px → 30px padding: 30px 0; // 20px → 30px
font-family: "LG Smart"; font-family: 'LG Smart';
font-size: 18px; // 명시적 크기 지정 font-size: 18px; // 명시적 크기 지정
font-weight: 500; font-weight: 500;
} }
@@ -562,8 +562,8 @@
} }
&.active { &.active {
background: #FFB81C; // 활성화 상태 (노란색) background: #ffb81c; // 활성화 상태 (노란색)
border-color: #FFB81C; border-color: #ffb81c;
box-shadow: 0 0 22px 0 rgba(255, 184, 28, 0.5); box-shadow: 0 0 22px 0 rgba(255, 184, 28, 0.5);
.debugToggleIcon { .debugToggleIcon {
@@ -580,8 +580,12 @@
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% {
100% { transform: rotate(360deg); } transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
// ============================================================ // ============================================================
@@ -603,8 +607,12 @@
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
// ============================================================ // ============================================================
@@ -622,7 +630,7 @@
flex-direction: column; flex-direction: column;
cursor: auto; cursor: auto;
pointer-events: auto; pointer-events: auto;
font-family: "LG Smart", Arial, sans-serif; font-family: 'LG Smart', Arial, sans-serif;
color: white; color: white;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8); box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
animation: slideUp 0.3s ease; animation: slideUp 0.3s ease;
@@ -657,7 +665,7 @@
.dashboardTitle { .dashboardTitle {
font-size: 36px; // 32px → 36px (더 크게) font-size: 36px; // 32px → 36px (더 크게)
font-weight: 900; // bold → 900 (더 굵게) font-weight: 900; // bold → 900 (더 굵게)
color: #FFB81C; // Shoptime 브랜드 색상 color: #ffb81c; // Shoptime 브랜드 색상
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
@@ -714,7 +722,7 @@
margin: 0 0 16px 0; margin: 0 0 16px 0;
font-size: 28px; // 24px → 28px (더 크게) font-size: 28px; // 24px → 28px (더 크게)
font-weight: 900; // bold → 900 (더 굵게) font-weight: 900; // bold → 900 (더 굵게)
color: #4CAF50; color: #4caf50;
border-bottom: 2px solid rgba(76, 175, 80, 0.3); border-bottom: 2px solid rgba(76, 175, 80, 0.3);
padding-bottom: 12px; padding-bottom: 12px;
} }
@@ -757,14 +765,14 @@
} }
.stateValue { .stateValue {
color: #2196F3; color: #2196f3;
font-weight: 700; // 500 → 700 (더 굵게) font-weight: 700; // 500 → 700 (더 굵게)
word-break: break-all; word-break: break-all;
max-width: 60%; max-width: 60%;
font-size: 20px; // 16px → 20px (더 크게) font-size: 20px; // 16px → 20px (더 크게)
&.active { &.active {
color: #4CAF50; color: #4caf50;
} }
} }
} }
@@ -808,7 +816,7 @@
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px; border-radius: 4px;
padding: 14px; // 12px → 14px padding: 14px; // 12px → 14px
color: #4CAF50; color: #4caf50;
font-family: monospace; font-family: monospace;
font-size: 20px; // 16px → 20px (더 크게) font-size: 20px; // 16px → 20px (더 크게)
font-weight: 700; // 굵게 추가 font-weight: 700; // 굵게 추가
@@ -824,10 +832,10 @@
.errorBlock { .errorBlock {
background: rgba(244, 67, 54, 0.1); background: rgba(244, 67, 54, 0.1);
border: 1px solid rgba(244, 67, 54, 0.3); border: 1px solid rgba(244, 67, 54, 0.3);
border-left: 4px solid #F44336; border-left: 4px solid #f44336;
padding: 14px; // 12px → 14px padding: 14px; // 12px → 14px
border-radius: 4px; border-radius: 4px;
color: #FF6B6B; color: #ff6b6b;
font-size: 21px; // 17px → 21px (더 크게) font-size: 21px; // 17px → 21px (더 크게)
font-weight: 700; // 굵게 추가 font-weight: 700; // 굵게 추가
line-height: 1.6; // 1.5 → 1.6 line-height: 1.6; // 1.5 → 1.6
@@ -872,10 +880,18 @@
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
} }
&.success { border-left: 3px solid #4CAF50; } &.success {
&.error { border-left: 3px solid #F44336; } border-left: 3px solid #4caf50;
&.warning { border-left: 3px solid #FF9800; } }
&.info { border-left: 3px solid #2196F3; } &.error {
border-left: 3px solid #f44336;
}
&.warning {
border-left: 3px solid #ff9800;
}
&.info {
border-left: 3px solid #2196f3;
}
} }
.timelineIndex { .timelineIndex {