⚙️ MSW Follow, Search, User Test 코드

src/app/mocks/browser.ts

@@ -3,12 +3,16 @@ import { setupWorker } from 'msw/browser';
 import { commentHandlers } from './handler/comment';
 import { feedHandlers } from './handler/feed';
 import { likeHandlers } from './handler/like';
-import { userHandlers } from './handler/user';
+import { followHandler } from './handler/follow';
+import { searchHandler } from './handler/search';
+import { userHandler } from './handler/user';
 
 // 브라우저에서 실행하기 위한 mocking worker 초기화
 export const worker = setupWorker(
   ...commentHandlers,
   ...feedHandlers,
   ...likeHandlers,
-  ...userHandlers,
+  ...followHandler,
+  ...searchHandler,
+  ...userHandler,
 );

src/app/mocks/consts/likeUser.ts

@@ -0,0 +1,58 @@
+import { User } from '@/shared/consts';
+
+interface Users {
+  [userId: number]: User;
+}
+
+export const likeUsers: Users = {
+  1: {
+    id: 2,
+    profileImage: 'https://picsum.photos/200/200',
+    name: '이의찬',
+    content: 'Legitgoons',
+    locked: false,
+    feedCount: 124,
+    followingCount: 2,
+    followerCount: 5341,
+  },
+  2: {
+    id: 3,
+    profileImage: 'https://picsum.photos/200/200',
+    name: '양재서',
+    content: 'psychology50',
+    locked: true,
+    feedCount: 6,
+    followingCount: 35,
+    followerCount: 423,
+  },
+  3: {
+    id: 5,
+    profileImage: 'https://picsum.photos/200/200',
+    name: '신얀',
+    content: 'yanni13',
+    locked: true,
+    feedCount: 51,
+    followingCount: 7897,
+    followerCount: 7890,
+  },
+  4: {
+    id: 4,
+    profileImage: 'https://picsum.photos/200/200',
+    name: '이수민',
+    content: 'SSXXMM22',
+    locked: true,
+    feedCount: 24,
+    followingCount: 42,
+    followerCount: 53251,
+  },
+  5: {
+    id: 7,
+    profileImage: 'https://picsum.photos/200/200',
+    name: '안성윤',
+    content: 'asn6878',
+    locked: true,
+    feedCount: 87,
+    followingCount: 67,
+    followerCount: 4556,
+  },
+};

src/app/mocks/consts/profileFeed.ts

