[REFACTOR] 메인 페이지 구조 개선

[AAminha]

1️⃣ 요약

• ref [REFACTOR] 코드 개선 및 디테일 수정 #53
• ref [REFACTOR] 폴더 구조 개선 #78
• 메인 페이지 구조 개선

2️⃣ 작업사항

• 파일 위치 변경
• 컴포넌트 분리
• API 에러 발생 시, Sentry에 기록되도록 설정

[Copilot]

Pull Request Overview

This PR refactors the main page by reorganizing the component structure, separating concerns into individual components, and improving API error logging through Sentry integration.

• New MainPage component and separation of child components (e.g., WriteMessageButton, MessageList, etc.).
• Removal of the old Main page file and consolidation of API caching settings via constants.
• Updated QueryClient configuration to capture errors using Sentry.

Reviewed Changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/pages/Main/index.tsx	New main page implementation using modular components
src/pages/Main/components/WriteMessageButton.tsx	Created a dedicated component for the "Write Message" button
src/pages/Main/components/NoticeSection.tsx	Minor UI class reordering
src/pages/Main/components/MessageList.tsx	New component for listing messages with an observer ref
src/pages/Main/components/MessageCounter.tsx	New component to display the message count
src/pages/Main/components/CityBackground.tsx	New component for dynamic city background based on message count
src/pages/Main.tsx	Legacy Main file removed
src/main.tsx	Updated Sentry and QueryClient configuration for error logging
src/hooks/*.ts/.tsx	Refactored hooks to use caching constants instead of hardcoded values
src/apis/message.ts	Removed try-catch blocks in favor of centralized error handling
src/constants/cache.ts	New constants file for cache and stale time settings

Comments suppressed due to low confidence (2)

src/pages/Main/components/MessageList.tsx:20

• [nitpick] Consider using a unique identifier from the message (e.g., message.id) for the key instead of index concatenation to ensure stability during reordering.

key={`${index}-${message.to}-${message.from}`}

src/apis/message.ts:3

• The removal of the try-catch block means that network errors will be thrown directly. Ensure that the centralized error handling via react-query and QueryClient onError is sufficient for your debugging and logging needs.

export const getMessages = async (page: number, size: number) => {