[Add] 비교차트 테스트 위한 UI 및 로직 초기세팅

- 비교차트 기능 관련하여 구현여부 테스트 위한 UI 및 로직 초기 세팅 (미완)
- 기능 테스트 성공 시 UI 및 로직 보완하여 완성할 예정

Issues #14

client/src/components/CentralChart/CompareChartBtn.tsx

@@ -0,0 +1,98 @@
+import { useState } from "react";
+import { styled } from "styled-components";
+import useCompanyData from "../../hooks/useCompanyData";
+
+import CompareList from "./CompareList";
+import IconImg from "../../asset/CentralSectionMenu-compareChart.png";
+
+const buttonText: string = "비교차트";
+
+const CompareChartBtn = () => {
+  const { data: companyList } = useCompanyData(1, 14);
+  const [compare, setCompare] = useState(false);
+
+  const handleCompareChart = () => {
+    setCompare(!compare);
+  };
+
+  // console.log(companyList);
+
+  return (
+    <Container>
+      <div className="compareButtonContainer">
+        <Icon src={IconImg} />
+        <div className="compareButton" onClick={handleCompareChart}>
+          {buttonText}
+        </div>
+      </div>
+      {compare && (
+        <CompareContainer>
+          <StockList>
+            {companyList?.map((company) => {
+              const corpName = company.korName;
+              const companyId = company.companyId;
+              console.log(corpName);
+
+              return <CompareList corpName={corpName} compareCompanyId={companyId} />;
+            })}
+          </StockList>
+        </CompareContainer>
+      )}
+    </Container>
+  );
+};
+
+export default CompareChartBtn;
+
+const Container = styled.div`
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+
+  padding-top: 10px;
+  padding-right: 13px;
+
+  .compareButtonContainer {
+    display: flex;
+    flex-direction: row;
+    z-index: 2;
+  }
+
+  .compareButton {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    padding-top: 2.5px;
+    cursor: pointer;
+  }
+`;
+
+const Icon = styled.img`
+  width: auto;
+  height: 18px;
+  padding-top: 0.5px;
+  padding-right: 3px;
+`;
+
+const CompareContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+`;
+
+const StockList = styled.div`
+  position: absolute;
+  width: 100px;
+  height: 300px;
+  z-index: 2;
+
+  background-color: white;
+`;

client/src/components/CentralChart/CompareList.tsx

@@ -0,0 +1,34 @@
+import { useSelector, useDispatch } from "react-redux";
+import { setCompareStock } from "../../reducer/CompareChart-Reducer";
+import { StateProps } from "../../models/stateProps";
+import { styled } from "styled-components";
+
+const CompareList = (props: OwnProps) => {
+  const { corpName, compareCompanyId } = props;
+
+  //🔴 확인 직업
+  //   const compareInfo = useSelector((state: StateProps) => state.compareChart);
+  //   console.log(compareInfo);
+  //
+
+  const dispatch = useDispatch();
+  const currentCompanyid = useSelector((state: StateProps) => state.companyId);
+
+  const handleSelectCompareStock = () => {
+    if (currentCompanyid === compareCompanyId) {
+      return;
+    }
+
+    dispatch(setCompareStock(compareCompanyId));
+  };
+
+  return <Contianer onClick={handleSelectCompareStock}>{corpName}</Contianer>;
+};
+export default CompareList;
+
+interface OwnProps {
+  corpName: string;
+  compareCompanyId: number;
+}
+
+const Contianer = styled.div``;

client/src/components/CentralChart/Index.tsx

@@ -1,8 +1,19 @@
 import { styled } from "styled-components";
 import UpperMenuBar from "../CentralChartMenu/Index";
 import StockChart from "./StockChart";
+import useCompanyData from "../../hooks/useCompanyData";
 
 const CentralChart = () => {
+  const { isLoading: companyListLoading, isError: companyListError } = useCompanyData(1, 14);
+
+  if (companyListLoading) {
+    return <p>로딩중</p>;
+  }
+
+  if (companyListError) {
+    return <p>에러 발생</p>;
+  }
+
   return (
     <Container>
       <UpperMenuBar />

client/src/components/CentralChart/StockChart.tsx

@@ -5,6 +5,7 @@ import { StateProps } from "../../models/stateProps";
 
 import useGetStockData from "../../hooks/useGetStockData";
 import useGetStockChart from "../../hooks/useGetStockChart";
+import CompareChartBtn from "./CompareChartBtn";
 
 const loadingText = "로딩 중 입니다...";
 const errorText = "화면을 불러올 수 없습니다";
@@ -25,20 +26,32 @@ const StockChart = () => {
 
   return (
     <Container>
-      <EChartsReact option={options} style={chartStyle} />
+      <ChartContainer>
+        <EChartsReact option={options} style={chartStyle} />
+      </ChartContainer>
+      <CompareChartBtn />
     </Container>
   );
 };
 
 export default StockChart;
 
 const Container = styled.div`
