Skip to content

refactor: PersonaList InventoryGrid 캐러셀 및 DialogV2 마이그레이션#379

Merged
sumi-0011 merged 93 commits into
devfrom
refactor/pet-grid
Apr 3, 2026
Merged

refactor: PersonaList InventoryGrid 캐러셀 및 DialogV2 마이그레이션#379
sumi-0011 merged 93 commits into
devfrom
refactor/pet-grid

Conversation

@sumi-0011
Copy link
Copy Markdown
Member

Summary

  • Dialog v1 → DialogV2 마이그레이션 (MergePersona, LinePersonaSelect, RouteModal)
  • PersonaList를 compound component 패턴으로 리팩토링 (SelectPersonaList.Toolbar, Grid, InventoryGrid)
  • InventoryGrid: Embla 캐러셀 기반 페이지네이션 그리드 구현
  • raw input → TextField 컴포넌트 교체
  • ui-tailwind를 Internal Packages 패턴으로 전환

Test plan

  • mypage 펫 목록이 InventoryGrid로 정상 표시되는지 확인
  • LinePersonaSelect 다이얼로그 열기/닫기 동작 확인
  • MergePersona 다이얼로그에서 펫 선택 및 합성 동작 확인
  • Shop 판매 모달에서 가격 입력 동작 확인
  • 모바일/데스크탑 반응형 레이아웃 확인

🤖 Generated with Claude Code

sumi-0011 and others added 30 commits January 14, 2026 09:42
Tailwind fontSize 설정이 fontFamily를 지원하지 않는 한계를 플러그인으로 해결하여,
text-glyph-* 클래스 사용 시 font-product 없이도 Product Sans가 자동 적용되도록 함

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
# Conflicts:
#	apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/QuizTypeCard.tsx
#	apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/SolveQuizConfirmDialog.tsx
#	apps/web/src/app/[locale]/game/quiz/create/_components/QuizCreateForm.tsx
#	apps/web/src/app/[locale]/game/quiz/solve/_components/done/CompleteAlertDialog.tsx
#	apps/web/src/app/[locale]/game/quiz/solve/_components/fail/FailAlertDialog.tsx
#	apps/web/src/app/[locale]/game/quiz/solve/_components/success/CorrectConfirmDialog.tsx
#	apps/web/src/app/[locale]/guild/_components/GuildPeopleList.tsx
#	apps/web/src/app/[locale]/guild/_components/SelectPersonaList.tsx
#	apps/web/src/app/[locale]/laboratory/_component/ConfirmDialog.tsx
#	apps/web/src/app/[locale]/laboratory/multi-merge/PersonaItem.tsx
#	apps/web/src/app/[locale]/landing/AvailablePetSection/AvailablePetSection.tsx
#	apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx
#	apps/web/src/app/[locale]/landing/Footer/Footer.style.ts
#	apps/web/src/app/[locale]/landing/MainSection/MainSection.style.ts
#	apps/web/src/app/[locale]/landing/MainSection/MainSection.tsx
#	apps/web/src/app/[locale]/landing/MainSection/MainSlider.tsx
#	apps/web/src/app/[locale]/landing/RankingSection/MobileRankingTable.tsx
#	apps/web/src/app/[locale]/landing/RankingSection/RankingSection.tsx
#	apps/web/src/app/[locale]/mypage/(github-custom)/FarmPersonaSelect.tsx
#	apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx
#	apps/web/src/app/[locale]/mypage/(github-custom)/LinePersonaSelect.tsx
#	apps/web/src/app/[locale]/mypage/PersonaList.tsx
#	apps/web/src/app/[locale]/mypage/my-pet/_components/SelectPersonaList.tsx
#	apps/web/src/app/[locale]/page.tsx
#	apps/web/src/app/[locale]/shop/_auction/index.tsx
#	apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx
#	apps/web/src/components/CardGame/FanDrawingGame/FanDrawingGame.tsx
#	apps/web/src/components/Guild/MemeberSlider.tsx
ui-panda Dialog API와 맞추기 위해 ui-tailwind Dialog에 누락된 서브컴포넌트와 prop을 추가하고,
quiz 컴포넌트에서 참조하는 ConfirmDialog 컴포넌트를 생성하여 type-check 오류 해결

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
# Conflicts:
#	apps/web/src/app/[locale]/guild/_components/GuildPeopleList.tsx
#	apps/web/src/app/[locale]/guild/_components/SelectPersonaList.tsx
#	apps/web/src/app/[locale]/laboratory/multi-merge/PersonaItem.tsx
#	apps/web/src/app/[locale]/landing/MainSection/MainSlider.tsx
#	apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx
#	apps/web/src/app/[locale]/mypage/(github-custom)/LinePersonaSelect.tsx
#	apps/web/src/app/[locale]/mypage/my-pet/_components/SelectPersonaList.tsx
#	apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx
#	apps/web/src/components/Guild/MemeberSlider.tsx
Stories files reference @storybook/react types which are not available
during the library type-check. Excluding them follows the standard
pattern of separating storybook config from library builds.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- shared/: constants, utils, hooks, lib, store, i18n, styles, auth, interceptor 통합
- entities/: persona(UI+model), guild(UI), user(model), product(model) 분리
- features/: auction, change-persona-visible, feedback, laboratory-feedback, auth 분리
- widgets/: GNB 위젯 분리
- apis/ 레거시 디렉토리 완전 제거, shared/api/로 인프라 이전

의존성 흐름: app → widgets → features → entities → shared

