fix: Followings에서 Suspense 제거 #100

다음과 같은 문제가 있음
- `Suspense` 부모 컴포넌트도 렌더링 블록되는 문제
- 같은 레벨의 `Followers`에서 `useQuery`에 `suspense: true` 옵션 주면 다음과 같은 에러 발생

```
Uncaught Error: A component suspended while responding to synchronous input
```

client/src/hooks/useFollowingsQuery.ts

@@ -1,13 +1,11 @@
-import {
-  getFollowings,
-  GetFollowingsResponse,
-  GetFollowingsResult,
-} from '@apis/user';
+import type { GetFollowingsResponse, GetFollowingsResult } from '@apis/user';
+
+import { getFollowings } from '@apis/user';
 import { useQuery } from '@tanstack/react-query';
 
 import queryKeyCreator from '@/queryKeyCreator';
 
-type FollowingQueryData = {
+type FollowingsQueryData = {
   statusCode: number;
 } & GetFollowingsResult;
 
@@ -19,7 +17,7 @@ const useFollowingsQuery = (
   const query = useQuery<
     GetFollowingsResponse,
     unknown,
-    FollowingQueryData,
+    FollowingsQueryData,
     [string]
   >(key, getFollowings, {
     ...options,

client/src/layouts/Followings/index.tsx

@@ -3,15 +3,13 @@ import SearchInput from '@components/searchInput';
 import UserList from '@components/UserList';
 import useDebouncedValue from '@hooks/useDebouncedValue';
 import useFollowingsQuery from '@hooks/useFollowingsQuery';
-import React, { useState, Suspense } from 'react';
+import React, { useState } from 'react';
 
 const Followings = () => {
   const DEBOUNCE_DELAY = 500;
   const [filter, setFilter] = useState('');
   const debouncedFilter = useDebouncedValue(filter, DEBOUNCE_DELAY);
-  const followingsQuery = useFollowingsQuery(debouncedFilter, {
-    suspense: true,
-  });
+  const followingsQuery = useFollowingsQuery(debouncedFilter);
 
   return (
     <div>
@@ -22,17 +20,17 @@ const Followings = () => {
           placeholder="검색하기"
         />
       </div>
-      <Suspense fallback={<div>loading...</div>}>
-        {followingsQuery.data?.followings.length ? (
-          <UserList>
-            {followingsQuery.data.followings.map((user) => (
-              <FollowingUserItem key={user._id} user={user} />
-            ))}
-          </UserList>
-        ) : (
-          '일치하는 사용자가 없습니다.'
-        )}
-      </Suspense>
+      {followingsQuery.isLoading ? (
+        <div>loading...</div>
+      ) : followingsQuery.data?.followings.length ? (
+        <UserList>
+          {followingsQuery.data.followings.map((user) => (
+            <FollowingUserItem key={user._id} user={user} />
+          ))}
+        </UserList>
+      ) : (
+        '일치하는 사용자가 없습니다.'
+      )}
     </div>
   );
 };