+  position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  z-index: 2;
+`;
+
+const ChartContainer = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
 `;
 
 const LoadingContainer = styled.div`

client/src/components/CentralChartMenu/Index.tsx

@@ -2,7 +2,6 @@ import { styled } from "styled-components";
 import ExpandScreenBtn from "./ExpandScreenBtn";
 import StockOverview from "./StockOverview";
 import StockOrderBtn from "./StockOrderBtn";
-// import CompareChartBtn from "./CompareChartBtn";
 
 const UpperMenuBar = () => {
   return (
@@ -15,9 +14,6 @@ const UpperMenuBar = () => {
         <StockOrderBtn type="selling" />
         <ExpandScreenBtn direction="right" />
       </div>
-      {/* <div className="SecondLine">
-        <CompareChartBtn />
-      </div> */}
     </Container>
   );
 };

client/src/hooks/useGetStockChart.ts

@@ -17,42 +17,53 @@ const useGetStockChart = (companyId: number) => {
   const [corpName, setCorpName] = useState("");
 
   // 🔴 비교차트 테스트
-  const [compareChart, setCompare] = useState<CompareProps | undefined>(undefined);
-
-  const testData = organizeData(chartData);
-  const testPrice = testData.values;
-  const prPriceList: number[] = [];
-  // console.log(testPrice);
-  testPrice.forEach((price) => {
-    prPriceList.push(price[0]);
-  });
-
-  console.log(prPriceList);
-  const testCompare = {
-    name: "비교차트 테스트",
-    type: "line",
-    data: prPriceList,
-    lineStyle: {
-      opacity: 0.5,
-    },
-    yAxisIndex: 0,
-  };
-
-  useEffect(() => {
-    setCompare(testCompare);
-  }, [testCompare]);
 
-  useEffect(() => {
-    console.log(compareChart);
-  }, [compareChart]);
-
-  interface CompareProps {
-    name: string;
-    type: string;
-    data: number[];
-    lineStyle: { opacity: number };
-    yAxisIndex: number;
-  }
+  // ✅ 현재까지 구현된 부분 -> 비교차트 버튼을 누른다 -> 리스트가 뜬다 -> 리스트의 개별 요소를 누르면 비교해야할 회사의 companyId가 넘어온다
+  // 🔴 (1. compare 데이터 불러오은 곳에서) 무엇을 해야하는가? 불러온 id 활용 -> stock 데이터를 불러온다 useEffect 활용하여, null 값이 아닐 경우 조건 걸어서 // null 값일 경우 데이터 날리기?-> 데이터를 불러오면 (useEffect 필요) -> organize 함수로 개량 후 상태로 지정한다
+  //    (2. 메인 차트 불러오는 곳에서) 상태가 변경되면? -> 해당 값을 차트 데이터로 활용한다
+  // 🔴 전역상태로 설정해야할 것,,,, -> 비교 차트 데이터? (버튼 눌렀을 때 ~ 변화가 되고, 비교 취소 했을 때 ~ null 값으로 바뀐다)
+
+  // 서버에서 특정 종목 차트 데이터를 불러온다 -> 비교차트 id 활용
+  // 해당 데이터를 orgziaed 함수로 개량하고
+  // 개량된 데이터에서 현재값만 추출해서
+  // 차트 정보에 추가해준다
+
+  // const [compareChart, setCompare] = useState<CompareProps | undefined>(undefined);
+
+  // const testData = organizeData(chartData);
+  // const testPrice = testData.values;
+  // const prPriceList: number[] = [];
+  // // console.log(testPrice);
+  // testPrice.forEach((price) => {
+  //   prPriceList.push(price[0]);
+  // });
+
+  // console.log(prPriceList);
+  // const testCompare = {
+  //   name: "비교차트 테스트",
+  //   type: "line",
+  //   data: prPriceList,
+  //   lineStyle: {
+  //     opacity: 0.5,
+  //   },
+  //   yAxisIndex: 0,
+  // };
+
+  // useEffect(() => {
+  //   setCompare(testCompare);
+  // }, [testCompare]);
+
+  // useEffect(() => {
+  //   console.log(compareChart);
+  // }, [compareChart]);
+
+  // interface CompareProps {
+  //   name: string;
+  //   type: string;
+  //   data: number[];
+  //   lineStyle: { opacity: number };
+  //   yAxisIndex: number;
+  // }
 
   // 🔴 비교차트 테스트
 
@@ -69,7 +80,7 @@ const useGetStockChart = (companyId: number) => {
 
   // 차트 옵션
   const options = {
-    animation: true,
+    animation: false,
     legend: {
       top: 10,
       left: "left",
@@ -311,7 +322,7 @@ const useGetStockChart = (companyId: number) => {
         },
       },
       // 🔴 비교차트 테스트
-      compareChart,
+      // compareChart,
     ],
   };
 

client/src/models/stateProps.ts

@@ -8,4 +8,5 @@ export interface StateProps {
   stockOrderVolume: number;
   decisionWindow: boolean;
   login: number;
+  compareChart: null | number;
 }

client/src/reducer/CompareChart-Reducer.ts

@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = null;
+
+const compareChartSlice = createSlice({
+  name: "compareChart",
+  initialState: initialState,
+  reducers: {
+    setCompareStock: (state, action) => {
+      state = action.payload;
+      return state;
+    },
+  },
+});
+
+export const { setCompareStock } = compareChartSlice.actions;
+export const compareChartReducer = compareChartSlice.reducer;

client/src/store/config.ts

@@ -9,6 +9,7 @@ import cashSlice from "../reducer/cash/cashSlice";
 import memberInfoReducer from "../reducer/member/memberInfoSlice";
 import { stockOrderVolumeReducer } from "../reducer/StockOrderVolume-Reducer";
 import { setDecisionWindowReducer } from "../reducer/SetDecisionWindow-Reducer";
+import { compareChartReducer } from "../reducer/CompareChart-Reducer";
 
 const store = configureStore({
   reducer: {
@@ -22,6 +23,7 @@ const store = configureStore({
     cash: cashSlice,
     stockOrderVolume: stockOrderVolumeReducer,
     decisionWindow: setDecisionWindowReducer,
+    compareChart: compareChartReducer,
   },
 });