헤더 및 디테일, 마이페이지 모바일 뷰 작업

package.json

@@ -28,6 +28,7 @@
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.17.0",
     "sass": "^1.69.5",
+    "swiper": "10",
     "uuid": "^9.0.1",
     "zustand": "^4.4.4"
   },

src/components/card/PokemonCard.tsx

@@ -34,7 +34,9 @@ const PokemonCard = ({
   const setClassName = (mainClassName: string) => {
     const typeClass = firstType ? styles[POKEMON_TYPES[firstType]] : '';
     return isMyPage
-      ? `${styles[`${mainClassName}__my`]} ${typeClass}`
+      ? isOpen
+        ? `${styles[`${mainClassName}__my`]} ${styles.isOpen} ${typeClass}`
+        : `${styles[`${mainClassName}__my`]} ${typeClass}`
       : `${styles[mainClassName]} ${typeClass}`;
   };
 
@@ -71,10 +73,7 @@ const PokemonCard = ({
   };
 
   return (
-    <div
-      className={setClassName('wrapper')}
-      style={{ transform: isOpen ? 'scale(2.33)' : undefined }}
-    >
+    <div className={setClassName('wrapper')}>
       <div className={setClassName('pokemon_number')}>{`No.${data?.id}`}</div>
       <div className={styles.white_block}>
         <img

src/components/card/pokemonCard.module.scss

@@ -18,6 +18,14 @@
   }
 }
 
+.wrapper__my.isOpen {
+  transform: scale(2.33);
+
+  @media (max-width: 769px) {
+    transform: scale(1.6);
+  }
+}
+
 .monster_ball_left {
   position: absolute;
   left: 0;

src/components/cardMaker/selectPokemon/SelectPokemonLike.tsx

@@ -3,32 +3,23 @@ import styles from './select.module.scss';
 import { IoChevronForward } from '@react-icons/all-files/io5/IoChevronForward';
 import { IoChevronBack } from '@react-icons/all-files/io5/IoChevronBack';
 import useLikedStore from '@/store/useLikedStore';
-import { useState, useMemo, useCallback } from 'react';
+import { useMemo } from 'react';
 import useCalculateInnerWidth from '@/hook/useCalculateInnerWidth';
+import useSlide from '@/hook/useSlide';
 
 const SelectPokemonLike = () => {
   const { pokemonData } = useLikedStore();
-  const [index, setIndex] = useState(0);
   const windowWidth = useCalculateInnerWidth();
   let POKEMONS_PER_PAGE = 3;
 
   if (windowWidth <= 768) {
     POKEMONS_PER_PAGE = 2;
   }
 
-  const prevSlide = useCallback(() => {
-    if (pokemonData.length <= POKEMONS_PER_PAGE) return;
-    setIndex((prevIndex) =>
-      prevIndex === 0 ? pokemonData.length - 1 : prevIndex - 1,
-    );
-  }, [pokemonData.length, POKEMONS_PER_PAGE]);
-
-  const nextSlide = useCallback(() => {
-    if (pokemonData.length <= POKEMONS_PER_PAGE) return;
-    setIndex((prevIndex) =>
-      prevIndex === pokemonData.length - 1 ? 0 : prevIndex + 1,
-    );
-  }, [pokemonData.length, POKEMONS_PER_PAGE]);
+  const { index, prevSlide, nextSlide } = useSlide(
+    pokemonData.length,
+    POKEMONS_PER_PAGE,
+  );
 
   const likePokemonArray = useMemo(() => {
     const arrayLength = pokemonData.length;
@@ -62,6 +53,7 @@ const SelectPokemonLike = () => {
         >
           <IoChevronBack />
         </button>
+        t
         <SelectPokemonLayout pokemonArray={likePokemonArray} />
         <button
           className={styles.page_button}

src/components/comment/Comments.module.scss

@@ -171,13 +171,15 @@
 
 .mobile {
   &__comments {
+    width: 100%;
+
     &__form {
       width: 100%;
       padding: 0 34px;
     }
 
     &__text {
-      width: 322px;
+      width: 100%;
       height: 150px;
       flex-shrink: 0;
       border-radius: 10px;

src/components/comment/Comments.tsx

@@ -24,13 +24,15 @@ const Comments = ({ pokemonState }: PokemonInfoProps) => {
 
   const { pokemon } = pokemonState;
 
+  const perPage = windowWidth <= 768 ? 5 : 10;
+
   const {
     dataList: commentList,
     setDataList: setCommentList,
     fetchData: fetchComments,
     isLoading,
     hasMoreData: hasMoreComments,
-  } = usePagination(`comments/${pokemon?.id}/pokemonComments`, 10);
+  } = usePagination(`comments/${pokemon?.id}/pokemonComments`, perPage);
 
   useEffect(() => {
     if (pokemon?.id) {
@@ -157,7 +159,7 @@ const Comments = ({ pokemonState }: PokemonInfoProps) => {
 
       {windowWidth <= 768 && (
         <>
-          <div>
+          <div className={styles.mobile__comments}>
             <form className={styles.mobile__comments__form} onSubmit={onSubmit}>
               <span
                 className={`${styles.mobile__comments__length} ${

src/components/detail/Detail.module.scss

@@ -36,12 +36,12 @@
 /*Pokemon - info*/
 .pokemon__info__title {
   text-align: left;
-  width: 54px;
+  width: 57px;
   font-weight: bold;
 
   &.id,
   &.title {
-    width: 38px;
+    width: 39px;
   }
 }
 
@@ -134,6 +134,12 @@
 
 /*Pokemon - status*/
 
+.status {
+  @media (max-width: 769px) {
+    font-size: 12px;
+  }
+}
+
 .stats__main {
   width: 300px;
   display: flex;
@@ -276,6 +282,10 @@
     margin-top: 5px;
     margin-bottom: 10px;
     flex-shrink: 0;
+
+    @media (max-width: 769px) {
+      height: 16px;
+    }
   }
 
   &__barBg__my {
@@ -502,6 +512,7 @@
 
     @media (max-width: 769px) {
       margin-top: 43px;
+      width: 100%;
     }
   }
 
@@ -662,7 +673,9 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        width: 100vw;
+        width: 100%;
+        height: 488px;
+        margin-bottom: 38px;
       }
     }
 
@@ -672,8 +685,8 @@
       border-left: 43px solid transparent;
       border-right: 43px solid transparent;
       position: relative;
-      top: -30px;
-      margin-bottom: 61px;
+      top: -22px;
+      margin-bottom: 104px;
     }
 
     &__name {
@@ -687,7 +700,7 @@
       font-style: normal;
       font-weight: 600;
       line-height: normal;
-      width: 100vw;
+      width: 100%;
 
       &.longName {
         top: -39px;
@@ -700,29 +713,38 @@
       }
     }
   }
+
+  &__official__img {
+    height: 204px;
+    width: 204px;
+  }
 }
 
 .mobile {
   &__info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+
     &__box {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-top: 24px;
+      width: 320px;
+      height: 406px;
+      margin-top: 44px;
+      border: 3px solid #000;
     }
 
     &__title {
-      width: 100vw;
-      height: 100%;
+      width: 100%;
       border-bottom: 3px solid #000;
-      border-top: 3px solid #000;
+      border-top: 2px solid #000;
       position: relative;
       display: flex;
       align-items: center;
 
       &__span {
-        height: 49px;
+        height: 40px;
         z-index: 101;
         display: flex;
         align-items: center;
@@ -733,20 +755,20 @@
         font-style: normal;
         font-weight: 600;
         line-height: normal;
-        padding-left: 32px;
+        padding-left: 18px;
       }
 
       &__left {
         width: 36%;
-        border-bottom: 49px solid #000;
-        border-right: 49px solid transparent;
+        border-bottom: 40px solid #000;
+        border-right: 40px solid transparent;
         position: absolute;
         z-index: 100;
       }
 
       &__right {
-        width: 100vw;
-        height: 49px;
+        width: 100%;
+        height: 40px;
         background-color: red;
         position: absolute;
       }
@@ -764,8 +786,14 @@
 
 .mobile {
   &__status {
+    &__container {
+      border: 3px solid #000;
+      width: 320px;
+      margin-top: 44px;
+    }
+
     &__box {
-      padding: 33px 35px 32px 35px;
+      padding: 26px;
       width: 100%;
     }
 
@@ -774,7 +802,7 @@
       justify-content: space-between;
       align-items: center;
       width: 100%;
-      height: 75px;
+      height: 60px;
       background-color: #000;
       color: #fff;
       padding: 0 49px 0 33px;
@@ -796,6 +824,6 @@
     display: block;
     width: auto;
     position: inherit;
-    margin-top: 27px;
+    margin-top: 60px;
   }
 }