feat: 이미지 추가 및 데브 정리

Author: sumi

apps/web/public/animal-card/card-bg-EVOLUTION.webp

@@ -1,16 +1,11 @@
 import { Suspense } from 'react';
 
 import { MobileLayout } from '@/app/[locale]/game/quiz/_components/MobileLayout';
-import DevModePage from '@/components/DevMode/DevModePage';
 
 export default function QuizLayout({ children }: { children: React.ReactNode }) {
   return (
     <Suspense>
-      <DevModePage>
-        <MobileLayout background={{ url: '/assets/game/quiz/quiz-bg.webp', position: 'bottom' }}>
-          {children}
-        </MobileLayout>
-      </DevModePage>
+      <MobileLayout background={{ url: '/assets/game/quiz/quiz-bg.webp', position: 'bottom' }}>{children}</MobileLayout>
     </Suspense>
   );
 }

apps/web/public/animal-card/card-thumbnail-EVOLUTION.webp

@@ -1,6 +1,7 @@
 'use client';
 
 import { css, cx } from '_panda/css';
+import type { PersonaInfo } from '@gitanimals/api';
 
 import { AnimalCard } from '@/components/AnimalCard';
 import { MediaQuery } from '@/components/MediaQuery';
@@ -10,12 +11,7 @@ import { useGetAllPersona } from '@/hooks/query/render/useGetAllPersona';
 import * as styles from './AnimalSlider.style';
 import AnimalSliderContainerMobile from './AnimalSliderContainerMobile';
 
-interface Animal {
-  type: string;
-  dropRate: string;
-}
-
-function shuffle(array: Animal[]): Animal[] {
+function shuffle(array: PersonaInfo[]): PersonaInfo[] {
   return array.sort(() => Math.random() - 0.5);
 }
 
@@ -26,7 +22,7 @@ function AnimalSlider() {
 
   const ANIMAL_LIST = shuffle(data.personas);
 
-  const animalList: Animal[][] = data.personas.reduce<Animal[][]>((acc, _, idx) => {
+  const animalList: PersonaInfo[][] = data.personas.reduce<PersonaInfo[][]>((acc, _, idx) => {
     if (idx % 12 === 0) {
       acc.push(ANIMAL_LIST.slice(idx, idx + 12));
     }
@@ -39,12 +35,12 @@ function AnimalSlider() {
       <MediaQuery
         desktop={
           <PerspectiveCenterSlider>
-            {animalList.map((animalList: Animal[], idx) => {
+            {animalList.map((animalList: PersonaInfo[], idx) => {
               return (
                 <div key={idx}>
                   <div className={styles.cardContainer}>
-                    {animalList.map((animal: Animal, index: number) => (
-                      <AnimalCard key={index} type={animal.type} dropRate={animal.dropRate} />
+                    {animalList.map((animal: PersonaInfo, index: number) => (
+                      <AnimalCard key={index} {...animal} />
                     ))}
                   </div>
                 </div>
@@ -54,10 +50,10 @@ function AnimalSlider() {
         }
         mobile={
           <AnimalSliderContainerMobile>
-            {data.personas.map((animalList: Animal, idx) => {
+            {data.personas.map((animalList: PersonaInfo, idx) => {
               return (
                 <div key={idx} className={styles.cardContainerMobile}>
-                  <AnimalCard type={animalList.type} dropRate={animalList.dropRate} />
+                  <AnimalCard {...animalList} />
                 </div>
               );
             })}

apps/web/public/assets/animal-card/card-bg-EVOLUTION.webp

@@ -15,7 +15,6 @@ import { overlay } from 'overlay-kit';
 import { toast } from 'sonner';
 
 import { LOCAL_STORAGE_KEY } from '@/constants/storage';
-import { useDevMode } from '@/lib/devtools/devtools';
 import { ANIMAL_TIER_TEXT_MAP, getAnimalTierInfo } from '@/utils/animals';
 import { getPersonaImage } from '@/utils/image';
 
@@ -30,18 +29,10 @@ interface SelectedPetTableProps {
 export function SelectedPetTable({ currentPersona, reset }: SelectedPetTableProps) {
   const queryClient = useQueryClient();
 
-  const { isDevMode } = useDevMode();
-
   const t = useTranslations('Shop');
   const [sellPersonaId, setSellPersonaId] = useState<string | null>(null);
   const { setDoNotShowAgain, isChecked: isDoNotShowAgain } = useDoNotShowAgain();
 
-  // const { data: isEvolutionAble } = useQuery({
-  //   ...evolutionQueries.checkPersonaEvolution(currentPersona?.id as string),
-  //   enabled: !!currentPersona?.id,
-  //   select: (data) => data.evolutionAble,
-  // });
-
   const { mutate: dropPetMutation } = useMutation({
     mutationFn: (personaId: string) => dropPet({ personaId }),
     onSuccess: (data) => {
@@ -121,7 +112,7 @@ export function SelectedPetTable({ currentPersona, reset }: SelectedPetTableProp
               <Button variant="secondary" onClick={onMergeClick}>
                 {t('merge')}
               </Button>
-              {isEvolutionAble && isDevMode && (
+              {isEvolutionAble && (
                 <Button variant="secondary" onClick={onEvolutionClick}>
                   {t('evolution')}
                 </Button>

apps/web/public/assets/animal-card/card-thumbnail-EVOLUTION.webp

@@ -1,18 +1,32 @@
 import type { ComponentProps } from 'react';
+import type { PersonaInfo } from '@gitanimals/api';
 import { CardBack, GameCard } from '@gitanimals/ui-panda';
 import type { CardTierType } from '@gitanimals/ui-panda/src/components/Card/constants';
 
 import { getAnimalTierInfo } from '@/utils/animals';
 import { getPersonaImage } from '@/utils/image';
 
-interface AnimalCardProps {
+interface AnimalCardProps extends Partial<PersonaInfo> {
   type: string;
   dropRate: string;
 }
 
 function AnimalCard(props: AnimalCardProps) {
+  props.type.includes('WHITE') && console.log('props', props);
   const tier = getAnimalTierInfo(Number(props.dropRate.replace('%', '')));
 
+  if (props.grade === 'EVOLUTION') {
+    return (
+      <GameCard
+        tier="EVOLUTION"
+        title={props.type}
+        percentage={props.dropRate}
+        imageUrl={getPersonaImage(props.type)}
+        size="responsive"
+      />
+    );
+  }
+
   return (
     <GameCard
       tier={tier}

apps/web/src/app/[locale]/game/quiz/layout.tsx

@@ -6,6 +6,6 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 export const useGetAllPersona = (options?: Omit<UseQueryOptions<GetAllPersonaResponse>, 'queryKey' | 'queryFn'>) =>
   useSuspenseQuery<GetAllPersonaResponse>({
     queryKey: ['persona', 'info', 'all'],
-    queryFn: getAllPersona,
+    queryFn: () => getAllPersona(),
     ...options,
   });