@@ -9,25 +9,22 @@ interface ProfileFeeds {
 export const profileFeeds: ProfileFeeds = {
   1: {
     id: 1,
-    title: 'Feed Title 1',
-    content: 'Feed Content 1',
+    content: 'Profile Feed Content 1',
     thubnailImage: 'https://picsum.photos/200/200',
 
     likeCount: likes[1].totalCount,
     commentCount: comments[1].length,
   },
   2: {
     id: 2,
-    title: 'Feed Title 2',
-    content: 'Feed Content 2',
+    content: 'Profile Feed Content 2',
     thubnailImage: 'https://picsum.photos/200/200',
 
     likeCount: likes[2].totalCount,
     commentCount: comments[2].length,
   },
   3: {
     id: 3,
-    title: 'Feed Title 3',
     content: 'Feed Content 3',
     thubnailImage: 'https://picsum.photos/200/200',
 
@@ -36,53 +33,47 @@ export const profileFeeds: ProfileFeeds = {
   },
   4: {
     id: 4,
-    title: 'Feed Title 4',
-    content: 'Feed Content 4',
+    content: 'Profile Feed Content 4',
     thubnailImage: 'https://picsum.photos/200/200',
 
     likeCount: likes[4].totalCount,
     commentCount: comments[4].length,
   },
   5: {
     id: 5,
-    title: 'Feed Title 5',
-    content: 'Feed Content 5',
+    content: 'Profile Feed Content 5',
     thubnailImage: 'https://picsum.photos/200/200',
 
     likeCount: likes[5].totalCount,
     commentCount: comments[5].length,
   },
   6: {
     id: 6,
-    title: 'Feed Title 5',
-    content: 'Feed Content 5',
+    content: 'Profile Feed Content 5',
     thubnailImage: 'https://picsum.photos/200/200',
 
     likeCount: likes[6].totalCount,
     commentCount: comments[6].length,
   },
   7: {
     id: 7,
-    title: 'Feed Title 7',
-    content: 'Feed Content 7',
+    content: 'Profile Feed Content 7',
     thubnailImage: 'https://picsum.photos/200/200',
 
     likeCount: likes[7].totalCount,
     commentCount: comments[7].length,
   },
   8: {
     id: 8,
-    title: 'Feed Title 8',
-    content: 'Feed Content 8',
+    content: 'Profile Feed Content 8',
     thubnailImage: 'https://picsum.photos/200/200',
 
     likeCount: likes[8].totalCount,
     commentCount: comments[8].length,
   },
   9: {
     id: 9,
-    title: 'Feed Title 9',
-    content: 'Feed Content 9',
+    content: 'Profile Feed Content 9',
     thubnailImage: '',
 
     likeCount: likes[9].totalCount,

src/app/mocks/consts/relationshipStatus.ts

@@ -14,5 +14,5 @@ export const relationshipStatus: Relationship = {
   6: 'pending',
   7: 'following',
   8: 'none',
-  9: 'pending',
+  9: 'none',
 };

src/app/mocks/consts/user.ts

@@ -10,6 +10,7 @@ export const users: Users = {
     profileImage: 'https://picsum.photos/200/200',
     name: '강병준',
     content: 'bangdori',
+    locked: false,
     feedCount: 100,
     followingCount: 347,
     followerCount: 25,
@@ -19,6 +20,7 @@ export const users: Users = {
     profileImage: 'https://picsum.photos/200/200',
     name: '이의찬',
     content: 'Legitgoons',
+    locked: false,
     feedCount: 124,
     followingCount: 2,
     followerCount: 5341,
@@ -28,6 +30,7 @@ export const users: Users = {
     profileImage: 'https://picsum.photos/200/200',
     name: '양재서',
     content: 'psychology50',
+    locked: true,
     feedCount: 6,
     followingCount: 35,
     followerCount: 423,
@@ -37,6 +40,7 @@ export const users: Users = {
     profileImage: 'https://picsum.photos/200/200',
     name: '이수민',
     content: 'SSXXMM22',
+    locked: true,
     feedCount: 24,
     followingCount: 42,
     followerCount: 53251,
@@ -46,6 +50,7 @@ export const users: Users = {
     profileImage: 'https://picsum.photos/200/200',
     name: '신얀',
     content: 'yanni13',
+    locked: true,
     feedCount: 51,
     followingCount: 7897,
     followerCount: 7890,
@@ -55,6 +60,7 @@ export const users: Users = {
     profileImage: 'https://picsum.photos/200/200',
     name: '이주원',
     content: '2weeksone',
+    locked: false,
     feedCount: 97,
     followingCount: 98,
     followerCount: 8975,
@@ -64,6 +70,7 @@ export const users: Users = {
     profileImage: 'https://picsum.photos/200/200',
     name: '안성윤',
     content: 'asn6878',
+    locked: true,
     feedCount: 87,
     followingCount: 67,
     followerCount: 4556,
@@ -73,6 +80,7 @@ export const users: Users = {
     profileImage: 'https://picsum.photos/200/200',
     name: '이진우',
     content: 'jinlee1703',
+    locked: false,
     feedCount: 32,
     followingCount: 24,
     followerCount: 543,
@@ -82,6 +90,7 @@ export const users: Users = {
     profileImage: 'https://picsum.photos/200/200',
     name: '최희진',
     content: 'heejinnn',
+    locked: false,
     feedCount: 66,
     followingCount: 1,
     followerCount: 1,

src/app/mocks/handler/follow.ts

@@ -0,0 +1,87 @@
+import { http } from 'msw';
+
+import {
+  createHttpSuccessResponse,
+  createHttpErrorResponse,
+} from '../dir/response';
+
+import { relationshipStatus } from '../consts/relationshipStatus';
+import { users } from '../consts/user';
+
+export const followHandler = [
+  // 1️⃣ 팔로우 요청
+  http.post('/users/:user_id/follow', ({ params }) => {
+    const { user_id } = params;
+
+    if (isNaN(Number(user_id))) {
+      return createHttpErrorResponse('4220');
+    }
+
+    const formattedUserId = Number(user_id);
+    const followInfo = relationshipStatus[formattedUserId];
+
+    switch (followInfo) {
+      case 'self':
+        return createHttpErrorResponse('4220');
+      case 'none':
+        if (users[formattedUserId].locked) {
+          relationshipStatus[formattedUserId] = 'pending';
+        } else relationshipStatus[formattedUserId] = 'following';
+        break;
+      case 'following':
+        return createHttpErrorResponse('4220');
+      case 'pending':
+        return createHttpErrorResponse('4220');
+      default:
+        return createHttpErrorResponse('4040');
+    }
+
+    return createHttpSuccessResponse({});
+  }),
+  // 2️⃣ 언팔로우 & 팔로우 요청 취소
+  http.delete('/users/:user_id/follow', ({ params }) => {
+    const { user_id } = params;
+
+    if (isNaN(Number(user_id))) {
+      return createHttpErrorResponse('4220');
+    }
+
+    const formattedUserId = Number(user_id);
+    const followInfo = relationshipStatus[formattedUserId];
+
+    switch (followInfo) {
+      case 'self':
+        return createHttpErrorResponse('4220');
+      case 'none':
+        return createHttpErrorResponse('4220');
+      case 'following':
+        relationshipStatus[formattedUserId] = 'none';
+        break;
+      case 'pending':
+        relationshipStatus[formattedUserId] = 'none';
+        break;
+
+      default:
+        return createHttpErrorResponse('4040');
+    }
+
+    return createHttpSuccessResponse({});
+  }),
+  // 3️⃣ 팔로우 확인
+  http.get('/users/:user_id/follow', ({ params }) => {
+    const { user_id } = params;
+
+    if (isNaN(Number(user_id))) {
+      return createHttpErrorResponse('4220');
+    }
+
+    const formattedUserId = Number(user_id);
+    const followInfo = relationshipStatus[formattedUserId];
+
+    if (!followInfo) {
+      return createHttpErrorResponse('4040');
+    }
+
+    return createHttpSuccessResponse({ relationshipStatus: followInfo });
+  }),
+];

src/app/mocks/handler/search.ts

@@ -0,0 +1,42 @@
+import { http } from 'msw';
+import { User } from '@/shared/consts';
+
+import {
+  createHttpSuccessResponse,
+  createHttpErrorResponse,
+} from '../dir/response';
+
+import { users } from '../consts/user';
+import { likeUsers } from '../consts/likeUser';
+
+export const searchHandler = [
+  // 1️⃣ 사용자 검색
+  http.get('/users', ({ request }) => {
+    const url = new URL(request.url);
+    const query = url.searchParams.get('q');
+
+    if (!query) {
+      return createHttpErrorResponse('4220');
+    }
+
+    const filteredUsers: User[] = Object.values(users).filter((user) =>
+      user.name.includes(query),
+    );
+    return createHttpSuccessResponse({ users: filteredUsers });
+  }),
+  // 2️⃣ 좋아요 사용자 검색
+  http.get('/like', ({ request }) => {
+    const url = new URL(request.url);
+    const query = url.searchParams.get('q');
+
+    if (!query) {
+      return createHttpErrorResponse('4220');
+    }
+
+    const filteredUsers: User[] = Object.values(likeUsers).filter((user) =>
+      user.name.includes(query),
+    );
+
+    return createHttpSuccessResponse({ likeUsers: filteredUsers });
+  }),
+];