From 049fddfab2ade97e3dbca7f4d9e15f7f2e94ee95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A7=80=EB=82=98?= <jina4066@naver.com>
Date: Thu, 15 Feb 2024 01:28:00 +0900
Subject: [PATCH] =?UTF-8?q?feature-026:=20=EC=B5=9C=EA=B7=BC=20=EC=9D=BD?=
 =?UTF-8?q?=EC=9D=80=20=EC=98=81=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Home/RecentVideos.tsx | 31 +++++++++++++++++-------
 src/styles/HomepageStyle.ts          | 36 +++++++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/src/components/Home/RecentVideos.tsx b/src/components/Home/RecentVideos.tsx
index aeeea48..0e910b3 100644
--- 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
index 5573b4a..09ef21e 100644
--- 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`