feat: [LINKER-118] 트렌드 핫이슈 상세페이지 구현 (#59)

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({

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={() => {

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 (
     <>

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,
 });

services/web/src/app/trend/page.tsx

@@ -6,37 +6,37 @@ 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;
 
   if (accessToken == null) {
     return;
   }
 
-  const recommendations = await getTrends();
+  const { recommendations } = await getTrend();
 
   return (
-    <>
-      <BackHeader title="트렌드 핫 이슈" />
+    <div className={pageWrapper}>
+      <BackHeader title="트렌드 핫 이슈" className={header} />
       <NewsList recommendations={recommendations} />
-    </>
+    </div>
   );
 }
 

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',
 });