[Fix] preview.yml 수정

.github/workflows/preview.yml

@@ -7,6 +7,7 @@ permissions:
 on:
   pull_request:
     branches: [develop]
+    types: [opened, synchronize, reopened]
 
 jobs:
   preview:
@@ -35,8 +36,25 @@ jobs:
         env:
           NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
 
+      - name: Check AuthGuard content
+        run: |
+          echo "AuthGuard content:"
+          cat apps/web/app/components/auth/AuthGuard.tsx
+
       - name: Build
-        run: pnpm -filter=web build
+        run: |
+          echo "Current branch: ${{ github.head_ref }}"
+          echo "PR number: ${{ github.event.pull_request.number }}"
+          echo "Event name: ${{ github.event_name }}"
+          pnpm -filter=web build
+        env:
+          GITHUB_EVENT_NAME: ${{ github.event_name }}
+          GITHUB_EVENT_NUMBER: ${{ github.event.pull_request.number }}
+
+      - name: Check build output
+        run: |
+          echo "Checking index.html content:"
+          cat out/index.html
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v4
@@ -46,7 +64,11 @@ jobs:
           aws-region: ${{ secrets.AWS_REGION }}
 
       - name: Deploy to S3 with PR-specific prefix
-        run: aws s3 sync ./${{ secrets.BUILD_DIRECTORY }} s3://${{ secrets.AWS_S3_BUCKET_NAME }}/pr-${{ github.event.pull_request.number }} --delete
+        run: |
+          echo "Syncing files to S3..."
+          aws s3 sync ${{ secrets.BUILD_DIRECTORY }} s3://${{ secrets.AWS_S3_BUCKET_NAME }}/pr-${{ github.event.pull_request.number }} --delete
+          echo "Files uploaded to S3:"
+          aws s3 ls s3://${{ secrets.AWS_S3_BUCKET_NAME }}/pr-${{ github.event.pull_request.number }} --recursive
 
       - name: CloudFront Invalidate Cache
         run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }} --paths "/pr-${{ github.event.pull_request.number }}/*"

apps/mobile/app/(route)/dashboard.tsx

@@ -3,13 +3,16 @@ import WebView, { WebViewMessageEvent } from "react-native-webview";
 import { ROUTES } from "@/constants/routes";
 import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
 import { getWebViewApiUrl } from "@/utils/getWebViewApiUrl";
