Merge pull request #26 from Nexters/feat/receive-invite-ui

sikkzz · web-flow · commit 3bc9cdfe9fab · 2025-08-06T17:28:52.000+09:00
feat: 받은 초대장 페이지 퍼블리싱
diff --git a/apps/tuk-web/src/app/gathering/[gatheringId]/invites/page.tsx b/apps/tuk-web/src/app/gathering/[gatheringId]/invites/page.tsx
@@ -0,0 +1,5 @@
+import GatheringInviteList from '@/app/gathering/[gatheringId]/invites/src/components/GatheringInviteList';
+
+export default function GatheringInviteListPage() {
+  return <GatheringInviteList />;
+}
diff --git a/apps/tuk-web/src/app/gathering/[gatheringId]/invites/src/components/GatheringInviteList.tsx b/apps/tuk-web/src/app/gathering/[gatheringId]/invites/src/components/GatheringInviteList.tsx
@@ -2,13 +2,13 @@
 
 import { useState } from 'react';
 
-import ReceiveInviteList from '@/app/invite-list/src/components/ReceiveInviteList';
-import SendInviteList from '@/app/invite-list/src/components/SendInviteList';
+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 { useAppBridge } from '@/shared/components/provider/AppBridgeProvider';
 import { AppBridgeMessageType } from '@/shared/lib';
 
