cs-app.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ANDNEEDS 상담 관리</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<script>/*anniz-auth-guard*/
window.__anvTok=function(){try{var a=JSON.parse(localStorage.getItem("anniz_auth")||"null");var t=a&&a.access_token;return (t&&typeof t==="string"&&t.slice(0,3)==="eyJ")?t:null;}catch(e){return null;}};
(function(){var SBA="https://nifytqcqfattzpwlzpmb.supabase.co";var ANON="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5pZnl0cWNxZmF0dHpwd2x6cG1iIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODA4NTQxMzQsImV4cCI6MjA5NjQzMDEzNH0.0kE9ypuxzVNLuXwjHRTEsMxQ80vitqXjTUretQKXHUs";var K="anniz_auth";var s=null;try{s=JSON.parse(localStorage.getItem(K)||"null");}catch(e){}if(!s||!s.access_token){location.replace("login.html");return;}var now=Math.floor(Date.now()/1000);if(s.expires_at&&now>s.expires_at-60&&s.refresh_token){fetch(SBA+"/auth/v1/token?grant_type=refresh_token",{method:"POST",headers:{apikey:ANON,"Content-Type":"application/json"},body:JSON.stringify({refresh_token:s.refresh_token})}).then(function(r){return r.json();}).then(function(d){if(d&&d.access_token){localStorage.setItem(K,JSON.stringify({access_token:d.access_token,refresh_token:d.refresh_token,expires_at:d.expires_at,email:(d.user&&d.user.email)||s.email}));}else{localStorage.removeItem(K);location.replace("login.html");}}).catch(function(){});}window.annizLogout=function(){try{localStorage.removeItem(K);}catch(e){}location.replace("login.html");};})();
</script>
<style>
:root{--dark:#2E2E2E;--line:rgba(0,0,0,.11);--muted:#7C7C7C;--bg:#FAFAFA}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Noto Sans KR',-apple-system,sans-serif;color:#222;background:#fff;overflow:hidden}
.hel{font-family:'Helvetica Neue',Helvetica,sans-serif;font-weight:300}

/* layout */
.cs{display:grid;grid-template-columns:312px 1fr;height:100vh}
.list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;background:#fff}
.conv{display:flex;flex-direction:column;min-width:0;background:var(--bg)}

/* list */
.lhd{flex:0 0 auto;padding:20px 18px 14px;border-bottom:1px solid var(--line)}
.lhd h1{margin:0;font-size:15px;letter-spacing:.16em;font-weight:300;font-family:'Helvetica Neue',Helvetica,sans-serif}
.lhd .meta{margin-top:6px;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:#3FA45B;display:inline-block}
.dot.off{background:#C9C9C9}
.tabs{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer;font-family:inherit;color:#555}
.tab.on{background:var(--dark);border-color:var(--dark);color:#fff}
.rooms{flex:1 1 auto;overflow-y:auto}
.room{padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);cursor:pointer;position:relative}
.room:hover{background:#FAFAFA}
.room.on{background:#F2F2F2}
.room .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.room .nm{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room .ago{font-size:10.5px;color:var(--muted);flex:0 0 auto}
.room .pv{margin-top:4px;font-size:12px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room .nb{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#E5484D}
.room.unread .nm{font-weight:700}
.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.8}

/* conversation */
.chd{flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);padding:15px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.chd .who{font-size:14px;font-weight:500}
.chd .sub{font-size:11.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.chd .acts{display:flex;gap:8px;flex:0 0 auto}
.mini{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 11px;font-size:12px;cursor:pointer;font-family:inherit;color:#555}
.mini:hover{border-color:var(--dark);color:var(--dark)}
.stream{flex:1 1 auto;overflow-y:auto;padding:22px 22px 8px;display:flex;flex-direction:column}
.stream .inner{margin-top:auto}
.row{display:flex;margin-bottom:13px}
.row.me{justify-content:flex-end}
.bub{max-width:62%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.65;word-break:break-word}
.row.them .bub{background:#fff;border:1px solid rgba(0,0,0,.09);border-top-left-radius:4px}
.row.me .bub{background:var(--dark);color:#fff;border-top-right-radius:4px}
.bub a{color:inherit}
.tm{font-size:10.5px;color:#A5A5A5;margin:0 7px;align-self:flex-end;padding-bottom:2px;flex:0 0 auto}
.daysep{text-align:center;font-size:11px;color:var(--muted);margin:16px 0 14px}
.daysep span{background:var(--bg);padding:0 10px}
.cft{flex:0 0 auto;background:#fff;border-top:1px solid var(--line);padding:10px 16px 12px}
.tpl{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.tpl button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font-size:11.5px;cursor:pointer;font-family:inherit;color:#666}
.tpl button:hover{border-color:var(--dark);background:var(--dark);color:#fff}
.inp{display:flex;align-items:flex-end;gap:10px}
textarea{flex:1;border:1px solid var(--line);border-radius:10px;outline:0;resize:none;font-family:inherit;font-size:13.5px;line-height:1.6;padding:10px 12px;max-height:140px;color:#222}
textarea:focus{border-color:var(--dark)}
.go{flex:0 0 auto;height:40px;padding:0 20px;border:0;border-radius:10px;background:var(--dark);color:#fff;font-family:inherit;font-size:13px;cursor:pointer;opacity:.35}
.go.on{opacity:1}
.blank{margin:auto;color:var(--muted);font-size:13px;text-align:center;line-height:2}
@media (max-width:820px){
  .cs{grid-template-columns:1fr}
  .list{display:none}
  .cs.mobileconv .conv{display:flex}
  .cs:not(.mobileconv) .list{display:flex}
  .cs:not(.mobileconv) .conv{display:none}
  .bub{max-width:80%}
}
</style>
</head>
<body>
<div class="cs" id="cs">
  <aside class="list">
    <div class="lhd">
      <h1>CUSTOMER TALK</h1>
      <div class="meta"><span class="dot" id="liveDot"></span><span id="liveTxt">연결 중…</span><span id="alarmTxt" style="margin-left:auto;cursor:pointer;text-decoration:underline">알림 켜기</span></div>
    </div>
    <div class="tabs">
      <button class="tab on" data-f="all">전체</button>
      <button class="tab" data-f="unread">안 읽음</button>
      <button class="tab" data-f="open">진행중</button>
    </div>
    <div class="rooms" id="rooms"><div class="empty">불러오는 중…</div></div>
  </aside>

  <section class="conv">
    <div class="chd" id="chd" style="display:none">
      <div style="min-width:0">
        <div class="who" id="who">—</div>
        <div class="sub" id="sub"></div>
      </div>
      <div class="acts">
        <button class="mini" id="backBtn" style="display:none">← 목록</button>
        <button class="mini" id="doneBtn">상담 종료</button>
      </div>
    </div>
    <div class="stream" id="stream"><div class="blank">왼쪽에서 상담을 선택하세요.<br>새 문의가 오면 소리로 알려드려요.</div></div>
    <div class="cft" id="cft" style="display:none">
      <div class="tpl" id="tpl"></div>
      <div class="inp">
        <textarea id="ta" rows="2" placeholder="답장을 입력하세요 (Enter 전송 / Shift+Enter 줄바꿈)"></textarea>
        <button class="go" id="go">보내기</button>
      </div>
    </div>
  </section>
</div>

<script>
(function(){
'use strict';
var SB   = 'https://nifytqcqfattzpwlzpmb.supabase.co';
var ANON = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5pZnl0cWNxZmF0dHpwd2x6cG1iIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODA4NTQxMzQsImV4cCI6MjA5NjQzMDEzNH0.0kE9ypuxzVNLuXwjHRTEsMxQ80vitqXjTUretQKXHUs';

var TEMPLATES = [
  ['확인중', '안녕하세요, 앤니즈입니다. 확인 후 바로 안내드릴게요!'],
  ['주문번호', '주문번호를 알려주시면 바로 확인해드리겠습니다.'],
  ['배송안내', '평일 오후 2시 이전 결제 건은 당일 출고되며, 보통 1~3일 내 수령하실 수 있어요. 출고되면 운송장을 문자로 보내드립니다.'],
  ['교환반품', '수령 후 7일 이내 신청 가능하시며, 단순 변심의 경우 왕복 배송비 6,000원이 발생합니다. 마이페이지 > 주문내역에서 신청 부탁드려요.'],
  ['재입고', '해당 상품 재입고 일정 확인 후 다시 안내드리겠습니다. 상세페이지의 [재입고 알림] 신청도 가능해요.'],
  ['마무리', '문의 주셔서 감사합니다. 더 궁금하신 점 있으시면 언제든 남겨주세요 :)']
];

var st = { rooms:[], cur:null, msgs:[], msgSig:'', filter:'all', lastTotalUnread:0, notify:false };

function tok(){ return (window.__anvTok && window.__anvTok()) || ANON; }
function hdr(extra){
  var h = { apikey:ANON, Authorization:'Bearer '+tok(), 'Content-Type':'application/json', Accept:'application/json' };
  if (extra) for (var k in extra) h[k]=extra[k];
  return h;
}
function rest(path){
  return fetch(SB+'/rest/v1/'+path, { headers: hdr() }).then(function(r){
    if(!r.ok) throw new Error(r.status); return r.json();
  });
}
function rpc(fn, body){
  return fetch(SB+'/rest/v1/rpc/'+fn, { method:'POST', headers:hdr(), body:JSON.stringify(body||{}) })
    .then(function(r){ if(!r.ok) return r.text().then(function(t){throw new Error(t);}); return r.json(); });
}
function esc(s){ return String(s==null?'':s).replace(/[&<>"']/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];}); }
function fmt(s){ return esc(s).replace(/(https?:\/\/[^\s<]+)/g,'<a href="$1" target="_blank" rel="noopener">$1</a>').replace(/\n/g,'<br>'); }
function ago(iso){
  var d = (Date.now() - new Date(iso).getTime())/1000;
  if (d < 60) return '방금';
  if (d < 3600) return Math.floor(d/60)+'분 전';
  if (d < 86400) return Math.floor(d/3600)+'시간 전';
  if (d < 604800) return Math.floor(d/86400)+'일 전';
  return new Date(iso).toLocaleDateString('ko-KR',{month:'numeric',day:'numeric'});
}
function clock(iso){
  var d = new Date(iso), h=d.getHours(), m=d.getMinutes();
  var ap = h<12?'오전':'오후', hh=h%12||12;
  return ap+' '+hh+':'+(m<10?'0'+m:m);
}
function dayKey(iso){ var d=new Date(iso); return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate(); }
function dayLabel(iso){
  var d=new Date(iso), t=new Date();
  if(dayKey(iso)===dayKey(t.toISOString())) return '오늘';
  return d.toLocaleDateString('ko-KR',{year:'numeric',month:'long',day:'numeric',weekday:'short'});
}
function pageName(u){
  if(!u) return '';
  try{ var p=new URL(u); return p.hostname.replace(/^www\./,'')+p.pathname; }catch(e){ return u.slice(0,60); }
}

/* ---------- 알림 ---------- */
var actx=null;
function beep(){
  try{
    actx = actx || new (window.AudioContext||window.webkitAudioContext)();
    if(actx.state==='suspended') actx.resume();
    [880,1180].forEach(function(f,i){
      var o=actx.createOscillator(), g=actx.createGain();
      o.type='sine'; o.frequency.value=f;
      o.connect(g); g.connect(actx.destination);
      var t0=actx.currentTime+i*0.16;
      g.gain.setValueAtTime(0.0001,t0);
      g.gain.exponentialRampToValueAtTime(0.16,t0+0.02);
      g.gain.exponentialRampToValueAtTime(0.0001,t0+0.30);
      o.start(t0); o.stop(t0+0.32);
    });
  }catch(e){}
}
function desktopNotify(title, body){
  if(!st.notify || !('Notification' in window) || Notification.permission!=='granted') return;
  try{ new Notification(title,{body:body, tag:'anv-cs'}); }catch(e){}
}
var alarmTxt = document.getElementById('alarmTxt');
function refreshAlarmLabel(){
  if(!('Notification' in window)){ alarmTxt.style.display='none'; return; }
  if(Notification.permission==='granted'){ st.notify=true; alarmTxt.textContent='알림 켜짐'; alarmTxt.style.textDecoration='none'; }
  else if(Notification.permission==='denied'){ alarmTxt.textContent='알림 차단됨'; }
  else { alarmTxt.textContent='알림 켜기'; }
}
alarmTxt.addEventListener('click', function(){
  if(!('Notification' in window)) return;
  beep();
  Notification.requestPermission().then(refreshAlarmLabel);
});
refreshAlarmLabel();

/* ---------- 목록 ---------- */
function loadRooms(){
  return rest('chat_rooms?select=*&order=last_msg_at.desc&limit=200').then(function(rows){
    st.rooms = rows || [];
    setLive(true);
    var total = st.rooms.reduce(function(a,r){ return a + (r.admin_unread||0); }, 0);
    if (total > st.lastTotalUnread) {
      beep();
      var newest = st.rooms.filter(function(r){return r.admin_unread>0;})[0];
      desktopNotify('새 문의가 도착했어요', newest ? (newest.name || '방문자') + '님' : '');
    }
    st.lastTotalUnread = total;
    document.title = (total>0 ? '('+total+') ' : '') + 'ANDNEEDS 상담 관리';
    renderRooms();
  }).catch(function(){ setLive(false); });
}
function setLive(ok){
  var d=document.getElementById('liveDot'), t=document.getElementById('liveTxt');
  d.className = 'dot' + (ok?'':' off');
  t.textContent = ok ? '실시간 수신 중' : '연결 끊김 — 재시도 중';
}
function filtered(){
  if(st.filter==='unread') return st.rooms.filter(function(r){return (r.admin_unread||0)>0;});
  if(st.filter==='open')   return st.rooms.filter(function(r){return r.status!=='closed';});
  return st.rooms;
}
function renderRooms(){
  var box=document.getElementById('rooms'), list=filtered();
  if(!list.length){
    box.innerHTML='<div class="empty">아직 문의가 없어요.<br>몰에 위젯이 설치되면<br>여기에 실시간으로 쌓입니다.</div>';
    return;
  }
  box.innerHTML = list.map(function(r){
    var unread=(r.admin_unread||0)>0;
    var nm = r.name || '방문자 ' + String(r.id).slice(0,4).toUpperCase();
    return '<div class="room'+(unread?' unread':'')+(st.cur&&st.cur.id===r.id?' on':'')+'" data-id="'+r.id+'">'
      + (unread?'<span class="nb"></span>':'')
      + '<div class="t"><span class="nm">'+esc(nm)+(r.status==='closed'?' <span style="color:#B0B0B0;font-weight:400">· 종료</span>':'')+'</span><span class="ago">'+ago(r.last_msg_at)+'</span></div>'
      + '<div class="pv">'+esc(pageName(r.page_url)||'—')+'</div>'
      + '</div>';
  }).join('');
  Array.prototype.forEach.call(box.querySelectorAll('.room'), function(el){
    el.addEventListener('click', function(){ openRoom(el.getAttribute('data-id')); });
  });
}
Array.prototype.forEach.call(document.querySelectorAll('.tab'), function(t){
  t.addEventListener('click', function(){
    document.querySelectorAll('.tab').forEach(function(x){x.classList.remove('on');});
    t.classList.add('on');
    st.filter = t.getAttribute('data-f');
    renderRooms();
  });
});

/* ---------- 대화 ---------- */
function openRoom(id){
  var r = st.rooms.filter(function(x){return x.id===id;})[0];
  if(!r) return;
  st.cur = r;
  document.getElementById('chd').style.display='flex';
  document.getElementById('cft').style.display='block';
  document.getElementById('who').textContent = r.name || ('방문자 ' + String(r.id).slice(0,4).toUpperCase());
  document.getElementById('sub').textContent =
    [r.contact, pageName(r.page_url), '시작 ' + ago(r.created_at)].filter(Boolean).join('  ·  ');
  document.getElementById('cs').classList.add('mobileconv');
  document.getElementById('backBtn').style.display = window.innerWidth<=820 ? 'block' : 'none';
  st.msgSig='';
  renderRooms();
  loadMsgs(true);
  if((r.admin_unread||0)>0){
    rpc('chat_mark_read',{p_room:id}).then(function(){ r.admin_unread=0; renderRooms(); }).catch(function(){});
  }
}
function loadMsgs(scroll){
  if(!st.cur) return Promise.resolve();
  var id = st.cur.id;
  return rest('chat_messages?select=*&room_id=eq.'+id+'&order=id.asc&limit=500').then(function(rows){
    if(!st.cur || st.cur.id!==id) return;
    rows = rows || [];
    var sig = rows.length + ':' + (rows.length ? rows[rows.length-1].id : 0);
    if (!scroll && sig === st.msgSig) return;   // 변한 게 없으면 다시 그리지 않음
    var el = document.getElementById('stream');
    var atBottom = (el.scrollHeight - el.scrollTop - el.clientHeight) < 60;
    var keep = el.scrollTop;
    st.msgs = rows;
    st.msgSig = sig;
    renderMsgs();
    if (scroll || atBottom) scrollDown();
    else el.scrollTop = keep;                   // 위쪽을 읽는 중이면 그 자리 유지
  }).catch(function(){});
}
function renderMsgs(){
  var s=document.getElementById('stream');
  if(!st.msgs.length){ s.innerHTML='<div class="blank">아직 메시지가 없습니다.</div>'; return; }
  var out='', lastDay='';
  st.msgs.forEach(function(m){
    var dk=dayKey(m.created_at);
    if(dk!==lastDay){ lastDay=dk; out+='<div class="daysep"><span>'+esc(dayLabel(m.created_at))+'</span></div>'; }
    var me = (m.sender==='admin');
    var b='<div class="bub">'+fmt(m.body)+'</div>';
    var t='<div class="tm">'+clock(m.created_at)+'</div>';
    out += '<div class="row '+(me?'me':'them')+'">'+(me? t+b : b+t)+'</div>';
  });
  s.innerHTML='<div class="inner">'+out+'</div>';
}
function scrollDown(){ var s=document.getElementById('stream'); var go=function(){ s.scrollTop=s.scrollHeight; }; go(); requestAnimationFrame(go); setTimeout(go,60); }

/* ---------- 답장 ---------- */
var ta=document.getElementById('ta'), go=document.getElementById('go');
function toggleGo(){ ta.value.trim()? go.classList.add('on') : go.classList.remove('on'); }
function autosize(){ ta.style.height='auto'; ta.style.height=Math.min(ta.scrollHeight,140)+'px'; }
ta.addEventListener('input', function(){ autosize(); toggleGo(); });
ta.addEventListener('keydown', function(e){
  if(e.key==='Enter' && !e.shiftKey && !e.isComposing){ e.preventDefault(); reply(); }
});
go.addEventListener('click', reply);
function reply(){
  var v=ta.value.trim();
  if(!v || !st.cur) return;
  var room=st.cur.id;
  ta.value=''; autosize(); toggleGo();
  st.msgs.push({ id: 'tmp'+Date.now(), sender:'admin', body:v, created_at:new Date().toISOString() });
  st.msgSig='';
  renderMsgs(); scrollDown();
  rpc('chat_reply',{p_room:room, p_body:v})
    .then(function(){ loadMsgs(true); loadRooms(); })
    .catch(function(){ alert('전송에 실패했어요. 다시 로그인하거나 잠시 후 시도해주세요.'); loadMsgs(true); });
}

document.getElementById('tpl').innerHTML = TEMPLATES.map(function(t,i){
  return '<button data-i="'+i+'">'+esc(t[0])+'</button>';
}).join('');
document.getElementById('tpl').addEventListener('click', function(e){
  var b=e.target.closest('button'); if(!b) return;
  var t=TEMPLATES[+b.getAttribute('data-i')];
  ta.value = ta.value ? (ta.value.replace(/\s+$/,'') + '\n' + t[1]) : t[1];
  autosize(); toggleGo(); ta.focus();
});

document.getElementById('doneBtn').addEventListener('click', function(){
  if(!st.cur) return;
  var id=st.cur.id, next = st.cur.status==='closed' ? 'open' : 'closed';
  fetch(SB+'/rest/v1/chat_rooms?id=eq.'+id, {
    method:'PATCH', headers:hdr({Prefer:'return=minimal'}), body:JSON.stringify({status:next})
  }).then(function(){ st.cur.status=next; loadRooms(); });
});
document.getElementById('backBtn').addEventListener('click', function(){
  document.getElementById('cs').classList.remove('mobileconv');
});

/* ---------- 폴링 ---------- */
loadRooms();
setInterval(function(){ loadRooms(); if(st.cur) loadMsgs(false); }, 3000);
document.addEventListener('visibilitychange', function(){ if(!document.hidden){ loadRooms(); if(st.cur) loadMsgs(false); } });
})();
</script>
</body>
</html>