// 타운카 제휴업체 — 메인 앱 // 화면: home (메인) → category (카테고리별 리스트) const { useState, useMemo, useEffect, useRef } = React; // ──────────────────────────────────────────────────────────── // 카테고리 안내 카피 // ──────────────────────────────────────────────────────────── const INTROS = { 'new-domestic': { title: '신차 (국산)', desc: '국산차는 온라인 판매가 제한돼요. 가까운 지점에 내방해 "타운카 회원"임을 알리고 상담받으세요.', accent: 'rgba(11,181,59,0.08)', icon: 'car' }, 'new-imported': { title: '신차 (수입)', desc: '수입차 공식 전시장입니다. 카마스터 직통 연락처로 시승·견적 상담을 받으실 수 있어요.', accent: 'rgba(0,138,237,0.08)', icon: 'car-front' }, used: { title: '중고차 구매', desc: '검증된 매매상사에서 시세 상담과 매물 추천을 받으실 수 있어요.', accent: 'rgba(0,138,237,0.08)', icon: 'badge-dollar-sign' }, accident: { title: '차량 사고 정비', desc: '사고 접수와 견적은 담당자에게 직접 문의해주세요. 테슬라 공인 바디샵도 포함됩니다.', accent: 'rgba(228,31,16,0.06)', icon: 'wrench' }, service: { title: '차량 일반 정비', desc: '정기 점검, 소모품 교체, 경정비 등 일상 정비를 받을 수 있는 제휴 업체입니다.', accent: 'rgba(245,185,0,0.10)', icon: 'settings' }, inspection: { title: '자동차 검사', desc: 'TS 한국교통안전공단 지정 검사소 및 출장 검사장입니다. 정기검사·차령연장에 활용하세요.', accent: 'rgba(0,138,237,0.08)', icon: 'clipboard-check' }, detailing: { title: '세차 · 디테일링', desc: '출장 세차·유리막 코팅·흡연/에바 클리닝 수준까지 차량 관리 제휴 업체입니다.', accent: 'rgba(142,88,240,0.08)', icon: 'sparkles' }, custom: { title: '썬팅 · 복원 · 개조', desc: '썬팅·PPF·블랙박스 시공부터 실내·가죽 복원, 캠핑카 개조까지 자잘한 특수 시공을 맡아드려요.', accent: 'rgba(255,87,134,0.08)', icon: 'wand-2' } }; // 카테고리별 카드 컬러 톤 const CAT_TONES = { 'new-domestic': { bg: 'linear-gradient(135deg,#E6F8EC,#DAF1E2)', accent: '#06842B' }, 'new-imported': { bg: 'linear-gradient(135deg,#E5F2FE,#D9EAFB)', accent: '#0067BC' }, 'used': { bg: 'linear-gradient(135deg,#FFF4E5,#FFE9CC)', accent: '#A85800' }, 'accident': { bg: 'linear-gradient(135deg,#FFEAE6,#FFD9D2)', accent: '#B81000' }, 'service': { bg: 'linear-gradient(135deg,#FFF7DA,#FFEFB8)', accent: '#8A6500' }, 'inspection': { bg: 'linear-gradient(135deg,#E8E9F8,#DCDEF3)', accent: '#3D44A3' }, 'detailing': { bg: 'linear-gradient(135deg,#F1E7FB,#E6D8F7)', accent: '#6526C4' }, 'custom': { bg: 'linear-gradient(135deg,#FFE7EF,#FFD3E1)', accent: '#C61C5A' } }; // ──────────────────────────────────────────────────────────── // 루트 앱 // ──────────────────────────────────────────────────────────── function App() { const [screen, setScreen] = useState('home'); // 'home' | 'category' const [activeCategory, setActiveCategory] = useState(null); const [activeSub, setActiveSub] = useState(null); const [detailId, setDetailId] = useState(null); const [toast, setToast] = useState({ msg: '', visible: false }); const showToast = (msg) => { setToast({ msg, visible: true }); setTimeout(() => setToast((t) => ({ ...t, visible: false })), 1800); }; const handleCardClick = (p) => setDetailId(p.id); const handleCall = () => {}; // tel: 링크가 직접 처리 const handleCopy = (text) => { if (navigator.clipboard) navigator.clipboard.writeText(text).catch(() => {}); showToast('주소가 복사됐어요'); }; const handleDirections = () => {}; // 네이버 지도 링크가 직접 처리 const detailPartner = PARTNERS.find((p) => p.id === detailId); const openCategory = (cid, sub) => { setActiveCategory(cid); setActiveSub(sub || null); setScreen('category'); }; return (
{/* 모바일 컨테이너 (max 480px) */}
{screen === 'home' ? showToast('웹뷰를 닫습니다 (앱 전용)')} /> : setScreen('home')} onOpenDetail={handleCardClick} /> } {/* 상세 모달 */} setDetailId(null)} onCall={handleCall} onCopy={handleCopy} onDirections={handleDirections} /> {/* 토스트 */}
); } // ──────────────────────────────────────────────────────────── // HOME 스크린 // ──────────────────────────────────────────────────────────── function HomeScreen({ onOpenCategory, onOpenDetail, onClose }) { const officialsDrag = useDragScroll(); const counts = useMemo(() => { const out = {}; CATEGORIES.forEach((c) => {out[c.id] = PARTNERS.filter((p) => p.category === c.id).length;}); return out; }, []); const total = PARTNERS.length; const officials = useMemo(() => PARTNERS.filter((p) => p.official), []); const discounts = useMemo(() => PARTNERS.filter((p) => p.discount), []); return (
{/* 헤더 */}
{/* 업체 광고 배너 */} {/* 카테고리 그리드 */}
카테고리
{CATEGORIES.map((c) => onOpenCategory(c.id)} /> )}
{/* 공식 리테일러 */} {officials.length > 0 &&
onOpenCategory(officials[0].category) }}> 타운카 공식
타운카가 공식 협력하는 수입차 리테일러입니다
{officials.map((p) => onOpenDetail(p)} /> )}
} {/* 제휴 할인 */} {discounts.length > 0 &&
제휴 할인 운영 매장
타운카 회원 전용 할인이 적용되는 매장이에요
{discounts.map((p, i) => onOpenDetail(p)} /> )}
} {/* 푸터 */}
); } // ── 업체 광고 캐러셀 function AdCarousel({ ads, onAdClick, total }) { const [index, setIndex] = React.useState(0); const drag = useDragScroll(); const trackRef = drag.ref; const containerRef = React.useRef(null); const rafRef = React.useRef(null); // 스크롤 → 인덱스 동기화 (rAF 스로틀) const handleScroll = () => { if (rafRef.current) return; rafRef.current = requestAnimationFrame(() => { rafRef.current = null; const el = trackRef.current; if (!el) return; const w = el.clientWidth; const i = Math.round(el.scrollLeft / w); setIndex(prev => prev === i ? prev : i); }); }; const goTo = (i) => { const el = trackRef.current; if (!el) return; el.scrollTo({ left: el.clientWidth * i, behavior: 'smooth' }); }; return (
{/* 트랙 (가로 스냅 스크롤) */}
{ads.map(ad => ( { const partner = PARTNERS.find(p => p.id === ad.partnerId); if (partner) onAdClick(partner); }} /> ))}
{/* 인디케이터 + 라벨 */}
{ads.map((_, i) => (
전체 {total}개 제휴 업체
); } // ── 광고 슬라이드 한 장 function AdSlide({ ad, onClick }) { return ( ); } // ── 카테고리 카드 (흰 배경 · 회색 페이지 위에) function CategoryCard({ category, count, onClick }) { const tone = CAT_TONES[category.id] || {}; return ( ); } // ── 고객센터 카드 (그리드 마지막 셀) function ContactCard() { return ( ); } // ── 공식 리테일러 카드 (가로 스크롤) function OfficialCard({ partner, onClick }) { return ( ); } // ── 섹션 타이틀 function SectionTitle({ children, action }) { return (

{children}

{action && }
); } // ── 푸터 function ListFooter() { return (
제휴업체 입점 문의 / 정보 수정 요청은
타운카 고객센터로 알려주세요
); } // ──────────────────────────────────────────────────────────── // 카테고리 스크린 // ──────────────────────────────────────────────────────────── function CategoryScreen({ initialCategory, initialSub, onBack, onOpenDetail }) { const [category, setCategory] = useState(initialCategory || 'new-domestic'); const [sub, setSub] = useState(initialSub || null); const [search, setSearch] = useState(''); const counts = useMemo(() => { const out = {}; CATEGORIES.forEach((c) => {out[c.id] = PARTNERS.filter((p) => p.category === c.id).length;}); return out; }, []); const listRef = useRef(null); useEffect(() => { setSub(null); if (listRef.current) listRef.current.scrollTop = 0; }, [category]); useEffect(() => { if (listRef.current) listRef.current.scrollTop = 0; }, [sub, search]); const filtered = useMemo(() => { let list = PARTNERS.filter((p) => p.category === category); if (sub) list = list.filter((p) => p.sub === sub); if (search.trim()) { const q = search.trim().toLowerCase(); list = list.filter((p) => p.name.toLowerCase().includes(q) || (p.address || '').toLowerCase().includes(q) || (p.brand || '').toLowerCase().includes(q) || (p.area || '').toLowerCase().includes(q) ); } return list; }, [category, sub, search]); const subItems = useMemo(() => { if (category === 'new-domestic') return DOMESTIC_BRANDS.map((b) => ({ id: b.id, label: b.label })); if (category === 'new-imported') return IMPORTED_BRANDS.map((b) => ({ id: b.id, label: b.label })); if (category === 'detailing') return DETAILING_SUBS; if (category === 'custom') return CUSTOM_SUBS; return null; }, [category]); const grouped = useMemo(() => { const groupSpec = category === 'new-domestic' ? DOMESTIC_BRANDS : category === 'new-imported' ? IMPORTED_BRANDS : category === 'detailing' ? DETAILING_SUBS : category === 'custom' ? CUSTOM_SUBS : null; if (!groupSpec || sub || search.trim()) return null; const map = new Map(); groupSpec.forEach((b) => map.set(b.id, { brand: b, items: [] })); filtered.forEach((p) => { const g = map.get(p.sub); if (g) g.items.push(p); }); return Array.from(map.values()).filter((g) => g.items.length > 0); }, [category, sub, search, filtered]); const intro = INTROS[category]; return (
{/* 헤더 */} {/* 카테고리 탭 */} {/* 서브 칩 */} {subItems && } {/* 검색바 */}
setSearch(e.target.value)} placeholder="지점명·지역으로 검색" style={{ all: 'unset', flex: 1, fontSize: 14, fontWeight: 500, fontFamily: FF, letterSpacing: '0.015em', color: TC.textStrong, minWidth: 0 }} /> {search && }
{/* 결과 카운트 */}
{sub ? <> {[...NEW_BRANDS, ...ETC_SUBS].find((x) => x.id === sub)?.label} {' · '} {filtered.length}개 {CATEGORIES.find(c => c.id === category)?.unit || ''} : <>총 {filtered.length}개 {CATEGORIES.find(c => c.id === category)?.unit || '제휴 업체'} }
{/* 리스트 영역 */}
{intro && !sub && !search.trim() && } {filtered.length === 0 ? : grouped ? grouped.map((g) =>
{g.items.map((p) => onOpenDetail(p)} /> )}
) : filtered.map((p) => onOpenDetail(p)} /> ) } {filtered.length > 0 && }
); } // ── 카테고리 안내 function CategoryIntro({ title, desc, accent, icon }) { return (
{title}
{desc}
); } // ── 그룹 헤더 function GroupHeader({ label, count }) { return (

{label}

{count}곳
); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); Object.assign(window, { App, HomeScreen, CategoryScreen, AdCarousel, AdSlide, CategoryCard, OfficialCard, GroupHeader, CategoryIntro, SectionTitle, ListFooter, INTROS, CAT_TONES });