Made-with: Cursor
- apps/web/ARCHITECTURE.md: 레이어 구조, 의존성 규칙, 코드 배치 기준 상세 가이드
- CLAUDE.md: FSD 아키텍처 참조, outdated 정보 업데이트 (PandaCSS→Tailwind, apis/→FSD)
- .cursor/rules/web-fsd-architecture.mdc: apps/web 파일 편집 시 자동 적용되는 FSD 규칙

Made-with: Cursor
FSD 리팩토링으로 이동된 경로 반영

Made-with: Cursor
i18n/이 src/shared/i18n/으로 이동 후 messages 경로가
../../messages/ → ../../../messages/로 변경 필요

Made-with: Cursor
# Conflicts:
#	.gitignore
#	apps/web/package.json
#	apps/web/src/app/[locale]/game/quiz/_components/MobileLayout.tsx
#	apps/web/src/app/[locale]/guild/(subpage)/[id]/MoreMenu.tsx
#	apps/web/src/app/[locale]/guild/(subpage)/create/page.tsx
#	apps/web/src/app/[locale]/guild/(subpage)/detail/[id]/join/page.tsx
#	apps/web/src/app/[locale]/guild/_components/GuildModalPageLayout.tsx
#	apps/web/src/app/[locale]/guild/layout.tsx
#	apps/web/src/app/[locale]/laboratory/layout.tsx
#	apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSlider.style.ts
#	apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSlider.tsx
#	apps/web/src/app/[locale]/landing/AvailablePetSection/AvailablePetSection.tsx
#	apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx
#	apps/web/src/app/[locale]/mypage/ProfileSection.tsx
#	apps/web/src/app/[locale]/mypage/layout.tsx
#	apps/web/src/app/[locale]/mypage/my-pet/(evolution)/EvolutionPersona.tsx
#	apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx
#	apps/web/src/app/[locale]/shop/_auction/Tab.tsx
#	apps/web/src/app/[locale]/shop/_auction/index.tsx
#	apps/web/src/components/GNB/Notification/InboxList.tsx
#	apps/web/src/components/PageModal/index.tsx
#	apps/web/src/styles/prevTextToken.ts
#	apps/web/src/styles/scrollStyle.ts
#	packages/ui/tailwind/src/components/ui/dialog.tsx
#	packages/ui/tailwind/src/theme/screens.ts
#	pnpm-lock.yaml
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- @gitanimals/ui-tailwind에 ConfirmDialog, AlertDialog 생성
- laboratory 로컬 ConfirmDialog/AlertDialog 삭제
- Quiz, Mypage 사용처를 공통 컴포넌트로 교체
- useDialog hook 내부를 공통 컴포넌트 활용하도록 리팩토링

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
RouteModal로 통합 완료되어 더 이상 사용되지 않는 InterceptingDialog를 제거한다.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
삭제된 InterceptingDialog의 gap-8 레이아웃을 지원하기 위해
RouteModal에 gap prop('sm' | 'lg')을 추가한다.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- chromatic 패키지 설치
- dev 브랜치 push 시 자동 배포 워크플로우 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- render + useState 제거, isOpen: true를 meta args에 설정
- TS 에러 해결 (필수 props를 meta args에서 기본값 제공)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
sumi-0011 and others added 25 commits April 2, 2026 20:28
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
빌드 없이 소스를 직접 참조하도록 변경하여 DX 개선
- package.json exports를 dist/ → src/ 소스 파일로 변경
- next.config.mjs에 transpilePackages 추가
- 누락된 6개 컴포넌트에 'use client' 추가
- 전환 과정 기록 문서(monorepo-package-patterns.md) 추가

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
InventoryGrid 캐러셀 기반 펫 선택 UI로 통일하고
미사용 my-pet/_components/SelectPersonaList.tsx 삭제

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- layout: max-h-[1400px] → 뷰포트 기반 calc로 변경, overflow-hidden 적용
- my-pet page: Grid → InventoryGrid 캐러셀로 교체, flex 높이 채우기

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
뷰포트 전체 높이 대신 getBoundingClientRect().top을 사용하여
위에 있는 요소(GNB, 패딩, 테이블 등)를 자동으로 반영

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
뷰포트 하단 대신 가장 가까운 overflow-hidden 부모의 하단을
경계로 사용하여 콘텐츠 카드 안에 정확히 맞춤

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
getBoundingClientRect().bottom은 padding 포함 경계이므로
실제 콘텐츠 영역 하단 = bottom - paddingBottom으로 보정

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mb-2(8px)가 NAV_HEIGHT에 미포함되어 그리드가 8px 넘침
→ mb-2 제거 + 부모 flex gap-2로 대체, NAV_HEIGHT 44→32 보정

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
근본 원인: containerRef에 flex-1 min-h-0이 없어서
부모 flex의 높이 제약이 전달되지 않았음
→ flex-1 min-h-0 추가 + clientHeight 기반 계산으로 변경

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
아이템이 aspect-square이므로 높이 = 컬럼 너비.
minItemSize 대신 실제 colWidth로 rowHeight를 계산하여
그리드 높이와 아이템 높이 불일치로 인한 넘침 해결

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
인라인 + 다이얼로그 모두 FarmPersonaSelect와 동일한 패턴으로 통일

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 3, 2026

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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a9a78211-541c-4da5-b499-f21b4192394d

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
  • Commit unit tests in branch refactor/pet-grid

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

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

@sumi-0011 sumi-0011 merged commit f2d68fb into dev Apr 3, 2026
5 checks passed
@sumi-0011 sumi-0011 deleted the refactor/pet-grid branch April 3, 2026 05:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant