[Refactor] 게임 라이브러리 컨테이너 구성 정리 #226
Description
목적
GameLibraryGrid가 프리젠테이션 컴포넌트로 집중할 수 있도록, 데이터 페칭·상태 관리·카드 액션을 새로운 컨테이너 컴포넌트로 분리합니다. /games와 /dashboard 각각에 맞는 컨테이너를 도입해 중복 상태 props를 줄이고 URL/무한 스크롤/액션 로직을 명확히 관리합니다.
작업 범위
/games전용 컨테이너(예:GamesLibrarySection)를 추가해useInfiniteGameList, URL 쿼리 동기화, 복사·복제·미리보기 핸들러를 책임지도록 구성합니다./dashboard전용 컨테이너를 동일 패턴으로 구성해useInfiniteMyGames, 공유/삭제 액션, 무한 스크롤을 담당하게 합니다.GameCardOptions는 공용 UI로 유지하되, 컨테이너에서 액션 콜백을 주입하는 규칙을 정리합니다.- 토스트(
sonner)와 다이얼로그(overlay-kit+Dialog) 사용 지점을 컨테이너 쪽으로 이동시켜 UI 컴포넌트의 의존성을 간소화합니다. - 공유/삭제/복제 등 공통 카드 액션 로직을
useGameActions(가칭) 같은 훅으로 추출해 컨테이너 간 재사용성을 높입니다. - 리팩터링 이후 URL 쿼리 연동, 무한 스크롤, 이벤트 전파, 접근성 검사 등이 기존과 동일하게 동작하는지 검증 계획을 수립합니다.
태스크
-
GameLibraryGrid가 필요한 최소 props만 노출하도록 타입 정의와 사용처를 재점검한다. -
/games용 컨테이너 컴포넌트(가칭GamesLibrarySection)를 추가해useInfiniteGameList, URL 쿼리 동기화, 카드 액션(복사/복제/미리보기/생성)을 책임지도록 구현한다. -
/games/page.tsx에서 컨테이너를 사용하도록 교체하고 기존 로직(프리뷰 오버레이, 로드 모어 등)을 컨테이너로 이전한다. - 카드 옵션 공통 액션을 담당할 훅(
useGameCardActions가칭)을 도입해 공유/복제/삭제/링크 복사 로직을 재사용 가능하게 추출한다. -
/dashboard용 컨테이너를 동일 패턴으로 구현하고useInfiniteMyGames, 공유/공유취소/삭제/페이지네이션 로직을 이관한다. -
/dashboard/page.tsx를 새 컨테이너 기반 구조로 업데이트한다. - 토스트(
sonner) 호출과 다이얼로그(overlay-kit+Dialog) 사용 위치를 컨테이너/공통 훅으로 이전하고 UI 레이어에서는 의존하지 않도록 정리한다. - 무한 스크롤, URL 쿼리 동기화, 옵션 메뉴 이벤트 전파, 접근성(포커스/ARIA) 등을 포함한 회귀 테스트 계획을 수립하고 실행한다.
- 리팩터링 후 필요한 문서/주석/이슈 메모를 업데이트한다.
참고
- 상위 이슈: 게임 링크복사/복제 기능 추가 #207
- 기존 링크 복사/복제 기능 구현(/games 카드 링크 복사·복제 인터랙션 구현 #224)과 함께 진행되어야 하며, API 로직은
@/entities/game/api모듈을 재사용합니다.