Merge branch 'dev-fe' into release-1.0.0

Author: flydog98

.github/workflows/frontend-deploy.yml

@@ -3,7 +3,7 @@ name: "frontend-docker-build"
 on:
   push:
     branches: [ "dev-fe" ]
-    
+
 jobs:
   build:
     name: Build and Test
@@ -25,7 +25,7 @@ jobs:
         run: yarn install
 
       - name: Build
-        run: | 
+        run: |
           cd packages/frontend
           yarn build
 
@@ -53,6 +53,8 @@ jobs:
           file: ./packages/frontend/Dockerfile
           push: true
           tags: ${{ secrets.DOCKERHUB_USERNAME }}/git-challenge-frontend:0.1
+          build-args: |
+            NEXT_PUBLIC_BASE_URL=${{ secrets.NEXT_PUBLIC_BASE_URL }}
 
   deploy:
     name: Deploy Frontend

packages/frontend/.eslintrc.json

@@ -31,8 +31,19 @@
     ],
     "react/require-default-props": "off",
     "@typescript-eslint/no-use-before-define": "off",
-    "import/prefer-default-export": "off"
+    "react/jsx-props-no-spreading": "off",
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
   },
+  "overrides": [
+    {
+      "files": [
+        "**/__tests__/**/*.[jt]s?(x)",
+        "**/?(*.)+(spec|test).[jt]s?(x)"
+      ],
+      "extends": ["plugin:testing-library/react"]
+    }
+  ],
   "settings": {
     "import/external-module-folders": [".yarn"]
   },

packages/frontend/.gitignore

@@ -25,8 +25,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
-.env*.local
+# env files
+.env*
 
 # vercel
 .vercel

packages/frontend/Dockerfile

@@ -1,5 +1,8 @@
 FROM node:18.17.1
 
+ARG NEXT_PUBLIC_BASE_URL
+ENV NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
+
 WORKDIR /app
 
 COPY . .

packages/frontend/jest.config.mjs

@@ -1,18 +1,30 @@
-import nextJest from 'next/jest.js'
+import nextJest from "next/jest.js";
 
 const createJestConfig = nextJest({
-    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
-    dir: './',
-})
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
 
-// Add any custom config to be passed to Jest
-/** @type {import('jest').Config} */
-const config = {
-    // Add more setup options before each test is run
-    // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+const customJestConfig = {
+  testEnvironment: "jsdom",
+};
 
-    testEnvironment: 'jest-environment-jsdom',
-}
+export default async function config() {
+  const styleFileRegex = "^.+\\.(css|sass|scss)$";
+  const nextJestConfig = await createJestConfig(customJestConfig)();
+
+  const defaultMapper = nextJestConfig.moduleNameMapper[styleFileRegex]; // Next.js 기본 설정 삭제
+  delete nextJestConfig.moduleNameMapper[styleFileRegex];
 
-// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-export default createJestConfig(config)
+  return {
+    ...nextJestConfig,
+    moduleNameMapper: {
+      "design-system/styles/.+\\.css$": defaultMapper,
+      ...nextJestConfig.moduleNameMapper,
+    },
+    transform: {
+      "\\.css\\.ts$": "@vanilla-extract/jest-transform", // Jest transform 설정
+      ...nextJestConfig.transform,
+    },
+  };
+}

packages/frontend/next.config.js

@@ -5,6 +5,7 @@ const withVanillaExtract = createVanillaExtractPlugin();
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false, // react-toastify toast 두 번 렌더링되는 문제
+  pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
   async rewrites() {
     return [
       {

packages/frontend/package.json

@@ -21,6 +21,7 @@
     "@storybook/react": "^7.5.3",
     "@vanilla-extract/css": "^1.14.0",
     "axios": "^1.6.2",
+    "d3": "^7.8.5",
     "next": "14.0.2",
     "react": "^18",
     "react-dom": "^18",
@@ -36,14 +37,18 @@
     "@storybook/blocks": "^7.5.3",
     "@storybook/nextjs": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
+    "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/d3": "^7",
     "@types/jest": "^29.5.8",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
+    "@vanilla-extract/jest-transform": "^1.1.1",
     "@vanilla-extract/next-plugin": "^2.3.2",
     "@vanilla-extract/webpack-plugin": "^2.3.1",
     "css-loader": "^6.8.1",
@@ -57,6 +62,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-testing-library": "^6.2.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.1.0",
@@ -66,5 +72,8 @@
     "storybook": "^7.5.3",
     "typescript": "5.0.0-beta",
     "webpack": "^5.89.0"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }

packages/frontend/public/dark-logo.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

packages/frontend/public/favicon.ico

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}