[Add] 비교차트 기본 로직 구현 완료

- 주가차트 관련 타종목과 비교차트 렌더링 로직 구현 완료 - 코드 정리 및 UI 구현 추가 예정 Issues #14
codestates-seb · Sep 18, 2023 · c4e8332 · c4e8332
1 parent c9dcab5
commit c4e8332
Show file tree

Hide file tree

Showing 7 changed files with 273 additions and 112 deletions.
diff --git a/client/src/components/CentralChart/CompareChartBtn.tsx b/client/src/components/CentralChart/CompareChartBtn.tsx
@@ -31,7 +31,6 @@ const CompareChartBtn = () => {
             {companyList?.map((company) => {
               const corpName = company.korName;
               const companyId = company.companyId;
-              console.log(corpName);
 
               return <CompareList corpName={corpName} compareCompanyId={companyId} />;
             })}
@@ -85,6 +84,7 @@ const CompareContainer = styled.div`
   left: 0;
   width: 100vw;
   height: 100vh;
+  z-index: 1;
   background-color: rgba(0, 0, 0, 0.5);
 `;
 

diff --git a/client/src/components/CentralChart/CompareList.tsx b/client/src/components/CentralChart/CompareList.tsx
@@ -7,8 +7,8 @@ const CompareList = (props: OwnProps) => {
   const { corpName, compareCompanyId } = props;
 
   //🔴 확인 직업
-  //   const compareInfo = useSelector((state: StateProps) => state.compareChart);
-  //   console.log(compareInfo);
+  // const compareInfo = useSelector((state: StateProps) => state.compareChart);
+  // console.log(compareInfo);
   //
 
   const dispatch = useDispatch();

diff --git a/client/src/components/CentralChart/StockChart.tsx b/client/src/components/CentralChart/StockChart.tsx
@@ -44,7 +44,7 @@ const Container = styled.div`
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  z-index: 2;
+  z-index: 1;
 `;
 
 const ChartContainer = styled.div`

diff --git a/client/src/components/StockOrderSection/StockOrder.tsx b/client/src/components/StockOrderSection/StockOrder.tsx
@@ -14,20 +14,20 @@ import StockOrderSetting from "./StockOrderSetting";
 import dummyImg from "../../asset/CentralSectionMenu-dummyImg.png";
 
 //import company logos
-import kia from '../../asset/logos/기아.svg';
-import dy from '../../asset/logos/디와이.jpeg';
-import logosamsung from '../../asset/logos/삼성전자.svg';
-import celltrion from '../../asset/logos/셀트리온.svg';
-import ecopro from '../../asset/logos/에코프로.jpeg';
-import ecoproBM from '../../asset/logos/에코프로비엠.svg';
-import kakaoBank from '../../asset/logos/카카오뱅크.svg';
-import kuckoo from '../../asset/logos/쿠쿠홀딩스.jpeg';
-import hanse from '../../asset/logos/한세엠케이.jpeg';
-import hyundai from '../../asset/logos/현대차.svg';
-import KG from '../../asset/logos/KG케미칼.png';
-import LGelec from '../../asset/logos/LG전자.svg';
-import LGchem from '../../asset/logos/LG화학.svg';
-import posco from '../../asset/logos/POSCO홀딩스.svg';
+import kia from "../../asset/logos/기아.svg";
+import dy from "../../asset/logos/디와이.jpeg";
+import logosamsung from "../../asset/logos/삼성전자.svg";
+import celltrion from "../../asset/logos/셀트리온.svg";
+import ecopro from "../../asset/logos/에코프로.jpeg";
+import ecoproBM from "../../asset/logos/에코프로비엠.svg";
+import kakaoBank from "../../asset/logos/카카오뱅크.svg";
+import kuckoo from "../../asset/logos/쿠쿠홀딩스.jpeg";
+import hanse from "../../asset/logos/한세엠케이.jpeg";
+import hyundai from "../../asset/logos/현대차.svg";
+import KG from "../../asset/logos/KG케미칼.png";
+import LGelec from "../../asset/logos/LG전자.svg";
+import LGchem from "../../asset/logos/LG화학.svg";
+import posco from "../../asset/logos/POSCO홀딩스.svg";
 
 const orderFailureMessage01: string = "주문 실패";
 const orderFailureMessage02: string = "주문 수량이 없습니다";
@@ -60,23 +60,23 @@ const StockOrder = ({ corpName }: { corpName: string }) => {
 
   // 이미 import된 로고들을 바탕으로 logos 객체 생성
   const logos: { [key: string]: string } = {
-      '삼성전자': logosamsung,
-      'POSCO홀딩스': posco,
-      '셀트리온': celltrion,
-      '에코프로': ecopro,
-      '에코프로비엠': ecoproBM,
-      '디와이': dy,
-      '쿠쿠홀딩스': kuckoo,
-      '카카오뱅크': kakaoBank,
-      '한세엠케이': hanse,
-      'KG케미칼': KG,
-      'LG화학': LGchem,
-      '현대차': hyundai,
-      'LG전자': LGelec,
-      '기아': kia,
-      };
-      // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
-    const companyLogo = logos[corpName] || dummyImg; // 기본 로고를 대체로 사용
+    삼성전자: logosamsung,
+    POSCO홀딩스: posco,
+    셀트리온: celltrion,
+    에코프로: ecopro,
+    에코프로비엠: ecoproBM,
+    디와이: dy,
+    쿠쿠홀딩스: kuckoo,
+    카카오뱅크: kakaoBank,
+    한세엠케이: hanse,
+    KG케미칼: KG,
+    LG화학: LGchem,
+    현대차: hyundai,
+    LG전자: LGelec,
+    기아: kia,
+  };
+  // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
+  const companyLogo = logos[corpName] || dummyImg; // 기본 로고를 대체로 사용
 
   const handleCloseDecisionWindow = () => {
     dispatch(closeDecisionWindow());
@@ -221,12 +221,13 @@ const OrderFailed = styled.div`
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 2;
+  z-index: 400;
   display: flex;
   justify-content: center;
   align-items: center;
 
   .Container {
+    z-index: 100;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -269,12 +270,17 @@ const OrderConfirm = styled.div<{ orderType: boolean }>`
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 2;
+  z-index: 400;
   display: flex;
   justify-content: center;
   align-items: center;
 
+  &div {
+    z-index: 400;
+  }
+
   .Container {
+    z-index: 500;
     display: flex;
     flex-direction: column;
     justify-content: center;