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

[260210]

Browse Source 
- 테이블 모드 추가
- 상품 선택하여 엑셀로 견적 내기 기능 추가.
- 데이터는 세션 스토리지에 저장
This commit is contained in:
zenn
2026-02-10 11:00:52 +09:00
parent 1bdadc84ed
commit ddc491dec1
4 changed files with 295 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
index.html
View File

@@ -137,13 +137,58 @@
<span class="text-slate-400 dark:text-slate-500 text-xs font-bold uppercase tracking-widest">Total Results</span>
<span id="total-count" class="px-2 py-0.5 rounded bg-primary/10 text-primary text-sm font-bold">0</span>
</div>
<div id="selection-summary" class="hidden flex items-center gap-3 bg-primary/10 px-3 py-1.5 rounded-full border border-primary/20">
<span class="text-[11px] font-bold text-primary">
<span id="selected-count">0</span>
items
</span>
<div class="w-px h-3 bg-primary/30"></div>
<span class="text-[11px] font-bold text-primary" id="selected-total-price">₩0</span>
<div class="flex items-center gap-1 ml-2">
<button onclick="window.exportToExcel()" class="flex items-center gap-1 bg-primary text-white text-[10px] px-2 py-1 rounded-md hover:bg-primary-dark transition-colors">
<span class="material-symbols-outlined !text-[14px]">download</span>
Export
</button>
<button onclick="window.resetSelection()" class="flex items-center gap-1 bg-white dark:bg-slate-800 text-slate-500 text-[10px] px-2 py-1 rounded-md border border-slate-200 dark:border-slate-700 hover:bg-slate-50 transition-colors">
<span class="material-symbols-outlined !text-[14px]">restart_alt</span>
Reset
</button>
</div>
</div>
<div class="flex bg-slate-100 dark:bg-slate-800 p-1 rounded-lg">
<button id="view-grid" class="p-1.5 rounded-md bg-white dark:bg-slate-700 shadow-sm text-primary transition-all">
<span class="material-symbols-outlined !text-[20px]">grid_view</span>
</button>
<button id="view-table" class="p-1.5 rounded-md text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-all">
<span class="material-symbols-outlined !text-[20px]">format_list_bulleted</span>
</button>
</div>
</div>
</section>
<!-- Table -->
<!-- Product Grid -->
<div class="px-6 md:px-40 py-10">
<div id="product-grid" class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
<!-- Product Item -->
</div>
<div id="product-table-wrapper" class="hidden overflow-x-auto bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700 text-slate-500 text-[11px] font-bold uppercase">
<th class="py-4 px-4 w-12 text-center">
<input type="checkbox" id="select-all-current" class="rounded border-slate-300" onchange="window.toggleSelectAll(this.checked)" />
</th>
<th class="py-4 px-4 text-slate-800 dark:text-slate-200">상품명</th>
<th class="py-4 px-4">카테고리</th>
<th class="py-4 px-4 text-right">가격</th>
<th class="py-4 px-4 text-center">상태</th>
</tr>
</thead>
<tbody id="product-table-body" class="text-sm divide-y divide-slate-100 dark:divide-slate-800"></tbody>
</table>
</div>
</div>
<!-- Pagination -->
<div class="px-6 md:px-40 py-12">
@@ -225,18 +270,18 @@
</div>
<!-- Footer / CTA: 항상 하단 고정, 버튼이 설명 위로 겹치지 않음 -->
<div class="flex flex-col gap-2 shrink-0 pt-4 pb-6 px-4 sm:px-6 md:px-8 lg:px-10 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-background-dark">
<button id="copy-link-btn" class="w-full flex items-center justify-center gap-2 bg-slate-900 dark:bg-white dark:text-slate-900 text-white font-bold py-4 px-6 rounded-xl transition-all shadow-lg">
<span class="material-symbols-outlined">link</span>
<span id="copy-btn-text">상품 링크 복사하기</span>
</button>
<button id="copy-link-btn" class="w-full flex items-center justify-center gap-2 bg-slate-900 dark:bg-white dark:text-slate-900 text-white font-bold py-4 px-6 rounded-xl transition-all shadow-lg">
<span class="material-symbols-outlined">link</span>
<span id="copy-btn-text">상품 링크 복사하기</span>
</button>
<a href="https://open.kakao.com/o/sPZ3Cnfi" target="_blank" class="w-full flex items-center justify-center gap-2 bg-[#fae100] text-[#3c1e1e] font-bold py-4 px-6 rounded-xl transition-all shadow-lg hover:bg-[#f7d600]">
<span class="material-symbols-outlined">chat_bubble</span>
<span>오픈카톡으로 문의하기</span>
</a>
<a href="https://open.kakao.com/o/sPZ3Cnfi" target="_blank" class="w-full flex items-center justify-center gap-2 bg-[#fae100] text-[#3c1e1e] font-bold py-4 px-6 rounded-xl transition-all shadow-lg hover:bg-[#f7d600]">
<span class="material-symbols-outlined">chat_bubble</span>
<span>오픈카톡으로 문의하기</span>
</a>
<p class="text-center text-xs text-gray-400 dark:text-gray-500 mt-2 font-medium">링크를 복사해 문의 시 전달해주세요.</p>
</div>
<p class="text-center text-xs text-gray-400 dark:text-gray-500 mt-2 font-medium">링크를 복사해 문의 시 전달해주세요.</p>
</div>
</div>
</div>
</div>