-
+
Show More Pets
-
-
- Show More Pets
-
+
diff --git a/apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx b/apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx
index e8f9e755..8b5ad719 100644
--- a/apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx
+++ b/apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx
@@ -2,6 +2,7 @@ import { Button } from '@gitanimals/ui-panda';
import { getServerAuth } from '@/auth';
import { LoginButton } from '@/components/AuthButton';
+import { Responsive } from '@/components/Responsive';
import { Link } from '@/i18n/routing';
import * as styles from './ChoosePetSection.style';
@@ -22,12 +23,9 @@ async function ChoosePetSection() {
You can acquire and grow pets through GitHub activities. Choose from over 50 different pets and raise them.
- {/* TODO: button ๋ฐ์ํ ์ฒ๋ฆฌ */} {!session ? (
@@ -85,13 +63,15 @@ function MainSlider() {
- {MODE_ITEM_LIST.map((item) => (
-
+
);
@@ -170,3 +150,7 @@ const nextArrowStyle = cx(
},
}),
);
+
+const emblaViewportStyle = css({ overflow: 'hidden', width: '100%' });
+const emblaContainerStyle = css({ display: 'flex' });
+const emblaSlideStyle = css({ flex: '0 0 100%', minWidth: 0 });
diff --git a/apps/web/src/app/[locale]/landing/RankingSection/MobileRankingTable.tsx b/apps/web/src/app/[locale]/landing/RankingSection/MobileRankingTable.tsx
index d1d9521d..e8112d83 100644
--- a/apps/web/src/app/[locale]/landing/RankingSection/MobileRankingTable.tsx
+++ b/apps/web/src/app/[locale]/landing/RankingSection/MobileRankingTable.tsx
@@ -1,143 +1,179 @@
-import { useRouter } from 'next/navigation';
-import { useSearchParams } from 'next/navigation';
+'use client';
+
+import { useRef, useState } from 'react';
import { useSession } from 'next-auth/react';
import { css, cx } from '_panda/css';
-import Flicking from '@egjs/react-flicking';
import type { RankType } from '@gitanimals/api';
-import { getNewUrl } from '@gitanimals/util-common';
+import { rankQueries } from '@gitanimals/react-query';
+import { Skeleton } from '@gitanimals/ui-panda';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
import { RankingLink } from './RankingLink';
-import '@egjs/react-flicking/dist/flicking.css';
-import '@egjs/flicking-plugins/dist/pagination.css';
+const RANKS_PER_PAGE = 5;
+const SWIPE_THRESHOLD = 50;
+
+interface MobileRankingTableProps {
+ initialRanks: RankType[];
+ initialPage: number;
+ totalPage: number;
+ type: 'WEEKLY_USER_CONTRIBUTIONS' | 'WEEKLY_GUILD_CONTRIBUTIONS';
+}
-export function MobileRankingTable({ ranks, page, totalPage }: { page: number; ranks: RankType[]; totalPage: number }) {
- const router = useRouter();
+export function MobileRankingTable({ initialRanks, initialPage, totalPage, type }: MobileRankingTableProps) {
const { data: session } = useSession();
- const searchParams = useSearchParams();
const currentUsername = session?.user?.name;
+ const [page, setPage] = useState(initialPage);
+ const touchStartX = useRef(0);
- const getRankingPageUrl = (params: Record
-
- ))}
-
+
+ {MODE_ITEM_LIST.map((item) => (
+
+
+
+ ))}
+
-
- {groupedRanks.map((group, index) => (
-
+
+
+
+ );
+}
+
+const containerStyle = css({ width: '100%', overflow: 'hidden' });
+
+const tableWrapperStyle = css({
+ transition: 'opacity 0.15s ease',
});
-const slideStyle = css({
- width: '100%',
- height: 'auto',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
+const fetchingStyle = css({
+ opacity: 0.5,
});
const paginationStyle = css({
- marginTop: '20px',
- position: 'relative',
- height: '30px',
+ marginTop: '16px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
- gap: 2,
});
-const paginationBulletStyle = css({
- width: '8px',
- height: '8px',
- borderRadius: '50%',
- backgroundColor: 'white.white_50',
- cursor: 'pointer',
-
- '&.active': {
- backgroundColor: 'white.white_100',
- },
+const paginationTextStyle = css({
+ textStyle: 'glyph14.regular',
+ color: 'white.white_50',
});
-const rankingListStyle = css({
- width: '100%',
+const arrowButtonStyle = css({
+ width: '32px',
+ height: '32px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ border: 'none',
+ background: 'none',
+ color: 'white.white_75',
+ fontSize: '20px',
+ cursor: 'pointer',
+ _disabled: {
+ opacity: 0.25,
+ cursor: 'default',
+ },
});
const tableStyle = css({
@@ -148,7 +184,7 @@ const tableStyle = css({
});
const trBaseStyle = css({
- borderRadius: '8px',
+ borderRadius: '6px',
'& img': {
borderRadius: '50%',
@@ -157,43 +193,23 @@ const trBaseStyle = css({
'& td, & th': {
border: 'none',
- padding: '0 16px',
+ padding: '0 8px',
},
'& td:first-child, & th:first-child': {
- paddingLeft: '40px',
- borderRadius: '8px 0 0 8px',
- width: '120px',
+ paddingLeft: '16px',
+ borderRadius: '6px 0 0 6px',
+ width: '54px',
},
'& td:last-child, & th:last-child': {
- paddingRight: '40px',
- borderRadius: '0 8px 8px 0',
+ paddingRight: '16px',
+ borderRadius: '0 6px 6px 0',
textAlign: 'right',
},
'& td:nth-child(2), & th:nth-child(2)': {
textAlign: 'center',
- width: '72px',
- padding: '0 8px',
- },
-
- _mobile: {
- borderRadius: '6px',
- '& td, & th': {
- border: 'none',
- padding: '0 8px',
- },
-
- '& td:first-child, & th:first-child': {
- paddingLeft: '16px',
- width: '54px',
- },
- '& td:last-child, & th:last-child': {
- paddingRight: '16px',
- },
- '& td:nth-child(2), & th:nth-child(2)': {
- width: '28px',
- paddingLeft: '0px',
- },
+ width: '28px',
+ paddingLeft: '0px',
},
});
@@ -213,22 +229,15 @@ const trStyle = cx(
textStyle: 'glyph18.regular',
color: 'white.white_100',
backgroundColor: 'white.white_10',
- height: '60px',
+ height: '48px',
+ fontSize: 'glyph15.regular',
'& td:first-child': {
- fontSize: '20px',
+ fontSize: '16px',
lineHeight: '28px',
fontFamily: 'token(fonts.dnf)',
color: 'white.white_50',
},
- _mobile: {
- height: '48px',
- fontSize: 'glyph15.regular',
-
- '& td:first-child': {
- fontSize: '16px',
- },
- },
}),
);
diff --git a/apps/web/src/app/[locale]/landing/RankingSection/RankingSection.tsx b/apps/web/src/app/[locale]/landing/RankingSection/RankingSection.tsx
index bbb174b2..474d40ac 100644
--- a/apps/web/src/app/[locale]/landing/RankingSection/RankingSection.tsx
+++ b/apps/web/src/app/[locale]/landing/RankingSection/RankingSection.tsx
@@ -10,6 +10,7 @@ import { Link } from '@/i18n/routing';
import GameConsole from './GameConsole/GameConsole';
import { MobileGameConsole } from './MobileGameConsole/MobileGameConsole';
+import { calcTotalPage, RANKS_PER_PAGE, RANKS_TOP_3 } from './constants';
import { MobileRankingTable } from './MobileRankingTable';
import { RankingTable } from './RankingTable';
import { TopPodium } from './TopPodium';
@@ -28,8 +29,8 @@ export default function RankingSection({
const queries = useQueries({
queries: [
- rankQueries.getRanksOptions({ rank: 1, size: 3, type }),
- rankQueries.getRanksOptions({ rank: startRankNumber, size: 5, type }),
+ rankQueries.getRanksOptions({ rank: 1, size: RANKS_TOP_3, type }),
+ rankQueries.getRanksOptions({ rank: startRankNumber, size: RANKS_PER_PAGE, type }),
rankQueries.getTotalRankOptions({ type }),
],
});
@@ -58,7 +59,12 @@ export default function RankingSection({
);
}
-
-const calcTotalPage = (totalCount: number) => {
- if (totalCount <= 3) return 0;
- return Math.ceil((totalCount - 3) / 5) - 1;
-};
-
const titleStyle = css({
textStyle: 'glyph82.bold',
color: 'white.white_100',
diff --git a/apps/web/src/app/[locale]/landing/RankingSection/RankingServerSide.tsx b/apps/web/src/app/[locale]/landing/RankingSection/RankingServerSide.tsx
index 99a0ddd2..401d9bb2 100644
--- a/apps/web/src/app/[locale]/landing/RankingSection/RankingServerSide.tsx
+++ b/apps/web/src/app/[locale]/landing/RankingSection/RankingServerSide.tsx
@@ -4,18 +4,16 @@ import { rankQueries } from '@gitanimals/react-query';
import { getDehydratedQueries, Hydrate } from '@/lib/react-query/queryClient';
+import { RANKS_PER_PAGE, RANKS_TOP_3 } from './constants';
import RankingSection from './RankingSection';
-const TOTAL_VIEW_RANKS = 8 as const;
-const RANKS_TOP_3 = 3 as const;
-const RANKS_PER_PAGE = TOTAL_VIEW_RANKS - RANKS_TOP_3;
-
export async function RankingServerSide({
- searchParams,
+ searchParams: searchParamsPromise,
}: {
- searchParams: { [key: string]: string | string[] | undefined };
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
try {
+ const searchParams = await searchParamsPromise;
const type = searchParams.ranking ?? 'people';
const session = await getServerSession();
diff --git a/apps/web/src/app/[locale]/landing/RankingSection/constants.ts b/apps/web/src/app/[locale]/landing/RankingSection/constants.ts
new file mode 100644
index 00000000..ac965b75
--- /dev/null
+++ b/apps/web/src/app/[locale]/landing/RankingSection/constants.ts
@@ -0,0 +1,10 @@
+export const RANKS_TOP_3 = 3;
+export const RANKS_PER_PAGE = 5;
+export const RANK_OFFSET = RANKS_TOP_3 + 1;
+
+export const getRankStart = (page: number) => page * RANKS_PER_PAGE + RANK_OFFSET;
+
+export const calcTotalPage = (totalCount: number) => {
+ if (totalCount <= RANKS_TOP_3) return 0;
+ return Math.ceil((totalCount - RANKS_TOP_3) / RANKS_PER_PAGE) - 1;
+};
diff --git a/apps/web/src/app/[locale]/landing/index.ts b/apps/web/src/app/[locale]/landing/index.ts
index eb6effb1..5f44c7cf 100644
--- a/apps/web/src/app/[locale]/landing/index.ts
+++ b/apps/web/src/app/[locale]/landing/index.ts
@@ -1,5 +1,8 @@
import { AvailablePetSection } from './AvailablePetSection';
+import { ChoosePetSection } from './ChoosePetSection';
+import { Footer } from './Footer';
import { HavePetWaySection } from './HavePetWaySection';
import { MainSection } from './MainSection';
+import { RankingServerSide } from './RankingSection/RankingServerSide';
-export { AvailablePetSection, HavePetWaySection, MainSection };
+export { AvailablePetSection, ChoosePetSection, Footer, HavePetWaySection, MainSection, RankingServerSide };
diff --git a/apps/web/src/app/[locale]/mypage/(github-custom)/FarmBackgroundSelect.tsx b/apps/web/src/app/[locale]/mypage/(github-custom)/FarmBackgroundSelect.tsx
index 4f699f7a..0365f468 100644
--- a/apps/web/src/app/[locale]/mypage/(github-custom)/FarmBackgroundSelect.tsx
+++ b/apps/web/src/app/[locale]/mypage/(github-custom)/FarmBackgroundSelect.tsx
@@ -16,9 +16,9 @@ export const FarmBackgroundSelect = wrap
fallback: <>,
})
.on(function FarmBackgroundSelect({
- onChangeStatus,
+ onImageRefresh,
}: {
- onChangeStatus: (status: 'loading' | 'success' | 'error') => void;
+ onImageRefresh: () => void;
}) {
const session = useClientSession();
const { name } = useClientUser();
@@ -29,16 +29,10 @@ export const FarmBackgroundSelect = wrap
data: { backgrounds },
} = useSuspenseQuery(renderUserQueries.getMyBackground(name));
const { mutate: changeMyBackground } = useChangeMyBackgroundByToken(session.data?.user.accessToken ?? '', {
- onMutate: () => {
- onChangeStatus('loading');
+ onSettled: () => {
+ onImageRefresh();
},
- onSuccess: () => {
- onChangeStatus('success');
- },
- onError: () => {
- onChangeStatus('error');
- },
- }); // TODO: ์ถํ ์์
+ });
const handleChangeBackground = (background: RenderBackground) => {
changeMyBackground({ type: background.type });
diff --git a/apps/web/src/app/[locale]/mypage/(github-custom)/FarmPersonaSelect.tsx b/apps/web/src/app/[locale]/mypage/(github-custom)/FarmPersonaSelect.tsx
index 91909d19..3125dea1 100644
--- a/apps/web/src/app/[locale]/mypage/(github-custom)/FarmPersonaSelect.tsx
+++ b/apps/web/src/app/[locale]/mypage/(github-custom)/FarmPersonaSelect.tsx
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { useTranslations } from 'next-intl';
-import { css, cx } from '_panda/css';
+import { css } from '_panda/css';
import type { Persona } from '@gitanimals/api';
import { userQueries } from '@gitanimals/react-query';
import { Dialog, ScrollArea } from '@gitanimals/ui-panda';
@@ -9,67 +9,41 @@ import { ExpandIcon } from 'lucide-react';
import { toast } from 'sonner';
import { useChangePersonaVisible } from '@/apis/persona/useChangePersonaVisible';
-import { customScrollHorizontalStyle } from '@/styles/scrollStyle';
import { SelectPersonaList } from '../PersonaList';
-export function FarmPersonaSelect({
- onChangeStatus,
-}: {
- onChangeStatus: (status: 'loading' | 'success' | 'error') => void;
-}) {
+export function FarmPersonaSelect({ onImageRefresh }: { onImageRefresh: () => void }) {
const queryClient = useQueryClient();
const t = useTranslations('Mypage');
const tError = useTranslations('Error');
- const [selectPersona, setSelectPersona] = useState
-
-
-
-
- ))}
- | Rank | -Pet | -Name | -Contribution | -
|---|---|---|---|
| {item.rank} | -
- |
-
- |
- {item.contributions} | -
+
);
}
-const flickingStyle = css({
- width: '100%',
- height: 'auto',
- margin: '0 auto',
- position: 'relative',
- overflow: 'hidden',
+function RankingTableView({
+ ranks,
+ currentUsername,
+}: {
+ ranks: RankType[] | undefined;
+ currentUsername: string | null | undefined;
+}) {
+ return (
+
+
- {[0, 1, 2].map((group, index) => {
- const isActive =
- (page === 0 && index === 0) ||
- (page !== 0 && page !== totalPage && index === 1) ||
- (page === totalPage && index === 2);
- return ;
- })}
+
+
+ {page + 1} / {totalPage + 1}
+
+
| Rank | +Pet | +Name | +Contribution | +
|---|---|---|---|
| {item.rank} | +
+ |
+
+ |
+ {item.contributions} | +
|
+ |
+
+ |
+
+ |
+
+ |
+
-
- {t('no-results')}
; + } + + return ( +
+ {filteredList.map((persona) => (
+ onSelectPersona(persona)}
+ loading={loadingPersona?.includes(persona.id) ?? false}
+ isSpecialEffect={isSpecialEffect}
+ />
+ ))}
+
+ );
+}
+
+// โโโ Root โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+
interface Props {
- selectPersona: string[];
+ selectPersona?: string[];
onSelectPersona: (persona: Persona) => void;
initSelectPersonas?: (list: Persona[]) => void;
loadingPersona?: string[];
-
isSpecialEffect?: boolean;
+ children?: React.ReactNode;
}
-export const SelectPersonaList = wrap
+const Root = wrap
.ErrorBoundary({
- // TODO: ๊ณตํต ์๋ฌ ์ปดํฌ๋ํธ๋ก ๋์ฒด
fallback: error
,
})
.Suspense({
@@ -44,90 +130,61 @@ export const SelectPersonaList = wrap
),
})
-
.on(function SelectPersonaList({
selectPersona,
isSpecialEffect,
onSelectPersona,
initSelectPersonas,
loadingPersona,
+ children,
}: Props) {
const { name } = useClientUser();
const { data } = useSuspenseQuery(userQueries.allPersonasOptions(name));
const hasInitialized = useRef(false);
- // ์ด๊ธฐ ์ ํ ๋ก์ง, ์ธ๋ถ์์ ์ด๊ธฐํ ํจ์ ์ ๋ฌ
+ const { filteredList, filterState, updateFilter, resetFilter, isFiltering, counts } = usePersonaListFilter(
+ data.personas,
+ );
+
useEffect(() => {
if (initSelectPersonas && !hasInitialized.current && data.personas.length > 0) {
hasInitialized.current = true;
initSelectPersonas(data.personas);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [data]);
-
- const gradeSortedList = useMemo(() => {
- // COLLABORATOR, EVOLUTION, DEFAULT ์์ผ๋ก ์ ๋ ฌ
- return data.personas.sort((a, b) => {
- if (a.grade === 'COLLABORATOR') return -1;
- if (a.grade === 'EVOLUTION') return 1;
- return 0;
- });
- }, [data]);
-
- const viewList = useMemo(() => {
- const viewListSorted = gradeSortedList.sort((a, b) => {
- if (a.visible && !b.visible) return -1;
- if (!a.visible && b.visible) return 1;
- return parseInt(b.level) - parseInt(a.level);
- });
-
- return viewListSorted;
- }, [gradeSortedList]);
+ }, []);
- return (
-
- {viewList.map((persona) => (
- onSelectPersona(persona)}
- isLoading={loadingPersona?.includes(persona.id) ?? false}
- isSpecialEffect={isSpecialEffect}
- />
- ))}
-
+ const selectedIds = useMemo(
+ () => new Set(selectPersona ?? data.personas.filter((p) => p.visible).map((p) => p.id)),
+ [selectPersona, data],
);
- });
-interface PersonaItemProps {
- persona: Persona;
- isSelected: boolean;
- onClick: () => void;
- isLoading: boolean;
+ const contextValue: SelectPersonaListContextValue = useMemo(
+ () => ({
+ filterState,
+ updateFilter,
+ resetFilter,
+ counts,
+ isFiltering,
+ filteredList,
+ selectedIds,
+ onSelectPersona,
+ loadingPersona,
+ isSpecialEffect,
+ }),
+ [filterState, updateFilter, resetFilter, counts, isFiltering, filteredList, selectedIds, onSelectPersona, loadingPersona, isSpecialEffect],
+ );
- isSpecialEffect?: boolean;
-}
+ return (
+ {t('please-choose-pet')}
- {data.personas.map((persona) => (
- onSelectPersona(persona)}
- />
- ))}
-
+ {tFilter('no-results')}
+ ) : ( +
+ {filteredList.map((persona) => (
+ onSelectPersona(persona)}
+ size="small"
+ />
+ ))}
+
+ )}
@@ -36,7 +31,10 @@ function MypageMyPets() {
onSelectPersona={(persona) => setSelectPersona(persona)}
initSelectPersonas={initSelectPersonas}
isSpecialEffect
- />
+ >
+ {
};
}
-export default function HomePage({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) {
+export default async function HomePage({
+ searchParams,
+}: {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const t = await getTranslations('Error');
+
return (
-
+
+
+
);
}
diff --git a/apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx b/apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx
index 6fc05f48..f4bffece 100644
--- a/apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx
+++ b/apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx
@@ -10,7 +10,7 @@ import { useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { sendMessageToErrorChannel } from '@/apis/slack/sendMessage';
-import { CardDrawingGame } from '@/components/CardGame/FanDrawingGame/FanDrawingGame';
+import { CardDrawingGame } from '@/components/CardGame/SummonDrawingGame';
import { GITHUB_ISSUE_URL } from '@/constants/outlink';
import { trackEvent } from '@/lib/analytics';
diff --git a/apps/web/src/app/[locale]/test/ranking/page.tsx b/apps/web/src/app/[locale]/test/ranking/page.tsx
index 1dde087b..66b34adb 100644
--- a/apps/web/src/app/[locale]/test/ranking/page.tsx
+++ b/apps/web/src/app/[locale]/test/ranking/page.tsx
@@ -4,12 +4,9 @@ import { rankQueries } from '@gitanimals/react-query';
import { getDehydratedQueries, Hydrate } from '@/lib/react-query/queryClient';
+import { RANKS_PER_PAGE, RANKS_TOP_3 } from '../../landing/RankingSection/constants';
import RankingSection from '../../landing/RankingSection/RankingSection';
-const TOTAL_VIEW_RANKS = 8 as const;
-const RANKS_TOP_3 = 3 as const;
-const RANKS_PER_PAGE = TOTAL_VIEW_RANKS - RANKS_TOP_3;
-
export default async function TestRankingPage({
searchParams,
}: {
diff --git a/apps/web/src/components/CardGame/SummonDrawingGame/RitualCircle.tsx b/apps/web/src/components/CardGame/SummonDrawingGame/RitualCircle.tsx
new file mode 100644
index 00000000..4e529d84
--- /dev/null
+++ b/apps/web/src/components/CardGame/SummonDrawingGame/RitualCircle.tsx
@@ -0,0 +1,102 @@
+import { css, cx } from '_panda/css';
+
+interface RitualCircleProps {
+ accelerate?: boolean;
+}
+
+export function RitualCircle({ accelerate = false }: RitualCircleProps) {
+ return (
+ ('ready');
+ const [isAnimating, setIsAnimating] = useState(false);
+ const [cardData, setCardData] = useState<{ type: string; dropRate: string } | null>(null);
+ const [shatterDone, setShatterDone] = useState(false);
+
+ const radius = isMobile ? CIRCLE_RADIUS_MOBILE : CIRCLE_RADIUS_DESKTOP;
+ const revealTimerRef = useRef>();
+
+ const positions = useMemo(
+ () => characters.map((_, i) => getCirclePosition(i, characters.length, radius)),
+ [characters, radius],
+ );
+
+ // Auto-start drawing on mount
+ useEffect(() => {
+ const timer = setTimeout(() => setGameState('drawing'), 600);
+ return () => clearTimeout(timer);
+ }, []);
+
+ // Cleanup reveal timer on unmount
+ useEffect(() => {
+ return () => {
+ if (revealTimerRef.current) clearTimeout(revealTimerRef.current);
+ };
+ }, []);
+
+ const selectCard = useCallback(
+ async (index: number) => {
+ if (isAnimating || gameState !== 'drawing') return;
+
+ setIsAnimating(true);
+ setGameState('revealing');
+
+ try {
+ const result = await onSelectCard(index);
+ if (!result) {
+ throw new Error('Failed to draw card');
+ }
+
+ setCardData(result);
+
+ // Brief pause for converge animation, then shatter
+ revealTimerRef.current = setTimeout(() => {
+ setGameState('selected');
+ }, 800);
+ } catch (error) {
+ console.error('Card selection error:', error);
+ setGameState('drawing');
+ } finally {
+ setIsAnimating(false);
+ }
+ },
+ [isAnimating, gameState, onSelectCard],
+ );
+
+ const closeGame = useCallback(() => {
+ onClose();
+ }, [onClose]);
+
+ return (
+ ) {
+ return (
+
+ {/* Floating animation wrapper */}
+
+ {children}
+
+
+ );
+}
+
+interface ConvergeMotionProps {
+ x: number;
+ y: number;
+ index: number;
+}
+
+export function ConvergeMotion({ children, x, y, index }: PropsWithChildren) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function MergedCardMotion({ children }: PropsWithChildren) {
+ return (
+
+ {/* Micro-shake container */}
+
+ {children}
+
+
+ );
+}
+
+const SHARD_CLIPS = [
+ 'polygon(50% 50%, 0% 0%, 50% 0%)',
+ 'polygon(50% 50%, 50% 0%, 100% 0%)',
+ 'polygon(50% 50%, 100% 0%, 100% 50%)',
+ 'polygon(50% 50%, 100% 50%, 100% 100%)',
+ 'polygon(50% 50%, 100% 100%, 50% 100%)',
+ 'polygon(50% 50%, 50% 100%, 0% 100%)',
+];
+
+interface ShatterMotionProps {
+ children: React.ReactNode;
+ onComplete: () => void;
+}
+
+export function ShatterMotion({ children, onComplete }: ShatterMotionProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+const cardStyle = css({
+ position: 'absolute',
+ cursor: 'pointer',
+ borderRadius: '8px',
+});
+
+const mergedCardStyle = css({
+ position: 'absolute',
+ zIndex: 10,
+});
+
+const shatterContainerStyle = css({
+ position: 'absolute',
+ width: '100px',
+ height: '124px',
+ _mobile: {
+ width: '72px',
+ height: '89px',
+ },
+});
+
+const shardStyle = css({
+ position: 'absolute',
+ inset: 0,
+});
+
+const shockwaveStyle = css({
+ position: 'absolute',
+ width: '100px',
+ height: '100px',
+ borderRadius: '50%',
+ border: '3px solid rgba(147, 130, 255, 0.8)',
+ pointerEvents: 'none',
+});
diff --git a/apps/web/src/components/CardGame/SummonDrawingGame/index.ts b/apps/web/src/components/CardGame/SummonDrawingGame/index.ts
new file mode 100644
index 00000000..5387c677
--- /dev/null
+++ b/apps/web/src/components/CardGame/SummonDrawingGame/index.ts
@@ -0,0 +1 @@
+export { CardDrawingGame } from './SummonDrawingGame';
diff --git a/apps/web/src/components/PersonaItem.tsx b/apps/web/src/components/PersonaItem.tsx
new file mode 100644
index 00000000..a42f0d60
--- /dev/null
+++ b/apps/web/src/components/PersonaItem.tsx
@@ -0,0 +1,108 @@
+import type { ComponentProps } from 'react';
+import { memo } from 'react';
+import { css, cx } from '_panda/css';
+import type { Persona } from '@gitanimals/api';
+import { Banner, LevelBanner } from '@gitanimals/ui-panda';
+
+import { getPersonaImage } from '@/utils/image';
+
+// --- LevelPersonaItem (LevelBanner ๊ธฐ๋ฐ) ---
+
+interface LevelPersonaItemProps {
+ persona: Persona;
+ isSelected: boolean;
+ onClick: () => void;
+ size?: ComponentProps['size'];
+ className?: string;
+}
+
+function LevelPersonaItem({ persona, isSelected, onClick, size = 'full', className }: LevelPersonaItemProps) {
+ return (
+
+ );
+}
+
+export const MemoizedLevelPersonaItem = memo(LevelPersonaItem, (prev, next) => {
+ return prev.isSelected === next.isSelected && prev.persona.id === next.persona.id && prev.persona.level === next.persona.level;
+});
+
+// --- BannerPersonaItem (Banner ๊ธฐ๋ฐ) ---
+
+interface BannerPersonaItemProps {
+ persona: Persona;
+ isSelected: boolean;
+ onClick: () => void;
+ size?: ComponentProps['size'];
+ className?: string;
+ loading?: boolean;
+ /** ์งํ ๊ฐ๋ฅ ํซ์ gradient ์ดํํธ ์ ์ฉ */
+ isSpecialEffect?: boolean;
+}
+
+function BannerPersonaItem({
+ persona,
+ isSelected,
+ onClick,
+ size = 'full',
+ className,
+ loading,
+ isSpecialEffect,
+}: BannerPersonaItemProps) {
+ return (
+
+ );
+}
+
+export const MemoizedBannerPersonaItem = memo(BannerPersonaItem, (prev, next) => {
+ return (
+ prev.isSelected === next.isSelected &&
+ prev.persona.id === next.persona.id &&
+ prev.persona.level === next.persona.level &&
+ prev.loading === next.loading &&
+ prev.isSpecialEffect === next.isSpecialEffect
+ );
+});
+
+// multi-merge ํธํ alias
+export { MemoizedLevelPersonaItem as MemoizedPersonaItem };
+export { MemoizedBannerPersonaItem as MemoizedPersonaBannerItem };
diff --git a/apps/web/src/components/PersonaListToolbar.tsx b/apps/web/src/components/PersonaListToolbar.tsx
new file mode 100644
index 00000000..a134f339
--- /dev/null
+++ b/apps/web/src/components/PersonaListToolbar.tsx
@@ -0,0 +1,224 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { css } from '_panda/css';
+import { flex } from '_panda/patterns';
+import { CombineChip, SearchBar } from '@gitanimals/ui-panda';
+import { RotateCcwIcon } from 'lucide-react';
+
+import { ANIMAL_TIER_INFO } from '@/components/AnimalCard/AnimalCard.constant';
+
+import type { GradeFilter, PersonaFilterState, SortBy, TierFilter, VisibilityFilter } from '@/hooks/persona/usePersonaListFilter';
+
+export interface PersonaListToolbarProps {
+ filterState: PersonaFilterState;
+ onFilterChange: (partial: Partial) => void;
+ onReset: () => void;
+ counts: { filtered: number; total: number };
+ isFiltering: boolean;
+ /** ๊ฒ์๋ฐ ํ์ ์ฌ๋ถ */
+ showSearch?: boolean;
+ /** ๊ฐ์์ฑ ํํฐ ํ์ ์ฌ๋ถ (Farm ์ปจํ
์คํธ) */
+ showVisibilityFilter?: boolean;
+ /** ์งํ ๊ฐ๋ฅ ํํฐ ํ์ ์ฌ๋ถ */
+ showEvolvableFilter?: boolean;
+}
+
+const GRADE_OPTIONS: { value: GradeFilter; labelKey: string }[] = [
+ { value: 'ALL', labelKey: 'filter-all' },
+ { value: 'COLLABORATOR', labelKey: 'filter-grade-collaborator' },
+ { value: 'DEFAULT', labelKey: 'filter-grade-default' },
+ { value: 'EVOLUTION', labelKey: 'filter-grade-evolution' },
+];
+
+const TIER_OPTIONS: { value: TierFilter; label: string }[] = [
+ { value: 'ALL', label: 'ALL' },
+ { value: 'EX', label: ANIMAL_TIER_INFO.EX.label },
+ { value: 'S_PLUS', label: ANIMAL_TIER_INFO.S_PLUS.label },
+ { value: 'A_PLUS', label: ANIMAL_TIER_INFO.A_PLUS.label },
+ { value: 'B_MINUS', label: ANIMAL_TIER_INFO.B_MINUS.label },
+];
+
+const VISIBILITY_OPTIONS: { value: VisibilityFilter; labelKey: string }[] = [
+ { value: 'ALL', labelKey: 'filter-all' },
+ { value: 'VISIBLE', labelKey: 'filter-visible' },
+ { value: 'HIDDEN', labelKey: 'filter-hidden' },
+];
+
+const SORT_OPTIONS: { value: SortBy; labelKey: string }[] = [
+ { value: 'grade', labelKey: 'sort-grade' },
+ { value: 'level-desc', labelKey: 'sort-level-desc' },
+ { value: 'level-asc', labelKey: 'sort-level-asc' },
+ { value: 'tier', labelKey: 'sort-tier' },
+ { value: 'name', labelKey: 'sort-name' },
+];
+
+export function PersonaListToolbar({
+ filterState,
+ onFilterChange,
+ onReset,
+ counts,
+ isFiltering,
+ showSearch = false,
+ showVisibilityFilter = false,
+ showEvolvableFilter = false,
+}: PersonaListToolbarProps) {
+ const t = useTranslations('Mypage.Filter');
+
+ return (
+ = {
+ component: C;
+ desktop?: Partial>;
+ mobile?: Partial>;
+} & Omit, 'component' | 'desktop' | 'mobile'>;
+
+export function Responsive({
+ component: Component,
+ desktop,
+ mobile,
+ children,
+ ...sharedProps
+}: ResponsiveProps) {
+ const Comp = Component as ElementType;
+ const shared = sharedProps as Record;
+
+ return (
+ <>
+
+ {children}
+
+
+ {children}
+
+
+ );
+}
diff --git a/apps/web/src/components/Responsive/index.ts b/apps/web/src/components/Responsive/index.ts
new file mode 100644
index 00000000..74841281
--- /dev/null
+++ b/apps/web/src/components/Responsive/index.ts
@@ -0,0 +1 @@
+export { Responsive } from './Responsive';
diff --git a/apps/web/src/hooks/persona/usePersonaListFilter.ts b/apps/web/src/hooks/persona/usePersonaListFilter.ts
new file mode 100644
index 00000000..9c09cfd6
--- /dev/null
+++ b/apps/web/src/hooks/persona/usePersonaListFilter.ts
@@ -0,0 +1,117 @@
+import { useDeferredValue, useMemo, useState } from 'react';
+import type { Persona } from '@gitanimals/api';
+
+import type { AnimalTierType } from '@/components/AnimalCard/AnimalCard.constant';
+import { getAnimalTierInfo, getPersonaGradePriority } from '@/utils/animals';
+
+export type SortBy = 'grade' | 'level-desc' | 'level-asc' | 'tier' | 'name';
+export type GradeFilter = 'ALL' | 'COLLABORATOR' | 'DEFAULT' | 'EVOLUTION';
+export type TierFilter = 'ALL' | AnimalTierType;
+export type VisibilityFilter = 'ALL' | 'VISIBLE' | 'HIDDEN';
+
+export interface PersonaFilterState {
+ grade: GradeFilter;
+ tier: TierFilter;
+ visibility: VisibilityFilter;
+ evolvableOnly: boolean;
+ sortBy: SortBy;
+ searchQuery: string;
+}
+
+const DEFAULT_FILTER_STATE: PersonaFilterState = {
+ grade: 'ALL',
+ tier: 'ALL',
+ visibility: 'ALL',
+ evolvableOnly: false,
+ sortBy: 'grade',
+ searchQuery: '',
+};
+
+const TIER_PRIORITY: Record = {
+ EX: 0,
+ S_PLUS: 1,
+ A_PLUS: 2,
+ B_MINUS: 3,
+};
+
+function getPersonaTier(persona: Persona): AnimalTierType {
+ return getAnimalTierInfo(Number(persona.dropRate));
+}
+
+function filterPersonas(personas: Persona[], state: PersonaFilterState, deferredSearch: string): Persona[] {
+ return personas.filter((p) => {
+ if (state.grade !== 'ALL' && p.grade !== state.grade) return false;
+ if (state.tier !== 'ALL' && getPersonaTier(p) !== state.tier) return false;
+ if (state.visibility === 'VISIBLE' && !p.visible) return false;
+ if (state.visibility === 'HIDDEN' && p.visible) return false;
+ if (state.evolvableOnly && !p.isEvolutionable) return false;
+ if (deferredSearch && !p.type.toLowerCase().includes(deferredSearch.toLowerCase())) return false;
+ return true;
+ });
+}
+
+function sortPersonas(personas: Persona[], sortBy: SortBy): Persona[] {
+ return [...personas].sort((a, b) => {
+ switch (sortBy) {
+ case 'grade': {
+ const gradeDiff = getPersonaGradePriority(a.grade) - getPersonaGradePriority(b.grade);
+ if (gradeDiff !== 0) return gradeDiff;
+ if (a.visible && !b.visible) return -1;
+ if (!a.visible && b.visible) return 1;
+ return parseInt(b.level) - parseInt(a.level);
+ }
+ case 'level-desc':
+ return parseInt(b.level) - parseInt(a.level);
+ case 'level-asc':
+ return parseInt(a.level) - parseInt(b.level);
+ case 'tier': {
+ const tierA = TIER_PRIORITY[getPersonaTier(a)] ?? 99;
+ const tierB = TIER_PRIORITY[getPersonaTier(b)] ?? 99;
+ if (tierA !== tierB) return tierA - tierB;
+ return parseInt(b.level) - parseInt(a.level);
+ }
+ case 'name':
+ return a.type.localeCompare(b.type);
+ default:
+ return 0;
+ }
+ });
+}
+
+export function usePersonaListFilter(personas: Persona[], initialState?: Partial) {
+ const [filterState, setFilterState] = useState({
+ ...DEFAULT_FILTER_STATE,
+ ...initialState,
+ });
+
+ const deferredSearch = useDeferredValue(filterState.searchQuery);
+
+ const filteredList = useMemo(
+ () => sortPersonas(filterPersonas(personas, filterState, deferredSearch), filterState.sortBy),
+ [personas, filterState, deferredSearch],
+ );
+
+ const updateFilter = (partial: Partial) => {
+ setFilterState((prev) => ({ ...prev, ...partial }));
+ };
+
+ const resetFilter = () => {
+ setFilterState({ ...DEFAULT_FILTER_STATE, ...initialState });
+ };
+
+ const isFiltering =
+ filterState.grade !== 'ALL' ||
+ filterState.tier !== 'ALL' ||
+ filterState.visibility !== 'ALL' ||
+ filterState.evolvableOnly ||
+ filterState.searchQuery !== '';
+
+ return {
+ filteredList,
+ filterState,
+ updateFilter,
+ resetFilter,
+ isFiltering,
+ counts: { filtered: filteredList.length, total: personas.length },
+ };
+}
diff --git a/apps/web/src/utils/animals.ts b/apps/web/src/utils/animals.ts
index a82dfe82..bd2807c0 100644
--- a/apps/web/src/utils/animals.ts
+++ b/apps/web/src/utils/animals.ts
@@ -1,6 +1,18 @@
import type { AnimalTierType } from '@/components/AnimalCard/AnimalCard.constant';
import { ANIMAL_TIER_INFO, AnimalTier } from '@/components/AnimalCard/AnimalCard.constant';
+/**
+ * ํ๋ฅด์๋ ๋ฑ๊ธ ์ ๋ ฌ ์ฐ์ ์์ (๋ฎ์์๋ก ์ฐ์ )
+ * COLLABORATOR > DEFAULT > EVOLUTION
+ */
+const PERSONA_GRADE_PRIORITY: Record = {
+ COLLABORATOR: 0,
+ DEFAULT: 1,
+ EVOLUTION: 2,
+};
+
+export const getPersonaGradePriority = (grade: string): number => PERSONA_GRADE_PRIORITY[grade] ?? 1;
+
export const getAnimalTierInfo = (dropRateNumber: number): AnimalTierType => {
if (dropRateNumber <= ANIMAL_TIER_INFO.EX.max) {
return AnimalTier.EX;
diff --git a/packages/ui/panda/src/components/Banner/index.ts b/packages/ui/panda/src/components/Banner/index.ts
index 6665e2f0..ce1d283c 100644
--- a/packages/ui/panda/src/components/Banner/index.ts
+++ b/packages/ui/panda/src/components/Banner/index.ts
@@ -1,3 +1,3 @@
-export { Banner } from './Banner';
+export { Banner, BannerSkeleton, BannerSkeletonList } from './Banner';
export { LevelBanner } from './LevelBanner';
export { BannerPetSelectMedium } from './BannerPetSelect';
diff --git a/packages/ui/panda/src/components/Chip/CombineChip.tsx b/packages/ui/panda/src/components/Chip/CombineChip.tsx
index 25fa6e3c..6ab7cdd1 100644
--- a/packages/ui/panda/src/components/Chip/CombineChip.tsx
+++ b/packages/ui/panda/src/components/Chip/CombineChip.tsx
@@ -52,6 +52,8 @@ const chipContentStyle = css({
border: '1px solid',
borderColor: 'black.black_50',
color: 'white',
+ zIndex: 9999,
+ pointerEvents: 'auto',
});
const chipItemStyle = css({
diff --git a/packages/ui/panda/src/components/Dialog/Dialog.styles.ts b/packages/ui/panda/src/components/Dialog/Dialog.styles.ts
index 69d61f28..720e28a1 100644
--- a/packages/ui/panda/src/components/Dialog/Dialog.styles.ts
+++ b/packages/ui/panda/src/components/Dialog/Dialog.styles.ts
@@ -80,6 +80,26 @@ export const dialogContentCva = cva({
export type DialogContentVariants = RecipeVariantProps;
+export const dialogScrollableStyle = css({
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ '& .dialog-title': { flexShrink: 0 },
+});
+
+export const dialogTopSlotStyle = css({
+ flexShrink: 0,
+ width: '100%',
+});
+
+export const dialogBodyStyle = css({
+ flex: 1,
+ minHeight: 0,
+ overflowY: 'auto',
+ overflowX: 'hidden',
+ width: '100%',
+});
+
export const dialogTitleStyle = css({
textStyle: 'glyph48.bold',
color: 'white.white_100',
diff --git a/packages/ui/panda/src/components/Dialog/Dialog.tsx b/packages/ui/panda/src/components/Dialog/Dialog.tsx
index 8860f883..becac65a 100644
--- a/packages/ui/panda/src/components/Dialog/Dialog.tsx
+++ b/packages/ui/panda/src/components/Dialog/Dialog.tsx
@@ -7,7 +7,14 @@ import { createStyleContext } from '@shadow-panda/style-context';
import { styled } from '_panda/jsx';
import { css, cx } from '_panda/css';
import { dialog } from '_panda/recipes';
-import { dialogContentCva, DialogContentVariants, dialogTitleStyle } from './Dialog.styles';
+import {
+ dialogContentCva,
+ DialogContentVariants,
+ dialogTitleStyle,
+ dialogScrollableStyle,
+ dialogTopSlotStyle,
+ dialogBodyStyle,
+} from './Dialog.styles';
const { withProvider, withContext } = createStyleContext(dialog);
@@ -17,17 +24,22 @@ const DialogClose = withContext(styled(DialogPrimitive.Close), 'close');
type DialogContentProps = {
isShowClose?: boolean;
+ scrollable?: boolean;
} & DialogContentVariants &
React.ComponentPropsWithoutRef;
const Content = React.forwardRef, DialogContentProps>(
- ({ children, isShowClose = true, ...props }, ref) => (
+ ({ children, isShowClose = true, scrollable, ...props }, ref) => (
{children}
{isShowClose && (
@@ -60,6 +72,16 @@ const Title = React.forwardRef<
Title.displayName = DialogPrimitive.Title.displayName;
+const TopSlot = React.forwardRef>(
+ ({ className, ...props }, ref) => ,
+);
+TopSlot.displayName = 'DialogTopSlot';
+
+const Body = React.forwardRef>(
+ ({ className, ...props }, ref) => ,
+);
+Body.displayName = 'DialogBody';
+
export const DialogRoot = withProvider(styled(DialogPrimitive.Root), 'root');
export const DialogTrigger = withContext(styled(DialogPrimitive.Trigger), 'trigger');
export const DialogContent = withContext(styled(Content), 'content');
@@ -67,6 +89,8 @@ export const DialogHeader = withContext(styled('div'), 'header');
export const DialogFooter = withContext(styled('div'), 'footer');
export const DialogTitle = withContext(styled(Title), 'title');
export const DialogDescription = withContext(styled(DialogPrimitive.Description), 'description');
+export const DialogTopSlot = TopSlot;
+export const DialogBody = Body;
const Dialog = Object.assign(DialogRoot, {
Root: DialogRoot,
@@ -76,6 +100,8 @@ const Dialog = Object.assign(DialogRoot, {
Footer: DialogFooter,
Title: DialogTitle,
Description: DialogDescription,
+ TopSlot: DialogTopSlot,
+ Body: DialogBody,
});
export { Dialog };
diff --git a/packages/ui/panda/src/theme/keyframes.ts b/packages/ui/panda/src/theme/keyframes.ts
index c4514ca0..a7f95559 100644
--- a/packages/ui/panda/src/theme/keyframes.ts
+++ b/packages/ui/panda/src/theme/keyframes.ts
@@ -72,6 +72,22 @@ export const keyframes = defineKeyframes({
transform: 'translate3d(-100%, 0, 0)',
},
},
+ slideFromRight: {
+ from: {
+ transform: 'translateX(30%)',
+ },
+ to: {
+ transform: 'translateX(0)',
+ },
+ },
+ slideFromLeft: {
+ from: {
+ transform: 'translateX(-30%)',
+ },
+ to: {
+ transform: 'translateX(0)',
+ },
+ },
skeletonLoading: {
'0%': {
backgroundPosition: '200% 0',
+ <>
+
-
-
-
+
+
+ {/* Rune points */}
+ {Array.from({ length: 8 }).map((_, i) => {
+ const angle = (i * 360) / 8;
+ const rad = (angle * Math.PI) / 180;
+ const r = 46;
+ const x = 50 + r * Math.cos(rad);
+ const y = 50 + r * Math.sin(rad);
+ return (
+
+ );
+ })}
+ {/* Center glow */}
+
+
+ );
+}
+
+const circleContainerStyle = css({
+ position: 'absolute',
+ width: '340px',
+ height: '340px',
+ _mobile: {
+ width: '220px',
+ height: '220px',
+ },
+ pointerEvents: 'none',
+});
+
+const ringBaseStyle = css({
+ position: 'absolute',
+ borderRadius: '50%',
+ border: '2px dashed',
+ borderColor: 'rgba(147, 130, 255, 0.4)',
+});
+
+const outerRingStyle = cx(
+ ringBaseStyle,
+ css({
+ inset: '0',
+ animation: 'animateSpin',
+ }),
+);
+
+const innerRingStyle = cx(
+ ringBaseStyle,
+ css({
+ inset: '15%',
+ borderStyle: 'dotted',
+ borderColor: 'rgba(100, 200, 255, 0.3)',
+ animation: 'animateSpin',
+ animationDirection: 'reverse',
+ }),
+);
+
+const normalOuterStyle = css({ animationDuration: '20s' });
+const acceleratedOuterStyle = css({ animationDuration: '4s' });
+const normalInnerStyle = css({ animationDuration: '15s' });
+const acceleratedInnerStyle = css({ animationDuration: '3s' });
+
+const runePointStyle = css({
+ position: 'absolute',
+ width: '6px',
+ height: '6px',
+ borderRadius: '50%',
+ bg: 'rgba(147, 130, 255, 0.6)',
+ transform: 'translate(-50%, -50%)',
+ boxShadow: '0 0 8px rgba(147, 130, 255, 0.8)',
+ _mobile: {
+ width: '4px',
+ height: '4px',
+ },
+});
+
+const centerGlowStyle = css({
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: '20px',
+ height: '20px',
+ borderRadius: '50%',
+ bg: 'rgba(147, 130, 255, 0.3)',
+ boxShadow: '0 0 30px rgba(147, 130, 255, 0.5), 0 0 60px rgba(100, 200, 255, 0.2)',
+});
diff --git a/apps/web/src/components/CardGame/SummonDrawingGame/SummonDrawingGame.tsx b/apps/web/src/components/CardGame/SummonDrawingGame/SummonDrawingGame.tsx
new file mode 100644
index 00000000..bbfcd762
--- /dev/null
+++ b/apps/web/src/components/CardGame/SummonDrawingGame/SummonDrawingGame.tsx
@@ -0,0 +1,262 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { css } from '_panda/css';
+import { CardBack as CardBackUi } from '@gitanimals/ui-panda';
+
+import { AnimalCard } from '@/components/AnimalCard';
+import { Portal } from '@/components/Portal';
+
+import { RitualCircle } from './RitualCircle';
+import {
+ ConvergeMotion,
+ MergedCardMotion,
+ ResultCardMotion,
+ ShatterMotion,
+ ShockwaveRing,
+ SummonCardMotion,
+} from './SummonMotion';
+
+type GameState = 'ready' | 'drawing' | 'revealing' | 'selected';
+
+interface CardDrawingGameProps {
+ characters: { id: number }[];
+ onSelectCard: (index: number) => Promise<{ type: string; dropRate: string } | undefined>;
+ onClose: () => void;
+}
+
+const CIRCLE_RADIUS_DESKTOP = 140;
+const CIRCLE_RADIUS_MOBILE = 90;
+
+function getCirclePosition(index: number, total: number, radius: number) {
+ const angle = (index * 360) / total - 90; // start from top
+ const rad = (angle * Math.PI) / 180;
+ return {
+ x: Math.cos(rad) * radius,
+ y: Math.sin(rad) * radius,
+ };
+}
+
+function useIsMobile() {
+ const [isMobile, setIsMobile] = useState(false);
+ useEffect(() => {
+ const check = () => setIsMobile(window.innerWidth < 768);
+ check();
+ window.addEventListener('resize', check);
+ return () => window.removeEventListener('resize', check);
+ }, []);
+ return isMobile;
+}
+
+export function CardDrawingGame({ characters, onSelectCard, onClose }: CardDrawingGameProps) {
+ const t = useTranslations('Gotcha');
+ const isMobile = useIsMobile();
+
+ const [gameState, setGameState] = useState
+
+ );
+}
+
+function CardBack() {
+ return (
+
+ selectCard(index)}
+ >
+
+ ))}
+
+ {/* Revealing: all cards converge to center */}
+ {gameState === 'revealing' && (
+ <>
+ {characters.map((char, index) => (
+
+
+ ))}
+
+
+
+ )}
+
+ {/* Selected: shatter + result */}
+ {gameState === 'selected' && cardData && (
+ <>
+ {!shatterDone && (
+ setShatterDone(true)}>
+
+ )}
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ + {t('click-to-close')} +
+
+
+ );
+}
+
+function DetailedCard({ cardData }: { cardData: { type: string; dropRate: string } }) {
+ return (
+
+
+ );
+}
+
+const containerStyle = css({
+ width: '100%',
+ mx: 'auto',
+});
+
+const gameAreaStyle = css({
+ position: 'relative',
+ height: '360px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+});
+
+const overlayStyle = css({
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexDirection: 'column',
+ gap: '100px',
+ zIndex: 3001,
+});
+
+const backdropStyle = css({
+ position: 'absolute',
+ inset: 0,
+ bg: 'black.black_50',
+ backdropFilter: 'blur(10px)',
+ cursor: 'pointer',
+});
+
+const cardBackStyle = css({
+ width: '100px',
+ height: '124px',
+ overflow: 'hidden',
+ _mobile: {
+ width: '72px',
+ height: '89px',
+ },
+});
+
+const detailedCardStyle = css({
+ width: '320px',
+ maxWidth: '80vw',
+ height: 'auto',
+ overflow: 'hidden',
+ position: 'relative',
+ transformStyle: 'preserve-3d',
+ aspectRatio: '220/272',
+ _mobile: {
+ width: '260px',
+ },
+});
+
+const noticeMessageStyle = css({
+ textStyle: 'glyph22.regular',
+ color: 'white',
+ textAlign: 'center',
+ cursor: 'pointer',
+ _mobile: {
+ textStyle: 'glyph16.regular',
+ },
+});
diff --git a/apps/web/src/components/CardGame/SummonDrawingGame/SummonMotion.tsx b/apps/web/src/components/CardGame/SummonDrawingGame/SummonMotion.tsx
new file mode 100644
index 00000000..c04138c9
--- /dev/null
+++ b/apps/web/src/components/CardGame/SummonDrawingGame/SummonMotion.tsx
@@ -0,0 +1,209 @@
+import type { PropsWithChildren } from 'react';
+import { css } from '_panda/css';
+import { motion } from 'framer-motion';
+
+interface SummonCardMotionProps {
+ x: number;
+ y: number;
+ index: number;
+ onClick: () => void;
+}
+
+export function SummonCardMotion({ children, x, y, index, onClick }: PropsWithChildren
+ {SHARD_CLIPS.map((clip, i) => {
+ const angle = (i * 60 + 30) * (Math.PI / 180);
+ const dist = 200;
+ return (
+
+ {children}
+
+ );
+ })}
+
+ );
+}
+
+export function ShockwaveRing() {
+ return (
+
+ {showSearch && (
+ onFilterChange({ searchQuery: e.target.value })}
+ />
+ )}
+
+
+ );
+}
+
+const toolbarContainerStyle = css({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '8px',
+ marginBottom: '8px',
+});
+
+const filterRowStyle = flex({
+ gap: '6px',
+ alignItems: 'center',
+ flexWrap: 'wrap',
+});
+
+const toggleButtonStyle = css({
+ height: '30px',
+ padding: '6px 12px',
+ borderRadius: '6px',
+ textStyle: 'glyph12.regular',
+ color: 'white.white_50',
+ backgroundColor: 'white.white_5',
+ border: '1px solid transparent',
+ cursor: 'pointer',
+ transition: 'all 0.15s ease',
+ _hover: {
+ backgroundColor: 'white.white_10',
+ },
+ '&[data-active]': {
+ color: 'white.white_90',
+ backgroundColor: 'brand.sky_25',
+ borderColor: 'brand.sky',
+ },
+});
+
+const countSectionStyle = flex({
+ alignItems: 'center',
+ gap: '4px',
+ marginLeft: 'auto',
+});
+
+const countTextStyle = css({
+ textStyle: 'glyph12.regular',
+ color: 'white.white_50',
+});
+
+const resetButtonStyle = css({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '24px',
+ height: '24px',
+ borderRadius: '4px',
+ color: 'white.white_50',
+ cursor: 'pointer',
+ _hover: {
+ backgroundColor: 'white.white_10',
+ color: 'white.white_75',
+ },
+});
diff --git a/apps/web/src/components/Responsive/Responsive.tsx b/apps/web/src/components/Responsive/Responsive.tsx
new file mode 100644
index 00000000..99888673
--- /dev/null
+++ b/apps/web/src/components/Responsive/Responsive.tsx
@@ -0,0 +1,33 @@
+import type { ComponentProps, ElementType } from 'react';
+import { css, cx } from '_panda/css';
+
+const desktopClass = css({ display: 'block', _mobile: { display: 'none' } });
+const mobileClass = css({ display: 'none', _mobile: { display: 'block' } });
+
+type ResponsiveProps
+ {/* ๋ฑ๊ธ ํํฐ */}
+ onFilterChange({ grade: v as GradeFilter })}>
+
+
+
+ {GRADE_OPTIONS.map((opt) => (
+
+ {t(opt.labelKey)}
+
+ ))}
+
+
+
+ {/* ํฐ์ด ํํฐ */}
+ onFilterChange({ tier: v as TierFilter })}>
+
+
+
+ {TIER_OPTIONS.map((opt) => (
+
+ {opt.label}
+
+ ))}
+
+
+
+ {/* ๊ฐ์์ฑ ํํฐ */}
+ {showVisibilityFilter && (
+ onFilterChange({ visibility: v as VisibilityFilter })}
+ >
+
+
+
+ {VISIBILITY_OPTIONS.map((opt) => (
+
+ {t(opt.labelKey)}
+
+ ))}
+
+
+ )}
+
+ {/* ์งํ ๊ฐ๋ฅ ํํฐ */}
+ {showEvolvableFilter && (
+
+ )}
+
+ {/* ์ ๋ ฌ */}
+ onFilterChange({ sortBy: v as SortBy })}>
+
+
+
+ {SORT_OPTIONS.map((opt) => (
+
+ {t(opt.labelKey)}
+
+ ))}
+
+
+
+ {/* ๊ฒฐ๊ณผ ์ + ์ด๊ธฐํ */}
+
+
+
+ {counts.filtered}/{counts.total}
+
+ {isFiltering && (
+
+ )}
+
+