Merge pull request #52 from side-project-pokehub/Hun

내가 찜한 포켓몬 리스트 페이지네이션으로 변경 및 카드 상세 보기 framer motion 적용
side-project-pokehub · Jan 13, 2024 · 3f5a99c · 3f5a99c
2 parents bc97ad2 + cd3d063
commit 3f5a99c
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "dompurify": "^3.0.6",
     "file-saver": "^2.0.5",
     "firebase": "^10.5.2",
+    "framer-motion": "^10.18.0",
     "react-content-loader": "^6.2.1",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",

diff --git a/src/components/detail/Detail.module.scss b/src/components/detail/Detail.module.scss
@@ -16,7 +16,7 @@
   }
 
   &__comments {
-    margin-top: 50px;
+    margin: 50px 0 30px 0;
     display: flex;
     flex-direction: column;
     justify-content: center;

diff --git a/src/components/modal/CardModal.module.scss b/src/components/modal/CardModal.module.scss
@@ -56,7 +56,13 @@
     cursor: pointer;
     border: 3px solid #0f60ce;
     border-radius: 10px;
-    background-color: inherit;
+    background-color: #0f60ce;
     font-size: 24px;
+    color: #fff;
+
+    &:hover {
+      background-color: #fff;
+      color: #0f60ce;
+    }
   }
 }
diff --git a/src/components/modal/CardModal.tsx b/src/components/modal/CardModal.tsx
@@ -1,3 +1,9 @@
+import {
+  motion,
+  useAnimation,
+  useMotionValue,
+  useTransform,
+} from 'framer-motion';
 import PokemonCard from '../card/PokemonCard';
 import { Card } from '../mypage/Mycard';
 import styles from './CardModal.module.scss';
