feat: 바텀 아이콘 클릭시 햅틱 반응 추가

pickly-team · Aug 14, 2023 · 0dd1503 · 0dd1503 · vercel · Aug 14, 2023
1 parent 1fb51a5
commit 0dd1503
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git 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,21 +30,31 @@ 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} />
           )}
           {pathname !== `${navigatePath.MAIN}` && (
             <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
@@ -22,6 +22,7 @@ export interface PostBridgeParams {
   visitBookmark: {
     url: string;
   };
+  vibrate: null;
 }
 function useWebview<T extends keyof PostBridgeParams>() {
   return React.useMemo(() => {