feature-031: 푸터 위 화면 기능

package.json

@@ -14,6 +14,7 @@
     "@types/node": "^20.11.17",
     "@types/react-modal": "^3.16.3",
     "axios": "^1.6.4",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
@@ -24,6 +25,7 @@
     "styled-reset": "^4.5.2"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/react-router-dom": "^5.3.3",

src/components/Home/InsightVideos.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { InsightVideosContainer } from '@/styles/HomepageStyle';
 import Card from '../category/Card';
 import { IVideoProps } from 'types/videos';
 import { CardContainer } from '@/styles/category/Card.style';
+import successImg from '@/assets/success.png';
 
 interface InsightVideosProps {
   username: string;
@@ -16,12 +17,43 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
   const formattedHashtags = popularHashtags.map((tag) => '#' + tag);
   const [categoryItems] = useState<IVideoProps[]>([]);
   const [checkedItems, setCheckedItems] = useState<number[]>([]);
+  const [showEndMessage, setShowEndMessage] = useState(false);
+
+  const endBox = useRef<HTMLDivElement>(null);
 
   const onFileClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     // 비디오 카테고리로 저장 API 호출 후 이런 인사이트는 어때요 API 재호출로 최신화하기
   };
 
+  useEffect(() => {
+    const handleIntersect = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setShowEndMessage(true);
+          setTimeout(() => {
+            setShowEndMessage(false);
+          }, 2000);
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(handleIntersect, {
+      threshold: 1.0, 
+    });
+
+    const endBoxElement = endBox.current;
+    if (endBoxElement) {
+      observer.observe(endBoxElement);
+    }
+
+    return () => {
+      if (endBoxElement) {
+        observer.unobserve(endBoxElement);
+      }
+    };
+  }, []);
+
   return (
     <InsightVideosContainer>
       <div className="insight-container">
@@ -46,6 +78,14 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
             ))}
           </CardContainer>
         </div>
+        <div ref={endBox} className='end-message'>
+          <div className='end-wrapper' style={{ display: showEndMessage ? 'block' : 'none' }}>
+            <img src={successImg} alt='successImg' width={87.11} height={87.11}/>
+            <h4 className='end-text'>
+              마지막 영상이에요!<br />더 많은 영상 변환하러 가볼까요?
+            </h4>
+          </div>
+        </div>
       </div>
     </InsightVideosContainer>
   );

src/styles/HomepageStyle.ts

@@ -234,6 +234,25 @@ export const InsightVideosContainer = styled.div`
     margin-bottom: 40px;
   }
 
+  .end-message {
+    margin-top: 120px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .end-wrapper {
+    width: 255px;
+    height: 171.11px;
+  }
+
+  .end-text {
+    margin-top: 20px;
+    color: ${theme.color.gray400};
+    font-size: 20px;
+    line-height: 1.6em;
+  }
+
   .category-container {
     width: 250px;
     height: 38px;

yarn.lock

@@ -1795,6 +1795,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"