diff --git a/package.json b/package.json index 3ae2b35..258f5d4 100644 --- a/package.json +++ b/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", diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx index c3bfe89..c95f959 100644 --- a/src/components/Home/InsightVideos.tsx +++ b/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 = ({ const formattedHashtags = popularHashtags.map((tag) => '#' + tag); const [categoryItems] = useState([]); const [checkedItems, setCheckedItems] = useState([]); + const [showEndMessage, setShowEndMessage] = useState(false); + + const endBox = useRef(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 (
@@ -46,6 +78,14 @@ const InsightVideos: React.FC = ({ ))}
+
+
+ successImg +

+ 마지막 영상이에요!
더 많은 영상 변환하러 가볼까요? +

+
+
); diff --git a/src/styles/HomepageStyle.ts b/src/styles/HomepageStyle.ts index 09ef21e..f3bd6fc 100644 --- a/src/styles/HomepageStyle.ts +++ b/src/styles/HomepageStyle.ts @@ -268,6 +268,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; diff --git a/yarn.lock b/yarn.lock index 732c10e..e9a4524 100644 --- a/yarn.lock +++ b/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"