fix: 모바일 만남 초대장 페이지 ui 수정

Author: sikkzz

apps/tuk-web/src/app/invite/gathering/[gatheringId]/src/components/InviteGathering.tsx

@@ -7,8 +7,8 @@ import { ErrorBoundary } from 'react-error-boundary';
 import InviteGatheringContent from '@/app/invite/gathering/[gatheringId]/src/components/InviteGatheringContent';
 import InviteGatheringErrorFallback from '@/app/invite/gathering/[gatheringId]/src/components/InviteGatheringErrorFallback';
 import InviteGatheringSkeleton from '@/app/invite/gathering/[gatheringId]/src/components/InviteGatheringSkeleton';
-import SkeletonGuard from '@/app/invite/meet/[meetId]/src/components/SkeletonGuard';
 import { BackgroundTemplate, Button } from '@/shared/components';
+import SkeletonGuard from '@/shared/components/SkeletonGuard';
 import { useParam } from '@/shared/hooks/useParam';
 import { cn } from '@/shared/lib';
 

apps/tuk-web/src/app/invite/meet/[meetId]/loading.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import Image from 'next/image';
+
+export default function Loading() {
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-white-default">
+      <Image src="/logo.png" alt="App Logo" width={200} height={200} priority />
+    </div>
+  );
+}

apps/tuk-web/src/app/invite/meet/[meetId]/page.tsx

@@ -1,5 +1,10 @@
 import InviteProposal from '@/app/invite/meet/[meetId]/src/components/InviteProposal';
+import SplashGate from '@/shared/components/SplashGate';
 
 export default function InviteProposalPage() {
-  return <InviteProposal />;
+  return (
+    <SplashGate minMs={1000} fadeMs={250} logoSrc="/logo.png" logoSize={200}>
+      <InviteProposal />
+    </SplashGate>
+  );
 }

apps/tuk-web/src/app/invite/meet/[meetId]/src/components/InviteProposal.tsx

@@ -7,23 +7,23 @@ import { ErrorBoundary } from 'react-error-boundary';
 import InviteProposalContent from '@/app/invite/meet/[meetId]/src/components/InviteProposalContent';
 import InviteProposalErrorFallback from '@/app/invite/meet/[meetId]/src/components/InviteProposalErrorFallback';
 import InviteProposalSkeleton from '@/app/invite/meet/[meetId]/src/components/InviteProposalSkeleton';
-import SkeletonGuard from '@/app/invite/meet/[meetId]/src/components/SkeletonGuard';
 import { BackgroundTemplate, Button } from '@/shared/components';
