Refactor/192 home refactor

[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 12, 2026 8:03am
checkmo	Ready	Preview, Comment	Mar 12, 2026 8:03am

[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: 905f4f86-c433-4024-a72d-b275f9af7ad9

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 refactor/192-home-refactor

---

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!

이 Pull Request는 홈 페이지(src/app/(main)/page.tsx)의 대규모 코드 리팩토링을 목표로 합니다. 기존의 단일 파일에 집중되어 있던 복잡한 로직과 UI 렌더링을 기능별로 분리된 컴포넌트와 커스텀 훅으로 재구성하여 코드의 가독성, 유지보수성, 확장성을 크게 향상시켰습니다. 이를 통해 개발자들이 홈 페이지의 특정 기능을 더 쉽게 이해하고 수정할 수 있도록 하며, 향후 기능 추가 및 변경에 유연하게 대응할 수 있는 기반을 마련했습니다.

Highlights

• 홈 페이지 구조 개선: src/app/(main)/page.tsx 파일의 대규모 리팩토링을 통해 홈 페이지의 구조를 개선했습니다.
• 전용 섹션 컴포넌트 분리: 홈 페이지의 각 섹션(뉴스, 독서모임, 추천, 스토리)을 HomeNewsSection, HomeClubSection, HomeRecommendationSection, HomeStoryList와 같은 전용 컴포넌트로 분리했습니다.
• 사용자 상호작용 로직 중앙 집중화: 좋아요 및 팔로우 토글과 같은 사용자 상호작용 로직을 useHomeInteractions라는 새로운 커스텀 훅으로 중앙 집중화하여 코드 재사용성과 유지보수성을 높였습니다.
• 컴포넌트 디렉토리 재구성: 기존 홈 페이지 관련 컴포넌트들을 Club, News, Recommendation, Story, shared와 같은 의미론적 디렉토리 구조로 재배치하고 이름을 변경하여 모듈성을 강화했습니다.
• 스켈레톤 UI 추가: 홈 페이지 섹션별 로딩 상태를 시각적으로 보여주기 위한 스켈레톤 UI 컴포넌트들을 추가했습니다.

🧠 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)/page.tsx
  • 홈 페이지의 기존 로직과 UI 렌더링을 새로운 섹션 컴포넌트와 useHomeInteractions 훅으로 대체하여 코드를 간소화했습니다.
• src/app/(main)/stories/page.tsx
  • ListSubscribeLarge 컴포넌트의 임포트 경로를 업데이트했습니다.
• src/components/base-ui/home/Club/HomeClubSection.tsx
  • 독서모임 섹션의 UI와 로직을 캡슐화하는 새로운 컴포넌트를 추가했습니다.
• src/components/base-ui/home/News/HomeNewsSection.tsx
  • 뉴스 섹션의 UI와 로직을 캡슐화하는 새로운 컴포넌트를 추가했습니다.
• src/components/base-ui/home/NewsBannerSlider.tsx
  • 뉴스 배너 슬라이더 컴포넌트의 파일 경로를 변경하고 이름을 조정했습니다.
• src/components/base-ui/home/Recommendation/HomeRecommendationSection.tsx
  • 사용자 추천 섹션의 UI와 로직을 캡슐화하는 새로운 컴포넌트를 추가했으며, 모바일, 태블릿, 데스크톱 뷰를 처리합니다.
• src/components/base-ui/home/Story/HomeStoryList.tsx
  • 스토리 목록 렌더링 및 무한 스크롤 로직을 담당하는 새로운 컴포넌트를 추가했으며, 데스크톱 전용 추천 섹션을 통합합니다.
• src/components/base-ui/home/home_bookclub.tsx
  • 독서모임 컴포넌트의 파일 경로를 변경하고 이름을 조정했습니다.
• src/components/base-ui/home/list_subscribe.tsx
  • 구독 목록 컴포넌트의 파일 경로를 변경하고 이름을 조정했습니다.
• src/components/base-ui/home/list_subscribe_element.tsx
  • 구독 요소 컴포넌트의 파일 경로를 변경하고 이름을 조정했습니다.
• src/components/base-ui/home/list_subscribe_large.tsx
  • 대형 구독 목록 컴포넌트의 파일 경로를 변경하고 이름을 조정했습니다.
• src/components/base-ui/home/notification_element.tsx
  • 알림 요소 컴포넌트의 파일 경로를 변경하고 이름을 조정했습니다.
• src/components/base-ui/home/shared/HomeSkeleton.tsx
  • 홈 페이지의 다양한 섹션에 대한 스켈레톤 로딩 UI 컴포넌트들을 정의하는 파일을 추가했습니다.
• src/hooks/useHomeInteractions.ts
  • 좋아요 및 팔로우 토글과 관련된 사용자 상호작용 로직을 중앙 집중화하는 새로운 커스텀 훅을 추가했습니다.

Activity

• 현재까지 이 Pull Request에 대한 사람의 활동(댓글, 리뷰 등)은 없습니다.

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은 홈 페이지에 대한 대대적인 리팩토링을 수행하여 컴포넌트 구조를 개선하고 코드 재사용성을 높였습니다. 로직을 커스텀 훅으로 분리하고, 각 섹션별로 컴포넌트를 나누어 관리하는 방식은 매우 훌륭합니다. 또한 스켈레톤 로딩 UI를 추가하여 사용자 경험을 향상시킨 점도 좋습니다.

몇 가지 개선점을 제안합니다. any 타입을 구체적인 타입으로 변경하여 타입 안정성을 높이고, '매직 넘버'를 상수로 추출하여 코드 가독성과 유지보수성을 향상시키는 것이 좋겠습니다. 또한, React의 key prop 중복 문제와 잠재적인 렌더링 성능 이슈에 대한 수정이 필요해 보입니다. 자세한 내용은 각 파일의 주석을 참고해주세요.