feat : add adv-archive (#22)

kobaco-c-team · Mar 8, 2024 · 5b99572 · 5b99572
1 parent c51e3b6
commit 5b99572
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 12 deletions.
diff --git a/src/components/advertisement-archive/AdvertisementItem.tsx b/src/components/advertisement-archive/AdvertisementItem.tsx
@@ -44,6 +44,7 @@ export const AdvWrapper = styled.div`
   gap: 10px;
   /* max-width: 304px; */
   width: 100%;
+  cursor: pointer;
 
   .title-line {
     display: flex;
@@ -66,4 +67,5 @@ export const StyledImg = styled.img`
   height: 171px;
   width: 100%;
   object-fit: cover;
+  border-radius: 5px;
 `;
diff --git a/src/components/advertisement-archive/AdvertisementList.tsx b/src/components/advertisement-archive/AdvertisementList.tsx
@@ -4,6 +4,7 @@ import { Menu, MenuItem, Pagination, Stack } from '@mui/material';
 import { useState } from 'react';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
+import { useNavigate } from 'react-router-dom';
 
 export const dummyData = [
   {
@@ -79,6 +80,11 @@ export const AdvertisementList = ({ data }: { data: AdvertiseItemProps[] }) => {
   const endIndex = startIndex + itemsPerPage;
   const displayedData = data.slice(startIndex, endIndex);
 
+  const navigate = useNavigate();
+
+  const spaceTo = (page: string) => {
+    navigate(page);
+  };
   return (
     <AdvertisementListContainer>
       <div className="sort-box">
@@ -124,14 +130,18 @@ export const AdvertisementList = ({ data }: { data: AdvertiseItemProps[] }) => {
       <ListWrapper>
         {displayedData.map((item) => {
           return (
-            <AdvertisementItem
-              key={item.advertisementId}
-              title={item.title}
-              videoUrl={item.videoUrl}
-              createdAt={item.createdAt}
-              isArchived={item.isArchived}
-              time={item.time}
-            />
+            <div
+              onClick={() => spaceTo(`/adv-archive/${item.advertisementId}`)}
+            >
+              <AdvertisementItem
+                key={item.advertisementId}
+                title={item.title}
+                videoUrl={item.videoUrl}
+                createdAt={item.createdAt}
+                isArchived={item.isArchived}
+                time={item.time}
+              />
+            </div>
           );
         })}
       </ListWrapper>
@@ -164,9 +174,9 @@ export const AdvertisementList = ({ data }: { data: AdvertiseItemProps[] }) => {
 export const AdvertisementListContainer = styled.div`
   max-width: 1300px;
   width: 100%;
-  border: 1px solid green;
   margin: 0 auto;
-  padding: 120px 0px;
+  padding-top: 20px;
+  padding-bottom: 120px;
   box-sizing: border-box;
 
   .sort-box {

diff --git a/src/pages/adv-archive/AdvArchivePage.tsx b/src/pages/adv-archive/AdvArchivePage.tsx
@@ -5,9 +5,13 @@ import { AdvertiseItemProps } from '../../components/advertisement-archive/Adver
 import { AdvSearchBanner } from './AdvSearchBanner';
 
 export const AdvArchivePage = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [sortType, setSortType] = useState<string>('LATEST');
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [kwdVal, setKwdVal] = useState<string>('');
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [startDate, setStartDate] = useState<string>('2024-02-01');
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [endDate, setEndDate] = useState<string>('2024-02-29');
 
   const [advData, setAdvData] = useState<AdvertiseItemProps[]>();

diff --git a/src/pages/adv-archive/AdvSearchBanner.tsx b/src/pages/adv-archive/AdvSearchBanner.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import trend_back from '../../assets/trend/trend_banner.png';
+import adv_bg from '../../assets/advertisement/adv_bg.png';
 import { Input } from '../../components/common-components/Input/Input';
 import { useState } from 'react';
 import {
@@ -77,7 +77,7 @@ export const AdvSearchBanner = () => {
 };
 
 export const SearchBannerContainer = styled.div`
-  background-image: url(${trend_back});
+  background-image: url(${adv_bg});
   background-size: cover;
   width: 100%;
   /* height: 573px; */