칩

<div class="chw">
  <div class="chips" id="chips">
    <button class="chip" aria-pressed="true">전체</button>
    <button class="chip" aria-pressed="false">디자인</button>
    <button class="chip" aria-pressed="false">개발</button>
    <button class="chip" aria-pressed="false">마케팅</button>
  </div>
  <div class="chip removable" id="rmc"><span>정경훈</span><button aria-label="정경훈 삭제">×</button></div>
</div>

.chw{display:grid;gap:16px;width:min(240px,90%)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.removable{display:inline-flex;align-items:center;gap:7px;width:fit-content;transition:opacity .25s,transform .25s}
.removable[data-gone]{opacity:0;transform:scale(.8)}
.removable button{border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer;line-height:1;padding:0}

const chips = [...document.querySelectorAll('.chips .chip')];
let auto = true;
chips.forEach((c) => c.addEventListener('click', () => { auto = false; chips.forEach(x => x.setAttribute('aria-pressed', String(x === c))); }));
let i = 0;
setInterval(() => { if (!auto) return; chips.forEach((c, idx) => c.setAttribute('aria-pressed', String(idx === i))); i = (i + 1) % chips.length; }, 1300);

const rmc = document.getElementById('rmc');
let rmAuto = true;
rmc.querySelector('button').addEventListener('click', () => { rmAuto = false; rmc.setAttribute('data-gone', ''); });
function rmLoop() {
  if (!rmAuto) return;
  rmc.removeAttribute('data-gone');
  setTimeout(() => { if (!rmAuto) return; rmc.setAttribute('data-gone', ''); setTimeout(rmLoop, 900); }, 2200);
}
rmLoop();