From f924de527140b822aacff2df6b90afdebedf1d49 Mon Sep 17 00:00:00 2001 From: 10tentacion Date: Wed, 29 Jul 2026 01:10:36 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=B2=AB=20=EB=89=B4=EC=8A=A4=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=20=EC=84=A0=ED=83=9D=EC=9D=B4=20mock=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=EC=9D=98=20id=EB=A1=9C=20=EA=B3=A0?= =?UTF-8?q?=EC=A0=95=EB=90=98=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit app.tsx의 진입 시 자동 선택 로직이 apis/news/mock.ts의 getNews()를 직접 호출해 실 배포 환경에서도 항상 목데이터의 첫 항목 id(10001)로 impact를 요청하고 있었음. useNewsQuery()가 실제로 받아온 뉴스 목록의 첫 항목으로 선택하도록 수정 — 프로덕션에서는 실 백엔드가 내려주는 진짜 첫 뉴스를 따라가고, NewsPanel과 같은 쿼리 키를 써서 중복 요청도 없다. Co-Authored-By: Claude Sonnet 5 --- src/routes/app.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/routes/app.tsx b/src/routes/app.tsx index 6f46247..a43ad6a 100644 --- a/src/routes/app.tsx +++ b/src/routes/app.tsx @@ -3,7 +3,7 @@ import { createFileRoute } from '@tanstack/react-router' import { useAtom, useAtomValue } from 'jotai' import { motion } from 'motion/react' import { selectedNewsIdAtom, viewAtom } from '#/shared/store/atoms' -import { getNews } from '#/apis/news/mock' +import { useNewsQuery } from '#/apis/news/queries' import Header from '#/shared/components/Header' import ScrapSheet from '#/components/scrap/ScrapSheet' import NewsPanel from '#/components/news/NewsPanel' @@ -18,12 +18,17 @@ export const Route = createFileRoute('/app')({ component: KoslinkApp }) function KoslinkApp() { const view = useAtomValue(viewAtom) const [selectedNewsId, setSelectedNewsId] = useAtom(selectedNewsIdAtom) + // NewsPanel도 같은 쿼리 키(['news'])를 쓰므로 캐시를 공유해 중복 요청되지 않는다. + const { data: newsPages } = useNewsQuery() + const firstNewsId = newsPages?.pages[0]?.items[0]?.id - // 처음 진입하면 최신 뉴스를 바로 시각화한다 (docs/koslink.html의 select(NEWS[0])와 동일) + // 처음 진입하면 실제로 받아온 뉴스 목록의 첫 건을 바로 시각화한다(docs/koslink.html의 + // select(NEWS[0])와 동일) — mock 함수를 직접 부르면 실 배포에서도 목데이터의 첫 id로 + // 고정돼버리므로 반드시 이 쿼리 결과를 써야 한다. useEffect(() => { - if (selectedNewsId) return - setSelectedNewsId(getNews().news[0].newsId) - }, [selectedNewsId, setSelectedNewsId]) + if (selectedNewsId || !firstNewsId) return + setSelectedNewsId(firstNewsId) + }, [selectedNewsId, firstNewsId, setSelectedNewsId]) return (