feat: 소식 페이지 헤더 API 연결

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

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',

features/news/hooks/index.ts

@@ -1 +1,2 @@
+export * from './use-following-summary';
 export * from './use-news-data';

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

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