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

[선택약관] 선택약관 관련부분 스타일 수정

Browse Source 
1. 체크박스 호버시 주변 색노출 제거.
	2. 버튼부분 포커스시 outline 부분 변경.
This commit is contained in:
junghoon86.park
2025-09-17 16:00:13 +09:00
parent 8a06aa2113
commit f9af36a274
3 changed files with 73 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
com.twin.app.shoptime/src/components/TCheckBox/TCheckBoxSquare.module.less
View File

@@ -1,11 +1,9 @@
// src/components/TCheckBox/TCheckBoxSquare.module.less // src/components/TCheckBox/TCheckBoxSquare.module.less
@SQUARE_BORDER_DEFAULT: #CCCCCC; @SQUARE_BORDER_DEFAULT: #cccccc;
@SQUARE_BORDER_ACTIVE: #C70850; @SQUARE_BORDER_ACTIVE: #c70850;
@SQUARE_BG_SELECTED: #7A808D; @SQUARE_BG_SELECTED: #7a808d;
// @SQUARE_BG_SELECTED: #C70850; // @SQUARE_BG_SELECTED: #C70850;
;
.tCheckBoxSquare { .tCheckBoxSquare {
min-width: 45px !important; min-width: 45px !important;
min-height: 45px !important; min-height: 45px !important;
@@ -17,17 +15,19 @@
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
transition: background 0.15s, border 0.15s !important; transition:
background 0.15s,
border 0.15s !important;
&:hover, &:hover,
&:focus, &:focus,
&.focus { &.focus {
border-color: @SQUARE_BORDER_ACTIVE !important; border-color: @SQUARE_BORDER_ACTIVE !important;
border-width: 4px !important; // 🔥 포커스 시 굵은 테두리 border-width: 4px !important; // 🔥 포커스 시 굵은 테두리
} }
&::before { &::before {
content: ''; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@@ -53,7 +53,6 @@
border-color: @SQUARE_BORDER_ACTIVE !important; border-color: @SQUARE_BORDER_ACTIVE !important;
border-width: 4px !important; border-width: 4px !important;
background-color: @SQUARE_BG_SELECTED !important; background-color: @SQUARE_BG_SELECTED !important;
box-shadow: 0 0 0 4px fade(@SQUARE_BORDER_ACTIVE, 20%) !important;
&::before { &::before {
transform: translate(-50%, -70%) rotate(-45deg) scale(1); transform: translate(-50%, -70%) rotate(-45deg) scale(1);
} }

126
com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less
View File

@@ -11,18 +11,18 @@
// bottom: unset !important; // bottom: unset !important;
// transform: none !important; // transform: none !important;
// overflow: unset; // overflow: unset;
// > div { // > div {
// overflow: unset; // overflow: unset;
// } // }
// } // }
// // 다른 팝업들은 기존 TPopUp 방식 유지 // // 다른 팝업들은 기존 TPopUp 방식 유지
// &:not(:has(.src_components_TPopUp_TNewPopUp_optionalConfirm)) { // &:not(:has(.src_components_TPopUp_TNewPopUp_optionalConfirm)) {
// bottom: 50%; // bottom: 50%;
// transform: translateY(50%); // transform: translateY(50%);
// overflow: unset; // overflow: unset;
// > div { // > div {
// overflow: unset; // overflow: unset;
// } // }
@@ -184,7 +184,7 @@
&.optionPopup { &.optionPopup {
.default-style(); .default-style();
.optionInfo { .optionInfo {
width: 820px; width: 820px;
background-color: @BG_COLOR_01; background-color: @BG_COLOR_01;
@@ -225,7 +225,7 @@
background: @PRIMARY_COLOR_RED; background: @PRIMARY_COLOR_RED;
color: @COLOR_WHITE; color: @COLOR_WHITE;
} }
.optionImg { .optionImg {
width: 60px; width: 60px;
height: 60px; height: 60px;
@@ -248,7 +248,7 @@
&.optionScroll { &.optionScroll {
overflow-y: auto; overflow-y: auto;
} }
.selectedOption { .selectedOption {
box-sizing: border-box; box-sizing: border-box;
background: @COLOR_WHITE; background: @COLOR_WHITE;
@@ -256,7 +256,7 @@
border: 4px solid @PRIMARY_COLOR_RED; border: 4px solid @PRIMARY_COLOR_RED;
} }
} }
.optionButtonContainer { .optionButtonContainer {
margin: 30px 0 30px 0; margin: 30px 0 30px 0;
display: flex; display: flex;
@@ -266,7 +266,7 @@
&.eventBannerPopup { &.eventBannerPopup {
.default-style(); .default-style();
.eventBannerInfo { .eventBannerInfo {
width: 600px; width: 600px;
height: 510px; height: 510px;
@@ -277,7 +277,7 @@
font-weight: normal; font-weight: normal;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
> p > img { > p > img {
width: 600px; width: 600px;
height: 510px; height: 510px;
@@ -291,7 +291,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 50px; bottom: 50px;
> div { > div {
margin: 0 6px; margin: 0 6px;
min-width: 240px; min-width: 240px;
@@ -302,7 +302,7 @@
&.supportPopup { &.supportPopup {
.default-style(); .default-style();
.supportInfo { .supportInfo {
width: 960px; width: 960px;
height: 640px; height: 640px;
@@ -313,7 +313,7 @@
font-weight: normal; font-weight: normal;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
.supportButtonContainer { .supportButtonContainer {
position: absolute; position: absolute;
right: 0; right: 0;
@@ -332,7 +332,7 @@
&.couponPopup { &.couponPopup {
.default-style(); .default-style();
.couponInfo { .couponInfo {
width: 960px; width: 960px;
height: 640px; height: 640px;
@@ -343,7 +343,7 @@
font-weight: normal; font-weight: normal;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
.couponButtonContainer { .couponButtonContainer {
position: absolute; position: absolute;
right: 0; right: 0;
@@ -362,7 +362,7 @@
&.mobileSendPopup { &.mobileSendPopup {
.default-style(); .default-style();
.mobileSendInfo { .mobileSendInfo {
width: 960px; width: 960px;
height: 640px; height: 640px;
@@ -373,7 +373,7 @@
font-weight: normal; font-weight: normal;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
.mobileSendButtonContainer { .mobileSendButtonContainer {
position: absolute; position: absolute;
right: 0; right: 0;
@@ -392,7 +392,7 @@
&.qrPopup { &.qrPopup {
.default-style(); .default-style();
.qrInfo { .qrInfo {
width: 960px; width: 960px;
height: 640px; height: 640px;
@@ -404,7 +404,7 @@
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
} }
.qrButtonContainer { .qrButtonContainer {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -458,7 +458,7 @@
} }
} }
} }
.checkoutTermsButtonContainer { .checkoutTermsButtonContainer {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -481,7 +481,7 @@
&.scrollPopup { &.scrollPopup {
.default-style(); .default-style();
.scrollInfo { .scrollInfo {
width: 900px; width: 900px;
background-color: @BG_COLOR_01; background-color: @BG_COLOR_01;
@@ -492,7 +492,7 @@
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
} }
.scrollButtonContainer { .scrollButtonContainer {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -517,7 +517,7 @@
position: absolute; position: absolute;
right: 42px; right: 42px;
bottom: -330px; bottom: -330px;
.watchInfo { .watchInfo {
width: 1038px; width: 1038px;
height: 168px; height: 168px;
@@ -567,7 +567,7 @@
.elip(@clamp:1); .elip(@clamp:1);
} }
} }
.watchButtonContainer { .watchButtonContainer {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -613,7 +613,7 @@
text-align: center; text-align: center;
.flex(); .flex();
} }
.setPinCodeButtonContainer { .setPinCodeButtonContainer {
margin: 0 0 30px 0; margin: 0 0 30px 0;
display: flex; display: flex;
@@ -902,22 +902,22 @@
.default-style(); .default-style();
bottom: unset !important; bottom: unset !important;
transform: none !important; transform: none !important;
top: 20% !important; top: 20% !important;
// 기존 위치 스타일들... // 기존 위치 스타일들...
.optionalConfirmInfo { .optionalConfirmInfo {
width: 100vw; width: 100vw;
height: 198px; height: 198px;
background-color: #E6EBF0; background-color: #e6ebf0;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.30); box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.3);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
// gap: 15px; // gap: 15px;
.optionalConfirmContentContainer { .optionalConfirmContentContainer {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -927,7 +927,7 @@
box-sizing: border-box; box-sizing: border-box;
justify-content: center; justify-content: center;
// gap: 20px; // gap: 20px;
.optionalConfirmTextSection { .optionalConfirmTextSection {
// flex: 1; // 나머지 높이를 모두 차지 // flex: 1; // 나머지 높이를 모두 차지
height: 30px; height: 30px;
@@ -937,7 +937,7 @@
// border : 1px solid red; // border : 1px solid red;
margin-bottom: 20px; margin-bottom: 20px;
} }
.optionalConfirmButtonSection { .optionalConfirmButtonSection {
height: 60px; height: 60px;
// margin-top: 15px; // gap 대신 margin으로 간격 처리 // margin-top: 15px; // gap 대신 margin으로 간격 처리
@@ -951,10 +951,10 @@
width: 320px; width: 320px;
height: 60px; // 부모 높이(60px) 모두 사용 height: 60px; // 부모 높이(60px) 모두 사용
display: flex; display: flex;
align-items: center; // 수직 중앙 정렬 align-items: center; // 수직 중앙 정렬
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.optionalTermsButton { .optionalTermsButton {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
@@ -963,25 +963,25 @@
padding: 0 20px !important; padding: 0 20px !important;
margin: 0 !important; margin: 0 !important;
background: white !important; background: white !important;
border: 1px solid #CFCFCF !important; border: 1px solid #cfcfcf !important;
border-radius: 4px !important; border-radius: 4px !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: space-between !important; // 👈 flex-start → space-between 변경 justify-content: space-between !important; // 👈 flex-start → space-between 변경
flex-shrink: 0; flex-shrink: 0;
box-sizing: border-box !important; box-sizing: border-box !important;
// 포커스 스타일 // 포커스 스타일
&:focus { &:focus {
outline: 2px solid #C70850 !important; outline: 2px solid #c70850;
outline-offset: 1px !important; outline-offset: -1px;
} }
.optionalTermsTitle { .optionalTermsTitle {
height: 100%; height: 100%;
color: #1A1A1A; color: #1a1a1a;
font-size: 22px; font-size: 22px;
font-family: 'LG Smart UI'; font-family: "LG Smart UI";
font-weight: 600; font-weight: 600;
line-height: 22px; line-height: 22px;
white-space: nowrap; white-space: nowrap;
@@ -989,35 +989,35 @@
text-overflow: ellipsis; text-overflow: ellipsis;
flex: 1; flex: 1;
} }
// 👈 '>' 아이콘 스타일 추가 // 👈 '>' 아이콘 스타일 추가
.optionalTermsIcon { .optionalTermsIcon {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #1A1A1A; border: 2px solid #1a1a1a;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
margin-left: 8px; margin-left: 8px;
&::after { &::after {
content: '>'; content: ">";
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #1A1A1A; color: #1a1a1a;
} }
} }
} }
} }
.optionalConfirmRightButtonSection { .optionalConfirmRightButtonSection {
// width: 332px; // width: 332px;
height: 100%; // 부모 높이(60px) 모두 사용 height: 100%; // 부모 높이(60px) 모두 사용
display: flex; display: flex;
align-items: center; // 수직 중앙 정렬 align-items: center; // 수직 중앙 정렬
justify-content: space-between; justify-content: space-between;
// gap: 12px; // gap: 12px;
.optionalConfirmButton { .optionalConfirmButton {
@@ -1037,37 +1037,37 @@
.figmaTermsInfo { .figmaTermsInfo {
.size(@w: 1064px, @h: 750px); .size(@w: 1064px, @h: 750px);
padding: 60px 57px 40px; padding: 60px 57px 40px;
background: #E6EBF0; background: #e6ebf0;
box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.30); box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.3);
border-radius: 4px; border-radius: 4px;
} }
.figmaTermsContentContainer { .figmaTermsContentContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// gap: 40px; // gap: 40px;
} }
.figmaTermsCard { .figmaTermsCard {
background: white; background: white;
border-radius: 4px; border-radius: 4px;
border: 1px solid #CCCCCC; border: 1px solid #cccccc;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.figmaTermsTitleBar { .figmaTermsTitleBar {
padding: 17px 31px; padding: 17px 31px;
border-bottom: 1px solid #CCCCCC; border-bottom: 1px solid #cccccc;
} }
.figmaTermsTitleText { .figmaTermsTitleText {
color: #C70850; color: #c70850;
font-size: 30px; font-size: 30px;
font-weight: 700; font-weight: 700;
} }
.figmaTermsContentBody { .figmaTermsContentBody {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
@@ -1081,7 +1081,7 @@
line-height: 1.5; line-height: 1.5;
} }
} }
.figmaTermsButtonContainer { .figmaTermsButtonContainer {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -1089,13 +1089,13 @@
margin-top: 40px; margin-top: 40px;
// gap: 15px; // 버튼 사이 간격 // gap: 15px; // 버튼 사이 간격
} }
.figmaTermsAgreeButton { .figmaTermsAgreeButton {
// 이제 TButton의 type="popup" 스타일을 사용하므로, // 이제 TButton의 type="popup" 스타일을 사용하므로,
// 여기서는 추가적인 스타일이 필요 없습니다. // 여기서는 추가적인 스타일이 필요 없습니다.
margin-right: 15px; margin-right: 15px;
} }
.figmaTermsCloseButton { .figmaTermsCloseButton {
// TButton의 type="popup" 스타일을 사용합니다. // TButton의 type="popup" 스타일을 사용합니다.
margin-left: 0px; // lint 오류 대비용용 margin-left: 0px; // lint 오류 대비용용
@@ -1104,7 +1104,7 @@
} }
// optionalConfirm일 때만 기존 위치 스타일 무력화 // optionalConfirm일 때만 기존 위치 스타일 무력화
// :global([id="floatLayer"]) :global(> div:not([id])) :global(> div) :global(> div:nth-child(2)) { // :global([id="floatLayer"]) :global(> div:not([id])) :global(> div) :global(> div:nth-child(2)) {
// .tNewPopUp.optionalConfirm & { // .tNewPopUp.optionalConfirm & {
// bottom: unset !important; // bottom: unset !important;

11
com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less
View File

@@ -171,16 +171,12 @@
// &:focus-visible, // &:focus-visible,
&:hover { &:hover {
outline: 4px #c91d53 solid !important; outline: 4px #c91d53 solid !important;
outline-offset: 2px !important;
transform: translateY(-2px) !important; transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(201, 29, 83, 0.3) !important;
.termsText { .termsText {
font-weight: bold !important; font-weight: bold !important;
} }
} }
} }
} }
} }
.termsRightPanel { .termsRightPanel {
@@ -317,14 +313,12 @@
&.selected:before { &.selected:before {
background-color: #c91d53 !important; background-color: #c91d53 !important;
border: 4px solid #c91d53 !important; // 굵은 테두리로 변경 border: 4px solid #c91d53 !important; // 굵은 테두리로 변경
box-shadow: 0 0 8px rgba(201, 29, 83, 0.3); // 약간의 그림자 효과
} }
// 포커스 받았지만 선택 안됨 // 포커스 받았지만 선택 안됨
&.focused:not(.selected):before { &.focused:not(.selected):before {
background-color: rgba(201, 29, 83, 0.1); background-color: rgba(201, 29, 83, 0.1);
border: 4px solid #c91d53 !important; border: 4px solid #c91d53 !important;
box-shadow: 0 0 10px rgba(199, 8, 80, 0.3) !important;
} }
// 비활성화됨 // 비활성화됨
@@ -337,7 +331,6 @@
// 포커스 받음 (선택된 상태가 아닌 경우에만 적용) // 포커스 받음 (선택된 상태가 아닌 경우에만 적용)
&.focused:not(.selected):before { &.focused:not(.selected):before {
border: 4px solid #c91d53 !important; border: 4px solid #c91d53 !important;
box-shadow: 0 0 10px rgba(199, 8, 80, 0.3) !important;
} }
// 체크마크 // 체크마크