{cats.map((c, i) => {
const on = active === c.label; // 카탈로그에서 현재 보고 있는 종류는 테두리+굵은 라벨로 강조
return (
);
})}
);
}
/* =========================================================
회전 링 캐러셀 (히어로) — 모델 중심으로 17개 카테고리 카드가 도는 UI
퀸잇 광고 스타일: 앞쪽 ~6장만 보이고, 뒤로 가면 사라졌다 '카테고리 순서대로' 재등장.
드래그/휠로 직접 회전. 카드 클릭 → 그 종류 카탈로그.
⏸ Phase2(미구현): 카드가 정면(θ≈0) 통과 시 '그 옷을 입은 모델 이미지'로 교체
— 지금은 front 플래그(정면 감지)만 만들어 두고 강조만 함. 착용 이미지 준비되면 여기 끼우면 됨.
========================================================= */
function FittingCarousel({ go }) {
const [, force] = React.useState(0); // rAF 리렌더 트리거
const [hover, setHover] = React.useState(false); // 마우스 올림 — 좌우 회전 화살표 힌트 표시용
const [hinted, setHinted] = React.useState(false); // 한 번이라도 돌려봤나 — 이후 안내 배지를 지움(시선 정리)
const rotRef = React.useRef(0); // 링 회전각(도)
const draggingRef = React.useRef(false);
const pausedRef = React.useRef(false); // 마우스 올리면 자동회전 일시정지
const lastXRef = React.useRef(0);
const movedRef = React.useRef(false); // 드래그로 움직였는지(클릭 오발동 방지)
const failedWearRef = React.useRef(new Set()); // 없는(404) 착용샷 기억 → 베이스로 폴백(깜빡임 방지)
const N = RAIL_CATS.length; // 15
const STEP = 360 / N;
// 자동 회전 (드래그/호버 아닐 때 천천히)
React.useEffect(() => {
let prev = performance.now();
let raf = 0;
const tick = (now) => {
const dt = now - prev; prev = now;
if (!pausedRef.current && !draggingRef.current) {
rotRef.current = (rotRef.current + dt * 0.011) % 360; // 초당 ~11도
force((v) => v + 1);
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
const clientX = (e) => (e.touches && e.touches[0] ? e.touches[0].clientX : e.clientX);
const onDown = (e) => { draggingRef.current = true; movedRef.current = false; lastXRef.current = clientX(e); };
const onMove = (e) => {
if (!draggingRef.current) return;
const x = clientX(e); const dx = x - lastXRef.current; lastXRef.current = x;
if (Math.abs(dx) > 2) { movedRef.current = true; if (!hinted) setHinted(true); } // 직접 돌려봤으면 안내 배지 제거
rotRef.current = (rotRef.current + dx * 0.35) % 360; force((v) => v + 1);
};
const onUp = () => { draggingRef.current = false; };
const onWheel = (e) => {
if (!hinted) setHinted(true); // 휠로 돌려봤으면 안내 배지 제거
rotRef.current = (rotRef.current + (e.deltaY || e.deltaX) * 0.12) % 360; force((v) => v + 1);
};
const W = 920, H = 540; // 무대 크기
const cx = W / 2;
const modelCy = H * 0.5; // 모델 세로 중심 (스테이지 정중앙)
const ringCy = H * 0.5; // 링(궤도) 중심도 모델 중심에 맞춰 '모델을 감싸고' 돌게
const RX = 340, RY = 158; // 타원 반경(세로를 크게 → '옆으로'가 아니라 '감싸고 도는' 3D 궤도)
const rot = rotRef.current;
// 착용샷/베이스 프레임(619×984) 안에서 인물이 가로 ~78%(x≈484)에 몰려 있음.
// 이미지 중심을 cx에 둬도 인물은 오른쪽으로 치우쳐 보이므로, 인물이 cx에 오도록 왼쪽으로 보정.
const MODEL_ASPECT = 619 / 984; // 착용샷 프레임 비율
const modelH = H * 0.86;
const modelW = modelH * MODEL_ASPECT; // objectFit:contain 렌더 시 실제 이미지 폭
const PERSON_CX = 0.782; // 프레임 내 인물 가로중심 비율 (x484/619)
const modelDx = (PERSON_CX - 0.5) * modelW; // 인물을 cx로 옮길 좌측 이동량(px)
// 각 카드의 화면 배치 (co: +1=정면(앞·아래·큼) … -1=뒤(위·작음·모델 뒤))
const cards = RAIL_CATS.map((c, i) => {
const ang = (i * STEP + rot) * Math.PI / 180;
const s = Math.sin(ang), co = Math.cos(ang);
const depth = (co + 1) / 2; // 0(뒤)~1(정면)
const x = cx + RX * s;
const y = ringCy + RY * co; // 정면=아래(모델 앞), 뒤=위(모델 뒤)
const scale = 0.5 + depth * 0.62; // 뒤 0.5 ~ 앞 1.12
// ★뒤 카드도 '반투명하게' 계속 보이게(사라지지 않음) → 모델을 감싸고 도는 궤도가 보인다.
const opacity = 0.26 + depth * 0.68; // 뒤 0.26 ~ 앞 0.94 (앞쪽 ~6장이 또렷)
const z = Math.round(depth * 200); // 모델(z=100) 기준: 앞>100(앞), 뒤<100(뒤)
return { c, i, x, y, scale, opacity, z, depth, front: depth > 0.93 };
});
// ★착용샷 전환 — 중앙 모델은 '이미지 하나만'. 기본은 누끼 베이스, '원피스' 카드가 정면에
// '오기 전'(depth>0.55)부터 원피스 입은 모델로 교체하고 지나가면 다시 베이스로.
// (우선 원피스만. 다른 카테고리는 착용샷 준비되면 WEAR_SRC 에 추가하면 자동 확장)
const BASE_SRC = "assets/model-base.png";
// 17개 전부 매핑(파일 없으면 onError 로 베이스 폴백 + failedWearRef 기억)
const WEAR_SRC = {};
RAIL_CATS.forEach((rc) => { if (CAT_SLUG[rc.label]) WEAR_SRC[rc.label] = `assets/wear-model/${CAT_SLUG[rc.label]}.png`; });
// 카드가 '모델 앞(정면)'에 왔을 때만 교체 — 옆이 아니라 가장 앞 카드(depth 최대)를 기준으로.
let centerSrc = BASE_SRC, bestDepth = 0.9;
for (const cd of cards) {
const src = WEAR_SRC[cd.c.label];
if (src && cd.depth > bestDepth && !failedWearRef.current.has(src)) { bestDepth = cd.depth; centerSrc = src; }
}
return (
<>
{ pausedRef.current = true; setHover(true); }}
onMouseLeave={() => { pausedRef.current = false; draggingRef.current = false; setHover(false); }}
onTouchStart={onDown} onTouchMove={onMove} onTouchEnd={onUp}
onWheel={onWheel}
>
{/* 착용샷 미리 로드(스왑 즉시 반영) — 화면엔 안 보임 */}
{Object.values(WEAR_SRC).map((s) => )}
{/* 중앙 모델 — 이미지 하나만. 기본 누끼 / 원피스 정면 접근 시 착용샷으로 교체 */}
{ failedWearRef.current.add(centerSrc); if (!e.currentTarget.src.endsWith("model-base.png")) e.currentTarget.src = BASE_SRC; }}
style={{ position: "absolute", left: cx, top: modelCy, transform: `translate(calc(-50% - ${modelDx}px), -50%)`, height: modelH, objectFit: "contain", zIndex: 100, pointerEvents: "none" }} />
{/* 회전 카드들 (앞=크고 또렷·모델 앞 / 뒤=작고 반투명·모델 뒤 → 빙글빙글 도는 궤도) */}
{cards.map(({ c, i, x, y, scale, opacity, z, front }) => (
))}
{/* (호버 좌우 화살표 힌트 삭제 — 사용자 요청 07-27. 조작 안내는 아래 '드래그·휠' 배지가 담당) */}
{/* 안내 배지 — 예전엔 무대 밖 bottom:-20 의 작은 회색 글씨라 아래 카테고리 탭과 겹치고 잘 안 보였다.
이제 '레이아웃 흐름 안'의 고대비 필(pill) 배지로 두어 겹침이 원천적으로 없고,
사용자가 한 번 돌려보면(드래그/휠) 자연스럽게 사라져 시선을 정리한다. */}
{/* 좌우 드래그 아이콘 */}
드래그·
{/* 마우스 휠 아이콘 */}
휠로 돌려보세요|카드를 누르면 그 종류로 이동
);
}
/* =========================================================
홈
========================================================= */
function HomeScreen({ go, openProduct, tryProduct, t, auth }) {
// 성별 탭 — 기본 여성. localStorage 로 유지(앱과 동일하게). 남성이면 여성 카테고리/상품을 숨김.
const [gender, setGenderState] = React.useState(() => localStorage.getItem("denky-gender") || "여성");
const setGender = (g) => { setGenderState(g); try { localStorage.setItem("denky-gender", g); sessionStorage.setItem("gender_explicit", "1"); } catch (e) {} };
// 오늘의 풀코디 — 아바타가 오늘 추천 코디를 입은 렌더 이미지(스마트앱 홈과 동일).
// 로그인 + 아바타·키가 있어야 뜬다. 자격 없음/미생성이면 null → 섹션 자체를 숨긴다.
const [daily, setDaily] = React.useState(null);
React.useEffect(() => {
if (!(auth && auth.loggedIn)) { setDaily(null); return; }
let alive = true;
let timer = null;
let tries = 0;
// 오늘 날짜(KST) — 서버의 look_date 와 같은 기준
const todayKst = () => new Date(Date.now() + 9 * 3600 * 1000).toISOString().slice(0, 10);
const load = () => {
API.dailyCoordi().then((d) => {
if (!alive) return;
setDaily(d);
// 하루 첫 접속엔 서버가 '어제 코디'를 먼저 주고 오늘 것은 백그라운드로 생성한다.
// 아직 오늘 날짜가 아니면 30초 간격으로 재조회(최대 10회)해 준비되는 즉시 교체한다.
if (tries < 10 && (!d || (d.lookDate && d.lookDate !== todayKst()))) {
tries += 1;
timer = setTimeout(load, 30000);
}
}).catch(() => {});
};
load();
return () => { alive = false; if (timer) clearTimeout(timer); };
}, [auth && auth.loggedIn, auth && auth.name]);
// 지금 보고 있는 코디가 '오늘 것'인지 (아니면 지난 코디를 임시로 보여주는 중)
const dailyIsToday = !!daily && (!daily.lookDate
|| daily.lookDate === new Date(Date.now() + 9 * 3600 * 1000).toISOString().slice(0, 10));
// 지금 인기 — 성별로 먼저 거른 뒤, 자체/입점(marketplace) 상품을 먼저 보여주고, 그 안에서 인기 표시 우선,
// 그다음 도매매 위탁(consignment) 상품으로 32개까지 채웁니다. (자체/입점 우선 노출)
const byPopular = (arr) => [...arr.filter((p) => p.popular), ...arr.filter((p) => !p.popular)];
const genderFiltered = filterGenderList(DENKY.products, gender);
const sellerFirst = genderFiltered.filter((p) => p.saleType === "marketplace");
const consignmentRest = genderFiltered.filter((p) => p.saleType !== "marketplace");
const popular = [...byPopular(sellerFirst), ...byPopular(consignmentRest)].slice(0, 32);
return (
{/* HERO — 회전 링 캐러셀 (기존 VIRTUAL FITTING 문구 + 모델A/B 비교 슬라이더 대체) */}
{/* 오늘의 풀코디 — 아바타 착장 이미지(왼쪽) + 무드·이유·팁·착장 아이템(오른쪽). 자격 있을 때만. */}
{daily && (
{/* 상단 — 아바타 풀코디 이미지(무드 뱃지 + 이유 오버레이) + 그 아래 코디 팁 (창 중앙 정렬) */}
{/* 코디 팁 — 아바타 이미지 바로 아래 (중앙) */}
{daily.tips.length > 0 && (
💡 {daily.tips.join(" · ")}
)}
{/* 하단 — 착장 아이템: 창 중앙에 모아 배치(고정폭 카드 + 가운데 정렬) */}
착장 아이템
{daily.items.map((p) => (
))}
{/* 이 무드의 후보 — 오늘 코디를 짤 때 후보로 검토된 상품(상의15+하의15). 구 캐시엔 없어 빈 배열이면 숨김 */}
{daily.candidates && daily.candidates.length > 0 && (
<>
이 무드의 후보 상품{daily.concept ? ` · ${daily.concept}` : ""}
{daily.candidates.map((p) => (
))}
)}
)}
{/* 카테고리 — 가로 스크롤 (세분화) + 성별 탭 */}
{/* 지금 인기 */}
지금 인기
go("catalog")}>전체 보기
{/* 검색/카탈로그와 동일하게 항상 5열(창 크기 반응). '3열' 설정 시에만 3열 */}
{popular.slice(0, 32).map((p) => (
))}
{/* 가상피팅 이렇게 써요 */}
HOW IT WORKS
가상피팅, 이렇게 써요
{[
{ n: "01", ic: "camera", t: "앞모습 사진 등록", d: "정면을 보고 찍은 사진 한 장이면 충분해요. 마이페이지에서 언제든 바꿀 수 있어요." },
{ n: "02", ic: "sparkle", t: "옷을 골라 합성", d: "마음에 드는 옷의 '입어보기'를 누르면 내 사진 위에 자연스럽게 합성돼요." },
{ n: "03", ic: "layers", t: "겹쳐 입고 비교", d: "위에 다른 옷을 더 입혀 코디를 완성하고, 마음에 들면 바로 구매로 이어가요." },
].map((s) => (
))}
);
}
// 세부칩 — 예전 큐레이션 칩(반팔/긴팔/민소매·나시/크롭/프린팅 …). on=선택됨.
function SubChip({ label, on, onClick }) {
return (
);
}
function CatalogScreen({ go, openProduct, tryProduct, t, initial, navId, cacheRef, scrollRef, query, setQuery, onSearch }) {
const PAGE = 24; // 한 번에 불러올 상품 수 ('더 보기'로 이어서 로드)
// 뒤로가기 복원용 캐시 — 이 navId 로 전에 저장해둔 스냅샷이 있으면(=뒤로가기로 돌아옴) 재검색을 건너뛴다.
// (앞으로 새로 이동한 경우엔 navId 가 매번 새로 발급되니 캐시가 없어 정상적으로 새로 검색한다)
const cached = cacheRef && navId != null ? cacheRef.current[navId] : null;
const [selected, setSelected] = useState(() => (cached ? cached.selected : {})); // 라벨 체크박스 선택 {항목:[값]}
const [filterOpen, setFilterOpen] = useState(false); // 필터 팝업 열림 여부
// 정렬 — 스마트앱과 동일한 서버 정렬 키('추천'=개인화 재랭킹). 칩 UI 로 고른다.
const SORT_OPTIONS = [["추천", "추천"], ["인기", "popular"], ["최신", "newest"], ["낮은가격", "price_low"], ["높은가격", "price_high"], ["평점", "rating"]];
const [sort, setSort] = useState(() => (cached ? cached.sort : "추천"));
const sortRef = useRef(cached ? cached.sort : "추천"); // fetchPage 클로저에서 최신 정렬을 읽기 위한 ref
const [railLabel, setRailLabel] = useState(() => (cached ? cached.railLabel : null)); // 선택된 종류 — 스마트앱 레일과 동일
const [sub, setSub] = useState(() => (cached ? cached.sub : null)); // 선택된 세부칩(null=전체). 서버 키워드로 필터.
const subRef = useRef(cached ? cached.sub : null); // fetchPage 클로저에서 최신 세부칩을 읽기 위한 ref
const [results, setResults] = useState(() => (cached ? cached.results : DENKY.products));
const [total, setTotal] = useState(() => (cached ? cached.total : 0)); // 조건에 맞는 전체 개수
const [loading, setLoading] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
const [noMore, setNoMore] = useState(false); // 더보기로 새로 붙는 게 없으면 '더 보기' 감춤
const [searchMore, setSearchMore] = useState(() => (cached ? !!cached.searchMore : false)); // 의미검색 모드에서 다음 페이지가 더 있는지
const modeRef = useRef(cached ? cached.mode : { kind: "all" }); // 현재 목록 종류('더 보기'가 같은 종류를 이어 로드)
// 서버가 지금까지 내려준 개수(= 다음 요청의 offset). 중복 제거로 목록이 줄어도 페이지가 밀리지 않게 따로 셉니다.
const offsetRef = useRef(cached ? (cached.offset != null ? cached.offset : cached.results.length) : 0);
// 현재 모드 + offset 으로 한 페이지를 불러옵니다. (의미검색도 offset 페이지네이션을 씁니다)
async function fetchPage(mode, offset) {
// 성별(홈 토글=denky-gender, 없으면 여성)을 검색/카테고리/전체 모든 목록에 동일 적용한다.
// (예전엔 검색만 성별을 넘겨, 가디건 등 카테고리 클릭 시 반대 성별이 섞였음)
const g = (typeof localStorage !== "undefined" && localStorage.getItem("denky-gender")) || "여성";
if (mode.kind === "search") {
// 의미검색도 offset 으로 이어받는다 — 같은 (검색어·회원·날짜)면 순서가 재현돼 안전하다.
const r = await API.searchPaged(mode.q, { k: PAGE, offset, gender: g }); // 성별(회원 디폴트) 반영
return { items: r.items, total: r.total, hasMore: r.hasMore };
}
// 정렬은 서버에 맡긴다(스마트앱과 동일) — '추천'이면 로그인 회원의 체형·취향으로 재랭킹.
const so = sortRef.current;
// 세부칩(subRef)은 라벨 매핑이 있으면 라벨 필터로, 없으면 서버 키워드로 전달 — 전량 대상
// 페이지네이션(예전 '민소매 9개' 버그 해소, '체크 셔츠'는 키워드가 15/68만 잡아 라벨로 전환).
if (mode.kind === "label") {
const lm = subRef.current ? LABEL_SUBCHIPS[subRef.current] : null;
const filters = lm ? { ...mode.filters, ...lm } : mode.filters;
return API.filterPaged(filters, { limit: PAGE, offset, gender: g, sort: so, keyword: lm ? undefined : (subRef.current || undefined) });
}
if (mode.kind === "category") return API.productsPaged({ category: mode.type, limit: PAGE, offset, gender: g, sort: so });
return API.productsPaged({ limit: PAGE, offset, gender: g, sort: so }); // all
}
// 첫 페이지(새 검색/필터) — 결과를 교체합니다.
async function loadFirst(mode) {
modeRef.current = mode;
setLoading(true);
setNoMore(false); // 새 목록이니 '더 보기' 다시 활성화
try {
const r = await fetchPage(mode, 0);
setResults(r.items);
// 검색은 서버 total 이 '이번 페이지 개수'일 수 있어, 지금까지 받은 개수와 큰 쪽을 표시용으로 씁니다.
setTotal(mode.kind === "search" ? Math.max(Number(r.total) || 0, r.items.length) : r.total);
setSearchMore(r.hasMore === true);
offsetRef.current = r.items.length;
}
catch (e) { setResults([]); setTotal(0); setSearchMore(false); offsetRef.current = 0; }
setLoading(false);
}
// 더 보기 — 다음 페이지를 이어서 붙입니다.
// ★중복 방어★ 이미 담긴 상품 id 는 제외하고 붙인다(혹시 서버가 겹치는 페이지를 줘도 '수만 증가' 안 되게).
async function loadMore() {
setLoadingMore(true);
try {
// ★간헐 서버 오류에 더보기가 멈추지 않게 1회 재시도★ — 추천(개인화 재랭킹) 응답이 무거워
// 가끔 500(idle-in-tx 등)이 나는데, 예전엔 조용히 삼켜(catch{}) '더보기가 안 넘어가는' 것처럼 보였다.
let r;
try { r = await fetchPage(modeRef.current, offsetRef.current); }
catch (e1) {
await new Promise((res) => setTimeout(res, 600));
r = await fetchPage(modeRef.current, offsetRef.current); // 재시도(실패 시 아래 catch 로)
}
const page = r.items || [];
const seen = new Set(results.map((p) => p.id));
const fresh = page.filter((p) => !seen.has(p.id));
if (!fresh.length) setNoMore(true); // 새 상품이 하나도 없으면 끝으로 간주
const merged = [...results, ...fresh];
setResults(merged);
offsetRef.current += page.length; // 다음 offset — 중복으로 버린 것도 서버는 이미 준 것이라 함께 셈
// 검색은 서버 total 이 '이번 페이지 개수'일 수 있어, 누적 개수와 큰 쪽을 표시용으로 씁니다.
setTotal(modeRef.current.kind === "search" ? Math.max(Number(r.total) || 0, merged.length) : r.total);
setSearchMore(r.hasMore === true);
} catch (e) {
// 재시도까지 실패: 이번 클릭만 무시하고 '더보기' 버튼은 유지(noMore 를 켜지 않음) → 다시 누르면 재시도.
}
setLoadingMore(false);
}
// 기존 호출부 호환용 얇은 래퍼
const runServerSearch = (q) => loadFirst({ kind: "search", q });
const loadCategory = (type) => loadFirst({ kind: "category", type });
const runLabelSearch = (filters) => loadFirst({ kind: "label", filters });
// 진입/검색어 변화에 따라 결과를 불러옵니다.
// (뒤로가기로 돌아와 캐시가 있으면 — 위에서 이미 state 를 복원했으니 재검색하지 않는다)
useEffect(() => {
if (cached) return;
// 홈 카테고리 카드('종류' 단일 라벨)로 들어오면 레일 선택 상태로 표시(스마트앱과 동일)
const rl = initial?.labelFilter?.["종류"]?.length === 1 ? initial.labelFilter["종류"][0] : null;
setRailLabel(rl);
setSub(null); subRef.current = null;
if (initial?.labelFilter) { setSelected(initial.labelFilter); runLabelSearch(initial.labelFilter); } // 카테고리 칩(라벨)으로 진입
else if (initial?.q) runServerSearch(initial.q);
else if (initial?.type) loadCategory(initial.type); // (구) DB category 로드
else if (query && query.trim()) runServerSearch(query.trim()); // '다른 옷 고르기'로 돌아오면 이전 검색을 다시 보여줍니다.
else loadFirst({ kind: "all" }); // 기본: 전체 상품을 페이지네이션으로
}, [initial]);
// 화면 상태가 바뀔 때마다 캐시에 계속 갱신 — 나중에 뒤로가기로 돌아오면 이 스냅샷을 그대로 복원.
useEffect(() => {
if (!cacheRef || navId == null) return;
cacheRef.current[navId] = {
...(cacheRef.current[navId] || {}),
results, total, selected, sort, railLabel, sub, mode: modeRef.current,
offset: offsetRef.current, searchMore, // 뒤로가기로 돌아와도 '더 보기'를 이어서 누를 수 있게
};
// ★캐시 상한★ — navId 마다 결과 배열 스냅샷을 통째로 들고 있어, 탐색을 많이 할수록
// JS 힙에 상품 배열이 계속 쌓였다. 현재 화면을 뺀 오래된 스냅샷부터 밀어낸다(최근 8개 유지).
const keys = Object.keys(cacheRef.current);
for (let i = 0; keys.length - i > 8; i++) {
if (String(keys[i]) !== String(navId)) delete cacheRef.current[keys[i]];
}
}, [results, total, selected, sort, railLabel, sub, searchMore]);
// 스크롤 위치도 계속 캐시에 기록 — 뒤로가기로 돌아왔을 때 그 자리로 복원하기 위함(스마트앱과 동일 UX).
useEffect(() => {
const el = scrollRef && scrollRef.current;
if (!el || !cacheRef || navId == null) return;
let raf = null;
const onScroll = () => {
if (raf) return;
raf = requestAnimationFrame(() => {
raf = null;
cacheRef.current[navId] = { ...(cacheRef.current[navId] || {}), scrollY: el.scrollTop };
});
};
el.addEventListener("scroll", onScroll, { passive: true });
return () => { el.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); };
}, []);
// 캐시로 복원된 화면이면 마운트 직후(레이아웃 확정 후) 저장해둔 스크롤 위치로 되돌린다.
React.useLayoutEffect(() => {
if (cached && scrollRef && scrollRef.current) {
scrollRef.current.scrollTo({ top: cached.scrollY || 0 });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// 카탈로그 안에서 카테고리 카드로 종류 전환 (화면 이동 없이 목록만 교체 — 스마트앱 _pickRail)
function pickRail(c) {
setRailLabel(c.label);
setSub(null); subRef.current = null;
const filters = { "종류": [c.label] };
setSelected(filters);
if (setQuery) setQuery(""); // 이전 검색어 잔상 제거
runLabelSearch(filters);
}
// 세부칩 선택 → 같은 종류를 세부칩 키워드로 서버 재조회(페이지 0). 같은 칩 재클릭은 해제(전체).
function pickSub(s) {
const next = (sub === s) ? null : s;
setSub(next); subRef.current = next;
loadFirst(modeRef.current); // 현재 종류(mode.filters) 유지, 키워드만 바꿔 다시 로드
}
// 정렬 칩 선택 — 서버 정렬로 다시 불러온다. (의미검색 결과는 클라이언트 정렬로만)
function pickSort(key) {
if (sort === key) return;
setSort(key);
sortRef.current = key;
if (modeRef.current.kind !== "search") loadFirst(modeRef.current);
}
const toggle = (g, v) => setSelected((s) => {
const cur = s[g] || [];
const next = cur.includes(v) ? cur.filter((x) => x !== v) : [...cur, v];
const out = { ...s, [g]: next };
if (!next.length) delete out[g];
return out;
});
const clearAll = () => setSelected({});
const activeChips = Object.entries(selected).flatMap(([g, vs]) => vs.map((v) => ({ g, v })));
// 체크한 항목들을 '라벨 필터'로 정확히 거릅니다. (성별/종류/색상/... = labels)
function searchSelected() {
const hasAny = Object.values(selected).some((v) => v && v.length);
if (!hasAny) { onSearch(""); return; } // 아무것도 안 고르면 전체로
runLabelSearch(selected);
}
// 홈에서 고른 성별(localStorage 유지)로 카탈로그 결과도 거릅니다. (남성 선택 시 여성 상품 숨김)
// 홈 '지금 인기'와 동일 규칙: 해당 성별 + 공용 상품을 남깁니다. (성별 라벨 없으면 여성 취급)
const gender = (typeof localStorage !== "undefined" && localStorage.getItem("denky-gender")) || "여성";
let view = filterGenderList([...results], gender);
// 의미검색 결과만 클라이언트 정렬(서버 정렬 미지원). 나머지 모드는 서버가 이미 정렬해서 내려줌.
if (modeRef.current.kind === "search") {
if (sort === "price_low") view.sort((a, b) => a.price - b.price);
if (sort === "price_high") view.sort((a, b) => b.price - a.price);
if (sort === "rating") view.sort((a, b) => Number(b.rating) - Number(a.rating));
}
// (세부필터는 이제 서버가 처리 — 클라이언트 정제 제거. facet 칩 선택이 modeRef.filters 에 반영됨)
// 더 보기 가능 여부 + 표시용 전체 개수
// total 은 서버가 (종류+facet+성별)로 거른 실제 전체 개수 — 세부칩을 눌러도 정확하다(예: 민소매 394).
// 의미검색은 전체 개수를 모를 수 있어 '다음 페이지 있음(searchMore)' 신호로 판단한다.
const hasMore = !noMore && (modeRef.current.kind === "search" ? searchMore : results.length < total);
const totalCount = total || view.length;
// 의미검색은 '전체 몇 개'를 서버가 알려주지 않을 수 있다 — 그럴 땐 '전체 N개' 대신 '지금 N개 표시 중'으로 적는다.
const knownTotal = modeRef.current.kind !== "search" || total > view.length;
// 좁은 화면(모바일)에서는 상품 그리드 열 수와 팝업 컬럼 수를 줄입니다.
const [isMobile, setIsMobile] = useState(() => typeof window !== "undefined" && window.innerWidth <= 720);
useEffect(() => {
const onR = () => setIsMobile(window.innerWidth <= 720);
window.addEventListener("resize", onR);
return () => window.removeEventListener("resize", onR);
}, []);
return (
{/* 카테고리 카드 레일 — 스마트앱과 동일하게 카탈로그 상단에서 종류 전환 (선택 = 테두리 강조) */}
{/* 세부칩 — 맨 앞 '전체' + 예전 큐레이션 칩(반팔/긴팔/민소매·나시/크롭/프린팅 …). 누르면 서버 키워드 필터로 전량. */}
{railLabel && SUBCATS[railLabel] && (
) : (
<>
{/* 카탈로그는 항상 5열(창 크기에 맞춰 카드 스케일). '3열' 설정 시에만 3열 유지 */}
{view.map((p) => (
))}
{hasMore && (
{/* 전체 개수를 아는 목록만 (n / 전체)로 표시 — 의미검색은 전체를 모를 수 있어 '더 보기'만 */}
{loadingMore ? "불러오는 중…" : (total > view.length ? `더 보기 (${view.length} / ${total})` : "더 보기")}