✨feat: motion 추기

코드 깔끔하게 수정해야함.
GDSC-DGU · May 2, 2024 · db47def · db47def
1 parent a9c5760
commit db47def
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 52 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "clsx": "^2.1.0",
+        "framer-motion": "^11.1.7",
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18.2.0",

diff --git a/src/components/member/generation/GenerationPage.tsx b/src/components/member/generation/GenerationPage.tsx
@@ -1,48 +1,61 @@
 'use client';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import TimeLine from '@/components/member/timeline/TimeLine';
 import LeadIntro from '@/components/member/introduce/LeadIntro';
 import MemberIntro from '@/components/member/introduce/MemberIntro';
-import TimeLine from '@/components/member/timeline/TimeLine';
-import { useState } from 'react';
 import RecruitHeader from '@/components/recruit/header/RecruitHeader';
 
 const GenerationPage = () => {
   const [selectedTimelineIndex, setSelectedTimelineIndex] = useState(1);
 
+  // 애니메이션 variants
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  };
+
   return (
     <div className="w-full flex-col justify-center mt-[5rem] mb-[5rem]">
-      {/* -----------------------------------------------*/}
-      {/* -------------------- 타임라인 --------------------*/}
-      {/* -----------------------------------------------*/}
-      <TimeLine onSelectIndex={setSelectedTimelineIndex} />
+      <motion.div
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.3 }}
+        variants={itemVariants}
+      >
+        <TimeLine onSelectIndex={setSelectedTimelineIndex} />
+      </motion.div>
 
       {selectedTimelineIndex === 2 ? (
-        <div>
-          {/* -----------------------------------------------*/}
-          {/* -------------------- 모집 페이지 --------------------*/}
-          {/* -----------------------------------------------*/}
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.3 }}
+          variants={itemVariants}
+        >
           <RecruitHeader />
-        </div>
+        </motion.div>
       ) : (
         <div>
-          {/* -----------------------------------------------*/}
-          {/* -------------------- 리드 소개 --------------------*/}
-          {/* -----------------------------------------------*/}
-          <LeadIntro />
-          {/* -----------------------------------------------*/}
-          {/* -------------------- DevRel --------------------*/}
-          {/* -----------------------------------------------*/}
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.3 }}
+            variants={itemVariants}
+          >
+            <LeadIntro />
+          </motion.div>
+
           <MemberIntro title="DevRel" />
-          {/* -----------------------------------------------*/}
-          {/* -------------------- Web/App --------------------*/}
-          {/* -----------------------------------------------*/}
+
           <MemberIntro title="Web/App" />
-          {/* -----------------------------------------------*/}
-          {/* -------------------- Server/Cloud --------------------*/}
-          {/* -----------------------------------------------*/}
+
           <MemberIntro title="Server/Cloud" />
-          {/* -----------------------------------------------*/}
-          {/* -------------------- Al/ML --------------------*/}
-          {/* -----------------------------------------------*/}
+
           <MemberIntro title="AI/ML" />
         </div>
       )}

diff --git a/src/components/member/header/MemberHeader.tsx b/src/components/member/header/MemberHeader.tsx
@@ -1,6 +1,8 @@
+'use client';
 import BannerHead from 'public/images/member_header.png';
 import BannerPng from 'public/images/member_banner_up.png';
 import Image from 'next/image';
