Merge pull request #104 from softeerbootcamp4th/feature/admin

[Feat] 어드민 배포 및 404 페이지 추가
softeerbootcamp4th · Aug 23, 2024 · a09637a · a09637a
2 parents bf4ca53 + 5b8af48
commit a09637a
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "admin": "webpack-dev-server --hot --config webpack.config.js",
-    "adminBuild": "webpack --config webpack.config.js"
+    "adminBuild": "webpack --config webpack.config.js --env DEV=false"
   },
   "keywords": [],
   "author": "",

diff --git a/src/admin/api/fetch.ts b/src/admin/api/fetch.ts
@@ -8,26 +8,28 @@ import {
   fetchLogForm,
 } from "../types/event";
 
+const RANDOM_URL = process.env.RANDOM_URL;
+
 export const fetchEventList = async (): Promise<
   ApiResponse<{ eventList: EventInfo[] }>
 > => {
-  const response = await fetch("/admin/eventlist");
+  const response = await fetch(RANDOM_URL + "/admin/eventlist");
 
   return await response.json();
 };
 
 export const fetchLogList = async (
   page: number,
 ): Promise<ApiResponse<fetchLogForm>> => {
-  const response = await fetch(`/admin/log?page=${page}`);
+  const response = await fetch(RANDOM_URL + `/admin/log?page=${page}`);
 
   return await response.json();
 };
 
 export const putRandomEvent = async (
   eventInfo: FormData,
 ): Promise<ApiResponse<EventInfo>> => {
-  const response = await fetch("/admin/lots/config", {
+  const response = await fetch(RANDOM_URL + "/admin/lots/config", {
     method: "PUT",
     headers: {},
     body: eventInfo,
@@ -39,7 +41,7 @@ export const putRandomEvent = async (
 export const putFCFSEvent = async (
   eventInfo: FormData,
 ): Promise<ApiResponse<EventInfo>> => {
-  const response = await fetch("/admin/arrival/config", {
+  const response = await fetch(RANDOM_URL + "/admin/arrival/config", {
     method: "PUT",
     headers: {},
     body: eventInfo,
@@ -66,7 +68,8 @@ export const fetchFCFSParticipants = async ({
   }>
 > => {
   const response = await fetch(
-    `/admin/arrival/applicationList?page=${page}${createdAt ? `&createdAt=${createdAt}` : ""}${phoneNum ? `&phoneNum=${phoneNum}` : ""}`,
+    RANDOM_URL +
+      `/admin/arrival/applicationList?page=${page}${createdAt ? `&createdAt=${createdAt}` : ""}${phoneNum ? `&phoneNum=${phoneNum}` : ""}`,
   );
 
   return response.json();
@@ -88,7 +91,8 @@ export const fetchRandomParticipants = async ({
   }>
 > => {
   const response = await fetch(
-    `/admin/lots/applicationList?page=${page}${phoneNum ? `&phoneNum=${phoneNum}` : ""}`,
+    RANDOM_URL +
+      `/admin/lots/applicationList?page=${page}${phoneNum ? `&phoneNum=${phoneNum}` : ""}`,
   );
 
   return response.json();
@@ -97,7 +101,7 @@ export const fetchRandomParticipants = async ({
 export const putFCFSReward = async (
   rewardInfo: RewardInterface,
 ): Promise<ApiResponse<RewardInterface>> => {
-  const response = await fetch("/admin/arrival/rewardconfig", {
+  const response = await fetch(RANDOM_URL + "/admin/arrival/rewardconfig", {
     method: "PUT",
     headers: {
       "Content-Type": "application/json",
@@ -111,7 +115,7 @@ export const putFCFSReward = async (
 export const putRandomReward = async (
   rewardInfo: RewardInterface,
 ): Promise<ApiResponse<RewardInterface>> => {
-  const response = await fetch("/admin/lots/rewardconfig", {
+  const response = await fetch(RANDOM_URL + "/admin/lots/rewardconfig", {
     method: "PUT",
     headers: {
       "Content-Type": "application/json",

diff --git a/src/client/components/mainPage/InfoScreen/DriveDescriptionItem/DriveDescriptionItem.test.tsx b/src/client/components/mainPage/InfoScreen/DriveDescriptionItem/DriveDescriptionItem.test.tsx
@@ -24,7 +24,7 @@ describe("DriveDescriptionItem 렌더링 테스트", () => {
   });
 
   test("아무 요소도 선택되지 않았다면 텍스트가 보이지 않고, 이미지가 렌더링 되야 한다.", () => {
-    render(<DriveDescriptionItem {...defaultProps} noneSelected />);
+    render(<DriveDescriptionItem {...defaultProps} />);
 
     const article = screen.getByRole("figure");
 
@@ -33,13 +33,7 @@ describe("DriveDescriptionItem 렌더링 테스트", () => {
   });
 
   test("요소가 선택되지 않았다면 텍스트가 보이지 않고, 투명도가 적용된 이미지가 렌더링 되야 한다.", () => {
-    render(
-      <DriveDescriptionItem
-        {...defaultProps}
-        noneSelected={false}
-        isSelected={false}
-      />,
-    );
+    render(<DriveDescriptionItem {...defaultProps} isSelected={false} />);
 
     const article = screen.getByRole("figure");
 
@@ -50,13 +44,7 @@ describe("DriveDescriptionItem 렌더링 테스트", () => {
   });
 
   test("요소가 선택되지 않았다면 텍스트가 보이고, 투명도가 적용된 이미지가 렌더링 되야 한다.", () => {
-    render(
-      <DriveDescriptionItem
-        {...defaultProps}
-        noneSelected={false}
-        isSelected={false}
-      />,
-    );
+    render(<DriveDescriptionItem {...defaultProps} isSelected={false} />);
 
     const article = screen.getByRole("figure");
 

diff --git a/src/client/pages/FCFSEventPage/FCFSEventPage.tsx b/src/client/pages/FCFSEventPage/FCFSEventPage.tsx
@@ -10,12 +10,13 @@ import Glow from "../../components/common/Glow/Glow";
 import HomeButton from "../../components/common/HomeButton/HomeButton";
 import AuthTooltip from "../../components/common/AuthTooltip/AuthTooltip";
 import Cookies from "js-cookie";
-import { useNavigate } from "react-router";
+import { useLocation, useNavigate } from "react-router";
 import { useAppContext } from "../../providers/AppProvider";
 import { useErrorBoundary } from "react-error-boundary";
-import { calculateLeftTime, calculateLeftTimeToEnd } from "../../utils/util";
+import { calculateLeftTime } from "../../utils/util";
 
 const FCFSEventPage = () => {
+  const location = useLocation();
   const { showBoundary } = useErrorBoundary();
   const [quizInfo, setQuizInfo] = useState<QuizInfo | null>(null);
   const navigate = useNavigate();
@@ -41,7 +42,9 @@ const FCFSEventPage = () => {
     };
     tryFetch();
     if (!isAuth) navigate("/");
-    if (calculateLeftTimeToEnd() < 0 || calculateLeftTime() > 0) {
+
+    if (location.state?.leftTime !== 0) {
+      console.log("lefttime 0");
       navigate("/");
     }
   }, []);

diff --git a/src/client/pages/mainPage/MainScreen/FCFSEventSection/FCFSEventSection.tsx b/src/client/pages/mainPage/MainScreen/FCFSEventSection/FCFSEventSection.tsx
@@ -149,7 +149,7 @@ const FCFSEventSection = (
         <Button
           onClick={() => {
             isAuth
-              ? navigate("event1")
+              ? navigate("event1", { state: { leftTime: leftTime } })
               : navigate("auth-modal", {
                   state: { background: location, event: 1, isOpen: isOpen },
                 });

diff --git a/src/client/pages/mainPage/MainScreen/MainScreen.tsx b/src/client/pages/mainPage/MainScreen/MainScreen.tsx
@@ -10,6 +10,7 @@ import FCFSEventSection from "./FCFSEventSection/FCFSEventSection";
 import RandomEventSection from "./RandomEventSection/RandomEventSection";
 import mainCar from "../../../../common/assets/images/mainCar.png?as=webp";
 import EventSelectSection from "./EventSelectSection/EventSelectSection";
+import AuthTooltip from "../../../components/common/AuthTooltip/AuthTooltip";
 
 const MainScreen = (
   props: React.HTMLProps<HTMLDivElement>,
@@ -115,6 +116,7 @@ const MainScreen = (
 
   return (
     <>
+      <AuthTooltip />
       <GlowBackground />
       <EventSelectSection
         onFCFSClick={onFCFSClick}

diff --git a/src/client/router/router.tsx b/src/client/router/router.tsx
@@ -1,5 +1,11 @@
 import React from "react";
-import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
+import {
+  BrowserRouter,
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+} from "react-router-dom";
 import MainPage from "../pages/mainPage/MainPage";
 import FCFSEventPage from "../pages/FCFSEventPage/FCFSEventPage";
 import FCFSEventResultPage from "../pages/FCFSEventResultPage/FCFSEventResultPage";
@@ -12,6 +18,7 @@ import FallbackPage from "../pages/fallbackPage/FallbackPage";
 
 const RouterWithModal = () => {
   const location = useLocation();
+  const navigate = useNavigate();
   const background = location.state && location.state.background;
 
   return (
@@ -25,7 +32,12 @@ const RouterWithModal = () => {
         </Route>
         <Route path="/event2/result" element={<RandomEventResultPage />} />
         <Route path="/auth-modal" element={<AuthModal />} />
-        <Route path="*" element={<h1>404</h1>} />
+        <Route
+          path="*"
+          element={
+            <FallbackPage error="404" resetErrorBoundary={() => navigate(-1)} />
+          }
+        />
       </Routes>
       {background && (
         <Routes>

diff --git a/webpack.common.js b/webpack.common.js
@@ -84,7 +84,7 @@ module.exports = (env) => {
             }),
             createWebPGenerator({
               presetName: "webp-smallh",
-              quality: 75,
+              quality: 100,
               fileNames: [
                 "e1Gift.png",
                 "Drive1.png",
@@ -96,8 +96,8 @@ module.exports = (env) => {
                 "whiteRight.png",
               ],
               resizeOptions: {
-                width: 300,
-                hgith: 170,
+                width: 600,
+                height: 340,
               },
             }),
             createWebPGenerator({
@@ -111,7 +111,7 @@ module.exports = (env) => {
             }),
             createWebPGenerator({
               presetName: "webp-blur",
-              quality: 20,
+              quality: 40,
               fileNames: [
                 "random0.png",
                 "random1.png",

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,21 +1,23 @@
 const path = require("path");
 const webpack = require("webpack");
+const dotenv = require("dotenv");
 const HtmlWebPackPlugin = require("html-webpack-plugin");
 
 module.exports = (env) => {
+  const { DEV } = env;
+  if (DEV === "true") {
+    dotenv.config({ path: "./.env.dev" });
+  } else if (DEV === "false") {
+    dotenv.config({ path: "./.env.prod" });
+    console.log("process.env.RANDOM_URL");
+  }
   return {
     mode: "development",
     devtool: "inline-source-map",
     devServer: {
       port: 9000,
       historyApiFallback: true,
       open: true,
-      proxy: [
-        {
-          context: ["/admin"],
-          target: "http://3.38.151.69:8080",
-        },
-      ],
     },
     entry: "./src/admin/index.tsx",
     output: {
@@ -74,7 +76,8 @@ module.exports = (env) => {
         filename: "index.html", // output으로 출력할 파일은 index.html 이다.
       }),
       new webpack.DefinePlugin({
-        "process.env": JSON.stringify(process.env),
+        "process.env.RANDOM_URL": JSON.stringify(process.env.RANDOM_URL),
+        "process.env.FCFS_URL": JSON.stringify(process.env.FCFS_URL),
       }),
     ],
   };

diff --git a/webpackUtil.js b/webpackUtil.js
@@ -24,7 +24,7 @@ function createWebPGenerator({
           {
             quality: quality,
             ...(resizeOptions && {
-              resize: { width: 300, height: 600 },
+              resize: resizeOptions,
             }),
           },
         ],