storage.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<title>베이프렌드 창고 구역 안내</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f0f2f8;color:#1a1a1a;padding-bottom:40px}
.hd{background:linear-gradient(135deg,#1F3864,#2E75B6);padding:16px;color:#fff;position:sticky;top:0;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.hd h1{font-size:16px;font-weight:700}
.hd p{font-size:11px;opacity:.8;margin-top:3px}
.warn{margin:12px;background:#fff3cd;border-left:4px solid #C00000;border-radius:8px;padding:12px}
.warn-title{font-size:13px;font-weight:700;color:#C00000;margin-bottom:6px}
.warn p{font-size:12px;color:#555;line-height:1.6}
.sw{padding:10px 12px 0}
.sw input{width:100%;padding:10px 12px 10px 36px;font-size:14px;border-radius:12px;border:1.5px solid #e0e0e0;background:#fff;outline:none;position:relative}
.sw-wrap{position:relative}
.sw-ico{position:absolute;left:24px;top:50%;transform:translateY(-50%);font-size:16px;color:#aaa;pointer-events:none}
.tabs{display:flex;margin:10px 12px 0;gap:6px}
.tab{flex:1;text-align:center;padding:8px 0;font-size:13px;font-weight:600;color:#888;border-radius:20px;cursor:pointer;background:#fff;border:1.5px solid #e0e0e0}
.tab.on{background:#1F3864;color:#fff;border-color:#1F3864}
.count{padding:6px 12px 2px;font-size:12px;color:#888}
.count b{color:#2E75B6}
.list{padding:8px 12px;display:flex;flex-direction:column;gap:8px}
.card{background:#fff;border-radius:14px;box-shadow:0 1px 5px rgba(0,0,0,.08);overflow:hidden}
.card-hd{display:flex;align-items:center;padding:12px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.card-hd.open{border-bottom:1px solid #f0f0f0}
.zone-badge{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#fff;flex-shrink:0;margin-right:10px}
.zB{background:#2E75B6}
.zR{background:#C00000}
.zW{background:#2E7D32}
.card-info{flex:1;min-width:0}
.card-code{font-size:16px;font-weight:700;color:#1a1a1a}
.card-desc{font-size:12px;color:#888;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-arr{font-size:18px;color:#ccc;transition:transform .2s;flex-shrink:0}
.card-arr.open{transform:rotate(90deg)}
.card-body{display:none;padding:12px 14px;background:#fafafa}
.card-body.open{display:block}
.info-row{display:flex;align-items:flex-start;padding:6px 0;border-bottom:1px solid #f0f0f0}
.info-row:last-child{border:none}
.info-lbl{font-size:11px;color:#aaa;font-weight:600;width:60px;flex-shrink:0;padding-top:1px}
.info-val{font-size:13px;color:#333;flex:1;line-height:1.5}
.badge-pos{display:inline-block;background:#E8F4FF;color:#2E75B6;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;margin-bottom:4px}
.badge-posR{background:#FFE8E8;color:#C00000}
.badge-posW{background:#E8F5E8;color:#2E7D32}
.note-warn{background:#fff3cd;border-radius:6px;padding:6px 10px;font-size:11px;color:#856404;margin-top:6px}
.empty{text-align:center;padding:3rem;color:#aaa;font-size:14px}
</style>
</head>
<body>
<div class="hd">
  <h1>📦 베이프렌드 창고 구역 안내</h1>
  <p>본점 창고 — 입출고 시 반드시 확인</p>
</div>

<div class="warn">
  <div class="warn-title">⚠️ 주의사항</div>
  <p>• 대부분의 분배 제품은 <b>레드(R) 선반</b>에 있습니다<br>
  • B-2, B-3-4: 포스 등록X / 재고 미등록<br>
  • B-3-5: 포스 등록O / 재고 미등록<br>
  • 포스 미등록 제품 외 모든 제품은 <b>재고가 잡혀있음</b><br>
  • <b style="color:#C00000">입출고 시 반드시 재고 수량을 정확히 잡아야 합니다</b></p>
</div>

<div class="sw">
  <div class="sw-wrap">
    <span class="sw-ico">🔍</span>
    <input type="text" id="qi" placeholder="구역코드 또는 내용 검색..."/>
  </div>
</div>

<div class="tabs">
  <div class="tab on" data-zone="all">전체</div>
  <div class="tab" data-zone="B">B구역</div>
  <div class="tab" data-zone="R">R구역</div>
  <div class="tab" data-zone="W">W구역</div>
</div>

<div class="count" id="count"></div>
<div class="list" id="list"></div>

<script>
var D = [
  {z:'B',code:'B-1-1',desc:'문구류',detail:'문구류 보관',note:''},
  {z:'B',code:'B-1-2',desc:'문구류',detail:'문구류 보관',note:''},
  {z:'B',code:'B-1-3',desc:'디오 리퀴드',detail:'디오 리퀴드 보관',note:''},
  {z:'B',code:'B-2-1',desc:'자판기용 / 포스X / 재고X',detail:'자판기용 제품 보관',note:'포스 등록X / 재고 미등록 제품'},
  {z:'B',code:'B-2-2',desc:'자판기용 / 포스X / 재고X',detail:'자판기용 제품 보관',note:'포스 등록X / 재고 미등록 제품'},
  {z:'B',code:'B-2-3',desc:'자판기용 / 포스X / 재고X',detail:'자판기용 제품 보관',note:'포스 등록X / 재고 미등록 제품'},
  {z:'B',code:'B-3-2',desc:'메가킥, 메가엣지',detail:'메가킥, 메가엣지 보관',note:''},
  {z:'B',code:'B-3-3',desc:'메가킥, 메가엣지',detail:'메가킥, 메가엣지 보관',note:''},
  {z:'B',code:'B-3-4',desc:'포스X / 재고X',detail:'재고 미등록 제품 보관',note:'포스 등록X / 재고 미등록 제품'},
  {z:'B',code:'B-3-5',desc:'포스O / 재고X',detail:'재고 미등록 제품 보관',note:'포스 등록O / 재고 미등록 제품'},
  {z:'B',code:'B-4-1',desc:'문구류',detail:'문구류 보관',note:''},
  {z:'B',code:'B-4-2',desc:'액덕 노보',detail:'액덕 노보 보관',note:''},
  {z:'B',code:'B-4-3',desc:'액덕 노보',detail:'액덕 노보 보관',note:''},
  {z:'B',code:'B-4-4',desc:'액덕 노보',detail:'액덕 노보 보관',note:''},
  {z:'B',code:'B-4-5',desc:'액덕 노보',detail:'액덕 노보 보관',note:''},
  {z:'R',code:'R-1-1',desc:'빌런단 박스',detail:'빌런단 박스 보관',note:''},
  {z:'R',code:'R-1-2',desc:'빌런단 박스',detail:'빌런단 박스 보관',note:''},
  {z:'R',code:'R-1-3',desc:'빌런단 박스',detail:'빌런단 박스 보관',note:''},
  {z:'R',code:'R-1-4',desc:'테이프 및 문구류',detail:'테이프 및 문구류 보관',note:''},
  {z:'R',code:'R-2-1',desc:'빌런단 박스',detail:'빌런단 박스 보관',note:''},
  {z:'R',code:'R-2-2',desc:'단종 제품',detail:'크래프트, 얌멘솔, 제로타바코, 델리포도',note:'단종 제품'},
  {z:'R',code:'R-2-3',desc:'리퀴드랩 (포스O)',detail:'리퀴드랩 제품 보관',note:'포스 등록O'},
  {z:'R',code:'R-2-4',desc:'멜트다운 시리즈',detail:'멜트다운 시리즈 보관',note:'재고 등록O'},
  {z:'R',code:'R-3-1',desc:'젤로크리스탈, 플러키팟',detail:'젤로크리스탈, 플러키팟 보관',note:''},
  {z:'R',code:'R-3-2',desc:'리퀴드랩 / 단종 팜팜',detail:'왼쪽: 리퀴드랩 / 오른쪽: 단종 팜팜',note:''},
  {z:'R',code:'R-3-3',desc:'제이코리아, 순수',detail:'제이코리아, 순수 보관',note:''},
  {z:'R',code:'R-3-4',desc:'봉투',detail:'봉투 보관',note:''},
  {z:'R',code:'R-4-1',desc:'우산, 청소용품',detail:'우산, 청소용품 보관',note:''},
  {z:'R',code:'R-4-2',desc:'베이퍼 시리즈',detail:'베이퍼 시리즈 보관',note:''},
  {z:'R',code:'R-4-3',desc:'쿨멘솔',detail:'쿨멘솔 보관',note:''},
  {z:'R',code:'R-4-4',desc:'812 시가',detail:'812 시가 보관',note:''},
  {z:'R',code:'R-5-1',desc:'종이가방, 우산',detail:'종이가방, 우산 보관',note:''},
  {z:'R',code:'R-5-2',desc:'VPS (화이트아웃)',detail:'VPS 화이트아웃 보관',note:''},
  {z:'R',code:'R-5-3',desc:'투엑스, 송송 (단종)',detail:'투엑스, 송송 보관',note:'단종 제품'},
  {z:'R',code:'R-5-4',desc:'빈 공간',detail:'현재 비어있음',note:''},
  {z:'R',code:'R-5-5',desc:'빈 공간',detail:'현재 비어있음',note:''},
  {z:'R',code:'R-6-1',desc:'잡화',detail:'잡화 보관',note:''},
  {z:'R',code:'R-6-2',desc:'제로닉 시리즈',detail:'제로닉 시리즈 보관',note:''},
  {z:'R',code:'R-6-3',desc:'액덕',detail:'액덕 보관',note:''},
  {z:'R',code:'R-6-4',desc:'액덕',detail:'액덕 보관',note:''},
  {z:'R',code:'R-6-5',desc:'프라임 / 쿠모카시 / 버블몬',detail:'프라임, 쿠모카시, 버블몬 보관',note:''},
  {z:'R',code:'R-7-1',desc:'잡동사니 / 얼먹 / 폐호흡',detail:'잡동사니, 얼먹, 폐호흡 제품 보관',note:''},
  {z:'R',code:'R-7-2',desc:'액덕 — 멘솔쨩',detail:'액덕 멘솔쨩 보관',note:''},
  {z:'R',code:'R-7-3',desc:'액덕 — 젤로크리스탈',detail:'액덕 젤로크리스탈 보관',note:''},
  {z:'R',code:'R-7-4',desc:'액덕 — 멘솔쨩',detail:'액덕 멘솔쨩 보관',note:''},
  {z:'R',code:'R-7-5',desc:'액덕 — 흑염룡, 노보',detail:'액덕 흑염룡, 노보 보관',note:''},
  {z:'W',code:'W-1-1',desc:'컴퓨터 본체, 잡화',detail:'컴퓨터 본체, 잡화 보관',note:''},
  {z:'W',code:'W-1-2',desc:'프라임 액상',detail:'프라임 액상 보관',note:''},
  {z:'W',code:'W-1-3',desc:'프라임 액상',detail:'프라임 액상 보관',note:''},
  {z:'W',code:'W-1-4',desc:'프라임 액상',detail:'프라임 액상 보관',note:''},
  {z:'W',code:'W-1-5',desc:'봉투',detail:'봉투 보관',note:''},
];

var curZone='all';

function zClass(z){return z==='B'?'zB':z==='R'?'zR':'zW';}
function badgeClass(z){return z==='B'?'':'badge-pos'+(z==='R'?'R':'W');}
function zoneName(z){return z==='B'?'블랙 선반':z==='R'?'레드 선반':'화이트 선반';}

function render(){
  var q=document.getElementById('qi').value.toLowerCase();
  var fl=D.filter(function(d){
    if(curZone!=='all'&&d.z!==curZone)return false;
    if(q&&d.code.toLowerCase().indexOf(q)<0&&d.desc.toLowerCase().indexOf(q)<0&&d.detail.toLowerCase().indexOf(q)<0)return false;
    return true;
  });
  document.getElementById('count').innerHTML='<b>'+fl.length+'개</b> 구역 표시중';
  if(!fl.length){document.getElementById('list').innerHTML="<div class='empty'>검색 결과가 없어요</div>";return;}
  document.getElementById('list').innerHTML=fl.map(function(d,i){
    return "<div class='card' id='c"+i+"'>"
      +"<div class='card-hd' onclick='toggle("+i+")'>"
      +"<div class='zone-badge "+zClass(d.z)+"'>"+d.z+"</div>"
      +"<div class='card-info'>"
      +"<div class='card-code'>"+d.code+"</div>"
      +"<div class='card-desc'>"+d.desc+"</div>"
      +"</div>"
      +"<div class='card-arr' id='arr"+i+"'>›</div>"
      +"</div>"
      +"<div class='card-body' id='b"+i+"'>"
      +"<div class='info-row'><div class='info-lbl'>구역</div><div class='info-val'><span class='badge-pos "+badgeClass(d.z)+"'>"+d.z+"구역 — "+zoneName(d.z)+"</span></div></div>"
      +"<div class='info-row'><div class='info-lbl'>위치</div><div class='info-val'>"+d.code+"</div></div>"
      +"<div class='info-row'><div class='info-lbl'>보관 내용</div><div class='info-val'>"+d.detail+"</div></div>"
      +(d.note?"<div class='note-warn'>⚠️ "+d.note+"</div>":"")
      +"</div>"
      +"</div>";
  }).join('');
}

function toggle(i){
  var b=document.getElementById('b'+i);
  var hd=document.querySelector('#c'+i+' .card-hd');
  var arr=document.getElementById('arr'+i);
  var open=b.classList.contains('open');
  b.classList.toggle('open',!open);
  hd.classList.toggle('open',!open);
  arr.classList.toggle('open',!open);
}

document.querySelectorAll('.tab').forEach(function(t){
  t.addEventListener('click',function(){
    curZone=this.dataset.zone;
    document.querySelectorAll('.tab').forEach(function(x){x.classList.remove('on');});
    this.classList.add('on');
    render();
  });
});

document.getElementById('qi').addEventListener('input',render);
render();
</script>
</body>
</html>