홈페이지 리팩토링

.github/workflows/ci.yml

@@ -62,7 +62,9 @@ jobs:
         run: yarn run ci
 
       - name: Build Next.js app for E2E tests
-        run: NEXT_PUBLIC_TEST="1" yarn workspace @ject-5-fe/app build
+        env:
+          NEXT_PUBLIC_TEST: "1"
+        run: yarn workspace @ject-5-fe/app build
 
       - name: Cache E2E test results
         uses: actions/cache@v4

service/app/src/app/__tests__/helpers/log.setup.ts

@@ -0,0 +1,25 @@
+import { test as setup } from "@playwright/test"
+
+setup("attach browser logs", async ({ page }) => {
+  page.on("console", (msg) => {
+    console.log(`[browser:${msg.type()}] ${msg.text()}`)
+  })
+
+  page.on("pageerror", (err) => {
+    console.log(`[pageerror] ${err.message}\n${err.stack ?? ""}`)
+  })
+
+  page.on("requestfailed", (req) => {
+    console.log(
+      `[requestfailed] ${req.method()} ${req.url()} -> ${req.failure()?.errorText ?? "unknown"}`,
+    )
+  })
+
+  page.on("response", (res) => {
+    if (res.status() >= 400) {
+      console.log(
+        `[response:${res.status()}] ${res.request().method()} ${res.url()}`,
+      )
+    }
+  })
+})

service/app/src/app/__tests__/homePOM.ts

