feat: 뒤로 가기에 대한 webview goBack 브릿지 추가

pickly-team · Aug 6, 2023 · 62ddc5e · 62ddc5e · vercel · Aug 6, 2023
1 parent 2ad7719
commit 62ddc5e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/common-ui/Header/Header.tsx b/src/common-ui/Header/Header.tsx
@@ -5,6 +5,7 @@ import { theme } from '@/styles/theme';
 import { ReactNode } from 'react';
 import getRem from '@/utils/getRem';
 import { HEADER_Z_INDEX } from '@/constants/zIndex';
+import useWebview from '@/common/service/hooks/useWebview';
 
 interface HeaderProps {
   showBackButton?: boolean;
@@ -19,8 +20,10 @@ const Header = ({
   rightButton,
   backButtonCallback,
 }: HeaderProps) => {
+  const { postMessage } = useWebview();
   const onClickBackButton = () => {
     window.history.back();
+    postMessage('goBack');
     backButtonCallback && backButtonCallback();
   };
   return (

diff --git a/src/common-ui/Header/HeaderLeftAndRight.tsx b/src/common-ui/Header/HeaderLeftAndRight.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import Icon from '../assets/Icon';
 import Text from '../Text';
+import useWebview from '@/common/service/hooks/useWebview';
 
 export interface HeaderProps {
   leftButton: {
@@ -31,11 +32,16 @@ const HeaderLeftAndRight = ({
   middleText,
   rightButton,
 }: HeaderProps) => {
+  const { postMessage } = useWebview();
+  const onClickBackButton = () => {
+    leftButton.onClick();
+    postMessage('goBack');
+  };
   return (
     <StyleHeader>
       <Left>
         {leftButton.type === 'back' && (
-          <button onClick={leftButton.onClick}>
+          <button onClick={onClickBackButton}>
             <Icon name="back" size="m" />
           </button>
         )}