🎨 Design: 렌딩페이지의 이미지 수정, 스크롤 애니메이션 추가

Author: KingBoRam

public/images/HomeExample.svg

@@ -1,7 +1,7 @@
+import React, { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { RiArrowRightSLine } from 'react-icons/ri';
 import ContentLoader from 'react-content-loader';
-import React from 'react';
 
 interface SectionProps {
   title: string;
@@ -11,6 +11,7 @@ interface SectionProps {
   buttonText: string;
   isImageLoaded: boolean;
   setIsImageLoaded: (loaded: boolean) => void;
+  imgUrl: string;
 }
 
 const Section: React.FC<SectionProps> = ({
@@ -21,36 +22,73 @@ const Section: React.FC<SectionProps> = ({
   buttonText,
   isImageLoaded,
   setIsImageLoaded,
-}) => (
-  <div className="w-full max-w-[800px] bg-slate-100 bg-gradient-to-r from-gray-100 to-gray-200 p-4 text-center">
-    <h2 className="mt-20 text-2xl font-semibold text-orange-500 xs:text-xl">{title}</h2>
-    <p className="mt-10 text-3xl font-bold xs:text-2xl">{subtitle}</p>
-    <p className="mt-10 text-[16px] text-gray-500 xs:text-[16px]">{description}</p>
-    <div className="flex justify-center">
-      <Link
-        to={linkTo}
-        className="gray-400 mt-4 flex h-12 w-32 items-center justify-center rounded-[20px] bg-white px-4 py-2 font-bold hover:bg-orange-600 hover:text-white xs:h-11 xs:w-28">
-        {buttonText} <RiArrowRightSLine size={20} />
-      </Link>
+  imgUrl,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+          }
+        });
+      },
+      { threshold: 0.05 },
+    );
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+    return () => {
+      if (sectionRef.current) {
+        observer.unobserve(sectionRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      ref={sectionRef}
+      className="relative w-full max-w-[600px] overflow-hidden bg-slate-100 bg-gradient-to-r from-gray-100 to-gray-200 p-4 text-center">
+      <h2
+        className={`mt-20 text-2xl font-semibold text-orange-500 xs:text-xl ${isVisible ? 'animate-slideInLeft' : 'opacity-0'}`}>
+        {title}
+      </h2>
+      <p className={`mt-10 text-3xl font-bold xs:text-2xl ${isVisible ? 'animate-slideInLeft' : 'opacity-0'}`}>
+        {subtitle}
+      </p>
+      <p
+        className={`mt-10 text-[16px] text-gray-500 xs:text-[16px] ${isVisible ? 'animate-slideInLeft' : 'opacity-0'}`}>
+        {description}
+      </p>
+      <div className={`flex justify-center ${isVisible ? 'animate-slideInLeft' : 'opacity-0'}`}>
+        <Link
+          to={linkTo}
+          className="gray-400 mt-4 flex h-12 w-32 items-center justify-center rounded-[20px] bg-white px-4 py-2 font-bold hover:bg-orange-600 hover:text-white xs:h-11 xs:w-28">
+          {buttonText} <RiArrowRightSLine size={20} />
+        </Link>
+      </div>
+      {!isImageLoaded && (
+        <ContentLoader
+          height={200}
+          width={200}
+          speed={2}
+          backgroundColor="#f3f3f3"
+          foregroundColor="#ecebeb"
+          className="mx-auto mb-20 mt-20">
+          <circle cx="100" cy="100" r="100" />
+        </ContentLoader>
+      )}
+      <img
+        src={imgUrl}
+        alt="example"
+        className={`mx-auto mb-5 mt-20 xs:mt-10 ${isVisible ? 'animate-slideInRight' : 'opacity-0'}`}
+        onLoad={() => setIsImageLoaded(true)}
+      />
     </div>
-    {!isImageLoaded && (
-      <ContentLoader
-        height={200}
-        width={200}
-        speed={2}
-        backgroundColor="#f3f3f3"
-        foregroundColor="#ecebeb"
-        className="mx-auto mb-20 mt-20">
-        <circle cx="100" cy="100" r="100" />
-      </ContentLoader>
-    )}
-    <img
-      src="/images/HomeExample.svg"
-      alt="example"
-      className={`mx-auto mb-20 mt-20 ${isImageLoaded ? 'block' : 'hidden'}`}
-      onLoad={() => setIsImageLoaded(true)}
-    />
-  </div>
-);
+  );
+};
 
 export default Section;

public/images/board.svg

@@ -54,6 +54,7 @@ const Landing: React.FC = () => {
         buttonText="더보기"
         isImageLoaded={isImageLoaded}
         setIsImageLoaded={setIsImageLoaded}
+        imgUrl="/images/fti.svg"
       />
       <Section
         title="개인별 음식추천"
@@ -69,6 +70,7 @@ const Landing: React.FC = () => {
         buttonText="더보기"
         isImageLoaded={isImageLoaded}
         setIsImageLoaded={setIsImageLoaded}
+        imgUrl="/images/flavor.svg"
       />
       <Section
         title="소셜다이닝"
@@ -84,6 +86,7 @@ const Landing: React.FC = () => {
         buttonText="더보기"
         isImageLoaded={isImageLoaded}
         setIsImageLoaded={setIsImageLoaded}
+        imgUrl="/images/social.svg"
       />
       <Section
         title="맛있는 발견"
@@ -99,6 +102,7 @@ const Landing: React.FC = () => {
         buttonText="더보기"
         isImageLoaded={isImageLoaded}
         setIsImageLoaded={setIsImageLoaded}
+        imgUrl="/images/board.svg"
       />
       <Footer />
     </div>

public/images/flavor.svg

@@ -11,6 +11,21 @@ module.exports = {
   ],
   theme: {
     extend: {
+      keyframes: {
+        slideInLeft: {
+          '0%': { opacity: '0', transform: 'translateX(-30%)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+        slideInRight: {
+          '0%': { opacity: '0', transform: 'translateX(30%)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+      },
+      animation: {
+        slideInLeft: 'slideInLeft 0.7s ease-in-out',
+        slideInRight: 'slideInRight 0.7s ease-in-out',
+      },
+
       screens: {
         xs: { max: '600px' },
         xxs: { max: '375px' },