Merge pull request #137 from softeerbootcamp4th/feat/#132/addAnimation

Feat/#132/add animation
softeerbootcamp4th · Aug 20, 2024 · 8f8dc59 · 8f8dc59
2 parents ee44c56 + b122125
commit 8f8dc59
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 48 deletions.
diff --git a/service/src/constants/newCarIntro/newCarCarouselData.jsx b/service/src/constants/newCarIntro/newCarCarouselData.jsx
@@ -5,11 +5,11 @@ import newCarImage4 from '@/assets/images/newCarImage4.svg';
 import newCarImage5 from '@/assets/images/newCarImage5.svg';
 
 const newCarCarouselData = [
-  { id: 1, imageSrc: newCarImage1 },
-  { id: 2, imageSrc: newCarImage2 },
-  { id: 3, imageSrc: newCarImage3 },
-  { id: 4, imageSrc: newCarImage4 },
-  { id: 5, imageSrc: newCarImage5 },
+  { id: 0, imageSrc: newCarImage1 },
+  { id: 1, imageSrc: newCarImage2 },
+  { id: 2, imageSrc: newCarImage3 },
+  { id: 3, imageSrc: newCarImage4 },
+  { id: 4, imageSrc: newCarImage5 },
 ];
 
 export default newCarCarouselData;
diff --git a/service/src/pages/joinEvent/CarCard.jsx b/service/src/pages/joinEvent/CarCard.jsx
@@ -5,6 +5,7 @@ import BlueButton from '@/components/buttons/BlueButton';
 import questionMark from '@/assets/images/questionMark.svg';
 import { AuthContext } from '@/context/authContext';
 import { useNavigate } from 'react-router-dom';
