staff.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#14181b">
<title>베이프렌드 본점 · 매장 재고 위치찾기</title>
<style>
  :root{
    --bg:#14181b; --panel:#1c2226; --line:#2c3438;
    --text:#eef1f2; --sub:#93a0a6; --red:#e0392f; --red-dim:#4a201d; --gold:#d9a441;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    -webkit-font-smoothing:antialiased;
    padding:14px 14px 40px;
  }
  h1{font-size:17px;margin:0 0 3px;font-weight:800;}
  .brandline{font-size:11px;color:var(--sub);letter-spacing:.08em;font-weight:700;margin-bottom:12px;}
  .search-wrap{position:relative;margin-bottom:12px;}
  .search-wrap input{
    width:100%;padding:12px 40px 12px 14px;border-radius:10px;
    border:1px solid var(--line);background:var(--panel);color:var(--text);
    font-size:14px;outline:none;
  }
  .search-wrap input:focus{border-color:var(--red);}
  .floor{
    position:relative;
    background:#20272b;
    border:1px solid var(--line);
    border-radius:10px;
    height:560px;
    overflow:auto;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:20px 20px;
  }
  .floorInner{ position:relative; width:1400px; height:1000px; }
  .box{
    position:absolute;
    border-radius:7px;
    border:1.5px solid rgba(255,255,255,.25);
    background:var(--red);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;text-align:center;
    padding:3px;cursor:pointer;
    transition:filter .12s, opacity .15s, box-shadow .15s;
    user-select:none;
  }
  .box:hover{filter:brightness(1.15);}
  .box.dim{opacity:.15;}
  .box.match{box-shadow:0 0 0 3px #1a56db;z-index:4;}
  .box.empty{background:#3a4247;color:var(--sub);}
  .lineLayer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .lineLayer line{stroke:#c0392b;stroke-width:2.5;opacity:.55;}
  .lineLayer text{font-size:12px;font-weight:700;fill:#e0392f;font-family:inherit;}
  .flow{display:flex;justify-content:space-between;font-size:11px;color:var(--sub);margin-top:8px;}

  .modal-backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
    align-items:center;justify-content:center;z-index:50;padding:20px;
  }
  .modal-backdrop.open{display:flex;}
  .modal{
    background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:22px;max-width:320px;width:100%;text-align:center;
  }
  .modal .num{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:9px;background:var(--red-dim);color:var(--red);
    font-weight:800;font-size:15px;margin-bottom:12px;
  }
  .modal .label{font-size:17px;font-weight:700;margin-bottom:18px;line-height:1.4;}
  .modal button{
    width:100%;padding:11px;border-radius:9px;border:1px solid var(--line);
    background:#2c3438;color:#fff;font-size:14px;cursor:pointer;
  }
  footer{text-align:center;color:var(--sub);font-size:11px;padding:18px 0 4px;}
</style>
</head>
<body>
  <h1>본점 매장 재고 위치찾기</h1>
  <div class="brandline">VAFRIEND · STAFF VIEW (조회 전용)</div>

  <div class="search-wrap">
    <input id="search" type="text" placeholder="상품명·구역 검색 (예: 릭, 소모품, 각인기)" autocomplete="off">
  </div>

  <div class="floor" id="floor">
    <div class="floorInner" id="floorInner">
      <svg class="lineLayer" id="lineLayer"></svg>
      <div id="boxLayer"></div>
    </div>
  </div>
  <div class="flow"><span>◂ 창고 방향(B-3)</span><span>입구·외부자판기 ▸</span></div>

  <div class="modal-backdrop" id="modalBackdrop">
    <div class="modal">
      <div class="num" id="modalNum"></div>
      <div class="label" id="modalLabel"></div>
      <button id="modalClose">닫기</button>
    </div>
  </div>

  <footer>손님 응대 아닌 직원 참고용 · 위치 수정은 관리자에게 문의</footer>

<script>
const BOXES = [
  {num:"1",x:58,y:15,w:5,h:5,label:"소모품",keywords:"파티 닷모드 팟*,발라코일V2 0.6옴,발라코일V2 0.8옴,발라코일V2 1.0옴,발라맥스프로팟 0.6옴"},
  {num:"2",x:50,y:15,w:5,h:5,label:"봉투,쿠폰",keywords:"봉투,쿠폰"},
  {num:"3",x:64,y:21,w:5,h:5,label:"소모품",keywords:"아스몬 0.6옴*,아스몬 공팟*,아스몬0.6옴체결팟*,아스몬 하이팟 0.6옴,글렌트 0.6옴팟,에이펙스 팟,마이팟 프로 0.6옴팟,디오x팟,럭스Q팟 0.6옴*,크로스0.8옴팟*,아르거스 V3 0.7옴팟,페보 0.6옴팟,칼미아팟,하부 1.6옴,AX 0.6옴팟*,썬더Q 0.6옴팟*,프로스텐다드코일"},
  {num:"4",x:70,y:21,w:5,h:5,label:"소모품/케이스",keywords:"발라 투명케이스,젤로맥스 케이스,닷파티 케이스*,말론S 케이스,불렛 드립팁,말론 510 드립팁,베이비 탑캡,닷 드립팁 화이트,닷 드립팁 블랙"},
  {num:"5",x:70,y:6,w:5,h:5,label:"각인,일회용 진열장",keywords:""},
  {num:"6",x:70,y:15,w:5,h:5,label:"소모품",keywords:"말론팟 0.6옴,말론S 0.6옴팟,말론S 0.4옴팟,베이비0.7옴팟*,베이비프로0.6옴팟*,아스몬 드립팁,젤로드립팁,아스몬 투명케이스,브이메이트E캡,스타일러스 공팟"},
  {num:"7",x:58,y:21,w:5,h:5,label:"소모품",keywords:"플러키 0.6옴팟,발라R 0.6옴팟*,발라클리어공팟*,발라맥스공팟*,발라맥스 프로공팟"},
  {num:"8",x:70,y:42,w:5,h:5,label:"빈곳",keywords:""},
  {num:"9",x:64,y:15,w:5,h:5,label:"소모품",keywords:"젤로0.8옴*,젤로맥스 0.6옴팟*,젤로맥스 0.6옴팟 5ml,젤로 크리스탈 0.6옴 팟,0.15옴 팟,소울 0.6옴팟*,브이메이트v2팟*,젤로 울트라팟"},
  {num:"10",x:50,y:21,w:5,h:5,label:"소모품",keywords:"아스트로 레드팟,발라리안 에어 0.6옴팟*,하복코일 0.25옴*,하복코일 0.6*,하복공팟*,베놈 레드팟,아스트로 블랙팟,조바 0.7옴팟"},
  {num:"11",x:78,y:28,w:5,h:5,label:"케이스/빌지",keywords:"영수증빌지,맥스프로 스티그마 화이트케이스,맥스프로 스티그마 블랙케이스,맥스프로 스티그마 케이스"},
  {num:"12",x:78,y:70,w:5,h:5,label:"일회용",keywords:"팜팜바"},
  {num:"13",x:78,y:90,w:5,h:5,label:"기기",keywords:"조바,발라리안맥스프로스티그마"},
  {num:"14",x:78,y:83,w:5,h:5,label:"기기",keywords:"발라리안맥스프로스티그마,플러키,아스트로모터헤드,말론"},
  {num:"15",x:78,y:42,w:5,h:5,label:"빈곳",keywords:""},
  {num:"16",x:70,y:83,w:5,h:5,label:"기기",keywords:"발라리안맥스프로,하복,말론S"},
  {num:"19",x:50,y:70,w:5,h:5,label:"보관함",keywords:""},
  {num:"21",x:70,y:90,w:5,h:5,label:"기기",keywords:"조바"},
  {num:"23",x:58,y:90,w:5,h:5,label:"세면대",keywords:"청소기롤,에어건"},
  {num:"24",x:70,y:70,w:5,h:5,label:"빈곳",keywords:""},
  {num:"25",x:70,y:76,w:5,h:5,label:"엘프바5%",keywords:"엘프바5%"},
  {num:"26",x:7,y:21,w:5,h:5,label:"빌런액상",keywords:""},
  {num:"27",x:13,y:21,w:5,h:5,label:"빌런액상",keywords:""},
  {num:"28",x:7,y:28,w:5,h:5,label:"종이가방",keywords:""},
  {num:"29",x:13,y:28,w:5,h:5,label:"릭액상",keywords:""},
  {num:"30",x:20,y:28,w:5,h:5,label:"문구류",keywords:""},
  {num:"31",x:20,y:21,w:5,h:5,label:"문구류",keywords:""},
  {num:"32",x:26,y:28,w:5,h:5,label:"휴지,유리세정제",keywords:""},
  {num:"33",x:26,y:21,w:5,h:5,label:"폐호흡코일/말론0.4옴",keywords:""},
  {num:"34",x:34,y:21,w:5,h:5,label:"폐호흡코일",keywords:"제우스서브옴 0.2옴코일*,제우스맥스 0.14옴코일*"},
  {num:"35",x:34,y:28,w:5,h:5,label:"구급함/폐호흡코일",keywords:""},
  {num:"36",x:20,y:0,w:5,h:5,label:"빌런/릭",keywords:""},
  {num:"37",x:20,y:6,w:5,h:5,label:"릭/일회용",keywords:""},
  {num:"38",x:7,y:6,w:5,h:5,label:"빌런/택배박스",keywords:""},
  {num:"39",x:7,y:0,w:5,h:5,label:"빌런",keywords:""},
  {num:"40",x:44,y:90,w:5,h:5,label:"쿨멘솔",keywords:"쿨멘솔"},
  {num:"41",x:38,y:90,w:5,h:5,label:"빌런시리즈",keywords:"빌런"},
  {num:"42",x:38,y:83,w:5,h:5,label:"빌런시리즈",keywords:"빌런"},
  {num:"43",x:50,y:90,w:5,h:5,label:"릭시리즈",keywords:"릭시리즈"},
  {num:"44",x:26,y:70,w:5,h:5,label:"RDA/18650",keywords:"RDA용품,18650,건전지"},
  {num:"46",x:13,y:70,w:5,h:5,label:"폐호흡 프리미엄",keywords:""},
  {num:"47",x:20,y:70,w:5,h:5,label:"디오리퀴드",keywords:"디오"},
  {num:"49",x:7,y:70,w:5,h:5,label:"시연용액상",keywords:""},
  {num:"51",x:7,y:76,w:5,h:5,label:"시연용액상",keywords:""},
  {num:"52",x:13,y:76,w:5,h:5,label:"폐호흡 프리미엄",keywords:""},
  {num:"53",x:20,y:76,w:5,h:5,label:"디오리퀴드",keywords:"디오"},
  {num:"54",x:26,y:76,w:5,h:5,label:"폐호흡 관련",keywords:""},
  {num:"55",x:7,y:83,w:5,h:5,label:"기타제품들",keywords:""},
  {num:"56",x:13,y:83,w:5,h:5,label:"프라임액상/폐호흡프라임액상",keywords:""},
  {num:"57",x:20,y:83,w:5,h:5,label:"디오리퀴드",keywords:"디오"},
  {num:"58",x:26,y:83,w:5,h:5,label:"단종 프라임액상",keywords:"수리퀴드,스노우,러브"},
  {num:"60",x:7,y:90,w:5,h:5,label:"기타제품들",keywords:""},
  {num:"61",x:13,y:90,w:5,h:5,label:"폐호흡프리미엄액상",keywords:""},
  {num:"62",x:20,y:90,w:5,h:5,label:"디오리퀴드",keywords:"디오"},
  {num:"63",x:26,y:90,w:5,h:5,label:"퀸즈시리즈/리퀴드랩",keywords:"마피아퀸,사무라이퀸,아마조네스퀸,크루세이더퀸,리퀴드랩"},
  {num:"66",x:50,y:76,w:5,h:5,label:"보관함",keywords:""},
  {num:"68",x:32,y:76,w:5,h:5,label:"보관함",keywords:""},
  {num:"69",x:44,y:83,w:5,h:5,label:"812시가",keywords:"812시가"},
  {num:"71",x:50,y:83,w:5,h:5,label:"단종 액상",keywords:"단종액상"},
  {num:"72",x:44,y:76,w:5,h:5,label:"AS",keywords:"명함,쿠폰"},
  {num:"74",x:44,y:70,w:5,h:5,label:"AS",keywords:"AS기기,명함,쿠폰"},
  {num:"75",x:32,y:70,w:5,h:5,label:"말론0.6옴팟",keywords:"말론0.6옴팟"},
  {num:"76",x:38,y:76,w:5,h:5,label:"빈곳",keywords:""},
  {num:"77",x:32,y:83,w:5,h:5,label:"리퀴드랩",keywords:"리퀴드랩액상"},
  {num:"78",x:32,y:90,w:5,h:5,label:"무니코틴",keywords:""},
  {num:"79",x:43,y:11,w:4,h:5,label:"PC",keywords:""},
  {num:"80",x:50,y:6,w:4,h:5,label:"포스",keywords:""},
  {num:"81",x:78,y:21,w:3,h:4,label:"각인기",keywords:""},
  {num:"82",x:78,y:76,w:5,h:5,label:"일회용",keywords:"모스바"},
  {num:"83",x:70,y:28,w:5,h:5,label:"케이스",keywords:"맥스프로 스티그마 블랙케이스,맥스프로 스티그마 화이트케이스,말론 케이스"},
  {num:"84",x:78,y:35,w:5,h:5,label:"립클링/일회용",keywords:"립클링"},
  {num:"85",x:70,y:35,w:5,h:5,label:"각인용지",keywords:"각인용지"},
  {num:"90",x:70,y:56,w:13,h:2,label:"일회용제품",keywords:"모스바,엘프바1%"},
  {num:"91",x:65,y:55,w:5,h:5,label:"고농도제품",keywords:"2%액상"},
  {num:"92",x:65,y:61,w:5,h:5,label:"에어릭스",keywords:"에어릭스"},
  {num:"93",x:1,y:21,w:5,h:5,label:"화확물질작성 및 잡다",keywords:""},
  {num:"94",x:1,y:28,w:5,h:5,label:"물티슈,곽티슈",keywords:""},
  {num:"95",x:70,y:59,w:13,h:2,label:"일회용제품",keywords:"팜팜바,드래곤바"},
  {num:"96",x:70,y:61,w:13,h:2,label:"일회용제품",keywords:"네스티원,카오린,엘프바10,000펌프,팜팜바"},
  {num:"97",x:70,y:64,w:13,h:2,label:"일회용제품",keywords:"팜팜바"},
  {num:"98",x:38,y:70,w:5,h:5,label:"빈곳",keywords:"말론0.6옴팟"}
];
const LINES = [
  {x1:0.17,y1:66.75,x2:83.06,y2:66.83,label:"벽면"},
  {x1:0.33,y1:15.92,x2:39.39,y2:16.08,label:"카운터2"},
  {x1:77.22,y1:13.17,x2:48.39,y2:13.5,label:"카운터1"},
  {x1:77.22,y1:13.08,x2:85.33,y2:31.17,label:"카운터3"},
  {x1:85.67,y1:31.5,x2:83.83,y2:67.08,label:"카운터4"},
  {x1:92.17,y1:0.5,x2:92.06,y2:24.5,label:"입구"},
  {x1:92.17,y1:34.17,x2:92.5,y2:99.42,label:"자판기벽"}
];

const floorInnerEl = document.getElementById('floorInner');
const boxLayer = document.getElementById('boxLayer');
const lineLayer = document.getElementById('lineLayer');
const searchEl = document.getElementById('search');
const modalBackdrop = document.getElementById('modalBackdrop');
const modalNum = document.getElementById('modalNum');
const modalLabel = document.getElementById('modalLabel');

function renderBoxes(){
  boxLayer.innerHTML = '';
  BOXES.forEach(b=>{
    const el = document.createElement('div');
    el.className = 'box' + (b.label ? '' : ' empty');
    el.dataset.num = b.num;
    el.style.left = b.x + '%';
    el.style.top = b.y + '%';
    el.style.width = b.w + '%';
    el.style.height = b.h + '%';
    el.dataset.keywords = (b.keywords || '').toLowerCase();
    el.textContent = b.label || ('#' + b.num);
    el.addEventListener('click', ()=>{
      modalNum.textContent = b.num;
      modalLabel.textContent = b.label || '(이름 없음)';
      modalBackdrop.classList.add('open');
    });
    boxLayer.appendChild(el);
  });
}
function renderLines(){
  lineLayer.innerHTML = '';
  LINES.forEach(ln=>{
    const line = document.createElementNS('http://www.w3.org/2000/svg','line');
    line.setAttribute('x1', ln.x1+'%'); line.setAttribute('y1', ln.y1+'%');
    line.setAttribute('x2', ln.x2+'%'); line.setAttribute('y2', ln.y2+'%');
    lineLayer.appendChild(line);
    if(ln.label){
      const midX=(ln.x1+ln.x2)/2, midY=(ln.y1+ln.y2)/2;
      const text = document.createElementNS('http://www.w3.org/2000/svg','text');
      text.setAttribute('x', midX+'%'); text.setAttribute('y', (midY-1)+'%');
      text.setAttribute('text-anchor','middle');
      text.textContent = ln.label;
      lineLayer.appendChild(text);
    }
  });
}
renderBoxes();
renderLines();

modalBackdrop.addEventListener('click', (e)=>{ if(e.target === modalBackdrop) modalBackdrop.classList.remove('open'); });
document.getElementById('modalClose').addEventListener('click', ()=> modalBackdrop.classList.remove('open'));

searchEl.addEventListener('input', ()=>{
  const q = searchEl.value.trim().toLowerCase();
  const boxEls = boxLayer.querySelectorAll('.box');
  let firstMatch = null;
  boxEls.forEach(el=>{
    const label = (el.textContent || '').toLowerCase();
    const kw = el.dataset.keywords || '';
    el.classList.remove('dim','match');
    if(!q) return;
    if(label.includes(q) || kw.includes(q)){
      el.classList.add('match');
      if(!firstMatch) firstMatch = el;
    }else{
      el.classList.add('dim');
    }
  });
  if(firstMatch) firstMatch.scrollIntoView({behavior:'smooth', block:'center', inline:'center'});
});

document.addEventListener('keydown', (e)=>{
  if(e.key === '/' && document.activeElement !== searchEl){ e.preventDefault(); searchEl.focus(); }
  if(e.key === 'Escape'){
    if(modalBackdrop.classList.contains('open')) modalBackdrop.classList.remove('open');
    else { searchEl.value=''; searchEl.dispatchEvent(new Event('input')); searchEl.blur(); }
  }
});
</script>
</body>
</html>