#STRW-70 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/Asset.tsx

@@ -85,7 +85,7 @@ const Asset = ({ cash, assets, corps, tick }) => {
     {
       name: "평균 수익률",
       value: totalPurchaseAmount
-        ? Math.floor((totalDiff / totalPurchaseAmount) * 100)
+        ? ((totalDiff / totalPurchaseAmount) * 100).toFixed(1)
         : 0,
       unit: "%",
     },
@@ -95,10 +95,10 @@ const Asset = ({ cash, assets, corps, tick }) => {
     <AssetItem name={asset.name} value={asset.value} unit={asset.unit} />
   ));
   return (
-    <>
+    <div className="assetWrapper">
       <div className="assetTitle">보유 자산</div>
       {AssetItemsComponent}
-    </>
+    </div>
   );
 };
 

app/src/components/Chatting/Message.tsx

@@ -4,9 +4,10 @@ type MessageProps = {
   name: string;
   user: string;
   text: string;
+  hideName: boolean;
 };
 
-const Message = ({ name, user, text }: MessageProps) => {
+const Message = ({ hideName, name, user, text }: MessageProps) => {
   const isMessageByUser: boolean = name === user ? true : false;
   const isMessageByManager: boolean = user === "관리자";
   return isMessageByUser ? (
@@ -15,7 +16,7 @@ const Message = ({ name, user, text }: MessageProps) => {
     </div>
   ) : (
     <div className="messageWrapper justifyStart">
-      <div>{user}</div>
+      {!hideName && <div>{user}</div>}
       <div
         className={
           isMessageByManager

app/src/components/Chatting/Messages.tsx

@@ -24,7 +24,12 @@ const Messages = ({ name, messages }: ChattingProps) => {
     <div className="messages">
       {messages.map(({ user, text }, index) => (
         <div key={index}>
-          <Message name={name} user={user} text={text} />
+          <Message
+            hideName={index && messages[index - 1].user === user}
+            name={name}
+            user={user}
+            text={text}
+          />
         </div>
       ))}
       <div ref={messagesEndRef} />

app/src/components/Chatting/RoleCard.tsx

@@ -1,5 +1,4 @@
 import { ROLE_TYPE } from "../../constants/role";
-import { AssetState } from "../../modules/user";
 import "../../styles/Chatting.css";
 
 const AssetItem = ({ name, value, unit }) => {
@@ -13,49 +12,27 @@ const AssetItem = ({ name, value, unit }) => {
   );
 };
 
-const RoleCard = ({ role, cash, assets, corps, tick }) => {
-  const totalPurchaseAmount = assets
-    .map((asset: AssetState) => asset.purchaseAmount)
-    .reduce(
-      (previousValue: number, currentValue: number) =>
-        previousValue + currentValue
-    );
-
-  const currentAmounts: number[] = corps.map((corp) => {
-    const nowPrice =
-      corp?.todayChart[tick - 1] || corp?.totalChart?.at(-1) || 0;
-    return (
-      nowPrice *
-      assets.find((asset: AssetState) => asset.corpId === corp.corpId)
-        ?.totalQuantity
-    );
-  });
-
-  const totalCurrentAmount = currentAmounts.reduce(
-    (previousValue: number, currentValue: number) =>
-      previousValue + currentValue
-  );
-
-  const totalDiff = totalCurrentAmount - totalPurchaseAmount;
-
+const RoleCard = ({ role, score, corps }) => {
   const assetData = [
     {
-      name: "거래 이익",
-      value: Math.floor(totalDiff) || 0,
+      name: "기본 점수",
+      value: Math.floor(score?.basic) || 0,
       unit: "점",
     },
     {
-      name: "보너스 점수",
-      value: 0,
+      name: "직업 점수",
+      value: Math.floor(score?.bonus) || 0,
       unit: "점",
     },
     {
       name: "최종 점수",
-      value: totalCurrentAmount + cash?.totalCash || 0,
+      value: Math.floor(score?.basic + score?.bonus),
       unit: "점",
     },
   ];
 
+  const targetCorp = corps.find((corp) => corp.target !== 0);
+
   const roleAssetItems = assetData.map((asset) => (
     <AssetItem name={asset.name} value={asset.value} unit={asset.unit} />
   ));
@@ -68,8 +45,25 @@ const RoleCard = ({ role, cash, assets, corps, tick }) => {
         <div className="roleImageWrapper">
           <img className="roleImage" src={ROLE_TYPE[role]?.IMAGE} />
         </div>
-        <div className="roleAssetWrapper">{roleAssetItems}</div>
+        <div className="roleAssetWrapper">
+          {roleAssetItems}
+          {role === "party" && (
+            <div className="partyTarget">
+              <AssetItem
+                name="타겟 종목"
+                value={targetCorp?.corpName}
+                unit=""
+              />
+              <AssetItem
+                name="타겟 가격"
+                value={targetCorp?.target}
+                unit="원"
+              />
+            </div>
+          )}
+        </div>
       </div>
+      <div className="roleNotice">점수는 하루 간격으로 업데이트 됩니다.</div>
     </div>
   );
 };

app/src/components/Chatting/index.tsx

@@ -1,27 +1,24 @@
 import React, { useState } from "react";
 import { Card, CardHeader, CardBody, CardFooter, Tooltip } from "reactstrap";
-import { AssetState, CashState, MessageState } from "../../modules/user";
+import { MessageState, PlayerScore } from "../../modules/user";
 import { FiUser } from "react-icons/fi";
 
 import "../../styles/Chatting.css";
 
 import ChatInput from "./ChatInput";
 import Messages from "./Messages";
 import RoleCard from "./RoleCard";
-import { ChartState } from "../../modules/stock";
 import Ban from "../Ban";
-
+import { ChartState } from "../../modules/stock";
 
 type ChattingProps = {
   name: string;
   room: string;
   message: string;
   userStatus: string;
-  cash: CashState;
-  assets: AssetState[];
-  corps: ChartState[];
+  score: PlayerScore;
   role: string;
-  tick: number;
+  corps: ChartState[];
   disabled: boolean;
   setMessage: React.Dispatch<React.SetStateAction<string>>;
   sendMessage: (e: any) => void;
@@ -35,11 +32,9 @@ const Chatting = ({
   message,
   messages,
   userStatus,
-  cash,
-  role,
+  score,
   corps,
-  tick,
-  assets,
+  role,
   setMessage,
   sendMessage,
 }: ChattingProps) => {
@@ -65,13 +60,7 @@ const Chatting = ({
         </CardHeader>
         <CardBody className="chattingBody">
           {userStatus === "play" && isNickNameHover && (
-            <RoleCard
-              assets={assets}
-              corps={corps}
-              tick={tick}
-              cash={cash}
-              role={role}
-            />
+            <RoleCard score={score} role={role} corps={corps} />
           )}
           <Messages name={name} messages={messages} />
         </CardBody>
@@ -85,7 +74,6 @@ const Chatting = ({
         </CardFooter>
       </Card>
     </>
-
   );
 };
 

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";
 
@@ -10,19 +11,19 @@ const Tick = {
   },
   1: {
     status: "아침",
-    duration: 15,
+    duration: 20,
   },
   2: {
     status: "점심",
-    duration: 15,
+    duration: 20,
   },
   3: {
     status: "저녁",
-    duration: 15,
+    duration: 20,
   },
   4: {
     status: "밤",
-    duration: 15,
+    duration: 20,
   },
 };
 
@@ -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]);