+import { parseMessage } from "@/utils/parseMessage";
 
 export default function DashboardScreen() {
   const baseUrl = getWebViewApiUrl();
   const handleNavigationActions = useHandleNavigationActions();
 
   const requestOnMessage = (e: WebViewMessageEvent) => {
-    handleNavigationActions(e);
+    const { type, data } = parseMessage(e);
+
+    handleNavigationActions({ type, data });
   };
 
   return <WebView className="flex-1" source={{ uri: `${baseUrl}${ROUTES.DASHBOARD}` }} onMessage={requestOnMessage} />;

apps/mobile/app/(route)/meetings.tsx

@@ -3,13 +3,16 @@ import WebView, { WebViewMessageEvent } from "react-native-webview";
 import { ROUTES } from "@/constants/routes";
 import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
 import { getWebViewApiUrl } from "@/utils/getWebViewApiUrl";
+import { parseMessage } from "@/utils/parseMessage";
 
 export default function MeetingsScreen() {
   const baseUrl = getWebViewApiUrl();
   const handleNavigationActions = useHandleNavigationActions();
 
   const requestOnMessage = (e: WebViewMessageEvent) => {
-    handleNavigationActions(e);
+    const { type, data } = parseMessage(e);
+
+    handleNavigationActions({ type, data });
   };
 
   return <WebView className="flex-1" source={{ uri: `${baseUrl}${ROUTES.MEETINGS}` }} onMessage={requestOnMessage} />;

apps/mobile/app/(route)/seats.tsx

@@ -3,13 +3,16 @@ import WebView, { WebViewMessageEvent } from "react-native-webview";
 import { ROUTES } from "@/constants/routes";
 import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
 import { getWebViewApiUrl } from "@/utils/getWebViewApiUrl";
+import { parseMessage } from "@/utils/parseMessage";
 
 export default function SeatsScreen() {
   const baseUrl = getWebViewApiUrl();
   const handleNavigationActions = useHandleNavigationActions();
 
   const requestOnMessage = (e: WebViewMessageEvent) => {
-    handleNavigationActions(e);
+    const { type, data } = parseMessage(e);
+
+    handleNavigationActions({ type, data });
   };
 
   return <WebView className="flex-1" source={{ uri: `${baseUrl}${ROUTES.SEATS}` }} onMessage={requestOnMessage} />;

apps/mobile/app/(route)/settings.tsx

@@ -3,13 +3,17 @@ import WebView, { WebViewMessageEvent } from "react-native-webview";
 import { ROUTES } from "@/constants/routes";
 import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
 import { getWebViewApiUrl } from "@/utils/getWebViewApiUrl";
+import { parseMessage } from "@/utils/parseMessage";
 
 export default function SettingsScreen() {
   const baseUrl = getWebViewApiUrl();
   const handleNavigationActions = useHandleNavigationActions();
 
   const requestOnMessage = (e: WebViewMessageEvent) => {
-    handleNavigationActions(e);
+    const { type, data } = parseMessage(e);
+
+    handleNavigationActions({ type, data });
   };
+
   return <WebView className="flex-1" source={{ uri: `${baseUrl}${ROUTES.SETTINGS}` }} onMessage={requestOnMessage} />;
 }

apps/web/app/_components/AuthGuard.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { PAGE_NAME } from "@ui/src/utils/constants/pageNames";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
 import { useAuthStore } from "@/app/store/useAuthStore";
 import { createWebViewEventListener } from "../../lib/bridge/createWebViewEventListener";
 import { parseWebViewAuthMessage } from "../../lib/bridge/parseWebViewAuthMessage";
@@ -11,10 +11,10 @@ import SignInForm from "./SignInForm";
 
 export default function AuthGuard(): JSX.Element | null {
   const router = useRouter();
+  const pathname = usePathname();
   const [isLoading, setIsLoading] = useState(true);
   const { isLoggedIn } = useAuthStore();
   const { isIOSWebView, isAndroidWebView } = useDetectWebView();
-
   const webViewEventListener = createWebViewEventListener({ isIOSWebView, isAndroidWebView });
 
   useEffect(() => {
@@ -23,14 +23,25 @@ export default function AuthGuard(): JSX.Element | null {
   }, []);
 
   useEffect(() => {
-    if (isLoggedIn) {
-      router.replace(PAGE_NAME.DASHBOARD);
+    if (!isLoggedIn) {
+      setIsLoading(false);
+      return;
+    }
+
+    if (pathname === "/" && typeof window !== "undefined") {
+      const urlParams = new URLSearchParams(window.location.search);
+      const prNumber = urlParams.get("pr");
+
+      if (prNumber) {
+        router.replace(`/dashboard?pr=${prNumber}`);
+      } else {
+        router.replace(PAGE_NAME.DASHBOARD);
+      }
     }
 
     setIsLoading(false);
-  }, [isLoggedIn, router]);
+  }, [isLoggedIn, router, pathname]);
 
   if (isLoading) return null;
-
   return isLoggedIn ? null : <SignInForm />;
 }

apps/web/app/dashboard/_components/DashboardSection.tsx

@@ -33,6 +33,7 @@ export default function DashboardSection({ data = [] }: DashboardSectionProps):
 
   return (
     <div>
+      <h1>Preview Test</h1>
       <h1 className="mb-16">내 회의</h1>
       <hr className="mb-16 border-gray-200/10" />
       {upcomingMeetings.length > 0 ? (

apps/web/components/Gnb/GnbMenu.tsx

@@ -33,8 +33,22 @@ export default function GnbMenu({ isAdmin }: GnbMenuProps): JSX.Element | null {
   const { push } = useAppRouter();
   const { isWebView } = useDetectWebView();
 
+  const getPrNumber = (): string | null => {
+    if (typeof window === "undefined") return null;
+
+    const urlParams = new URLSearchParams(window.location.search);
+
+    return urlParams.get("pr");
+  };
+
+  const getUrlWithPR = (path: string): string => {
+    const prNumber = getPrNumber();
+
+    return prNumber ? `${path}?pr=${prNumber}` : path;
+  };
+
   const handleButtonClick = (path: string): void => {
-    push(path);
+    push(getUrlWithPR(path));
   };
 
   return (
@@ -57,7 +71,7 @@ export default function GnbMenu({ isAdmin }: GnbMenuProps): JSX.Element | null {
                   },
                 }
               : {
-                  href,
+                  href: getUrlWithPR(href),
                 })}
             className={cn("h-full justify-start md:h-40 md:w-full md:px-0 md:py-0", index === 3 && "block md:hidden")}
             variant="Text"
@@ -82,7 +96,7 @@ export default function GnbMenu({ isAdmin }: GnbMenuProps): JSX.Element | null {
           {ADMIN_ITEMS.map(({ href, name, icon: Icon }) => {
             const isActive = pathname === href;
             return (
-              <Link key={name} href={href} className="hidden md:block">
+              <Link key={name} href={getUrlWithPR(href)} className="hidden md:block">
                 <div
                   className={clsx(
                     "rounded-10 flex size-full w-48 flex-col items-center md:w-full md:flex-row md:gap-10 md:px-16 md:py-8",

apps/web/next.config.mjs

@@ -1,7 +1,13 @@
+const isPR = process.env.GITHUB_EVENT_NAME === "pull_request";
+const prNumber = process.env.GITHUB_EVENT_NUMBER;
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   output: "export",
+  ...(isPR && {
+    assetPrefix: `/pr-${prNumber}`,
+  }),
 
   images: {
     remotePatterns: [

turbo.json

@@ -16,7 +16,9 @@
     "NEXT_PUBLIC_IOS_API_URL",
     "EXPO_PUBLIC_API_URL_ANDROID",
     "EXPO_PUBLIC_API_URL_IOS",
-    "NODE_ENV"
+    "NODE_ENV",
+    "GITHUB_EVENT_NAME",
+    "GITHUB_EVENT_NUMBER"
   ],
   "tasks": {
     "build": {