✨Feat - 오픈 세미나 페이지 모션 적용 #43

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

Hide file tree

Showing 5 changed files with 48 additions and 19 deletions.
diff --git a/src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx b/src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import Image from 'next/image';
-import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
+import { motion } from 'framer-motion';
+import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
 import TranslateImg from '@/svg/seminar/translate_img.png';
 import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import SeminarDetailBannerInform from '../../seminarDetail/banner/SeminarDetailBannerInform';
 
 
 /**
@@ -21,6 +23,14 @@ const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => {
     <div className="w-full mt-8 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.image_url}
           alt={`${data.seminar_month_date}'s open_seminarimage`}
@@ -29,6 +39,7 @@ const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => {
           quality={100}
           priority
         />
+        </motion.section>
       </div>
     {/* 오른쪽 컨텐츠 */}
     <div className="flex desktop:items-end desktop:mt-0 tablet:mt-8 mt-8">
@@ -43,26 +54,21 @@ const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => {
           priority
         />
         </div>
+        <SeminarDetailBannerInform type='Date' data={data.seminar_opening_date} speaker_data=''/>
+        <SeminarDetailBannerInform type='Location' data={data.location} speaker_data=''/>
         <div>
-        <p className="H6 font-medium">
-            Date
-        </p>
-        <p className="B1 font-normal">
-            {data.seminar_opening_date}
-        </p>
-        </div>
-        <div>
-        <p className="H6 font-medium">
-            Location
-        </p>
-        <p className="B1 font-normal">
-            {data.location}
-        </p>
-        </div>
-        <div>
+        <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%' }}
+  >
       <button className={`w-full rounded py-4 text-[0.75rem] font-medium ${data.status === false ? "text-mono_500 border border-mono_500 pointer-events-none" : "text-mono_black bg-white"}`}>
         {data.status === false ? '모집 기간이 아니에요.' : '모집 신청하기'}
       </button>
+      </motion.section>
         </div>
     </div>
     </div>

diff --git a/src/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation.tsx b/src/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
+import { motion } from 'framer-motion';
 
 /**
  * @description
@@ -21,12 +23,22 @@ const OpenSeminarDetailInformation = ({ data }: { data: OpenSeminar }) => {
     </p>
     <p className="mb-3 border border-solid text-mono_700 h-0"/>
    <div className='text-[1rem] font-normal w-full mt-8 text-mono_white'>
+   <motion.section
+          initial={{ y: 20, opacity: 0 }}
+          whileInView={{ y: 0, opacity: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true, amount: 0.9 }}
+          variants={seminarCardVariants}
+          style={{ transformOrigin: '10% 60%' }}
+          className="w-full"
+        >
    {data.information.split('<br>').map((line, index) => (
           <React.Fragment key={index}>
             {line}
             <br />
           </React.Fragment>
         ))}
+        </motion.section>
    </div>
   </div>
   );

diff --git a/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx b/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import OpenSeminarsDetailBox from './OpenSeminarsDetailBox';
 import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
 import Link from 'next/link';
+import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
+import { motion } from 'framer-motion';
 
 /**
  * @description
@@ -24,6 +26,15 @@ const OpenSeminarDetailSeminars = ({ data }: { data: OpenSeminar }) => {
     <p className="mb-3 border border-solid text-mono_700 h-0"/>
     <div className='mt-5 flex grid desktop:grid-cols-2 tablet:grid-cols-1 gap-8'>
     {data.seminars.map((seminar, index) => (
+       <motion.section
+       initial={{ y: 20, opacity: 0 }}
+       whileInView={{ y: 0, opacity: 1 }}
+       transition={{ duration: 0.5, delay: 0.2 }}
+       viewport={{ once: true, amount: 0.9 }}
+       variants={seminarCardVariants}
+       style={{ transformOrigin: '10% 60%' }}
+       className="w-full"
+     >
       <Link
       href={`/seminar/0${data.id}${seminar.id}`}
       key={seminar.id}
@@ -33,6 +44,7 @@ const OpenSeminarDetailSeminars = ({ data }: { data: OpenSeminar }) => {
       data={seminar}
     />
     </Link>
+    </motion.section>
   ))}
   </div>
   </div>

diff --git a/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarsDetailBox.tsx b/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarsDetailBox.tsx
@@ -1,4 +1,3 @@
-import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
 import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
 import Image from 'next/image';
 import React from 'react';

diff --git a/src/constants/seminar/openSeminarData.ts b/src/constants/seminar/openSeminarData.ts
@@ -118,7 +118,7 @@ export const OPEN_SEMINAR_DATA: OpenSeminar[] = [
         CONG(콩) : 축하 아카이빙 서비스<br><br>CONG은 왜 필요할까?<br><br>Unlearn Point 1️⃣ : 좋은 일이라도 나서서 축하해달라고 요청하는 것은 왠지 눈치보여 ...<br>Unlearn Point 2️⃣ : 축하는 대단한 일이어야만 받을 수 있겠지?<br>축하의 문제점 : 온/오프라인으로 축하받은 내용이 쉽게 휘발된다. <br>🥲 졸전 포스트잇들이 자꾸 떨어져..<br>간직하고 싶은데 <br>아쉬워요. <br>🥲 구두로 축하를 받거나, 내가 자리에 없을 때 누가 온지 파악이 힘들어요.<br>🥲 졸전 포스트잇 집에 들고 갔는데 지금은 어디에 있는지 몰라요.<br><br>작은 일이라도 좋은 일이 생겼을 때, <br>내가 먼저 🙌🏻 축하해달라고 하면?<br>이렇게 받은 축하를 오래 간직할 수 있다면? 📁<br><br>'CONG'을 통해 축하받고 싶은 일을 알리고 축하 노트를 받아요! <br>축하의 순간, 사라지지 않게 콩
         `,
         image_url: SeminarThumbnailCardImg.src,
-        status: true,
+        status: false,
         seminars: OPEN_DETAIL_SEMINAR_DATA,
     },
     {