관심목록에 주식정보 연결

useCompanyData 훅 생성
기업Id를 1부터 14까지 모두 삽입
세로 스크롤 구현
현재 이름이 관심목록인 것을 전체목록으로 정정 필요
Issues #19

client/src/components/watchlist/StockItem.tsx

@@ -1,43 +1,50 @@
 import React from 'react';
 import styled from 'styled-components';
+import logo from '../../asset/logos/SK_logo.png'
+
+
 
 // StockItem 컴포넌트는 주식 정보를 나타내는 UI를 구성합니다.
-const StockItem: React.FC<StockItemProps> = ({ stock, setShowChangePrice, showChangePrice }) => {
+const StockItem: React.FC<StockItemProps> = ({ company, setShowChangePrice, showChangePrice }) => {
     return (
       <StockItemWrapper>  {/* 전체 아이템을 감싸는 래퍼 */}
-        <Logo src={stock.logo} alt="stock logo"/>  {/* 로고 이미지 */}
+        <Logo src={logo} alt="stock logo"/>  {/* 로고 이미지 */}
         <StockInfo>  {/* 주식의 이름과 코드를 담는 섹션 */}
-          <StockName>{stock.name}</StockName>  {/* 주식 이름 */}
-          <StockCode>{stock.code}</StockCode>  {/* 주식 코드 */}
+          <StockName>{company.korName}</StockName>  {/* 주식 이름 */}
+          <StockCode>{company.code}</StockCode>  {/* 주식 코드 */}
         </StockInfo>
         <StockPriceSection>  {/* 주식의 가격과 변동률을 담는 섹션 */}
-          <StockPrice change={stock.change}>{stock.price}</StockPrice>  {/* 주식 가격 */}
-          <StockChange 
-            change={stock.change} 
+        <StockPrice change={company.stockChangeRate}>{company.stockPrice}</StockPrice>
+            <StockChange 
+            change={company.stockChangeRate}
             onMouseEnter={() => setShowChangePrice(true)} 
             onMouseLeave={() => setShowChangePrice(false)}
-          >
-            {showChangePrice ? stock.changePrice : stock.change}  {/* 변동률 또는 변동 가격 */}
+        >
+            {showChangePrice ? company.stockChangeAmount : company.stockChangeRate} {/* 변동률 또는 변동 가격 */}
           </StockChange>
         </StockPriceSection>
       </StockItemWrapper>
     );
   };
 
-  type Stock = {
-    name: string;
+
+  // 새로운 주식 데이터 형태
+  type NewCompanyData = {
+    companyId: number;
     code: string;
-    price: string;
-    change: string;
-    changePrice: string;
-    logo: string;
+    korName: string;
+    stockPrice: string; // 현재가
+    stockChangeAmount: string; // 변동량
+    stockChangeRate: string; // 변동률
   };
 
+  // StockItem 컴포넌트에서 사용할 주식 데이터 형태
   type StockItemProps = {
-    stock: Stock;
-    showChangePrice: boolean;
+    company: NewCompanyData;
     setShowChangePrice: React.Dispatch<React.SetStateAction<boolean>>;
+    showChangePrice: boolean;
   };
+
 
 const StockItemWrapper = styled.div`
   display: flex;

client/src/components/watchlist/WatchList.tsx

@@ -2,58 +2,53 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import Header from './Header';
 import StockItem from './StockItem';
-
-type WatchListProps = {
-  currentListType: "관심목록" | "투자목록";
-  onChangeListType: (type: "관심목록" | "투자목록") => void;
-};
+import useCompanyData from '../../hooks/useCompanyData';
 
 const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType }) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [showChangePrice, setShowChangePrice] = useState(false);
 
-  // Sample stocks data
-  const stocks = [
-    {
-      name: '삼성전자',
-      code: '005930',
-      price: '57800',
-      change: '+0.67%',
-      changePrice: '+380',
-      logo: 'https://your_logo_url.com'
-    },
-    {
-      name: '현대차',
-      code: '005380',
-      price: '205000',
-      change: '-0.24%',
-      changePrice: '-500',
-      logo: 'https://your_logo_url.com'
-    },
-  ];
+  // useCompanyData 훅 사용하여 데이터 가져오기
+  const { data: companies, isLoading, isError } = useCompanyData(1, 14);
+
+  // 'companies'가 'undefined'인 경우를 처리하기 위해 빈 배열로 초기화
+  const companiesList = companies || [];
 
   return (
     <WatchListContainer>
-      <Header 
-        currentListType={currentListType} 
-        onChangeListType={onChangeListType} 
-        isMenuOpen={isMenuOpen} 
+      <Header
+        currentListType={currentListType}
+        onChangeListType={onChangeListType}
+        isMenuOpen={isMenuOpen}
         setMenuOpen={setMenuOpen}
       />
       <StockList>
-        {stocks.map((stock, index) => (
-          <StockItem 
-            key={index} 
-            stock={stock} 
-            setShowChangePrice={setShowChangePrice} 
-            showChangePrice={showChangePrice}
-          />
-        ))}
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : isError ? (
+          <div>Error fetching data</div>
+        ) : (
+          companiesList.map((company) => (
+            <StockItem
+              key={company.companyId}
+              company={company}
+              setShowChangePrice={setShowChangePrice}
+              showChangePrice={showChangePrice}
+            />
+          ))
+        )}
       </StockList>
     </WatchListContainer>
   );
 };
 
+// Props와 상태에 대한 타입 정의
+type WatchListProps = {
+  currentListType: '관심목록' | '투자목록';
+  onChangeListType: (type: '관심목록' | '투자목록') => void;
+};
+
+// WatchList 컴포넌트에 대한 스타일드 컴포넌트 정의
 const WatchListContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -62,6 +57,8 @@ const WatchListContainer = styled.div`
 
 const StockList = styled.div`
   width: 100%;
+  max-height: 400px; /* 스크롤이 발생할 최대 높이를 지정하세요 */
+  overflow-y: auto; /* 세로 스크롤을 활성화합니다 */
 `;
 
 export default WatchList;

client/src/hooks/useCompanyData.ts

@@ -0,0 +1,57 @@
+import { useQuery } from 'react-query';
+import axios from 'axios';
+
+const BASE_URL = 'http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080';
+
+// 데이터 타입 정의
+type CompanyData = {
+  companyId: number;
+  code: string;
+  korName: string;
+  stockInfResponseDto: {
+    stck_prpr: string;
+    prdy_vrss: string;
+    prdy_ctrt: string;
+  };
+};
+
+// 커스텀 훅 정의
+function useCompanyData(startCompanyId: number, endCompanyId: number) {
+  const fetchData = async (companyId: number) => {
+    const url = `${BASE_URL}/companies/${companyId}`;
+    const response = await axios.get<CompanyData>(url);
+    return response.data;
+  };
+
+  // companyId 범위에 대한 배열 생성
+  const companyIds = Array.from({ length: endCompanyId - startCompanyId + 1 }, (_, index) => startCompanyId + index);
+
+  // 리액트-쿼리의 useQuery 훅 사용
+  const { data, isLoading, isError } = useQuery<CompanyData[]>(
+    ['companyData', startCompanyId, endCompanyId],
+    async () => {
+      const promises = companyIds.map((companyId) => fetchData(companyId));
+      return Promise.all(promises);
+    }
+  );
+
+  // 필요한 데이터 추출 및 저장
+  const extractedData = data?.map((company) => {
+    return {
+      companyId: company.companyId,
+      code: company.code,
+      korName: company.korName,
+      stockPrice: company.stockInfResponseDto.stck_prpr,
+      stockChangeAmount: company.stockInfResponseDto.prdy_vrss,
+      stockChangeRate: company.stockInfResponseDto.prdy_ctrt,
+    };
+  });
+
+  return {
+    data: extractedData,
+    isLoading,
+    isError,
+  };
+}
+
+export default useCompanyData;