feat: Activity Social Page

KMU-WINK · Sep 19, 2024 · d20c901 · d20c901
1 parent 4a11f3f
commit d20c901
Showing 1 changed file with 109 additions and 6 deletions.
diff --git a/src/app/activity/social/page.tsx b/src/app/activity/social/page.tsx
@@ -1,16 +1,28 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 
 import Image from 'next/image';
 
 import { SocialType, WinkApi } from '@/api';
 
+import AOS from 'aos';
+import { motion } from 'framer-motion';
+
+type ChangeIndex = 'next' | 'prev';
+
 const ActivitySocialPage = () => {
   const [socials, setSocials] = useState<SocialType[]>([]);
   const [expanded, setExpanded] = useState<SocialType | null>(null);
+  const [index, setIndex] = useState<number>(0);
+  const [changeIndex, setChangeIndex] = useState<ChangeIndex>('next');
 
   useEffect(() => {
+    AOS.init({
+      once: true,
+    });
+
     (async () => {
       await fetchSocials();
     })();
@@ -21,11 +33,9 @@ const ActivitySocialPage = () => {
     setSocials(socials.slice(0, 6));
   }
 
-  console.log(socials);
-
   return (
     <>
-      <div className="relative flex flex-col items-center bg-wink-100 mt-32">
+      <div className="relative flex flex-col items-center bg-wink-100 mt-32 overflow-hidden">
         <div className="absolute bottom-[15vh] left-1/2 w-[300vw] h-[300vw] bg-white rounded-[45%] animate-rotate"></div>
         <div className="absolute bottom-[12vh] left-1/2 w-[300vw] h-[300vw] bg-white rounded-[47%] opacity-50 animate-rotate"></div>
 
@@ -42,7 +52,11 @@ const ActivitySocialPage = () => {
                 className={`relative cursor-pointer transition-all duration-300 ease-in-out h-72 ${
                   expanded === social ? 'w-72' : 'w-20'
                 }`}
-                onClick={() => setExpanded(expanded === social ? null : social)}
+                onClick={() => {
+                  setExpanded(expanded === social ? null : social);
+                  setIndex(0);
+                  setChangeIndex('next');
+                }}
               >
                 <Image
                   src={social.contents[0].image}
@@ -63,8 +77,97 @@ const ActivitySocialPage = () => {
           {expanded && <p className="mt-10 text-3xl font-semibold text-center">{expanded.title}</p>}
         </div>
       </div>
-      <div className="flex bg-wink-100 justify-center">
-        {expanded && <p dangerouslySetInnerHTML={{ __html: expanded.contents[0].content }} />}
+      <div className="flex flex-col bg-wink-100 justify-center">
+        {expanded && (
+          <>
+            <div className="relative flex justify-center w-full mt-24">
+              {index > 0 && (
+                <div className="absolute left-2 flex items-center justify-center w-1/5 h-full opacity-75">
+                  <motion.div
+                    key={`prev-${index}`}
+                    initial={{ x: changeIndex === 'next' ? 200 : -200 }}
+                    animate={{ x: 0 }}
+                    exit={{ x: changeIndex === 'next' ? -200 : 200 }}
+                    transition={{ duration: 0.5 }}
+                  >
+                    <Image
+                      src={expanded.contents[index - 1].image}
+                      alt="previous"
+                      width={800}
+                      height={450}
+                      className="object-cover rounded-3xl"
+                    />
+                  </motion.div>
+                </div>
+              )}
+              {index + 1 < expanded.contents.length && (
+                <div className="absolute right-2 flex items-center justify-center w-1/5 h-full opacity-75">
+                  <motion.div
+                    key={`next-${index}`}
+                    initial={{ x: changeIndex === 'next' ? 200 : -200 }}
+                    animate={{ x: 0 }}
+                    exit={{ x: changeIndex === 'next' ? -200 : 200 }}
+                    transition={{ duration: 0.5 }}
+                  >
+                    <Image
+                      src={expanded.contents[index + 1].image}
+                      alt="next"
+                      width={800}
+                      height={450}
+                      className="object-cover rounded-3xl"
+                    />
+                  </motion.div>
+                </div>
+              )}
+              <div className="flex w-full gap-2 justify-center items-center">
+                {index > 0 ? (
+                  <FaAngleLeft
+                    size={32}
+                    className="w-8 h-8 cursor-pointer"
+                    onClick={() => {
+                      setIndex(index - 1);
+                      setChangeIndex('prev');
+                    }}
+                  />
+                ) : (
+                  <div className="w-8 h-8" />
+                )}
+                <motion.div
+                  key={`current-${index}`}
+                  initial={{ x: changeIndex === 'next' ? 20 : -20 }}
+                  animate={{ x: 0 }}
+                  exit={{ x: changeIndex === 'next' ? -200 : 200 }}
+                  transition={{ duration: 0.5 }}
+                  className="w-1/2"
+                >
+                  <Image
+                    src={expanded.contents[index].image}
+                    alt="current"
+                    width={800}
+                    height={450}
+                    className="w-full object-cover rounded-3xl"
+                  />
+                </motion.div>
+                {index + 1 < expanded.contents.length ? (
+                  <FaAngleRight
+                    size={32}
+                    className="w-8 h-8 cursor-pointer"
+                    onClick={() => {
+                      setIndex(index + 1);
+                      setChangeIndex('next');
+                    }}
+                  />
+                ) : (
+                  <div className="w-8 h-8" />
+                )}
+              </div>
+            </div>
+            <p
+              className="self-center mt-4 text-xl"
+              dangerouslySetInnerHTML={{ __html: expanded.contents[0].content }}
+            />
+          </>
+        )}
       </div>
       <div className="bg-gradient-to-b from-wink-100 to-white h-32 md:h-64" />
     </>