-const InviteList = () => {
+const GatheringInviteList = () => {
   const [tab, setTab] = useState('sent');
 
   const { send } = useAppBridge();
@@ -43,4 +43,4 @@ const InviteList = () => {
   );
 };
 
-export default InviteList;
+export default GatheringInviteList;
diff --git a/apps/tuk-web/src/app/gathering/[gatheringId]/invites/src/components/ReceiveDetailModal.tsx b/apps/tuk-web/src/app/gathering/[gatheringId]/invites/src/components/ReceiveDetailModal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { InviteCard } from '@/app/invite/meet/src/components/InviteMeet';
+import { InviteCard } from '@/app/invite/meet/[meetId]/src/components/InviteMeet';
 import { CloseIcon32, Header } from '@/shared/components';
 import InviteCardFrame from '@/shared/components/InviteCardFrame';
 
diff --git a/apps/tuk-web/src/app/gathering/[gatheringId]/invites/src/components/ReceiveInviteList.tsx b/apps/tuk-web/src/app/gathering/[gatheringId]/invites/src/components/ReceiveInviteList.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-import { InviteCard } from '@/app/invite/meet/src/components/InviteMeet';
-import InviteDetailModal from '@/app/invite-list/src/components/ReceiveDetailModal';
+import InviteDetailModal from '@/app/gathering/[gatheringId]/invites/src/components/ReceiveDetailModal';
+import { InviteCard } from '@/app/invite/meet/[meetId]/src/components/InviteMeet';
 import InviteCardFrame from '@/shared/components/InviteCardFrame';
 
 const ReceiveInviteList = () => {
diff --git a/apps/tuk-web/src/app/gathering/[gatheringId]/invites/src/components/SendInviteList.tsx b/apps/tuk-web/src/app/gathering/[gatheringId]/invites/src/components/SendInviteList.tsx
diff --git a/apps/tuk-web/src/app/gathering/meet/page.tsx b/apps/tuk-web/src/app/gathering/meet/page.tsx
diff --git a/apps/tuk-web/src/app/invite-list/page.tsx b/apps/tuk-web/src/app/invite-list/page.tsx
diff --git a/apps/tuk-web/src/app/invite/gathering/[gatheringId]/page.tsx b/apps/tuk-web/src/app/invite/gathering/[gatheringId]/page.tsx
@@ -0,0 +1,5 @@
+import InviteGathering from '@/app/invite/gathering/[gatheringId]/src/components/InviteGathering';
+
+export default function InviteGatheringPage() {
+  return <InviteGathering />;
+}
diff --git a/apps/tuk-web/src/app/invite/gathering/[gatheringId]/src/components/InviteGathering.tsx b/apps/tuk-web/src/app/invite/gathering/[gatheringId]/src/components/InviteGathering.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { InviteCard, TukLogo } from '@/app/invite/meet/src/components/InviteMeet';
+import { InviteCard, TukLogo } from '@/app/invite/meet/[meetId]/src/components/InviteMeet';
 import { Button } from '@/shared/components';
 import AppInstallBanner from '@/shared/components/AppInstallBanner';
 import InviteCardFrame from '@/shared/components/InviteCardFrame';
@@ -11,7 +11,7 @@ import { cn } from '@/shared/lib';
 const BANNER_KEY = 'gathering-banner-dismissed-at';
 const BANNER_RESHOW_MINUTES = 30;
 
-const GatheringMeet = () => {
+const InviteGathering = () => {
   const [showBanner, setShowBanner] = useState(false);
   const [animateCardIn, setAnimateCardIn] = useState(false);
 
@@ -74,4 +74,4 @@ const GatheringMeet = () => {
   );
 };
 
-export default GatheringMeet;
+export default InviteGathering;
diff --git a/apps/tuk-web/src/app/invite/meet/[meetId]/page.tsx b/apps/tuk-web/src/app/invite/meet/[meetId]/page.tsx
@@ -0,0 +1,5 @@
+import InviteMeet from '@/app/invite/meet/[meetId]/src/components/InviteMeet';
+
+export default function InviteMeetPage() {
+  return <InviteMeet />;
+}
diff --git a/apps/tuk-web/src/app/invite/meet/[meetId]/src/components/GradientBackground.tsx b/apps/tuk-web/src/app/invite/meet/[meetId]/src/components/GradientBackground.tsx
diff --git a/apps/tuk-web/src/app/invite/meet/[meetId]/src/components/InviteMeet.tsx b/apps/tuk-web/src/app/invite/meet/[meetId]/src/components/InviteMeet.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 
-import GradientBackground from '@/app/invite/meet/src/components/GradientBackground';
+import GradientBackground from '@/app/invite/meet/[meetId]/src/components/GradientBackground';
 import { Button } from '@/shared/components';
 import AppInstallBanner from '@/shared/components/AppInstallBanner';
 import InviteCardFrame from '@/shared/components/InviteCardFrame';
diff --git a/apps/tuk-web/src/app/invite/meet/page.tsx b/apps/tuk-web/src/app/invite/meet/page.tsx
diff --git a/apps/tuk-web/src/app/my-invites/page.tsx b/apps/tuk-web/src/app/my-invites/page.tsx
@@ -0,0 +1,5 @@
+import MyInviteList from '@/app/my-invites/src/components/MyInviteList';
+
+export default function MyInviteListPage() {
+  return <MyInviteList />;
+}
diff --git a/apps/tuk-web/src/app/my-invites/src/components/MyInviteList.tsx b/apps/tuk-web/src/app/my-invites/src/components/MyInviteList.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { InviteCard } from '@/app/invite/meet/[meetId]/src/components/InviteMeet';
+import { Header, LeftArrowIcon } from '@/shared/components';
+import InviteCardFrame from '@/shared/components/InviteCardFrame';
+import { useAppBridge } from '@/shared/components/provider/AppBridgeProvider';
+import { AppBridgeMessageType } from '@/shared/lib';
+
+const MyInviteList = () => {
+  const { send } = useAppBridge();
+
+  const isEmpty = false;
+
+  return (
+    <>
+      <Header>
+        <Header.Left
+          onClick={() => send({ type: AppBridgeMessageType.NAVIGATE_HOME, payload: '' })}
+        >
+          <Header.Button>
+            <LeftArrowIcon />
+          </Header.Button>
+          <Header.LeftText>받은 초대장</Header.LeftText>
+        </Header.Left>
+      </Header>
+
+      {isEmpty ? (
+        <div className="flex h-[16.25rem] items-center justify-center">
+          <span className="pretendard-body-14-R text-gray-800">받은 초대장을 모두 확인했어요</span>
+        </div>
+      ) : (
+        <div className="px-5">
+          <h2 className="serif-title-22-M mt-2.5 font-bold text-gray-900">
+            아직 확인하지 않은
+            <br />
+            초대장이 3개 있어요
+          </h2>
+
+          <div className="mb-[6.25rem] mt-12 flex flex-col justify-center gap-10">
+            <div className="flex flex-col items-center gap-12">
+              <div className="relative flex justify-center">
+                <InviteCardFrame />
+
+                <div className="absolute left-1/2 top-12 -translate-x-1/2">
+                  <InviteCard />
+                </div>
+              </div>
+
+              <span className="pretendard-body-12-R text-gray-800">15분 전</span>
+            </div>
+
+            <div className="flex flex-col items-center gap-12">
+              <div className="relative flex justify-center">
+                <InviteCardFrame />
+
+                <div className="absolute left-1/2 top-12 -translate-x-1/2">
+                  <InviteCard />
+                </div>
+              </div>
+
+              <span className="pretendard-body-12-R text-gray-800">15분 전</span>
+            </div>
+
+            <div className="flex flex-col items-center gap-12">
+              <div className="relative flex justify-center">
+                <InviteCardFrame />
+
+                <div className="absolute left-1/2 top-12 -translate-x-1/2">
+                  <InviteCard />
+                </div>
+              </div>
+
+              <span className="pretendard-body-12-R text-gray-800">15분 전</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div />
+    </>
+  );
+};
+
+export default MyInviteList;
diff --git a/apps/tuk-web/src/shared/components/InviteCardFrame.tsx b/apps/tuk-web/src/shared/components/InviteCardFrame.tsx
@@ -1,4 +1,4 @@
-import { QuoteIcon } from '@/app/invite/meet/src/components/InviteMeet';
+import { QuoteIcon } from '@/app/invite/meet/[meetId]/src/components/InviteMeet';
 import { cn } from '@/shared/lib';
 
 const InviteCardFrame = ({ animateCardIn }: { animateCardIn?: boolean }) => {
diff --git a/apps/tuk-web/src/shared/lib/app-bridge/appBridgeMessageType.ts b/apps/tuk-web/src/shared/lib/app-bridge/appBridgeMessageType.ts
@@ -1,10 +1,16 @@
 export enum AppBridgeMessageType {
   NAVIGATE_DETAIL = 'navigateDetail',
+  NAVIGATE_HOME = 'navigateHome',
 }
 
-export type AppBridgeMessage = NavigateDetailMessage;
+export type AppBridgeMessage = NavigateDetailMessage | NavigateHomeMessage;
 
 export interface NavigateDetailMessage {
   type: AppBridgeMessageType.NAVIGATE_DETAIL;
   payload: '';
 }
+
+export interface NavigateHomeMessage {
+  type: AppBridgeMessageType.NAVIGATE_HOME;
+  payload: '';
+}
diff --git a/apps/tuk-web/src/shared/lib/app-bridge/convertToNativeMessage.ts b/apps/tuk-web/src/shared/lib/app-bridge/convertToNativeMessage.ts
@@ -3,9 +3,12 @@ import { AppBridgeMessageType, AppBridgeMessage } from './appBridgeMessageType';
 const iosHandlers = {
   [AppBridgeMessageType.NAVIGATE_DETAIL]: (message: string) =>
     window.webkit?.messageHandlers.navigateDetail.postMessage(message),
+  [AppBridgeMessageType.NAVIGATE_HOME]: (message: string) =>
+    window.webkit?.messageHandlers.navigateHome.postMessage(message),
 };
 
 const androidHandlers = {
+  [AppBridgeMessageType.NAVIGATE_HOME]: () => window.AndroidBridge?.navigateHome(),
   [AppBridgeMessageType.NAVIGATE_DETAIL]: () => window.AndroidBridge?.navigateDetail(),
 };
 
diff --git a/apps/tuk-web/src/types/global.d.ts b/apps/tuk-web/src/types/global.d.ts
@@ -9,10 +9,12 @@ declare global {
     webkit?: {
       messageHandlers: {
         navigateDetail: MessageHandler<string>;
+        navigateHome: MessageHandler<string>;
       };
     };
     AndroidBridge?: {
       navigateDetail: () => void;
+      navigateHome: () => void;
     };
   }
 }