+import { motion } from 'framer-motion';
 
 /**
  * @description
@@ -16,7 +18,13 @@ import Image from 'next/image';
 const MemberHeader = () => {
   return (
     <div>
-      <div className="w-full flex justify-center mt-[5rem] mb-[5rem]">
+      <motion.div
+        className="w-full flex justify-center mt-[5rem] mb-[5rem]"
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        transition={{ duration: 1 }}
+        viewport={{ once: true, amount: 0.2 }}
+      >
         <div style={{ maxWidth: '701px', width: '100%' }}>
           <Image
             src={BannerHead}
@@ -27,8 +35,14 @@ const MemberHeader = () => {
             layout="responsive"
           />
         </div>
-      </div>
-      <div className="w-full flex justify-center">
+      </motion.div>
+      <motion.div
+        className="w-full flex justify-center"
+        initial={{ y: 30, opacity: 0 }}
+        whileInView={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.5 }}
+        viewport={{ once: true, amount: 0.2 }}
+      >
         <div style={{ width: '100%' }}>
           <Image
             src={BannerPng}
@@ -38,7 +52,7 @@ const MemberHeader = () => {
             height={630}
           />
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 };

diff --git a/src/components/member/introduce/MemberIntro.tsx b/src/components/member/introduce/MemberIntro.tsx
@@ -1,8 +1,10 @@
+'user client';
 import ProfileBox from '@/components/member/profilebox/ProfileBox';
 import { DEVREL_MEMBERS } from '@/constants/member/devRel';
 import { WEBAPP_MEMBERS } from '@/constants/member/webApp';
 import { AIML_MEMBERS } from '@/constants/member/AIML';
 import { SERVER_MEMBERS } from '@/constants/member/serverCloud';
+import { motion } from 'framer-motion';
 
 /**
  * @description
@@ -13,6 +15,7 @@ import { SERVER_MEMBERS } from '@/constants/member/serverCloud';
  * @returns {JSX.Element} 각 팀 멤버의 프로필을 나타내는 ProfileBox 컴포넌트가 포함된 시각적 인터페이스
  * @since 2024.04.18
  */
+
 const MemberIntro = ({ title }: { title: string }) => {
   interface Member {
     id: number;
@@ -30,6 +33,16 @@ const MemberIntro = ({ title }: { title: string }) => {
   else if (title === 'AI/ML') memberType = AIML_MEMBERS;
   else if (title === 'DevRel') memberType = DEVREL_MEMBERS;
 
+  // 애니메이션 variants
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  };
+
   return (
     <div>
       <div className="w-full flex-col flex-end">
@@ -41,31 +54,31 @@ const MemberIntro = ({ title }: { title: string }) => {
         <div className="w-full flex justify-start overflow-hidden">
           <div className="h-full flex flex-wrap justify-start items-start w-full">
             {memberType &&
-              memberType.map((member, index, array) => {
-                // 조건을 사용하여 줄의 마지막 박스에 패딩을 제거
-                const isLastItemInRowBigTablet = (index + 1) % 2 === 0;
-                const isLastItemInRowMainDesktop = (index + 1) % 3 === 0;
-                return (
-                  <div
-                    key={member.id}
-                    className={`w-full bigTablet:w-1/2 mainDesktop:w-1/3 flex pt-[2rem] justify-center items-start ${
-                      isLastItemInRowBigTablet
-                        ? 'bigTablet:pr-0 bigTablet:pt-[2rem]'
-                        : 'bigTablet:pr-[2rem] bigTablet:pt-[2rem]'
-                    } ${
-                      isLastItemInRowMainDesktop
-                        ? 'mainDesktop:pr-0 mainDesktop:pt-[2rem]'
-                        : 'mainDesktop:pr-[2rem] mainDesktop:pt-[2rem]'
-                    } overflow-hidden`} // items-start 추가
-                  >
-                    <ProfileBox member={member} />
-                  </div>
-                );
-              })}
+              memberType.map((member, index) => (
+                <motion.div
+                  key={member.id}
+                  initial="hidden"
+                  whileInView="visible"
+                  viewport={{ once: true, amount: 0.3 }}
+                  variants={itemVariants}
+                  className={`w-full bigTablet:w-1/2 mainDesktop:w-1/3 flex pt-[2rem] justify-center items-start ${
+                    (index + 1) % 2 === 0
+                      ? 'bigTablet:pr-0 bigTablet:pt-[2rem]'
+                      : 'bigTablet:pr-[2rem] bigTablet:pt-[2rem]'
+                  } ${
+                    (index + 1) % 3 === 0
+                      ? 'mainDesktop:pr-0 mainDesktop:pt-[2rem]'
+                      : 'mainDesktop:pr-[2rem] mainDesktop:pt-[2rem]'
+                  } overflow-hidden`}
+                >
+                  <ProfileBox member={member} />
+                </motion.div>
+              ))}
           </div>
         </div>
       </div>
     </div>
   );
 };
+
 export default MemberIntro;