feat: [LINKER-120] 지인페이지 관심주제 구현 (#77)

YAPP-Github · Feb 23, 2024 · 78c517e · 78c517e
1 parent 9e13fdf
commit 78c517e
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 866 deletions.
diff --git a/services/web/src/app/friend/[id]/subject/page.tsx b/services/web/src/app/friend/[id]/subject/page.tsx
@@ -1,5 +1,42 @@
-function SubjectPage() {
-  return <div>관심주제</div>;
+import { NewsDTO } from '@/types/news';
+import { TagDTO } from '@/types/tag';
+import { NewsList } from '@features/news-list';
+import { ky } from '@linker/ky';
+
+import { getTokens } from '@utils/token/server';
+
+export interface FriendNewsListDTO {
+  recommendations: Array<{
+    tags: TagDTO[];
+    newsList: {
+      data: NewsDTO[];
+      nextCursor: number | null;
+      hasNext: boolean;
+    };
+  }>;
+}
+
+function getFriendNewsList(contactId: string, size = 20) {
+  return ky.get<FriendNewsListDTO>(`/v1/contacts/${contactId}/interest/news?size=${size}`);
+}
+
+async function SubjectPage({ params }: { params: { id: string } }) {
+  const accessToken = getTokens().accessToken;
+
+  if (accessToken == null) {
+    return;
+  }
+
+  const { recommendations } = await getFriendNewsList(params.id);
+
+  return (
+    <div>
+      {/* <Link href="">
+        <div className={addSubjectButon}>+ 관심주제 추가하기</div>
+      </Link> */}
+      <NewsList recommendations={recommendations} />
+    </div>
+  );
 }
 
 export default SubjectPage;
diff --git a/services/web/src/app/my/feed/trend/components/MoreButton.tsx b/services/web/src/app/my/feed/trend/components/MoreButton.tsx
@@ -1,29 +1,32 @@
 import { Button, Txt } from '@linker/lds';
 import { colors } from '@linker/styles';
 import Image from 'next/image';
+import Link from 'next/link';
 
 import { button } from './MoreButton.css';
 
 function MoreButton() {
   return (
-    <Button className={button}>
-      <Image
-        src="https://static.im-linker.com/icons/refresh.png"
-        width={20}
-        height={20}
-        alt="pencil-icon"
-      />
-      <Txt typography="b3" color={colors.blue500}>
-        관심사 최신뉴스&nbsp;
-      </Txt>
-      <Txt typography="b3" color={colors.gray500}>
-        더 보기&nbsp;
-      </Txt>
-      {/** @todo 기획적으로 명확하지 않아 임시로 markup만 작성. 추후 구현필요 */}
-      <Txt typography="b3" color={colors.gray500}>
-        1/5
-      </Txt>
-    </Button>
+    <Link href="/trend">
+      <Button className={button}>
+        <Image
+          src="https://static.im-linker.com/icons/refresh.png"
+          width={20}
+          height={20}
+          alt="pencil-icon"
+        />
+        <Txt typography="b3" color={colors.blue500}>
+          관심사 최신뉴스&nbsp;
+        </Txt>
+        <Txt typography="b3" color={colors.gray500}>
+          더 보기&nbsp;
+        </Txt>
+        {/** @todo 기획적으로 명확하지 않아 임시로 markup만 작성. 추후 구현필요 */}
+        <Txt typography="b3" color={colors.gray500}>
+          1/5
+        </Txt>
+      </Button>
+    </Link>
   );
 }
 

diff --git a/services/web/src/app/my/feed/trend/components/Trend.tsx b/services/web/src/app/my/feed/trend/components/Trend.tsx
@@ -27,7 +27,7 @@ async function Trend() {
 
   return (
     <List>
-      <Link href="">
+      <Link href="/trend">
         <List.Header
           title="트렌드 핫 이슈"
           typograyphy="h7"