+import '@/styles/global.css';
 
 function CarCard() {
   const { userInfo } = useContext(AuthContext);
@@ -15,7 +16,7 @@ function CarCard() {
   }, []);
 
   return (
-    <div className="flex flex-col justify-between bg-carCard px-800 pt-700 pb-500 w-[320px] h-[417px] rounded-[30px]">
+    <div className="flex flex-col justify-between hover-scale-ani bg-carCard px-800 pt-700 pb-500 w-[320px] h-[417px] rounded-[30px]">
       <div className="text-detail-2-semibold text-primary-blue h-800">
         Event1
       </div>

diff --git a/service/src/pages/joinEvent/ToolBoxCard.jsx b/service/src/pages/joinEvent/ToolBoxCard.jsx
@@ -16,7 +16,7 @@ function ToolBoxCard() {
   }, []);
 
   return (
-    <div className="flex flex-col justify-between bg-toolBoxCard px-800 pt-700 pb-500 h-[417px] w-[320px] rounded-[30px]">
+    <div className="flex flex-col justify-between hover-scale-ani bg-toolBoxCard px-800 pt-700 pb-500 h-[417px] w-[320px] rounded-[30px]">
       <div className="text-detail-2-semibold text-primary-blue h-800">
         Event2
       </div>

diff --git a/service/src/pages/newCarIntro/NewCarCarousel.jsx b/service/src/pages/newCarIntro/NewCarCarousel.jsx
@@ -8,6 +8,7 @@ import { motion } from 'framer-motion';
 
 function NewCarCarousel() {
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
   const totalItems = 5;
 
   const getSliderClasses = index => {
@@ -16,11 +17,21 @@ function NewCarCarousel() {
   };
 
   const handlePrevButton = () => {
+    if (isButtonDisabled) return;
+    setIsButtonDisabled(true);
     setCurrentIndex(prevIndex => (prevIndex + (totalItems - 1)) % totalItems);
+    setTimeout(() => {
+      setIsButtonDisabled(false);
+    }, 250);
   };
 
   const handleNextButton = () => {
+    if (isButtonDisabled) return;
+    setIsButtonDisabled(true);
     setCurrentIndex(prevIndex => (prevIndex + 1) % totalItems);
+    setTimeout(() => {
+      setIsButtonDisabled(false);
+    }, 250);
   };
 
   const handleIndicatorClick = idx => {
@@ -44,47 +55,53 @@ function NewCarCarousel() {
           </div>
         </div>
       </motion.div>
-      <div className="slider-container">
-        <div className="slider">
+      <motion.div
+        initial="hidden"
+        animate="visible"
+        variants={animationVariants}
+        transition={{ duration: 0.6, ease: 'easeOut', delay: 1.5 }}
+      >
+        <div className="slider-container">
+          <div className="slider">
+            {newCarCarouselData.map((item, idx) => (
+              <div
+                key={item.id}
+                className={`slider-item ${getSliderClasses(idx)} ${currentIndex === idx ? 'active' : ''}`}
+              >
+                <img
+                  src={item.imageSrc}
+                  alt={`Car Image ${item.id}`}
+                  className="object-cover w-full h-full"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex justify-center mt-600">
           {newCarCarouselData.map((item, idx) => (
             <div
               key={item.id}
-              className={`slider-item ${getSliderClasses(idx)}`}
-            >
-              <img
-                src={item.imageSrc}
-                alt={`Car Image ${item.id}`}
-                className="object-cover w-full h-full"
-                onClick={() => setCurrentIndex(item.id - 1)}
-              />
-            </div>
+              className={`indicator-item m-2 ${currentIndex === idx ? 'active' : ''}`}
+              onClick={() => handleIndicatorClick(idx)}
+            ></div>
           ))}
         </div>
-      </div>
-
-      <div className="flex justify-center mt-600">
-        {newCarCarouselData.map((item, idx) => (
-          <div
-            key={item.id}
-            className={`indicator-item m-2 ${currentIndex === idx ? 'active' : ''}`}
-            onClick={() => handleIndicatorClick(idx)}
-          ></div>
-        ))}
-      </div>
-      <div className="flex justify-center mt-600 mb-3000 gap-600">
-        <img
-          src={arrowLeftCircle}
-          alt="Previous Slide"
-          onClick={handlePrevButton}
-          className="hover:cursor-pointer"
-        />
-        <img
-          src={arrowRightCircle}
-          alt="Next Slide"
-          onClick={handleNextButton}
-          className="hover:cursor-pointer"
-        />
-      </div>
+        <div className="flex justify-center mt-600 mb-3000 gap-600">
+          <img
+            src={arrowLeftCircle}
+            alt="Previous Slide"
+            onClick={handlePrevButton}
+            className="hover:cursor-pointer"
+          />
+          <img
+            src={arrowRightCircle}
+            alt="Next Slide"
+            onClick={handleNextButton}
+            className="hover:cursor-pointer"
+          />
+        </div>
+      </motion.div>
     </div>
   );
 }

diff --git a/service/src/pages/worldCup/WorldCupResultTop.jsx b/service/src/pages/worldCup/WorldCupResultTop.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import WorldCupArrowIcon from '@/assets/icons/worldCupArrowIcon.svg';
 import useToast from '@/hooks/useToast';
@@ -7,15 +7,23 @@ import { AuthContext } from '@/context/authContext';
 import AlreadyGetCarModal from '@/components/modal/AlreadyGetCarModal';
 import GetItemModal from '@/components/modal/GetItemModal';
 import PhoneInputModal from '@/components/modal/PhoneInputModal';
+import '@/styles/worldCupArrowAnimation.css';
 
 function WorldCupResultTop({ data }) {
   const { showToast, messageType, handleShareClick } = useToast();
-  const { userInfo, setUserInfo } = useContext(AuthContext);
+  const { userInfo } = useContext(AuthContext);
   const [resultModalOpen, setResultModalOpen] = useState('');
   const [openPhoneInputModal, setOpenPhoneInputModal] = useState(false);
+  const [animate, setAnimate] = useState(false);
+
+  useEffect(() => {
+    setAnimate(true);
+  }, []);
+
   const closeModal = () => {
     setResultModalOpen('');
   };
+
   const closePhoneModal = () => {
     setOpenPhoneInputModal(false);
   };
@@ -37,7 +45,7 @@ function WorldCupResultTop({ data }) {
       <img
         src={WorldCupArrowIcon}
         alt="worldCupArrowIcon"
-        className="absolute top-[50%]"
+        className={`${animate ? 'arrow-animation' : ''} absolute top-[45%]`}
       />
       <div className="px-[58px] py-[5px] bg-primary-babyblue rounded-md flex justify-center items-center text-detail-1-bold text-primary-blue mb-300">
         우승

diff --git a/service/src/styles/newCarCarousel.css b/service/src/styles/newCarCarousel.css
@@ -12,7 +12,6 @@
 }
 
 .slider-item {
-  cursor: pointer;
   width: 1200px;
   height: 500px;
   position: absolute;
@@ -21,14 +20,18 @@
     z-index 0s 0.2s;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
 }
 
 .s1 {
   transform: translate(-50%, -50%) translateX(0) translateZ(0);
   z-index: 4;
 }
 
+.s1:hover {
+  transition: transform 0.2s;
+  transform: translate(-50%, -50%) translateX(0) translateZ(0) scale(1.05);
+}
+
 .s2 {
   transform: translate(-50%, -50%) translateX(330px) translateZ(-100px);
   z-index: 3;

diff --git a/service/src/styles/worldCupArrowAnimation.css b/service/src/styles/worldCupArrowAnimation.css
@@ -0,0 +1,23 @@
+.arrow-animation {
+  animation-name: tilting;
+  animation-duration: 1s;
+  animation-iteration-count: 1;
+}
+
+@keyframes tilting {
+  0% {
+    transform: scale(1.05) skewY(10deg);
+  }
+  25% {
+    transform: scale(1.04) skewY(-10deg);
+  }
+  50% {
+    transform: scale(1.03) skewY(10deg);
+  }
+  75% {
+    transform: scale(1.02) skewY(-10deg);
+  }
+  100% {
+    transform: scale(1.01) skewY(0deg);
+  }
+}