refactor: @egjs/react-flicking → Embla Carousel 마이그레이션#380
Merged
Conversation
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>
Made-with: Cursor
… 제거) Made-with: Cursor
Made-with: Cursor
Made-with: Cursor
- 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>
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>
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>
- @egjs/react-flicking → embla-carousel-react + gsap - 3D perspective(rotateY ±25deg), scale(0.8~1), fade 효과 유지 - 사용처 flicking CSS import 제거 (layout, page, CardList) - gsap 패키지 추가 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
internalEngine() 접근 시 undefined 에러 발생 → scrollSnapList() + scrollProgress() 공개 API 사용 → loop 모드 최단 거리 계산으로 대체 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
GSAP + perspective/fade/scale 제거 → 한 번에 한 슬라이드(100%)를 보여주는 깔끔한 캐러셀로 단순화 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- AnimalSliderContainer (데스크톱): panelsPerView=1 → Embla - AnimalSliderContainerMobile (모바일): Perspective/Fade 제거, Embla + usePrevNextButtons - BackgroundSlider (이벤트): panelsPerView + gap → Embla slidesToScroll Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
모든 슬라이더가 Embla Carousel로 마이그레이션 완료되어 미사용 패키지 삭제 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Test plan
🤖 Generated with Claude Code