반응형 스타일 오류 수정

반응형 스타일 오류 수정

src/components/cardMaker/CardEditPage.tsx

@@ -13,9 +13,11 @@ import { useGetAllPokemon } from '@/query/qeuries';
 import SearchPokemon from './searchPokemon/SearchPokemon';
 import { useEffect } from 'react';
 import SelectPokemonMobile from './selectPokemon/SelectPokemonMobile';
+import { useNavigate } from 'react-router-dom';
 
 const CardEditPage = () => {
   const { user } = useUserStore();
+  const navigate = useNavigate();
   const {
     pokemonData,
     pokemonNickName1,
@@ -65,6 +67,8 @@ const CardEditPage = () => {
         uid: user.uid,
       });
     }
+
+    navigate('/mypage');
   };
 
   const pokemonNickName = {

src/components/cardMaker/cardEditor.module.scss

@@ -70,6 +70,8 @@
   font-size: 18px;
   font-weight: 500;
   font-family: GmarketSansMedium;
+  width: auto;
+  max-width: 150px;
 }
 
 .status_title {

src/components/cardMaker/searchPokemon/SearchPokemon.tsx

@@ -59,7 +59,11 @@ const SearchPokemon = () => {
   };
 
   return (
-    <div className={styles.search_form_wrapper}>
+    <div
+      className={`${styles.search_form_wrapper} ${
+        isOpen ? styles.dropdown_open : ''
+      }`}
+    >
       <span className={styles.title}>포켓몬 검색하기</span>
       <form className={styles.search_wrapper} onSubmit={onSubmit}>
         <label className={styles.search_container}>

src/components/cardMaker/searchPokemon/search.module.scss

@@ -12,6 +12,23 @@
 
   @include mobile {
     align-items: center;
+
+    &::before {
+      content: '';
+      width: 100vw;
+      height: 100vh;
+      position: fixed;
+      background-color: rgba(0, 0, 0, 0.5);
+      top: 0;
+      z-index: 2;
+      display: none;
+    }
+
+    &.dropdown_open {
+      &::before {
+        display: block;
+      }
+    }
   }
 }
 
@@ -59,6 +76,7 @@
 }
 
 // SearchDropdown
+
 .dropdown_ref_box {
   display: flex;
   width: 100%;

src/components/cardMaker/selectPokemon/SelectPokemonLike.tsx

@@ -53,7 +53,6 @@ const SelectPokemonLike = () => {
         >
           <IoChevronBack />
         </button>
-        t
         <SelectPokemonLayout pokemonArray={likePokemonArray} />
         <button
           className={styles.page_button}

src/components/cardMaker/selectPokemon/select.module.scss

@@ -57,6 +57,7 @@
   @include mobile {
     gap: 30px;
     align-items: center;
+    padding: 20px 10px;
   }
 }
 
@@ -66,13 +67,18 @@
 
   @include mobile {
     gap: 30px;
+    padding: 0 10px;
     flex-direction: column;
   }
 }
 
 .like_container {
   display: flex;
   gap: 15px;
+
+  @include mobile {
+    gap: 5px;
+  }
 }
 
 .select_wrapper > div > .border_button {
@@ -105,7 +111,8 @@
 
   @include mobile {
     background-color: transparent;
-    transform: translateY(-20%);
+    transform: translateY(130%);
+    height: 32px;
   }
 }
 

src/components/dex/PokemonDex.module.scss

@@ -2,10 +2,11 @@
 
 .pokemon_grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 20px;
 
   @include mobile {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     padding: 0 20px;
   }
 }
@@ -15,7 +16,7 @@
   position: relative;
   align-items: center;
   flex-direction: column;
-  padding: 10px 0;
+  padding: 20px;
   border-radius: 17px;
   border: 2px solid #e8e8e8;
   cursor: pointer;
@@ -41,7 +42,8 @@
   }
 
   .pokemon_image {
-    margin: 30px 0;
+    margin-top: 10px;
+    margin-bottom: 30px;
     width: 141px;
     height: 141px;
   }
@@ -57,7 +59,3 @@
     gap: 10px;
   }
 }
-
-.padding_bottom_35px {
-  padding-bottom: 35px;
-}