@@ -58,7 +58,7 @@ export class HomePOM {
 
     // 게임 섹션
     this.gameSectionTitle = page.getByRole("heading", { level: 2 })
-    this.viewMoreGamesButton = page.getByRole("button", {
+    this.viewMoreGamesButton = page.getByRole("link", {
       name: "게임 더 보기",
     })
     this.gameSectionCard = page.getByTestId("gamecard-root")

service/app/src/app/_components/GameSection/GameSection.tsx

@@ -0,0 +1,29 @@
+import { Suspense } from "react"
+
+import { getDefaultGame } from "@/entities/game/api/getDefaultGame"
+
+import { GameSectionClient } from "./GameSectionClient"
+import { GameSectionHeader } from "./GameSectionHeader"
+import { GameSectionSkeleton } from "./GameSectionSkeleton"
+
+interface GameSectionProps {
+  className?: string
+}
+
+export const GameSection = async ({ className = "" }: GameSectionProps) => {
+  const response = await getDefaultGame({ cache: "force-cache" })
+  const games = response.data.games
+
+  return (
+    <section
+      className={`flex w-full flex-col items-center justify-center self-stretch p-0 ${className}`}
+    >
+      <div className="flex min-w-[952px] flex-col gap-28">
+        <GameSectionHeader />
+        <Suspense fallback={<GameSectionSkeleton />}>
+          <GameSectionClient games={games} />
+        </Suspense>
+      </div>
+    </section>
+  )
+}

service/app/src/app/_components/GameSection/GameSectionClient.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import type { GameListItem } from "@/entities/game"
+import { useGamePreview } from "@/entities/game/hooks/useGamePreview"
+import * as GameCard from "@/entities/game/ui/GameCard/gameCard"
+
+interface GameSectionClientProps {
+  games: GameListItem[]
+}
+
+export const GameSectionClient = ({ games }: GameSectionClientProps) => {
+  const { openPreview } = useGamePreview()
+
+  return (
+    <div
+      className="flex items-center justify-between"
+      data-testid="game-section-cards"
+    >
+      {games?.map((game) => (
+        <GameCard.Root
+          key={game.gameId}
+          className="w-[178px]"
+          title={game.gameTitle}
+          onClick={() => openPreview(game)}
+          aria-label="게임 카드"
+          tabIndex={0}
+        >
+          <GameCard.Image
+            src={game.gameThumbnailUrl ?? "/checker.svg"}
+            alt={game.gameTitle}
+            sizes="178px"
+            placeholder="blur"
+            blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzI3IiBoZWlnaHQ9IjQ1OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZTVlN2ViIi8+PC9zdmc+"
+          >
+            <GameCard.Badge>{game.questionCount}문제</GameCard.Badge>
+            {game.isShared && (
+              <GameCard.Badge variant="bottom-left">공유</GameCard.Badge>
+            )}
+          </GameCard.Image>
+          <GameCard.Description>{game.gameTitle}</GameCard.Description>
+        </GameCard.Root>
+      ))}
+    </div>
+  )
+}

service/app/src/app/_components/GameSection/GameSectionHeader.tsx

@@ -0,0 +1,15 @@
+import { PrimaryBoxButton } from "@ject-5-fe/design/components/button"
+import Link from "next/link"
+
+export const GameSectionHeader = () => {
+  return (
+    <div className="flex w-full items-center justify-between">
+      <h2 className="typography-heading-lg-semibold text-text-interactive-secondary">
+        어떤 게임으로 시작해 볼까요?
+      </h2>
+      <PrimaryBoxButton size="md" _style="outline" asChild>
+        <Link href="/games">게임 더 보기</Link>
+      </PrimaryBoxButton>
+    </div>
+  )
+}

service/app/src/app/_components/GameSection/GameSectionSkeleton.tsx

@@ -0,0 +1,11 @@
+import { GameCardSkeleton } from "@/entities/game/ui/GameCard/GameCardSkeleton"
+
+export const GameSectionSkeleton = () => {
+  return (
+    <div className="flex items-center justify-between">
+      {Array.from({ length: 4 }).map((_, index) => (
+        <GameCardSkeleton key={index} />
+      ))}
+    </div>
+  )
+}

service/app/src/app/dashboard/components/dashboardGameSection.tsx

@@ -5,9 +5,9 @@ import { useIntersectionObserver } from "react-simplikit"
 
 import { useGamePreview } from "@/entities/game/hooks/useGamePreview"
 import { useInfiniteMyGames } from "@/entities/game/model/useInfiniteMyGames"
-import { GameCardOptions } from "@/entities/game/ui/components/gameCardOptions"
-import { GameLibrarySkeleton } from "@/entities/game/ui/components/gameLibrarySkeleton"
-import * as GameCard from "@/shared/gameCard"
+import * as GameCard from "@/entities/game/ui/GameCard/gameCard"
+import { GameCardOptions } from "@/entities/game/ui/gameCardOptions"
+import { GameLibrarySkeleton } from "@/entities/game/ui/gameLibrarySkeleton"
 
 import { useDashboardGameActions } from "../hooks/useDashboardGameActions"
 

service/app/src/app/games/components/gamesLibrarySection.tsx

@@ -5,8 +5,8 @@ import { useIntersectionObserver } from "react-simplikit"
 
 import { useGamePreview } from "@/entities/game/hooks/useGamePreview"
 import { useInfiniteGameList } from "@/entities/game/model/useInfiniteGameList"
-import { GameLibrarySkeleton } from "@/entities/game/ui/components/gameLibrarySkeleton"
-import * as GameCard from "@/shared/gameCard"
+import * as GameCard from "@/entities/game/ui/GameCard/gameCard"
+import { GameLibrarySkeleton } from "@/entities/game/ui/gameLibrarySkeleton"
 
 import { filterInput } from "../utils/filterInput"
 import { GameCardActions } from "./gameCardActions"

service/app/src/app/page.tsx

@@ -1,30 +1,15 @@
-"use client"
-
-import { ErrorBoundary } from "react-error-boundary"
-
-import { useAuthStore } from "@/entities/auth"
-import { GameSection } from "@/widgets/GameSection"
-import { HeroSection } from "@/widgets/HeroSection"
+import { GameSection } from "@/app/_components/GameSection/GameSection"
+import { HeroSection } from "@/app/_components/HeroSection"
 import { HomeNavigation } from "@/widgets/HomeNavigation"
 
-import ErrorPage from "./error"
-
-function HomeContent() {
-  const { isAuthenticated } = useAuthStore()
-
+export default function Home() {
   return (
     <main className="flex min-h-screen w-full flex-col items-start gap-112 bg-background-primary">
-      <HomeNavigation isLoggedIn={isAuthenticated} />
+      <HomeNavigation />
       <HeroSection />
       <GameSection />
     </main>
   )
 }
 
-export default function Home() {
-  return (
-    <ErrorBoundary FallbackComponent={ErrorPage}>
-      <HomeContent />
-    </ErrorBoundary>
-  )
-}
+export const dynamic = "force-dynamic"

service/app/src/entities/game/hooks/useGamePreview.tsx

@@ -6,7 +6,7 @@ import { useCallback } from "react"
 import type { GameListItem } from "@/entities/game"
 import { getGameDetail } from "@/entities/game/api/getGameDetail"
 import { GameQuestion } from "@/entities/game/model/game"
-import { GamePreview } from "@/entities/game/ui/components/gamePreview"
+import { GamePreview } from "@/entities/game/ui/gamePreview"
 
 import { useGameEntryNavigation } from "./useGameEntryNavigation"
 

service/app/src/entities/game/ui/GameCard/GameCardSkeleton.tsx

@@ -0,0 +1,8 @@
+export const GameCardSkeleton = () => {
+  return (
+    <div className="flex w-[178px] flex-col items-start gap-[14px]">
+      <div className="size-[178px] animate-pulse rounded-[10px] bg-gray-200" />
+      <div className="h-[46px] w-[178px] animate-pulse rounded bg-gray-200" />
+    </div>
+  )
+}

service/app/src/entities/game/ui/components/gameLibraryGrid.tsx → service/app/src/entities/game/ui/gameLibraryGrid.tsx

@@ -7,9 +7,9 @@ import Link from "next/link"
 import { useIntersectionObserver } from "react-simplikit"
 
 import type { GameListItem } from "@/entities/game/model"
-import * as GameCard from "@/shared/gameCard"
+import * as GameCard from "@/entities/game/ui/GameCard/gameCard"
 
-import { useActions } from "../../../../app/games/hooks/useGameCardActions"
+import { useActions } from "../../../app/games/hooks/useGameCardActions"
 import { GameLibrarySkeleton } from "./gameLibrarySkeleton"
 
 interface GameLibraryGridProps {

service/app/src/entities/game/ui/components/gamePreview.tsx → service/app/src/entities/game/ui/gamePreview.tsx

@@ -12,7 +12,7 @@ import {
 } from "@ject-5-fe/design/components/dialog"
 import { Cross, Play } from "@ject-5-fe/design/icons"
 
-import * as GameCard from "@/shared/gameCard"
+import * as GameCard from "@/entities/game/ui/GameCard/gameCard"
 
 interface GamePreviewProps {
   className?: string

service/app/src/mocks/mswProvider.tsx

@@ -12,18 +12,16 @@ const MSWContext = createContext<MSWContextValue>({
 export const useMsw = () => useContext(MSWContext)
 
 export const MSWProvider = ({ children }: { children: React.ReactNode }) => {
-  const [isMswReady, setIsMswReady] = useState(
-    process.env.NODE_ENV === "production",
-  )
+  const shouldInitMsw =
+    process.env.NODE_ENV !== "production" || !!process.env.NEXT_PUBLIC_TEST
+
+  const [isMswReady, setIsMswReady] = useState(!shouldInitMsw)
   const [isMswError, setIsMswError] = useState(false)
 
   useEffect(() => {
     const init = async () => {
       try {
-        if (
-          process.env.NODE_ENV !== "production" ||
-          process.env.NEXT_PUBLIC_TEST //테스트 환경에서 msw활용을 위해 주입되는 환경변수
-        ) {
+        if (shouldInitMsw) {
           const { initMsw } = await import("./index")
           await initMsw()
         }
@@ -36,7 +34,7 @@ export const MSWProvider = ({ children }: { children: React.ReactNode }) => {
     }
 
     init()
-  }, [])
+  }, [shouldInitMsw])
 
   return (
     <MSWContext.Provider value={{ isMswReady, isMswError }}>

service/app/src/shared/api/fetchClient.ts

@@ -4,12 +4,6 @@ import { type ApiError, type ApiSuccess, errorSchema } from "./types/response"
 
 const isDev = process.env.NODE_ENV === "development"
 
-// const base = createFetchClient({
-//   baseUrl: process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000",
-//   timeout: 10000,
-//   credentials: "include",
-// })
-
 const _instance = ky.create({
   prefixUrl: process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000",
   credentials: "include",
@@ -84,54 +78,3 @@ export const fetchClient = {
 export const isError = (e: unknown): e is HTTPError<ApiError> => {
   return isHTTPError(e)
 }
-
-// if (process.env.NODE_ENV === "development") {
-//   base.addRequestInterceptor(async (url, options) => {
-//     console.log("🚀 Request:", url, options)
-//     return { url, options }
-//   })
-//   base.addResponseInterceptor(async (response) => {
-//     console.log("📥 Response:", response.status, response.url)
-//     return response
-//   })
-// }
-
-// base.addResponseInterceptor(
-//   async (response: Response) => {
-//     if (response.status === 401 && typeof window !== "undefined") {
-//       localStorage.removeItem("auth_user")
-//       document.cookie =
-//         "JSESSIONID=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;"
-//       window.dispatchEvent(new CustomEvent("auth:session-expired"))
-//     }
-
-//     let body: unknown
-//     try {
-//       body = await response.clone().json()
-//     } catch {
-//       body = undefined
-//     }
-
-//     const successResponse = successSchema.safeParse(body)
-//     if (successResponse.success) {
-//       return response
-//     } //성공 데이터
-
-//     const errorResponse = errorSchema.safeParse(body)
-
-//     if (errorResponse.success) {
-//       throw new FetchError(response.status, errorResponse.data.error)
-//     } //에러 데이터
-//     else {
-//       throw new FetchError(response.status, {
-//         code: "unknown error",
-//         message: response.statusText || "unknown error occured",
-//         data: null,
-//       }) //예상하지 못한 에러
-//     }
-//   },
-//   async (error) => {
-//     console.error("Response interceptor error:", error)
-//     throw error
-//   },
-// )