/* global React, ReactDOM, Icon, Reveal, Header, CTASection, Footer, MobileActionBar */ /* global CATALOG_STATUS, DEVICES, wonRange, deviceById, PRICE_NOTE, SAMPLE_NOTE, smartMatch */ // ========================================================== // DEVICES — 기기 전체보기 (devices.html) // 브랜드·용도 필터 + 검색(smartMatch, ?q= 딥링크) + #기기id 딥링크. // 가격은 catalog-data.js의 예상 범위(wonRange)만 노출한다. // ========================================================== const { useState: useStateD, useEffect: useEffectD, useMemo: useMemoD } = React; // 태그 → 한글 배지 라벨 const DV_TAG_LABELS = { popular: "인기", flagship: "플래그십", folder: "폴더블", value: "실속", senior: "효도폰", camera: "카메라 특화", compact: "콤팩트", design: "디자인", slim: "슬림", battery: "배터리", "first-phone": "첫 스마트폰", "big-screen": "대화면" }; const DV_BRANDS = [ { key: "all", label: "전체" }, { key: "samsung", label: "삼성" }, { key: "apple", label: "애플" } ]; const DV_USES = [ { key: "all", label: "전체" }, { key: "flagship", label: "플래그십" }, { key: "folder", label: "폴더블" }, { key: "value", label: "실속·효도" } ]; const DV_BRAND_KO = { samsung: "삼성 samsung galaxy 갤럭시", apple: "애플 apple iphone 아이폰" }; function dvMatchesUse(d, use) { if (use === "all") return true; if (use === "value") return d.tags.includes("value") || d.tags.includes("senior"); return d.tags.includes(use); } function dvHaystack(d) { return [ d.name, DV_BRAND_KO[d.brand] || d.brand, d.series, d.network, d.storages.join(" "), d.tags.join(" "), d.tags.map((t) => DV_TAG_LABELS[t] || "").join(" ") ].join(" "); } // ---------- 기기 카드 ---------- function DeviceCard({ d, hi }) { return (
{d.name}
{d.tags.slice(0, 3).map((t) => DV_TAG_LABELS[t] ? {DV_TAG_LABELS[t]} : null )}

{d.name}

{d.network} · {d.storages.join(" / ")}
통신사 개통 시 예상 월 납부액 {wonRange(d.monthly)}
{d.unlocked &&
자급제 예상가 {wonRange(d.unlocked)}
} {d.channels.includes("used") &&
중고 재고 문의 가능
}
이 기기로 상담 예약
); } // ---------- 페이지 ---------- function DevicesPage() { const [brand, setBrand] = useStateD("all"); const [use, setUse] = useStateD("all"); const [q, setQ] = useStateD(() => { try { return new URLSearchParams(window.location.search).get("q") || ""; } catch (e) { return ""; } }); const [hiId, setHiId] = useStateD(null); // #기기id 딥링크 — 해당 카드로 스크롤 + 잠시 하이라이트 useEffectD(() => { let raw = ""; try { raw = decodeURIComponent((window.location.hash || "").slice(1)); } catch (e) { raw = ""; } if (!raw || !deviceById(raw)) return; const t1 = setTimeout(() => { const el = document.getElementById(raw); if (!el) return; el.scrollIntoView({ behavior: "smooth", block: "center" }); setHiId(raw); }, 350); const t2 = setTimeout(() => setHiId(null), 3200); return () => { clearTimeout(t1); clearTimeout(t2); }; }, []); const filtered = useMemoD(() => DEVICES.filter((d) => { if (brand !== "all" && d.brand !== brand) return false; if (!dvMatchesUse(d, use)) return false; if (q.trim() && !smartMatch(q, dvHaystack(d))) return false; return true; }), [brand, use, q]); const resetFilters = () => { setBrand("all"); setUse("all"); setQ(""); }; return ( <>
{/* ── 히어로 미니 헤드 ── */}
DEVICES

기기 전체보기

아이폰·갤럭시 플래그십부터 폴더블, 실속·효도폰까지. 매장에서 취급하는 기기를 한 번에 살펴보세요. 조건은 상담에서 투명하게 안내드립니다.

{CATALOG_STATUS === "SAMPLE" && SAMPLE_NOTE &&
{SAMPLE_NOTE}
} {/* ── 필터 ── */}
브랜드 {DV_BRANDS.map((b) => )}
용도 {DV_USES.map((u) => )}
setQ(e.target.value)} placeholder="기기명 검색 — 예: 아이폰 프로, 플립, 효도폰" aria-label="기기 검색" />
{/* ── 카탈로그 그리드 ── */}
총 {filtered.length}개 기기
{filtered.length > 0 ?
{filtered.map((d, i) => )}
:
조건에 맞는 기기가 없습니다

검색어나 필터를 조정해 보세요. 목록에 없는 기기도 매장에서 상담으로 안내드릴 수 있습니다.

} {/* 가격 고지 */}
{PRICE_NOTE}
{/* finder 유도 배너 */}
VISIT

어떤 기기가 맞을지 고민된다면

쓰시는 패턴에 맞춰 기기와 월 납부 구간을 매장에서 1:1로 맞춰드립니다.

방문 상담 예약