Merge pull request #59 from side-project-pokehub/Min

도감 페이지 반응형 작업 및 미디어 쿼리 수치 변경

src/components/dex/PokemonDex.module.scss

@@ -1,7 +1,13 @@
+@import 'src/styles/mixin.scss';
+
 .pokemon_grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 20px;
+
+  @include mobile {
+    padding: 0 20px;
+  }
 }
 
 .pokemon_list_element {

src/components/plate/FilterPlates.tsx

@@ -3,12 +3,11 @@ import styles from './Plate.module.scss';
 import useSelectedStore from '@/store/useSelectedStore';
 import PlateHideButton from './PlateHideButton';
 import { useState } from 'react';
-import Inner from '../Inner';
 import { AnimatePresence, motion } from 'framer-motion';
 
 const FilterPlates = () => {
   const koreanTypes = Object.values(POKEMON_TYPES);
-  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
   const { selectedPlate, setSelectedPlate } = useSelectedStore();
 
   const variants = {
@@ -51,15 +50,17 @@ const FilterPlates = () => {
             animate="open"
             exit="closed"
             variants={variants}
-            transition={{ duration: 0.6 }}
+            transition={{ duration: 0.3 }}
             className={styles.container}
           >
-            <Inner>
-              <motion.span>*속성을 선택해주세요.</motion.span>
+            <div className={styles.inner}>
+              <motion.span className={styles.description}>
+                속성을 선택해주세요. (중복 선택 가능)
+              </motion.span>
               <motion.div className={styles.type_plates}>
                 {renderTypes(koreanTypes)}
               </motion.div>
-            </Inner>
+            </div>
           </motion.div>
         )}
       </AnimatePresence>

src/components/plate/Plate.module.scss

@@ -1,6 +1,7 @@
 @import 'src/styles/mixin.scss';
 @import 'src/styles/theme.scss';
 
+// FilterPlates
 .wrapper {
   position: relative;
   height: 100%;
@@ -11,25 +12,53 @@
   width: 100%;
   margin-bottom: 60px;
 
+  @include mobile {
+    height: auto;
+  }
+
   .container {
+    height: 100%;
     width: 100%;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     background-color: #fff;
     border-bottom: 3px solid #000;
     overflow: hidden;
 
-    .type_plates {
-      margin-top: 20px;
-      height: 100%;
+    @include mobile {
+      height: auto;
+      width: auto;
+      flex: 1;
+      padding: 30px 0;
+    }
+
+    .inner {
       display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
+      flex-direction: column;
+      justify-content: center;
+      max-width: 1200px;
+      width: 100%;
+      margin: 0 auto;
+      gap: 30px;
+
+      @include mobile {
+        align-items: center;
+      }
+
+      .type_plates {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+
+        @include mobile {
+          justify-content: center;
+          gap: 20px;
+        }
+      }
     }
   }
 }
 
+// Plate
 .plate_wrapper {
   display: flex;
   flex-direction: column;
@@ -79,6 +108,7 @@
   }
 }
 
+//PlateHideButton
 .hide_button {
   position: absolute;
   top: unset;
@@ -93,7 +123,30 @@
   border-top: 24px solid #000;
   width: 111px;
 
-  div {
+  @include mobile {
+    bottom: -38px;
+    transform: scale(2);
+  }
+
+  .mobile_button {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -21px;
+    margin: auto;
+    color: #fff;
+    display: none;
+    align-items: center;
+    font-size: 12px;
+    justify-content: center;
+
+    @include mobile {
+      display: flex;
+      font-family: GmarketSansMedium;
+    }
+  }
+
+  .pc_button {
     position: absolute;
     left: 0;
     right: 0;
@@ -104,5 +157,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
+    @include mobile {
+      display: none;
+    }
   }
 }

src/components/plate/PlateHideButton.tsx

@@ -20,12 +20,14 @@ const PlateHideButton = ({ isOpen, setIsOpen }: PlateHideButtonProp) => {
       className={styles.hide_button}
     >
       <motion.div
+        className={styles.pc_button}
         variants={variant}
         animate={isOpen ? 'open' : 'close'}
         transition={{ duration: 0.4 }}
       >
         <IoChevronUp />
       </motion.div>
+      <span className={styles.mobile_button}>속성 선택</span>
     </button>
   );
 };

src/styles/mixin.scss

@@ -56,19 +56,19 @@
 }
 
 @mixin mobile {
-  @media (max-width: 738px) {
+  @media (max-width: 768px) {
     @content;
   }
 }
 
 @mixin tablet {
-  @media (max-width: 1024px) {
+  @media (max-width: 992px) {
     @content;
   }
 }
 
 @mixin desktop {
-  @media (max-width: 1366px) {
+  @media (max-width: 1200px) {
     @content;
   }
 }