feat: 모바일 모임 페이지 로딩 ui 수정

Author: sikkzz

apps/tuk-web/public/logo.png

@@ -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/gathering/[gatheringId]/loading.tsx

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

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

@@ -23,7 +23,7 @@ const InviteGathering = () => {
           {({ reset }) => (
             <ErrorBoundary onReset={reset} FallbackComponent={InviteGatheringErrorFallback}>
               <SkeletonGuard minMs={250} skeleton={<InviteGatheringSkeleton />}>
-                <Suspense fallback={<InviteGatheringSkeleton />}>
+                <Suspense fallback={null}>
                   <InviteGatheringContent />
                 </Suspense>
               </SkeletonGuard>

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

@@ -47,7 +47,7 @@ const InviteGatheringContent = () => {
       <h2
         className={cn(
           'serif-title-22-M font-bold text-gray-900',
-          showBanner ? 'mt-[4.125rem]' : 'mt-[1.875rem]'
+          showBanner ? 'mt-[6.875rem]' : 'mt-[1.875rem]'
         )}
       >
         모임에

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

@@ -1,6 +1,6 @@
 const InviteGatheringSkeleton = () => {
   return (
-    <div className="mt-12 flex flex-col items-center justify-center">
+    <div className="mt-[200px] flex flex-col items-center justify-center">
       <div
         className="relative h-[321px] w-[288px] animate-pulse overflow-hidden rounded-[0.625rem] bg-[#f0f1f3] px-4 py-3"
         aria-busy="true"
@@ -27,8 +27,6 @@ const InviteGatheringSkeleton = () => {
           <div className="h-3 w-10 rounded bg-gray-200" />
           <div className="h-3 w-16 rounded bg-gray-200" />
         </div>
-
-        <div className="pointer-events-none absolute inset-0 -skew-x-12 bg-gradient-to-r from-transparent via-[rgba(255,255,255,0.3)] to-transparent" />
       </div>
     </div>
   );

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

@@ -0,0 +1,62 @@
+'use client';
+
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+
+type SplashGateProps = {
+  /** 최소 표시 시간 (ms) */
+  minMs?: number;
+  /** 로고 경로 (public/ 기준) */
+  logoSrc?: string;
+  /** 로고 크기(px) */
+  logoSize?: number;
+  /** 페이드아웃 시간(ms) */
+  fadeMs?: number;
+  children: React.ReactNode;
+};
+
+export default function SplashGate({
+  minMs = 1000,
+  fadeMs = 250,
+  logoSrc = '/logo.png',
+  logoSize = 200,
+  children,
+}: SplashGateProps) {
+  const [show, setShow] = useState(true);
+  const [fadeOut, setFadeOut] = useState(false);
+
+  useEffect(() => {
+    // 최소 표시 시간 보장
+    const t = setTimeout(() => {
+      // 모션 감소 환경이면 바로 제거
+      const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+      if (media.matches || fadeMs === 0) {
+        setShow(false);
+      } else {
+        setFadeOut(true);
+        const t2 = setTimeout(() => setShow(false), fadeMs);
+        return () => clearTimeout(t2);
+      }
+    }, minMs);
+
+    return () => clearTimeout(t);
+  }, [minMs, fadeMs]);
+
+  return (
+    <>
+      {children}
+
+      {show && (
+        <div
+          aria-busy="true"
+          aria-live="polite"
+          className={`fixed inset-0 z-[9999] flex items-center justify-center bg-white-default ${fadeOut ? 'opacity-0 transition-opacity' : 'opacity-100'} `}
+          // Tailwind transition-duration 커스텀
+          style={{ transitionDuration: `${fadeMs}ms` }}
+        >
+          <Image src={logoSrc} alt="App Logo" width={logoSize} height={logoSize} priority />
+        </div>
+      )}
+    </>
+  );
+}