Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions src/routes/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 (
<motion.div
Expand Down