리펙토링 기간 중 진행한 변경 사항

frontend/.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g pnpm && pnpm install
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+    - name: Run Playwright tests
+      run: pnpm exec playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

frontend/.gitignore

@@ -28,3 +28,7 @@ dist-ssr
 .env.*.local
 .env.*.production
 *.local
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

frontend/index.html

@@ -25,20 +25,14 @@
       crossorigin="anonymous"
     />
     <link
-      rel="preload"
-      href="/src/assets/images/pond.png"
+      rel="lazy"
+      href="/src/assets/images/waiting-user.avif"
       as="image"
       type="image/png"
     />
     <link
-      rel="preload"
-      href="/src/assets/images/waiting-user.png"
-      as="image"
-      type="image/png"
-    />
-    <link
-      rel="preload"
-      href="/src/assets/images/main-logo.png"
+      rel="lazy"
+      href="/src/assets/images/main-logo.avif"
       as="image"
       type="image/png"
     />

frontend/package.json

@@ -10,7 +10,7 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest --watch"
   },
   "dependencies": {
     "@betting-duck/shared": "workspace:*",
@@ -21,7 +21,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@react-three/cannon": "^6.6.0",
     "@react-three/drei": "^9.119.0",
-    "@react-three/fiber": "^8.17.10",
+    "@react-three/fiber": "^8.17.12",
     "@tanstack/react-query": "^5.62.0",
     "@tanstack/react-router": "^1.81.1",
     "@types/three": "^0.170.0",
@@ -30,33 +30,44 @@
     "framer-motion": "^11.12.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "recoil": "^0.7.7",
     "socket.io-client": "^4.8.1",
     "tailwind-merge": "^2.5.4",
-    "three": "^0.171.0"
+    "terser": "^5.37.0",
+    "three": "^0.172.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@playwright/test": "^1.49.1",
     "@tanstack/router-cli": "^1.79.0",
-    "@tanstack/router-devtools": "^1.81.1",
+    "@tanstack/router-devtools": "^1.81.5",
     "@tanstack/router-plugin": "^1.79.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
+    "jsdom": "^26.0.0",
     "msw": "^2.6.4",
     "postcss": "^8.4.48",
     "prettier": "^3.3.3",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "sharp": "^0.33.5",
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.3",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10",
+    "vite-plugin-compression2": "^1.3.3",
+    "vite-plugin-image-optimizer": "^1.1.8",
     "vite-tsconfig-paths": "^5.1.3",
-    "vitest": "^2.1.4"
+    "vitest": "^2.1.5"
   },
   "msw": {
     "workerDirectory": [

frontend/playwright.config.ts

@@ -0,0 +1,56 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://127.0.0.1:3000",
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+  ],
+
+  // webServer: {
+  //   command: "pnpm run preview",
+  //   url: "http://localhost:4173",
+  //   reuseExistingServer: !process.env.CI,
+  // }
+});

frontend/postcss.config.js

@@ -2,5 +2,6 @@ export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
   },
-}
+};

frontend/setupTests.ts

@@ -0,0 +1,2 @@
+// vitest.setup.ts
+import "@testing-library/react";

frontend/src/app/layout/index.tsx

@@ -0,0 +1 @@
+export { Layout } from "./ui/Layout";

frontend/src/app/layout/ui/Layout.tsx

@@ -0,0 +1,37 @@
+import { useLayout } from "@/shared/hooks/useLayout";
+import { cn } from "@/shared/misc";
+import { RootHeader } from "./RootHeader";
+import { RootSideBar } from "./RootSidebar";
+import { Suspense } from "react";
+import { LoadingAnimation } from "@/shared/components/Loading";
+import { useRecoilValue } from "recoil";
+import { Auth } from "@/app/provider/RouterProvider/lib/auth";
+
+const layoutStyles = {
+  default: "max-w-[520px]",
+  wide: "max-w-[1200px]",
+} as const;
+
+function Layout({ children }: { children: React.ReactNode }) {
+  const { layoutType } = useLayout();
+  const authData = useRecoilValue(Auth);
+
+  return (
+    <div
+      id="root-layout"
+      className={cn(
+        "layout",
+        `h-h-full ml-auto mr-auto grid max-h-[834px] w-full`,
+        layoutStyles[layoutType],
+      )}
+    >
+      <Suspense fallback={<LoadingAnimation />}>
+        <RootHeader nickname={authData.nickname ?? ""} />
+        <RootSideBar isAuthenticated={authData.isAuthenticated} />
+      </Suspense>
+      {children}
+    </div>
+  );
+}
+
+export { Layout };

frontend/src/app/layout/ui/NavItem.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { createLink, LinkComponent, useLocation } from "@tanstack/react-router";
+
+interface LinkComponentProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  icon: React.ReactNode;
+  label: string;
+}
+
+const Link = React.forwardRef<HTMLAnchorElement, LinkComponentProps>(
+  ({ icon, label, className, ...props }, ref) => {
+    const location = useLocation();
+    const isChecked = location.pathname.includes(label.split(" ")[0]);
+
+    return (
+      <a ref={ref} {...props} className="w-full">
+        <label htmlFor={`nav-item-${label}`} className={className}>
+          <input
+            id={`nav-item-${label}`}
+            type="radio"
+            name={"nav-item"}
+            value={label}
+            checked={isChecked}
+            disabled
+          />
+          {icon}
+          <span className="font-nanum-eb text-xs">{label}</span>
+        </label>
+      </a>
+    );
+  },
+);
+
+const CreatedLinkComponent = createLink(Link);
+
+const NavItem: LinkComponent<typeof Link> = (props) => {
+  return (
+    <CreatedLinkComponent
+      className="font-nanum-b flex cursor-pointer flex-col items-center gap-2 text-center"
+      preload="intent"
+      {...props}
+    />
+  );
+};
+
+export { NavItem };

frontend/src/app/layout/ui/RootHeader.tsx

@@ -0,0 +1,37 @@
+import { LogoIcon } from "@/shared/icons";
+import { Image } from "@/shared/components/Image";
+import waitingUserImage from "@assets/images/waiting-user.avif";
+import { Link } from "@tanstack/react-router";
+
+function UserInfo({ nickname }: { nickname: string }) {
+  return (
+    <div className="flex h-fit w-fit select-none items-center justify-end gap-3 p-4 font-bold">
+      <div>
+        <Image
+          src={waitingUserImage}
+          width={20}
+          height={15}
+          alt="대기 중인 사용자 이미지"
+        />
+      </div>
+      {nickname}
+    </div>
+  );
+}
+
+function RootHeader({ nickname }: { nickname: string }) {
+  return (
+    <div className="header flex-start flex items-center justify-between gap-2 pl-[60px]">
+      <Link
+        to={"/"}
+        className="flex w-fit select-none flex-row items-center gap-2"
+      >
+        <LogoIcon />
+        <h1>Betting Duck</h1>
+      </Link>
+      {nickname ? <UserInfo nickname={nickname} /> : null}
+    </div>
+  );
+}
+
+export { RootHeader };

frontend/src/app/layout/ui/RootSidebar.module.css

@@ -0,0 +1,15 @@
+.navigator {
+  content: "";
+  position: absolute;
+
+  top: 0;
+  left: 0;
+
+  width: 4px;
+  height: 46px;
+
+  background: #6e29da;
+  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+  transform: translateY(calc(48px * calc(1.5 * var(--navigator-position))));
+}