#STRW-68 FE 에러처리

app/package.json

@@ -16,6 +16,7 @@
     "react-redux": "^7.2.5",
     "react-router-dom": "5.3.0",
     "react-scripts": "4.0.3",
+    "react-toastify": "^8.1.0",
     "reactstrap": "8.10.0",
     "recharts": "2.1.4",
     "redux": "^4.1.1",

app/src/components/Clock.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { Col, Row } from "reactstrap";
+import { toast } from "react-toastify";
 
 import "../styles/Clock.css";
 
@@ -50,12 +51,14 @@ const Clock = ({ week, day, tick, handleTimeOut }) => {
   const isDark = day === 0 || tick % 4 === 0;
 
   useInterval(() => {
-    setSecond(second - 1);
+    if (second >= 0) setSecond(second - 1);
   }, 1000);
 
   useEffect(() => {
-    if (second <= 0) {
+    if (second === 0) {
       handleTimeOut();
+    } else if (second < 0) {
+      toast.error("네트워크 오류로 시간이 지연됩니다. 잠시만 기다려주세요");
     }
   }, [second]);
 

app/src/components/Items/ItemTargetModal.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { toast } from "react-toastify";
 import {
   Button,
   Input,
@@ -54,7 +55,7 @@ const ItemTargetModal = ({
 
   const handleApplyItemWithTarget = () => {
     if (selectedTargetId == "") {
-      alert(`${ITEM_TARGET[target]?.name || "타겟"}을/를 선택해주세요!`);
+      toast.error(`${ITEM_TARGET[target]?.name || "타겟"}을/를 선택해주세요!`);
     } else {
       handleApplyItem(selectedItemId, selectedTargetId);
       toggle();

app/src/components/Main/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { Button, Input } from "reactstrap";
+import { toast, ToastContainer } from "react-toastify";
 
 import RoomCodeModal from "./RoomCodeModal";
 
@@ -25,7 +26,7 @@ const Main = ({
 
   const handleModalOpen = () => {
     if (isButtonDisabled) {
-      window.alert(
+      toast.error(
         "닉네임은 앞뒤 공백 없는 2~16 글자로 해야합니다. ('관리자' 사용 불가) "
       );
     } else {
@@ -46,7 +47,7 @@ const Main = ({
       <Link
         onClick={() => {
           if (isButtonDisabled) {
-            window.alert(
+            toast.error(
               "닉네임은 앞뒤 공백 없는 2~16 글자로 해야합니다. ('관리자' 사용 불가) "
             );
           }
@@ -77,6 +78,17 @@ const Main = ({
         toggle={handleModalOpen}
         onChangeRoom={onChangeRoom}
       />
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
     </div>
   );
 };

app/src/containers/ItemsWrapper.tsx

@@ -9,6 +9,7 @@ import ItemsAndTradeListTab from "../components/ItemsAndTradeListTab";
 import Items from "../components/Items";
 import TradeList from "../components/Trade/TradeList";
 import { sendItemRequest } from "../modules/sockets/items";
+import { toast } from "react-toastify";
 
 const ItemsWrapper = () => {
   // redux state
@@ -34,9 +35,13 @@ const ItemsWrapper = () => {
   };
 
   const handleApplyItem = (id: string, target?: string) => {
-    dispatch(
-      sendItemRequest({ gameId, playerId, week, day, type: id, target })
-    );
+    if (!id) {
+      toast.error("아이템을 선택해주세요.");
+    } else {
+      dispatch(
+        sendItemRequest({ gameId, playerId, week, day, type: id, target })
+      );
+    }
   };
 
   return (

app/src/containers/TradeWrapper.tsx

@@ -6,6 +6,7 @@ import Trade from "../components/Trade";
 import { AssetState } from "../modules/user";
 import { tradeCancel, tradeRequest } from "../modules/sockets/trade";
 import { ChartState } from "../modules/stock";
+import { toast } from "react-toastify";
 
 export type billType = {
   price: number;
@@ -51,18 +52,22 @@ const TradeWrapper = () => {
 
   const handleDeal = (e: any) => {
     const deal = e.target.name;
-    dispatch(
-      tradeRequest({
-        ...tradeBill,
-        gameId,
-        playerId,
-        week,
-        day,
-        tick,
-        corpId: selectedCorpId,
-        deal,
-      })
-    );
+    if (tradeBill.quantity === 0) {
+      toast.error("입력 수량은 0보다 커야합니다.");
+    } else {
+      dispatch(
+        tradeRequest({
+          ...tradeBill,
+          gameId,
+          playerId,
+          week,
+          day,
+          tick,
+          corpId: selectedCorpId,
+          deal,
+        })
+      );
+    }
   };
 
   const handleCancel = (_id: string, corpId: string) => {

app/src/modules/sockets/error.ts

@@ -0,0 +1,31 @@
+import { eventChannel } from "redux-saga";
+import { call, put, take } from "redux-saga/effects";
+import { Socket } from "socket.io-client";
+import { updateErrorMessage } from "../user";
+import { ERROR } from "./events";
+
+type ErrorInterface = {
+  message: string;
+};
+
+const receiveErrorChannel = (socket: Socket) => {
+  return eventChannel<ErrorInterface>((emit) => {
+    socket.on(ERROR, (payload: ErrorInterface) => {
+      emit(payload);
+    });
+
+    return () => {};
+  });
+};
+
+export function* receiveErrorSaga(socket: Socket) {
+  const channel: ReturnType<typeof receiveErrorChannel> = yield call(
+    receiveErrorChannel,
+    socket
+  );
+
+  while (true) {
+    const payload: ErrorInterface = yield take(channel);
+    yield put(updateErrorMessage(payload.message));
+  }
+}

app/src/modules/sockets/events.ts

@@ -20,3 +20,4 @@ export const GAME_SCORE = "game/score";
 
 export const ITEM_REQUEST = "item/request";
 export const ITEM_RESPONSE = "item/response";
+export const ERROR = "error";

app/src/modules/sockets/index.ts

@@ -3,6 +3,7 @@ import { Socket } from "socket.io-client";
 
 import connectSocket from "../../configs/socket";
 import { receiveChattingSaga, sendChattingSaga } from "./chatting";
+import { receiveErrorSaga } from "./error";
 import {
   receiveGameScoreSaga,
   receiveGameTimeResponseSaga,
@@ -59,5 +60,8 @@ export function* handleIO() {
     sendItemRequestSaga(socket),
     receiveItemResponseSaga(socket),
     receiveItemRequestSaga(),
+
+    // error
+    receiveErrorSaga(socket),
   ]);
 }

app/src/modules/stock.ts

@@ -50,9 +50,10 @@ export const stockSlice = createSlice({
         todayChart: [],
       }));
     },
+    resetChart: () => initialState,
   },
 });
 
-export const { updateDayChart, initChart } = stockSlice.actions;
+export const { updateDayChart, initChart, resetChart } = stockSlice.actions;
 
 export default stockSlice.reducer;

app/src/modules/time.ts

@@ -31,9 +31,10 @@ export const timeSlice = createSlice({
       state.day = action.payload.day;
       state.tick = action.payload.tick;
     },
+    resetTime: () => initialState,
   },
 });
 
-export const { updateDate, updateTime } = timeSlice.actions;
+export const { updateDate, updateTime, resetTime } = timeSlice.actions;
 
 export default timeSlice.reducer;

app/src/modules/user.ts

@@ -81,6 +81,7 @@ export type UserState = {
   skills: PlayerSkill;
   scores: PlayerScore[];
   role: Role;
+  errorMessage: string;
 };
 
 const initialState: UserState = {
@@ -103,19 +104,29 @@ const initialState: UserState = {
   trades: [
     // { _id, corpId: "gyu", price: 0, quantity: 0, deal: "buy", status: "pending" }
   ],
-  selectedCorpId: "gyu",
+  selectedCorpId: "",
   isChartView: false,
   options: {},
   skills: {},
   scores: [],
   role: "",
+  errorMessage: "",
 };
 
 export const gameSlice = createSlice({
   name: "game",
   initialState,
   reducers: {
     resetUser: () => initialState,
+    clearPlayer(state) {
+      const { name, isHost, room } = state;
+      return {
+        ...initialState,
+        name,
+        isHost,
+        room,
+      };
+    },
     updateName(state, action: PayloadAction<string>) {
       state.name = action.payload;
     },
@@ -181,7 +192,9 @@ export const gameSlice = createSlice({
       });
     },
     updateItemCoolTime: (state, action: PayloadAction<string>) => {
-      state.items[action.payload] = ITEM[action.payload]?.COOLTIME;
+      if (state.items[action.payload] !== undefined) {
+        state.items[action.payload] = ITEM[action.payload]?.COOLTIME;
+      }
     },
     updateRole: (state, action: PayloadAction<Role>) => {
       state.role = action.payload;
@@ -210,6 +223,9 @@ export const gameSlice = createSlice({
           break;
       }
     },
+    updateErrorMessage: (state, action: PayloadAction<string>) => {
+      state.errorMessage = action.payload;
+    },
   },
 });
 
@@ -235,7 +251,9 @@ export const {
   updateTrades,
   updateItemsBytime,
   updateItemCoolTime,
+  updateErrorMessage,
   setItems,
+  clearPlayer,
 } = gameSlice.actions;
 
 export default gameSlice.reducer;