zenn/zenn.inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[260204] OG 정보 추가, 모달 오픈시 히스토리백 기능 적용

Browse Source
This commit is contained in:
zenn
2026-02-04 16:16:09 +09:00
parent b29cd5e7d9
commit f15fcfbcf8
4 changed files with 138 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
index.html
View File

@@ -2,10 +2,24 @@
<html class="light" lang="ko">
<head>
<meta name="title" content="sori.inventory" />
<meta name="description" content="일상의 조각들, 그리고 취향의 공유." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://inven.sori.studio/" />
<meta property="og:title" content="sori.inventory" />
<meta property="og:description" content="일상의 조각들, 그리고 취향의 공유." />
<meta property="og:image" content="https://inven.sori.studio/images/assets/og-image.jpg" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://inven.sori.studio/" />
<meta property="twitter:title" content="sori.inventory" />
<meta property="twitter:description" content="일상의 조각들, 그리고 취향의 공유." />
<meta property="twitter:image" content="https://inven.sori.studio/images/assets/og-image.jpg" />
<!-- -->
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4516420168710424" crossorigin="anonymous"></script>
<title>zenn's inventory</title>
<title>sori.inventory</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Google Fonts: Inter -->
@@ -34,59 +48,52 @@
"xl": "0.75rem",
"full": "9999px"
},
screens: {
'xs': '480px',
},
},
},
}
</script>
<style>
/* .material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
font-family: 'Inter', sans-serif;
} */
/* 스크롤바 완전히 숨기기 */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#modal-main-carousel-container {
scroll-snap-type: none;
overflow-x: hidden;
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* .filter-chip,
.status-chip {
@apply px-4 py-2 rounded-full text-sm font-medium transition
border border-slate-200 dark:border-slate-700
bg-slate-50 dark:bg-slate-800
text-slate-700 dark:text-slate-300;
} */
/* .filter-chip.active,
.status-chip.active {
@apply bg-primary text-white border-primary;
} */
#modal-main-carousel-container {
scroll-snap-type: none;
overflow-x: hidden;
}
.modal-open {
overflow: hidden !important;
height: 100% !important;
overscroll-behavior: none !important;
}
#product-modal {
overscroll-behavior: contain;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark transition-colors duration-200">
<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">
<!-- Top Navigation Bar -->
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-40 py-3">
<header class="sticky top-0 z-50 gap-2 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-40 py-3">
<div class="flex items-center gap-8">
<div class="flex items-center gap-3 text-slate-900 dark:text-white">
<div class="flex items-center justify-center size-8 bg-primary rounded-lg text-white">
<span class="material-symbols-outlined text-xl">inventory_2</span>
</div>
<h2 class="text-lg font-bold leading-tight tracking-tight">sori.inventory</h2>
<h2 class="hidden xs:block text-lg font-bold leading-tight tracking-tight">sori.inventory</h2>
</div>
</div>
<div class="flex flex-1 justify-end gap-4 items-center">
<label class="hidden sm:flex flex-col min-w-40 !h-10 max-w-64">
<label class="flex flex-col min-w-40 !h-10 max-w-64">
<div class="flex w-full flex-1 items-stretch rounded-lg h-full border border-slate-200 dark:border-slate-700">
<div class="text-slate-400 flex items-center justify-center pl-3">
<span class="material-symbols-outlined text-[20px]">search</span>
@@ -102,17 +109,7 @@
</header>
<main class="flex-1">
<!-- Headline Section -->
<div class="px-6 md:px-40 py-12 flex flex-col items-center">
<h2 class="text-slate-900 dark:text-white tracking-tight text-3xl md:text-5xl font-bold leading-tight text-center max-w-3xl">
일상의 조각들,
<br />
그리고 취향의 공유.
</h2>
<p class="mt-4 text-slate-500 dark:text-slate-400 text-center text-lg max-w-xl break-keep">현재 제 곁에서 일상을 채우고 있는 도구와 물건들입니다. 때로는 기록으로, 때로는 누군가를 위한 제안으로 이 공간을 채워갑니다.</p>
</div>
<!-- -->
<section class="mb-8 px-6 md:px-40">
<section class="py-8 px-6 md:px-40">
<div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 flex flex-col gap-4">
<!-- 카테고리 -->
<div class="flex flex-col gap-2">
@@ -232,13 +229,27 @@
</div>
</div>
<!-- Footer -->
<footer class="px-6 md:px-40 py-12 border-t border-slate-200 dark:border-slate-800">
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-sm font-medium">
<footer class="px-6 md:px-40 py-12 border-t border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
<div class="max-w-3xl mb-10">
<h3 class="text-slate-900 dark:text-white font-bold text-sm mb-2">About sori.inventory</h3>
<p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed break-keep">
일상의 조각들, 그리고 취향의 공유.
<br class="hidden sm:block" />
때로는 기록으로, 때로는 누군가를 위한 제안으로 이 공간을 채워갑니다.
</p>
</div>
<div class="flex flex-col md:flex-row justify-between items-center gap-6 pt-6 border-t border-slate-200 dark:border-slate-800">
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-[11px] font-medium uppercase tracking-wider">
<span>© 2026 sori.studio</span>
<span class="size-1 rounded-full bg-slate-300 dark:bg-slate-700"></span>
<span>All rights reserved.</span>
</div>
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-sm font-medium">
<span>by zenn</span>
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-[11px] font-medium">
<span>
Designed by
<strong class="text-slate-600 dark:text-slate-300">zenn</strong>
</span>
</div>
</div>
</footer>