{
// 손으로 넘겼을 때 숫자 칩 동기화 — 스크롤이 멈춘 뒤의 위치로만 갱신
const el = e.currentTarget;
if (scrollEndRef.current) clearTimeout(scrollEndRef.current);
scrollEndRef.current = setTimeout(() => {
const i = Math.round(el.scrollLeft / el.clientWidth);
if (i >= 0 && i < count) setIdx(i);
}, 150);
}}
style={{ display: "flex", overflowX: "auto", scrollSnapType: "x mandatory",
borderRadius: 16, scrollbarWidth: "none" }}>
{pages}
{/* 좌우 화살표 — 끝 장에서는 해당 방향 숨김 */}
{cur > 0 && (
)}
{cur < count - 1 && (
)}
{/* 퀸잇 방식(실물 조사) — '1 | 5 >' 숫자 칩, 클릭하면 다음 장 */}
);
}
/* =========================================================
회전 링 캐러셀 (히어로) — 모델 중심으로 17개 카테고리 카드가 도는 UI
퀸잇 광고 스타일: 앞쪽 ~6장만 보이고, 뒤로 가면 사라졌다 '카테고리 순서대로' 재등장.
드래그/휠로 직접 회전. 카드 클릭 → 그 종류 카탈로그.
⏸ Phase2(미구현): 카드가 정면(θ≈0) 통과 시 '그 옷을 입은 모델 이미지'로 교체
— 지금은 front 플래그(정면 감지)만 만들어 두고 강조만 함. 착용 이미지 준비되면 여기 끼우면 됨.
========================================================= */
// interactive=false 면 드래그/휠 회전을 끈다(자동회전만) — 배너 안에서 가로 스크롤과 겹치지 않게.
// hint=false 면 하단 '드래그·휠' 안내 배지를 숨긴다(배너 쪽에서 따로 안내).
// cardsTappable=false 면 카드 클릭(→카테고리)을 끈다 — 배너 전체 클릭(→피팅룸)에 양보(2026-08-14 지시).
// cardW — 카드 폭(px). 배너처럼 작은 무대에서는 줄여서 카드가 모델을 압도하지 않게.
function FittingCarousel({ go, interactive = true, hint = true, cardsTappable = true, cardW = 108 }) {
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); } : undefined}
onMouseLeave={interactive ? () => { pausedRef.current = false; draggingRef.current = false; setHover(false); } : undefined}
onTouchStart={interactive ? onDown : undefined} onTouchMove={interactive ? onMove : undefined} onTouchEnd={interactive ? onUp : undefined}
onWheel={interactive ? onWheel : undefined}
>
{/* 착용샷 미리 로드(스왑 즉시 반영) — 화면엔 안 보임 */}
{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) 배지로 두어 겹침이 원천적으로 없고,
사용자가 한 번 돌려보면(드래그/휠) 자연스럽게 사라져 시선을 정리한다. */}
{hint && (
{/* 좌우 드래그 아이콘 */}
드래그·
{/* 마우스 휠 아이콘 */}
휠로 돌려보세요|카드를 누르면 그 종류로 이동
)}
);
}
/* =========================================================
홈
========================================================= */
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) {} };
// 오늘의 풀코디 — 배너 무드 장에 쓴다(섹션은 전용 화면으로 이사 — 2026-08-14).
const { daily, sample: dailySample, isToday: dailyIsToday } = useDailyCoordi(auth);
// 지금 인기 — 서버가 도매매 순위순(카탈로그 인기 화면과 같은 기준)으로 준다.
// 성별 필터만 하고 순서는 그대로 둔다(재정렬하면 순위가 뒤섞인다). 32개까지.
const genderFiltered = filterGenderList(DENKY.products, gender);
const popular = genderFiltered.slice(0, 32);
return (
{/* 배너 슬라이더 — 홈 최상단(2026-08-14 사장님 지시: 퀸잇 방식으로 개편).
첫 장 = 피팅룸 히어로(회전 링), 오늘의 무드가 오면 무드 장이 끼어든다 */}
{/* 카테고리 — 배너 바로 아래로 이동(2026-08-14 사장님 지시) */}
{/* (히어로 회전 링 캐러셀은 배너 첫 장으로, 오늘의 풀코디 섹션은 배너 무드 장 + 전용 화면으로 이사 — 2026-08-14) */}
{/* 지금 인기 */}
지금 인기
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) => (
{s.n}
{s.t}
{s.d}
))}
);
}
/* =========================================================
오늘의 무드 전용 화면 — 홈 배너의 무드 장을 클릭하면 진입 (2026-08-14)
홈에 있던 섹션(무드 카드 + 착장 아이템 + 이 무드의 후보 상품)을 통째로 이사해 왔다.
========================================================= */
function DailyMoodScreen({ go, openProduct, tryProduct, t, auth }) {
const { daily, sample: dailySample, isToday: dailyIsToday } = useDailyCoordi(auth);
return (
{/* 상단 — 뒤로 + 제목 */}
go("home")}>홈으로
오늘의 무드
{!daily ? (
오늘의 무드를 불러오는 중…
) : (
<>
{/* 상단 — 아바타 풀코디 이미지(무드 뱃지 + 이유 오버레이) + 그 아래 코디 팁 (창 중앙 정렬) */}
);
// 피팅 방식 선택 — 사진이 있으면 바로 셀카 피팅, 없으면 모델/사진 선택을 확인창으로
function setBusyOrFitSheet() {
if (!(picked["상의"] && picked["하의"])) { toast("상의와 하의를 하나씩 골라 주세요"); return; }
if (selfie) { runFit("selfie"); return; }
// 사진이 없으면: 모델로 볼지, 사진을 올릴지 고른다
if (window.confirm("내 사진 없이 체형 모델로 입어볼까요?\n[확인] 모델로 보기 · [취소] 내 사진 올리기")) {
runFit("model");
} else {
fileRef.current && fileRef.current.click();
}
}
}
/* =========================================================
카탈로그 / 검색
========================================================= */
function FilterGroups({ selected, toggle, layout }) {
const groups = DENKY.labelFilters; // 백엔드 labels 와 1:1 매칭되는 택소노미
const [open, setOpen] = useState(() => Object.keys(groups).reduce((a, k) => (a[k] = true, a), {}));
return (
<>
{Object.entries(groups).map(([group, items]) => (
))}
);
}
// 세부칩 — 예전 큐레이션 칩(반팔/긴팔/민소매·나시/크롭/프린팅 …). 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})` : "더 보기")}