feature-026: 최근 읽은 영상 수정

teamViNO · Feb 14, 2024 · 049fddf · 049fddf
1 parent a8478c1
commit 049fddf
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 10 deletions.
diff --git a/src/components/Home/RecentVideos.tsx b/src/components/Home/RecentVideos.tsx
@@ -4,6 +4,8 @@ import {
   VideosSubtitle,
   VideosTitle,
 } from '@/styles/HomepageStyle';
+import { Link } from 'react-router-dom';
+import MoveIcon from '@/assets/icons/move.svg?react';
 import CardImage from '@/assets/empty-video.png';
 import { CardContainer } from '@/styles/category/Card.style';
 import Card from '../category/Card';
@@ -17,24 +19,35 @@ const RecentVideos = ({ videos }: IRecentVideosProp) => {
   return (
     <RecentVideosContainer>
       <div className="container">
-        <VideosTitle>최근 읽은 영상</VideosTitle>
-
+        <div className='title-container'>
+            <VideosTitle>최근 읽은 영상</VideosTitle>
+            {videos.length >= 4 && (
+                <Link to='/videos/recent'>
+                    <div className='icon-wrapper'>
+                        <MoveIcon width={28} height={28}/>
+                    </div>
+                </Link>
+            )}
+        </div>
+
         {videos.length === 0 && (
           <>
             <div className="empty-video">
               <img src={CardImage} alt="비어있는 비디오 이미지" />
             </div>
-            <VideosSubtitle>
-              처음 방문하셨나요? <br /> 아직 정리해본 영상이 없어요!
-            </VideosSubtitle>
-            <VideoButton>
-              <h2 className="button-text">영상 정리해보기</h2>
-            </VideoButton>
+            <div className='empty-text'>
+                <VideosSubtitle>
+                처음 방문하셨나요? <br /> 아직 정리해본 영상이 없어요!
+                </VideosSubtitle>
+                <VideoButton>
+                <h2 className="button-text">영상 정리해보기</h2>
+                </VideoButton>
+            </div>
           </>
         )}
         {videos.length > 0 && (
           <CardContainer>
-            {videos.map((video) => (
+            {videos.slice(0, 3).map((video) => (
               <Card key={video.category_id} mode="default" video={video} />
             ))}
           </CardContainer>

diff --git a/src/styles/HomepageStyle.ts b/src/styles/HomepageStyle.ts
@@ -142,12 +142,46 @@ export const RecentVideosContainer = styled.div`
     width: 910px;
   }
 
+  .empty-video{
+    display: flex;
+    justify-content: center;
+    align-content: center;
+  }
+
   .empty-video img {
     width: 155.56px;
     height: 155.56px;
     margin-top: 40px;
     margin-bottom: 20px;
   }
+
+  .empty-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+
+  .title-container {
+    width: 910px;
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    margin-bottom: 40px;
+  }
+
+  .icon-wrapper {
+    border: none;
+    border-radius: 100px;
+    background-color: ${theme.color.green400};
+    width: 48px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 `;
 
 export const VideosTitle = styled.h2`
@@ -158,7 +192,7 @@ export const VideosTitle = styled.h2`
   width: 910px;
   height: 45px;
   font-weight: bold;
-  margin-bottom: 40px;
+  
 `;
 
 export const VideosSubtitle = styled.h4`