[Design]왼쪽 창 디자인 수정

전체종목, 관심종목에서 글씨 크기 수정, 글씨 색 수정 호버 시 하나의 아이템에서 변동률/변동가격 변화가 일어나도록 수정 가로선 위치 수정 메뉴 버튼 디자인을 밝고 크게 수정 Issues #19
codestates-seb · Sep 17, 2023 · d4f0e98 · d4f0e98
1 parent 6119d7b
commit d4f0e98
Show file tree

Hide file tree

Showing 10 changed files with 212 additions and 152 deletions.
diff --git a/client/src/components/EntireList/EntireList.tsx b/client/src/components/EntireList/EntireList.tsx
@@ -28,10 +28,14 @@ const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListTy
 
   return (
     <WatchListContainer>
-      <Header currentListType={currentListType} onChangeListType={onChangeListType} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
-      <Divider1 />
-      {isLogin == 0 ? (<HoldingsAmount>"로그인이 필요한 서비스 입니다."</HoldingsAmount>) : (<HoldingsAmount>현금 보유량: {holdingsAmount}원</HoldingsAmount>)}
-      <Divider2 />
+      <Header1Container>
+        <Header currentListType={currentListType} onChangeListType={onChangeListType} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
+      </Header1Container>
+      <Divider />
+      <Header2Container>
+        {isLogin == 0 ? (<HoldingsAmount>로그인이 필요한 서비스 입니다.</HoldingsAmount>) : (<HoldingsAmount>현금 보유량: {holdingsAmount}원</HoldingsAmount>)}
+      </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} />)}
       </StockList>
@@ -55,11 +59,21 @@ const WatchListContainer = styled.div`
   align-items: flex-start;
 `;
 
-const Divider1 = styled.div`
-  margin: 0px;
-  padding: 0px;
+const Header1Container =styled.div`
+  height: 48px;
+  display: flex;
+
+`;
+
+const Header2Container =styled.div`
+  height: 43.5px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+`;
+
+const Divider = styled.div`
   width: 100%;
-  height: 10px;
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #2f4f4f;
@@ -68,21 +82,10 @@ const Divider1 = styled.div`
 const HoldingsAmount = styled.div`
   font-size: 16px;
   font-weight: bold;
-  margin: 8px 12px;
-  text-align: center;
+  margin-left: 20px;
   color: darkslategray; // 현금 보유량을 파란색으로 표시
 `;
 
-const Divider2 = styled.div`
-  margin: 0px;
-  padding: 0px;
-  width: 100%;
-  height: 4.5px;
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid #2f4f4f;
-`;
-
 const StockList = styled.div`
   height: 100%;
   width: 100%;