+import SkeletonGuard from '@/shared/components/SkeletonGuard';
 import { useParam } from '@/shared/hooks/useParam';
 
 const InviteProposal = () => {
   const proposalId = Number(useParam('meetId'));
 
   return (
     <BackgroundTemplate>
-      <BackgroundTemplate.Main className="overflow-y-auto px-5">
-        <BackgroundTemplate.Gradient />
+      <BackgroundTemplate.Main className="px-5">
+        <BackgroundTemplate.Gradient className="pointer-events-none" />
 
         <QueryErrorResetBoundary>
           {({ reset }) => (
             <ErrorBoundary onReset={reset} FallbackComponent={InviteProposalErrorFallback}>
               <SkeletonGuard minMs={250} skeleton={<InviteProposalSkeleton />}>
-                <Suspense fallback={<InviteProposalSkeleton />}>
+                <Suspense fallback={null}>
                   <InviteProposalContent />
                 </Suspense>
               </SkeletonGuard>

apps/tuk-web/src/app/invite/meet/[meetId]/src/components/InviteProposalContent.tsx

@@ -7,6 +7,7 @@ import {
   CardFrame,
 } from '@/app/proposal/[proposalId]/detail/components/GatheringProposalContent';
 import AppInstallBanner from '@/shared/components/AppInstallBanner';
+import { useSplashGate } from '@/shared/components/SplashGate';
 import { useParam } from '@/shared/hooks/useParam';
 import { cn } from '@/shared/lib';
 
@@ -16,6 +17,8 @@ const BANNER_RESHOW_MINUTES = 30;
 const InviteProposalContent = () => {
   const proposalId = Number(useParam('meetId'));
 
+  const { done: splashDone } = useSplashGate();
+
   const [slideDown, setSlideDown] = useState(false);
 
   const [showBanner, setShowBanner] = useState(false);
@@ -50,11 +53,11 @@ const InviteProposalContent = () => {
   }, []);
 
   useEffect(() => {
-    if (!isLoading && !isError) {
+    if (splashDone && !isLoading && !isError) {
       const id = requestAnimationFrame(() => setSlideDown(true));
       return () => cancelAnimationFrame(id);
     }
-  }, [isLoading, isError]);
+  }, [splashDone, isLoading, isError]);
 
   return (
     <>
@@ -63,7 +66,7 @@ const InviteProposalContent = () => {
       <h2
         className={cn(
           'serif-title-22-M font-bold text-gray-900',
-          showBanner ? 'mt-[4.125rem]' : 'mt-[1.875rem]'
+          showBanner ? 'mt-[calc(70px+env(safe-area-inset-top,0px))]' : 'mt-[1.875rem]'
         )}
       >
         보고 싶은 마음이
@@ -78,8 +81,8 @@ const InviteProposalContent = () => {
 
         <div
           className={cn(
-            'ease-outmotion-reduce:transition-none absolute bottom-[-100px] left-1/2 h-[421px] w-[408px] -translate-x-1/2 transition-transform duration-1000',
-            slideDown ? 'translate-y-52' : 'translate-y-0'
+            'ease-outmotion-reduce:transition-none absolute bottom-[-80px] left-1/2 h-[421px] w-[408px] -translate-x-1/2 transition-transform duration-1000',
+            slideDown ? 'translate-y-56' : 'translate-y-0'
           )}
           style={{ willChange: 'transform', transitionDelay: '150ms' }}
         >

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

@@ -4,7 +4,7 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import React, { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import SkeletonGuard from '@/app/invite/meet/[meetId]/src/components/SkeletonGuard';
+import SkeletonGuard from '@/shared/components/SkeletonGuard';
 import GatheringProposalContent from '@/app/proposal/[proposalId]/detail/components/GatheringProposalContent';
 import GatheringProposalErrorFallback from '@/app/proposal/[proposalId]/detail/components/GatheringProposalErrorFallback';
 import GatheringProposalSkeleton from '@/app/proposal/[proposalId]/detail/components/GatheringProposalSkeleton';

…meetId]/src/components/SkeletonGuard.tsx …/src/shared/components/SkeletonGuard.tsxapps/tuk-web/src/app/invite/meet/[meetId]/src/components/SkeletonGuard.tsx renamed to apps/tuk-web/src/shared/components/SkeletonGuard.tsx apps/tuk-web/src/app/invite/meet/[meetId]/src/components/SkeletonGuard.tsx renamed to apps/tuk-web/src/shared/components/SkeletonGuard.tsx

@@ -20,14 +20,12 @@ export default function SkeletonGuard({
 
   return (
     <div className="relative">
-      {/* 콘텐츠 영역 */}
       <div
         className={`transition-opacity duration-200 ${showSkeleton ? 'opacity-0' : 'opacity-100'}`}
       >
         {children}
       </div>
 
-      {/* 오버레이 스켈레톤: 최소 minMs 동안은 확실히 보이게 */}
       {showSkeleton && <div className="absolute inset-0">{skeleton}</div>}
     </div>
   );

apps/tuk-web/src/shared/components/SplashGate.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 
 import { cn } from '@/shared/lib';
 
@@ -13,6 +13,13 @@ type SplashGateProps = {
   children: React.ReactNode;
 };
 
+type SplashGateContextValue = {
+  done: boolean;
+};
+
+const SplashGateContext = createContext<SplashGateContextValue>({ done: false });
+export const useSplashGate = () => useContext(SplashGateContext);
+
 export default function SplashGate({
   minMs = 1000,
   fadeMs = 250,
@@ -38,8 +45,10 @@ export default function SplashGate({
     return () => clearTimeout(t);
   }, [minMs, fadeMs]);
 
+  const ctx = useMemo(() => ({ done: !show }), [show]);
+
   return (
-    <>
+    <SplashGateContext.Provider value={ctx}>
       {children}
 
       {show && (
@@ -55,6 +64,6 @@ export default function SplashGate({
           <Image src={logoSrc} alt="App Logo" width={logoSize} height={logoSize} priority />
         </div>
       )}
-    </>
+    </SplashGateContext.Provider>
   );
 }