first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,301 @@
|
||||
/* --- STORY 섹션 레이아웃 --- */
|
||||
.story-section {
|
||||
width: 100%;
|
||||
padding: 80px 0;
|
||||
background-color: #f8f9fa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 📌 [분할] 내용과 미디어가 함께 있는 경우 (좌우 2단) */
|
||||
.story-layout-split {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
}
|
||||
.story-layout-split .story-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: left; /* 기본 좌측 정렬 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
/* 💡 [수정] 분할 레이아웃일 때 제목(h2)만 가운데 정렬 */
|
||||
.story-layout-split .story-text h2 {
|
||||
text-align: center;
|
||||
}
|
||||
.story-layout-split .story-image {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: block; /* 이미지 영역 보이기 */
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
/*aspect-ratio: 4 / 3;*/
|
||||
}
|
||||
|
||||
/* 📌 [전체] 내용만 있는 경우 (텍스트가 중앙에 넓게 배치) */
|
||||
.story-layout-full {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.story-layout-full .story-text {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center; /* 모든 텍스트 가운데 정렬 */
|
||||
}
|
||||
.story-layout-full .story-image {
|
||||
display: none; /* 이미지/슬라이더 영역 숨김 */
|
||||
}
|
||||
|
||||
/* 공통 텍스트 스타일 */
|
||||
.story-text .subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
text-align: center; /* 💡 추가: 텍스트 가운데 정렬 */
|
||||
}
|
||||
/* h2는 각 레이아웃 클래스에서 정렬을 제어하므로 여기서는 공통 스타일만 정의 */
|
||||
.story-text h2 {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.story-text p {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
.story-text img,
|
||||
.story-text video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* --- 슬라이더(Swiper) 스타일 --- */
|
||||
.story-slider {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.story-slider .swiper-slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.story-slider img,
|
||||
.story-slider video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.story-slider .swiper-pagination-bullet {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
.story-slider .swiper-pagination-bullet-active {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* 📌 [추가] DB에 게시물이 없을 때의 기본 레이아웃 (위아래 배치) */
|
||||
.story-layout-static {
|
||||
display: flex;
|
||||
flex-direction: column; /* 💡 핵심: 아이템을 세로로 쌓습니다. */
|
||||
align-items: center; /* 가운데 정렬 */
|
||||
gap: 40px; /* 텍스트와 이미지 사이의 간격 */
|
||||
text-align: center; /* 모든 텍스트 가운데 정렬 */
|
||||
}
|
||||
|
||||
.story-layout-static .story-text {
|
||||
max-width: 800px; /* 텍스트 최대 너비 제한 */
|
||||
}
|
||||
|
||||
.story-layout-static .story-image {
|
||||
width: 100%;
|
||||
max-width: 800px; /* 이미지 최대 너비 제한 */
|
||||
}
|
||||
|
||||
.story-layout-static .story-image img {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
/* 반응형 스타일 */
|
||||
@media (max-width: 768px) {
|
||||
.story-layout-split {
|
||||
flex-direction: column;
|
||||
}
|
||||
.story-text h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 10. [모듈 전용] 이미지 팝업 모달 스타일 (개선) --- */
|
||||
.image-modal {
|
||||
display: none; /* 기본적으로 숨김 */
|
||||
position: fixed;
|
||||
z-index: 1050;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto; /* 내용이 클 경우 스크롤 */
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 20px; /* 화면 가장자리와 여백 */
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.image-modal.is-active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
/* 💡 [수정] 고정된 max-width를 제거하여 이미지 크기에 맞춰 유연하게 변하도록 합니다. */
|
||||
width: auto; /* 너비를 자동으로 설정 */
|
||||
max-width: 100%; /* 화면 너비를 넘지 않도록 설정 */
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,.5);
|
||||
animation: modal-slide-down 0.4s ease-out;
|
||||
/*overflow: hidden;*/
|
||||
display: flex; /* 내부 요소 정렬을 위해 flex 사용 */
|
||||
flex-direction: column; /* 이미지와 텍스트를 세로로 쌓음 */
|
||||
}
|
||||
|
||||
@keyframes modal-slide-down {
|
||||
from {
|
||||
transform: translateY(-50px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 💡 [핵심 수정] 이미지 자체에 최대 크기를 지정합니다. */
|
||||
.modal-content .modal-image {
|
||||
display: block;
|
||||
/* 화면 너비의 90%를 넘지 않도록 설정 */
|
||||
max-width: 90vw;
|
||||
/* 화면 높이의 80%를 넘지 않도록 설정 (텍스트 공간 확보) */
|
||||
max-height: 80vh;
|
||||
/* 💡 [핵심] 이미지가 잘리지 않고, 비율을 유지하며 주어진 공간 안에 꽉 차게 표시됩니다. */
|
||||
object-fit: contain;
|
||||
/* 💡 [수정] width와 height를 auto로 설정하여 원본 비율을 따르도록 합니다. */
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.modal-info {
|
||||
padding: 20px 25px;
|
||||
/* 💡 [추가] 텍스트가 많아질 경우를 대비 */
|
||||
max-width: 800px; /* 텍스트 영역의 최대 너비는 제한 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-info .modal-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.modal-info .modal-desc {
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 25px;
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
||||
z-index: 10; /* 이미지 위에 표시되도록 z-index 추가 */
|
||||
}
|
||||
|
||||
.close-btn:hover,
|
||||
.close-btn:focus {
|
||||
color: #ccc;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* --- 11. [개선] 가독성 향상을 위한 줄바꿈 처리 --- */
|
||||
.section-header h2,
|
||||
.section-header p,
|
||||
.product-info-trend h3,
|
||||
.product-info-trend p,
|
||||
.item-info h3,
|
||||
.item-info p {
|
||||
/* 💡 [핵심] 한글 단어가 중간에 잘리는 현상을 방지합니다. */
|
||||
word-break: keep-all;
|
||||
|
||||
/* 💡 [보완] keep-all을 보완: 매우 긴 영단어나 URL이 있을 경우
|
||||
강제로 줄바꿈하여 레이아웃이 깨지는 것을 방지합니다. */
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/* --- 12. [개선] 카드 설명 텍스트 잘림 방지 및 높이 고정 --- */
|
||||
.product-info-trend p,
|
||||
.item-info p {
|
||||
/* 1. 텍스트가 여러 줄로 표시될 수 있도록 최소/최대 높이를 확보합니다. */
|
||||
/* (폰트 크기 0.95rem * 줄간격 1.6 * 2줄) */
|
||||
height: 3.04rem;
|
||||
|
||||
/* 2. 웹킷 브라우저(크롬, 사파리 등)를 위한 멀티라인 생략(...) 처리 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 💡 최대 2줄까지만 표시합니다. */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* 3. 줄간격을 다시 한번 명확하게 지정합니다. */
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
/* --- 13. [개선] 모달 스크롤바 스타일링 (보였다 사라지는 효과) --- */
|
||||
/* Firefox 스크롤바 스타일 */
|
||||
.image-modal {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
|
||||
}
|
||||
|
||||
/* Webkit 브라우저 (크롬, 사파리 등) 스크롤바 스타일 */
|
||||
.image-modal::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.image-modal::-webkit-scrollbar-track {
|
||||
background: transparent; /* 트랙은 항상 투명 */
|
||||
}
|
||||
|
||||
/* 기본 상태에서는 스크롤바 막대를 투명하게 만듭니다. */
|
||||
.image-modal::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* 모달 위에 마우스를 올렸을 때만 스크롤바 막대가 보이도록 합니다. */
|
||||
.image-modal:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
// 이 스크립트는 main_visual 모듈이 로드될 때 즉시 실행됩니다.
|
||||
(function() {
|
||||
const storySliderEl = document.querySelector('.story-slider');
|
||||
|
||||
// 슬라이더 요소가 없거나, 이미 초기화되었다면 중복 실행을 방지합니다.
|
||||
if (!storySliderEl || storySliderEl.classList.contains('swiper-initialized')) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 슬라이더 내의 모든 비디오를 찾아 리셋하는 함수
|
||||
* @param {HTMLElement} sliderElement - 슬라이더 컨테이너 요소
|
||||
*/
|
||||
const resetAllVideos = (sliderElement) => {
|
||||
sliderElement.querySelectorAll('video').forEach(video => {
|
||||
if (!video.paused) {
|
||||
video.pause();
|
||||
}
|
||||
video.currentTime = 0;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 현재 활성화된 슬라이드를 처리하는 함수
|
||||
* @param {object} swiper - Swiper 인스턴스
|
||||
*/
|
||||
const handleActiveSlide = (swiper) => {
|
||||
// 💡 [안정성 강화] swiper 객체가 유효한지 확인 후 진행합니다.
|
||||
if (!swiper || !swiper.el) {
|
||||
console.error("handleActiveSlide: 유효하지 않은 Swiper 인스턴스입니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 다른 모든 비디오를 먼저 리셋합니다.
|
||||
resetAllVideos(swiper.el);
|
||||
|
||||
const activeSlide = swiper.slides[swiper.activeIndex];
|
||||
const activeVideo = activeSlide?.querySelector('video');
|
||||
|
||||
if (activeSlide?.dataset?.type === 'video' && activeVideo) {
|
||||
// 활성 슬라이드가 비디오일 경우, 자동재생을 멈춥니다.
|
||||
swiper.autoplay.stop();
|
||||
|
||||
// 비디오를 재생합니다. (브라우저 정책에 의한 실패 대비)
|
||||
activeVideo.play().catch(error => {
|
||||
console.error("비디오 자동재생이 차단되었습니다:", error);
|
||||
// 재생에 실패하면 다음 슬라이드로 즉시 이동합니다.
|
||||
swiper.slideNext();
|
||||
});
|
||||
|
||||
// 비디오가 끝나면 다음 슬라이드로 이동하도록 이벤트를 설정합니다.
|
||||
activeVideo.onended = () => {
|
||||
swiper.slideNext();
|
||||
};
|
||||
} else {
|
||||
// 활성 슬라이드가 이미지일 경우, 자동재생을 다시 시작합니다.
|
||||
swiper.autoplay.start();
|
||||
}
|
||||
};
|
||||
|
||||
// Swiper 라이브러리가 로드되었는지 확인 후 슬라이더를 초기화합니다.
|
||||
if (typeof Swiper !== 'undefined') {
|
||||
const swiper = new Swiper(storySliderEl, {
|
||||
loop: true,
|
||||
effect: 'fade',
|
||||
fadeEffect: {
|
||||
crossFade: true
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
autoplay: {
|
||||
delay: 5000, // 💡 [개선] 비디오 재생을 고려하여 딜레이를 5초로 늘립니다.
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
on: {
|
||||
// 💡 [수정] 'this'를 사용하여 Swiper 인스턴스를 안정적으로 전달합니다.
|
||||
slideChange: function () {
|
||||
handleActiveSlide(this);
|
||||
},
|
||||
init: function () {
|
||||
handleActiveSlide(this);
|
||||
}
|
||||
}
|
||||
});
|
||||
// 초기화되었음을 표시하여 중복 실행을 막습니다.
|
||||
storySliderEl.classList.add('swiper-initialized');
|
||||
} else {
|
||||
console.error('Swiper 라이브러리가 로드되지 않았습니다.');
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,80 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// --- (기존 PHP 데이터 처리 코드는 그대로 둡니다) ---
|
||||
$main_visual_post = null;
|
||||
$main_visual_files = [];
|
||||
$layout_class = '';
|
||||
$today = G5_TIME_YMD;
|
||||
|
||||
$sql = " SELECT * FROM {$g5['write_prefix']}main_visual
|
||||
WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_1 = 'IMMEDIATE' OR (wr_1 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
|
||||
ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply LIMIT 1 ";
|
||||
$main_visual_post = sql_fetch($sql);
|
||||
|
||||
if ($main_visual_post) {
|
||||
$layout_class = 'story-layout-full';
|
||||
$temp_files = get_file('main_visual', $main_visual_post['wr_id']);
|
||||
if (isset($temp_files) && $temp_files['count'] > 0) {
|
||||
for ($i = 0; $i < $temp_files['count']; $i++) {
|
||||
if (!isset($temp_files[$i]['file']) || !$temp_files[$i]['file']) continue;
|
||||
$file_ext = strtolower(pathinfo($temp_files[$i]['file'], PATHINFO_EXTENSION));
|
||||
$is_video = in_array($file_ext, ['mp4', 'mov', 'webm']);
|
||||
$main_visual_files[] = ['url' => $temp_files[$i]['path'].'/'.$temp_files[$i]['file'], 'type' => $is_video ? 'video' : 'image'];
|
||||
}
|
||||
}
|
||||
$has_media_in_content = preg_match('/<img|<video/i', $main_visual_post['wr_content']);
|
||||
if ($has_media_in_content) {
|
||||
$layout_class = (count($main_visual_files) > 0) ? 'story-layout-split' : 'story-layout-full';
|
||||
} else {
|
||||
$layout_class = (count($main_visual_files) > 0) ? 'story-layout-static' : 'story-layout-full';
|
||||
}
|
||||
} else {
|
||||
$layout_class = 'story-layout-static';
|
||||
}
|
||||
// --- (PHP 코드 끝) ---
|
||||
?>
|
||||
|
||||
<!-- 💡 [최종 수정] section에 'rb-autounwrap' 클래스를 추가하여 스마트 모듈임을 선언합니다. -->
|
||||
<section id="story" class="story-section">
|
||||
<div class="container <?php echo $layout_class; ?>">
|
||||
<?php if ($main_visual_post) { // 표시할 게시물이 있을 경우 ?>
|
||||
<div class="story-text">
|
||||
<span class="subtitle">Our Vision</span>
|
||||
<h2><?php echo get_text($main_visual_post['wr_subject']); ?></h2>
|
||||
<?php echo conv_content($main_visual_post['wr_content'], 1); ?>
|
||||
</div>
|
||||
<div class="story-image">
|
||||
<?php if (count($main_visual_files) > 0) { // 첨부파일이 있을 경우 슬라이더 표시 ?>
|
||||
<div class="swiper-container story-slider">
|
||||
<div class="swiper-wrapper">
|
||||
<?php foreach ($main_visual_files as $file) { ?>
|
||||
<div class="swiper-slide" data-type="<?php echo $file['type']; ?>">
|
||||
<?php if ($file['type'] === 'video') { ?>
|
||||
<video src="<?php echo $file['url']; ?>" muted playsinline loop autoplay></video>
|
||||
<?php } else { ?>
|
||||
<img src="<?php echo $file['url']; ?>" alt="메인 비주얼 이미지">
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php } else { // 표시할 게시물이 없을 경우 (기존 정적 내용) ?>
|
||||
<div class="story-text">
|
||||
<span class="subtitle">Our Vision</span>
|
||||
<h2>문을 열면, 삶이 달라져야 한다고 믿습니다.</h2>
|
||||
<p>성진미도어는 국내 중문 시장 최초로 여닫이와 미닫이 기능을 복합한 ‘프리도어’를 개발했습니다. 시판과 특판 모두를 아우를 수 있는 기술력으로, 일상의 흐름을 바꾸는 문을 만듭니다. 중문 시장의 한줄기 빛이 되도록, 오늘도 한 걸음 더 나아갑니다.</p>
|
||||
</div>
|
||||
<div class="story-image">
|
||||
<img src="<?php echo G5_THEME_URL ?>/img/mainimage/main1.png" alt="미래 지향적인 디자인의 문">
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 💡 [핵심] 이 모듈에 필요한 CSS와 JS 파일을 모두 이곳에서 직접 불러옵니다. -->
|
||||
<link rel="stylesheet" href="<?php echo G5_THEME_URL; ?>/rb.custom/main_visual/module.css?ver=<?php echo G5_CSS_VER; ?>">
|
||||
<script src="<?php echo G5_THEME_URL; ?>/rb.custom/main_visual/module.js?ver=<?php echo G5_JS_VER; ?>"></script>
|
||||
Reference in New Issue
Block a user