[Feat]전체목록 생성

기존의 Watchlist 이름을 EntireList로 바꾸고, 전체목록으로 설정 주식 정보들의 배열을 정렬 스크롤 높이를 더 높게 수정 가격이 오르면 변동률과 변동가격을 빨간색으로, 내리면 파란색으로 보이게 설정 Issues #19
codestates-seb · Sep 15, 2023 · 9eaa5e1 · 9eaa5e1
1 parent 914b662
commit 9eaa5e1
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 80 deletions.
diff --git a/...nt/src/components/watchlist/WatchList.tsx → ...t/src/components/watchlist/EntireList.tsx b/...nt/src/components/watchlist/WatchList.tsx → ...t/src/components/watchlist/EntireList.tsx
@@ -22,6 +22,9 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
         isMenuOpen={isMenuOpen}
         setMenuOpen={setMenuOpen}
       />
+      <Divider1 />
+      <EvaluationProfit>평가 수익금: +5,000,000원</EvaluationProfit> {/* 임의의 평가 수익금 */}
+      <Divider2 />
       <StockList>
         {isLoading ? (
           <div>Loading...</div>
@@ -55,9 +58,38 @@ const WatchListContainer = styled.div`
   align-items: flex-start;
 `;
 
+const Divider1 = styled.div`
+margin:0px;
+padding:0px;
+width: 100%;
+height: 10px;
+display: flex;
+flex-direction: row;
+border-bottom: 1px solid #2f4f4f;
+`;
+
+const Divider2 = styled.div`
+margin:0px;
+padding:0px;
+width: 100%;
+height: 4.5px;
+display: flex;
+flex-direction: row;
+border-bottom: 1px solid #2f4f4f;
+`;
+
+
+
+const EvaluationProfit = styled.div`
+font-size: 16px;
+font-weight: bold;
+margin: 8px 0;
+text-align: center;
+color: red; // 수익금이 플러스일 경우 초록색으로 표시
+`;
 const StockList = styled.div`
-  width: 100%;
-  max-height: 400px; /* 스크롤이 발생할 최대 높이를 지정하세요 */
+  width: 90%;
+  max-height: 800px; /* 스크롤이 발생할 최대 높이를 지정하세요 */
   overflow-y: auto; /* 세로 스크롤을 활성화합니다 */
 `;
 

diff --git a/client/src/components/watchlist/Header.tsx b/client/src/components/watchlist/Header.tsx
@@ -5,39 +5,31 @@ import Menu_icon from "../../asset/images/menu.png";
 const INTEREST_LIST = "관심목록";
 const INVESTMENT_LIST = "투자목록";
 
-// Header 컴포넌트는 다음과 같은 기능을 수행합니다.
-// 1. 메뉴 아이콘과 현재 리스트 타입을 표시합니다.
-// 2. 메뉴 아이콘을 클릭하면 메뉴의 열림/닫힘 상태를 토글합니다.
-// 3. 메뉴가 열려 있으면 SlideMenu를 통해 관심목록과 투자목록을 선택할 수 있습니다.
-
 const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMenuOpen, setMenuOpen }) => {
-    return (
-        <HeaderWrapper>
-          <Icon 
-            src={Menu_icon}
-            alt="menu icon"
-            onClick={() => setMenuOpen(!isMenuOpen)}
-          />
-          <HeaderText>{currentListType}</HeaderText>
-          {isMenuOpen && (
-            <SlideMenu>
-              <MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
-              <MenuItem onClick={() => { onChangeListType(INVESTMENT_LIST); setMenuOpen(false); }}>{INVESTMENT_LIST}</MenuItem>
-            </SlideMenu>
-          )}
-        </HeaderWrapper>
-      );
-    };
+  return (
+    <HeaderWrapper>
+      <Icon
+        src={Menu_icon}
+        alt="menu icon"
+        onClick={() => setMenuOpen(!isMenuOpen)}
+      />
+      <HeaderText>{currentListType}</HeaderText>
+      {isMenuOpen && (
+        <SlideMenu>
+          <MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
+          <MenuItem onClick={() => { onChangeListType(INVESTMENT_LIST); setMenuOpen(false); }}>{INVESTMENT_LIST}</MenuItem>
+        </SlideMenu>
+      )}
+    </HeaderWrapper>
+  );
+};
 
-// HeaderProps는 Header 컴포넌트가 받을 props의 타입을 정의합니다.
 type HeaderProps = {
-    currentListType: string;
-    onChangeListType: (type: "관심목록" | "투자목록") => void;
-    isMenuOpen: boolean;
-    setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
-
-  };
-
+  currentListType: string;
+  onChangeListType: (type: "관심목록" | "투자목록") => void;
+  isMenuOpen: boolean;
+  setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
 
 const HeaderWrapper = styled.div`
   display: flex;
@@ -46,13 +38,15 @@ const HeaderWrapper = styled.div`
 `;
 
 const Icon = styled.img`
+  margin-top: 9.5px;
   width: 24px;
   height: 24px;
   cursor: pointer;
   margin-right: 10px;
 `;
 
 const HeaderText = styled.span`
+  margin-top: 9.5px;
   font-size: 18px;
 `;
 
@@ -62,7 +56,7 @@ const SlideMenu = styled.div`
   left: 0;
   width: 248px;
   background-color: #f7f7f7;
