From 27254da924e615bb8913b8859cc0bcbe843e7962 Mon Sep 17 00:00:00 2001
From: hjy0951 <hjy0951@gmail.com>
Date: Thu, 29 Aug 2024 00:41:53 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=86=8C=EC=8B=9D=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=ED=97=A4=EB=8D=94=20API=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/api/friend/following/summary/route.ts     | 13 +++++
 .../atoms/following-list-link-button.tsx      | 58 +++++++------------
 features/news/hooks/index.ts                  |  1 +
 features/news/hooks/use-following-summary.ts  | 22 +++++++
 features/news/types/index.ts                  |  8 +++
 5 files changed, 65 insertions(+), 37 deletions(-)
 create mode 100644 app/api/friend/following/summary/route.ts
 create mode 100644 features/news/hooks/use-following-summary.ts

diff --git a/app/api/friend/following/summary/route.ts b/app/api/friend/following/summary/route.ts
new file mode 100644
index 00000000..f641d098
--- /dev/null
+++ b/app/api/friend/following/summary/route.ts
@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+
+import { fetchData } from '@/apis/fetch-data';
+import { FollowingSummaryResponse } from '@/features/news';
+
+export async function GET() {
+  const data = await fetchData<FollowingSummaryResponse>(
+    '/friend/following/summary',
+    'GET',
+  );
+
+  return NextResponse.json(data);
+}
diff --git a/features/news/components/atoms/following-list-link-button.tsx b/features/news/components/atoms/following-list-link-button.tsx
index 42de9260..d5e4ddf5 100644
--- a/features/news/components/atoms/following-list-link-button.tsx
+++ b/features/news/components/atoms/following-list-link-button.tsx
@@ -5,44 +5,22 @@ import { DefaultProfileIcon, Image, PersonsIcon } from '@/components/atoms';
 import { css, cx } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
-interface FollowingInfo {
-  memberId: number;
-  name: string;
-  introduction: string;
-  profileUrl?: string;
-}
-
-const dummy: { followings: Array<FollowingInfo>; followingCount: number } = {
-  followings: [
-    {
-      memberId: 1,
-      name: '홍길동',
-      introduction: '안녕하세요. 홍길동입니다',
-    },
-    {
-      memberId: 2,
-      name: '홍길동',
-      introduction: '안녕하세요. 홍길동입니다',
-    },
-    {
-      memberId: 3,
-      name: '홍길동',
-      introduction: '안녕하세요. 홍길동입니다',
-    },
-  ],
-  followingCount: 12,
-};
+import { useFollowingSummary } from '../../hooks';
 
 const MAX_NUMBER_OF_PROFILES = 3;
 
 export const FollowingListLinkButton = () => {
-  const { followings, followingCount } = dummy;
+  const { data: followingSummaryData } = useFollowingSummary();
+
+  if (!followingSummaryData) return null;
+
+  const { followings, followingCount } = followingSummaryData.data;
   const hasFollowings = followingCount > 0;
   const indexOffset = MAX_NUMBER_OF_PROFILES - followings.length;
   let nodeList: Array<ReactNode> = [];
 
   if (hasFollowings) {
-    nodeList = followings.map(({ memberId, profileUrl }, index) => (
+    nodeList = followings.map(({ memberId, profileImageUrl }, index) => (
       <div
         key={memberId}
         className={cx(
@@ -51,8 +29,13 @@ export const FollowingListLinkButton = () => {
           profileStyles[index + indexOffset],
         )}
       >
-        {profileUrl ? (
-          <Image src={profileUrl} alt="following profiles" />
+        {profileImageUrl ? (
+          <Image
+            src={profileImageUrl}
+            alt="following profiles"
+            width={24}
+            height={24}
+          />
         ) : (
           <DefaultProfileIcon width={24} height={24} />
         )}
@@ -95,22 +78,23 @@ const borderStyles = css({
   borderColor: 'white',
 });
 
-const baseProfileStyle = css({
+const baseProfileStyle = flex({
   position: 'absolute',
   top: '2px',
-  borderRadius: 'full',
   backgroundColor: 'white',
+  overflow: 'hidden',
 });
 
 const profileStyles = [
-  css({ right: '-96px' }),
-  css({ right: '-80px' }),
-  css({ right: '-64px' }),
+  css({ right: '-98px' }),
+  css({ right: '-82px' }),
+  css({ right: '-66px' }),
 ];
 
 const countStyles = css({
-  w: '14px',
+  w: '16px',
   h: '16px',
+  textAlign: 'center',
   textStyle: 'caption1',
   fontWeight: 'bold',
   color: 'primary.swim.총거리.default',
diff --git a/features/news/hooks/index.ts b/features/news/hooks/index.ts
index fa8036c4..f20dd8cd 100644
--- a/features/news/hooks/index.ts
+++ b/features/news/hooks/index.ts
@@ -1 +1,2 @@
+export * from './use-following-summary';
 export * from './use-news-data';
diff --git a/features/news/hooks/use-following-summary.ts b/features/news/hooks/use-following-summary.ts
new file mode 100644
index 00000000..3aa5c9b5
--- /dev/null
+++ b/features/news/hooks/use-following-summary.ts
@@ -0,0 +1,22 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+
+import { FollowingSummaryResponse } from '../types';
+
+const getFollowingSummary = async () => {
+  const res = await fetch('/api/friend/following/summary', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return res.json();
+};
+
+export const useFollowingSummary = () => {
+  return useQuery<FollowingSummaryResponse>({
+    queryKey: ['followingSummary'],
+    queryFn: () => getFollowingSummary(),
+    placeholderData: keepPreviousData,
+  });
+};
diff --git a/features/news/types/index.ts b/features/news/types/index.ts
index ba30703a..29c4819c 100644
--- a/features/news/types/index.ts
+++ b/features/news/types/index.ts
@@ -1,5 +1,6 @@
 import { Response } from '@/apis';
 import { TimeLineContent } from '@/features/main';
+import { MemberProfile } from '@/types';
 
 import { NewsItemWrapperProps } from '../components';
 
@@ -11,3 +12,10 @@ export type NewsResponse = Response<{
   cursorId: number;
   hasNext: boolean;
 }>;
+
+export interface FolowingSummaryData {
+  followings: Array<MemberProfile>;
+  followingCount: number;
+}
+
+export type FollowingSummaryResponse = Response<FolowingSummaryData>;