From 4e653ed54a61db63fe255e43e0698694d8400cb3 Mon Sep 17 00:00:00 2001
From: Dongmin Ahn <eamon3481@naver.com>
Date: Sun, 28 Jan 2024 13:44:01 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=ED=8C=94=EB=A1=9C=EC=9A=B0=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=88=ED=99=94=EB=A9=B4=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=ED=83=80=EC=9D=B8=ED=94=84=EB=A1=9C=ED=95=84=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=EC=9C=BC=EB=A1=9C=20=EB=9D=BC=EC=9A=B0=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/search/page.tsx                          | 14 ++++++++++----
 src/components/ListItem/Follow/FollowerItem.tsx  |  9 +++++----
 src/components/ListItem/Follow/FollowingItem.tsx |  6 ++++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index d623e897..e3bf3203 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -1,11 +1,13 @@
 'use client';
 
 import { Suspense, useState } from 'react';
+import Link from 'next/link';
 import { useSuspenseGetSearchNickname } from '@/apis/member';
 import FollowerItem from '@/components/ListItem/Follow/FollowerItem';
 import FollowingItem from '@/components/ListItem/Follow/FollowingItem';
 import { ProfileItemSkeleton } from '@/components/ListItem/ProfileListItem';
 import SearchBar from '@/components/SearchBar/SearchBar';
+import { ROUTER } from '@/constants/router';
 import { css } from '@/styled-system/css';
 
 function SearchPage() {
@@ -46,10 +48,14 @@ function List({ nickname }: { nickname: string }) {
           memberId: item.memberId,
           onButtonClick,
         };
-        return item.followStatus === 'FOLLOWING' ? (
-          <FollowingItem key={item.memberId} {...params} />
-        ) : (
-          <FollowerItem key={item.memberId} followStatus={item.followStatus} {...params} />
+        return (
+          <Link key={item.memberId} href={ROUTER.PROFILE.DETAIL(item.memberId)}>
+            {item.followStatus === 'FOLLOWING' ? (
+              <FollowingItem {...params} />
+            ) : (
+              <FollowerItem followStatus={item.followStatus} {...params} />
+            )}
+          </Link>
         );
       })}
     </ul>
diff --git a/src/components/ListItem/Follow/FollowerItem.tsx b/src/components/ListItem/Follow/FollowerItem.tsx
index a5a4ea90..c7e29099 100644
--- a/src/components/ListItem/Follow/FollowerItem.tsx
+++ b/src/components/ListItem/Follow/FollowerItem.tsx
@@ -1,4 +1,4 @@
-import { type ComponentProps } from 'react';
+import { type ComponentProps, type MouseEventHandler } from 'react';
 import { FOLLOW_API } from '@/apis/follow';
 import { isSeverError } from '@/apis/instance.api';
 import { type FollowStatusType } from '@/apis/schema/member';
@@ -15,12 +15,13 @@ interface Props extends Omit<ComponentProps<typeof ProfileListItem>, 'buttonElem
 function FollowerItem(props: Props) {
   const { triggerSnackBar } = useSnackBar();
 
-  const onFollowerClick = async () => {
+  const onFollowerClick: MouseEventHandler<HTMLButtonElement> = async (e) => {
+    e.preventDefault();
+
     try {
       await FOLLOW_API.addFollow(props.memberId);
       props.onButtonClick?.();
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
+    } catch (error) {
       if (isSeverError(error)) {
         triggerSnackBar({
           message: error.response.data.data.message,
diff --git a/src/components/ListItem/Follow/FollowingItem.tsx b/src/components/ListItem/Follow/FollowingItem.tsx
index 69c12954..d98b4eb6 100644
--- a/src/components/ListItem/Follow/FollowingItem.tsx
+++ b/src/components/ListItem/Follow/FollowingItem.tsx
@@ -1,4 +1,4 @@
-import { type ComponentProps } from 'react';
+import { type ComponentProps, type MouseEventHandler } from 'react';
 import { FOLLOW_API } from '@/apis/follow';
 import Button from '@/components/Button/Button';
 import { ProfileListItem } from '@/components/ListItem';
@@ -12,7 +12,9 @@ interface Props extends Omit<ComponentProps<typeof ProfileListItem>, 'buttonElem
 function FollowingItem(props: Props) {
   const { triggerSnackBar } = useSnackBar();
 
-  const onFollowerClick = async () => {
+  const onFollowerClick: MouseEventHandler<HTMLButtonElement> = async (e) => {
+    e.preventDefault();
+
     try {
       await FOLLOW_API.deleteFollow(props.memberId);
       props.onButtonClick?.();