@@ -16,6 +22,33 @@ interface CardModalProps {
 const CardModal = ({ onModalToggle, cardData, isOpen }: CardModalProps) => {
   const cardRef = useRef<HTMLDivElement>(null);
 
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const rotateX = useTransform(y, [-1, 1], [-30, 30]);
+  const rotateY = useTransform(x, [-1, 1], [-30, 30]);
+
+  const controls = useAnimation();
+
+  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
+    if (cardRef.current) {
+      const rect = cardRef.current.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left - rect.width / 2;
+      const offsetY = e.clientY - rect.top - rect.height / 2;
+
+      const xPercent = offsetX / (rect.width / 2);
+      const yPercent = offsetY / (rect.height / 2);
+
+      x.set(xPercent);
+      y.set(yPercent);
+    }
+  };
+  const handleMouseLeave = () => {
+    controls.start({
+      rotateX: 0,
+      rotateY: 0,
+    });
+  };
+
   const card = cardData?.data;
   const pokemonNickName = {
     pokemonNickName1: card?.pokemonCardData[1],
@@ -53,20 +86,31 @@ const CardModal = ({ onModalToggle, cardData, isOpen }: CardModalProps) => {
               <FiPlus size={20} className={styles.rotate} />
             </div>
           </div>
-          <div
+          <motion.div
             ref={cardRef}
             className={styles.modal__contents}
             onClick={handleContentClick}
+            onMouseMove={handleMouseMove}
+            onMouseLeave={handleMouseLeave}
+            style={{ perspective: '1000px' }}
           >
             <div className={styles.modal__contents__close}></div>
-            <div className={styles.modal__contents}>
+            <motion.div
+              className={styles.modal__contents}
+              style={{
+                rotateX,
+                rotateY,
+              }}
+              initial={{ rotateX: 0, rotateY: 0 }}
+              animate={controls}
+            >
               <PokemonCard
                 isOpen={isOpen}
                 pokemonCardData={card?.pokemonCardData[0]}
                 pokemonNickName={pokemonNickName}
               />
-            </div>
-          </div>
+            </motion.div>
+          </motion.div>
         </div>
       </div>
     </div>

diff --git a/src/components/mypage/MyLikedPokemon.tsx b/src/components/mypage/MyLikedPokemon.tsx
@@ -5,25 +5,43 @@ import { useNavigate } from 'react-router-dom';
 import useLikedStore from '@/store/useLikedStore';
 import RenderPokemon from './RenderPokemon';
 import { updateDocument } from '@/lib/firebaseQuery';
+import { Pagination } from 'antd';
+import { useState } from 'react';
 
 const MyLikedPokemon = () => {
   const { user } = useUserStore();
   const { pokemonData } = useLikedStore();
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 12;
 
   const navigate = useNavigate();
 
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = pokemonData.slice(indexOfFirstItem, indexOfLastItem);
+
   const onCancelLiked = async (pokemonId: string | number) => {
     if (user?.uid) {
       await updateDocument(`/likes/${user.uid}`, {
         pokemons: arrayRemove(pokemonId),
       });
+
+      const newTotal = pokemonData.length - 1;
+      const maxPage = Math.ceil(newTotal / itemsPerPage);
+      if (currentPage > maxPage) {
+        setCurrentPage(maxPage > 0 ? maxPage : 1);
+      }
     }
   };
 
   const onMoveToPokemonDetail = (pokemonId: string | number) => {
     navigate(`/pokemon/${pokemonId}`);
   };
 
+  const handlePageChange = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+  };
+
   return (
     <>
       <div className={styles.myactive__right__container}>
@@ -39,7 +57,7 @@ const MyLikedPokemon = () => {
         ) : (
           <>
             <div className={styles.myactive__liked__box}>
-              {pokemonData.map((pokemon) => (
+              {currentItems.map((pokemon) => (
                 <RenderPokemon
                   key={pokemon.id}
                   pokemon={pokemon}
@@ -50,6 +68,16 @@ const MyLikedPokemon = () => {
             </div>
           </>
         )}
+
+        <div className={styles.pagination}>
+          <Pagination
+            defaultCurrent={currentPage}
+            total={pokemonData.length}
+            pageSize={itemsPerPage}
+            onChange={handlePageChange}
+            hideOnSinglePage={true}
+          />
+        </div>
       </div>
     </>
   );

diff --git a/src/components/mypage/Mypage.module.scss b/src/components/mypage/Mypage.module.scss
@@ -373,7 +373,6 @@
     border-radius: 10.067px;
     border: 1px solid #ebebeb;
     background: #fff;
-    overflow: auto;
   }
 
   &__liked__title {
@@ -395,7 +394,7 @@
 
   &__liked__box {
     padding: 0 29px 22px 29px;
-    height: auto;
+    height: 75%;
     gap: 10px;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

diff --git a/src/components/users/SocialLogin.tsx b/src/components/users/SocialLogin.tsx
@@ -1,11 +1,13 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, useEffect } from 'react';
 import { app } from '@/firebase';
 import {
   signInWithPopup,
   GoogleAuthProvider,
   GithubAuthProvider,
   getAuth,
   signOut,
+  browserSessionPersistence,
+  setPersistence,
 } from 'firebase/auth';
 import styles from './SocialLogin.module.scss';
 import useUserStore from '@/store/useUsersStore';
@@ -22,6 +24,18 @@ const SocialLogin = ({ isOpen, setIsOpen }: SocialLoginProps) => {
   const { user, setUser } = useUserStore();
   const navigate = useNavigate();
 
+  useEffect(() => {
+    const setAuthPersistence = async () => {
+      try {
+        await setPersistence(auth, browserSessionPersistence);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    setAuthPersistence();
+  }, [auth]);
+
   const onlLogin = async (e: MouseEvent<HTMLButtonElement>) => {
     const target = e.target as HTMLButtonElement;
     let name = target.name;
@@ -35,6 +49,9 @@ const SocialLogin = ({ isOpen, setIsOpen }: SocialLoginProps) => {
 
     if (name === 'google') {
       provider = new GoogleAuthProvider();
+      provider.setCustomParameters({
+        prompt: 'select_account',
+      });
     } else if (name === 'github') {
       provider = new GithubAuthProvider();
     } else {