first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,41 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// Trend01 레이아웃 전용 CSS 파일을 불러옵니다.
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/shop/rb.layout/Trend01/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
?>
|
||||
|
||||
<!-- 1. 메인 비주얼 섹션 -->
|
||||
<div class="main-visual-section">
|
||||
<div class="main-visual-bg"></div>
|
||||
<div class="main-visual-content container">
|
||||
<h1 class="main-visual-title">공간을 완성하는 단 하나의 디테일</h1>
|
||||
<p class="main-visual-subtitle">최고급 자재와 장인의 기술로 탄생한 프리미엄 도어를 만나보세요.</p>
|
||||
<a href="<?php echo G5_SHOP_URL; ?>/list.php?ca_id=10" class="main-visual-button">전체 상품 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 메인 콘텐츠 영역 -->
|
||||
<div class="main-content-wrapper container">
|
||||
<main class="layout-main-content">
|
||||
<!-- 신상품 섹션 -->
|
||||
<section class="product-section">
|
||||
<h2 class="product-section-title">New Arrivals</h2>
|
||||
<p class="product-section-desc">가장 먼저 만나는 최신 디자인의 상품들</p>
|
||||
<div class="flex_box" data-layout="main-content-new">
|
||||
<!-- 'main-content-new' 영역에 최신 상품 모듈을 추가해주세요. -->
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-new] 영역에 '최신 상품' 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 인기상품 섹션 -->
|
||||
<section class="product-section">
|
||||
<h2 class="product-section-title">Best Sellers</h2>
|
||||
<p class="product-section-desc">많은 분들이 선택한 인기 상품을 확인해보세요.</p>
|
||||
<div class="flex_box" data-layout="main-content-best">
|
||||
<!-- 'main-content-best' 영역에 인기 상품 모듈을 추가해주세요. -->
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-best] 영역에 '인기 상품' 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@@ -0,0 +1,120 @@
|
||||
/* Trend01 Layout Style - Minimal & Clean */
|
||||
|
||||
/* 💡 [추가] 고정 헤더로 인한 겹침 방지 */
|
||||
body {
|
||||
padding-top: 80px; /* 헤더 높이만큼 여백 추가 */
|
||||
}
|
||||
|
||||
/* 1. 메인 비주얼 섹션 */
|
||||
.main-visual-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin-bottom: 80px; /* 콘텐츠와의 간격 */
|
||||
}
|
||||
|
||||
.main-visual-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('https://images.unsplash.com/photo-1588854337236-6889d631f3e7?q=80&w=2070&auto=format&fit=crop');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: brightness(0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main-visual-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.main-visual-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 10px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.main-visual-subtitle {
|
||||
font-size: 1.2rem;
|
||||
margin: 0 0 30px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.main-visual-button {
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
background-color: #111; /* 포인트 색상 (블랙) */
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid #111;
|
||||
}
|
||||
|
||||
.main-visual-button:hover {
|
||||
background-color: #fff;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
/* 2. 메인 콘텐츠 영역 */
|
||||
.main-content-wrapper {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.product-section {
|
||||
margin-bottom: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-section-title {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.product-section-desc {
|
||||
font-size: 1rem;
|
||||
color: #777;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.guide-box {
|
||||
padding: 40px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px dashed #ddd;
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.main-visual-section {
|
||||
height: 400px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.main-visual-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
.main-visual-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.product-section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.product-section-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/shop/rb.layout/Trend02/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
?>
|
||||
|
||||
<!-- 1. 메인 비주얼 섹션 (Split Layout) -->
|
||||
<div class="main-visual-section-trend02">
|
||||
<div class="visual-text-area">
|
||||
<h1 class="visual-title">MAKE IT BOLD</h1>
|
||||
<p class="visual-subtitle">혁신적인 디자인과 압도적인 존재감. 당신의 공간을 새롭게 정의합니다.</p>
|
||||
<a href="<?php echo G5_SHOP_URL; ?>/list.php?ca_id=10" class="visual-button">Explore Collection</a>
|
||||
</div>
|
||||
<div class="visual-image-area">
|
||||
<!-- 배경 이미지는 CSS로 처리 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 메인 콘텐츠 영역 -->
|
||||
<div class="main-content-wrapper container">
|
||||
<main class="layout-main-content">
|
||||
<!-- 신상품 섹션 -->
|
||||
<section class="product-section">
|
||||
<h2 class="product-section-title">NEW & NOW</h2>
|
||||
<div class="flex_box" data-layout="main-content-new">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-new] 영역에 '최신 상품' 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 인기상품 섹션 -->
|
||||
<section class="product-section">
|
||||
<h2 class="product-section-title">BEST OF BEST</h2>
|
||||
<div class="flex_box" data-layout="main-content-best">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-best] 영역에 '인기 상품' 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@@ -0,0 +1,121 @@
|
||||
/* Trend02 Layout Style - Bold & Modern */
|
||||
|
||||
/* 💡 [추가] 고정 헤더로 인한 겹침 방지 */
|
||||
body {
|
||||
padding-top: 80px; /* 헤더 높이만큼 여백 추가 */
|
||||
}
|
||||
|
||||
/* 1. 메인 비주얼 섹션 (Split Layout) */
|
||||
.main-visual-section-trend02 {
|
||||
display: flex;
|
||||
min-height: 600px; /* 최소 높이 */
|
||||
margin-bottom: 80px;
|
||||
background-color: #1a1a1a; /* 어두운 배경 */
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.visual-text-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 40px 60px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.visual-title {
|
||||
font-size: 4.5rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin: 0 0 20px;
|
||||
color: #ffeb3b; /* 강조 색상 */
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.visual-subtitle {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 40px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.visual-button {
|
||||
display: inline-block;
|
||||
padding: 15px 40px;
|
||||
background-color: #ffeb3b;
|
||||
color: #1a1a1a;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid #ffeb3b;
|
||||
}
|
||||
|
||||
.visual-button:hover {
|
||||
background-color: #1a1a1a;
|
||||
color: #ffeb3b;
|
||||
}
|
||||
|
||||
.visual-image-area {
|
||||
flex: 1;
|
||||
background-image: url('https://images.unsplash.com/photo-1550009158-9ebf69173e03?q=80&w=1950&auto=format&fit=crop'); /* 임시 배경 이미지 */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* 2. 메인 콘텐츠 영역 */
|
||||
.main-content-wrapper {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.product-section {
|
||||
margin-bottom: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
margin: 0 0 10px;
|
||||
color: #333;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.guide-box {
|
||||
padding: 40px;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px dashed #aaa;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
@media (max-width: 1024px) {
|
||||
.main-visual-section-trend02 {
|
||||
flex-direction: column;
|
||||
min-height: auto;
|
||||
}
|
||||
.visual-text-area {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.visual-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.visual-subtitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.visual-image-area {
|
||||
min-height: 300px;
|
||||
}
|
||||
.product-section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.product-section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/shop/rb.layout/Trend03/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
?>
|
||||
|
||||
<!-- 1. 메인 비주얼 섹션 -->
|
||||
<div class="main-visual-section-trend03">
|
||||
<div class="visual-content container">
|
||||
<span class="visual-tag">Eco-Friendly Living</span>
|
||||
<h1 class="visual-title">자연을 닮은<br>편안한 공간</h1>
|
||||
<p class="visual-subtitle">지속 가능한 소재와 따뜻한 감성으로 채우는 당신의 일상.</p>
|
||||
<a href="<?php echo G5_SHOP_URL; ?>/list.php?ca_id=10" class="visual-button">Shop Now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 메인 콘텐츠 영역 -->
|
||||
<div class="main-content-wrapper container">
|
||||
<main class="layout-main-content">
|
||||
<!-- 추천 상품 섹션 -->
|
||||
<section class="product-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Natural Picks</h2>
|
||||
<p class="section-desc">자연의 숨결이 느껴지는 추천 아이템</p>
|
||||
</div>
|
||||
<div class="flex_box" data-layout="main-content-pick">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-pick] 영역에 '추천 상품' 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 베스트 상품 섹션 -->
|
||||
<section class="product-section bg-light">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Loved by Nature</h2>
|
||||
</div>
|
||||
<div class="flex_box" data-layout="main-content-best">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-best] 영역에 '인기 상품' 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@@ -0,0 +1,141 @@
|
||||
/* Trend03 Layout Style - Natural & Organic */
|
||||
|
||||
/* 💡 [추가] 고정 헤더로 인한 겹침 방지 */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
background-color: #fdfbf7; /* 따뜻한 미색 배경 */
|
||||
color: #5a5a5a;
|
||||
/* font-family: 'Noto Serif KR', serif; */ /* 💡 [수정] 관리자 설정 폰트 사용을 위해 주석 처리 */
|
||||
}
|
||||
|
||||
/* 1. 메인 비주얼 섹션 */
|
||||
.main-visual-section-trend03 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
background-image: url('https://images.unsplash.com/photo-1616486338812-3dadae4b4f9d?q=80&w=2070&auto=format&fit=crop');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.main-visual-section-trend03::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2); /* 부드러운 오버레이 */
|
||||
}
|
||||
|
||||
.visual-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.visual-tag {
|
||||
display: inline-block;
|
||||
background-color: #8d9c76; /* 자연스러운 녹색 */
|
||||
color: #fff;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.visual-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 20px;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.visual-subtitle {
|
||||
font-size: 1.2rem;
|
||||
margin: 0 0 40px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.visual-button {
|
||||
display: inline-block;
|
||||
padding: 15px 40px;
|
||||
background-color: #fff;
|
||||
color: #5a5a5a;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
border-radius: 30px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.visual-button:hover {
|
||||
background-color: #8d9c76;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 2. 메인 콘텐츠 영역 */
|
||||
.main-content-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.product-section {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.2rem;
|
||||
color: #4a4a4a;
|
||||
margin: 0 0 10px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background-color: #8d9c76;
|
||||
margin: 15px auto 0;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.guide-box {
|
||||
padding: 40px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.main-visual-section-trend03 {
|
||||
height: 450px;
|
||||
}
|
||||
.visual-content {
|
||||
padding-left: 20px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.visual-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/shop/rb.layout/Trend04/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
?>
|
||||
|
||||
<!-- 1. 메인 비주얼 섹션 -->
|
||||
<div class="main-visual-section-trend04">
|
||||
<div class="visual-content container">
|
||||
<h1 class="visual-title">Timeless Elegance</h1>
|
||||
<p class="visual-subtitle">시간이 흘러도 변하지 않는 가치, 당신만의 품격을 완성하세요.</p>
|
||||
<a href="<?php echo G5_SHOP_URL; ?>/list.php?ca_id=10" class="visual-button">Discover More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 메인 콘텐츠 영역 -->
|
||||
<div class="main-content-wrapper container">
|
||||
<main class="layout-main-content">
|
||||
<!-- 시그니처 컬렉션 -->
|
||||
<section class="product-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Signature Collection</h2>
|
||||
<div class="title-divider"></div>
|
||||
</div>
|
||||
<div class="flex_box" data-layout="main-content-signature">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-signature] 영역에 '추천 상품' 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 프리미엄 셀렉션 -->
|
||||
<section class="product-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Premium Selection</h2>
|
||||
<div class="title-divider"></div>
|
||||
</div>
|
||||
<div class="flex_box" data-layout="main-content-premium">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-premium] 영역에 '인기 상품' 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@@ -0,0 +1,128 @@
|
||||
/* Trend04 Layout Style - Luxury & Elegant */
|
||||
|
||||
/* 💡 [추가] 고정 헤더로 인한 겹침 방지 */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
background-color: #0f0f0f; /* 아주 어두운 배경 */
|
||||
color: #e0e0e0;
|
||||
/* font-family: 'Playfair Display', serif; */ /* 💡 [수정] 관리자 설정 폰트 사용을 위해 주석 처리 */
|
||||
}
|
||||
|
||||
/* 1. 메인 비주얼 섹션 */
|
||||
.main-visual-section-trend04 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
background-image: url('https://images.unsplash.com/photo-1600607686527-6fb886090705?q=80&w=2000&auto=format&fit=crop');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.main-visual-section-trend04::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6); /* 어두운 오버레이 */
|
||||
}
|
||||
|
||||
.visual-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.visual-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 2px;
|
||||
margin: 0 0 20px;
|
||||
color: #d4af37; /* 골드 색상 */
|
||||
}
|
||||
|
||||
.visual-subtitle {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 300;
|
||||
margin: 0 0 50px;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.visual-button {
|
||||
display: inline-block;
|
||||
padding: 15px 50px;
|
||||
background-color: transparent;
|
||||
color: #d4af37;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #d4af37;
|
||||
transition: all 0.4s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.visual-button:hover {
|
||||
background-color: #d4af37;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* 2. 메인 콘텐츠 영역 */
|
||||
.main-content-wrapper {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.product-section {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
margin: 0 0 20px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.title-divider {
|
||||
width: 80px;
|
||||
height: 1px;
|
||||
background-color: #d4af37;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.guide-box {
|
||||
padding: 50px;
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.main-visual-section-trend04 {
|
||||
height: 500px;
|
||||
}
|
||||
.visual-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.visual-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/shop/rb.layout/Trend05/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
?>
|
||||
|
||||
<!-- 1. 메인 비주얼 섹션 -->
|
||||
<div class="main-visual-section-trend05">
|
||||
<div class="visual-bg-shape shape-1"></div>
|
||||
<div class="visual-bg-shape shape-2"></div>
|
||||
<div class="visual-content container">
|
||||
<h1 class="visual-title">Play with<br>Your Space!</h1>
|
||||
<p class="visual-subtitle">지루한 일상에 활기를 불어넣는 톡톡 튀는 디자인.</p>
|
||||
<a href="<?php echo G5_SHOP_URL; ?>/list.php?ca_id=10" class="visual-button">Let's Go!</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 메인 콘텐츠 영역 -->
|
||||
<div class="main-content-wrapper container">
|
||||
<main class="layout-main-content">
|
||||
<!-- 핫 아이템 섹션 -->
|
||||
<section class="product-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Hot & Trendy</h2>
|
||||
<span class="section-badge">New</span>
|
||||
</div>
|
||||
<div class="flex_box" data-layout="main-content-hot">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-hot] 영역에 '최신 상품' 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MD 추천 섹션 -->
|
||||
<section class="product-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">MD's Pick</h2>
|
||||
<span class="section-badge" style="background-color: #ff6b6b;">Best</span>
|
||||
</div>
|
||||
<div class="flex_box" data-layout="main-content-pick">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-pick] 영역에 '추천 상품' 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@@ -0,0 +1,140 @@
|
||||
/* Trend05 Layout Style - Playful & Vibrant */
|
||||
|
||||
/* 💡 [추가] 고정 헤더로 인한 겹침 방지 */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
/* font-family: 'Poppins', sans-serif; */ /* 💡 [수정] 관리자 설정 폰트 사용을 위해 주석 처리 */
|
||||
}
|
||||
|
||||
/* 1. 메인 비주얼 섹션 */
|
||||
.main-visual-section-trend05 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
background-color: #f0f4f8; /* 밝은 배경색 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
/* 배경 장식 요소 (원형) */
|
||||
.visual-bg-shape {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.shape-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: #ff6b6b; /* 코랄 레드 */
|
||||
top: -50px;
|
||||
left: -50px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: #4ecdc4; /* 민트 */
|
||||
bottom: -100px;
|
||||
right: -100px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.visual-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.visual-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin: 0 0 20px;
|
||||
color: #333;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.visual-subtitle {
|
||||
font-size: 1.3rem;
|
||||
margin: 0 0 40px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.visual-button {
|
||||
display: inline-block;
|
||||
padding: 15px 50px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
border-radius: 50px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.visual-button:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* 2. 메인 콘텐츠 영역 */
|
||||
.main-content-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.product-section {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section-badge {
|
||||
background-color: #4ecdc4;
|
||||
color: #fff;
|
||||
padding: 5px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.guide-box {
|
||||
padding: 40px;
|
||||
background-color: #fff;
|
||||
border: 2px dashed #4ecdc4;
|
||||
color: #4ecdc4;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.main-visual-section-trend05 {
|
||||
height: 450px;
|
||||
}
|
||||
.visual-title {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/shop/rb.layout/Trend06/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
?>
|
||||
|
||||
<div class="main-content-wrapper container trend06-layout">
|
||||
<!-- 1. 좌측 사이드바: 상품 카테고리 -->
|
||||
<aside class="layout-sidebar-left">
|
||||
<div class="sidebar-inner">
|
||||
<h2 class="sidebar-title">Products</h2>
|
||||
<nav class="sidebar-category-nav">
|
||||
<ul>
|
||||
<?php
|
||||
$sql = " SELECT ca_id, ca_name FROM {$g5['g5_shop_category_table']} WHERE length(ca_id) = 2 AND ca_use = '1' ORDER BY ca_order, ca_id ";
|
||||
$result = sql_query($sql);
|
||||
while ($row = sql_fetch_array($result)) {
|
||||
$active_class = (isset($_GET['ca_id']) && substr($_GET['ca_id'], 0, 2) == $row['ca_id']) ? 'active' : '';
|
||||
echo '<li class="category-item ' . $active_class . '">';
|
||||
echo '<a href="'.G5_SHOP_URL.'/list.php?ca_id='.$row['ca_id'].'">'.get_text($row['ca_name']).'</a>';
|
||||
|
||||
// 2차 분류 출력
|
||||
$sql2 = " SELECT ca_id, ca_name FROM {$g5['g5_shop_category_table']} WHERE length(ca_id) = 4 AND ca_use = '1' AND ca_id LIKE '{$row['ca_id']}%' ORDER BY ca_order, ca_id ";
|
||||
$result2 = sql_query($sql2);
|
||||
if(sql_num_rows($result2) > 0) {
|
||||
echo '<ul class="sub-category-list">';
|
||||
while ($row2 = sql_fetch_array($result2)) {
|
||||
$active_class2 = (isset($_GET['ca_id']) && $_GET['ca_id'] == $row2['ca_id']) ? 'active' : '';
|
||||
echo '<li class="sub-category-item ' . $active_class2 . '"><a href="'.G5_SHOP_URL.'/list.php?ca_id='.$row2['ca_id'].'">'.get_text($row2['ca_name']).'</a></li>';
|
||||
}
|
||||
echo '</ul>';
|
||||
}
|
||||
echo '</li>';
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 2. 우측 메인 콘텐츠 -->
|
||||
<main class="layout-main-content">
|
||||
<?php
|
||||
// 현재 페이지가 상품 목록(list.php) 또는 상품 상세(item.php)일 경우, 해당 파일을 include 합니다.
|
||||
// 그렇지 않으면 (메인 페이지 등) 리빌더 모듈 영역을 표시합니다.
|
||||
$current_file = basename($_SERVER['SCRIPT_NAME']);
|
||||
|
||||
if ($current_file == 'list.php') {
|
||||
// 상품 목록 스킨을 직접 include
|
||||
$skin_file = G5_SHOP_SKIN_PATH.'/list.10.skin.php'; // 사용할 스킨 파일 지정
|
||||
if(is_file($skin_file)) {
|
||||
include $skin_file;
|
||||
} else {
|
||||
echo "<div class='guide-box'>상품 목록 스킨 파일이 없습니다.</div>";
|
||||
}
|
||||
} else if ($current_file == 'item.php') {
|
||||
// 상품 상세 스킨을 직접 include
|
||||
$skin_file = G5_SHOP_SKIN_PATH.'/item.form.skin.php'; // 사용할 스킨 파일 지정
|
||||
if(is_file($skin_file)) {
|
||||
include $skin_file;
|
||||
} else {
|
||||
echo "<div class='guide-box'>상품 상세 스킨 파일이 없습니다.</div>";
|
||||
}
|
||||
} else {
|
||||
// 메인 페이지의 경우, 리빌더 모듈 영역을 표시
|
||||
?>
|
||||
<div class="flex_box" data-layout="main-content-top">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-top] 영역에 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
<div class="flex_box" data-layout="main-content-middle">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-middle] 영역에 모듈을 추가하세요.</div>"; } ?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</main>
|
||||
</div>
|
||||
@@ -0,0 +1,248 @@
|
||||
/* Trend06 Layout Style - Side-Nav & Catalog */
|
||||
|
||||
/* 💡 [추가] 고정 헤더로 인한 겹침 방지 */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
background-color: #f5f5f5; /* 전체 배경색 */
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.trend06-layout {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 80px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 1. 좌측 사이드바 */
|
||||
.layout-sidebar-left {
|
||||
flex: 0 0 250px; /* 너비 고정 */
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
height: fit-content;
|
||||
position: sticky;
|
||||
top: 100px; /* 스크롤 시 상단 고정 */
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #333;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sidebar-category-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.category-item > a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.category-item > a:hover,
|
||||
.category-item.active > a {
|
||||
background-color: #f0f4f8;
|
||||
color: #0056b3; /* 포인트 색상 */
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 2차 분류 (서브 카테고리) */
|
||||
.sub-category-list {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px !important;
|
||||
display: none; /* 기본 숨김 */
|
||||
}
|
||||
|
||||
.category-item.active .sub-category-list,
|
||||
.category-item:hover .sub-category-list {
|
||||
display: block; /* 활성화되거나 호버 시 표시 */
|
||||
}
|
||||
|
||||
.sub-category-item a {
|
||||
font-size: 0.9rem;
|
||||
padding: 5px 10px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.sub-category-item a:hover,
|
||||
.sub-category-item.active a {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 2. 우측 메인 콘텐츠 */
|
||||
.layout-main-content {
|
||||
flex: 1;
|
||||
min-width: 0; /* flex item overflow 방지 */
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.guide-box {
|
||||
padding: 40px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px dashed #ddd;
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 💡 [추가] 상품 목록 스타일 (Trend06 전용) */
|
||||
.trend06-layout .rb_shop_list .swiper-wrapper {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list .swiper-slide {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list_item {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list_item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
border-color: #0056b3;
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list_item_img {
|
||||
position: relative;
|
||||
padding-top: 100%; /* 1:1 비율 */
|
||||
overflow: hidden;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list_item_img img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.trend06-layout .v_ch_list_r {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list_item_ca {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list_item_name a {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
height: 2.8em;
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list_item_basic {
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
margin-top: 10px;
|
||||
margin-bottom: auto; /* 가격을 하단으로 밀기 */
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list_item_pri {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list_item_pri .pri {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.trend06-layout .list_wish_int {
|
||||
display: none; /* 찜하기 버튼 숨김 (깔끔하게) */
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
@media (max-width: 1024px) {
|
||||
.trend06-layout {
|
||||
flex-direction: column;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.layout-sidebar-left {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
position: static; /* 모바일에서는 고정 해제 */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar-category-nav ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.category-item > a {
|
||||
padding: 8px 15px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.sub-category-list {
|
||||
display: none !important; /* 모바일에서는 2차 분류 숨김 (너무 복잡해짐) */
|
||||
}
|
||||
|
||||
.trend06-layout .rb_shop_list .swiper-wrapper {
|
||||
grid-template-columns: repeat(2, 1fr); /* 모바일 2열 */
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/shop/rb.layout/Trend07/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
?>
|
||||
|
||||
<!-- 1. 메인 비주얼 (커스텀 모듈) -->
|
||||
<?php include_once(G5_THEME_PATH.'/rb.custom/pns_visual/module.php'); ?>
|
||||
|
||||
<!-- 2. 제품 소개 (커스텀 모듈) -->
|
||||
<?php include_once(G5_THEME_PATH.'/rb.custom/pns_product/module.php'); ?>
|
||||
|
||||
<!-- 3. 브랜드 배너 (커스텀 모듈) -->
|
||||
<?php include_once(G5_THEME_PATH.'/rb.custom/pns_brand/module.php'); ?>
|
||||
|
||||
<!-- 4. 추가 콘텐츠 영역 (관리자 설정 가능) -->
|
||||
<div class="main-content-wrapper container">
|
||||
<main class="layout-main-content">
|
||||
<div class="flex_box" data-layout="main-content-bottom">
|
||||
<?php if($is_admin) { echo "<div class='guide-box'>관리자 안내: [main-content-bottom] 영역에 추가 모듈(게시판 등)을 배치하세요.</div>"; } ?>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
/* Trend07 Layout Style - PNS Style */
|
||||
|
||||
/* 💡 [추가] 고정 헤더로 인한 겹침 방지 (메인 비주얼이 풀스크린이므로 0으로 설정하거나 조정) */
|
||||
body {
|
||||
padding-top: 0;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
|
||||
/* 메인 비주얼이 헤더 뒤로 들어가도록 설정 */
|
||||
.pns-visual-slider {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.main-content-wrapper {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.guide-box {
|
||||
padding: 40px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px dashed #ddd;
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_SHOP_URL.'/rb.layout/'.$rb_core['layout_shop'].'/style.css">', 0);
|
||||
?>
|
||||
|
||||
<!--
|
||||
* 환경설정에서 모듈 추가를 사용하려면 반드시 class="flex_box" 를 포함해야 합니다.
|
||||
|
||||
* 참고사항
|
||||
- 섹션을 좌/우 에 배치하는 경우
|
||||
- <div class="flex_box left"></div>
|
||||
- <div class="flex_box right"></div>
|
||||
- 와 같이 class="flex_box" 를 두개로 배치한 후 css를 추가해주세요.
|
||||
|
||||
- 생성되는 모듈은 각 섹션의 좌측부터 순서대로 배치되며
|
||||
- 지정된 width 를 벗어나면 줄바꿈 되어 생성 됩니다.
|
||||
|
||||
- class="flex_box" 를 사용하지 않고 직접 메인페이지를 구성할 수 있습니다.
|
||||
-->
|
||||
|
||||
<div class="flex_box"></div>
|
||||
@@ -0,0 +1 @@
|
||||
/* 레이아웃 CSS */
|
||||
@@ -0,0 +1,21 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
|
||||
/**
|
||||
* laser.TLRB 레이아웃 설정 파일
|
||||
* 각 영역(Row)별로 가로 칸(Column) 개수를 설정합니다.
|
||||
*/
|
||||
|
||||
$layout_grid_config = [
|
||||
// '영역ID' => 칸 개수
|
||||
'top' => 1, // main-content-top (1칸: 100%)
|
||||
'middle' => 2, // main-content-middle (2칸: 50% / 50%)
|
||||
'middle1' => 1, // main-content-middle1 (1칸: 100%)
|
||||
'bottom' => 3, // main-content-bottom (3칸: 33% / 33% / 33%)
|
||||
'bottom1' => 1, // main-content-bottom (1칸: 100%)
|
||||
'left_ad' => false,
|
||||
'right_ad' => false,
|
||||
// 필요하다면 아래처럼 추가 가능
|
||||
// 'extra' => 4, // main-content-extra (4칸)
|
||||
];
|
||||
?>
|
||||
@@ -0,0 +1,83 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 이 레이아웃 전용 CSS 파일을 불러옵니다.
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/shop/rb.layout/laser.TLRB/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
|
||||
// 💡 [핵심] 설정 파일 로드
|
||||
$config_path = __DIR__ . '/config.php';
|
||||
if (file_exists($config_path)) {
|
||||
include_once($config_path);
|
||||
} else {
|
||||
// 설정 파일이 없을 경우 기본값
|
||||
$layout_grid_config = [
|
||||
'top' => 1,
|
||||
'middle' => 1,
|
||||
'bottom' => 1,
|
||||
'left_ad' => false,
|
||||
'right_ad' => false,
|
||||
];
|
||||
}
|
||||
?>
|
||||
|
||||
<!-- 💡 [추가] 메인 비주얼 섹션 시작 -->
|
||||
<div class="main-visual-section">
|
||||
<div class="main-visual-bg"></div>
|
||||
<div class="main-visual-content container">
|
||||
<h1 class="main-visual-title">공간을 완성하는 단 하나의 디테일</h1>
|
||||
<p class="main-visual-subtitle">최고급 자재와 장인의 기술로 탄생한 프리미엄 도어를 만나보세요.</p>
|
||||
<a href="<?php echo G5_SHOP_URL; ?>/list.php?ca_id=10" class="main-visual-button">전체 상품 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 메인 비주얼 섹션 끝 -->
|
||||
|
||||
<div class="main-content-wrapper">
|
||||
<div class="three-column-layout container">
|
||||
<?php if ($layout_grid_config['left_ad']===true): ?>
|
||||
<!-- 1. 좌측 사이드바 -->
|
||||
<aside class="layout-sidebar-left">
|
||||
<div class="sidebar-inner">
|
||||
<?php if($is_admin) { ?> <h3 class="sidebar-title">광고 영역</h3> <?php } ?>
|
||||
<!-- 💡 [수정] 좌측 모듈 영역에 고유 ID 부여 -->
|
||||
<div class="flex_box flex_box_l" data-layout="main-left"></div>
|
||||
</div>
|
||||
</aside>
|
||||
<?php endif; ?>
|
||||
<!-- Rebuilder 시스템의 메인 콘텐츠 영역 -->
|
||||
<main class="layout-main-content">
|
||||
|
||||
<?php foreach ($layout_grid_config as $row_name => $columns): ?>
|
||||
<!-- 행(Row) 시작 -->
|
||||
<div class="layout-row layout-row-<?php echo $row_name; ?>" data-columns="<?php echo $columns; ?>">
|
||||
|
||||
<?php if ($columns == 1): ?>
|
||||
<!-- 1칸일 경우: 기존 ID 그대로 사용 (호환성 유지) -->
|
||||
<div class="flex_box layout-col" data-layout="main-content-<?php echo $row_name; ?>">
|
||||
<!-- --><?php //echo rb_get_modules('main-content-'.$row_name); ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<!-- 2칸 이상일 경우: 번호를 붙여서 분할 -->
|
||||
<?php for ($i = 1; $i <= $columns; $i++): ?>
|
||||
<div class="flex_box layout-col" data-layout="main-content-<?php echo $row_name; ?>-<?php echo $i; ?>">
|
||||
<!-- --><?php //echo rb_get_modules('main-content-'.$row_name.'-'.$i); ?>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
<!-- 행(Row) 끝 -->
|
||||
<?php endforeach; ?>
|
||||
|
||||
</main>
|
||||
<!-- 3. 우측 사이드바 -->
|
||||
<?php if ($layout_grid_config['right_ad']===true): ?>
|
||||
<aside class="layout-sidebar-right">
|
||||
<div class="sidebar-inner">
|
||||
<?php if($is_admin) { ?> <h3 class="sidebar-title">광고 영역</h3> <?php } ?>
|
||||
<!-- 💡 [수정] 우측 모듈 영역에 고유 ID 부여 -->
|
||||
<div class="flex_box flex_box_r" data-layout="main-right"></div>
|
||||
</div>
|
||||
</aside>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,107 @@
|
||||
/* laser.TLRB Layout Style - Dynamic Grid */
|
||||
|
||||
.layout-main-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 행(Row) 스타일 */
|
||||
.layout-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px; /* 행 사이 간격 */
|
||||
gap: 20px; /* 열 사이 간격 */
|
||||
}
|
||||
|
||||
.layout-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 열(Column) 스타일 */
|
||||
.layout-col {
|
||||
flex: 1; /* 남은 공간을 균등하게 차지 */
|
||||
min-width: 0; /* 내용물이 넘쳐도 레이아웃 깨짐 방지 */
|
||||
}
|
||||
|
||||
/* 💡 [추가] 메인 비주얼 섹션 스타일 */
|
||||
.main-visual-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px; /* 비주얼 영역 높이 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin-bottom: 60px; /* 메인 콘텐츠와의 간격 */
|
||||
}
|
||||
|
||||
.main-visual-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('https://images.unsplash.com/photo-1588854337236-6889d631f3e7?q=80&w=2070&auto=format&fit=crop'); /* 임시 배경 이미지 */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: brightness(0.5); /* 배경을 어둡게 처리하여 텍스트 가독성 확보 */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main-visual-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.main-visual-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 10px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.main-visual-subtitle {
|
||||
font-size: 1.2rem;
|
||||
margin: 0 0 30px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.main-visual-button {
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
background-color: #ff3061; /* 포인트 색상 */
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.main-visual-button:hover {
|
||||
background-color: #e02051; /* 호버 시 약간 더 어둡게 */
|
||||
}
|
||||
|
||||
|
||||
/* 모바일 반응형 */
|
||||
@media (max-width: 1024px) {
|
||||
.layout-row {
|
||||
flex-direction: column; /* 모바일에서는 세로로 쌓임 */
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.layout-col {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 💡 [추가] 모바일용 메인 비주얼 스타일 */
|
||||
.main-visual-section {
|
||||
height: 400px;
|
||||
}
|
||||
.main-visual-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
.main-visual-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user