[Fix] message 페이지 CORS 에러 수정 및 필드명 변경

src/api/service/follower-service/index.ts

@@ -1,14 +1,10 @@
-import { baseAPI } from '@/api/core';
+import { api } from '@/api/core';
+import { Follower } from '@/types/service/follow';
 
 export const followerServiceRemote = () => ({
   // 팔로워 목록 조회
   // 임시주소로 작성. 나중에 수정 필요.
   getFollowers: async () => {
-    try {
-      const response = await baseAPI.get('http://localhost:4000/followers');
-      return response.data;
-    } catch (error) {
-      throw error;
-    }
+    return api.get<Follower[]>('/followers');
   },
 });

src/components/pages/message/message-following-card/index.stories.tsx

@@ -21,16 +21,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const baseArgs = {
-  id: 0,
-  name: '신짱구',
+  userId: 0,
+  nickname: '신짱구',
   profileImage:
     'https://images.unsplash.com/photo-1714635218254-740bad86a0e8?q=80&w=765&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 };
 
 export const FollowingCardTable: Story = {
   args: {
-    id: 0,
-    name: '',
+    userId: 0,
+    nickname: '',
     profileImage: '',
     profileMessage: '',
     type: 'following',

src/components/pages/message/message-following-card/index.test.tsx

@@ -8,8 +8,8 @@ jest.mock('next/navigation', () => ({
   useRouter: jest.fn(),
 }));
 const defaultProps = {
-  id: 0,
-  name: '얼룩말',
+  userId: 0,
+  nickname: '얼룩말',
   profileImage: '/test.png',
   profileMessage: '안녕하세요!',
 };

src/components/pages/message/message-following-card/index.tsx

@@ -4,8 +4,8 @@ import { useRouter } from 'next/navigation';
 import { cn } from '@/lib/utils';
 
 interface FollowingCardProps {
-  id: number;
-  name: string;
+  userId: number;
+  nickname: string;
   profileImage: string;
   profileMessage: string;
   type: 'following' | 'message';
@@ -14,8 +14,8 @@ interface FollowingCardProps {
 }
 
 export const FollowingCard = ({
-  id,
-  name,
+  userId,
+  nickname,
   profileImage,
   profileMessage,
   type,
@@ -24,7 +24,7 @@ export const FollowingCard = ({
 }: FollowingCardProps) => {
   const router = useRouter();
   const handleClick = () => {
-    router.push(`/profile/${id}`);
+    router.push(`/profile/${userId}`);
   };
   return (
     <div
@@ -35,12 +35,12 @@ export const FollowingCard = ({
       <Image
         width={48}
         className='size-12 rounded-full object-cover'
-        alt={name}
+        alt={nickname}
         height={48}
         src={profileImage}
       />
       <div className='flex flex-1 flex-col'>
-        <span className='text-text-md-bold text-gray-800'>{name}</span>
+        <span className='text-text-md-bold text-gray-800'>{nickname}</span>
         <span
           className={cn(
             'text-text-sm-medium line-clamp-1',

src/components/pages/message/message-following-list/index.test.tsx

@@ -6,21 +6,21 @@ import { FollowingList } from '.';
 
 const TEST_ITEMS = [
   {
-    id: 0,
-    name: '신짱구',
+    userId: 0,
+    nickname: '신짱구',
     profileImage: 'http://test.com',
     profileMessage: '안녕하세요 신짱구입니다',
   },
   {
-    id: 1,
-    name: '김맹구',
+    userId: 1,
+    nickname: '김맹구',
     profileImage: 'http://test.com',
     profileMessage: '안녕하세요 김맹구입니다',
   },
 
   {
-    id: 2,
-    name: '흰둥이',
+    userId: 2,
+    nickname: '흰둥이',
     profileImage: 'http://test.com',
     profileMessage: '안녕하세요 흰둥이입니다',
   },
@@ -42,7 +42,7 @@ describe('Following List 컴포넌트 테스트', () => {
     render(<FollowingList items={TEST_ITEMS} />);
 
     TEST_ITEMS.forEach((item) => {
-      expect(screen.getByText(item.name)).toBeInTheDocument();
+      expect(screen.getByText(item.nickname)).toBeInTheDocument();
     });
   });
 });

src/components/pages/message/message-following-list/index.tsx

@@ -1,29 +1,24 @@
 'use client';
 
-import { FollowingCard } from '../message-following-card';
+import { Follower } from '@/types/service/follow';
 
-interface FollowingItem {
-  id: number;
-  name: string;
-  profileImage: string;
-  profileMessage: string;
-}
+import { FollowingCard } from '../message-following-card';
 
 interface FollowingListProps {
-  items: FollowingItem[];
+  items: Follower[];
 }
 
 export const FollowingList = ({ items }: FollowingListProps) => {
   return (
     <div>
       {items.map((item) => (
         <FollowingCard
-          key={item.id}
-          id={item.id}
-          name={item.name}
+          key={item.userId}
+          nickname={item.nickname}
           profileImage={item.profileImage}
           profileMessage={item.profileMessage}
           type='following'
+          userId={item.userId}
         />
       ))}
     </div>

src/mock/service/followers/followers-handler.ts

@@ -1,12 +1,20 @@
 import { http, HttpResponse } from 'msw';
 
+import { createMockErrorResponse, createMockSuccessResponse } from '../common/common-mock';
 import { mockFollowingItems } from './followers-mocks';
 
-const getFollowersMock = http.get('http://localhost:4000/followers', () => {
+const getFollowersMock = http.get('*/followers', () => {
   if (!mockFollowingItems) {
-    return HttpResponse.json({ message: '팔로잉 목록이 없습니다.' }, { status: 404 });
+    return HttpResponse.json(
+      createMockErrorResponse({
+        status: 404,
+        detail: '팔로우가 없습니다.',
+        errorCode: 'F001',
+      }),
+      { status: 404 },
+    );
   }
-  return HttpResponse.json(mockFollowingItems);
+  return HttpResponse.json(createMockSuccessResponse(mockFollowingItems));
 });
 
 export const followerHandlers = [getFollowersMock];

src/types/service/follow.ts

@@ -0,0 +1,6 @@
+export interface Follower {
+  userId: number;
+  nickname: string;
+  profileImage: string;
+  profileMessage: string;
+}