Merge pull request #57 from Nexters/feat/header-logic-fix

fix: 헤더 로직 수정, navigate 핸들러 수정

Author: sikkzz

apps/tuk-web/src/app/gathering/[gatheringId]/invites/src/components/GatheringInviteList.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import ReceiveInviteList from '@/app/gathering/[gatheringId]/invites/src/components/ReceiveInviteList';
 import SendInviteList from '@/app/gathering/[gatheringId]/invites/src/components/SendInviteList';
-import { Header, Tabs, LeftArrowIcon } from '@/shared/components';
+import { Header, LeftArrowIcon, Tabs } from '@/shared/components';
 import { useAppBridge } from '@/shared/components/provider/AppBridgeProvider';
 import { AppBridgeMessageType } from '@/shared/lib';
 

apps/tuk-web/src/app/invite/meet/[meetId]/src/service/proposal-api.service.ts

@@ -5,6 +5,7 @@ export class ProposalAPIService {
   constructor(private fetch: RestAPIProtocol) {}
 
   getProposalDetail(proposalId: number) {
+    throw new Error('error');
     return this.fetch.get({
       url: ':proposalId',
       param: {

apps/tuk-web/src/app/proposal/[proposalId]/detail/components/GatheringProposalContent.tsx

@@ -1,20 +1,21 @@
 'use client';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
-// import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
 import { ProposalItemType } from '@/app/gathering/[gatheringId]/invites/src/service/schema/get-gathering-proposals.schema';
 import { QuoteIcon } from '@/app/invite/meet/[meetId]/src/components/InviteProposal';
 import { proposalAPIService } from '@/app/invite/meet/[meetId]/src/service';
+import { CloseIcon32, Header } from '@/shared/components';
+import { useAppBridge } from '@/shared/components/provider/AppBridgeProvider';
 import { useParam } from '@/shared/hooks/useParam';
-import { cn } from '@/shared/lib';
-
-// import { CloseIcon32, Header } from '@/shared/components';
+import { AppBridgeMessageType, cn } from '@/shared/lib';
 
 const GatheringProposalContent = () => {
   const proposalId = Number(useParam('proposalId'));
 
+  const { send } = useAppBridge();
+
   const [slideDown, setSlideDown] = useState(false);
 
   const {
@@ -37,14 +38,16 @@ const GatheringProposalContent = () => {
     <div className="relative h-screen w-full overflow-hidden">
       <div className="absolute left-[-259px] top-[244px] z-0 h-[406px] w-[898px] bg-gradient-to-b from-[#FFA098] via-[#FFAC85] to-[#FFFEFE] blur-[100px]" />
 
-      {/* <Header className="bg-transparent">
+      <Header className="bg-transparent">
         <Header.Left />
-        <Header.Right>
+        <Header.Right
+          onClick={() => send({ type: AppBridgeMessageType.NAVIGATE_BACK, payload: '' })}
+        >
           <Header.Button>
             <CloseIcon32 />
           </Header.Button>
         </Header.Right>
-      </Header> */}
+      </Header>
 
       <h2 className="serif-title-24-M px-5 text-[#222222]">
         보고싶은 마음이

apps/tuk-web/src/app/proposal/[proposalId]/detail/components/GatheringProposalErrorFallback.tsx

@@ -1,28 +1,47 @@
+import { CloseIcon32, Header } from '@/shared/components';
+import { useAppBridge } from '@/shared/components/provider/AppBridgeProvider';
+import { AppBridgeMessageType } from '@/shared/lib';
+
 const GatheringProposalErrorFallback = ({
   resetErrorBoundary,
 }: {
   error: unknown;
   resetErrorBoundary: () => void;
 }) => {
+  const { send } = useAppBridge();
+
   return (
-    <div className="flex flex-col items-center">
-      <div className="mt-[200px]">
-        <p className="serif-title-22-M text-center text-gray-900">
-          초대장을 불러오는 중<br />
-          오류가 발생했어요
-        </p>
-        <p className="pretendard-body-14-R mt-6 text-center text-gray-700">
-          아래 버튼을 눌러 재시도해 보세요
-        </p>
-      </div>
+    <>
+      <Header className="bg-transparent">
+        <Header.Left />
+        <Header.Right
+          onClick={() => send({ type: AppBridgeMessageType.NAVIGATE_BACK, payload: '' })}
+        >
+          <Header.Button>
+            <CloseIcon32 />
+          </Header.Button>
+        </Header.Right>
+      </Header>
 
-      <button
-        className="pretendard-body-14-M mt-[30px] flex h-[34px] w-[96px] items-center justify-center rounded-full border border-gray-900 bg-white-default"
-        onClick={resetErrorBoundary}
-      >
-        재시도하기
-      </button>
-    </div>
+      <div className="flex flex-col items-center">
+        <div className="mt-[200px]">
+          <p className="serif-title-22-M text-center text-gray-900">
+            초대장을 불러오는 중<br />
+            오류가 발생했어요
+          </p>
+          <p className="pretendard-body-14-R mt-6 text-center text-gray-700">
+            아래 버튼을 눌러 재시도해 보세요
+          </p>
+        </div>
+
+        <button
+          className="pretendard-body-14-M mt-[30px] flex h-[34px] w-[96px] items-center justify-center rounded-full border border-gray-900 bg-white-default"
+          onClick={resetErrorBoundary}
+        >
+          재시도하기
+        </button>
+      </div>
+    </>
   );
 };
 

apps/tuk-web/src/shared/lib/app-bridge/convertToNativeMessage.ts

@@ -2,9 +2,9 @@ import { AppBridgeMessageType, AppBridgeMessage } from './appBridgeMessageType';
 
 const iosHandlers = {
   [AppBridgeMessageType.NAVIGATE_GATHERING_DETAIL]: (message: string) =>
-    window.webkit?.messageHandlers.navigateBack.postMessage(message),
-  [AppBridgeMessageType.NAVIGATE_BACK]: (message: string) =>
     window.webkit?.messageHandlers.navigateGatheringDetail.postMessage(message),
+  [AppBridgeMessageType.NAVIGATE_BACK]: (message: string) =>
+    window.webkit?.messageHandlers.navigateBack.postMessage(message),
   [AppBridgeMessageType.NAVIGATE_HOME]: (message: string) =>
     window.webkit?.messageHandlers.navigateHome.postMessage(message),
   [AppBridgeMessageType.REQUEST_TOKEN_REFRESH]: (message: string) =>