fix: 사이트 레이아웃 개선
- 사이트 전체 min-width 1200px → 1440px로 변경 - 헤더/갤러리 양쪽 여백 통일 (px-24) - 갤러리 CSS 정리 (호버 효과만 유지)
This commit is contained in:
parent
326cb02df6
commit
a5eba6535f
3 changed files with 3 additions and 16 deletions
|
|
@ -19,7 +19,7 @@ function Header() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="bg-white shadow-sm sticky top-0 z-50">
|
<header className="bg-white shadow-sm sticky top-0 z-50">
|
||||||
<div className="max-w-7xl mx-auto px-6">
|
<div className="px-24">
|
||||||
<div className="flex items-center justify-between h-16">
|
<div className="flex items-center justify-between h-16">
|
||||||
{/* 로고 */}
|
{/* 로고 */}
|
||||||
<NavLink to="/" className="flex items-center gap-2">
|
<NavLink to="/" className="flex items-center gap-2">
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ body {
|
||||||
|
|
||||||
/* 최소 너비 설정 - 화면 축소시 깨짐 방지 */
|
/* 최소 너비 설정 - 화면 축소시 깨짐 방지 */
|
||||||
#root {
|
#root {
|
||||||
min-width: 1200px;
|
min-width: 1440px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 스크롤바 스타일 */
|
/* 스크롤바 스타일 */
|
||||||
|
|
|
||||||
|
|
@ -62,25 +62,12 @@ const galleryStyles = `
|
||||||
transition: transform 0.3s ease, filter 0.3s ease !important;
|
transition: transform 0.3s ease, filter 0.3s ease !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
animation: fadeInUp 0.4s ease-out backwards;
|
|
||||||
}
|
}
|
||||||
.react-photo-album--photo:hover {
|
.react-photo-album--photo:hover {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
filter: brightness(0.9);
|
filter: brightness(0.9);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
/* 순차적 로드 애니메이션 */
|
|
||||||
.react-photo-album--photo:nth-child(1) { animation-delay: 0.02s; }
|
|
||||||
.react-photo-album--photo:nth-child(2) { animation-delay: 0.04s; }
|
|
||||||
.react-photo-album--photo:nth-child(3) { animation-delay: 0.06s; }
|
|
||||||
.react-photo-album--photo:nth-child(4) { animation-delay: 0.08s; }
|
|
||||||
.react-photo-album--photo:nth-child(5) { animation-delay: 0.1s; }
|
|
||||||
.react-photo-album--photo:nth-child(6) { animation-delay: 0.12s; }
|
|
||||||
.react-photo-album--photo:nth-child(7) { animation-delay: 0.14s; }
|
|
||||||
.react-photo-album--photo:nth-child(8) { animation-delay: 0.16s; }
|
|
||||||
.react-photo-album--photo:nth-child(9) { animation-delay: 0.18s; }
|
|
||||||
.react-photo-album--photo:nth-child(10) { animation-delay: 0.2s; }
|
|
||||||
.react-photo-album--photo:nth-child(n+11) { animation-delay: 0.22s; }
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function AlbumGallery() {
|
function AlbumGallery() {
|
||||||
|
|
@ -251,7 +238,7 @@ function AlbumGallery() {
|
||||||
transition={{ duration: 0.3 }}
|
transition={{ duration: 0.3 }}
|
||||||
className="py-16"
|
className="py-16"
|
||||||
>
|
>
|
||||||
<div className="container mx-auto px-4">
|
<div className="px-24">
|
||||||
{/* 브레드크럼 스타일 헤더 */}
|
{/* 브레드크럼 스타일 헤더 */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
|
<div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue