07아이콘이 입력칸으로 펼쳐지는 검색 FAB

<main class="stage">
  <section class="se is-demo" id="se" aria-label="아이콘이 입력칸으로 펼쳐지는 검색 FAB">
    <p class="se__hint" id="se-hint">검색 열기</p>
    <div class="se__dock">
      <div class="se__pill" id="se-pill">
        <button class="se__go" type="button" id="se-go" aria-expanded="false" aria-controls="se-input" aria-label="검색 열기">
          <span aria-hidden="true"><svg viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z" opacity=".2"/><path d="M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/></svg></span>
        </button>
        <input class="se__input" id="se-input" type="text" placeholder="무엇을 찾아 드릴까요?" aria-label="검색어 입력" />
        <span class="se__q" id="se-q" aria-hidden="true">봄 원피스</span>
      </div>
      <p class="se__log" id="se-log" aria-live="polite"></p>
    </div>
  </section>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 아이콘이 입력칸으로 펼쳐지는 검색 FAB — @property 로 등록한 --w 가 길이로 흐른다
$duration: 320ms;
$easing: $ease-spring;
$color: $subject-blue;

@include stage($stage-orange);

// 길이로 등록해야 중간값이 생긴다 — 등록 없으면 한 번에 튄다
@property --w {
  syntax: "<length>";
  inherits: false;
  initial-value: 48px;
}

.se {
  display: grid;
  justify-items: center;
  gap: $sp-3;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.se__hint {
  margin: 0;
  color: $subject-ink;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.se__dock { display: grid; gap: $sp-1; justify-items: center; }

.se__pill {
  --w: 48px;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: var(--w);
  height: 48px;
  padding: 0 $sp-1;
  border: 1px solid rgba(23, 20, 26, .2);
  border-radius: $r-pill;
  background: $subject-cream;
  box-shadow: $shadow-press;
  transition: --w $duration $easing, border-color $dur-instant linear;
}

.se__go {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: $color;
  color: $subject-cream;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: transform $dur-instant $ease-pop;
}
.se__go:focus-visible { outline: 2px solid $subject-ink; outline-offset: 2px; }
.se__go:active { transform: scale(.9); }

.se__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 36px;
  margin: 0 0 0 $sp-2;
  padding: 0;
  border: 0;
  background: transparent;
  color: $subject-ink;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0ms $duration;
}
.se__input:focus-visible { outline: none; }
.se__input::placeholder { color: rgba(23, 20, 26, .45); }
.se.is-open .se__input { opacity: 1; pointer-events: auto; }
.se.is-open .se__pill { border-color: $color; }

// 루프에서만 보이는 보기용 검색어 — 진짜 입력칸은 비어 있다
.se__q {
  position: absolute;
  left: 56px;
  top: 50%;
  margin: 0;
  color: $subject-ink;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

.se__log {
  margin: 0;
  min-height: 14px;
  color: rgba(255, 247, 230, .72);
  font-size: 11px;
  line-height: 1.3;
}

// ── 격자 미리보기 전용 2초 루프 ──
@keyframes se-loop-w {
  0%, 12% { --w: 48px; }
  34%, 82% { --w: 264px; }
  94%, 100% { --w: 48px; }
}
@keyframes se-loop-q {
  0%, 30% { opacity: 0; }
  31%, 81% { opacity: 1; }
  82%, 100% { opacity: 0; }
}
@keyframes se-loop-hint {
  0%, 11% { opacity: 1; }
  12%, 81% { opacity: .4; }
  82%, 100% { opacity: 1; }
}
.se.is-demo {
  .se__pill {
    animation-name: se-loop-w;
    animation-duration: $dur-loop;
    animation-timing-function: $easing;
    animation-iteration-count: infinite;
  }
  .se__q {
    animation-name: se-loop-q;
    animation-duration: $dur-loop;
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
  }
  .se__hint {
    animation-name: se-loop-hint;
    animation-duration: $dur-loop;
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
  }
  // 루프 중에는 보기용 글자가 겹치지 않게 placeholder 를 감춘다
  .se__input::placeholder { color: transparent; }
  .se__input { opacity: 0; }
}

@media (max-width: 340px) {
  .se__pill { height: 44px; }
  .se__go { width: 36px; height: 36px; font-size: 18px; }
  .se__input { height: 32px; font-size: 12px; }
  .se__q { left: 52px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .se.is-demo .se__pill,
  .se.is-demo .se__q,
  .se.is-demo .se__hint { animation: none !important; }
  // 펼쳐진 결과만 남는다 — 입력칸이 열린 채 멈춘다
  .se.is-demo .se__pill { --w: 264px !important; }
  .se.is-demo .se__q { opacity: 1 !important; }
  .se.is-demo .se__hint { opacity: .4 !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

@property --w {
  syntax: "<length>";
  inherits: false;
  initial-value: 48px;
}
.se {
  display: grid;
  justify-items: center;
  gap: 12px;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.se__hint {
  margin: 0;
  color: #17141a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.se__dock {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.se__pill {
  --w: 48px;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: var(--w);
  height: 48px;
  padding: 0 4px;
  border: 1px solid rgba(23, 20, 26, 0.2);
  border-radius: 999px;
  background: #fff7e6;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
  transition: --w 320ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 140ms linear;
}

.se__go {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2f6df6;
  color: #fff7e6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.se__go:focus-visible {
  outline: 2px solid #17141a;
  outline-offset: 2px;
}

.se__go:active {
  transform: scale(0.9);
}

.se__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 36px;
  margin: 0 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #17141a;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0ms 320ms;
}

.se__input:focus-visible {
  outline: none;
}

.se__input::placeholder {
  color: rgba(23, 20, 26, 0.45);
}

.se.is-open .se__input {
  opacity: 1;
  pointer-events: auto;
}

.se.is-open .se__pill {
  border-color: #2f6df6;
}

.se__q {
  position: absolute;
  left: 56px;
  top: 50%;
  margin: 0;
  color: #17141a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

.se__log {
  margin: 0;
  min-height: 14px;
  color: rgba(255, 247, 230, 0.72);
  font-size: 11px;
  line-height: 1.3;
}

@keyframes se-loop-w {
  0%, 12% {
    --w: 48px;
  }
  34%, 82% {
    --w: 264px;
  }
  94%, 100% {
    --w: 48px;
  }
}
@keyframes se-loop-q {
  0%, 30% {
    opacity: 0;
  }
  31%, 81% {
    opacity: 1;
  }
  82%, 100% {
    opacity: 0;
  }
}
@keyframes se-loop-hint {
  0%, 11% {
    opacity: 1;
  }
  12%, 81% {
    opacity: 0.4;
  }
  82%, 100% {
    opacity: 1;
  }
}
.se.is-demo .se__pill {
  animation-name: se-loop-w;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}
.se.is-demo .se__q {
  animation-name: se-loop-q;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
.se.is-demo .se__hint {
  animation-name: se-loop-hint;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
.se.is-demo .se__input::placeholder {
  color: transparent;
}
.se.is-demo .se__input {
  opacity: 0;
}

@media (max-width: 340px) {
  .se__pill {
    height: 44px;
  }
  .se__go {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .se__input {
    height: 32px;
    font-size: 12px;
  }
  .se__q {
    left: 52px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .se.is-demo .se__pill,
  .se.is-demo .se__q,
  .se.is-demo .se__hint {
    animation: none !important;
  }
  .se.is-demo .se__pill {
    --w: 264px !important;
  }
  .se.is-demo .se__q {
    opacity: 1 !important;
  }
  .se.is-demo .se__hint {
    opacity: 0.4 !important;
  }
}

// 확장 검색 FAB: --w 를 직접 바꿔 알약이 입력칸으로 펼쳐진다 (요소 자신에 setProperty)
var se = document.getElementById('se');
var seGo = document.getElementById('se-go');
var seInput = document.getElementById('se-input');
var sePill = document.getElementById('se-pill');
var seHint = document.getElementById('se-hint');
var seLog = document.getElementById('se-log');
var seOpen = false;
function seSet(v) {
  se.classList.remove('is-demo');
  seOpen = v;
  se.classList.toggle('is-open', v);
  sePill.style.setProperty('--w', v ? '264px' : '48px');
  seGo.setAttribute('aria-expanded', v ? 'true' : 'false');
  seGo.setAttribute('aria-label', v ? '검색 닫기' : '검색 열기');
  seHint.textContent = v ? '검색어를 적어 보세요' : '검색 열기';
  if (v) {
    window.setTimeout(function () { seInput.focus({ preventScroll: true }); }, 320);
  } else {
    seLog.textContent = seInput.value.trim() ? '검색어를 남겼습니다' : '';
    seInput.blur();
  }
}
seGo.addEventListener('click', function () { seSet(!seOpen); });
seInput.addEventListener('keydown', function (e) {
  if (e.key === 'Enter') seSet(false);
  if (e.key === 'Escape') { seInput.value = ''; seSet(false); }
});

import { useEffect, useRef, useState } from "react";
import type { CSSProperties, ChangeEvent } from "react";
import styles from "./SearchOpenFab.module.scss";

export type SearchOpenFabProps = {
  closedHint?: string;
  openHint?: string;
  openLabel?: string;
  closeLabel?: string;
  placeholder?: string;
  inputLabel?: string;
  /** 격자 루프에서만 보이는 보기용 검색어. 진짜 입력칸은 비어 있다 */
  loopQuery?: string;
  keptLog?: string;
  groupLabel?: string;
  inputId?: string;
  /** 격자 미리보기용 2초 자동 루프. 사람이 손대면 꺼진다 */
  demo?: boolean;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & {
  "--duration"?: string;
  "--easing"?: string;
  "--color"?: string;
  "--w"?: string;
};

// ambient 에 KeyboardEvent 가 없다 — 쓰는 필드만 로컬로 선언한다
type KeyEvt = { key: string };

const OPEN_W = "264px";
const SHUT_W = "48px";

function Glass() {
  return (
    <svg viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor">
      <path d="M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z" opacity=".2" />
      <path d="M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z" />
    </svg>
  );
}

export default function SearchOpenFab({
  closedHint = "Open search",
  openHint = "Type what you are looking for",
  openLabel = "Open search",
  closeLabel = "Close search",
  placeholder = "What can we find for you?",
  inputLabel = "Search term",
  loopQuery = "spring dress",
  keptLog = "Search term kept",
  groupLabel = "Search FAB that expands into an input",
  inputId = "se-input",
  demo = true,
  duration = 320,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: SearchOpenFabProps) {
  const [open, setOpen] = useState(false);
  const [live, setLive] = useState(demo);
  const [q, setQ] = useState("");
  const [log, setLog] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);
  const focusT = useRef<number>(null);

  useEffect(() => () => {
    if (focusT.current !== null) window.clearTimeout(focusT.current);
  }, []);

  function clearFocusT() {
    if (focusT.current !== null) {
      window.clearTimeout(focusT.current);
      focusT.current = null;
    }
  }

  // 열기: 알약이 다 펼쳐진 뒤에 커서를 넣어야 펼침이 끊기지 않는다
  function openUp() {
    setLive(false);
    setOpen(true);
    clearFocusT();
    focusT.current = window.setTimeout(() => {
      const el = inputRef.current;
      if (el) el.focus({ preventScroll: true });
    }, duration);
  }

  // 닫기: 남은 검색어가 있으면 그 사실만 알린다 (text 는 Escape 로 비운 값도 받는다)
  function shut(text: string) {
    setLive(false);
    setOpen(false);
    clearFocusT();
    setLog(text.trim() ? keptLog : "");
    const el = inputRef.current;
    if (el) el.blur();
  }

  function toggle() {
    if (open) shut(q);
    else openUp();
  }

  function onKey(e: KeyEvt) {
    if (e.key === "Enter") shut(q);
    if (e.key === "Escape") {
      setQ("");
      shut("");
    }
  }

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  // 루프 중에는 --w 를 애니메이션이 굴린다 — 사람이 손댄 뒤에만 인라인으로 고정한다
  const pillVars: Vars = live ? {} : { "--w": open ? OPEN_W : SHUT_W };
  const cls = [styles.se, live ? styles.isDemo : "", open ? styles.isOpen : ""].filter(Boolean).join(" ");

  return (
    <section className={cls} style={vars} aria-label={groupLabel}>
      <p className={styles.hint}>{open ? openHint : closedHint}</p>
      <div className={styles.dock}>
        <div className={styles.pill} style={pillVars}>
          <button
            className={styles.go}
            type="button"
            aria-expanded={open}
            aria-controls={inputId}
            aria-label={open ? closeLabel : openLabel}
            onClick={toggle}
          >
            <span aria-hidden="true"><Glass /></span>
          </button>
          <input
            className={styles.input}
            id={inputId}
            ref={inputRef}
            type="text"
            value={q}
            placeholder={placeholder}
            aria-label={inputLabel}
            onChange={(e: ChangeEvent<HTMLInputElement>) => setQ(e.target.value)}
            onKeyDown={onKey}
          />
          <span className={styles.q} aria-hidden="true">{loopQuery}</span>
        </div>
        <p className={styles.log} aria-live="polite">{log}</p>
      </div>
    </section>
  );
}