카드제작 컴포넌트 디렉토리 구조 및 코드 리팩토링

src/components/card/PokemonCard.tsx

@@ -8,9 +8,9 @@ import { useLocation } from 'react-router-dom';
 interface PokemonCardProp {
   pokemonCardData: filteredPokemonData;
   pokemonNickName?: {
-    pokemonNickName1: string;
-    pokemonNickName2: string;
-    pokemonName: string;
+    pokemonNickName1: string | null;
+    pokemonNickName2: string | null;
+    pokemonName: string | null;
   };
   isOpen?: boolean;
 }
@@ -38,8 +38,12 @@ const PokemonCard = ({
       : `${styles[mainClassName]} ${typeClass}`;
   };
 
+  const setMyClassName = (className: string) => {
+    return isMyPage ? styles[`${className}__my`] : styles[className];
+  };
+
   const renderStatus = () => {
-    const statusClassName = isMyPage ? styles.status__my : styles.status;
+    const statusClassName = setMyClassName('status');
     const columnIndex = [0, 1, 2];
 
     return columnIndex.map((index) => (
@@ -73,15 +77,19 @@ const PokemonCard = ({
     >
       <div className={setClassName('pokemon_number')}>{`No.${data?.id}`}</div>
       <div className={styles.white_block}>
+        <img
+          className={setMyClassName('monster_ball_left')}
+          src="/monster-ball1.svg"
+          alt=""
+        />
+        <img
+          className={setMyClassName('monster_ball_right')}
+          src="/monster-ball2.svg"
+          alt=""
+        />
         <div className={setClassName('container')}>
-          <div className={styles.container__top}>
-            <div
-              className={
-                isMyPage
-                  ? `${styles.type_containter__my}`
-                  : `${styles.type_containter}`
-              }
-            >
+          <div className={setMyClassName('container__top')}>
+            <div className={setMyClassName('type_containter')}>
               {data?.types.map((pokemonType: TypesType) => (
                 <Plate
                   key={pokemonType.type.name}
@@ -90,85 +98,37 @@ const PokemonCard = ({
               ))}
             </div>
             <img
-              className={
-                isMyPage
-                  ? `${styles.pokemon_image__my}`
-                  : `${styles.pokemon_image}`
-              }
+              className={setMyClassName('pokemon_image')}
               src={
                 data.id !== 1013 ? data.sprites : '/pokemonImg/그우린차.webp'
               }
               alt="포켓몬 이미지"
             />
             <div className={styles.pokemon_intro}>
-              <div
-                className={
-                  isMyPage
-                    ? `${styles.pokemon_name__my}`
-                    : `${styles.pokemon_name}`
-                }
-              >
-                <span
-                  className={
-                    isMyPage
-                      ? `${styles.text__small__my}`
-                      : `${styles.text__small}`
-                  }
-                >
+              <div className={setMyClassName('pokemon_name')}>
+                <span className={setMyClassName('text_small')}>
                   {pokemonNickName?.pokemonNickName1}
                 </span>
-                <span
-                  className={
-                    isMyPage
-                      ? `${styles.text__small__my}`
-                      : `${styles.text__small}`
-                  }
-                >
+                <span className={setMyClassName('text_small')}>
                   {pokemonNickName?.pokemonNickName2}
                 </span>
               </div>
-              <span
-                className={
-                  isMyPage
-                    ? `${styles.text__large__my}`
-                    : `${styles.text__large}`
-                }
-              >
+              <span className={setMyClassName('text_large')}>
                 {pokemonNickName?.pokemonName}
               </span>
             </div>
           </div>
-          <div
-            className={
-              isMyPage
-                ? `${styles.container__my__bottom}`
-                : `${styles.container__bottom}`
-            }
-          >
+          <div className={setMyClassName('container__bottom')}>
             {renderStatus()}
             <div>
               <img
-                className={isMyPage ? `${styles.logo__my}` : `${styles.logo}`}
+                className={setMyClassName('logo')}
                 src="/logo-pokehub.png"
                 alt="PoketHub"
               />
               <div className={styles.total_stat}>
-                <span
-                  className={
-                    isMyPage
-                      ? `${styles.text__small__my}`
-                      : `${styles.text__small}`
-                  }
-                >
-                  Total
-                </span>
-                <span
-                  className={
-                    isMyPage
-                      ? `${styles.text__large__my}`
-                      : `${styles.text__large}`
-                  }
-                >
+                <span className={setMyClassName('text_small')}>Total</span>
+                <span className={setMyClassName('text_large')}>
                   {data?.stats.reduce(
                     (acc, baseStat) => acc + baseStat.base_stat,
                     0,