feat: Soial Page 중간 저장

KMU-WINK · Sep 19, 2024 · ad04be1 · ad04be1
1 parent 4e8e86b
commit ad04be1
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 6 deletions.
diff --git a/src/app/about-us/we/page.tsx b/src/app/about-us/we/page.tsx
@@ -76,11 +76,22 @@ const AboutUsWePage = () => {
             </div>
           </div>
 
-          <div data-aos="fade-bottom" data-aos-easing="ease-out" data-aos-duration="700">
+          <div
+            id="aos-anchor"
+            data-aos="fade-bottom"
+            data-aos-easing="ease-out"
+            data-aos-duration="700"
+          >
             <h1 className="font-medium text-2xl md:text-4xl pt-14">
               우리는 어떤 길을 <br /> 걸어왔을까요?{' '}
             </h1>
-            <div data-aos="fade-right" data-aos-easing="ease-out" data-aos-duration="700">
+            <div
+              data-aos="fade-right"
+              data-aos-easing="ease-out"
+              data-aos-duration="700"
+              data-aos-delay="500"
+              data-aos-anchor="#aos-anchor"
+            >
               <ActivityCard
                 image={AboutUsImage4}
                 title="윙커톤"
@@ -89,7 +100,13 @@ const AboutUsWePage = () => {
                 isImageRight={false}
               />
             </div>
-            <div data-aos="fade-left" data-aos-easing="ease-out" data-aos-duration="700">
+            <div
+              data-aos="fade-left"
+              data-aos-easing="ease-out"
+              data-aos-duration="700"
+              data-aos-delay="500"
+              data-aos-anchor="#aos-anchor"
+            >
               <ActivityCard
                 image={AboutUsImage4}
                 title="윙커톤"
@@ -98,7 +115,13 @@ const AboutUsWePage = () => {
                 isImageRight={true}
               />
             </div>
-            <div data-aos="fade-right" data-aos-easing="ease-out" data-aos-duration="700">
+            <div
+              data-aos="fade-right"
+              data-aos-easing="ease-out"
+              data-aos-duration="700"
+              data-aos-delay="500"
+              data-aos-anchor="#aos-anchor"
+            >
               <ActivityCard
                 image={AboutUsImage4}
                 title="윙커톤"
@@ -107,7 +130,13 @@ const AboutUsWePage = () => {
                 isImageRight={false}
               />
             </div>
-            <div data-aos="fade-left" data-aos-easing="ease-out" data-aos-duration="700">
+            <div
+              data-aos="fade-left"
+              data-aos-easing="ease-out"
+              data-aos-duration="700"
+              data-aos-delay="500"
+              data-aos-anchor="#aos-anchor"
+            >
               <ActivityCard
                 image={AboutUsImage4}
                 title="윙커톤"

diff --git a/src/app/activity/social/page.tsx b/src/app/activity/social/page.tsx
@@ -1,5 +1,74 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import Image from 'next/image';
+
+import { SocialType, WinkApi } from '@/api';
+
 const ActivitySocialPage = () => {
-  return <></>;
+  const [socials, setSocials] = useState<SocialType[]>([]);
+  const [expanded, setExpanded] = useState<SocialType | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      await fetchSocials();
+    })();
+  }, []);
+
+  async function fetchSocials() {
+    const { socials } = await WinkApi.Activity.Social.getSocials({ page: 1 });
+    setSocials(socials.slice(0, 6));
+  }
+
+  console.log(socials);
+
+  return (
+    <>
+      <div className="relative flex flex-col items-center bg-wink-100 mt-32">
+        <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>
+
+        <div className="z-10">
+          <h1 className="font-bold text-4xl text-center mb-6">WINK, 우리들의 파도</h1>
+          <p className="font-normal text-xl text-center text-zinc-700">
+            행사 / 세미나 / 대회 활동 기록을 년도 별로 볼 수 있습니다.
+          </p>
+
+          <div className="flex space-x-3 mt-10">
+            {socials.map((social) => (
+              <div
+                key={social._id}
+                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)}
+              >
+                <Image
+                  src={social.contents[0].image}
+                  alt={'Image'}
+                  layout="fill"
+                  objectFit="cover"
+                  className="rounded-3xl"
+                />
+                <div
+                  className={`absolute inset-0 transition-colors duration-300 rounded-3xl ${
+                    expanded !== social ? 'bg-black/50' : 'bg-transparent'
+                  }`}
+                ></div>
+              </div>
+            ))}
+          </div>
+
+          {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>
+      <div className="bg-gradient-to-b from-wink-100 to-white h-32 md:h-64" />
+    </>
+  );
 };
 
 export default ActivitySocialPage;