+
© 2026 sori.studio
+
+ All rights reserved.
-
-
by zenn
+
+
+ Designed by
+ zenn
+
diff --git a/scripts/modal.js b/scripts/modal.js
index 1f8a70f..03f8212 100644
--- a/scripts/modal.js
+++ b/scripts/modal.js
@@ -136,8 +136,11 @@ export function openModal(id) {
};
}
+ window.history.pushState({ modalOpen: true }, '', '');
+
modal.classList.remove('hidden');
- document.body.style.overflow = 'hidden';
+ // document.body.style.overflow = 'hidden';
+ document.body.classList.add('modal-open');
const container = document.getElementById('modal-main-carousel-container');
container.style.scrollBehavior = 'auto';
@@ -148,7 +151,25 @@ export function openModal(id) {
export function closeModal() {
document.getElementById('product-modal').classList.add('hidden');
- document.body.style.overflow = 'auto';
+ document.body.classList.remove('modal-open');
+
+ if (window.history.state && window.history.state.modalOpen) {
+ window.history.back();
+ }
+
const cleanUrl = window.location.origin + window.location.pathname;
window.history.replaceState(null, '', cleanUrl);
}
+
+// --- 뒤로가기 감지 이벤트 리스너 ---
+// 사용자가 브라우저 뒤로가기 버튼(또는 모바일 뒤로가기 제스처)을 누를 때 실행됩니다.
+window.addEventListener('popstate', (event) => {
+ const modal = document.getElementById('product-modal');
+ // 모달이 열려있는 상태에서 뒤로가기가 발생했다면 모달만 닫음
+ if (!modal.classList.contains('hidden')) {
+ // 이때 closeModal()을 호출하되, 이미 뒤로 이동한 상태이므로
+ // closeModal 내부의 history.back()이 중복 실행되지 않게 주의
+ modal.classList.add('hidden');
+ document.body.classList.remove('modal-open');
+ }
+});
diff --git a/style/tailwind.css b/style/tailwind.css
index 06eaf45..0307292 100644
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -352,14 +352,11 @@
.mb-3 {
margin-bottom: calc(var(--spacing) * 3);
}
- .mb-4 {
- margin-bottom: calc(var(--spacing) * 4);
- }
.mb-6 {
margin-bottom: calc(var(--spacing) * 6);
}
- .mb-8 {
- margin-bottom: calc(var(--spacing) * 8);
+ .mb-10 {
+ margin-bottom: calc(var(--spacing) * 10);
}
.ml-0 {
margin-left: calc(var(--spacing) * 0);
@@ -382,6 +379,10 @@
.aspect-\[4\/5\] {
aspect-ratio: 4/5;
}
+ .size-1 {
+ width: calc(var(--spacing) * 1);
+ height: calc(var(--spacing) * 1);
+ }
.size-8 {
width: calc(var(--spacing) * 8);
height: calc(var(--spacing) * 8);
@@ -433,9 +434,6 @@
.min-h-0 {
min-height: calc(var(--spacing) * 0);
}
- .min-h-\[260px\] {
- min-height: 260px;
- }
.min-h-screen {
min-height: 100vh;
}
@@ -469,9 +467,6 @@
.max-w-full {
max-width: 100%;
}
- .max-w-xl {
- max-width: var(--container-xl);
- }
.min-w-0 {
min-width: calc(var(--spacing) * 0);
}
@@ -628,12 +623,6 @@
.border-gray-200 {
border-color: var(--color-gray-200);
}
- .border-gray-200\/80 {
- border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 80%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- border-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent);
- }
- }
.border-slate-200 {
border-color: var(--color-slate-200);
}
@@ -676,18 +665,9 @@
.bg-emerald-100 {
background-color: var(--color-emerald-100);
}
- .bg-gray-50 {
- background-color: var(--color-gray-50);
- }
.bg-gray-100 {
background-color: var(--color-gray-100);
}
- .bg-gray-100\/50 {
- background-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 50%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
- }
- }
.bg-gray-300 {
background-color: var(--color-gray-300);
}
@@ -715,6 +695,12 @@
.bg-slate-50 {
background-color: var(--color-slate-50);
}
+ .bg-slate-50\/50 {
+ background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);
+ @supports (color: color-mix(in lab, red, red)) {
+ background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
+ }
+ }
.bg-slate-100 {
background-color: var(--color-slate-100);
}
@@ -724,6 +710,9 @@
background-color: color-mix(in oklab, var(--color-slate-200) 10%, transparent);
}
}
+ .bg-slate-300 {
+ background-color: var(--color-slate-300);
+ }
.bg-slate-400\/10 {
background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -781,15 +770,9 @@
.p-4 {
padding: calc(var(--spacing) * 4);
}
- .p-6 {
- padding: calc(var(--spacing) * 6);
- }
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
- .px-2\.5 {
- padding-inline: calc(var(--spacing) * 2.5);
- }
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
@@ -808,15 +791,15 @@
.py-1\.5 {
padding-block: calc(var(--spacing) * 1.5);
}
- .py-2 {
- padding-block: calc(var(--spacing) * 2);
- }
.py-3 {
padding-block: calc(var(--spacing) * 3);
}
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
+ .py-8 {
+ padding-block: calc(var(--spacing) * 8);
+ }
.py-10 {
padding-block: calc(var(--spacing) * 10);
}
@@ -826,6 +809,9 @@
.pt-4 {
padding-top: calc(var(--spacing) * 4);
}
+ .pt-6 {
+ padding-top: calc(var(--spacing) * 6);
+ }
.pr-1 {
padding-right: calc(var(--spacing) * 1);
}
@@ -841,14 +827,6 @@
.text-right {
text-align: right;
}
- .text-2xl {
- font-size: var(--text-2xl);
- line-height: var(--tw-leading, var(--text-2xl--line-height));
- }
- .text-3xl {
- font-size: var(--text-3xl);
- line-height: var(--tw-leading, var(--text-3xl--line-height));
- }
.text-base {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
@@ -872,6 +850,9 @@
.text-\[10px\] {
font-size: 10px;
}
+ .text-\[11px\] {
+ font-size: 11px;
+ }
.text-\[20px\] {
font-size: 20px;
}
@@ -991,9 +972,6 @@
.text-slate-600 {
color: var(--color-slate-600);
}
- .text-slate-700 {
- color: var(--color-slate-700);
- }
.text-slate-900 {
color: var(--color-slate-900);
}
@@ -1112,6 +1090,13 @@
color: var(--color-slate-400);
}
}
+ .hover\:bg-slate-100 {
+ &:hover {
+ @media (hover: hover) {
+ background-color: var(--color-slate-100);
+ }
+ }
+ }
.hover\:bg-white {
&:hover {
@media (hover: hover) {
@@ -1160,14 +1145,9 @@
margin-bottom: calc(var(--spacing) * 8);
}
}
- .sm\:flex {
+ .sm\:block {
@media (width >= 40rem) {
- display: flex;
- }
- }
- .sm\:hidden {
- @media (width >= 40rem) {
- display: none;
+ display: block;
}
}
.sm\:h-5 {
@@ -1264,11 +1244,6 @@
font-size: 11px;
}
}
- .md\:mb-4 {
- @media (width >= 48rem) {
- margin-bottom: calc(var(--spacing) * 4);
- }
- }
.md\:ml-24 {
@media (width >= 48rem) {
margin-left: calc(var(--spacing) * 24);
@@ -1314,26 +1289,11 @@
flex-direction: row;
}
}
- .md\:gap-2 {
- @media (width >= 48rem) {
- gap: calc(var(--spacing) * 2);
- }
- }
.md\:rounded-2xl {
@media (width >= 48rem) {
border-radius: var(--radius-2xl);
}
}
- .md\:rounded-lg {
- @media (width >= 48rem) {
- border-radius: var(--radius-lg);
- }
- }
- .md\:object-cover {
- @media (width >= 48rem) {
- object-fit: cover;
- }
- }
.md\:p-0 {
@media (width >= 48rem) {
padding: calc(var(--spacing) * 0);
@@ -1354,11 +1314,6 @@
padding: calc(var(--spacing) * 10);
}
}
- .md\:px-2\.5 {
- @media (width >= 48rem) {
- padding-inline: calc(var(--spacing) * 2.5);
- }
- }
.md\:px-4 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 4);
@@ -1369,21 +1324,11 @@
padding-inline: calc(var(--spacing) * 8);
}
}
- .md\:px-10 {
- @media (width >= 48rem) {
- padding-inline: calc(var(--spacing) * 10);
- }
- }
.md\:px-40 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 40);
}
}
- .md\:py-1 {
- @media (width >= 48rem) {
- padding-block: calc(var(--spacing) * 1);
- }
- }
.md\:py-2 {
@media (width >= 48rem) {
padding-block: calc(var(--spacing) * 2);
@@ -1401,18 +1346,6 @@
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
}
- .md\:text-4xl {
- @media (width >= 48rem) {
- font-size: var(--text-4xl);
- line-height: var(--tw-leading, var(--text-4xl--line-height));
- }
- }
- .md\:text-5xl {
- @media (width >= 48rem) {
- font-size: var(--text-5xl);
- line-height: var(--tw-leading, var(--text-5xl--line-height));
- }
- }
.md\:text-sm {
@media (width >= 48rem) {
font-size: var(--text-sm);
@@ -1425,21 +1358,6 @@
line-height: var(--tw-leading, var(--text-xs--line-height));
}
}
- .lg\:ml-24 {
- @media (width >= 64rem) {
- margin-left: calc(var(--spacing) * 24);
- }
- }
- .lg\:flex {
- @media (width >= 64rem) {
- display: flex;
- }
- }
- .lg\:hidden {
- @media (width >= 64rem) {
- display: none;
- }
- }
.lg\:grid-cols-3 {
@media (width >= 64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1477,14 +1395,6 @@
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
- .dark\:border-gray-600\/80 {
- @media (prefers-color-scheme: dark) {
- border-color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 80%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- border-color: color-mix(in oklab, var(--color-gray-600) 80%, transparent);
- }
- }
- }
.dark\:border-gray-800 {
@media (prefers-color-scheme: dark) {
border-color: var(--color-gray-800);
@@ -1534,14 +1444,6 @@
background-color: var(--color-gray-800);
}
}
- .dark\:bg-gray-800\/50 {
- @media (prefers-color-scheme: dark) {
- background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
- }
- }
- }
.dark\:bg-gray-800\/80 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 80%, transparent);
@@ -1550,11 +1452,6 @@
}
}
}
- .dark\:bg-gray-900 {
- @media (prefers-color-scheme: dark) {
- background-color: var(--color-gray-900);
- }
- }
.dark\:bg-green-900\/30 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
@@ -1626,6 +1523,14 @@
background-color: var(--color-slate-900);
}
}
+ .dark\:bg-slate-900\/50 {
+ @media (prefers-color-scheme: dark) {
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
+ @supports (color: color-mix(in lab, red, red)) {
+ background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
+ }
+ }
+ }
.dark\:bg-teal-900\/30 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(38.6% 0.063 188.416) 30%, transparent);
@@ -1709,6 +1614,11 @@
color: var(--color-slate-100);
}
}
+ .dark\:text-slate-300 {
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-slate-300);
+ }
+ }
.dark\:text-slate-400 {
@media (prefers-color-scheme: dark) {
color: var(--color-slate-400);
@@ -1743,6 +1653,15 @@
}
}
}
+ .dark\:hover\:bg-slate-700 {
+ @media (prefers-color-scheme: dark) {
+ &:hover {
+ @media (hover: hover) {
+ background-color: var(--color-slate-700);
+ }
+ }
+ }
+ }
}
@property --tw-translate-x {
syntax: "*";