From 15f47d73c0761c8b741010f83a0e7163d91b7526 Mon Sep 17 00:00:00 2001 From: gs0428 Date: Thu, 15 Feb 2024 03:42:23 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feature-067:=20=ED=99=88=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=EC=97=90=EC=84=9C=20=EC=9D=B8=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EC=B2=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8A=94=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/videos.ts | 7 ++++++ src/components/Home/InsightVideos.tsx | 31 ++++++++++++++++++--------- src/components/Home/RecentVideos.tsx | 2 +- src/pages/HomePage.tsx | 17 +++++++++------ 4 files changed, 39 insertions(+), 18 deletions(-) diff --git a/src/apis/videos.ts b/src/apis/videos.ts index 83393b9..c20a90a 100644 --- a/src/apis/videos.ts +++ b/src/apis/videos.ts @@ -51,3 +51,10 @@ export const createVideoSummaryAPI = (videoId: number, content: string[]) => { export const deleteVideoSummaryAPI = (summaryId: number) => { return axios.delete(PREFIX + `/${summaryId}/deleteSummary`); }; + +export const getDummyVideos = async (): Promise< + APIResponse> +> => { + const response = await axiosInstance.get('/videos/dummyVideos/unRead'); + return response.data; +}; diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx index c95f959..9542190 100644 --- a/src/components/Home/InsightVideos.tsx +++ b/src/components/Home/InsightVideos.tsx @@ -8,14 +8,15 @@ import successImg from '@/assets/success.png'; interface InsightVideosProps { username: string; popularHashtags: string[]; + dummyVideos: IVideoProps[]; } const InsightVideos: React.FC = ({ username, popularHashtags, + dummyVideos, }) => { const formattedHashtags = popularHashtags.map((tag) => '#' + tag); - const [categoryItems] = useState([]); const [checkedItems, setCheckedItems] = useState([]); const [showEndMessage, setShowEndMessage] = useState(false); @@ -31,15 +32,16 @@ const InsightVideos: React.FC = ({ entries.forEach((entry) => { if (entry.isIntersecting) { setShowEndMessage(true); - setTimeout(() => { + const timer: NodeJS.Timeout = setTimeout(() => { setShowEndMessage(false); + clearTimeout(timer); }, 2000); } }); }; const observer = new IntersectionObserver(handleIntersect, { - threshold: 1.0, + threshold: 1.0, }); const endBoxElement = endBox.current; @@ -66,23 +68,32 @@ const InsightVideos: React.FC = ({
- {categoryItems.map((video) => ( + {dummyVideos.map((video) => ( ))}
-
-
- successImg -

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

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

diff --git a/src/components/Home/RecentVideos.tsx b/src/components/Home/RecentVideos.tsx index 52a3967..2976282 100644 --- a/src/components/Home/RecentVideos.tsx +++ b/src/components/Home/RecentVideos.tsx @@ -46,7 +46,7 @@ const RecentVideos = ({ videos }: IRecentVideosProp) => { {videos.length > 0 && ( {videos.slice(0, 3).map((video) => ( - + ))} )} diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index af9a99a..9bddb7c 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -6,7 +6,7 @@ import InsightVideos from '@/components/Home/InsightVideos'; import { useRecoilValue } from 'recoil'; import { recommendationModalState } from '@/stores/modal'; import RecommendationModal from '@/components/modals/RecommendationModal'; -import { getRecentVideos } from '@/apis/videos'; +import { getDummyVideos, getRecentVideos } from '@/apis/videos'; import { userTokenState } from '@/stores/user'; import { IVideoProps } from 'types/videos'; @@ -20,7 +20,8 @@ export interface Video { const HomePage: React.FC = () => { const userToken = useRecoilValue(userTokenState); - const [videos, setVideos] = useState([]); + const [recentVideos, setRecentVideos] = useState([]); + const [dummyVideos, setDummyVideos] = useState([]); const handleSearch = (value: string) => { console.log(value); }; @@ -28,20 +29,22 @@ const HomePage: React.FC = () => { const isModalOpen = useRecoilValue(recommendationModalState); useEffect(() => { - userToken && - getRecentVideos() - .then((res) => setVideos(res.result.videos)) - .catch((err) => console.log(err)); + Promise.all([getRecentVideos(), getDummyVideos()]).then((res) => { + const [recentVideosResponse, dummyVideosResponse] = res; + setRecentVideos(recentVideosResponse.result.videos); + setDummyVideos(dummyVideosResponse.result.videos); + }); }, [userToken]); return ( {isModalOpen && } - + ); From d5746cc90da1bdb76f6ce0f7ef1a91458c4fd5a8 Mon Sep 17 00:00:00 2001 From: gs0428 Date: Thu, 15 Feb 2024 04:35:34 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feature-067:=20card=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/category/Card.tsx | 6 ++++-- src/styles/category/Card.style.ts | 18 ++++++++++++------ 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/category/Card.tsx b/src/components/category/Card.tsx index 4b38c5a..1a90eba 100644 --- a/src/components/category/Card.tsx +++ b/src/components/category/Card.tsx @@ -44,10 +44,12 @@ const Card: React.FC = ({ }; return ( setIsOpen(true)} onMouseLeave={() => setIsOpen(false)} > - +
+ {mode === 'category' && ( 0 ? 'activated' : ''} @@ -59,7 +61,7 @@ const Card: React.FC = ({ /> )} - +
{video.title} diff --git a/src/styles/category/Card.style.ts b/src/styles/category/Card.style.ts index 32a6263..0f769ae 100644 --- a/src/styles/category/Card.style.ts +++ b/src/styles/category/Card.style.ts @@ -1,10 +1,11 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import theme from '../theme'; import checkIcon from '@/assets/icons/check.svg'; import checkedIcon from '@/assets/icons/checked.svg'; import { Link } from 'react-router-dom'; export const CheckBoxWrap = styled.div` + position: absolute; background-color: rgba(0, 0, 0, 0.5); border-radius: 16px 16px 0 0; @@ -12,7 +13,7 @@ export const CheckBoxWrap = styled.div` flex-direction: row-reverse; width: 100%; - height: 100%; + height: 163px; &.activated { display: flex; @@ -51,7 +52,7 @@ export const CardContainer = styled.div` row-gap: 40px; `; -export const Wrap = styled.div` +export const Wrap = styled.div<{ mode: string }>` display: flex; flex-direction: column; width: 290px; @@ -60,12 +61,19 @@ export const Wrap = styled.div` box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); transition: all 0.5s; position: relative; + height: 400px; &:hover { ${CheckBoxWrap} { display: flex; } + z-index: 1; scale: 1.025; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1); + ${(props) => + props.mode === 'recommend' && + css` + height: 467px; + `} } `; @@ -93,12 +101,10 @@ export const ChipWrap = styled.div` flex-wrap: wrap; `; -export const Image = styled.div<{ source: string }>` - background-image: url(${(props) => props.source}); +export const Image = styled.img` border-radius: 16px 16px 0 0; width: 290px; height: 163px; - background-size: 100%; `; export const DropdownWrap = styled.div` From 9e2cb5cef9fc255493c32cf43e29f006d50c3235 Mon Sep 17 00:00:00 2001 From: gs0428 Date: Thu, 15 Feb 2024 16:36:29 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feature-067:=20=EB=82=B4=EA=BA=BC=EB=A1=9C?= =?UTF-8?q?=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0=20API=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/category.ts | 2 +- src/apis/videos.ts | 11 +++++++++++ src/components/Home/InsightVideos.tsx | 13 ++++++++++++- src/components/category/Card.tsx | 11 +++++++++-- src/components/layout/sideBar/UserMode.tsx | 2 +- src/pages/HomePage.tsx | 1 + src/styles/layout/header/index.ts | 2 +- 7 files changed, 36 insertions(+), 6 deletions(-) diff --git a/src/apis/category.ts b/src/apis/category.ts index 62479aa..5b5036f 100644 --- a/src/apis/category.ts +++ b/src/apis/category.ts @@ -20,7 +20,7 @@ export const putSubToOtherTop = async ( topCategoryId: number, ) => { const response = await axiosInstance.put( - `/category/${categoryId}/${topCategoryId}`, + `/category/move/${categoryId}/${topCategoryId}`, ); return response.data; }; diff --git a/src/apis/videos.ts b/src/apis/videos.ts index c20a90a..8f9c7ae 100644 --- a/src/apis/videos.ts +++ b/src/apis/videos.ts @@ -58,3 +58,14 @@ export const getDummyVideos = async (): Promise< const response = await axiosInstance.get('/videos/dummyVideos/unRead'); return response.data; }; + +export const createDummyVideoToMine = async ( + videoId: number, + categoryId: number, +) => { + const response = await axiosInstance.post( + `/videos/dummyVideos/${videoId}/${categoryId}/newVideo`, + ); + + return response.data; +}; diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx index 9542190..b53ac43 100644 --- a/src/components/Home/InsightVideos.tsx +++ b/src/components/Home/InsightVideos.tsx @@ -4,17 +4,20 @@ import Card from '../category/Card'; import { IVideoProps } from 'types/videos'; import { CardContainer } from '@/styles/category/Card.style'; import successImg from '@/assets/success.png'; +import { createDummyVideoToMine, getDummyVideos } from '@/apis/videos'; interface InsightVideosProps { username: string; popularHashtags: string[]; dummyVideos: IVideoProps[]; + setDummyVideos: React.Dispatch>; } const InsightVideos: React.FC = ({ username, popularHashtags, dummyVideos, + setDummyVideos, }) => { const formattedHashtags = popularHashtags.map((tag) => '#' + tag); const [checkedItems, setCheckedItems] = useState([]); @@ -22,8 +25,16 @@ const InsightVideos: React.FC = ({ const endBox = useRef(null); - const onFileClick = (e: React.MouseEvent) => { + const onFileClick = async ( + e: React.MouseEvent, + videoId: number, + categoryId: number, + ) => { e.stopPropagation(); + const res = await createDummyVideoToMine(videoId, categoryId); + if (res.isSuccess) + await getDummyVideos().then((res) => setDummyVideos(res.result.videos)); + // 비디오 카테고리로 저장 API 호출 후 이런 인사이트는 어때요 API 재호출로 최신화하기 }; diff --git a/src/components/category/Card.tsx b/src/components/category/Card.tsx index 1a90eba..af7b915 100644 --- a/src/components/category/Card.tsx +++ b/src/components/category/Card.tsx @@ -14,7 +14,11 @@ interface ICardProps { video: IVideoProps; checkedVideos?: number[]; setCheckedVideos?: (value: number[]) => void; - onFileClick?: (e: React.MouseEvent) => void; + onFileClick?: ( + e: React.MouseEvent, + videoId: number, + categoryId: number, + ) => void; } const Card: React.FC = ({ @@ -31,6 +35,9 @@ const Card: React.FC = ({ category.length ? category[0].categoryId : -1, ); + const onFileClickWithProps = (e: React.MouseEvent) => + onFileClick && onFileClick(e, video.video_id, selectedCategoryId); + const handleSelectCategory = (categoryId: number) => { setSelectedCategoryId(categoryId); }; @@ -77,7 +84,7 @@ const Card: React.FC = ({ )} diff --git a/src/components/layout/sideBar/UserMode.tsx b/src/components/layout/sideBar/UserMode.tsx index 7457cba..3c7446c 100644 --- a/src/components/layout/sideBar/UserMode.tsx +++ b/src/components/layout/sideBar/UserMode.tsx @@ -55,7 +55,7 @@ const UserMode = () => { } else if (grabedCategory.current?.topCategoryId === null) { response = await topToOtherTop(grabedCategory, dropedCategory); } else { - response = await subToOtherTop(topId, grabedCategory); + response = await subToOtherTop(dropedCategory.current!, grabedCategory); } // 잡은 카테고리, 놓은 카테고리 초기화 if (response) { diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 9bddb7c..3a4b61b 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -45,6 +45,7 @@ const HomePage: React.FC = () => { username="여울" popularHashtags={['디자인', '진로', '브랜딩']} dummyVideos={dummyVideos} + setDummyVideos={setDummyVideos} /> ); diff --git a/src/styles/layout/header/index.ts b/src/styles/layout/header/index.ts index 0496f9b..508b18b 100644 --- a/src/styles/layout/header/index.ts +++ b/src/styles/layout/header/index.ts @@ -7,7 +7,7 @@ export const Container = styled.header<{ color: ColorKeyType; width: string }>` position: sticky; left: 0; top: 0; - z-index: 1; + z-index: 2; padding: 16px 60px; display: flex; justify-content: space-between; From a3e76ae2a5451857f6ec1287b5e0b68dac28310b Mon Sep 17 00:00:00 2001 From: gs0428 Date: Thu, 15 Feb 2024 17:50:33 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feature-067:=20=EB=B9=84=EB=94=94=EC=98=A4?= =?UTF-8?q?=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/category.ts | 11 +++++ src/components/category/VideoSelectMenu.tsx | 20 ++++---- src/pages/CategoryPage.tsx | 50 ++++++++++++-------- src/utils/handleVideo.ts | 51 ++++++++++++--------- 4 files changed, 83 insertions(+), 49 deletions(-) diff --git a/src/apis/category.ts b/src/apis/category.ts index 5b5036f..46d55fc 100644 --- a/src/apis/category.ts +++ b/src/apis/category.ts @@ -72,3 +72,14 @@ export const updateCategoryName = async (name: string, categoryId: number) => { const response = await axiosInstance.put(`/category/${categoryId}`, { name }); return response.data; }; + +// 비디오의 카테고리 위치 수정 API +export const putVideoToOtherCategory = async ( + videoId: number, + categoryId: number, +) => { + const response = await axiosInstance.patch( + `/videos/${videoId}/${categoryId}/update`, + ); + return response.data; +}; diff --git a/src/components/category/VideoSelectMenu.tsx b/src/components/category/VideoSelectMenu.tsx index 3685bb9..615fc66 100644 --- a/src/components/category/VideoSelectMenu.tsx +++ b/src/components/category/VideoSelectMenu.tsx @@ -1,8 +1,8 @@ import * as CategoryPageStyles from '@/styles/category/index.style'; import GarbageSvg from '@/assets/icons/garbage.svg?react'; import CloseSvg from '@/assets/icons/close.svg?react'; -import { useState } from 'react'; import { CategorySelectBox } from '../SummaryPage/SummaryDetailBox/CategorySelectBox'; +import { useState } from 'react'; import { IFolderProps } from 'types/category'; interface IVideoSelectMenuProps { @@ -12,6 +12,11 @@ interface IVideoSelectMenuProps { setCheckedVideos: React.Dispatch>; handleDeleteVideos: () => void; allCheckBtnHandler: () => void; + onFileClick?: ( + e: React.MouseEvent, + videoId: number, + categoryId: number, + ) => void; } const VideoSelectMenu = ({ @@ -21,19 +26,18 @@ const VideoSelectMenu = ({ setCheckedVideos, handleDeleteVideos, allCheckBtnHandler, + onFileClick, }: IVideoSelectMenuProps) => { const [selectedCategoryId, setSelectedCategoryId] = useState( categories.length ? categories[0].categoryId : -1, ); - const handleSelectCategory = (categoryId: number) => { + const onSelect = (categoryId: number) => { setSelectedCategoryId(categoryId); }; - const onFileClick = (e: React.MouseEvent) => { - e.stopPropagation(); - // 비디오 이동 API 호출 후 모든 비디오 받아오는 API 재호출로 최신화하기 - }; + const onFileClickWithProps = (e: React.MouseEvent) => + onFileClick && onFileClick(e, checkedVideos[0], selectedCategoryId); return (
@@ -48,8 +52,8 @@ const VideoSelectMenu = ({ diff --git a/src/pages/CategoryPage.tsx b/src/pages/CategoryPage.tsx index ac9eb6b..31a21b4 100644 --- a/src/pages/CategoryPage.tsx +++ b/src/pages/CategoryPage.tsx @@ -7,13 +7,14 @@ import { useRecoilValue } from 'recoil'; import { categoryState } from '@/stores/category'; import { ISubFolderProps, ITagProps } from 'types/category'; import EmptyCard from '@/components/category/EmptyCard'; -import { deleteVideos, getRecentVideos } from '@/apis/videos'; +import { deleteVideos } from '@/apis/videos'; import { IVideoProps } from 'types/videos'; import { sortVideos } from '@/utils/sortVideos'; import { CardContainer } from '@/styles/category/Card.style'; -import handleVideo from '@/utils/handleVideo'; import VideoSelectMenu from '@/components/category/VideoSelectMenu'; import DefaultMenu from '@/components/category/DefaultMenu'; +import { putVideoToOtherCategory } from '@/apis/category'; +import handleVideo from '@/utils/handleVideo'; const CategoryPage = () => { const params = useParams(); @@ -31,24 +32,14 @@ const CategoryPage = () => { const sortedVideos = sortVideos(videos, recentRegisterMode); useEffect(() => { - if (!params.top_folder) { - getRecentVideos() - .then((res) => { - setVideos(res.result.videos); - setName('최근 읽은 영상'); - setMenus([]); - }) - .catch((err) => console.log(err)); - } else { - handleVideo( - categories, - params.top_folder, - params.sub_folder!, - setMenus, - setName, - setVideos, - ); - } + handleVideo( + categories, + params.top_folder, + params.sub_folder, + setMenus, + setName, + setVideos, + ); setCheckedVideos([]); }, [categories, params.sub_folder, params.top_folder]); @@ -72,6 +63,24 @@ const CategoryPage = () => { setCheckedVideos(videos.map((video) => video.video_id)); } }; + const onFileClick = async ( + e: React.MouseEvent, + videoId: number, + categoryId: number, + ) => { + e.stopPropagation(); + const res = await putVideoToOtherCategory(videoId, categoryId); + if (res.isSuccess) { + handleVideo( + categories, + params.top_folder, + params.sub_folder, + setMenus, + setName, + setVideos, + ); + } + }; return ( @@ -85,6 +94,7 @@ const CategoryPage = () => { setCheckedVideos={setCheckedVideos} handleDeleteVideos={handleDeleteVideos} allCheckBtnHandler={allCheckBtnHandler} + onFileClick={onFileClick} /> ) : ( >, setName: React.Dispatch>, setVideos: React.Dispatch>, ) => { - await getVideoById(topCategoryId).then(async (res) => { - const topCategory = categories.find( - (category) => category.categoryId === Number(topCategoryId), - ); - if (subCategoryId) { - const subName = topCategory?.subFolders.find( - (subFolder) => subFolder.categoryId === Number(subCategoryId), + if (!topCategoryId) { + await getRecentVideos().then((res) => { + setVideos(res.result.videos); + setName('최근 읽은 영상'); + setMenus([]); + }); + } else { + await getVideoById(topCategoryId).then(async (res) => { + const topCategory = categories.find( + (category) => category.categoryId === Number(topCategoryId), ); - setName(subName!.name); - await getCategoryTags(subCategoryId!).then((res) => { - if (res.isSuccess) setMenus(res.result.tags); - else setMenus([]); - }); - } else { - setName(topCategory!.name); - setMenus(topCategory!.subFolders); - } - setVideos(res.isSuccess ? res.result.videos : []); - }); + if (subCategoryId) { + const subName = topCategory?.subFolders.find( + (subFolder) => subFolder.categoryId === Number(subCategoryId), + ); + setName(subName!.name); + await getCategoryTags(subCategoryId!).then((res) => { + if (res.isSuccess) setMenus(res.result.tags); + else setMenus([]); + }); + } else { + setName(topCategory!.name); + setMenus(topCategory!.subFolders); + } + setVideos(res.isSuccess ? res.result.videos : []); + }); + } }; + export default handleVideo; From 2ee36d683f7dcaa099388805402d5edd5e95b556 Mon Sep 17 00:00:00 2001 From: gs0428 Date: Thu, 15 Feb 2024 17:57:45 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feature-067:=20=EA=B9=83=ED=97=99=20?= =?UTF-8?q?=EC=95=A1=EC=85=98=20=EC=98=A4=EB=A5=98=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Home/InsightVideos.tsx | 2 -- src/pages/GuestPage.tsx | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx index b53ac43..e06d7d8 100644 --- a/src/components/Home/InsightVideos.tsx +++ b/src/components/Home/InsightVideos.tsx @@ -34,8 +34,6 @@ const InsightVideos: React.FC = ({ const res = await createDummyVideoToMine(videoId, categoryId); if (res.isSuccess) await getDummyVideos().then((res) => setDummyVideos(res.result.videos)); - - // 비디오 카테고리로 저장 API 호출 후 이런 인사이트는 어때요 API 재호출로 최신화하기 }; useEffect(() => { diff --git a/src/pages/GuestPage.tsx b/src/pages/GuestPage.tsx index 2e1e903..f07901a 100644 --- a/src/pages/GuestPage.tsx +++ b/src/pages/GuestPage.tsx @@ -23,6 +23,8 @@ const GuestPage: React.FC = () => { {}} /> From 9af350c6e3b5af41a22781a570755adef3780698 Mon Sep 17 00:00:00 2001 From: gs0428 Date: Thu, 15 Feb 2024 18:10:30 +0900 Subject: [PATCH 6/6] =?UTF-8?q?featrue-067:=20card=20style=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/category/Card.tsx | 2 +- src/components/common/chip/Chip.style.ts | 2 +- src/pages/GuestPage.tsx | 34 ------------------------ src/styles/category/Card.style.ts | 5 +++- 4 files changed, 6 insertions(+), 37 deletions(-) delete mode 100644 src/pages/GuestPage.tsx diff --git a/src/components/category/Card.tsx b/src/components/category/Card.tsx index af7b915..f72cccb 100644 --- a/src/components/category/Card.tsx +++ b/src/components/category/Card.tsx @@ -74,7 +74,7 @@ const Card: React.FC = ({ {video.title} {video.description} - {video.tag.map((tag) => ( + {video.tag.slice(0, 3).map((tag) => ( ))} diff --git a/src/components/common/chip/Chip.style.ts b/src/components/common/chip/Chip.style.ts index 891e912..cb728b0 100644 --- a/src/components/common/chip/Chip.style.ts +++ b/src/components/common/chip/Chip.style.ts @@ -4,7 +4,7 @@ import styled from 'styled-components'; export const ChipContainer = styled.div` cursor: pointer; margin-right: 18px; - margin-bottom: 18px; + margin-bottom: 12px; padding: 3px 9.5px; background-color: ${theme.color.gray100}; border-radius: 8px; diff --git a/src/pages/GuestPage.tsx b/src/pages/GuestPage.tsx deleted file mode 100644 index f07901a..0000000 --- a/src/pages/GuestPage.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import SearchYoutube from '@/components/Home/SearchYoutube'; -import { HomePageContainer } from '@/styles/HomepageStyle'; -import RecentVideos from '@/components/Home/RecentVideos'; -import InsightVideos from '@/components/Home/InsightVideos'; - -export interface Video { - id: string; - title: string; - subtitle: string; - hashtags: string[]; - thumbnailUrl: string; -} - -const GuestPage: React.FC = () => { - const handleSearch = (value: string) => { - console.log(value); - }; - - return ( - - - {}} - /> - - - ); -}; - -export default GuestPage; diff --git a/src/styles/category/Card.style.ts b/src/styles/category/Card.style.ts index 0f769ae..b25686f 100644 --- a/src/styles/category/Card.style.ts +++ b/src/styles/category/Card.style.ts @@ -110,7 +110,10 @@ export const Image = styled.img` export const DropdownWrap = styled.div` display: flex; flex-direction: column; - padding: 0px 20px 24px; + padding: 0px 20px; + justify-content: center; + height: 100%; + & div.select-box { padding: 8px 16px; display: flex;