Merge pull request #142 from softeerbootcamp4th/feat/#140/slowAnimation

Feat/#140/slowAnimation
softeerbootcamp4th · Aug 20, 2024 · 5414ba5 · 5414ba5
2 parents 8f8dc59 + b614f4d
commit 5414ba5
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 119 deletions.
diff --git a/service/src/api/comment/index.jsx b/service/src/api/comment/index.jsx
@@ -20,28 +20,9 @@ const getShortenLink = () => {
   return get(`/shorten-url`);
 };
 
-const getRedirectLink = async commentId => {
-  console.log('dddd');
-  const accessToken = localStorage.getItem('userInfo');
-
+const getRedirectLink = commentId => {
   try {
-    const response = await fetch(
-      `${import.meta.env.VITE_API_URL}/redirect/${commentId}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          ...(accessToken && {
-            Authorization: `Bearer ${accessToken}`,
-          }),
-        },
-        credentials: 'include',
-      },
-    );
-    console.log('ddd');
-    // 응답의 헤더에서 Location 값을 추출
-    const redirectUrl = response.headers.get('Location');
-    return redirectUrl;
+    return get(`/redirect/${commentId}`);
   } catch (error) {
     console.error('API 호출 실패: ', error);
     throw error;

diff --git a/service/src/pages/eventIntro/EventIntro.jsx b/service/src/pages/eventIntro/EventIntro.jsx
@@ -10,13 +10,17 @@ function EventIntro() {
     <div>
       <EventIntroMain />
       <div className="bg-gradient-lightblue-white-vertical mt-[1px]">
+        <EventIntroNav />
         <motion.div
           initial="hidden"
           animate="visible"
           variants={animationVariants}
-          transition={{ duration: 0.6, ease: 'easeOut', delay: 0.5 }}
+          transition={{
+            duration: 0.6,
+            ease: 'easeOut',
+            delay: 0.1,
+          }}
         >
-          <EventIntroNav />
           <EventIntroRewards />
         </motion.div>
       </div>

diff --git a/service/src/pages/eventIntro/EventIntroNav.jsx b/service/src/pages/eventIntro/EventIntroNav.jsx
@@ -2,22 +2,36 @@ import React from 'react';
 import EventIntroNavItem from '@/pages/eventIntro/EventIntroNavItem';
 import EventIntroNavData from '@/constants/eventIntro/EventIntroNavData';
 import { useNavigate } from 'react-router-dom';
+import { animationVariants } from '@/styles/FramerMotion';
+import { motion } from 'framer-motion';
 
 function EventIntroNav() {
   const navigate = useNavigate();
 
   const handleNavigation = section => {
     navigate(`/event`, { state: { scrollTo: section } });
   };
+
   return (
     <div className="flex justify-center pd-2500 gap-1000">
-      {EventIntroNavData.map(item => (
+      {EventIntroNavData.map((item, index) => (
         <div
           key={item.id}
           className="nav-item"
           onClick={() => handleNavigation(item.section)}
         >
-          <EventIntroNavItem item={item} key={item.id} />
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            variants={animationVariants}
+            transition={{
+              duration: 0.6,
+              ease: 'easeOut',
+              delay: 0.5 + (index * 2) / 10,
+            }}
+          >
+            <EventIntroNavItem item={item} />
+          </motion.div>
         </div>
       ))}
     </div>

diff --git a/service/src/pages/eventIntro/EventIntroRewards.jsx b/service/src/pages/eventIntro/EventIntroRewards.jsx
@@ -8,7 +8,6 @@ function EventIntroRewards() {
     const fetchInfo = async () => {
       try {
         const data = await getPrizeInfo();
-        console.log(data);
         if (Array.isArray(data)) {
           setInfo(data);
         } else {
@@ -22,7 +21,7 @@ function EventIntroRewards() {
     };
     fetchInfo();
   }, []);
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <div className="h-[1258px]">Loading...</div>;
   if (error) return <div>Error: {error}</div>;
   return (
     <div className="pt-2500 pb-4000 px-4000">

diff --git a/service/src/pages/joinEvent/commentList/EachComment.jsx b/service/src/pages/joinEvent/commentList/EachComment.jsx
@@ -24,10 +24,7 @@ function EachComment({ comment, indexOfFirstPost, option }) {
     setOpenPhoneInputModal(false);
   };
 
-  const handleHeart = async e => {
-    e.stopPropagation();
-    e.preventDefault();
-
+  const handleHeart = async () => {
     if (userInfo.phoneNumber === undefined) {
       const phoneVerified = await showPhoneInputModal();
       if (!phoneVerified) {
@@ -63,22 +60,15 @@ function EachComment({ comment, indexOfFirstPost, option }) {
 
   const registerTime = timeFormatting(comment.postTime);
 
-  const handleCommentClick = e => {
-    navigate(`/event/comments/commentId/${comment.id}`);
-  };
-
   return (
     <>
-      <div
-        className="flex items-center w-full py-6 cursor-pointer pl-1700 pr-2000 mb-500 bg-neutral-white rounded-xl"
-        onClick={handleCommentClick}
-      >
+      <div className="flex items-center w-full py-6 pl-1700 pr-2000 mb-500 bg-neutral-white rounded-xl">
         {option === 'like' ? (
-          <div className="flex items-center justify-center w-16 h-10 rounded-full bg-primary-blue text-detail-3-semibold text-neutral-white mr-1000">
+          <div className="flex items-center justify-center w-20 h-10 rounded-full bg-primary-blue text-detail-3-semibold text-neutral-white mr-1000">
             {indexOfFirstPost + 1}등
           </div>
         ) : (
-          <div className="flex items-center justify-center w-16 h-10 text-detail-3-semibold text-primary-blue mr-1000">
+          <div className="flex items-center justify-center w-20 h-10 text-detail-3-semibold text-primary-blue mr-1000">
             {registerTime}
           </div>
         )}
@@ -89,10 +79,7 @@ function EachComment({ comment, indexOfFirstPost, option }) {
         <p className="text-detail-2-regular text-neutral-950 overflow-hidden whitespace-nowrap text-ellipsis w-[1000px]">
           {comment.content}
         </p>
-        <div
-          className="flex items-center w-[100px] h-[50px] z-100"
-          onClick={handleHeart} // Handle heart click
-        >
+        <div className="flex items-center">
           <div className="text-detail-2-regular text-neutral-500">
             {likeCount}
           </div>
@@ -101,6 +88,7 @@ function EachComment({ comment, indexOfFirstPost, option }) {
             alt={isLiked ? 'FullHeart' : 'Heart'}
             key={comment.id}
             className="mt-0.5 ml-100"
+            onClick={handleHeart}
           />
         </div>
       </div>

diff --git a/service/src/pages/joinEvent/commentList/Redirect.jsx b/service/src/pages/joinEvent/commentList/Redirect.jsx
@@ -5,11 +5,10 @@ import { useParams, useNavigate } from 'react-router-dom';
 function Redirect() {
   const navigate = useNavigate();
   const { commentId } = useParams();
-  console.log(commentId);
   const getLink = async () => {
     const response = await getRedirectLink(commentId);
-    console.log(response);
-    navigate(response);
+    console.log(response.originalUrl);
+    navigate(response.originalUrl);
   };
 
   useEffect(() => {

diff --git a/service/src/pages/worldCup/WorldCupGame.jsx b/service/src/pages/worldCup/WorldCupGame.jsx
@@ -4,11 +4,13 @@ import WorldCupTitle from './WorldCupTitle';
 import PropTypes from 'prop-types';
 import ExitModal from '@/components/modal/ExitModal';
 import useBeforeUnload from '@/hooks/useBeforeUnload';
+import { motion } from 'framer-motion';
 
 function WorldCupGame({ title = '8강', onSelect, roundData }) {
   const [currentState, setCurrentState] = useState(0);
   const [animationClass, setAnimationClass] = useState('');
   const [openExitModal, setOpenExitModal] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
 
   useBeforeUnload();
 
@@ -33,22 +35,28 @@ function WorldCupGame({ title = '8강', onSelect, roundData }) {
   };
 
   const handleCurrentState = isChosen => {
-    if (animationClass) return;
+    if (isAnimating) return;
     setCurrentState(isChosen ? -1 : 1);
   };
 
   const handleMouseLeave = () => setCurrentState(0);
 
   const handleAnimation = isChosen => {
+    if (isAnimating) return;
+
+    setIsAnimating(true);
     setCurrentState(0);
+
     if (isChosen) {
       setAnimationClass('animate-slide-left-to-right');
     } else {
       setAnimationClass('animate-slide-right-to-left');
     }
+
     setTimeout(() => {
       setAnimationClass('');
       onSelect(isChosen);
+      setIsAnimating(false);
     }, 1500);
   };
 
@@ -99,45 +107,59 @@ function WorldCupGame({ title = '8강', onSelect, roundData }) {
       ) : null}
       <div className="flex h-screen">
         <div className={getContainerClass(true)}>
-          <div
-            className={`w-[455px] h-[435px] rounded-[35px] z-[50] flex items-start pt-2 mb-1000 justify-center ${currentState === -1 ? 'bg-gradient-blue-purple' : 'bg-transparent'}`}
+          <motion.div
+            key={roundData[0].id + title}
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.5 }}
           >
-            <img
-              src={getLeftImageSrc()}
-              alt={roundData[0].story}
-              key={roundData[0].id}
-              onMouseEnter={() => handleCurrentState(true)}
-              onMouseLeave={handleMouseLeave}
-              onClick={() => handleAnimation(true)}
-              className={`z-[100] w-[440px] h-[490px] ${animationClass === 'animate-slide-right-to-left' ? 'hidden' : null}`}
-            />
-          </div>
-
-          <p
-            className={`text-detail-2-semibold ${getTextLeftStyle()} ${animationClass === 'animate-slide-right-to-left' ? 'hidden' : null}`}
-          >
-            {roundData[0].story}
-          </p>
+            <div
+              className={`w-[455px] h-[435px] cursor-pointer rounded-[35px] z-[50] flex items-start pt-2 mb-1000 justify-center ${currentState === -1 ? 'bg-gradient-blue-purple' : 'bg-transparent'}`}
+            >
+              <img
+                src={getLeftImageSrc()}
+                alt={roundData[0].story}
+                key={roundData[0].id}
+                onMouseEnter={() => handleCurrentState(true)}
+                onMouseLeave={handleMouseLeave}
+                onClick={() => handleAnimation(true)}
+                className={`z-[100] w-[440px] h-[490px] ${animationClass === 'animate-slide-right-to-left' ? 'hidden' : null}`}
+              />
+            </div>
+
+            <p
+              className={`text-center text-detail-2-semibold ${getTextLeftStyle()} ${animationClass === 'animate-slide-right-to-left' ? 'hidden' : null}`}
+            >
+              {roundData[0].story}
+            </p>
+          </motion.div>
         </div>
         <div className={getContainerClass(false)}>
-          <div
-            className={`w-[455px] h-[435px] rounded-[35px] z-[50] flex items-start pt-2 mb-1000 justify-center ${currentState === 1 ? 'bg-gradient-blue-purple' : 'bg-transparent'}`}
-          >
-            <img
-              src={getRightImageSrc()}
-              alt={roundData[1].story}
-              key={roundData[1].id}
-              onMouseEnter={() => handleCurrentState(false)}
-              onMouseLeave={handleMouseLeave}
-              onClick={() => handleAnimation(false)}
-              className={`z-[100] w-[440px] h-[490px] ${animationClass === 'animate-slide-left-to-right' ? 'hidden' : null}`}
-            />
-          </div>
-          <p
-            className={`text-detail-2-semibold ${getTextRightStyle()} ${animationClass === 'animate-slide-left-to-right' ? 'hidden' : null}`}
+          <motion.div
+            key={roundData[1].id + title}
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.5 }}
           >
-            {roundData[1].story}
-          </p>
+            <div
+              className={`w-[455px] h-[435px] cursor-pointer rounded-[35px] z-[50] flex items-start pt-2 mb-1000 justify-center ${currentState === 1 ? 'bg-gradient-blue-purple' : 'bg-transparent'}`}
+            >
+              <img
+                src={getRightImageSrc()}
+                alt={roundData[1].story}
+                key={roundData[1].id}
+                onMouseEnter={() => handleCurrentState(false)}
+                onMouseLeave={handleMouseLeave}
+                onClick={() => handleAnimation(false)}
+                className={`z-[100] w-[440px] h-[490px] ${animationClass === 'animate-slide-left-to-right' ? 'hidden' : null}`}
+              />
+            </div>
+            <p
+              className={`text-center text-detail-2-semibold ${getTextRightStyle()} ${animationClass === 'animate-slide-left-to-right' ? 'hidden' : null}`}
+            >
+              {roundData[1].story}
+            </p>
+          </motion.div>
         </div>
       </div>
       {openExitModal && <ExitModal onClose={onClose} game="worldCup" />}

diff --git a/service/src/pages/worldCup/WorldCupMain.jsx b/service/src/pages/worldCup/WorldCupMain.jsx
@@ -36,6 +36,7 @@ const WorldCupMain = () => {
       setRound(5); // 결승 진행
     } else if (round === 5) {
       try {
+        setRound(6);
         const response = await postWorldCupResult(updatedData[0].id);
         navigate(`/event/worldCupResult`, { state: updatedData[0] });
       } catch (error) {