// Consumer events + wishlist + signup screens function ConsumerEvents({ variant = 'pill' }) { const [mode, setMode] = useState('list'); return (
EVENTS
이벤트 · 프로모션 · 공지
{[['list', '목록'], ['cal', '캘린더']].map(([k, l]) => ( ))}
{mode === 'list' ? (
{WU_DATA.events.map((e, i) => (
{['CAMPAIGN', 'DROP', 'POPUP', 'CONFERENCE'][i]}
{e.date}
{String(i + 1).padStart(2, '0')}
{e.kr}
📍 {e.where}
))}
) : (
NOV 2026
{['일','월','화','수','목','금','토'].map(d => (
{d}
))} {Array.from({ length: 35 }, (_, i) => { const day = i - 5; const inMonth = day > 0 && day <= 30; const hasEvent = [15, 22].includes(day); const eventColor = day === 15 ? '#FF5A1F' : day === 22 ? '#D6FF3D' : null; return (
{inMonth ? day : ''}
{hasEvent &&
}
); })}
)}
); } // ──────────────────────────────────────────────────── // Consumer WISHLIST // ──────────────────────────────────────────────────── function ConsumerWishlist({ variant = 'pill' }) { const [favIds, setFavIds] = useState(() => { try { return JSON.parse(localStorage.getItem('wu-favorites') || '[]'); } catch { return []; } }); const [allProducts, setAllProducts] = useState([]); const [filter, setFilter] = useState('전체'); const [loading, setLoading] = useState(true); // 발행 상품 로드 React.useEffect(() => { const fn = typeof getPublished === 'function' ? getPublished : (typeof getPublishedProducts === 'function' ? getPublishedProducts : null); if (fn) { fn().then(list => { setAllProducts(list || []); setLoading(false); }).catch(() => setLoading(false)); } else { setLoading(false); } }, []); // localStorage 변경 감지 (다른 화면에서 즐겨찾기 변경 시) React.useEffect(() => { const sync = () => { try { setFavIds(JSON.parse(localStorage.getItem('wu-favorites') || '[]')); } catch {} }; window.addEventListener('storage', sync); const timer = setInterval(sync, 1000); // 같은 탭 내 변경도 감지 return () => { window.removeEventListener('storage', sync); clearInterval(timer); }; }, []); // 즐겨찾기 상품만 필터 const favProducts = allProducts.filter(p => { const pid = p.id || (p.parsed && p.parsed.code) || p.title || ''; return favIds.includes(pid); }); // 카테고리별 분류 const getCat = (p) => { const cat = p.parsed?.category || p.category || ''; if (!cat) return '기타'; return cat; }; const catCounts = {}; favProducts.forEach(p => { const c = getCat(p); catCounts[c] = (catCounts[c] || 0) + 1; }); const catList = ['전체', ...Object.keys(catCounts).sort()]; const filtered = filter === '전체' ? favProducts : favProducts.filter(p => getCat(p) === filter); // 즐겨찾기 해제 const removeFav = (pid) => { const next = favIds.filter(id => id !== pid); localStorage.setItem('wu-favorites', JSON.stringify(next)); setFavIds(next); }; return (
MY · 관심 상품 {favProducts.length}
좋아요
{/* 카테고리 필터 */}
{catList.map(c => ( setFilter(c)}> {c === '전체' ? '전체 ' + favProducts.length : c + ' ' + (catCounts[c] || 0)} ))}
{loading ? (
불러오는 중...
) : filtered.length === 0 ? (
{favProducts.length === 0 ? '좋아요한 상품이 없습니다' : '이 카테고리에 상품이 없습니다'}
상품 상세 페이지에서 하트를 눌러 추가해보세요
{favProducts.length === 0 && ( )}
) : (
{filtered.map(p => { const pid = p.id || (p.parsed && p.parsed.code) || p.title || ''; const title = p.parsed?.name || p.parsed?.kr || p.kr || p.title || '상품'; const brand = p.parsed?.brand || p.brand || ''; const retail = p.parsed?.retail || p.retail; const photo = p.photos?.[0]; return (
{/* 좋아요 해제 버튼 */}
); })}
)}
); } // ──────────────────────────────────────────────────── // Signup (consumer) — quick email // ──────────────────────────────────────────────────── function SignupConsumer() { return (
STEP 01 / 02 · 일반회원
JOIN
WORKUP.
이메일만 입력하면 끝. 인증 후
바로 쇼핑을 시작할 수 있어요.
EMAIL
@gmail.com
비밀번호
닉네임 · OPTIONAL
이용약관 · 개인정보처리방침에 동의합니다. 마케팅 수신은 선택입니다.
점주이신가요? 점주 가입 →
); } // ──────────────────────────────────────────────────── // Signup pending (store owner) // ──────────────────────────────────────────────────── function SignupOwnerPending() { return (
OWNER · REVIEW
{/* Animated badge */}
PENDING
REQUEST SUBMITTED
심사중
입니다.
점주 회원가입은 본사 관리자 승인 후 활성화됩니다. 영업일 기준 1–2일 소요돼요.
REQUEST #WU-2026-0147
상호서면 워크웨어 대표자최다은 사업자번호312-88-02417 제출일2026.04.21 14:02
); } // ──────────────────────────────────────────────────── // Consumer SHOP — 무신사 스타일 쇼핑 내비게이션 // ──────────────────────────────────────────────────── function ConsumerShop({ variant = 'pill' }) { const [items, setItems] = useState([]); const [loading, setLoading] = useState(true); const [navTab, setNavTab] = useState('category'); // category, brand, new, featured, ranking, soldout const [showSearch, setShowSearch] = useState(false); const [searchQuery, setSearchQuery] = useState(''); const [searchResults, setSearchResults] = useState(null); const [activeCat, setActiveCat] = useState('전체'); const [genderFilter, setGenderFilter] = useState('전체'); const [brandSearch, setBrandSearch] = useState(''); const [activeBrandConsonant, setActiveBrandConsonant] = useState('인기'); const [selectedBrand, setSelectedBrand] = useState(null); const searchInputRef = React.useRef(null); useEffect(() => { if (typeof getPublished === 'function') { getPublished().then(list => { setItems(list); setLoading(false); }).catch(() => setLoading(false)); } else { setLoading(false); } }, []); // 홈 카테고리 칩에서 넘어온 경우 해당 카테고리로 바로 이동 useEffect(() => { const checkPending = () => { if (window.__pendingShopCategory) { const cat = window.__pendingShopCategory; delete window.__pendingShopCategory; if (cat === '전체') { setNavTab('category'); setActiveCat('전체'); } else if (cat === '신상') { setNavTab('new'); } else { setNavTab('category'); setActiveCat(cat); } setSelectedBrand(null); setShowSearch(false); setSearchResults(null); } }; checkPending(); // 탭 전환 시에도 체크하도록 visibility change 이벤트 대신 interval 사용 const timer = setInterval(checkPending, 300); return () => clearInterval(timer); }, []); // ── 헬퍼 ── const getField = (p, ...keys) => { const parsed = p.parsed || {}; for (const k of keys) { if (parsed[k]) return parsed[k]; if (p[k]) return p[k]; } return ''; }; const getTitle = (p) => getField(p, 'kr', 'name') || p.title || '상품'; const getBrand = (p) => getField(p, 'brand') || ''; const getRetail = (p) => { const r = (p.parsed || {}).retail || p.retail; return typeof r === 'number' ? r : parseInt(String(r || '0').replace(/[,\s원]/g, ''), 10) || 0; }; const getPhoto = (p) => (p.photos || [])[0] || ''; const getCats = (p) => { const c = (p.parsed || {}).category || p.category || ''; return Array.isArray(c) ? c : c ? [c] : []; }; const getDaysAgo = (p) => { const d = p.publishedAt || p.createdAt; if (!d) return 9999; return (Date.now() - new Date(d).getTime()) / 86400000; }; // ── 카테고리 목록 (사이드바) — WU_DATA.categories + parts 기반 ── const sidebarCats = React.useMemo(() => { const base = ['전체', '상의', '하의', '아우터', '풋웨어', '액세서리']; // 기본 카테고리 추가 const allC = (typeof WU_DATA !== 'undefined' && WU_DATA.categories) ? WU_DATA.categories.filter(c => c !== '전체' && c !== '신상') : ['긴팔', '반팔', '긴바지', '반바지', '자켓', '조끼', '워크부츠', '슬리퍼', '에이프런']; allC.forEach(c => { if (!base.includes(c)) base.push(c); }); // 실제 상품에서 카테고리/브랜드 추출하여 추가 const dynCats = {}; const dynBrands = {}; items.forEach(p => { const parsed = p.parsed || {}; const cats = parsed.category || p.category || ''; const catArr = Array.isArray(cats) ? cats : cats ? [cats] : []; catArr.forEach(c => { if (c && !base.includes(c)) dynCats[c] = (dynCats[c] || 0) + 1; }); const parts = parsed.parts || p.parts || []; const partsArr = Array.isArray(parts) ? parts : parts ? [parts] : []; partsArr.forEach(pt => { if (pt && !base.includes(pt)) dynCats[pt] = (dynCats[pt] || 0) + 1; }); const brand = parsed.brand || p.brand || ''; if (brand) dynBrands[brand] = (dynBrands[brand] || 0) + 1; }); Object.entries(dynCats).sort((a, b) => b[1] - a[1]).forEach(([c]) => { if (!base.includes(c)) base.push(c); }); // 인기 브랜드를 카테고리 목록에도 추가 Object.entries(dynBrands).sort((a, b) => b[1] - a[1]).forEach(([b]) => { if (!base.includes(b)) base.push(b); }); return base; }, [items]); // ── 브랜드 목록 (상품에서 추출) ── const allBrands = React.useMemo(() => { const map = {}; items.forEach(p => { const b = getBrand(p); if (b) { if (!map[b]) map[b] = 0; map[b]++; } }); return Object.entries(map).sort((a, b) => b[1] - a[1]).map(([name, count]) => ({ name, count })); }, [items]); // 한글 초성 추출 const getChosung = (str) => { const cho = ['ㄱ','ㄲ','ㄴ','ㄷ','ㄸ','ㄹ','ㅁ','ㅂ','ㅃ','ㅅ','ㅆ','ㅇ','ㅈ','ㅉ','ㅊ','ㅋ','ㅌ','ㅍ','ㅎ']; const c = str.charCodeAt(0); if (c >= 0xAC00 && c <= 0xD7A3) return cho[Math.floor((c - 0xAC00) / 588)]; if (/[A-Za-z]/.test(str[0])) return str[0].toUpperCase(); return '기타'; }; const consonants = ['인기', 'ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ', 'A-Z']; const filteredBrands = React.useMemo(() => { let list = allBrands; if (brandSearch) { const q = brandSearch.toLowerCase(); list = list.filter(b => b.name.toLowerCase().includes(q)); } else if (activeBrandConsonant === '인기') { // top 20 by count list = list.slice(0, 20); } else if (activeBrandConsonant === 'A-Z') { list = list.filter(b => /^[A-Za-z]/.test(b.name)); } else { list = list.filter(b => getChosung(b.name) === activeBrandConsonant); } return list; }, [allBrands, brandSearch, activeBrandConsonant]); // ── 검색 기록 (localStorage) ── const SEARCH_KEY = 'wu-recent-searches'; const BRAND_VISIT_KEY = 'wu-recent-brands'; const getRecentSearches = () => { try { return JSON.parse(localStorage.getItem(SEARCH_KEY) || '[]'); } catch { return []; } }; const addRecentSearch = (q) => { if (!q.trim()) return; const arr = getRecentSearches().filter(s => s !== q.trim()); arr.unshift(q.trim()); localStorage.setItem(SEARCH_KEY, JSON.stringify(arr.slice(0, 20))); }; const clearRecentSearches = () => { localStorage.removeItem(SEARCH_KEY); }; const getRecentBrands = () => { try { return JSON.parse(localStorage.getItem(BRAND_VISIT_KEY) || '[]'); } catch { return []; } }; const addRecentBrand = (b) => { const arr = getRecentBrands().filter(x => x !== b); arr.unshift(b); localStorage.setItem(BRAND_VISIT_KEY, JSON.stringify(arr.slice(0, 10))); }; // 인기검색어 / 급상승 (고정 더미 + 실제 브랜드 혼합) const popularSearches = React.useMemo(() => { const top = allBrands.slice(0, 5).map(b => b.name); const extras = ['워크부츠', '카고팬츠', '쿨링셔츠', '에이프런', '자켓']; return [...top, ...extras].slice(0, 10); }, [allBrands]); const risingSearches = React.useMemo(() => { const words = ['반팔', '여름작업복', '쿨링', '슬리퍼', '안전화']; const tail = allBrands.slice(Math.max(0, allBrands.length - 5)).map(b => b.name); return [...words, ...tail].slice(0, 10); }, [allBrands]); // ── 검색 실행 ── const doSearch = (q) => { if (!q.trim()) { setSearchResults(null); return; } addRecentSearch(q); const query = q.toLowerCase(); const results = items.filter(p => { const title = getTitle(p).toLowerCase(); const brand = getBrand(p).toLowerCase(); const code = ((p.parsed || {}).code || p.code || '').toLowerCase(); const cats = getCats(p).join(' ').toLowerCase(); return title.includes(query) || brand.includes(query) || code.includes(query) || cats.includes(query); }); setSearchResults(results); setShowSearch(false); }; // ── 상품 카드 렌더 ── const renderProductCard = (p, badge, rankNum) => { const photo = getPhoto(p); const title = getTitle(p); const brand = getBrand(p); const retail = getRetail(p); const cats = getCats(p); return (
{ if (window.__showProductDetail) window.__showProductDetail(p); }} style={{ background: 'var(--wu-paper)', border: '1px solid var(--wu-line)', cursor: 'pointer', overflow: 'hidden' }}>
{photo ? :
NO IMG
} {badge && {badge}} {rankNum && {rankNum}}
{brand &&
{brand}
}
{title}
{retail > 0 &&
{retail.toLocaleString()}원
}
); }; // ── 상품 필터 (카테고리 탭용) ── // parts 그룹: 사이드바의 상위 카테고리 → 하위 카테고리 매핑 const _partsMap = { '상의': ['긴팔', '반팔'], '하의': ['긴바지', '반바지'], '아우터': ['자켓', '조끼'], '풋웨어': ['워크부츠', '슬리퍼'], '액세서리': ['액세서리', '에이프런'] }; const catFiltered = React.useMemo(() => { return items.filter(p => { if (activeCat === '전체') return true; const cats = getCats(p); const parts = (p.parsed || {}).parts || p.parts || []; const partsArr = Array.isArray(parts) ? parts : parts ? [parts] : []; const brand = getBrand(p).trim().toLowerCase(); const title = getTitle(p).trim().toLowerCase(); const allTags = [...cats, ...partsArr].map(t => t.trim().toLowerCase()); const target = activeCat.trim().toLowerCase(); // 브랜드명 매칭 (볼텍, 겐타, 디월트 등) if (brand && (brand === target || brand.includes(target) || target.includes(brand))) return true; // 상품명에 카테고리 키워드 포함 시 매칭 if (title.includes(target)) return true; // 상위 카테고리(상의, 하의 등) 선택 시 하위 카테고리도 포함 const subCats = _partsMap[activeCat]; if (subCats) { const subs = subCats.map(s => s.toLowerCase()); return allTags.some(t => t === target || subs.includes(t)); } // 정확히 일치하는 카테고리만 필터 return allTags.some(t => t === target); }); }, [items, activeCat]); // ── 신상 (최근 7일) ── const newArrivals = React.useMemo(() => { return [...items].filter(p => getDaysAgo(p) <= 7).sort((a, b) => getDaysAgo(a) - getDaysAgo(b)); }, [items]); // ── 랭킹 (가격순 + 즐겨찾기 기반 의사 랭킹) ── const ranked = React.useMemo(() => { const favs = (() => { try { return JSON.parse(localStorage.getItem('wu-favorites') || '[]'); } catch { return []; } })(); return [...items].sort((a, b) => { const aFav = favs.includes(a.id) ? 1 : 0; const bFav = favs.includes(b.id) ? 1 : 0; if (bFav !== aFav) return bFav - aFav; return getRetail(b) - getRetail(a); }); }, [items]); // ── 품절임박 (재고 적은 상품 — MOQ 기반) ── const almostSoldOut = React.useMemo(() => { return [...items].filter(p => { const moq = (p.parsed || {}).moq || p.moq || 0; return moq > 0 && moq <= 10; }).sort((a, b) => ((a.parsed || {}).moq || a.moq || 0) - ((b.parsed || {}).moq || b.moq || 0)); }, [items]); // ── 기획전 (더미 컬렉션) ── const featuredCollections = React.useMemo(() => { const collections = []; // 시즌별 묶기 const summer = items.filter(p => { const s = (p.parsed || {}).seasons || []; const t = (p.parsed || {}).season_tag || ''; return s.includes('여름') || t.includes('ss'); }); if (summer.length > 0) collections.push({ title: '여름 워크웨어 특집', subtitle: 'SUMMER COLLECTION', color: '#FF6B35', items: summer }); const winter = items.filter(p => { const s = (p.parsed || {}).seasons || []; return s.includes('겨울'); }); if (winter.length > 0) collections.push({ title: '겨울 방한 아이템', subtitle: 'WINTER ESSENTIALS', color: '#2A3A5A', items: winter }); // 브랜드별 allBrands.slice(0, 3).forEach(b => { const bItems = items.filter(p => getBrand(p) === b.name); if (bItems.length > 0) collections.push({ title: b.name + ' 브랜드관', subtitle: b.name + ' BRAND SHOP', color: '#1A1A17', items: bItems }); }); // 가격대별 const under50k = items.filter(p => { const r = getRetail(p); return r > 0 && r < 50000; }); if (under50k.length > 0) collections.push({ title: '5만원 이하 가성비템', subtitle: 'UNDER ₩50,000', color: '#6B6157', items: under50k }); return collections; }, [items, allBrands]); // ── NAV 탭 목록 ── const navTabs = [ { id: 'category', label: '카테고리' }, { id: 'brand', label: '브랜드' }, { id: 'new', label: '신상' }, { id: 'featured', label: '기획전' }, { id: 'ranking', label: '랭킹' }, { id: 'soldout', label: '품절임박' }, ]; // ═══ 검색 오버레이 ═══ if (showSearch) { const recentSearches = getRecentSearches(); const recentBrands = getRecentBrands(); return (
{/* 검색 입력 바 */}
setSearchQuery(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') doSearch(searchQuery); }} placeholder="상품명, 브랜드, 카테고리 검색" className="kr" style={{ flex: 1, border: 0, outline: 0, background: 'transparent', fontSize: 14, fontWeight: 600 }} /> {searchQuery && }
{/* 최근 검색어 */} {recentSearches.length > 0 && (
최근 검색어
{recentSearches.slice(0, 10).map((s, i) => ( ))}
)} {/* 최근 방문한 브랜드 */} {recentBrands.length > 0 && (
최근 방문한 브랜드
{recentBrands.slice(0, 8).map((b, i) => ( ))}
)} {/* 인기 검색어 TOP 10 / 급상승 검색어 TOP 10 */}
인기검색어 TOP10
{popularSearches.map((s, i) => ( ))}
급상승 검색어 TOP10
{risingSearches.map((s, i) => ( ))}
); } // ═══ 검색 결과 표시 모드 ═══ if (searchResults !== null) { return (
setShowSearch(true)} style={{ flex: 1, background: '#fff', border: '1px solid var(--wu-line)', borderRadius: 999, padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}> {searchQuery || '검색'}
검색 결과 {searchResults.length}개
{searchResults.length === 0 ? (
🔍
검색 결과가 없습니다
) : (
{searchResults.map(p => renderProductCard(p))}
)}
); } // ═══ 브랜드 상세 (특정 브랜드 선택 시) ═══ if (selectedBrand) { const brandItems = items.filter(p => getBrand(p) === selectedBrand); return (
{selectedBrand}
{brandItems.length}개 상품
{brandItems.length === 0 ? (
이 브랜드의 상품이 없습니다
) : (
{brandItems.map(p => renderProductCard(p))}
)}
); } // ═══ 메인 쇼핑 화면 ═══ return (
{/* ── 상단 검색바 ── */}
setShowSearch(true)} style={{ background: '#fff', border: '1.5px solid var(--wu-line)', borderRadius: 999, padding: '11px 16px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}> 상품명, 브랜드, 카테고리 검색
{/* ── 네비게이션 탭 ── */}
{navTabs.map(t => ( ))}
{/* ── 콘텐츠 영역 ── */}
{loading ? (
로딩 중...
) : ( <> {/* ═══ 카테고리 탭 ═══ */} {navTab === 'category' && (
{/* 사이드바 */}
{/* 성별 필터 */}
{['전체', '남성', '여성'].map(g => ( ))}
{sidebarCats.map(c => ( ))}
{/* 상품 그리드 */}
{activeCat} {catFiltered.length}개
{catFiltered.length === 0 ? (
상품이 없습니다
) : (
{catFiltered.map(p => renderProductCard(p))}
)}
)} {/* ═══ 브랜드 탭 ═══ */} {navTab === 'brand' && (
{/* 브랜드 검색 */}
setBrandSearch(e.target.value)} placeholder="브랜드를 검색하세요" className="kr" style={{ flex: 1, border: 0, outline: 0, background: 'transparent', fontSize: 13 }} /> {brandSearch && }
{/* 초성 필터 */} {!brandSearch && (
{consonants.map(c => ( ))}
)} {!brandSearch &&
{activeBrandConsonant === '인기' ? '인기 브랜드' : activeBrandConsonant} · {filteredBrands.length}개
} {/* 브랜드 리스트 */}
{filteredBrands.map((b, i) => ( ))} {filteredBrands.length === 0 && (
해당 브랜드가 없습니다
)}
)} {/* ═══ 신상 탭 ═══ */} {navTab === 'new' && (
NEW ARRIVALS
최근 2주 이내 등록 상품
● {newArrivals.length}개
{newArrivals.length === 0 ? (
📦
최근 신상품이 없습니다
) : (
{newArrivals.map(p => renderProductCard(p, 'NEW'))}
)}
)} {/* ═══ 기획전 탭 ═══ */} {navTab === 'featured' && (
FEATURED
테마별 기획전
{featuredCollections.length === 0 ? (
🎯
진행중인 기획전이 없습니다
) : ( featuredCollections.map((col, ci) => (
{/* 기획전 배너 */}
{col.subtitle}
{col.title}
{col.items.length}개 상품
{String(ci + 1).padStart(2, '0')}
{/* 상품 가로 스크롤 */}
{col.items.slice(0, 8).map(p => (
{ if (window.__showProductDetail) window.__showProductDetail(p); }} style={{ width: 140, flexShrink: 0, cursor: 'pointer' }}>
{getPhoto(p) ? :
NO IMG
}
{getTitle(p)}
{getRetail(p) > 0 &&
{getRetail(p).toLocaleString()}원
}
))}
)) )}
)} {/* ═══ 랭킹 탭 ═══ */} {navTab === 'ranking' && (
RANKING
인기 상품 순위
{ranked.length === 0 ? (
등록된 상품이 없습니다
) : (
{ranked.slice(0, 20).map((p, i) => (
{ if (window.__showProductDetail) window.__showProductDetail(p); }} style={{ display: 'flex', gap: 14, padding: 12, background: 'var(--wu-paper)', border: '1px solid var(--wu-line)', cursor: 'pointer', alignItems: 'center' }}> {i + 1}
{getPhoto(p) ? : null}
{getBrand(p) &&
{getBrand(p)}
}
{getTitle(p)}
{getRetail(p) > 0 ? getRetail(p).toLocaleString() + '원' : ''}
))}
)}
)} {/* ═══ 품절임박 탭 ═══ */} {navTab === 'soldout' && (
ALMOST SOLD OUT
재고 소진 임박 상품
● {almostSoldOut.length}개
{almostSoldOut.length === 0 ? (
✅
품절 임박 상품이 없습니다
) : (
{almostSoldOut.map(p => { const moq = (p.parsed || {}).moq || p.moq || 0; return (
{ if (window.__showProductDetail) window.__showProductDetail(p); }} style={{ background: 'var(--wu-paper)', border: '1px solid var(--wu-line)', cursor: 'pointer', overflow: 'hidden', position: 'relative' }}>
{getPhoto(p) ? :
NO IMG
}
잔여 {moq}개
{getBrand(p) &&
{getBrand(p)}
}
{getTitle(p)}
{getRetail(p) > 0 &&
{getRetail(p).toLocaleString()}원
}
); })}
)}
)} )}
); } // ──────────────────────────────────────────────────── // Consumer BOARD — 게시판 (장비자랑 · 구하고싶은공구) // 일반 회원: 자기 글 작성/수정/삭제 | 관리자: 모든 글 수정/삭제 // ──────────────────────────────────────────────────── function ConsumerBoard({ variant = 'pill' }) { const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(true); const [view, setView] = useState('list'); // list | detail | write | edit const [selected, setSelected] = useState(null); const [filterCat, setFilterCat] = useState('전체'); const [msg, setMsg] = useState(''); // write / edit form const [fTitle, setFTitle] = useState(''); const [fBody, setFBody] = useState(''); const [fCategory, setFCategory] = useState('장비자랑'); const [fPhotos, setFPhotos] = useState([]); const [editId, setEditId] = useState(null); const cats = (typeof BOARD_CATEGORIES !== 'undefined') ? BOARD_CATEGORIES : ['장비자랑', '구하고싶은공구']; const user = typeof getAuth === 'function' ? getAuth() : null; const isAdmin = user && user.role === 'admin'; const userName = user?.name || '익명'; const flash = (t) => { setMsg(t); setTimeout(() => setMsg(''), 2500); }; const load = async () => { if (typeof getAllPosts === 'function') { try { const p = await getAllPosts(); setPosts(p); } catch {} } setLoading(false); }; useEffect(() => { load(); }, []); const filtered = filterCat === '전체' ? posts : posts.filter(p => p.category === filterCat); const canEdit = (p) => isAdmin || p.author === userName; const canDelete = (p) => isAdmin || p.author === userName; // photo upload const handlePhotoUpload = (e) => { const files = Array.from(e.target.files); const remaining = 5 - fPhotos.length; files.slice(0, remaining).forEach(file => { const reader = new FileReader(); reader.onload = (ev) => setFPhotos(prev => prev.length >= 5 ? prev : [...prev, ev.target.result]); reader.readAsDataURL(file); }); e.target.value = ''; }; // submit new post const submitPost = async () => { if (!fTitle.trim()) { flash('제목을 입력하세요'); return; } if (!fBody.trim()) { flash('내용을 입력하세요'); return; } const post = { id: 'POST-' + Date.now(), title: fTitle.trim(), body: fBody.trim(), category: fCategory, photos: fPhotos, author: userName, authorRole: user?.role || 'consumer', createdAt: new Date().toISOString(), replies: [], status: 'NEW', }; await savePost(post); resetForm(); setView('list'); flash('게시글 등록 완료'); load(); }; // submit edited post const submitEdit = async () => { if (!fTitle.trim()) { flash('제목을 입력하세요'); return; } if (!fBody.trim()) { flash('내용을 입력하세요'); return; } const orig = posts.find(p => p.id === editId); if (!orig) return; const updated = { ...orig, title: fTitle.trim(), body: fBody.trim(), category: fCategory, photos: fPhotos }; await savePost(updated); resetForm(); setView('list'); flash('수정 완료'); load(); }; const handleDelete = async (id) => { if (!confirm('이 게시글을 삭제하시겠습니까?')) return; await deletePost(id); setView('list'); setSelected(null); flash('삭제 완료'); load(); }; const handleReply = async (postId, replyText) => { const post = posts.find(p => p.id === postId); if (!post) return; const reply = { id: 'R-' + Date.now(), text: replyText, author: userName, authorRole: user?.role || 'consumer', createdAt: new Date().toISOString() }; post.replies = [...(post.replies || []), reply]; await savePost(post); load(); flash('댓글 등록 완료'); // refresh selected setSelected({ ...post }); }; const handleDeleteReply = async (postId, replyId) => { const post = posts.find(p => p.id === postId); if (!post) return; post.replies = (post.replies || []).filter(r => r.id !== replyId); await savePost(post); load(); flash('댓글 삭제'); setSelected({ ...post }); }; const resetForm = () => { setFTitle(''); setFBody(''); setFCategory('장비자랑'); setFPhotos([]); setEditId(null); }; const startEdit = (p) => { setFTitle(p.title); setFBody(p.body); setFCategory(p.category); setFPhotos(p.photos || []); setEditId(p.id); setView('edit'); }; const startWrite = () => { resetForm(); setView('write'); }; const catBadgeBg = (c) => c === '장비자랑' ? '#1565C0' : '#E65100'; // ── DETAIL VIEW ── if (view === 'detail' && selected) { return (
{msg &&
{msg}
}
{selected.category} {new Date(selected.createdAt).toLocaleDateString('ko-KR')}
{selected.title}
작성자: {selected.author}
{selected.body}
{/* photos */} {(selected.photos || []).length > 0 && (
{selected.photos.map((ph, i) => ( ))}
)} {/* action buttons */} {(canEdit(selected) || canDelete(selected)) && (
{canEdit(selected) && } {canDelete(selected) && }
)} {/* replies */}
REPLIES · {(selected.replies || []).length}
{(selected.replies || []).map((r, i) => (
{r.author} {r.authorRole === 'admin' ? '관리자' : ''}
{(isAdmin || r.author === userName) && ( )}
{r.text}
{new Date(r.createdAt).toLocaleDateString('ko-KR')}
))} {/* reply input */} handleReply(selected.id, txt)} />
); } // ── WRITE / EDIT VIEW ── if (view === 'write' || view === 'edit') { const isEditing = view === 'edit'; return (
{msg &&
{msg}
}
{isEditing ? 'EDIT POST' : 'NEW POST'}
{/* category selector */}
카테고리
{cats.map(c => ( ))}
{/* title */}
제목
setFTitle(e.target.value)} placeholder="제목을 입력하세요" className="kr" style={{ width: '100%', padding: '12px 14px', border: '1px solid var(--wu-line)', background: 'var(--wu-paper)', fontSize: 15, fontWeight: 600, outline: 'none', marginBottom: 16, borderRadius: 6 }} /> {/* body */}
내용