optrader
d8dce0a89d
🕐 커밋 시간: 2025. 11. 19. 17:35:53 📊 변경 통계: • 총 파일: 8개 • 추가: +43줄 📁 추가된 파일: + com.twin.app.shoptime/src/components/FloatingGradientBackground/FloatingGradientBackground.jsx + com.twin.app.shoptime/src/components/FloatingGradientBackground/FloatingGradientBackground.module.less + com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.v2.jsx 📝 수정된 파일: ~ com.twin.app.shoptime/src/App/App.js ~ com.twin.app.shoptime/src/actions/panelActions.js ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • UI 컴포넌트 아키텍처 개선 • 소규모 기능 개선 • 모듈 구조 개선
65 lines
1.5 KiB
Plaintext
65 lines
1.5 KiB
Plaintext
@import "../../style/CommonStyle.module.less";
|
|
@import "../../style/utils.module.less";
|
|
|
|
// 그라데이션 배경 - 전역 body에 렌더링됨
|
|
.gradientBackground {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none; // 클릭 이벤트가 아래로 통과하도록
|
|
|
|
// 기본 상태에서는 숨김
|
|
display: none;
|
|
|
|
// 활성화 상태
|
|
&.visible {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// 그라데이션 레이어 1: 270도 방향 (왼쪽→오른쪽, 투명→불투명)
|
|
// linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.77) 70%, rgba(0, 0, 0, 1) 100%)
|
|
.gradientLayer1 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
270deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0.77) 70%,
|
|
rgba(0, 0, 0, 1) 100%
|
|
);
|
|
z-index: 1; // container 내부 상대적 zIndex
|
|
}
|
|
|
|
// 그라데이션 레이어 2: 180도 방향 (위→아래, 투명→불투명)
|
|
// linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)
|
|
.gradientLayer2 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 1) 100%
|
|
);
|
|
z-index: 2; // gradientLayer1보다 높게
|
|
}
|
|
|
|
// 그라데이션 레이어 3: 투명 그라데이션
|
|
// linear-gradient(0deg, rgba(0, 0, 0, 0))
|
|
.gradientLayer3 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0));
|
|
z-index: 3; // 가장 높은 레이어
|
|
} |