feat: 밈퀴즈 결과화면에서 공유하기 브릿지 추가

Author: Cllaude99

apps/web/src/pages/MemeQuizPage/components/MemeQuizResult/index.tsx

@@ -21,16 +21,31 @@ import {
 } from './MemeQuizResult.styles';
 import useInAppBrowserDetect from '@/hooks/useInAppBrowserDetect';
 import { useMemeQuizMutation } from '@meme_wiki/apis';
+import { nativeBridge } from '@/utils/bridge';
+import { BridgeCommand, COMMAND_TYPE, CommandType } from '@/types/bridge';
 
 interface MemeQuizResultPageProps {
   rightCount: number;
 }
 
+// 전역에서 함수 정의
+if (typeof window !== 'undefined') {
+  window.onNativeEntered = (command: BridgeCommand<CommandType>) => {
+    // MemeDetailPage 컴포넌트의 setIsWebview를 호출하기 위한 커스텀 이벤트
+    window.dispatchEvent(
+      new CustomEvent('webviewStateChange', {
+        detail: command.type === COMMAND_TYPE.APP_ENTERED,
+      }),
+    );
+  };
+}
+
 const MemeQuizResult = ({ rightCount }: MemeQuizResultPageProps) => {
   const { moveToStore } = useInAppBrowserDetect();
   const [showToast, setShowToast] = useState(false);
   const { mutate: quizResult } = useMemeQuizMutation();
   const isFirstRender = useRef(true);
+  const [isWebview, setIsWebview] = useState(false);
 
   useEffect(() => {
     if (isFirstRender.current) {
@@ -39,6 +54,29 @@ const MemeQuizResult = ({ rightCount }: MemeQuizResultPageProps) => {
     }
   }, [rightCount, quizResult]);
 
+  useEffect(() => {
+    // 웹뷰 상태 변경 이벤트 리스너
+    const handleWebviewState = (event: CustomEvent<boolean>) => {
+      setIsWebview(event.detail);
+    };
+
+    // 이벤트 리스너 등록
+    window.addEventListener(
+      'webviewStateChange',
+      handleWebviewState as EventListener,
+    );
+
+    // 웹뷰 진입 알림
+    nativeBridge.webEntered();
+
+    return () => {
+      window.removeEventListener(
+        'webviewStateChange',
+        handleWebviewState as EventListener,
+      );
+    };
+  }, []);
+
   return (
     <Container>
       <ResultCard>
@@ -82,7 +120,17 @@ const MemeQuizResult = ({ rightCount }: MemeQuizResultPageProps) => {
             링크 복사하고 공유하기
           </ShareButton>
         </ToastContainer>
-        <MoreButton onClick={moveToStore}>더 많은 밈 보러가기</MoreButton>
+        <MoreButton
+          onClick={() => {
+            if (isWebview) {
+              nativeBridge.showMoreMemes();
+            } else {
+              moveToStore();
+            }
+          }}
+        >
+          더 많은 밈 보러가기
+        </MoreButton>
       </ButtonContainer>
     </Container>
   );

apps/web/src/types/bridge.ts

@@ -3,6 +3,7 @@ export const COMMAND_TYPE = {
   CUSTOM_MEME: 'CUSTOM_MEME',
   WEB_ENTERED: 'WEB_ENTERED',
   APP_ENTERED: 'APP_ENTERED',
+  SHOW_MORE_MEMES: 'SHOW_MORE_MEMES',
 } as const;
 
 export type CommandType = (typeof COMMAND_TYPE)[keyof typeof COMMAND_TYPE];
@@ -22,6 +23,7 @@ export type CommandDataMap = {
   [COMMAND_TYPE.CUSTOM_MEME]: CustomMemeData;
   [COMMAND_TYPE.WEB_ENTERED]: null;
   [COMMAND_TYPE.APP_ENTERED]: null;
+  [COMMAND_TYPE.SHOW_MORE_MEMES]: null;
 };
 
 export interface BridgeCommand<T extends CommandType> {

apps/web/src/utils/bridge.ts

@@ -75,6 +75,11 @@ class NativeBridge {
   webEntered() {
     this.sendCommand(COMMAND_TYPE.WEB_ENTERED);
   }
+
+  // 더 많은 밈 보기
+  showMoreMemes() {
+    this.sendCommand(COMMAND_TYPE.SHOW_MORE_MEMES);
+  }
 }
 
 export const nativeBridge = NativeBridge.getInstance();