From 0dd1503b95915432f0ee80d3175bdec1bc4cf3c9 Mon Sep 17 00:00:00 2001
From: ww8007 <wshmin1234@gmail.com>
Date: Mon, 14 Aug 2023 13:24:44 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B0=94=ED=85=80=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=ED=96=85=ED=8B=B1=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common-ui/BottomNavigation.tsx     | 25 ++++++++++++++++++++-----
 src/common/service/hooks/useWebview.ts |  1 +
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/common-ui/BottomNavigation.tsx b/src/common-ui/BottomNavigation.tsx
index 63a341bb..7589a606 100644
--- a/src/common-ui/BottomNavigation.tsx
+++ b/src/common-ui/BottomNavigation.tsx
@@ -8,6 +8,7 @@ import { BOTTOM_NAVIGATION_Z_INDEX } from '@/constants/zIndex';
 import { BsBookFill } from 'react-icons/bs';
 import { useGETNotificationListQuery } from '@/notification/api/notification';
 import useAuthStore from '@/store/auth';
+import useWebview from '@/common/service/hooks/useWebview';
 
 /**
  *
@@ -29,13 +30,23 @@ const BottomNavigation = () => {
     (notification) => !notification.isChecked,
   );
 
+  const { postMessage } = useWebview();
+
+  const onClickLink = () => {
+    postMessage('vibrate', null);
+  };
+
   return (
     <>
       <NavigationWrapper>
         <button onClick={onClickAddButton} css={plusButton}>
           <Icon name="plus" size="m" />
         </button>
-        <StyledLink to={navigatePath.MAIN} css={iconStyle}>
+        <StyledLink
+          onClick={onClickLink}
+          to={navigatePath.MAIN}
+          css={iconStyle}
+        >
           {pathname === `${navigatePath.MAIN}` && (
             <BsBookFill size={24} color={theme.colors.lightPrimary} />
           )}
@@ -43,7 +54,7 @@ const BottomNavigation = () => {
             <BsBookFill size={24} color={theme.colors.white} />
           )}
         </StyledLink>
-        <StyledLink to="/friend" css={iconStyle}>
+        <StyledLink onClick={onClickLink} to="/friend" css={iconStyle}>
           {pathname === `${navigatePath.FRIEND}` && (
             <Icon size="l" name="people-green" />
           )}
@@ -53,7 +64,11 @@ const BottomNavigation = () => {
         </StyledLink>
         {!!isCheckNotification && (
           <NotificationWithRedDot>
-            <StyledLink to="/notification" css={iconStyle}>
+            <StyledLink
+              onClick={onClickLink}
+              to="/notification"
+              css={iconStyle}
+            >
               {pathname === `${navigatePath.NOTIFICATION}` && (
                 <Icon size="m" name="alarm-green" />
               )}
@@ -65,7 +80,7 @@ const BottomNavigation = () => {
           </NotificationWithRedDot>
         )}
         {!isCheckNotification && (
-          <StyledLink to="/notification" css={iconStyle}>
+          <StyledLink onClick={onClickLink} to="/notification" css={iconStyle}>
             {pathname === `${navigatePath.NOTIFICATION}` && (
               <Icon size="m" name="alarm-green" />
             )}
@@ -74,7 +89,7 @@ const BottomNavigation = () => {
             )}
           </StyledLink>
         )}
-        <StyledLink to="/profile" css={iconStyle}>
+        <StyledLink onClick={onClickLink} to="/profile" css={iconStyle}>
           {pathname === `${navigatePath.PROFILE}` && (
             <Icon size="m" name="profile-green" />
           )}
diff --git a/src/common/service/hooks/useWebview.ts b/src/common/service/hooks/useWebview.ts
index a4546bad..67691efd 100644
--- a/src/common/service/hooks/useWebview.ts
+++ b/src/common/service/hooks/useWebview.ts
@@ -22,6 +22,7 @@ export interface PostBridgeParams {
   visitBookmark: {
     url: string;
   };
+  vibrate: null;
 }
 function useWebview<T extends keyof PostBridgeParams>() {
   return React.useMemo(() => {