웹 메인페이지 풋터 및 레이아웃 간격 스크롤 수정

This commit is contained in:
sungro815 2026-01-08 18:13:10 +09:00
parent 7f61430b40
commit 72718fa852
6 changed files with 374 additions and 83 deletions

View File

@ -158,8 +158,26 @@ h1, h2, h3, h4, h5, h6 {
} }
.text-h1 { font-size: 32px; line-height: 40px; } .text-h1 { font-size: 32px; line-height: 40px; }
.text-h2 { font-size: 22px; line-height: 28px; font-weight: 600; } .text-h2 {
.text-body { font-size: 16px; } margin: 0;
font-size: 15px; /* 여기서 더 줄이고 싶으면 15px */
line-height: 22px;
font-weight: 800;
color: #111827;
letter-spacing: -0.2px;
}
.text-h2::before{
content: none !important;
}
.text-body{
margin: 0;
font-size: 14px; /* 원래 크기 */
line-height: 20px;
color: #6B7280;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.text-sm { font-size: 14px; } .text-sm { font-size: 14px; }
.text-xs { font-size: 12px; } .text-xs { font-size: 12px; }
@ -473,20 +491,51 @@ h1, h2, h3, h4, h5, h6 {
} }
/* Sections */ /* Sections */
.section { .section{
padding: 60px 0; padding: 25px 0; /* 더 타이트 */
}
.section + .section{
padding-top: 16px; /* 섹션 사이 과한 간격 제거 */
} }
.section-header { .section-header{
display: flex; margin-bottom: 10px;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 24px;
} }
.section-title h2 { .section-title{
font-size: 28px; display: flex !important;
margin-bottom: 8px; align-items: center !important;
gap: 12px !important;
flex-wrap: nowrap !important;
min-width: 0 !important;
}
.section-title .text-h2{
margin: 0 !important;
font-size: 22px !important;
line-height: 22px !important;
font-weight: 800 !important;
color: #111827 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
flex: 0 0 auto !important;
}
.section-title .text-h2::before{
content: none !important;
}
.section-title .text-body{
margin: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
color: #6B7280 !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
flex: 1 1 auto !important;
} }
.section-title p { .section-title p {
@ -494,21 +543,45 @@ h1, h2, h3, h4, h5, h6 {
} }
/* Snap Carousel (Monthly Deals) */ /* Snap Carousel (Monthly Deals) */
.snap-carousel { .snap-carousel{
display: flex; display:flex;
gap: 24px; gap:16px;
overflow-x: auto; overflow-x:auto;
scroll-snap-type: x mandatory; overflow-y:hidden;
padding-bottom: 24px; /* for shadow */ -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding-bottom: 8px;
}
.snap-carousel > *{
scroll-snap-align: start; /* 원치 않으면 삭제 */
flex: 0 0 auto;
} }
.snap-carousel::-webkit-scrollbar { display: none; }
.snap-item { .snap-carousel::-webkit-scrollbar{ height: 8px; }
scroll-snap-align: start; .snap-carousel::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; }
.snap-item{
flex: 0 0 280px; flex: 0 0 280px;
} }
#popular .snap-item{
flex-basis: 200px;
}
.snap-carousel{
scrollbar-width: thin; /* Firefox */
}
.snap-carousel::-webkit-scrollbar{
height: 8px;
}
.snap-carousel::-webkit-scrollbar-thumb{
background: rgba(0,0,0,.15);
border-radius: 999px;
}
.snap-carousel::-webkit-scrollbar-track{
background: transparent;
}
/* Filter Tabs */ /* Filter Tabs */
.filter-tabs { .filter-tabs {
display: flex; display: flex;
@ -621,6 +694,7 @@ h1, h2, h3, h4, h5, h6 {
.tag-green{ background:#ECFDF5; border-color:#A7F3D0; color:#047857; } .tag-green{ background:#ECFDF5; border-color:#A7F3D0; color:#047857; }
.tag-sky{ background:#F0F9FF; border-color:#BAE6FD; color:#0369A1; } .tag-sky{ background:#F0F9FF; border-color:#BAE6FD; color:#0369A1; }
@media (max-width: 480px) { @media (max-width: 480px) {
.logo-img{ .logo-img{
height: 34px; /* 모바일에선 낮춰서 공간 확보 */ height: 34px; /* 모바일에선 낮춰서 공간 확보 */
@ -655,6 +729,13 @@ h1, h2, h3, h4, h5, h6 {
padding:0 12px; padding:0 12px;
font-size:12.5px; font-size:12.5px;
} }
.section-title .text-h2{ font-size: 15px !important; }
.section-title .text-body{ font-size: 13px !important; }
.text-body{
display: none;
}
} }
@ -672,9 +753,9 @@ h1, h2, h3, h4, h5, h6 {
.hero-title { font-size: 28px; } .hero-title { font-size: 28px; }
.search-bar { /* .search-bar {
display: none; /* Handle mobile search differently */ display: none; !* Handle mobile search differently *!
} }*/
.footer-grid { .footer-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -686,3 +767,154 @@ h1, h2, h3, h4, h5, h6 {
padding-right: 24px; padding-right: 24px;
} }
} }
/* ===== Footer: modern & clean (light) ===== */
.site-footer{
background:#F8FAFC;
border-top: 1px solid #E5E7EB;
padding: 44px 0 28px;
margin-top: 48px;
color:#0F172A;
}
.footer-top{
display:grid;
grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
gap: 28px;
align-items:start;
}
.footer-title{
font-size: 13px;
font-weight: 800;
margin-bottom: 12px;
color:#0F172A;
}
.footer-brand-logo{ display:inline-flex; align-items:center; }
.footer-logo-img{ height: 50px; width:auto; display:block; }
.footer-desc{
margin-top: 10px;
font-size: 13px;
line-height: 1.6;
color:#64748B;
}
.footer-copy{
margin-top: 14px;
font-size: 12px;
color:#94A3B8;
}
.footer-link-list{ display:flex; flex-direction:column; gap: 10px; }
.footer-link{
color:#475569;
font-size: 13px;
}
.footer-link:hover{ color:#2563EB; }
.footer-link-strong{ font-weight: 800; color:#111827; }
/* contact KV */
.footer-kv{ display:flex; flex-direction:column; gap: 10px; }
.footer-kv-row{
display:grid;
grid-template-columns: 72px 1fr;
gap: 10px;
font-size: 13px;
color:#475569;
}
.footer-k{ color:#94A3B8; }
.footer-v{ color:#334155; }
/* payment */
.footer-payment-col .footer-payment{
display:flex;
flex-direction:column;
gap: 8px;
}
.footer-payment--mt{ margin-top: 14px; }
.footer-pay-img{
width:auto;
max-width: 100%;
height:auto;
display:block;
}
.footer-pay-caption{
font-size: 12px;
color:#64748B;
}
/* divider */
.footer-divider{
height:1px;
background:#E5E7EB;
margin: 24px 0 16px;
}
/* bottom details */
.footer-details{
background:#FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 12px 14px;
}
.footer-summary{
cursor:pointer;
font-size: 13px;
font-weight: 800;
color:#111827;
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
list-style:none;
}
.footer-summary::-webkit-details-marker{ display:none; }
.footer-summary-hint{
font-size: 12px;
font-weight: 700;
color:#2563EB;
}
.footer-details[open] .footer-summary-hint{
color:#64748B;
}
.footer-info{
margin-top: 12px;
display:grid;
gap: 8px;
}
.footer-info-row{
display:grid;
grid-template-columns: 130px 1fr;
gap: 12px;
font-size: 12.5px;
color:#475569;
}
.footer-info-row span{ color:#94A3B8; }
.footer-info-row b{ color:#334155; font-weight:700; }
/* responsive */
@media (max-width: 1024px){
.footer-top{
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px){
.footer-top{
grid-template-columns: 1fr;
gap: 20px;
}
.footer-info-row{
grid-template-columns: 1fr;
gap: 4px;
}
}

View File

@ -125,5 +125,4 @@ document.addEventListener('DOMContentLoaded', () => {
alert('모바일 메뉴 드로어 열림 (구현 예정)'); alert('모바일 메뉴 드로어 열림 (구현 예정)');
}); });
} }
}); });

View File

@ -1,38 +1,100 @@
<footer class="site-footer"> <footer class="site-footer">
<div class="container footer-grid"> <div class="container">
<!-- Col 1: Brand -->
<div> {{-- Top --}}
<div style="font-size: 20px; font-weight: 700; color: white; margin-bottom: 16px;">GIFTICON</div> <div class="footer-top">
<p style="font-size: 14px; color: #9CA3AF; line-height: 1.6;"> {{-- Brand --}}
대한민국 1 상품권 거래소.<br> <div class="footer-brand">
안전하고 빠른 거래를 약속드립니다. <a href="{{ url('/') }}" class="footer-brand-logo" aria-label="홈으로">
</p> <img src="{{ asset('assets/images/common/bottom_logo.png') }}"
<div style="margin-top: 24px; font-size: 12px; color: #6B7280;"> alt="PIN FOR YOU"
© 2024 Gifticon Corp. All rights reserved. class="footer-logo-img">
</a>
<p class="footer-desc">
대한민국 1 상품권 거래소.<br>
안전하고 빠른 거래를 약속드립니다.
</p>
<div class="footer-copy">
© 2018 plusmaker Corp. All rights reserved.
</div>
</div>
{{-- Links --}}
<div class="footer-links">
<h4 class="footer-title">고객지원</h4>
<div class="footer-link-list">
<a href="#" class="footer-link">공지사항</a>
<a href="#" class="footer-link">자주 묻는 질문</a>
<a href="#" class="footer-link">1:1 문의</a>
<a href="#" class="footer-link">이용약관</a>
<a href="#" class="footer-link footer-link-strong">개인정보처리방침</a>
</div>
</div>
{{-- Contact --}}
<div class="footer-contact">
<h4 class="footer-title">Contact</h4>
<div class="footer-kv">
<div class="footer-kv-row">
<span class="footer-k">고객센터</span>
<span class="footer-v">1833-4856</span>
</div>
<div class="footer-kv-row">
<span class="footer-k">운영시간</span>
<span class="footer-v">평일 09:00 - 18:00</span>
</div>
<div class="footer-kv-row">
<span class="footer-k">메일</span>
<span class="footer-v">master@plusmaker.co.kr</span>
</div>
</div>
</div>
{{-- Payment --}}
<div class="footer-payment-col">
<h4 class="footer-title">Payment</h4>
<div class="footer-payment">
<img class="footer-pay-img"
src="{{ asset('assets/images/web/escrow_logo.png') }}"
alt="Danal escrow service" style="width:60px">
<div class="footer-pay-caption">Danal escrow service</div>
</div>
<div class="footer-payment footer-payment--mt">
<img class="footer-pay-img"
src="{{ asset('assets/images/web/payment-method.png') }}"
alt="Secured Payment Gateways" style="width:170px">
<div class="footer-pay-caption">Secured Payment Gateways</div>
</div>
</div> </div>
</div> </div>
<!-- Col 2: Links --> {{-- Divider --}}
<div> <div class="footer-divider"></div>
<h4 style="color: white; margin-bottom: 20px;">고객지원</h4>
<a href="#" class="footer-link">공지사항</a> {{-- Bottom: Corporation Info (collapsible) --}}
<a href="#" class="footer-link">자주 묻는 질문</a> <div class="footer-bottom">
<a href="#" class="footer-link">1:1 문의</a> <details class="footer-details">
<a href="#" class="footer-link">이용약관</a> <summary class="footer-summary">
<a href="#" class="footer-link" style="font-weight: 600;">개인정보처리방침</a> 사업자 정보 (Corporation info)
<span class="footer-summary-hint">펼치기</span>
</summary>
<div class="footer-info">
<div class="footer-info-row"><span>상호</span><b>() 플러스메이커</b></div>
<div class="footer-info-row"><span>대표</span><b>송병수</b></div>
<div class="footer-info-row"><span>주소</span><b>전북특별자치도 전주시 완산구 용마리로 94, 4 451</b></div>
<div class="footer-info-row"><span>전화</span><b>1833-4856</b></div>
<div class="footer-info-row"><span>메일</span><b>master@plusmaker.co.kr</b></div>
<div class="footer-info-row"><span>사업자등록번호</span><b>121-88-01191</b></div>
<div class="footer-info-row"><span>통신판매업신고번호</span><b> 2018-전주완산-0705</b></div>
<div class="footer-info-row"><span>개인정보관리책임자</span><b>송병수</b></div>
</div>
</details>
</div> </div>
<!-- Col 3: Contact -->
<div>
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
<p style="margin-bottom: 8px;">고객센터: 1544-0000</p>
<p style="margin-bottom: 8px;">운영시간: 평일 09:00 - 18:00</p>
<p style="margin-bottom: 24px;">이메일: help@gifticon.com</p>
<div style="padding: 12px; background: rgba(255,255,255,0.05); border-radius: 8px;">
<p style="font-size: 12px; color: #9CA3AF; margin-bottom: 4px;">구매안전 서비스</p>
<p style="font-size: 13px; color: white;">KG Inicis 에스크로 적용됨</p>
</div>
</div>
</div> </div>
</footer> </footer>

View File

@ -11,8 +11,8 @@
<nav class="desktop-nav" aria-label="주요 메뉴"> <nav class="desktop-nav" aria-label="주요 메뉴">
<a href="/" class="nav-link">HOME</a> <a href="/" class="nav-link">HOME</a>
<a href="/shop" class="nav-link">SHOP</a> <a href="/shop" class="nav-link nav-link--exchange">SHOP</a>
<a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</a> {{-- <a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</a>--}}
<a href="/mypage" class="nav-link">마이페이지</a> <a href="/mypage" class="nav-link">마이페이지</a>
<a href="/cs" class="nav-link">고객센터</a> <a href="/cs" class="nav-link">고객센터</a>
</nav> </nav>

View File

@ -1,20 +1,18 @@
<div style="overflow-x: auto; padding-bottom: 24px;"> <div class="snap-carousel">
<div style="display: flex; gap: 16px;"> @for($i = 1; $i <= 8; $i++)
@for($i = 1; $i <= 8; $i++) <div class="snap-item" style="flex: 0 0 200px;">
<div style="flex: 0 0 200px;"> <div class="product-card">
<div class="product-card"> <div class="card-thumb" style="aspect-ratio: 1/1;">
<div class="card-thumb" style="aspect-ratio: 1/1;"> <span style="color: #9CA3AF;">Icon</span>
<span style="color: #9CA3AF;">Icon</span> </div>
</div> <div class="card-body" style="padding: 12px;">
<div class="card-body" style="padding: 12px;"> <h3 class="card-title" style="font-size: 14px; height: 40px;">해피머니 상품권 {{$i}}만원권</h3>
<h3 class="card-title" style="font-size: 14px; height: 40px;">해피머니 상품권 {{$i}}만원권</h3> <div class="card-price-area">
<div class="card-price-area"> <span class="discount" style="font-size: 16px;">-5%</span>
<span class="discount" style="font-size: 16px;">-5%</span> <span class="price" style="font-size: 16px;">{{$i}}9,000</span>
<span class="price" style="font-size: 16px;">{{$i}}9,000</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@endfor </div>
</div> @endfor
</div> </div>