도감페이지 로딩ui 적용 및 디자인 수정

src/App.tsx

@@ -44,7 +44,7 @@ const App = () => {
                 }
               />
               <Route
-                path="/cardEdit"
+                path="/cardedit"
                 element={
                   <RequireAuth>
                     <Card />

src/components/cardMaker/CardEditPage.tsx

@@ -98,7 +98,11 @@ const CardEditPage = () => {
           <SelectPokemonLike />
           <SelectPokemonRandom />
         </div>
-        <button className={styles.save_button} onClick={onSave}>
+        <button
+          disabled={!pokemonName?.length}
+          className={styles.save_button}
+          onClick={onSave}
+        >
           저장하기
         </button>
       </div>

src/components/cardMaker/cardEditPage.module.scss

@@ -101,6 +101,10 @@
   border: none;
   cursor: pointer;
   font-family: GmarketSansMedium;
+
+  &:disabled {
+    background-color: #dddddd;
+  }
 }
 
 .title {

src/components/cardMaker/selectPokemon/SelectPokemonLayout.tsx

@@ -7,9 +7,13 @@ import { useCallback } from 'react';
 
 interface SelectPokemonLayoutProps {
   pokemonArray: (PokemonType | null)[];
+  range: number;
 }
 
-const SelectPokemonLayout = ({ pokemonArray }: SelectPokemonLayoutProps) => {
+const SelectPokemonLayout = ({
+  pokemonArray,
+  range,
+}: SelectPokemonLayoutProps) => {
   const { setPokemonData, generateRandomNicknames } =
     useSelectedPokemonForCard();
 
@@ -23,17 +27,17 @@ const SelectPokemonLayout = ({ pokemonArray }: SelectPokemonLayoutProps) => {
 
   return (
     <div className={styles.layout_wrapper}>
-      {pokemonArray.map((pokemonData, index) => (
+      {Array.from({ length: range }, (_, index) => (
         <div
-          key={pokemonData ? pokemonData.id : index}
+          key={pokemonArray[index] ? pokemonArray[index]?.id : index}
           className={styles.layout_container}
         >
           <div className={styles.image}>
-            {pokemonData ? (
+            {pokemonArray[index] ? (
               <img
                 src={
-                  pokemonData.id !== 1013
-                    ? pokemonData.sprites?.other?.['official-artwork']
+                  pokemonArray[index]?.id !== 1013
+                    ? pokemonArray[index]?.sprites?.other?.['official-artwork']
                         ?.front_default
                     : '/pokemonImg/그우린차.webp'
                 }
@@ -42,16 +46,17 @@ const SelectPokemonLayout = ({ pokemonArray }: SelectPokemonLayoutProps) => {
             ) : null}
           </div>
           <span>
-            {pokemonData ? reverseObject(POKEMON_NAME)[pokemonData.name] : ''}
+            {pokemonArray[index]
+              ? reverseObject(POKEMON_NAME)[pokemonArray[index]!.name]
+              : ''}
           </span>
-          {pokemonData ? (
-            <button
-              className={styles.border_button}
-              onClick={() => handlePokemonSelection(pokemonData)}
-            >
-              포켓몬 사용
-            </button>
-          ) : null}
+          <button
+            disabled={!pokemonArray[index]}
+            className={styles.border_button}
+            onClick={() => handlePokemonSelection(pokemonArray[index])}
+          >
+            포켓몬 사용
+          </button>
         </div>
       ))}
     </div>

src/components/cardMaker/selectPokemon/SelectPokemonLike.tsx

@@ -53,7 +53,10 @@ const SelectPokemonLike = () => {
         >
           <IoChevronBack />
         </button>
-        <SelectPokemonLayout pokemonArray={likePokemonArray} />
+        <SelectPokemonLayout
+          pokemonArray={likePokemonArray}
+          range={POKEMONS_PER_PAGE}
+        />
         <button
           className={styles.page_button}
           onClick={nextSlide}

src/components/cardMaker/selectPokemon/SelectPokemonRandom.tsx

@@ -37,7 +37,10 @@ const SelectPokemonRandom = () => {
     <div className={styles.select_wrapper}>
       <span className={styles.title}>랜덤 포켓몬</span>
       <div className={styles.random_container}>
-        <SelectPokemonLayout pokemonArray={randomPokemons} />
+        <SelectPokemonLayout
+          pokemonArray={randomPokemons}
+          range={POKEMONS_PER_PAGE}
+        />
         <button className={styles.border_button} onClick={getRandomPokemon}>
           랜덤
         </button>

src/components/dex/PokemonDex.tsx

@@ -3,11 +3,16 @@ import PokemonDexElement from './PokemonDexElement';
 import Inner from '../Inner';
 import useFilteredPokemonData from '@/hook/useFilteredPokemonData';
 import useVisibleDataByScroll from '@/hook/useVisibleDataByScroll';
+import Loading from '../loading/Loading';
 
 const PokemonDex = () => {
-  const filteredData = useFilteredPokemonData();
+  const { filteredData, isLoading } = useFilteredPokemonData();
   const visibleData = useVisibleDataByScroll(filteredData);
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <Inner>
       <ul className={styles.pokemon_grid}>

src/components/header/Header.tsx

@@ -108,7 +108,7 @@ const Header = () => {
                     도감
                   </div>
                 </Link>
-                <Link to="cardEdit">
+                <Link to="cardedit">
                   <div className={styles.nav__item}>
                     <FiPlusSquare size={31} />
                     카드 제작

src/components/header/MobileNavMenu.tsx

@@ -38,7 +38,7 @@ const MobileNavMenu = () => {
           </div>
         </NavLink>
         <NavLink
-          to="cardEdit"
+          to="cardedit"
           className={({ isActive }) => (isActive ? styles.active : '')}
         >
           <div className={styles.nav__item__mobile}>

src/components/mypage/MobileMypageAlert.tsx

@@ -5,7 +5,7 @@ const MobileMypageAlert = ({ isOpen }: { isOpen: boolean }) => {
   const navigate = useNavigate();
 
   const onMovetoMakecard = () => {
-    navigate('/cardEdit');
+    navigate('/cardedit');
   };
   return (
     <>

src/components/mypage/Mycard.tsx

@@ -86,7 +86,7 @@ const Mycard = () => {
   const onMoveMakeCard = () => {
     if (windowWidth <= 768) {
       setIsAlert((prev) => !prev);
-    } else navigate('/cardEdit');
+    } else navigate('/cardedit');
   };
 
   const onModalToggle = (card?: Card) => {

src/components/plate/FilterPlates.tsx

@@ -4,15 +4,17 @@ import useSelectedStore from '@/store/useSelectedStore';
 import PlateHideButton from './PlateHideButton';
 import { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
+import useCalculateInnerWidth from '@/hook/useCalculateInnerWidth';
 
 const FilterPlates = () => {
   const koreanTypes = Object.values(POKEMON_TYPES);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const { selectedPlate, setSelectedPlate } = useSelectedStore();
+  const innerWidth = useCalculateInnerWidth();
 
   const variants = {
-    open: { height: '200px' },
-    closed: { height: 0 },
+    open: { height: '200px', opacity: 1 },
+    closed: { height: 0, opacity: 0 },
   };
 
   const renderTypes = (types: string[]) =>
@@ -44,13 +46,12 @@ const FilterPlates = () => {
   return (
     <div className={styles.wrapper}>
       <AnimatePresence>
-        {isOpen ? (
+        {isOpen && (
           <motion.div
             initial="closed"
             animate="open"
             exit="closed"
-            variants={variants}
-            transition={{ duration: 0.3 }}
+            variants={innerWidth <= 768 ? {} : variants}
             className={styles.container}
           >
             <div className={styles.inner}>
@@ -62,8 +63,6 @@ const FilterPlates = () => {
               </motion.div>
             </div>
           </motion.div>
-        ) : (
-          <div></div>
         )}
       </AnimatePresence>
       <PlateHideButton isOpen={isOpen} setIsOpen={setIsOpen} />

src/hook/useFilteredPokemonData.ts

@@ -8,20 +8,20 @@ import useSelectedStore from '@/store/useSelectedStore';
 import useSearchInputText from '@/store/useSearchInputText';
 
 const useFilteredPokemonData = () => {
-  const { data: allPokemonData } = useGetAllPokemon(1017);
+  const { data: allPokemonData, isLoading } = useGetAllPokemon(1017);
   const { selectedPlate } = useSelectedStore();
   const { inputText } = useSearchInputText();
   const reversedPokemonNameObject = reverseObject(POKEMON_NAME);
 
-  return useMemo(() => {
+  const filteredData = useMemo(() => {
     if (!allPokemonData) return [];
 
     return allPokemonData.filter((data: PokemonType) => {
       if (inputText) {
         return reversedPokemonNameObject[data?.name]?.includes(inputText);
       }
       if (!selectedPlate.length) {
-        return data;
+        return true;
       }
       const { types } = data;
       return selectedPlate.every((plate: string) =>
@@ -32,6 +32,8 @@ const useFilteredPokemonData = () => {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allPokemonData, inputText, selectedPlate]);
+
+  return { filteredData, isLoading };
 };
 
 export default useFilteredPokemonData;