[Design] 좌측 종목관련 컴포넌트 디자인 및 레이아웃 수정 (전체종목, 보유종목)

- 좌측 종목관련 컴포넌트 중 전체정복, 보유종목 컴포넌트 디자인 및 레이아웃 수정 - 관심종목 컴포넌트 추후 수정 예정 Issues #122
codestates-seb · Sep 17, 2023 · 730ac0d · 730ac0d
1 parent 66915e4
commit 730ac0d
Show file tree

Hide file tree

Showing 7 changed files with 298 additions and 217 deletions.
diff --git a/client/src/components/EntireList/EntireList.tsx b/client/src/components/EntireList/EntireList.tsx
@@ -20,7 +20,7 @@ import useGetCash from "../../hooks/useGetCash";
   4) 금액에 회계 단위 (toLocaleString) 적용 -> 이를 위해 useEffect, useState 활용
   */
 
-const holdingAmountText = "현금 보유량 :";
+const holdingAmountText = "보유 현금";
 const amountUnit = "원";
 
 const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListType }) => {
@@ -61,8 +61,8 @@ const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListTy
         <HoldingsAmount isLogin={isLogin}>
           {isLogin === 1 && (
             <>
-              <div>{holdingAmountText}</div>
-              <div>
+              <div className="amountText">{holdingAmountText}</div>
+              <div className="amount">
                 {holdingCash} {amountUnit}
               </div>
             </>
@@ -125,12 +125,16 @@ const HoldingsAmount = styled.div<{ isLogin: number }>`
   height: 100%;
   display: ${(props) => (props.isLogin === 0 ? "none" : "flex")};
   flex-direction: row;
-  padding-left: 13px;
+  padding-left: 14px;
   align-items: center;
-  gap: 5px;
+  gap: 6.5px;
   font-size: 0.95em;
   font-weight: 570;
-  color: #2f4f4f;
+  color: black;
+
+  .amount {
+    color: #2f4f4f;
+  }
 `;
 
 const StockList = styled.div`

diff --git a/client/src/components/EntireList/Header.tsx b/client/src/components/EntireList/Header.tsx
@@ -89,16 +89,19 @@ const SlideMenu = styled.div`
 
 const MenuItem = styled.button`
   height: 40px;
-  padding: 8px 44px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
   border: none;
   background-color: white;
   cursor: pointer;
   text-align: left;
   border-bottom: 1px solid black;
-  font-size: 17px;
+  font-size: 15.5px;
 
   &:hover {
     background-color: #f2f2f2;
+    color: darkslategray;
   }
 `;
 const MenuItem1 = styled(MenuItem)`

diff --git a/client/src/components/HoldingList/Header.tsx b/client/src/components/HoldingList/Header.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 import Menu_icon from "../../asset/images/menu.png";
 
 const ALL_LIST = "전체종목";
@@ -9,17 +9,34 @@ const HOLDING_LIST = "보유종목";
 const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMenuOpen, setMenuOpen }) => {
   return (
     <HeaderWrapper>
-      <Icon
-        src={Menu_icon}
-        alt="menu icon"
-        onClick={() => setMenuOpen(!isMenuOpen)}
-      />
+      <Icon src={Menu_icon} alt="menu icon" onClick={() => setMenuOpen(!isMenuOpen)} />
       <HeaderText>{currentListType}</HeaderText>
       {isMenuOpen && (
         <SlideMenu>
-          <MenuItem onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem>
-          <MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
-          <MenuItem1 onClick={() => { onChangeListType(HOLDING_LIST); setMenuOpen(false); }}>{HOLDING_LIST}</MenuItem1>
+          <MenuItem
+            onClick={() => {
+              onChangeListType(ALL_LIST);
+              setMenuOpen(false);
+            }}
+          >
+            {ALL_LIST}
+          </MenuItem>
+          <MenuItem
+            onClick={() => {
+              onChangeListType(INTEREST_LIST);
+              setMenuOpen(false);
+            }}
+          >
+            {INTEREST_LIST}
+          </MenuItem>
+          <MenuItem1
+            onClick={() => {
+              onChangeListType(HOLDING_LIST);
+              setMenuOpen(false);
+            }}
+          >
+            {HOLDING_LIST}
+          </MenuItem1>
         </SlideMenu>
       )}
     </HeaderWrapper>
@@ -28,16 +45,15 @@ const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMe
 
 export default Header;
 
-
 type HeaderProps = {
   currentListType: string;
   onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
   isMenuOpen: boolean;
   setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-
 const HeaderWrapper = styled.div`
+  height: 43px;
   display: flex;
   align-items: center;
   position: relative;
@@ -62,28 +78,30 @@ const SlideMenu = styled.div`
   left: 0;
   width: 247px;
   background-color: #f7f7f7;
-  border-top: 1px solid black; 
-  border-right: 1px solid black; 
-  border-left: 1px solid black; 
+  border-top: 1px solid black;
+  border-right: 1px solid black;
+  border-left: 1px solid black;
   display: flex;
   flex-direction: column;
 `;
 
 const MenuItem = styled.button`
   height: 40px;
-  padding: 8px 44px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
   border: none;
   background-color: white;
   cursor: pointer;
   text-align: left;
-  border-bottom:1px solid black;
-  font-size: 17px;
+  border-bottom: 1px solid black;
+  font-size: 15.5px;
 
   &:hover {
-    background-color: #f2f2f2; 
+    background-color: #f2f2f2;
+    color: darkslategray;
   }
 `;
 const MenuItem1 = styled(MenuItem)`
-  border-left: 4px solid darkslategray; 
+  border-left: 4px solid darkslategray;
 `;
-
diff --git a/client/src/components/HoldingList/HoldingList.tsx b/client/src/components/HoldingList/HoldingList.tsx
@@ -1,10 +1,14 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import Header from './Header';
-import StockItem from './StockItem';
-import useGetStockHolds from '../../hooks/useGetStockholds';
-import { StockItemProps } from './StockItem';
-import useCompanyData from '../../hooks/useCompanyData';
+import React, { useState } from "react";
+import styled from "styled-components";
+import Header from "./Header";
+import StockItem from "./StockItem";
+import useGetStockHolds from "../../hooks/useGetStockholds";
+import { StockItemProps } from "./StockItem";
+import useCompanyData from "../../hooks/useCompanyData";
+
+// 🔴
+const evalutationProfitText = "평가 수익금";
+const profitUnit = "원";
 
 const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListType }) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
@@ -17,44 +21,34 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
   let totalEvaluationProfit = 0;
 
   if (stockHolds) {
-    totalEvaluationProfit = stockHolds.reduce((sum:number, stockHold: StockItemProps['stockData']) => sum + stockHold.stockReturn, 0);
+    totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0);
   }
 
   return (
     <WatchListContainer>
       <Header1Container>
-        <Header
-          currentListType={currentListType}
-          onChangeListType={onChangeListType}
-          isMenuOpen={isMenuOpen}
-          setMenuOpen={setMenuOpen}
-        />
+        <Header currentListType={currentListType} onChangeListType={onChangeListType} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
       </Header1Container>
-      <Divider />
+      {/* <Divider /> */}
       <Header2Container>
-      <EvaluationProfit profit={totalEvaluationProfit}>
-         평가 수익금: {totalEvaluationProfit.toLocaleString()}원
-      </EvaluationProfit>
+        <EvaluationProfit profit={totalEvaluationProfit}>
+          <div className="profitText">{evalutationProfitText}</div>
+          <div className="profit">
+            {totalEvaluationProfit.toLocaleString()} {profitUnit}
+          </div>
+        </EvaluationProfit>
       </Header2Container>
-      <Divider />
+      {/* <Divider /> */}
       <StockList>
         {isLoading || isCompanyDataLoading ? (
           <div>Loading...</div>
         ) : isError || isCompanyDataError ? (
           <div>Error fetching data</div>
         ) : (
-          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;
+          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>
@@ -65,46 +59,60 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
 export default HoldingList;
 
 type WatchListProps = {
-  currentListType: '전체종목' | '관심종목' | '보유종목';
-  onChangeListType: (type: '전체종목' | '관심종목' | '보유종목') => void;
-
+  currentListType: "전체종목" | "관심종목" | "보유종목";
+  onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
 };
 
 const WatchListContainer = styled.div`
-  height: calc(100vh - 53px); 
+  width: 100%;
+  height: calc(100vh - 53px);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 `;
 
-const Header1Container =styled.div`
+const Header1Container = styled.div`
+  width: 100%;
   height: 48px;
   display: flex;
+  border-bottom: 1px solid black;
 `;
 
-const Header2Container =styled.div`
+const Header2Container = styled.div`
+  width: 100%;
   height: 43.5px;
   display: flex;
-  justify-content:center;
+  justify-content: center;
   align-items: center;
 `;
 
-const Divider = styled.div`
+// const Divider = styled.div`
+//   width: 100%;
+//   display: flex;
+//   flex-direction: row;
+//   border-bottom: 1px solid #2f4f4f;
+// `;
+const EvaluationProfit = styled.div<{ profit: number }>`
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid #2f4f4f;
-`;
-const EvaluationProfit = styled.div<{ profit: number }>`
-  font-size: 16px;
-  font-weight: bold;
-  margin-left: 20px;
-  text-align: center;
-  color: ${props => 
-    props.profit === 0 ? '#000' :
-    props.profit > 0 ? '#e22926' :
-    '#2679ed'
-  };
+  align-items: center;
+  font-size: 0.95em;
+  font-weight: 570;
+  gap: 6.5px;
+  padding-left: 14px;
+  text-align: "center";
+  color: ${(props) => (props.profit === 0 ? "#000" : props.profit > 0 ? "#e22926" : "#2679ed")};
+  border-bottom: 1px solid black;
+
+  .profitText {
+    color: black;
+  }
+
+  .profit {
+    color: #2f4f4f;
+  }
 `;
 
 const StockList = styled.div`