[Design] 디자인 관련 CSS 일부 수정

- 디자인 및 레이아웃 관련 CSS 일부 수정 - 이외 불필요한 코드 (es. console.log 등 삭제) Issues #122
codestates-seb · Sep 19, 2023 · a0dae2e · a0dae2e
1 parent f283eeb
commit a0dae2e
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 210 deletions.
diff --git a/client/src/components/EntireList/EntireList.tsx b/client/src/components/EntireList/EntireList.tsx
@@ -71,7 +71,7 @@ const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListTy
       </Header2Container>
       {/* <Divider /> */}
       <StockList>
-        {isLoading ? <div>Loading...</div> : isError ? <div>Error fetching data</div> : companiesList.map((company) => <StockItem key={company.companyId} company={company} setShowChangePrice={setShowChangePrice} showChangePrice={showChangePrice} />)}
+        {isLoading ? <div></div> : isError ? <div>Error fetching data</div> : companiesList.map((company) => <StockItem key={company.companyId} company={company} setShowChangePrice={setShowChangePrice} showChangePrice={showChangePrice} />)}
       </StockList>
     </WatchListContainer>
   );

diff --git a/client/src/components/HoldingList/HoldingList.tsx b/client/src/components/HoldingList/HoldingList.tsx
@@ -5,8 +5,8 @@ import StockItem from "./StockItem";
 import useGetStockHolds from "../../hooks/useGetStockholds";
 import { StockItemProps } from "./StockItem";
 import useCompanyData from "../../hooks/useCompanyData";
-import LoginRequestIndicator from "./LoginRequestIndicator"; 
-import { RootState } from "../../store/config"; 
+import LoginRequestIndicator from "./LoginRequestIndicator";
+import { RootState } from "../../store/config";
 import { useSelector } from "react-redux";
 
 // 🔴
@@ -23,19 +23,19 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
   // 모든 stockReturn의 합을 계산합니다.
   let totalEvaluationProfit = 0;
 
-if (Array.isArray(stockHolds) && stockHolds.length > 0) {
-  totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0);
-}
+  if (Array.isArray(stockHolds) && stockHolds.length > 0) {
+    totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0);
+  }
 
   // if (stockHolds) {
   //   totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0);
   // }
-    const isLogin = useSelector((state: RootState) => state.login); // 로그인 상태 가져오기
+  const isLogin = useSelector((state: RootState) => state.login); // 로그인 상태 가져오기
 
-    // OAuth 모달을 열기 위한 함수
-    const openOAuthModal = () => {
-      // OAuth 로그인 모달을 열기 위한 로직
-    };
+  // OAuth 모달을 열기 위한 함수
+  const openOAuthModal = () => {
+    // OAuth 로그인 모달을 열기 위한 로직
+  };
 
   return (
     <WatchListContainer>
@@ -53,31 +53,24 @@ if (Array.isArray(stockHolds) && stockHolds.length > 0) {
       </Header2Container>
       {/* <Divider /> */}
       <StockList>
-    {isLogin === 0 ? (
-        <LoginRequestIndicator openOAuthModal={openOAuthModal} />
-    ) : isLoading || isCompanyDataLoading ? (
-        <div>Loading...</div>
-    ) : isError || isCompanyDataError ? (
-        <div>Error fetching data</div>
-    ) : (
-      (Array.isArray(stockHolds) && stockHolds.length > 0) && // 여기에 조건을 추가합니다
-      stockHolds.map((stockHold: StockItemProps["stockData"]) => {
-          const matchedCompany = companyData ? companyData.find((company) => company.companyId === stockHold.companyId) : undefined;
-
-          return matchedCompany ? (
-              <StockItem 
-                  key={stockHold.companyId} 
-                  stockData={stockHold} 
-                  companyData={matchedCompany} 
-                  setShowChangePrice={setShowChangePrice} 
-                  showChangePrice={showChangePrice} 
-              />
-          ) : null;
-      })
-  )}
-</StockList>
-</WatchListContainer>
-);
+        {isLogin === 0 ? (
+          <LoginRequestIndicator openOAuthModal={openOAuthModal} />
+        ) : isLoading || isCompanyDataLoading ? (
+          <div></div>
+        ) : isError || isCompanyDataError ? (
+          <div>Error fetching data</div>
+        ) : (
+          Array.isArray(stockHolds) &&
+          stockHolds.length > 0 && // 여기에 조건을 추가합니다
+          stockHolds.map((stockHold: StockItemProps["stockData"]) => {
+            const matchedCompany = companyData ? companyData.find((company) => company.companyId === stockHold.companyId) : undefined;
+
+            return matchedCompany ? <StockItem key={stockHold.companyId} stockData={stockHold} companyData={matchedCompany} setShowChangePrice={setShowChangePrice} showChangePrice={showChangePrice} /> : null;
+          })
+        )}
+      </StockList>
+    </WatchListContainer>
+  );
 };
 
 export default HoldingList;

