sori.studio/uniare.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4.0.5: 로그인·덱·관리자 Tailwind 레이아웃 통합

Browse Source 
공통 UI를 components.css로 빌드에 포함하고 로그인·회원가입·내 덱·공개 덱·관리자 화면 레이아웃을 정리했다.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-06-23 15:48:09 +09:00
parent 93e81ce3ea
commit ba89235207
17 changed files with 1376 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
admin.html
View File

@@ -4,15 +4,13 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style/output.css" />
<link rel="stylesheet" href="./style/brand.css" />
<link rel="stylesheet" href="./style/auth-header.css" />
<link rel="stylesheet" href="./style/deck-history.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet" />
<title>관리자 - UNIARE</title>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 font-['Pretendard','Inter','Noto_Sans_KR',sans-serif] text-slate-900">
<nav class="sticky top-0 z-50 border-b border-slate-200 bg-white/70 backdrop-blur-xl">
<div class="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6">
<a href="/" class="flex items-center gap-2.5 tracking-tight">
<body class="app-page">
<nav class="app-nav">
<div class="app-nav-inner">
<a href="/" class="inline-flex items-center gap-2.5 no-underline">
<img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
<span class="text-base font-extrabold leading-tight text-slate-800">관리자</span>
</a>
@@ -20,21 +18,22 @@
</div>
</nav>
<main class="mx-auto max-w-7xl px-4 py-8 pb-20 sm:px-6 sm:pt-16">
<div class="app-shell">
<main class="app-main w-full">
<header class="mb-8">
<h1 class="mb-2 text-[1.75rem] font-black tracking-tight">관리자</h1>
<p class="m-0 text-sm text-slate-500">회원과 저장된 덱을 관리합니다.</p>
<h1 class="mb-2 text-3xl font-black tracking-tight text-slate-900">관리자</h1>
<p class="text-sm text-slate-500">회원과 저장된 덱을 관리합니다.</p>
</header>
<div class="mb-7 flex gap-1 border-b border-slate-200">
<button type="button" data-tab="users" class="-mb-px cursor-pointer border-0 border-b-2 border-blue-600 bg-transparent px-[1.125rem] py-3 text-sm font-bold text-blue-600 transition-colors hover:text-slate-600">회원 관리</button>
<button type="button" data-tab="decks" class="-mb-px cursor-pointer border-0 border-b-2 border-transparent bg-transparent px-[1.125rem] py-3 text-sm font-bold text-slate-400 transition-colors hover:text-slate-600">덱 관리</button>
<div class="mb-7 flex gap-1 border-b border-slate-200" role="tablist">
<button type="button" data-tab="users" role="tab" aria-selected="true" class="-mb-px cursor-pointer border-0 border-b-2 border-blue-600 bg-transparent px-4 py-3 text-sm font-bold text-blue-600 transition-colors hover:text-slate-600">회원 관리</button>
<button type="button" data-tab="decks" role="tab" aria-selected="false" class="-mb-px cursor-pointer border-0 border-b-2 border-transparent bg-transparent px-4 py-3 text-sm font-bold text-slate-400 transition-colors hover:text-slate-600">덱 관리</button>
</div>
<section id="tab-users">
<div class="mb-5 flex gap-3">
<input type="search" id="user-search" class="min-w-0 flex-1 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm outline-none transition focus:border-blue-500 focus:ring-3 focus:ring-blue-500/15" placeholder="이메일, 사용자명 검색..." />
<button type="button" id="user-search-btn" class="cursor-pointer rounded-xl border-0 bg-slate-800 px-4 py-2.5 text-[0.8125rem] font-bold text-white hover:bg-slate-700">검색</button>
<div class="mb-5 flex flex-wrap gap-3">
<input type="search" id="user-search" class="box-border min-w-0 flex-1 rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-500/15" placeholder="이메일, 사용자명 검색..." />
<button type="button" id="user-search-btn" class="cursor-pointer rounded-xl border-0 bg-slate-800 px-5 py-2.5 text-sm font-bold text-white transition hover:bg-slate-700">검색</button>
</div>
<div id="user-list" class="flex flex-col gap-3"></div>
</section>
@@ -50,7 +49,7 @@
</div>
</div>
<div id="admin-deck-list"></div>
<section class="mt-8 flex flex-col items-stretch justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-5 py-4 sm:flex-row sm:items-center">
<section class="mt-8 flex flex-col items-stretch justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-5 py-4 shadow-sm sm:flex-row sm:items-center">
<div>
<h2 class="mb-1 text-[0.9375rem] font-bold">미참조 썸네일</h2>
<p id="orphan-preview-status" class="m-0 text-xs text-slate-500">확인 전</p>
@@ -62,7 +61,8 @@
</section>
<div id="orphan-preview-list" class="mt-3 hidden max-h-56 overflow-y-auto rounded-xl border border-slate-200 bg-white px-4 py-2"></div>
</section>
</main>
</main>
</div>
<!-- 회원 정보 모달 -->
<div id="edit-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-slate-900/50 p-4">
@@ -484,6 +484,7 @@
tabButton.classList.toggle('text-blue-600', isActive);
tabButton.classList.toggle('border-transparent', !isActive);
tabButton.classList.toggle('text-slate-400', !isActive);
tabButton.setAttribute('aria-selected', isActive ? 'true' : 'false');
});
document.getElementById('tab-users').classList.toggle('hidden', btn.dataset.tab !== 'users');
document.getElementById('tab-decks').classList.toggle('hidden', btn.dataset.tab !== 'decks');