feat: font preload 추가, skeleton guard 추가

sikkzz · sikkzz · commit 88fd52cfba81 · 2025-08-15T20:12:51.000+09:00
diff --git a/apps/tuk-web/src/app/invite/meet/[meetId]/src/components/InviteProposal.tsx b/apps/tuk-web/src/app/invite/meet/[meetId]/src/components/InviteProposal.tsx
@@ -8,6 +8,7 @@ import GradientBackground from '@/app/invite/meet/[meetId]/src/components/Gradie
 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 { Button } from '@/shared/components';
 import AppInstallBanner from '@/shared/components/AppInstallBanner';
 import { cn } from '@/shared/lib';
@@ -58,9 +59,11 @@ const InviteProposal = () => {
       <QueryErrorResetBoundary>
         {({ reset }) => (
           <ErrorBoundary onReset={reset} FallbackComponent={InviteProposalErrorFallback}>
-            <Suspense fallback={<InviteProposalSkeleton />}>
-              <InviteProposalContent />
-            </Suspense>
+            <SkeletonGuard minMs={250} skeleton={<InviteProposalSkeleton />}>
+              <Suspense fallback={<InviteProposalSkeleton />}>
+                <InviteProposalContent />
+              </Suspense>
+            </SkeletonGuard>
           </ErrorBoundary>
         )}
       </QueryErrorResetBoundary>
diff --git a/apps/tuk-web/src/app/invite/meet/[meetId]/src/components/SkeletonGuard.tsx b/apps/tuk-web/src/app/invite/meet/[meetId]/src/components/SkeletonGuard.tsx
@@ -0,0 +1,34 @@
+// components/SkeletonGuard.tsx
+'use client';
+import { ReactNode, useEffect, useState } from 'react';
+
+export default function SkeletonGuard({
+  minMs = 250,
+  skeleton,
+  children,
+}: {
+  minMs?: number;
+  skeleton: ReactNode;
+  children: ReactNode;
+}) {
+  const [showSkeleton, setShowSkeleton] = useState(true);
+
+  useEffect(() => {
+    const t = setTimeout(() => setShowSkeleton(false), minMs);
+    return () => clearTimeout(t);
+  }, [minMs]);
+
+  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>
+  );
+}
diff --git a/apps/tuk-web/src/app/layout.tsx b/apps/tuk-web/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import Head from 'next/head';
 
 import ClientProvider from '@/shared/components/provider/ClientProvider';
 import ReactQueryProvider from '@/shared/components/provider/ReactQueryProvider';
@@ -25,6 +26,44 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <Head>
+        <link
+          rel="preload"
+          href="/fonts/Pretendard-Regular.otf"
+          as="font"
+          type="font/otf"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="/fonts/Pretendard-Medium.otf"
+          as="font"
+          type="font/otf"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="/fonts/Pretendard-Bold.otf"
+          as="font"
+          type="font/otf"
+          crossOrigin="anonymous"
+        />
+
+        <link
+          rel="preload"
+          href="/fonts/NotoSans-serif-Regular.otf"
+          as="font"
+          type="font/otf"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="/fonts/NotoSans-serif-Medium.otf"
+          as="font"
+          type="font/otf"
+          crossOrigin="anonymous"
+        />
+      </Head>
       <body>
         <ReactQueryProvider>
           <ClientProvider>{children}</ClientProvider>
diff --git a/apps/tuk-web/tailwind.config.js b/apps/tuk-web/tailwind.config.js
@@ -30,7 +30,7 @@ module.exports = {
         },
         gray: {
           50: '#FAFAFA',
-          100: 'F5F5F5',
+          100: '#F5F5F5',
           200: '#EAEAEA',
           300: '#E1E1E1',
           500: '#CCCCCC',