diff --git a/client/src/components/MarketComponents/MarketKospiChart.tsx b/client/src/components/MarketComponents/MarketKospiChart.tsx
@@ -11,7 +11,6 @@ const MarketkospiChart = () => {
   useEffect(() => {
     if (data) {
       setKospiData(data);
-      console.log(kospiData, "kospi");
     }
   }, [data]);
 
@@ -70,9 +69,7 @@ const MarketkospiChart = () => {
               itemStyle: {
                 color: function (params: { data: number[] }) {
                   // 주식 상승이면 빨간색, 하락이면 파란색 반환
-                  return params.data[1] >= params.data[0]
-                    ? "#f87369"
-                    : "#5a99f8";
+                  return params.data[1] >= params.data[0] ? "#f87369" : "#5a99f8";
                 },
               },
               areaStyle: {
@@ -88,26 +85,20 @@ const MarketkospiChart = () => {
                 ]),
               },
 
-              data: kospiData.map(
-                (item: KospiProps, index: number, array: KospiProps[]) => {
-                  const currentPrice = parseFloat(item.bstp_nmix_oprc);
-                  const previousPrice =
-                    index > 0
-                      ? parseFloat(array[index - 1].bstp_nmix_oprc)
-                      : currentPrice;
+              data: kospiData.map((item: KospiProps, index: number, array: KospiProps[]) => {
+                const currentPrice = parseFloat(item.bstp_nmix_oprc);
+                const previousPrice = index > 0 ? parseFloat(array[index - 1].bstp_nmix_oprc) : currentPrice;
 
-                  // 현재 가격과 이전 가격을 비교하여 색상 설정
-                  const color =
-                    currentPrice > previousPrice ? "#f87369" : "#5a99f8";
+                // 현재 가격과 이전 가격을 비교하여 색상 설정
+                const color = currentPrice > previousPrice ? "#f87369" : "#5a99f8";
 
-                  return {
-                    value: currentPrice,
-                    itemStyle: {
-                      color: color,
-                    },
-                  };
-                }
-              ),
+                return {
+                  value: currentPrice,
+                  itemStyle: {
+                    color: color,
+                  },
+                };
+              }),
             },
           ],
           grid: {

diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx
@@ -27,11 +27,8 @@ const TimeLineComponent = () => {
     const currentTime: Date = new Date();
     const createdAtTime: Date = new Date(createdAt);
 
-    const timeDifferenceInMilliseconds: number =
-      currentTime.getTime() - createdAtTime.getTime();
-    const timeDifferenceInSeconds = Math.floor(
-      timeDifferenceInMilliseconds / 1000
-    );
+    const timeDifferenceInMilliseconds: number = currentTime.getTime() - createdAtTime.getTime();
+    const timeDifferenceInSeconds = Math.floor(timeDifferenceInMilliseconds / 1000);
 
     if (timeDifferenceInSeconds < 60) {
       return "방금 전";
@@ -125,18 +122,21 @@ const TimeLineComponent = () => {
       }); // URL에 boardId 추가
       if (response.status === 200) {
         // 삭제 성공 처리
-        alert("삭제되었습니다");
+
         // 삭제한 게시물을 클라이언트 데이터에서도 제거
         const updatedBoardData = boardData.filter((el) => el.boardId !== boardId); // boardId로 수정
         setBoardData(updatedBoardData);
       } else {
-        alert("삭제 되었습니다");
+        toast.success("삭제 되었습니다", {
+          autoClose: 1000,
+        });
         window.location.href = "/community";
       }
     } catch (error) {
       console.error("작성자만 삭제 할 수 있습니다:", error);
-      alert("작성자만 삭제 할 수 있습니다");
-      console.log(boardData);
+      toast.info("작성자만 삭제할 수 있습니다", {
+        autoClose: 1000,
+      });
     }
   };