// Consumer-facing mobile screens const { newDrops, announcements, events, stores, brand, categories } = WU_DATA; // ──────────────────────────────────────────────────── // Consumer PRODUCT DETAIL — published product page (role-aware) // ──────────────────────────────────────────────────── function ConsumerProductDetail({ product, onBack }) { const [imgIdx, setImgIdx] = React.useState(0); const [lbOpen, setLbOpen] = React.useState(false); const [lbIdx, setLbIdx] = React.useState(0); const [isFav, setIsFav] = React.useState(false); const touchRef = React.useRef(null); const lbTouchRef = React.useRef(null); const user = typeof getAuth === 'function' ? getAuth() : null; const isOwner = user && user.role === 'owner'; // 즐겨찾기 초기값 세팅 const productId = (product && (product.id || (product.parsed && product.parsed.code) || product.title)) || ''; const getFavs = () => { try { return JSON.parse(localStorage.getItem('wu-favorites') || '[]'); } catch { return []; } }; React.useEffect(() => { setIsFav(getFavs().includes(productId)); }, [productId]); const toggleFav = () => { const favs = getFavs(); let next; if (favs.includes(productId)) { next = favs.filter(id => id !== productId); } else { next = [...favs, productId]; } localStorage.setItem('wu-favorites', JSON.stringify(next)); setIsFav(!isFav); }; // product가 없으면 빈 껍데기로 대체 const _p = product || {}; // 미디어 통합: media 배열 > videos+photos 개별 배열 > photos만 const _buildMedia = () => { if (_p.media && _p.media.length > 0) return _p.media; const arr = []; if (_p.videos) _p.videos.forEach(v => arr.push({ src: v, type: 'video' })); if (_p.photos) _p.photos.forEach(p => arr.push({ src: p, type: 'image' })); return arr; }; const allMedia = _buildMedia(); const mediaItems = [...allMedia].sort((a, b) => (b.type === 'video' ? 1 : 0) - (a.type === 'video' ? 1 : 0)); const photos = mediaItems.length > 0 ? mediaItems.map(m => m.src) : (_p.photos || []); const total = mediaItems.length || photos.length; const p = _p.parsed || {}; const highlights = _p.highlights || []; const body = _p.body || _p.caption || ''; const title = _p.title || p.name || p.kr || _p.kr || _p.name || '상품'; const prodBrand = p.brand || _p.brand || ''; const code = p.code || _p.code || ''; const _parseNum = (v) => typeof v === 'number' ? v : parseInt(String(v).replace(/[,\s원]/g, ''), 10) || 0; const retail = _parseNum(p.retail || _p.retail); const wholesale = _parseNum(p.wholesale || _p.wholesale); const _toArr = (v) => Array.isArray(v) ? v : (v ? String(v).split(/[,/]/).map(s => s.trim()).filter(Boolean) : []); const sizes = _toArr(p.sizes || _p.sizes); const colors = _toArr(p.colors_kr || p.colors || _p.colors_kr || _p.colors); const moq = p.moq || _p.moq || (p.qty ? p.qty : null); const season = p.season_tag || _p.season_tag || ''; const parts = Array.isArray(p.parts) ? p.parts.join(' · ') : Array.isArray(_p.parts) ? _p.parts.join(' · ') : (p.parts || _p.parts || ''); // 라이트박스 열기 const openLightbox = (idx) => { setLbIdx(idx); setLbOpen(true); }; // 터치 스와이프 (메인 갤러리) const onTouchStart = (e) => { touchRef.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { if (touchRef.current === null) return; const diff = touchRef.current - e.changedTouches[0].clientX; if (Math.abs(diff) > 40) { if (diff > 0 && imgIdx < total - 1) setImgIdx(imgIdx + 1); if (diff < 0 && imgIdx > 0) setImgIdx(imgIdx - 1); } touchRef.current = null; }; // 라이트박스 터치 스와이프 const onLbTouchStart = (e) => { lbTouchRef.current = e.touches[0].clientX; }; const onLbTouchEnd = (e) => { if (lbTouchRef.current === null) return; const diff = lbTouchRef.current - e.changedTouches[0].clientX; if (Math.abs(diff) > 40) { if (diff > 0) setLbIdx(i => (i + 1) % total); if (diff < 0) setLbIdx(i => (i - 1 + total) % total); } lbTouchRef.current = null; }; return (
{/* ── 풀스크린 라이트박스 ── */} {lbOpen && total > 0 && (
setLbOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(0,0,0,0.95)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}> {/* 닫기 */} {/* 카운터 */}
{lbIdx + 1} / {total}
{/* 메인 미디어 */}
e.stopPropagation()} onTouchStart={onLbTouchStart} onTouchEnd={onLbTouchEnd} style={{ position: 'relative', width: '100%', maxWidth: '92vw', maxHeight: '80vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> {total > 1 && ( )} {(mediaItems[lbIdx] || {}).type === 'video' ? (
{/* 하단 썸네일 */} {total > 1 && (
e.stopPropagation()} style={{ display: 'flex', gap: 6, marginTop: 14, overflowX: 'auto', maxWidth: '92vw', padding: '4px 8px' }}> {(mediaItems.length > 0 ? mediaItems : photos.map(s => ({ src: s, type: 'image' }))).map((m, i) => (
setLbIdx(i)} style={{ width: 50, height: 50, flexShrink: 0, cursor: 'pointer', border: i === lbIdx ? '2px solid var(--wu-orange)' : '2px solid transparent', opacity: i === lbIdx ? 1 : 0.5, transition: 'all 0.15s', position: 'relative', borderRadius: 4, overflow: 'hidden' }}> {m.type === 'video' ? ( ) : ( )}
))}
)}
)} {/* Top bar */}
{/* Main media gallery — 터치 스와이프 + 탭으로 라이트박스 */}
{mediaItems.length > 0 ? (
openLightbox(imgIdx)} style={{ cursor: 'pointer' }}> {mediaItems[imgIdx]?.type === 'video' ? (
) : photos.length > 0 ? (
openLightbox(imgIdx)} style={{ cursor: 'pointer' }}>
) : (
NO IMAGE
)} {total > 1 && ( {imgIdx > 0 && } {imgIdx < total - 1 && } {/* 도트 인디케이터 (최대 10개 표시) */}
{total <= 10 ? ( Array.from({ length: total }).map((_, i) =>
{ e.stopPropagation(); setImgIdx(i); }} style={{ width: i === imgIdx ? 18 : 7, height: 7, borderRadius: 999, background: i === imgIdx ? '#fff' : 'rgba(255,255,255,0.45)', transition: 'all 0.2s', cursor: 'pointer' }} />) ) : (
{imgIdx + 1} / {total}
)}
)} {/* 영상 배지 */} {mediaItems.length > 0 && mediaItems[imgIdx]?.type === 'video' && (
VIDEO
)} {/* 카운터 */}
{imgIdx + 1}/{Math.max(total, 1)}
{/* Thumbnail strip */} {total > 1 && (
{(mediaItems.length > 0 ? mediaItems : photos.map(s => ({ src: s, type: 'image' }))).map((m, i) => ( ))}
)} {/* Product info */}
{/* Brand + tags */}
{prodBrand && {prodBrand}} {season && {season}} {parts && {parts}}
{/* Title */}
{title}
{code &&
{code}
} {/* PRICING — role-aware */}
{isOwner ? (
공급가 · WHOLESALE
₩{wholesale.toLocaleString()}
판매가 · RETAIL
₩{retail.toLocaleString()}
{wholesale > 0 && retail > 0 && (
마진율 {Math.round(((retail - wholesale) / retail) * 100)}% · ₩{(retail - wholesale).toLocaleString()}
)} {moq && (
입수량 · MOQ
{moq}
)} ) : (
판매가
₩{retail.toLocaleString()}
 )}
{/* 사이즈 + 색상 통합 카드 (입수량은 점주 가격 카드에서만 표시) */} {(sizes.length > 0 || colors.length > 0) && (
{sizes.length > 0 && (
0 ? 14 : 0 }}>
사이즈
{sizes.map(s => {s})}
)} {colors.length > 0 && (
색상
{colors.map(c => {c})}
)}
)} {/* 상세 설명 */} {body && (
상품 설명
{body}
)} {/* 주요 특징 */} {highlights.length > 0 && (
주요 특징
{highlights.map((h, i) => (
✔ {h}
))}
)} {/* 발행 정보 */} {_p.publishedAt && (
발행일: {new Date(_p.publishedAt).toLocaleString('ko-KR')} · 미디어 {total}개
)}
{/* Bottom CTA */}
{isOwner && ( )}
); } // ──────────────────────────────────────────────────── // Consumer HOME — editorial feed with hero, drops, events // ──────────────────────────────────────────────────── function ConsumerHome({ variant = 'pill' }) { const [pubProducts, setPubProducts] = useState([]); const [homeCfg, setHomeCfg] = useState(null); const [visibleCount, setVisibleCount] = useState(20); const [heroIdx, setHeroIdx] = useState(0); const [favIds, setFavIds] = useState(() => { try { return JSON.parse(localStorage.getItem('wu-favorites') || '[]'); } catch { return []; } }); const loadMoreRef = React.useRef(null); const heroTouchRef = React.useRef(null); // 즐겨찾기 토글 const toggleFav = (pid, e) => { e.stopPropagation(); e.preventDefault(); const next = favIds.includes(pid) ? favIds.filter(id => id !== pid) : [...favIds, pid]; localStorage.setItem('wu-favorites', JSON.stringify(next)); setFavIds(next); }; useEffect(() => { // 발행상품 + 홈 설정 로드 if (typeof getPublished === 'function') { getPublished().then(list => setPubProducts(list || [])).catch(() => {}); } if (typeof getSettingFromCloud === 'function') { getSettingFromCloud('home-config').then(cfg => { if (cfg) setHomeCfg(cfg); }).catch(() => {}); } }, []); // 무한 스크롤 — IntersectionObserver useEffect(() => { if (!loadMoreRef.current) return; const obs = new IntersectionObserver(entries => { if (entries[0].isIntersecting && visibleCount < pubProducts.length) { setVisibleCount(prev => Math.min(prev + 20, pubProducts.length)); } }, { rootMargin: '200px' }); obs.observe(loadMoreRef.current); return () => obs.disconnect(); }, [visibleCount, pubProducts.length]); // 히어로 슬라이드 (구 hero 단일 → heroSlides 배열 호환) const heroSlides = React.useMemo(() => { if (homeCfg?.heroSlides && homeCfg.heroSlides.length > 0) return homeCfg.heroSlides; if (homeCfg?.hero) return [homeCfg.hero]; // home-config 없을 때 실제 상품 사진으로 자동 배너 생성 if (pubProducts.length > 0) { const withPhotos = pubProducts.filter(p => p.photos && p.photos.length > 0).slice(0, 3); if (withPhotos.length > 0) { return withPhotos.map(p => ({ image: p.photos[0], title: (p.parsed?.brand || p.brand || 'WORKUP') + '\n' + (p.parsed?.name || p.parsed?.kr || p.title || ''), subtitle: p.parsed?.retail ? '₩' + Number(p.parsed.retail).toLocaleString() : '', productId: p.id })); } } return [{ image: '', title: 'WORK\nWEAR\nUP.', subtitle: '워크업 프리미엄 워크웨어', productId: '' }]; }, [homeCfg, pubProducts]); // 자동 슬라이드 (4초) useEffect(() => { if (heroSlides.length <= 1) return; const timer = setInterval(() => setHeroIdx(prev => (prev + 1) % heroSlides.length), 4000); return () => clearInterval(timer); }, [heroSlides.length]); const onHeroTouchStart = (e) => { heroTouchRef.current = e.touches[0].clientX; }; const onHeroTouchEnd = (e) => { if (heroTouchRef.current === null) return; const diff = heroTouchRef.current - e.changedTouches[0].clientX; if (Math.abs(diff) > 40) { if (diff > 0) setHeroIdx(prev => (prev + 1) % heroSlides.length); else setHeroIdx(prev => (prev - 1 + heroSlides.length) % heroSlides.length); } heroTouchRef.current = null; }; const ticker = homeCfg?.ticker || '★ WORKUP PREMIUM WORKWEAR ★ NEW DROP'; // 동적 카테고리 칩: home-config 설정이 있으면 사용, 없으면 실제 상품에서 브랜드+카테고리 자동 추출 const topMenus = React.useMemo(() => { if (homeCfg?.topMenus && homeCfg.topMenus.length > 0) return homeCfg.topMenus; const chips = ['전체', '신상']; const brandCount = {}; const catCount = {}; pubProducts.forEach(p => { const parsed = p.parsed || {}; const brand = parsed.brand || p.brand || ''; if (brand) brandCount[brand] = (brandCount[brand] || 0) + 1; const cats = parsed.category || p.category || ''; const catArr = Array.isArray(cats) ? cats : cats ? [cats] : []; catArr.forEach(c => { if (c) catCount[c] = (catCount[c] || 0) + 1; }); const parts = parsed.parts || p.parts || []; const partsArr = Array.isArray(parts) ? parts : parts ? [parts] : []; partsArr.forEach(pt => { if (pt) catCount[pt] = (catCount[pt] || 0) + 1; }); }); // 카테고리 상위 항목 추가 Object.entries(catCount).sort((a, b) => b[1] - a[1]).forEach(([c]) => { if (!chips.includes(c) && chips.length < 14) chips.push(c); }); // 인기 브랜드 추가 Object.entries(brandCount).sort((a, b) => b[1] - a[1]).forEach(([b]) => { if (!chips.includes(b) && chips.length < 14) chips.push(b); }); return chips.length > 2 ? chips : categories; }, [pubProducts, homeCfg]); // NEW DROPS / BEST: home-config에 설정되어 있으면 사용, 없으면 실제 상품에서 자동 생성 const newProds = React.useMemo(() => { if (homeCfg?.newProducts && homeCfg.newProducts.length > 0) return homeCfg.newProducts; // 최신 발행상품에서 자동 생성 return pubProducts.slice(0, 6).map(p => ({ id: p.id, title: p.parsed?.name || p.parsed?.kr || p.title || '상품', brand: p.parsed?.brand || p.brand || '', retail: p.parsed?.retail || p.retail || 0, photo: p.photos?.[0] || '', })); }, [homeCfg, pubProducts]); const bestProds = React.useMemo(() => { if (homeCfg?.bestProducts && homeCfg.bestProducts.length > 0) return homeCfg.bestProducts; // 즐겨찾기 많은 상품 또는 뒤에서부터 const favs = (() => { try { return JSON.parse(localStorage.getItem('wu-favorites') || '[]'); } catch { return []; } })(); const scored = pubProducts.map(p => ({ ...p, _score: favs.includes(p.id) ? 1 : 0 })); scored.sort((a, b) => b._score - a._score); return scored.slice(0, 6).map(p => ({ id: p.id, title: p.parsed?.name || p.parsed?.kr || p.title || '상품', brand: p.parsed?.brand || p.brand || '', retail: p.parsed?.retail || p.retail || 0, photo: p.photos?.[0] || '', })); }, [homeCfg, pubProducts]); const evts = homeCfg?.events || []; const newStores = homeCfg?.newStores || []; // 발행상품 ID → 실제 데이터 매핑 (클릭 시 상세로 이동하기 위해) const prodMap = {}; pubProducts.forEach(p => { prodMap[p.id] = p; }); const goProduct = (item) => { const real = prodMap[item.id]; if (real && window.__showProductDetail) window.__showProductDetail(real); else if (window.__switchTab) window.__switchTab('shop'); }; // 신제품/베스트 카드 렌더링 헬퍼 const renderProductCard = (item, tag) => { const isFav = favIds.includes(item.id); return (
); }; return (
{/* Top bar + 카테고리 고정 */}
{/* 중앙 로고 — 클릭 시 홈 */} {/* 우측 아이콘 */}
{/* Category chips — 로고 바로 아래 고정 (홈관리에서 설정) */}
{topMenus.map(c => { window.__pendingShopCategory = c; if (window.__switchTab) window.__switchTab('shop'); }}>{c})}
{/* ═══ HERO BANNER CAROUSEL ═══ */}
{heroSlides.map((slide, i) => (
{ if (slide.productId && prodMap[slide.productId] && window.__showProductDetail) window.__showProductDetail(prodMap[slide.productId]); else if (window.__switchTab) window.__switchTab('shop'); }} style={{ minWidth: '100%', position: 'relative', background: 'var(--wu-ink)', color: 'var(--wu-paper)', cursor: 'pointer' }}> {slide.image ? ( ) : (
HERO
)}
{slide.title || ''}
{slide.subtitle || ''}
))}
{/* 슬라이드 카운터 + 도트 */} {heroSlides.length > 1 && (
{heroSlides.map((_, i) => (
{heroIdx + 1} / {heroSlides.length}
)}
{/* Ticker */}
{[...Array(3)].map((_, i) => ( {ticker.split('★').filter(Boolean).map((t, j) => ★ {t.trim()})} ))}
{/* ═══ NEW DROPS — 관리자 선택 신제품 ═══ */} {newProds.length > 0 && ( <>
NEW DROPS
신상품 추천
{newProds.slice(0, 10).map(p =>
{renderProductCard(p, 'NEW')}
)}
)} {/* ═══ BEST — 관리자 선택 베스트 ═══ */} {bestProds.length > 0 && ( <>
BEST
인기 상품
{bestProds.slice(0, 10).map(p =>
{renderProductCard(p, 'BEST')}
)}
)} {/* ═══ EVENTS ═══ */} {evts.length > 0 && ( <>
EVENTS
이번 달 이벤트
{evts.map((e, i) => (
{e.image ? ( ) : (
)}
{e.title}
{e.body}
))}
)} {/* ═══ NEW STORES ═══ */} {newStores.length > 0 && ( <>
NEW STORES
신규 매장 안내
{newStores.map((s, i) => ( ))}
)} {/* 하단 매장 CTA (기본) */} {newStores.length === 0 && ( )} {/* ═══ ALL PRODUCTS — 전체 상품 무한 스크롤 ═══ */} {pubProducts.length > 0 && ( <>
ALL PRODUCTS
전체 상품 {pubProducts.length}개
{pubProducts.slice(0, visibleCount).map(p => { const pid = p.id || (p.parsed && p.parsed.code) || p.title || ''; const isFav = favIds.includes(pid); return (
); })}
{visibleCount < pubProducts.length && (
더 불러오는 중...
)} {visibleCount >= pubProducts.length && pubProducts.length > 0 && (
— END —
)} )}
); } // ──────────────────────────────────────────────────── // Consumer STORE MAP // ──────────────────────────────────────────────────── function ConsumerMap({ variant = 'pill' }) { const mapRef = React.useRef(null); const mapObjRef = React.useRef(null); const markersRef = React.useRef([]); const [realStores, setRealStores] = useState([]); const [selected, setSelected] = useState(null); const [storeInfo, setStoreInfo] = useState(null); const [mapReady, setMapReady] = useState(false); const [search, setSearch] = useState(''); const [activeRegion, setActiveRegion] = useState('전체'); const [markersReady, setMarkersReady] = useState(0); const [lightboxIdx, setLightboxIdx] = useState(null); const [selectedPos, setSelectedPos] = useState(null); // { lat, lng } const REGIONS = ['전체', '서울', '경기', '인천', '부산', '대구', '대전', '광주', '울산', '충북', '충남', '전북', '전남', '경북', '경남', '강원', '제주']; // 매장 검색 매칭 함수 (이름, 주소, 매장ID, 담당자 전체 검색) const matchStore = (store, query, region) => { const fields = [store.name, store.address, store.storeId, store.manager, store.email].map(f => (f || '').toLowerCase()); const regionMatch = region === '전체' || fields.some(f => f.includes(region.toLowerCase())); const searchMatch = !query || fields.some(f => f.includes(query.toLowerCase())); return regionMatch && searchMatch; }; // IndexedDB에서 실제 매장 로드 useEffect(() => { if (typeof getAllStores === 'function') { getAllStores().then(s => setRealStores(s)).catch(() => {}); } }, []); // 매장 선택 시 점주 저장 정보 로드 useEffect(() => { if (!selected) { setStoreInfo(null); return; } if (typeof getStoreInfo === 'function' || window.getStoreInfo) { const fn = window.getStoreInfo || getStoreInfo; fn(selected.name).then(info => setStoreInfo(info)).catch(() => setStoreInfo(null)); } }, [selected]); // 카카오맵 SDK 로드 + 지도 생성 useEffect(() => { const apiKey = localStorage.getItem('wu-kakao-key'); if (!apiKey || !mapRef.current) return; const initMap = () => { try { if (!window.kakao || !window.kakao.maps) return; window.kakao.maps.load(() => { setMapReady(true); }); } catch(e) {} }; if (window.kakao && window.kakao.maps) { initMap(); return; } if (document.getElementById('kakao-map-script')) { initMap(); return; } const script = document.createElement('script'); script.id = 'kakao-map-script'; script.src = 'https://dapi.kakao.com/v2/maps/sdk.js?appkey=' + apiKey + '&libraries=services&autoload=false'; script.onload = initMap; script.onerror = () => {}; document.head.appendChild(script); }, []); // 마커 생성 useEffect(() => { if (!mapReady || !mapRef.current || realStores.length === 0) return; try { const map = new kakao.maps.Map(mapRef.current, { center: new kakao.maps.LatLng(36.5, 127.0), level: 13, }); map.addControl(new kakao.maps.ZoomControl(), kakao.maps.ControlPosition.RIGHT); mapObjRef.current = map; const geocoder = new kakao.maps.services.Geocoder(); const places = new kakao.maps.services.Places(); const newMarkers = []; // 주소 정제 — 상세주소(층, 호, 건물명 등) 제거하여 지오코딩 성공률 향상 const cleanAddress = (addr) => { if (!addr) return ''; let cleaned = addr.trim(); // 괄호 안 내용 제거 (건물명 등) cleaned = cleaned.replace(/\([^)]*\)/g, '').trim(); // 상세주소 패턴 제거: "3층", "B1F", "102호", "201동" 등 cleaned = cleaned.replace(/\s+(?:\d+층|\d+F|B\d+F?|\d+호|\d+동\s*\d*호?|지하\s*\d*층?).*$/i, '').trim(); // 끝에 붙은 건물명/상세 제거 (숫자-숫자 뒤의 텍스트) cleaned = cleaned.replace(/(\d+[-−]\d+)\s+.+$/, '$1').trim(); // 그래도 남은 끝부분 잡음 제거 (쉼표 이후) cleaned = cleaned.replace(/,.*$/, '').trim(); return cleaned; }; // 3단계 지오코딩: 1) 원본 주소 → 2) 정제 주소 → 3) 키워드 검색 const geocodeStore = (s) => { if (!s.address || !s.address.trim()) return; const rawAddr = s.address.trim(); const cleanAddr = cleanAddress(rawAddr); const addMarker = (lat, lng) => { const pos = new kakao.maps.LatLng(lat, lng); const marker = new kakao.maps.Marker({ map, position: pos, title: s.name }); kakao.maps.event.addListener(marker, 'click', () => { setSelected(s); setSelectedPos({ lat, lng }); }); newMarkers.push({ marker, store: s }); markersRef.current = [...newMarkers]; setMarkersReady(prev => prev + 1); }; // 1단계: 원본 주소로 지오코딩 try { geocoder.addressSearch(rawAddr, (r1, s1) => { if (s1 === kakao.maps.services.Status.OK) { addMarker(r1[0].y, r1[0].x); return; } // 2단계: 정제된 주소로 재시도 if (cleanAddr && cleanAddr !== rawAddr) { geocoder.addressSearch(cleanAddr, (r2, s2) => { if (s2 === kakao.maps.services.Status.OK) { addMarker(r2[0].y, r2[0].x); return; } // 3단계: 매장명 + 주소로 키워드 검색 const keyword = s.name + ' ' + cleanAddr; places.keywordSearch(keyword, (r3, s3) => { if (s3 === kakao.maps.services.Status.OK && r3.length > 0) { addMarker(r3[0].y, r3[0].x); } else { // 4단계: 주소만으로 키워드 검색 places.keywordSearch(cleanAddr, (r4, s4) => { if (s4 === kakao.maps.services.Status.OK && r4.length > 0) { addMarker(r4[0].y, r4[0].x); } else { console.warn('[MAP] 모든 지오코딩 실패:', s.name, rawAddr); } }); } }); }); } else { // 정제 주소가 같으면 바로 키워드 검색 const keyword = s.name + ' ' + rawAddr; places.keywordSearch(keyword, (r3, s3) => { if (s3 === kakao.maps.services.Status.OK && r3.length > 0) { addMarker(r3[0].y, r3[0].x); } else { places.keywordSearch(rawAddr, (r4, s4) => { if (s4 === kakao.maps.services.Status.OK && r4.length > 0) { addMarker(r4[0].y, r4[0].x); } else { console.warn('[MAP] 모든 지오코딩 실패:', s.name, rawAddr); } }); } }); } }); } catch(e) { console.warn('[MAP] 지오코딩 오류:', s.name, e.message); } }; realStores.forEach(s => geocodeStore(s)); } catch(e) {} }, [mapReady, realStores]); // 검색/필터 변경 시 마커 show/hide useEffect(() => { if (!markersRef.current.length || !mapObjRef.current) return; const q = search.trim(); let visibleBounds = null; try { visibleBounds = new kakao.maps.LatLngBounds(); } catch(e) {} let visCount = 0; markersRef.current.forEach(({ marker, store }) => { const visible = matchStore(store, q, activeRegion); if (visible) { marker.setMap(mapObjRef.current); if (visibleBounds) { try { visibleBounds.extend(marker.getPosition()); } catch(e) {} } visCount++; } else { marker.setMap(null); } }); if (visCount > 0 && visibleBounds && mapObjRef.current) { try { if (visCount === 1) { mapObjRef.current.setCenter(visibleBounds.getSouthWest()); mapObjRef.current.setLevel(5); } else { mapObjRef.current.setBounds(visibleBounds); } } catch(e) {} } }, [search, activeRegion, markersReady]); // ── pendingMapStore 수신: 특정 매장으로 자동 이동 ── useEffect(() => { const checkPending = () => { if (!window.__pendingMapStore) return; // 마커가 아직 안 만들어졌으면 대기 if (!markersRef.current.length || !mapObjRef.current) return; const targetName = window.__pendingMapStore; delete window.__pendingMapStore; // 매장 찾기 const found = markersRef.current.find(({ store }) => store.name && store.name.trim() === targetName.trim() ); if (found) { const pos = found.marker.getPosition(); setSelected(found.store); setSelectedPos({ lat: pos.getLat(), lng: pos.getLng() }); mapObjRef.current.setCenter(pos); mapObjRef.current.setLevel(3); // 필터 초기화 setSearch(''); setActiveRegion('전체'); } }; checkPending(); const timer = setInterval(checkPending, 300); return () => clearInterval(timer); }, [markersReady]); const handleRegion = (r) => { setActiveRegion(r); setSearch(''); setSelected(null); }; const filteredCount = realStores.filter(s => matchStore(s, search.trim(), activeRegion)).length; // 바텀시트 높이 (탭바 위, 화면 2/3) const tabH = variant === 'pill' ? 88 : 68; return (
{/* Map */}
{/* Fallback if no API key */} {!localStorage.getItem('wu-kakao-key') && (
카카오맵 API 키가 설정되지 않았습니다
HQ 관리자에서 설정하세요
)} {/* Top bar — search */}
{ setSearch(e.target.value); setActiveRegion('전체'); }} placeholder="지역·매장 검색" className="kr" style={{ border: 'none', outline: 'none', fontSize: 13, flex: 1, background: 'transparent' }} /> {search && }
{/* Region filter buttons */}
{REGIONS.map(r => { const isActive = activeRegion === r && !search; const label = r === '전체' ? '전체 ' + filteredCount : r; return ( ); })}
{/* Result count badge */} {(search || activeRegion !== '전체') && (
검색 결과 {filteredCount}개
)} {/* ═══ 매장 상세 바텀시트 — 화면 2/3 높이 ═══ */} {selected && (
{/* Handle bar */}
{/* Scrollable content */}
{/* Header — 매장명 + 닫기 */}
{selected.name} {selected.storeId && {selected.storeId}}
{selected.manager &&
담당자: {selected.manager}
}
{/* 기본 정보 카드 */}
{/* 주소 — 클릭 시 카카오맵 길찾기 */} {selectedPos ? ( {selected.address || '주소 없음'} ) : (
{selected.address || '주소 없음'}
)} {/* 전화 — 클릭 시 바로 전화 */} {(storeInfo?.phone || selected.mobile || selected.phone) ? ( {storeInfo?.phone || selected.mobile || selected.phone} ) : (
번호 없음
)} {/* 운영시간 (점주 입력) */} {storeInfo?.hours && (
{storeInfo.hours}
)} {/* 휴무일 */} {storeInfo?.holidays && (
휴무: {storeInfo.holidays}
)}
{/* 주차장 안내 */} {storeInfo?.parking && (
PARKING · 주차 안내
{storeInfo.parking}
)} {/* 매장 소개 */} {storeInfo?.intro && (
ABOUT · 매장 소개
{storeInfo.intro}
)} {/* 매장 사진 */} {storeInfo?.photos && storeInfo.photos.length > 0 && (
PHOTOS · 매장 사진
{storeInfo.photos.map((src, i) => (
))}
)} {/* 이벤트 / 공지 */} {storeInfo?.events && (
NOTICE · 매장 공지
{storeInfo.events.split('\n').filter(l => l.trim()).map((line, i) => { const isEvt = line.includes('[이벤트]'); const isNotice = line.includes('[공지]'); const isNew = line.includes('[신상]'); const c = isEvt ? 'var(--wu-orange)' : isNotice ? 'var(--wu-lime)' : isNew ? '#4A9EFF' : 'var(--wu-mute)'; return (
{line}
); })}
)} {/* 점주 정보 미등록 시 */} {!storeInfo && (
아직 매장 상세 정보가 등록되지 않았습니다
)} {/* 하단 액션 버튼 */}
{(storeInfo?.phone || selected.mobile || selected.phone) && ( 전화 )} {selectedPos && ( 길찾기 )}
)}
); } Object.assign(window, { ConsumerHome, ConsumerMap, ConsumerStoreDetail: ConsumerMap, ConsumerProductDetail });