-  border: 1px solid #e0e0e0;
+  border: 1px solid #e0e0e0; /* 밑에 가로줄 추가 */
   display: flex;
   flex-direction: column;
 `;

diff --git a/client/src/components/watchlist/StockItem.tsx b/client/src/components/watchlist/StockItem.tsx
@@ -1,55 +1,52 @@
 import React from 'react';
 import styled from 'styled-components';
-import logo from '../../asset/logos/SK_logo.png'
+import logo from '../../asset/logos/SK_logo.png';
 
-
-
-// StockItem 컴포넌트는 주식 정보를 나타내는 UI를 구성합니다.
 const StockItem: React.FC<StockItemProps> = ({ company, setShowChangePrice, showChangePrice }) => {
-    return (
-      <StockItemWrapper>  {/* 전체 아이템을 감싸는 래퍼 */}
-        <Logo src={logo} alt="stock logo"/>  {/* 로고 이미지 */}
-        <StockInfo>  {/* 주식의 이름과 코드를 담는 섹션 */}
-          <StockName>{company.korName}</StockName>  {/* 주식 이름 */}
-          <StockCode>{company.code}</StockCode>  {/* 주식 코드 */}
-        </StockInfo>
-        <StockPriceSection>  {/* 주식의 가격과 변동률을 담는 섹션 */}
-        <StockPrice change={company.stockChangeRate}>{company.stockPrice}</StockPrice>
-            <StockChange 
-            change={company.stockChangeRate}
-            onMouseEnter={() => setShowChangePrice(true)} 
-            onMouseLeave={() => setShowChangePrice(false)}
+  const isPositiveChange = parseFloat(company.stockChangeRate) > 0;
+  const priceColor = isPositiveChange ? 'red' : 'blue';
+
+  return (
+    <StockItemWrapper>
+      <Logo src={logo} alt="stock logo" />
+      <StockInfo>
+        <StockName>{company.korName}</StockName>
+        <StockCode>{company.code}</StockCode>
+      </StockInfo>
+      <StockPriceSection>
+        <StockPrice change={priceColor}>{company.stockPrice}</StockPrice>
+        <StockChange
+          change={priceColor}
+          onMouseEnter={() => setShowChangePrice(true)}
+          onMouseLeave={() => setShowChangePrice(false)}
         >
-            {showChangePrice ? company.stockChangeAmount : company.stockChangeRate} {/* 변동률 또는 변동 가격 */}
-          </StockChange>
-        </StockPriceSection>
-      </StockItemWrapper>
-    );
-  };
-
-
-  // 새로운 주식 데이터 형태
-  type NewCompanyData = {
-    companyId: number;
-    code: string;
-    korName: string;
-    stockPrice: string; // 현재가
-    stockChangeAmount: string; // 변동량
-    stockChangeRate: string; // 변동률
-  };
-
-  // StockItem 컴포넌트에서 사용할 주식 데이터 형태
-  type StockItemProps = {
-    company: NewCompanyData;
-    setShowChangePrice: React.Dispatch<React.SetStateAction<boolean>>;
-    showChangePrice: boolean;
-  };
-
+          {showChangePrice ? `${company.stockChangeAmount}%` : `${company.stockChangeRate}%`}
+        </StockChange>
+      </StockPriceSection>
+    </StockItemWrapper>
+  );
+};
+
+type NewCompanyData = {
+  companyId: number;
+  code: string;
+  korName: string;
+  stockPrice: string;
+  stockChangeAmount: string;
+  stockChangeRate: string;
+};
+
+type StockItemProps = {
+  company: NewCompanyData;
+  setShowChangePrice: React.Dispatch<React.SetStateAction<boolean>>;
+  showChangePrice: boolean;
+};
 
 const StockItemWrapper = styled.div`
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  flex-direction: row; /* 수평으로 정렬 */
+  justify-content: flex-start; /* 왼쪽 정렬 */
+  align-items: flex-start; /* 위로 정렬 */
   padding: 8px 0;
   border-bottom: 1px solid #e0e0e0;
   width: 100%;
@@ -83,14 +80,15 @@ const StockPriceSection = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  margin-left: auto; /* 자동으로 왼쪽 여백 추가 */
 `;
 
 const StockPrice = styled.span<{ change: string }>`
-  color: ${props => props.change.startsWith('+') ? 'red' : 'blue'};
+  color: ${(props) => props.change};
 `;
 
 const StockChange = styled.span<{ change: string }>`
-  color: ${props => props.change.startsWith('+') ? 'red' : 'blue'};
+  color: ${(props) => props.change};
   cursor: pointer;
 `;
 

diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
@@ -10,7 +10,7 @@ import EmailSignupModal from "../components/Signups/EmailSignup";
 import EmailVerificationModal from "../components/Signups/EmailCertify";
 import PasswordSettingModal from "../components/Signups/Password";
 import CentralChart from "../components/CentralChart/Index";
-import WatchList from "../components/watchlist/WatchList";
+import WatchList from "../components/watchlist/EntireList";
 import Holdings from "../components/watchlist/Holdings"; // Assuming you have a Holdings component
 import CompareChartSection from "../components/CompareChartSection/Index";
 import StockOrderSection from "../components/StockOrderSection/Index";