Feat/170 news api

[shinwokkang]

📌 개요 (Summary)

• 변경 사항에 대한 간략한 요약을 적어주세요.
• 관련 이슈가 있다면 링크를 걸어주세요 (예: [fix] cicd / build 문제 #123).

🛠️ 변경 사항 (Changes)

• 새로운 기능 추가
• 버그 수정
• 코드 리팩토링
• 문서 업데이트
• 기타 (설명: )

📸 스크린샷 (Screenshots)

(UI 변경 사항이 있다면 첨부해주세요)

✅ 체크리스트 (Checklist)

• 빌드가 성공적으로 수행되었나요? (pnpm build)
• 린트 에러가 없나요? (pnpm lint)
• 불필요한 콘솔 로그나 주석을 제거했나요?

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
check-mo	Ready	Preview, Comment	Mar 5, 2026 11:36am
checkmo	Ready	Preview, Comment	Mar 5, 2026 11:36am

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f49408af-f5d7-45c1-b418-0525c867a3ee

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/170-news-api

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 뉴스 API를 통합하여 뉴스 관련 페이지(뉴스 목록, 뉴스 배너)에 동적인 콘텐츠를 제공하고, 사용자 경험을 개선하는 데 중점을 둡니다. 특히 뉴스 페이지에는 무한 스크롤이 적용되었으며, 북스토리 카드와 검색 모달의 UI/UX가 향상되었습니다. 또한, 책 좋아요 기능의 낙관적 업데이트 로직을 정교화하여 데이터 일관성을 높였습니다.

Highlights

• 뉴스 API 통합 및 무한 스크롤 구현: 뉴스 페이지에 useInfiniteNewsQuery와 react-intersection-observer를 활용하여 무한 스크롤 기능을 추가하고, 더미 데이터를 실제 API 데이터로 교체했습니다. 뉴스 배너 슬라이더 또한 동적 뉴스 데이터를 표시하도록 업데이트되었습니다.
• 검색 모달 상태 관리 개선: 검색 모달의 상태 관리를 위한 새로운 Zustand 스토어(useSearchStore)를 생성하고, 헤더 및 플로팅 액션 버튼(FAB)에서 이를 사용하여 검색 모달의 열림/닫힘 상태를 중앙 집중식으로 관리하도록 변경했습니다. 검색 모달이 열려 있을 때 FAB가 자동으로 숨겨집니다.
• 책 좋아요 낙관적 업데이트 로직 개선: 책 좋아요 뮤테이션의 낙관적 업데이트 로직을 개선하여, '내 서재'에서 좋아요를 누르거나 취소할 때 해당 책이 캐시에 올바르게 추가되거나 제거되도록 데이터 일관성을 높였습니다.
• UI/UX 개선: 북스토리 카드 프로필 클릭 영역을 확장하고 구독 버튼에 호버/활성 시각적 효과를 추가했습니다. 또한, 알라딘 랭킹 링크를 새 탭에서 열리도록 변경하고 시각적 상호작용 효과를 더했습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• src/app/(main)/news/page.tsx
  • useInfiniteNewsQuery 및 useInView 훅을 사용하여 뉴스 목록에 무한 스크롤을 구현했습니다.
  • 더미 뉴스 데이터를 제거하고 실제 API 데이터를 사용하도록 변경했습니다.
  • 추천 도서 목록에 likedByMe 속성을 추가했습니다.
  • 이미지 소스 유효성 검사 함수 isValidSrc를 추가했습니다.
  • 전체 페이지 컨테이너에 pb-20 패딩을 추가했습니다.
  • 뉴스 목록 섹션에 로딩 스피너와 데이터 없음 메시지를 추가했습니다.
  • 뉴스 목록 아이템에 newsId, thumbnailUrl, description, publishStartAt 필드를 사용하도록 업데이트했습니다.
• src/components/base-ui/BookStory/bookstory_card.tsx
  • 프로필 클릭 영역을 확장하고 호버 시 배경색 변경 효과를 추가했습니다.
  • 구독 버튼에 transition-all, hover:brightness-90, active:scale-95 효과를 추가했습니다.
• src/components/base-ui/BookStory/bookstory_card_large.tsx
  • 프로필 클릭 영역을 확장하고 호버 시 배경색 변경 효과를 추가했습니다.
  • 구독 버튼에 transition-all, hover:brightness-90, active:scale-95 효과를 추가했습니다.
• src/components/base-ui/Float.tsx
  • useSearchStore를 임포트하고 isSearchOpen 상태에 따라 컴포넌트 렌더링 여부를 결정하도록 수정했습니다.
• src/components/base-ui/News/news_list.tsx
  • 날짜 표시 영역의 최소 너비를 min-w-[85px]로 조정하고 whitespace-nowrap 스타일을 추가했습니다.
• src/components/base-ui/News/today_recommended_books.tsx
  • useRouter 훅을 임포트했습니다.
  • BookCoverCard에 onCardClick prop을 추가하여 책 상세 페이지로 이동하도록 했습니다.
• src/components/base-ui/home/NewsBannerSlider.tsx
  • 더미 배너 데이터를 제거하고 useInfiniteNewsQuery를 사용하여 뉴스 API에서 데이터를 가져오도록 변경했습니다.
  • 로딩 및 에러/데이터 없음 상태를 처리하는 UI를 추가했습니다.
  • 배너 클릭 시 해당 뉴스 상세 페이지로 이동하도록 router.push를 적용했습니다.
  • 배너 이미지에 transition-transform 및 group-hover:scale-105 효과를 추가했습니다.
  • 배너에 텍스트 오버레이를 추가하여 뉴스 제목과 설명을 표시했습니다.
  • 인디케이터가 최대 5개의 뉴스만 표시하도록 slice(0, 5)를 적용했습니다.
• src/components/layout/Header.tsx
  • useSearchStore를 임포트하고 검색 모달 상태 관리를 useState에서 useSearchStore로 전환했습니다.
  • 검색 버튼 클릭 핸들러를 toggleSearch로 변경했습니다.
  • SearchModal의 onClose prop을 closeSearch로 변경했습니다.
• src/components/layout/SearchModal.tsx
  • EXTERNAL_LINKS를 임포트했습니다.
  • 알라딘 랭킹 링크를 EXTERNAL_LINKS.ALADIN_BESTSELLER_URL로 업데이트하고 target="_blank", rel="noopener noreferrer" 속성을 추가했습니다.
  • 링크에 다양한 호버 및 활성 시각적 효과를 추가했습니다.
• src/constants/links.ts
  • ALADIN_BESTSELLER_URL 상수를 추가했습니다.
• src/hooks/mutations/useBookMutations.ts
  • 책 좋아요 뮤테이션의 낙관적 업데이트 로직을 개선했습니다.
  • isMyLibrary 여부와 좋아요 상태 변경에 따라 '내 서재' 캐시에 책을 추가하거나 제거하는 로직을 추가했습니다.
  • fullBookToInject 로직을 추가하여 다른 캐시에서 전체 책 정보를 가져와 주입할 수 있도록 했습니다.
• src/services/newsService.ts
  • getNewsList 함수의 cursorId 유효성 검사를 cursorId !== undefined && cursorId !== null로 변경하여 0과 같은 유효한 falsy 값을 처리할 수 있도록 했습니다.
• src/store/useSearchStore.ts
  • 검색 모달의 열림/닫힘 상태를 관리하는 Zustand 스토어를 새로 생성했습니다.
  • isSearchOpen, openSearch, closeSearch, toggleSearch 액션을 정의했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 PR은 뉴스 API 통합, 뉴스 무한 스크롤 구현, 그리고 검색 상태 관리를 위한 Zustand 스토어 도입을 포함합니다. 전반적으로 애플리케이션의 기능과 사용자 경험을 향상시키는 긍정적인 변경 사항입니다. 또한, 북스토리 카드 및 검색 모달에 대한 UI/UX 개선도 포함되어 있습니다.