From 8c51803088e41233e1beee8b4c1dd6b7cf6c1dfa Mon Sep 17 00:00:00 2001
From: danivelop <55433950+danivelop@users.noreply.github.com>
Date: Fri, 23 Feb 2024 04:50:23 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[LINKER-118]=20=ED=8A=B8=EB=A0=8C?=
 =?UTF-8?q?=EB=93=9C=20=ED=95=AB=EC=9D=B4=EC=8A=88=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20(#59)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/lds/src/BackHeader/BackHeader.css.ts |   2 +-
 packages/lds/src/BackHeader/BackHeader.tsx    |   6 +-
 services/web/src/app/recommendation/page.tsx  |  13 +-
 services/web/src/app/trend/__mock__.ts        | 192 ------------------
 services/web/src/app/trend/page.css.ts        |  25 +--
 services/web/src/app/trend/page.tsx           |  38 ++--
 .../src/features/news-list/NewsList.css.ts    |   6 +-
 .../web/src/features/news-list/NewsList.tsx   |   6 +-
 8 files changed, 45 insertions(+), 243 deletions(-)
 delete mode 100644 services/web/src/app/trend/__mock__.ts

diff --git a/packages/lds/src/BackHeader/BackHeader.css.ts b/packages/lds/src/BackHeader/BackHeader.css.ts
index c8a88a5f..b92cba3c 100644
--- a/packages/lds/src/BackHeader/BackHeader.css.ts
+++ b/packages/lds/src/BackHeader/BackHeader.css.ts
@@ -11,7 +11,7 @@ export const header = style({
   height: '52px',
   padding: '10px 20px',
   boxSizing: 'border-box',
-  backgroundColor: colors.gray050,
+  backgroundColor: colors.background,
 });
 
 export const backButton = style({
diff --git a/packages/lds/src/BackHeader/BackHeader.tsx b/packages/lds/src/BackHeader/BackHeader.tsx
index 9e288e35..39bd934d 100644
--- a/packages/lds/src/BackHeader/BackHeader.tsx
+++ b/packages/lds/src/BackHeader/BackHeader.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useRouter } from 'next/navigation';
 
 import { Icon, Txt } from '@linker/lds';
@@ -8,13 +9,14 @@ import { header, backButton } from './BackHeader.css';
 
 interface BackHeaderProps {
   title: string;
+  className?: string;
 }
 
-function BackHeader({ title }: BackHeaderProps) {
+function BackHeader({ title, className }: BackHeaderProps) {
   const router = useRouter();
 
   return (
-    <header className={header}>
+    <header className={clsx(header, className)}>
       <button
         className={backButton}
         onClick={() => {
diff --git a/services/web/src/app/recommendation/page.tsx b/services/web/src/app/recommendation/page.tsx
index af1b3655..6d3b3702 100644
--- a/services/web/src/app/recommendation/page.tsx
+++ b/services/web/src/app/recommendation/page.tsx
@@ -6,10 +6,10 @@ import { List, Icon, BackHeader, Txt } from '@linker/lds';
 import { colors } from '@linker/styles';
 import { format } from 'date-fns';
 import { ko } from 'date-fns/locale';
+import { redirect } from 'next/navigation';
 
 import { getTokens } from '@utils/token/server';
 
-import { recommendationResult } from './__mock__';
 import { scheduleWrapper, sideBar, scheduleInfo, infoItem } from './page.css';
 
 export interface RecommendationDTO {
@@ -30,7 +30,7 @@ export interface RecommendationDTO {
 }
 
 const getRecommendation = () => {
-  return Promise.resolve(recommendationResult);
+  // return Promise.resolve(recommendationResult);
 
   return ky.get<RecommendationDTO>('/v1/schedules/upcoming/recommendation');
 };
@@ -42,8 +42,13 @@ async function RecommendationPage() {
     return;
   }
 
-  const { title, startDateTime, endDateTime, recommendations, participantsSummary } =
-    await getRecommendation();
+  const result = await getRecommendation();
+
+  if (!result) {
+    return redirect('/my/feed');
+  }
+
+  const { title, startDateTime, endDateTime, recommendations, participantsSummary } = result;
 
   return (
     <>
diff --git a/services/web/src/app/trend/__mock__.ts b/services/web/src/app/trend/__mock__.ts
deleted file mode 100644
index 01dfe4db..00000000
--- a/services/web/src/app/trend/__mock__.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-export const recommendations = [
-  {
-    tags: [
-      {
-        id: 1,
-        name: '엔터테인먼트',
-      },
-      {
-        id: 2,
-        name: '스포츠',
-      },
-      {
-        id: 3,
-        name: '비즈니스',
-      },
-    ],
-    newsList: {
-      data: [
-        {
-          id: 0,
-          title: '5G 스마트폰 이용자 과반 넘겨, 통신비 지출 4년 만에 소폭 감소',
-          newsProvider: 'businesspost',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 1,
-          title: '송년회는 어디서...칵테일클래스 등 팝업스토어로 소비자와 소통 강화',
-          newsProvider: '연합뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 2,
-          title: '올해 대주주 1만3쳔명 50억원으로 금ㅇ리 상향시 양도세 대상 70% 감소',
-          newsProvider: '네이트 뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 3,
-          title: '5G 스마트폰 이용자 과반 넘겨, 통신비 지출 4년 만에 소폭 감소',
-          newsProvider: 'businesspost',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 4,
-          title: '송년회는 어디서...칵테일클래스 등 팝업스토어로 소비자와 소통 강화',
-          newsProvider: '연합뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 5,
-          title: '올해 대주주 1만3쳔명 50억원으로 금ㅇ리 상향시 양도세 대상 70% 감소',
-          newsProvider: '네이트 뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 6,
-          title: '5G 스마트폰 이용자 과반 넘겨, 통신비 지출 4년 만에 소폭 감소',
-          newsProvider: 'businesspost',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 7,
-          title: '송년회는 어디서...칵테일클래스 등 팝업스토어로 소비자와 소통 강화',
-          newsProvider: '연합뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 8,
-          title: '올해 대주주 1만3쳔명 50억원으로 금ㅇ리 상향시 양도세 대상 70% 감소',
-          newsProvider: '네이트 뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-      ],
-      nextCursor: 8,
-      hasNext: true,
-    },
-  },
-  {
-    tags: [
-      {
-        id: 1,
-        name: '엔터테인먼트',
-      },
-    ],
-    newsList: {
-      data: [
-        {
-          id: 3,
-          title: '5G 스마트폰 이용자 과반 넘겨, 통신비 지출 4년 만에 소폭 감소',
-          newsProvider: 'businesspost',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 4,
-          title: '송년회는 어디서...칵테일클래스 등 팝업스토어로 소비자와 소통 강화',
-          newsProvider: '연합뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 5,
-          title: '올해 대주주 1만3쳔명 50억원으로 금ㅇ리 상향시 양도세 대상 70% 감소',
-          newsProvider: '네이트 뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-      ],
-      nextCursor: 5,
-      hasNext: true,
-    },
-  },
-  {
-    tags: [
-      {
-        id: 2,
-        name: '스포츠',
-      },
-    ],
-    newsList: {
-      data: [
-        {
-          id: 6,
-          title: '5G 스마트폰 이용자 과반 넘겨, 통신비 지출 4년 만에 소폭 감소',
-          newsProvider: 'businesspost',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 7,
-          title: '송년회는 어디서...칵테일클래스 등 팝업스토어로 소비자와 소통 강화',
-          newsProvider: '연합뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 8,
-          title: '올해 대주주 1만3쳔명 50억원으로 금ㅇ리 상향시 양도세 대상 70% 감소',
-          newsProvider: '네이트 뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-      ],
-      nextCursor: 8,
-      hasNext: true,
-    },
-  },
-  {
-    tags: [
-      {
-        id: 3,
-        name: '비즈니스',
-      },
-    ],
-    newsList: {
-      data: [
-        {
-          id: 9,
-          title: '5G 스마트폰 이용자 과반 넘겨, 통신비 지출 4년 만에 소폭 감소',
-          newsProvider: 'businesspost',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 10,
-          title: '송년회는 어디서...칵테일클래스 등 팝업스토어로 소비자와 소통 강화',
-          newsProvider: '연합뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-        {
-          id: 11,
-          title: '올해 대주주 1만3쳔명 50억원으로 금ㅇ리 상향시 양도세 대상 70% 감소',
-          newsProvider: '네이트 뉴스',
-          newsUrl: '',
-          thumbnailUrl: 'https://r.yna.co.kr/global/home/v01/img/yonhapnews_logo_600x600_kr01.jpg',
-        },
-      ],
-      nextCursor: 5,
-      hasNext: true,
-    },
-  },
-];
diff --git a/services/web/src/app/trend/page.css.ts b/services/web/src/app/trend/page.css.ts
index e399cb9a..ed4af563 100644
--- a/services/web/src/app/trend/page.css.ts
+++ b/services/web/src/app/trend/page.css.ts
@@ -1,27 +1,10 @@
 import { colors } from '@linker/styles';
 import { style } from '@vanilla-extract/css';
 
-export const scheduleWrapper = style({
-  display: 'flex',
-  gap: '1rem',
-  marginTop: '1.2rem',
+export const pageWrapper = style({
+  backgroundColor: colors.white,
 });
 
-export const sideBar = style({
-  alignSelf: 'stretch',
-  width: '0.4rem',
-  backgroundColor: colors.green,
-  borderRadius: '2px',
-});
-
-export const scheduleInfo = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '0.4rem',
-});
-
-export const infoItem = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '0.4rem',
+export const header = style({
+  backgroundColor: colors.white,
 });
diff --git a/services/web/src/app/trend/page.tsx b/services/web/src/app/trend/page.tsx
index 3163621d..90b64d9a 100644
--- a/services/web/src/app/trend/page.tsx
+++ b/services/web/src/app/trend/page.tsx
@@ -6,23 +6,23 @@ import { BackHeader } from '@linker/lds';
 
 import { getTokens } from '@utils/token/server';
 
-import { recommendations } from './__mock__';
-
-function getTrends() {
-  return Promise.resolve(recommendations);
-
-  return ky.get<
-    Array<{
-      tags: TagDTO[];
-      newsList: {
-        data: NewsDTO[];
-        nextCursor: number | null;
-        hasNext: boolean;
-      };
-    }>
-  >('/v1/news/trend');
+import { pageWrapper, header } from './page.css';
+
+export interface TrendDTO {
+  recommendations: Array<{
+    tags: TagDTO[];
+    newsList: {
+      data: NewsDTO[];
+      nextCursor: number | null;
+      hasNext: boolean;
+    };
+  }>;
 }
 
+const getTrend = () => {
+  return ky.get<TrendDTO>('/v1/news/trend');
+};
+
 async function TrendPage() {
   const accessToken = getTokens().accessToken;
 
@@ -30,13 +30,13 @@ async function TrendPage() {
     return;
   }
 
-  const recommendations = await getTrends();
+  const { recommendations } = await getTrend();
 
   return (
-    <>
-      <BackHeader title="트렌드 핫 이슈" />
+    <div className={pageWrapper}>
+      <BackHeader title="트렌드 핫 이슈" className={header} />
       <NewsList recommendations={recommendations} />
-    </>
+    </div>
   );
 }
 
diff --git a/services/web/src/features/news-list/NewsList.css.ts b/services/web/src/features/news-list/NewsList.css.ts
index 4464df7c..da24e22e 100644
--- a/services/web/src/features/news-list/NewsList.css.ts
+++ b/services/web/src/features/news-list/NewsList.css.ts
@@ -1,13 +1,16 @@
+import { colors } from '@linker/styles';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
-  marginTop: '3rem',
+  marginTop: '1.2rem',
+  backgroundColor: colors.white,
 });
 
 export const chipWrapper = style({
   display: 'flex',
   gap: '0.8rem',
   overflowY: 'auto',
+  padding: '1rem 2rem',
 });
 
 export const chip = style({
@@ -16,4 +19,5 @@ export const chip = style({
 
 export const newsListWrapper = style({
   marginTop: '0.8rem',
+  padding: '0 2rem',
 });
diff --git a/services/web/src/features/news-list/NewsList.tsx b/services/web/src/features/news-list/NewsList.tsx
index 1ac164d0..82cdf33b 100644
--- a/services/web/src/features/news-list/NewsList.tsx
+++ b/services/web/src/features/news-list/NewsList.tsx
@@ -3,7 +3,7 @@
 import { NewsDTO } from '@/types/news';
 import { TagDTO } from '@/types/tag';
 import { kyClient } from '@linker/ky';
-import { HorizonScroller, Chip, List, InfiniteScroll } from '@linker/lds';
+import { HorizonScroller, Chip, InfiniteScroll } from '@linker/lds';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useState, useCallback } from 'react';
 
@@ -79,7 +79,7 @@ function NewsList({ recommendations }: NewsListProps) {
   }, [data.length, fetchNextPage]);
 
   return (
-    <List className={wrapper}>
+    <div className={wrapper}>
       <HorizonScroller className={chipWrapper}>
         {recommendations.map((recommendation, index) => (
           <Chip
@@ -102,7 +102,7 @@ function NewsList({ recommendations }: NewsListProps) {
           ))}
         </InfiniteScroll>
       </ul>
-    </List>
+    </div>
   );
 }