feat(m/orders/new): 30초 폴링 + 탭 포커스 복귀 시 자동 재조회

- 관리자가 품목을 숨김/노출/재고 변경해도 다른 사용자가 로그아웃/새로고침 없이 자동 반영
- silent 모드 추가해 백그라운드 재조회 시 '불러오는 중' 깜빡임 제거
- visibilitychange + focus 이벤트로 탭 복귀 즉시 최신화

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chpark
2026-05-31 22:11:07 +09:00
parent 83ac3a5456
commit c69e811f46
+26 -3
View File
@@ -107,8 +107,10 @@ function ItemsBrowse() {
}).catch(() => {});
}, []);
const fetchItems = useCallback(async () => {
setLoading(true);
// silent=true 면 로딩 인디케이터를 건드리지 않음 (백그라운드 폴링/탭 복귀 재조회용)
const fetchItems = useCallback(async (silent = false) => {
if (!silent) setLoading(true);
try {
const res = await fetch("/api/m/items/list", {
method: "POST",
headers: { "Content-Type": "application/json" },
@@ -121,7 +123,9 @@ function ItemsBrowse() {
});
const j = await res.json();
setItems(j.RESULTLIST ?? []);
setLoading(false);
} finally {
if (!silent) setLoading(false);
}
}, [keyword, endFrom, endTo]);
// 검색조건 변경 시 즉시 자동 조회 (디바운스 250ms)
@@ -130,6 +134,25 @@ function ItemsBrowse() {
return () => clearTimeout(t);
}, [fetchItems]);
// 30초마다 조용히 재조회 — 관리자가 품목을 숨김/노출 변경하거나 재고가 변경되면
// 로그아웃/새로고침 없이도 다른 사용자 화면에 반영. 검색 인디케이터는 깜빡이지 않게 silent.
useEffect(() => {
const t = setInterval(() => { fetchItems(true); }, 30000);
return () => clearInterval(t);
}, [fetchItems]);
// 탭이 백그라운드에서 복귀(visibilitychange) 하거나 창에 다시 포커스 되면 즉시 재조회.
// 모바일 PWA 에서 잠깐 다른 앱 갔다 오면 30초 안 기다리고 바로 최신 목록 보이게.
useEffect(() => {
const onVis = () => { if (document.visibilityState === "visible") fetchItems(true); };
document.addEventListener("visibilitychange", onVis);
window.addEventListener("focus", onVis);
return () => {
document.removeEventListener("visibilitychange", onVis);
window.removeEventListener("focus", onVis);
};
}, [fetchItems]);
// 카트에 택배전용 품목이 있는지
const cartNeedsDelivery = useMemo(
() => cart.some((c) => c.item.REQUIRES_DELIVERY === "Y"),