diff --git a/client/src/components/EntireList/Header.tsx b/client/src/components/EntireList/Header.tsx
@@ -17,7 +17,7 @@ const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMe
       <HeaderText>{currentListType}</HeaderText>
       {isMenuOpen && (
         <SlideMenu>
-          <MenuItem onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem>
+          <MenuItem1 onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem1>
           <MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
           <MenuItem onClick={() => { onChangeListType(HOLDING_LIST); setMenuOpen(false); }}>{HOLDING_LIST}</MenuItem>
         </SlideMenu>
@@ -41,36 +41,50 @@ const HeaderWrapper = styled.div`
 `;
 
 const Icon = styled.img`
-  margin-top: 9.5px;
-  margin-left: 10px;
+  margin: 0px 10px 0px 10px;
   width: 24px;
   height: 24px;
   cursor: pointer;
-  margin-right: 10px;
+
+  &:hover {
+    background-color: #f2f2f2; 
+  }
 `;
 
 const HeaderText = styled.span`
-  margin-top: 9.5px;
+  margin-top: 2px;
   font-size: 18px;
 `;
 
 const SlideMenu = styled.div`
   position: absolute;
   top: 100%;
   left: 0;
-  width: 248px;
+  width: 247px;
   background-color: #f7f7f7;
-  border: 1px solid #e0e0e0; /* 밑에 가로줄 추가 */
+  border-top: 1px solid black; 
+  border-right: 1px solid black; 
+  border-left: 1px solid black; 
   display: flex;
   flex-direction: column;
 `;
 
 const MenuItem = styled.button`
-  padding: 8px 16px;
+  height: 40px;
+  padding: 8px 44px;
   border: none;
-  background-color: transparent;
+  background-color: white;
   cursor: pointer;
   text-align: left;
+  border-bottom:1px solid black;
+  font-size: 17px;
+
+  &:hover {
+    background-color: #f2f2f2; 
+  }
+`;
+const MenuItem1 = styled(MenuItem)`
+  border-left: 4px solid darkslategray; 
 `;
 
 export default Header;
diff --git a/client/src/components/EntireList/StockItem.tsx b/client/src/components/EntireList/StockItem.tsx
@@ -1,26 +1,31 @@
-import React from 'react';
+import React, { useState }  from 'react';
 import styled from 'styled-components';
 import logo from '../../asset/images/StockHolmImage.png';
 
-const StockItem: React.FC<StockItemProps> = ({ company, setShowChangePrice, showChangePrice }) => {
+const StockItem: React.FC<StockItemProps> = ({ company }) => {
   const isPositiveChange = parseFloat(company.stockChangeRate) > 0;
-  const priceColor = isPositiveChange ? 'red' : 'blue';
+  const priceColor1 = isPositiveChange ? "#ed2926" : "#2679ed";
+  const priceColor2 = isPositiveChange ? "#f87369" : "#5a99f8";
+
+
+  const [showChangePrice, setShowChangePrice] = useState(false); // 상태를 여기로 이동
 
   return (
-    <StockItemWrapper>
+    <StockItemWrapper
+      onMouseEnter={() => setShowChangePrice(true)}  // StockItemWrapper에 이벤트 리스너 적용
+      onMouseLeave={() => setShowChangePrice(false)}
+    >
       <Logo src={logo} alt="stock logo" />
       <StockInfo>
         <StockName>{company.korName}</StockName>
         <StockCode>{company.code}</StockCode>
       </StockInfo>
       <StockPriceSection>
-        <StockPrice change={priceColor}>{company.stockPrice}</StockPrice>
+        <StockPrice change={priceColor1}>{company.stockPrice}</StockPrice>
         <StockChange
-          change={priceColor}
-          onMouseEnter={() => setShowChangePrice(true)}
-          onMouseLeave={() => setShowChangePrice(false)}
+          change={priceColor2}
         >
-          {showChangePrice ? `${company.stockChangeAmount}%` : `${company.stockChangeRate}%`}
+          {showChangePrice ? `${company.stockChangeAmount}` : `${company.stockChangeRate}%`}
         </StockChange>
       </StockPriceSection>
     </StockItemWrapper>
@@ -58,7 +63,7 @@ const Logo = styled.img`
   border-radius: 50%;
   width: 40px;
   height: 40px;
-  margin-right: 12px;
+  margin-right: 10px;
 `;
 
 const StockInfo = styled.div`
@@ -69,18 +74,21 @@ const StockInfo = styled.div`
 `;
 
 const StockName = styled.span`
-  font-weight: bold;
+  font-weight: 500;
 `;
 
 const StockCode = styled.span`
   color: gray;
+  font-weight: 400;
+  font-size: 14px;
 `;
 
 const StockPriceSection = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: flex-end;
   margin-left: auto; /* 자동으로 왼쪽 여백 추가 */
+  margin-right:10px;
 `;
 
 const StockPrice = styled.span<{ change: string }>`
@@ -90,6 +98,8 @@ const StockPrice = styled.span<{ change: string }>`
 const StockChange = styled.span<{ change: string }>`
   color: ${(props) => props.change};
   cursor: pointer;
+  font-size:14px;
+
 `;
 
 export default StockItem;
diff --git a/client/src/components/HoldingList/Header.tsx b/client/src/components/HoldingList/Header.tsx
@@ -19,13 +19,16 @@ const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMe
         <SlideMenu>
           <MenuItem onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem>
           <MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
-          <MenuItem onClick={() => { onChangeListType(HOLDING_LIST); setMenuOpen(false); }}>{HOLDING_LIST}</MenuItem>
+          <MenuItem1 onClick={() => { onChangeListType(HOLDING_LIST); setMenuOpen(false); }}>{HOLDING_LIST}</MenuItem1>
         </SlideMenu>
       )}
     </HeaderWrapper>
   );
 };
 
+export default Header;
+
+
 type HeaderProps = {
   currentListType: string;
   onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
@@ -41,36 +44,46 @@ const HeaderWrapper = styled.div`
 `;
 
 const Icon = styled.img`
-  margin-top: 9.5px;
   width: 24px;
   height: 24px;
   cursor: pointer;
   margin-right: 10px;
-  margin-left:10px;
+  margin-left: 10px;
 `;
 
 const HeaderText = styled.span`
-  margin-top: 9.5px;
+  margin-top: 2px;
   font-size: 18px;
 `;
 
 const SlideMenu = styled.div`
   position: absolute;
   top: 100%;
   left: 0;
-  width: 248px;
+  width: 247px;
   background-color: #f7f7f7;
-  border: 1px solid #e0e0e0; /* 밑에 가로줄 추가 */
+  border-top: 1px solid black; 
+  border-right: 1px solid black; 
+  border-left: 1px solid black; 
   display: flex;
   flex-direction: column;
 `;
 
 const MenuItem = styled.button`
-  padding: 8px 16px;
+  height: 40px;
+  padding: 8px 44px;
   border: none;
-  background-color: transparent;
+  background-color: white;
   cursor: pointer;
   text-align: left;
+  border-bottom:1px solid black;
+  font-size: 17px;
+
+  &:hover {
+    background-color: #f2f2f2; 
+  }
+`;
+const MenuItem1 = styled(MenuItem)`
+  border-left: 4px solid darkslategray; 
 `;
 
-export default Header;
diff --git a/client/src/components/HoldingList/HoldingList.tsx b/client/src/components/HoldingList/HoldingList.tsx
@@ -22,15 +22,21 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
 
   return (
     <WatchListContainer>
-      <Header
-        currentListType={currentListType}
-        onChangeListType={onChangeListType}
-        isMenuOpen={isMenuOpen}
-        setMenuOpen={setMenuOpen}
-      />
-      <Divider1 />
-      <EvaluationProfit>평가 수익금: {totalEvaluationProfit.toLocaleString()}원</EvaluationProfit>
-      <Divider2 />
+      <Header1Container>
+        <Header
+          currentListType={currentListType}
+          onChangeListType={onChangeListType}
+          isMenuOpen={isMenuOpen}
+          setMenuOpen={setMenuOpen}
+        />
+      </Header1Container>
+      <Divider />
+      <Header2Container>
+      <EvaluationProfit profit={totalEvaluationProfit}>
+         평가 수익금: {totalEvaluationProfit.toLocaleString()}원
+      </EvaluationProfit>
+      </Header2Container>
+      <Divider />
       <StockList>
         {isLoading || isCompanyDataLoading ? (
           <div>Loading...</div>
@@ -71,33 +77,35 @@ const WatchListContainer = styled.div`
   align-items: flex-start;
 `;
 
-const Divider1 = styled.div`
-  margin: 0px;
-  padding: 0px;
-  width: 100%;
-  height: 10px;
+const Header1Container =styled.div`
+  height: 48px;
   display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid #2f4f4f;
 `;
-const EvaluationProfit = styled.div`
-  font-size: 16px;
-  font-weight: bold;
-  margin: 8px 12px;
-  text-align: center;
-  color: red;
+
+const Header2Container =styled.div`
+  height: 43.5px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
 `;
 
-const Divider2 = styled.div`
-  margin: 0px;
-  padding: 0px;
+const Divider = styled.div`
   width: 100%;
-  height: 4.5px;
   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'
+  };
+`;
 
 const StockList = styled.div`
   height: 100%;