✨Feat - 세미나 디테일 페이지 모션 적용 #43

GDSC-DGU · May 4, 2024 · cf6cfcb · cf6cfcb
1 parent fbe6d28
commit cf6cfcb
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 30 deletions.
diff --git a/src/components/seminar/seminarDetail/banner/SeminarDetailBanner.tsx b/src/components/seminar/seminarDetail/banner/SeminarDetailBanner.tsx
@@ -2,6 +2,9 @@ import React from 'react';
 import Image from 'next/image';
 import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
 import TranslateImg from '@/svg/seminar/translate_img.png';
+import { motion } from 'framer-motion';
+import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
+import SeminarDetailBannerInform from './SeminarDetailBannerInform';
 
 
 /**
@@ -20,6 +23,14 @@ const SeminarDetailBanner = ({ data }: { data: SeminarThumnail }) => {
     <div className="w-full mt-8 pb-6 flex desktop:flex-row tablet:flex-col flex-col flex-col gap-8">
       {/* 왼쪽 컨텐츠 */}
       <div className="desktop:min-w-[544px] tablet:w-full w-full aspect-w-16 aspect-h-9">
+      <motion.section
+    initial={{ y: 20, opacity: 0 }}
+    whileInView={{ y: 0, opacity: 1 }}
+    transition={{ duration: 0.5, delay: 0 }}
+    viewport={{ once: true, amount: 0.9 }}
+    variants={seminarCardVariants}
+    style={{ transformOrigin: '10% 60%' }}
+  >
         <Image
           src={data.seminar_image_url}
           alt={`${data.presenter_name}'s_seminarimage`}
