메인 화면 모바일 디자인 적용
This commit is contained in:
현성필
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -438,6 +438,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
// PC/Mobile visibility classes
|
||||
.pc {
|
||||
display: block;
|
||||
|
||||
@include respond-to('sm') {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: none;
|
||||
|
||||
@include respond-to('sm') {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Cursor utilities
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -139,40 +139,125 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile responsive adjustments
|
||||
@media (max-width: 576px) {
|
||||
// Mobile responsive adjustments (sm: 768px)
|
||||
@include respond-to('sm') {
|
||||
.global-footer {
|
||||
.container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
// Figma 모바일: 세로 배치, gap 12px
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 24px 0;
|
||||
gap: 24px;
|
||||
gap: 12px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
gap: 12px;
|
||||
// Figma 모바일: 로고와 링크/저작권 분리
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
|
||||
.footer-logo {
|
||||
width: 90px;
|
||||
// Figma 모바일: 72px 너비
|
||||
width: 72px;
|
||||
order: -2;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
gap: 9px;
|
||||
order: 1;
|
||||
|
||||
.footer-link {
|
||||
// Figma 모바일: 11px, #212529
|
||||
font-size: 11px;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.footer-link,
|
||||
.footer-separator {
|
||||
font-size: 14px;
|
||||
font-size: 11px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 12px;
|
||||
// Figma 모바일: 10px, #5f666c
|
||||
font-size: 10px;
|
||||
color: #5f666c;
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
gap: 12px;
|
||||
// Figma 모바일: 관련사이트가 로고 아래, 고객센터가 링크 아래
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
order: 0;
|
||||
|
||||
.footer-related-sites {
|
||||
width: 100%;
|
||||
order: -1;
|
||||
|
||||
.related-sites-select {
|
||||
// Figma 모바일: 전체 너비, 44px 높이, border-radius 8px, 12px 폰트
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
border-color: #dadada;
|
||||
color: #8c959f;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
font-size: 20px;
|
||||
// Figma 모바일: 11px, #212529
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma 모바일 레이아웃 재정렬 (flex order 사용)
|
||||
@include respond-to('sm') {
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// 순서: 로고 → 드롭다운 → 링크 → 고객센터 → 저작권
|
||||
.footer-left {
|
||||
display: contents;
|
||||
|
||||
.footer-logo {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
order: 5;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: contents;
|
||||
|
||||
.footer-related-sites {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
order: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -207,18 +207,47 @@
|
||||
}
|
||||
|
||||
// ===========================
|
||||
// Mobile Header Components
|
||||
// Mobile Header Components (Figma Design)
|
||||
// 375px 기준 반응형 - clamp() 사용하여 화면 크기에 비례
|
||||
// ===========================
|
||||
.mobile-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// 375px 기준 8px → 8/375*100 ≈ 2.13vw, 범위: 8px ~ 12px
|
||||
gap: clamp(8px, 2.13vw, 12px);
|
||||
|
||||
.mobile-logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
height: 32px;
|
||||
// Figma: 로고 이미지 - 375px 기준 16px
|
||||
// 16/375*100 ≈ 4.27vw, 범위: 16px ~ 24px
|
||||
height: clamp(16px, 4.27vw, 24px);
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.mobile-logo-text {
|
||||
// Figma: API Portal 텍스트 - 375px 기준 14px
|
||||
// 14/375*100 ≈ 3.73vw, 범위: 14px ~ 18px
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: clamp(14px, 3.73vw, 18px);
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: #0049B4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-center {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
// Figma: API Portal 텍스트 숨김 (로고에 포함)
|
||||
display: none;
|
||||
|
||||
.mobile-title {
|
||||
font-size: 18px;
|
||||
@@ -229,9 +258,15 @@
|
||||
}
|
||||
|
||||
.mobile-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mobile-menu-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
// Figma: 24x24px 터치 영역, 16x16px 아이콘
|
||||
// 375px 기준 반응형 - clamp() 사용
|
||||
// 24/375*100 ≈ 6.4vw, 범위: 24px ~ 32px
|
||||
width: clamp(24px, 6.4vw, 32px);
|
||||
height: clamp(24px, 6.4vw, 32px);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -239,19 +274,23 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
// 3/375*100 ≈ 0.8vw, 범위: 3px ~ 5px
|
||||
gap: clamp(3px, 0.8vw, 5px);
|
||||
// 4/375*100 ≈ 1.07vw, 범위: 4px ~ 6px
|
||||
padding: clamp(4px, 1.07vw, 6px);
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--gray-bg);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.hamburger-line {
|
||||
width: 24px;
|
||||
// Figma: 햄버거 라인 스타일 - 375px 기준 16px
|
||||
// 16/375*100 ≈ 4.27vw, 범위: 16px ~ 22px
|
||||
width: clamp(16px, 4.27vw, 22px);
|
||||
height: 2px;
|
||||
background: var(--text-dark);
|
||||
background: #515961;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
@@ -259,13 +298,13 @@
|
||||
&.active {
|
||||
.hamburger-line {
|
||||
&:nth-child(1) {
|
||||
transform: rotate(45deg) translateY(6px);
|
||||
transform: rotate(45deg) translateY(5px);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
transform: rotate(-45deg) translateY(-6px);
|
||||
transform: rotate(-45deg) translateY(-5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -789,37 +828,40 @@ body {
|
||||
|
||||
// ===========================
|
||||
// Mobile Responsive Design
|
||||
// 375px 기준 반응형 - clamp() 사용하여 화면 크기에 비례
|
||||
// ===========================
|
||||
@media (max-width: 768px) {
|
||||
.global-header {
|
||||
height: 90px;
|
||||
// Figma: 44px 높이, 반투명 배경
|
||||
// 375px 기준 44px → 44/375*100 ≈ 11.73vw, 범위: 44px ~ 60px
|
||||
height: clamp(44px, 11.73vw, 60px);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-bottom: none;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
background-color: #FEFEFE;
|
||||
}
|
||||
|
||||
.container .header-content {
|
||||
padding: 0 16px;
|
||||
height: 60px;
|
||||
// Figma: 좌 20px, 우 16px 패딩
|
||||
// 20/375*100 ≈ 5.33vw, 범위: 20px ~ 28px
|
||||
// 16/375*100 ≈ 4.27vw, 범위: 16px ~ 24px
|
||||
padding: 0 clamp(16px, 4.27vw, 24px) 0 clamp(20px, 5.33vw, 28px);
|
||||
height: clamp(44px, 11.73vw, 60px);
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 60px; // Smaller header on mobile
|
||||
// 헤더 높이와 동일하게 반응형 적용
|
||||
padding-top: clamp(44px, 11.73vw, 60px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.global-header {
|
||||
.header-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
.logo-text {
|
||||
display: none; // Hide logo text on very small screens
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ===========================
|
||||
// Header User Info (Authenticated State)
|
||||
// ===========================
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -181,8 +181,7 @@
|
||||
<span class="title-highlight">광주은행 API Portal</span>
|
||||
</h2>
|
||||
<p class="info-description">
|
||||
광주은행 API Portal은 기업이 금융 서비스를 편리하게 개발할 수<br>
|
||||
있도록 차별화된 API와 테스트환경을 제공합니다.
|
||||
광주은행 API Portal은 기업이 금융 서비스를 편리하게 개발할 수 있도록 차별화된 API와 테스트환경을 제공합니다.
|
||||
</p>
|
||||
|
||||
<div class="action-buttons">
|
||||
@@ -220,7 +219,8 @@
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>공지사항</h3>
|
||||
<p>광주은행 API의 새로운 소식을 확인해보세요.</p>
|
||||
<p class="pc">광주은행 API의 새로운 소식을 확인해보세요.</p>
|
||||
<p class="mobile">광주은행 API의 <br/>새로운 소식</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
@@ -76,20 +76,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Header Layout -->
|
||||
<!-- Mobile Header Layout (Figma Design) -->
|
||||
<div class="mobile-header">
|
||||
<div class="mobile-left">
|
||||
<a th:href="@{/}" class="mobile-logo-link">
|
||||
<img src="/img/logo/logo.png" alt="광주은행" class="mobile-logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mobile-center">
|
||||
<h1 class="mobile-title">개발자 포털</h1>
|
||||
<a th:href="@{/}" class="mobile-logo-text">API Potal</a>
|
||||
</div>
|
||||
|
||||
<div class="mobile-right">
|
||||
<button class="mobile-menu-btn" id="mobileMenuToggle">
|
||||
<button class="mobile-menu-btn" id="mobileMenuToggle" aria-label="메뉴">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
|
||||
Reference in New Issue
Block a user