Ver 1.0.2

side-project-pokehub · Mar 22, 2024 · bc457f0 · bc457f0
2 parents 74d0a7b + b56a340
commit bc457f0
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 22 deletions.
diff --git a/src/Meta.tsx b/src/Meta.tsx
@@ -70,7 +70,7 @@ Meta.defaultProps = {
   subject: '포케허브: 포켓몬 커뮤니티, 도감, 카드제작 및 토론',
   copyright: 'PokeHub_Team',
   keywords:
-    '포켓몬, 포켓몬 도감, 포켓몬 카드, 포켓몬 게임, 포켓몬 커뮤니티, 포켓몬 공략, 포켓몬 이벤트, 포켓몬 최신 뉴스, 포켓몬 교환, 포켓몬 카드 제작',
+    '포케허브, pokehub, 포켓몬, 포켓몬 도감, 포켓몬 카드, 포켓몬 게임, 포켓몬 커뮤니티, 포켓몬 공략, 포켓몬 이벤트, 포켓몬 최신 뉴스, 포켓몬 교환, 포켓몬 카드 제작',
   url: window.location.href,
   image:
     'https://github.com/side-project-pokehub/my-pokemon/assets/115094069/20de534c-814b-441d-8b74-6cfc9347c66c',

diff --git a/src/components/detail/Detail.module.scss b/src/components/detail/Detail.module.scss
@@ -96,7 +96,7 @@
   flex-direction: column;
   justify-content: space-around;
   transition: 0.3s;
-  transform: rotateY(30deg);
+  transform: rotateY(15deg);
   border-radius: 0px 4px 4px 0px;
   border: 3px solid #000;
   background: #fff;
@@ -182,24 +182,21 @@
 
   span {
     color: #ff5050;
-
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
   }
 
-  &:disabled {
-    border: 2px solid #999;
-  }
-
-  &:disabled,
-  &:disabled span {
+  .disabledText {
     color: #999;
-    cursor: not-allowed;
   }
 }
 
+.disabledButton {
+  border: 2px solid #999;
+}
+
 .stats__like__animate.animateHeart {
   animation: moveUpAndRotate 1s ease-in-out;
 }
@@ -225,7 +222,7 @@
   background: #fff;
   padding: 20px;
   transition: 0.3s;
-  transform: rotateY(-30deg);
+  transform: rotateY(-15deg);
   display: flex;
   flex-direction: column;
   justify-content: space-around;
@@ -595,7 +592,6 @@
     height: 226px;
     flex-shrink: 0;
     border-radius: 15px;
-    border: 2px solid #000;
     background: #fff;
     display: flex;
     justify-content: center;

diff --git a/src/components/detail/LikePokemon.tsx b/src/components/detail/LikePokemon.tsx
@@ -34,7 +34,9 @@ const LikePokemon = ({ pokemonId, isLoading }: LikePokemonProps) => {
   };
 
   const onToggleLike = async () => {
-    if (!user?.uid) return;
+    if (!user?.uid) {
+      return alert('로그인이 필요합니다.');
+    }
     setAnimate(true);
     try {
       const docSnap = await getDocument(`/likes/${user.uid}`);
@@ -76,9 +78,11 @@ const LikePokemon = ({ pokemonId, isLoading }: LikePokemonProps) => {
       }`}
     >
       <button
-        className={styles.stats__like}
+        className={`${styles.stats__like} ${
+          !user ? styles.disabledButton : ''
+        }`}
         onClick={onToggleLike}
-        disabled={isLoading || !user}
+        disabled={isLoading}
       >
         {isLiked ? (
           <FaHeart
@@ -94,7 +98,7 @@ const LikePokemon = ({ pokemonId, isLoading }: LikePokemonProps) => {
             color={isLoading || !user ? '#999' : '#FF5050'}
           />
         )}
-        <span>찜하기</span>
+        <span className={`${!user ? styles.disabledText : ''}`}>찜하기</span>
       </button>
     </div>
   );

diff --git a/src/components/dex/PokemonDex.module.scss b/src/components/dex/PokemonDex.module.scss
@@ -65,3 +65,7 @@
     }
   }
 }
+
+.highlighted {
+  border: 2px solid rgb(250, 19, 2);
+}
diff --git a/src/components/dex/PokemonDexElementLayout.tsx b/src/components/dex/PokemonDexElementLayout.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import styles from './PokemonDex.module.scss';
 import { PokemonType } from '@/lib/type';
 import { motion } from 'framer-motion';
+import { useParams } from 'react-router-dom';
 
 interface PokemonDexElementLayoutProp {
   children: ReactNode;
@@ -16,23 +17,34 @@ const PokemonDexElementLayout = ({
   onClick,
   className,
 }: PokemonDexElementLayoutProp) => {
+  const { id } = useParams();
+
   const number = () => {
     if (data.id < 10) {
-      return '00' + data.id
+      return '00' + data.id;
     } else if (data.id < 100) {
-      return '0' + data.id
+      return '0' + data.id;
     } else {
-      return data.id
+      return data.id;
     }
-  }
+  };
+
+  const getHighlightClass = () => {
+    return data.id.toString() === id ? styles.highlighted : '';
+  };
+
+  console.log(data.id.toString() === id);
+
   return (
     <motion.li
       whileHover={{
         scale: 1.02,
         boxShadow: `rgba(0, 0, 0, 0.10) 0px 3px 20px`,
       }}
       transition={{ duration: 0.2 }}
-      className={`${styles.pokemon_list_element} ${className || ''}`}
+      className={`${styles.pokemon_list_element} ${getHighlightClass()} ${
+        className || ''
+      }`}
       onClick={onClick}
     >
       <div className={styles.pokemon_number}>

diff --git a/src/components/users/SocialLogin.tsx b/src/components/users/SocialLogin.tsx
@@ -81,7 +81,6 @@ const SocialLogin = ({ isOpen, setIsOpen }: SocialLoginProps) => {
       await signOut(auth);
       setUser(null);
       console.log('로그아웃');
-      navigate('/');
     } catch (error) {
       console.error('로그아웃 중 오류 발생:', error);
     }