optrader
6d0cf78534
🕐 커밋 시간: 2025. 11. 24. 09:08:54 📊 변경 통계: • 총 파일: 10개 • 추가: +93줄 • 삭제: -97줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/App/App.js ~ com.twin.app.shoptime/src/components/MediaItem/MediaItem.module.less ~ com.twin.app.shoptime/src/components/MobileSend/PhoneInputSection.module.less ~ com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less ~ com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js ~ com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx ~ com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.module copy.less ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx 🔧 함수 변경 내용: 📄 com.twin.app.shoptime/src/App/App.js (javascript): 🔄 Modified: resolveSpotlightIdFromEvent() ❌ Deleted: handleFocusLog(), handleBlurLog() 📄 com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx (javascript): 🔄 Modified: normalizeModalStyle() 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • UI 컴포넌트 아키텍처 개선 • API 서비스 레이어 개선 Performance: 코드 최적화로 성능 개선 기대
1106 lines
24 KiB
Plaintext
1106 lines
24 KiB
Plaintext
// src/components/TPopUp/TNewPopUp.module.less
|
|
|
|
@import "../../style/CommonStyle.module.less";
|
|
@import "../../style/utils.module.less";
|
|
|
|
// 👇 TPopUp.module.less에서 가져온 floatLayer 스타일을 optionalConfirm용으로 수정
|
|
// [id="floatLayer"] {
|
|
// // optionalConfirm일 때만 다른 위치 적용
|
|
// > div:not([id]) > div > div:nth-child(2) {
|
|
// &:has(.src_components_TPopUp_TNewPopUp_optionalConfirm) {
|
|
// bottom: unset !important;
|
|
// transform: none !important;
|
|
// overflow: unset;
|
|
|
|
// > div {
|
|
// overflow: unset;
|
|
// }
|
|
// }
|
|
|
|
// // 다른 팝업들은 기존 TPopUp 방식 유지
|
|
// &:not(:has(.src_components_TPopUp_TNewPopUp_optionalConfirm)) {
|
|
// bottom: 50%;
|
|
// transform: translateY(50%);
|
|
// overflow: unset;
|
|
|
|
// > div {
|
|
// overflow: unset;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// html body [id="floatLayer"] > div:not([id]) > div > div:nth-child(2) {
|
|
// &:has(.src_components_TPopUp_TNewPopUp_optionalConfirm) {
|
|
// bottom: unset !important;
|
|
// transform: none !important;
|
|
// }
|
|
// }
|
|
|
|
.tNewPopUp {
|
|
//enact popup reset
|
|
margin: 0 auto !important;
|
|
background: transparent !important;
|
|
> div {
|
|
padding: 0 !important;
|
|
> div > div {
|
|
width: unset !important;
|
|
margin: 0 !important;
|
|
> div {
|
|
font-family: @baseFont;
|
|
}
|
|
}
|
|
}
|
|
box-shadow: 0 20px 70px rgba(2, 3, 3, 0.7) !important;
|
|
|
|
.default-style(@width: 780px) {
|
|
.commonInfo {
|
|
width: @width;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.commonTextLayer {
|
|
width: 100%;
|
|
|
|
.commonTitle {
|
|
text-align: left;
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
color: @COLOR_BLACK;
|
|
background-color: @COLOR_SKYBLUE;
|
|
padding: 30px 60px;
|
|
}
|
|
|
|
.commonText {
|
|
min-height: 180px;
|
|
color: @COLOR_GRAY03;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
.flex();
|
|
}
|
|
}
|
|
}
|
|
|
|
// kind
|
|
|
|
&.introTermsPopup {
|
|
.default-style();
|
|
|
|
.introTermsInfo {
|
|
.size(@w: 1100px , @h: 564px);
|
|
padding: 60px 42px 30px 60px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.introTermsButtonContainer {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
> div {
|
|
min-width: 300px;
|
|
height: 78px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.descriptionPopup {
|
|
.default-style();
|
|
|
|
.descriptionInfo {
|
|
.size(@w: 1100px , @h: 824px);
|
|
padding: 60px 42px 30px 60px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.descriptionImg {
|
|
.size(@w: 200px, @h: 200px);
|
|
}
|
|
|
|
.descriptionButtonContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
&.textPopup,
|
|
&.exitPopup {
|
|
.default-style();
|
|
|
|
.textExitInfo {
|
|
width: 780px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.textExitText {
|
|
padding: 0 60px;
|
|
min-height: 180px;
|
|
margin: 30px 0;
|
|
color: @COLOR_GRAY03;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
.flex();
|
|
}
|
|
|
|
.textExitButtonContainer {
|
|
margin: 0 0 30px 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
min-width: 240px;
|
|
height: 78px;
|
|
margin: 0 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.optionPopup {
|
|
.default-style();
|
|
|
|
.optionInfo {
|
|
width: 820px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.optionItem {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.optionLayer {
|
|
margin: 0 auto;
|
|
width: 700px;
|
|
max-height: 410px;
|
|
margin-top: 31px;
|
|
|
|
.optionChoice {
|
|
box-sizing: border-box;
|
|
border: 1px solid @COLOR_GRAY02;
|
|
background: @COLOR_WHITE;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: @COLOR_GRAY03;
|
|
padding: 30px;
|
|
height: 90px;
|
|
line-height: normal;
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
&:focus {
|
|
background: @PRIMARY_COLOR_RED;
|
|
color: @COLOR_WHITE;
|
|
}
|
|
|
|
.optionImg {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin: 0 12px 0 0;
|
|
}
|
|
|
|
&.optionSoldOut {
|
|
background: @BG_COLOR_02;
|
|
> * {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
&.optionItem {
|
|
display: flex;
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
&.optionScroll {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.selectedOption {
|
|
box-sizing: border-box;
|
|
background: @COLOR_WHITE;
|
|
color: @PRIMARY_COLOR_RED;
|
|
border: 4px solid @PRIMARY_COLOR_RED;
|
|
}
|
|
}
|
|
|
|
.optionButtonContainer {
|
|
margin: 30px 0 30px 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&.eventBannerPopup {
|
|
.default-style();
|
|
|
|
.eventBannerInfo {
|
|
width: 600px;
|
|
height: 510px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
> p > img {
|
|
width: 600px;
|
|
height: 510px;
|
|
}
|
|
}
|
|
|
|
.eventBannerButtonContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 50px;
|
|
|
|
> div {
|
|
margin: 0 6px;
|
|
min-width: 240px;
|
|
height: 78px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.supportPopup {
|
|
.default-style();
|
|
|
|
.supportInfo {
|
|
width: 960px;
|
|
height: 640px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.supportButtonContainer {
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin-bottom: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
min-width: 300px;
|
|
height: 78px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.couponPopup {
|
|
.default-style();
|
|
|
|
.couponInfo {
|
|
width: 960px;
|
|
height: 640px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.couponButtonContainer {
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin-bottom: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
min-width: 300px;
|
|
height: 78px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mobileSendPopup {
|
|
.default-style();
|
|
|
|
.mobileSendInfo {
|
|
width: 960px;
|
|
height: 640px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.mobileSendButtonContainer {
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin-bottom: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
min-width: 300px;
|
|
height: 78px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.qrPopup {
|
|
.default-style();
|
|
|
|
.qrInfo {
|
|
width: 960px;
|
|
height: 640px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.qrButtonContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 30px 0;
|
|
|
|
> div {
|
|
margin-top: 2;
|
|
min-width: 340px;
|
|
height: 80px;
|
|
margin: 0 10px;
|
|
background: @COLOR_GRAY09;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.checkoutTermsPopup {
|
|
.checkoutTermsInfo {
|
|
.size(@w: 1100px , @h: 750px);
|
|
padding: 60px 60px 30px 60px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
|
|
.checkoutTermsTitle {
|
|
text-align: left;
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
color: @COLOR_BLACK;
|
|
padding: 0 0 30px 0;
|
|
}
|
|
|
|
.checkoutTermsText {
|
|
height: 480px;
|
|
overflow-y: auto;
|
|
font-size: 24px;
|
|
line-height: 36px;
|
|
padding-right: 20px;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 300px;
|
|
}
|
|
&::-webkit-scrollbar-track-piece {
|
|
background-color: #fff;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #7a808d;
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkoutTermsButtonContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 30px 0;
|
|
|
|
> div {
|
|
min-width: 300px;
|
|
height: 78px;
|
|
margin: 0 10px;
|
|
background: @COLOR_GRAY09;
|
|
font-size: 30px;
|
|
&:focus {
|
|
box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
|
|
background-color: @PRIMARY_COLOR_RED;
|
|
color: @COLOR_WHITE;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.scrollPopup {
|
|
.default-style();
|
|
|
|
.scrollInfo {
|
|
width: 900px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.scrollButtonContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 30px 0;
|
|
|
|
> div {
|
|
min-width: 300px;
|
|
height: 78px;
|
|
margin: 0 10px;
|
|
background: @COLOR_GRAY09;
|
|
font-size: 30px;
|
|
&:focus {
|
|
box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
|
|
background-color: @PRIMARY_COLOR_RED;
|
|
color: @COLOR_WHITE;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.watchPopup {
|
|
position: absolute;
|
|
right: 42px;
|
|
bottom: -330px;
|
|
|
|
.watchInfo {
|
|
width: 1038px;
|
|
height: 168px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
|
|
.watchThumbnail {
|
|
width: 300px;
|
|
height: 168px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.watchTextLayer {
|
|
width: 552px;
|
|
height: 168px;
|
|
padding: 30px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.watchTitle {
|
|
color: @COLOR_BLACK;
|
|
font-size: 30px;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
width: 552px;
|
|
height: 36px;
|
|
.elip(@clamp:1);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.watchText {
|
|
color: #1a1a1a;
|
|
font-size: 24px;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
width: 552px;
|
|
height: 30px;
|
|
.elip(@clamp:1);
|
|
}
|
|
}
|
|
|
|
.watchButtonContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: 18px 30px;
|
|
width: 180px;
|
|
> div {
|
|
min-width: 180px;
|
|
height: 60px;
|
|
margin: 0 0 12px 0;
|
|
background: @COLOR_GRAY09;
|
|
font-size: 24px;
|
|
line-height: 60px;
|
|
&:focus {
|
|
box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
|
|
background-color: @PRIMARY_COLOR_RED;
|
|
color: @COLOR_WHITE;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.setPinCodePopup {
|
|
.default-style();
|
|
|
|
.setPinCodeInfo {
|
|
width: 780px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.setPinCodeText {
|
|
padding: 0 60px;
|
|
min-height: 180px;
|
|
margin: 30px 0;
|
|
color: @COLOR_GRAY03;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
.flex();
|
|
}
|
|
|
|
.setPinCodeButtonContainer {
|
|
margin: 0 0 30px 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
min-width: 240px;
|
|
height: 78px;
|
|
margin: 0 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.errorPopup {
|
|
.default-style();
|
|
|
|
.errorInfo {
|
|
width: 780px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.errorText {
|
|
padding: 0 60px;
|
|
min-height: 180px;
|
|
margin: 30px 0;
|
|
color: @COLOR_GRAY03;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
.flex();
|
|
}
|
|
|
|
.errorButtonContainer {
|
|
margin: 0 0 30px 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
min-width: 240px;
|
|
height: 78px;
|
|
margin: 0 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.orderDetailPopup {
|
|
.default-style();
|
|
width: 900px;
|
|
background-color: @BG_COLOR_01;
|
|
}
|
|
|
|
&.orderCancelPopup {
|
|
> div > div > div {
|
|
box-shadow: 0 20px 70px rgba(2, 3, 3, 0.7) !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
.default-style();
|
|
position: relative;
|
|
|
|
.orderCancelInfo {
|
|
width: 780px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.orderCancelText {
|
|
padding: 0 60px;
|
|
min-height: 180px;
|
|
margin: 30px 0;
|
|
color: @COLOR_GRAY03;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
.flex();
|
|
}
|
|
|
|
.orderCancelButtonContainer {
|
|
margin: 0 0 30px 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
min-width: 240px;
|
|
height: 78px;
|
|
margin: 0 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.returnExchangePopup {
|
|
.default-style();
|
|
|
|
.returnExchangeInfo {
|
|
width: 780px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.returnExchangeText {
|
|
padding: 0 60px;
|
|
min-height: 180px;
|
|
margin: 30px 0;
|
|
color: @COLOR_GRAY03;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
.flex();
|
|
}
|
|
|
|
.returnExchangeButtonContainer {
|
|
margin: 0 0 30px 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
min-width: 240px;
|
|
height: 78px;
|
|
margin: 0 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.trackPackagePopup {
|
|
.default-style(@width: 860px);
|
|
|
|
.trackPackageInfo {
|
|
width: 860px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.trackPackageText {
|
|
padding: 0 60px;
|
|
min-height: 180px;
|
|
margin: 30px 0;
|
|
color: @COLOR_GRAY03;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
.flex();
|
|
}
|
|
|
|
.trackPackageButtonContainer {
|
|
margin: 0 0 30px 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
min-width: 240px;
|
|
height: 78px;
|
|
margin: 0 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.cancelConfirmPopup {
|
|
.default-style();
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
> div > div > div {
|
|
box-shadow: 0 20px 70px rgba(2, 3, 3, 0.7) !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.cancelConfirmInfo {
|
|
width: 780px;
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
.cancelConfirmText {
|
|
padding: 0 60px;
|
|
min-height: 180px;
|
|
margin: 30px 0;
|
|
color: @COLOR_GRAY03;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
.flex();
|
|
}
|
|
|
|
.cancelConfirmButtonContainer {
|
|
margin: 0 0 30px 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
min-width: 240px;
|
|
height: 78px;
|
|
margin: 0 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 👇 새로운 팝업 스타일 */
|
|
&.optionalAgreement {
|
|
.default-style();
|
|
|
|
// 팝업 위치를 정중앙보다 아래로 명시적으로 지정
|
|
position: absolute !important;
|
|
top: 80% !important; // 50%가 정중앙, 값을 키우면 아래로 이동
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
margin: 0 !important;
|
|
|
|
.optionalAgreementInfo {
|
|
.size(@w: 1064px, @h: 240px);
|
|
top: 80% !important;
|
|
padding: 60px 57px 40px; // 상단 60px, 좌우 57px, 하단 40px 패딩 적용
|
|
box-sizing: border-box; // 패딩이 너비/높이에 포함되도록 설정
|
|
background-color: @BG_COLOR_01;
|
|
color: @COLOR_GRAY03;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: normal;
|
|
border-radius: 4px;
|
|
|
|
// 컨텐츠 영역
|
|
.optionalAgreementContentContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// 텍스트 영역 스타일
|
|
.optionalAgreementTextLayer {
|
|
flex: 1; // 남은 공간을 모두 차지하도록 설정
|
|
min-height: 0; // flex item이 부모를 넘어 수축할 수 있도록 허용
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden; // 내용이 넘칠 경우 숨김
|
|
|
|
.optionalAgreementText {
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
color: @COLOR_GRAY03;
|
|
}
|
|
}
|
|
|
|
// 버튼 컨테이너 스타일
|
|
.optionalAgreementButtonContainer {
|
|
margin-top: 3%; // gap 대신 margin 사용
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px; // 버튼 간 간격
|
|
flex-shrink: 0; // 컨테이너가 줄어들지 않도록 설정
|
|
|
|
> div {
|
|
min-width: 300px;
|
|
height: 80px; // 높이 80px로 수정
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.optionalConfirm {
|
|
.default-style();
|
|
|
|
bottom: unset !important;
|
|
transform: none !important;
|
|
top: 20% !important;
|
|
|
|
// 기존 위치 스타일들...
|
|
|
|
.optionalConfirmInfo {
|
|
width: 100vw;
|
|
height: 198px;
|
|
background-color: #e6ebf0;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
// gap: 15px;
|
|
|
|
.optionalConfirmContentContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 25px 140px 25px 140px;
|
|
box-sizing: border-box;
|
|
justify-content: center;
|
|
// gap: 20px;
|
|
|
|
.optionalConfirmTextSection {
|
|
// flex: 1; // 나머지 높이를 모두 차지
|
|
height: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
// border : 1px solid red;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.optionalConfirmButtonSection {
|
|
height: 60px;
|
|
// margin-top: 15px; // gap 대신 margin으로 간격 처리
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
flex-shrink: 0; // 줄어들지 않도록 고정
|
|
// border : 1px solid blue;
|
|
|
|
.optionalConfirmLeftButtonSection {
|
|
width: 320px;
|
|
height: 60px; // 부모 높이(60px) 모두 사용
|
|
display: flex;
|
|
align-items: center; // 수직 중앙 정렬
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.optionalTermsButton {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
min-width: unset !important;
|
|
max-width: unset !important;
|
|
padding: 0 20px !important;
|
|
margin: 0 !important;
|
|
background: white !important;
|
|
border: 1px solid #cfcfcf !important;
|
|
border-radius: 4px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important; // 👈 flex-start → space-between 변경
|
|
flex-shrink: 0;
|
|
box-sizing: border-box !important;
|
|
|
|
// 포커스 스타일
|
|
&:focus {
|
|
outline: 2px solid #c70850;
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
.optionalTermsTitle {
|
|
height: 100%;
|
|
color: #1a1a1a;
|
|
font-size: 22px;
|
|
font-family: "LG Smart UI";
|
|
font-weight: 600;
|
|
line-height: 22px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
}
|
|
|
|
// 👈 '>' 아이콘 스타일 추가
|
|
.optionalTermsIcon {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 2px solid #1a1a1a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-left: 8px;
|
|
|
|
&::after {
|
|
content: ">";
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.optionalConfirmRightButtonSection {
|
|
// width: 332px;
|
|
height: 100%; // 부모 높이(60px) 모두 사용
|
|
display: flex;
|
|
align-items: center; // 수직 중앙 정렬
|
|
justify-content: space-between;
|
|
// gap: 12px;
|
|
|
|
.optionalConfirmButton {
|
|
width: 160px;
|
|
height: 60px;
|
|
flex-shrink: 0; // 크기 고정
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 👇 새로운 약관 팝업 스타일 */
|
|
&.figmaTermsPopup {
|
|
.figmaTermsInfo {
|
|
.size(@w: 1064px, @h: 750px);
|
|
padding: 60px 57px 40px;
|
|
background: #e6ebf0;
|
|
box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.figmaTermsContentContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
// gap: 40px;
|
|
}
|
|
|
|
.figmaTermsCard {
|
|
background: white;
|
|
border-radius: 4px;
|
|
border: 1px solid #cccccc;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.figmaTermsTitleBar {
|
|
padding: 17px 31px;
|
|
border-bottom: 1px solid #cccccc;
|
|
}
|
|
|
|
.figmaTermsTitleText {
|
|
color: #c70850;
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.figmaTermsContentBody {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// margin-bottom: 40px;
|
|
|
|
.scrollerContent {
|
|
padding: 31px;
|
|
font-size: 26px;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.figmaTermsButtonContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center; // 버튼 수직 정렬을 위해 추가
|
|
margin-top: 40px;
|
|
// gap: 15px; // 버튼 사이 간격
|
|
}
|
|
|
|
.figmaTermsAgreeButton {
|
|
// 이제 TButton의 type="popup" 스타일을 사용하므로,
|
|
// 여기서는 추가적인 스타일이 필요 없습니다.
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.figmaTermsCloseButton {
|
|
// TButton의 type="popup" 스타일을 사용합니다.
|
|
margin-left: 0px; // lint 오류 대비용용
|
|
}
|
|
}
|
|
}
|
|
|