@@ -28,6 +39,7 @@ const SeminarDetailBanner = ({ data }: { data: SeminarThumnail }) => {
           quality={100}
           priority
         />
+         </motion.section>
       </div>
     {/* 오른쪽 컨텐츠 */}
     <div className="flex desktop:items-end desktop:mt-0 tablet-mt-0 mt-8">
@@ -42,30 +54,9 @@ const SeminarDetailBanner = ({ data }: { data: SeminarThumnail }) => {
           priority
         />
         </div>
-        <div>
-        <p className="H6 font-medium">
-            Date
-        </p>
-        <p className="B1 font-normal">
-            {data.date}
-        </p>
-        </div>
-        <div>
-        <p className="H6 font-medium">
-            Location
-        </p>
-        <p className="B1 font-normal">
-            {data.location}
-        </p>
-        </div>
-        <div>
-        <p className="H6 font-medium">
-            Speaker
-        </p>
-        <div className="B1 font-medium flex gap-2">
-            {data.presenter_name} <p className="B1 font-normal text-mono_200">{data.presenter_role}</p>
-        </div>
-        </div>
+        <SeminarDetailBannerInform type='Date' data={data.date} speaker_data=''/>
+        <SeminarDetailBannerInform type='Location' data={data.location} speaker_data=''/>
+        <SeminarDetailBannerInform type='Speaker' data={data.presenter_name} speaker_data={data.presenter_role}/>
     </div>
     </div>
   </div>

diff --git a/src/components/seminar/seminarDetail/banner/SeminarDetailBannerInform.tsx b/src/components/seminar/seminarDetail/banner/SeminarDetailBannerInform.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
+import { motion } from 'framer-motion';
+import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
+
+const SeminarDetailBannerInform = ({ type, data, speaker_data }: { type: string, data: string, speaker_data: string }) => {
+  return (
+        <motion.section
+    initial={{ y: 20, opacity: 0 }}
+    whileInView={{ y: 0, opacity: 1 }}
+    transition={{ duration: 0.5, delay: 0 }}
+    viewport={{ once: true, amount: 0.9 }}
+    variants={seminarCardVariants}
+    style={{ transformOrigin: '10% 60%' }}
+  >
+    {data === 'Speaker' ? (
+       <div>
+       <p className="H6 font-medium pointer-events-none">
+           {type}
+       </p>
+       <div className="B1 font-medium flex gap-2 pointer-events-none">
+           {data} <p className="B1 font-normal text-mono_200">{speaker_data}</p>
+       </div>
+       </div>
+    )
+  :
+  (
+    <div>
+       <p className="H6 font-medium pointer-events-none">
+            {type}
+        </p>
+        <p className="B1 font-normal pointer-events-none">
+            {data}
+        </p>
+    </div>
+  )}
+        </motion.section>
+  );
+};
+export default SeminarDetailBannerInform;
diff --git a/src/components/seminar/seminarDetail/header/SeminarDetailHeader.tsx b/src/components/seminar/seminarDetail/header/SeminarDetailHeader.tsx
@@ -20,7 +20,7 @@ const SeminarDetailHeader = ({ data }: { data: SeminarThumnail }) => {
 
   return (
     <> 
-    <div className="mt-10 px-3 flex gap-3" >
+    <div className="mt-10 px-3 flex gap-3 pointer-events-none" >
       {categoryData.map((category, index) => (
         <button
           className={`text-[0.75rem] font-medium py-2 px-3 border border-solid rounded-lg ${index === 0 ? "mono_white" :  "border-mono_500 text-mono_500"}`}

diff --git a/src/components/seminar/seminarDetail/pdf/SeminarDetailPdf.tsx b/src/components/seminar/seminarDetail/pdf/SeminarDetailPdf.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import PinImg from '@/svg/seminar/pin.svg';
+import { motion } from 'framer-motion';
+import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
 
 /**
  * @description
@@ -15,10 +17,27 @@ import PinImg from '@/svg/seminar/pin.svg';
 const SeminarDetailPdf = () => {
 
   return (
-    <div className="flex mt-10 p-5 gap-2 flex bg-mono_900 rounded-xl"> 
+    <motion.section
+    initial={{ y: 20, opacity: 0 }}
+    whileInView={{ y: 0, opacity: 1 }}
+    transition={{ duration: 0.5, delay: 0.3 }}
+    viewport={{ once: true, amount: 0.9 }}
+    variants={seminarCardVariants}
+    style={{ transformOrigin: '10% 60%' }}
+    className="mt-10 p-5 bg-mono_900 rounded-xl"
+  >
+        <motion.section
+    whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
+    whileTap={{ scale: 0.8 }}
+    viewport={{ once: true, amount: 0.9 }}
+    variants={seminarCardVariants}
+    style={{ transformOrigin: '10% 60%' }}
+    className="flex gap-2 cursor-pointer"
+  >
     <PinImg />
     <p className='B1 font-normal'>세미나 자료 보기</p>
-  </div>
+    </motion.section>
+  </motion.section>
   );
 };
 export default SeminarDetailPdf;
diff --git a/src/components/seminar/seminarDetail/review/SeminalDetailReviewDetail.tsx b/src/components/seminar/seminarDetail/review/SeminalDetailReviewDetail.tsx
@@ -1,5 +1,7 @@
 import { SeminarReview } from '@/interfaces/seminar/seminarReview';
 import React from 'react';
+import { motion } from 'framer-motion';
+import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
 
 /**
  * @description
@@ -16,8 +18,16 @@ const SeminarDetailReviewDetail = ({ data }: { data: SeminarReview }) => {
 
   return (
     <div className="mt-5 flex flex-col p-5 bg-mono_900 rounded-xl"> 
-    <p className='B1 font-bold font-medium'>사람 이름</p>
-    <p className='mt-3 B1 font-normal'>리뷰 내용</p>
+    <p className='B1 font-bold font-medium pointer-events-none'>사람 이름</p>
+    <motion.section
+          viewport={{ once: true, amount: 0.9 }}
+          variants={seminarCardVariants}
+          style={{ transformOrigin: '10% 60%' }}
+          whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
+          whileTap={{ scale: 0.8 }}
+        >
+    <p className='mt-3 B1 font-normal pointer-events-none'>리뷰 내용</p>
+    </motion.section>
   </div>
   );
 };

diff --git a/src/components/seminar/seminarDetail/review/SeminarDetailReview.tsx b/src/components/seminar/seminarDetail/review/SeminarDetailReview.tsx
@@ -1,6 +1,8 @@
 import { SEMINAR_REVIEW } from '@/constants/seminar/seminarReviewData';
 import React from 'react';
 import SeminarDetailReviewDetail from './SeminalDetailReviewDetail';
+import { motion } from 'framer-motion';
+import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
 
 /**
  * @description
@@ -17,14 +19,24 @@ const SeminarDetailReview = () => {
 
   return (
     <div className="w-full flex mt-10 flex-col inline-flex min-h-fit relative"> 
-    <p className="H4 font-normal px-2 py-3">
+    <p className="H4 font-normal px-2 py-3 pointer-events-none">
       Review
     </p>
     <p className="mb-3 border border-solid text-mono_700 h-0"/>
     {SEMINAR_REVIEW.map((review) => (
+       <motion.section
+       key={review.id}
+       initial={{ y: 20, opacity: 0 }}
+       whileInView={{ y: 0, opacity: 1 }}
+       transition={{ duration: 0.5, delay: 0.5 }}
+       viewport={{ once: true, amount: 0.9 }}
+       variants={seminarCardVariants}
+       style={{ transformOrigin: '10% 60%' }}
+     >
         <SeminarDetailReviewDetail 
         key={`${review.id}_review`} 
         data={review}/>
+         </motion.section>
         ))}
   </div>
   );