v4.0.0: 회원·덱 API, 인증 UI, 프로필 및 레이아웃 통일

Express/SQLite API와 Docker 구성을 추가하고 로그인·덱 저장·공개 덱·관리자·프로필 화면을 구현했다. 결과 화면 저장 UX, 헤더 프로필, 애드센스용 app-shell 레이아웃(1280px) 및 문서를 반영했다. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-22 16:59:36 +09:00
parent f8c954f24b
commit dbf02241e2
56 changed files with 6732 additions and 183 deletions
--- a/style/app-shell.css
+++ b/style/app-shell.css
@@ -0,0 +1,132 @@
+/**
+ * 앱 공통 셸 (헤더 1280px / max-w-7xl, 광고 레일)
+ * index.html, cardList.html 과 동일한 콘텐츠 최대 너비 기준
+ */
+
+:root {
+    --app-max-width: 80rem; /* 1280px — Tailwind max-w-7xl */
+    --app-gutter: 1.5rem;
+    --app-nav-height: 4rem;
+    --app-ad-rail-width: 18.75rem; /* 300px — 디스플레이 광고 */
+}
+
+.app-page {
+    font-family: 'Inter', 'Noto Sans KR', sans-serif;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    color: #0f172a;
+}
+
+.app-nav {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.app-nav-inner {
+    max-width: var(--app-max-width);
+    margin: 0 auto;
+    padding: 0 var(--app-gutter);
+    height: var(--app-nav-height);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.app-brand {
+    font-size: 1.25rem;
+    font-weight: 800;
+    color: #1e293b;
+    text-decoration: none;
+    letter-spacing: -0.025em;
+    white-space: nowrap;
+}
+
+.app-brand span {
+    color: #2563eb;
+}
+
+.app-ad-top {
+    max-width: var(--app-max-width);
+    margin: 0 auto;
+    padding: 0.75rem var(--app-gutter) 0;
+}
+
+.app-shell {
+    max-width: var(--app-max-width);
+    margin: 0 auto;
+    padding: 2rem var(--app-gutter) 5rem;
+}
+
+@media (min-width: 640px) {
+    .app-shell {
+        padding-top: 3rem;
+    }
+}
+
+.app-body-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    align-items: stretch;
+}
+
+.app-main {
+    flex: 1;
+    min-width: 0;
+}
+
+.app-ad-rail {
+    display: none;
+}
+
+.app-ad-slot {
+    overflow: hidden;
+    border-radius: 0.75rem;
+    background: #f8fafc;
+    border: 1px dashed #e2e8f0;
+}
+
+.app-ad-slot--leaderboard {
+    min-height: 90px;
+    width: 100%;
+}
+
+.app-ad-slot--skyscraper {
+    min-height: 600px;
+    width: 100%;
+}
+
+.app-ad-slot ins {
+    display: block;
+    width: 100%;
+}
+
+@media (min-width: 1024px) {
+    .app-ad-top {
+        display: none;
+    }
+
+    .app-body-layout {
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    .app-ad-rail {
+        display: block;
+        flex: 0 0 var(--app-ad-rail-width);
+        width: var(--app-ad-rail-width);
+        position: sticky;
+        top: calc(var(--app-nav-height) + 1rem);
+    }
+}
+
+@media (max-width: 1023px) {
+    .app-ad-rail {
+        display: none;
+    }
+}