[Design] 모달창 관련 Z-index 수정

- 중앙차트 z-index 부여에 따른 모달창 z-index 수정 Issues #14
codestates-seb · Sep 18, 2023 · c9dcab5 · c9dcab5
1 parent a43b407
commit c9dcab5
Show file tree

Hide file tree

Showing 13 changed files with 617 additions and 464 deletions.
diff --git a/client/src/components/CentralChart/CompareChartBtn.tsx b/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;
+`;
diff --git a/client/src/components/CentralChart/CompareList.tsx b/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``;
diff --git a/client/src/components/CentralChart/StockChart.tsx b/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`

diff --git a/client/src/components/Logins/EmailLogin.tsx b/client/src/components/Logins/EmailLogin.tsx
@@ -29,11 +29,7 @@ const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin }) =
 
   const handleLoginClick = async () => {
     try {
-      const response = await axios.post(
-        "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/members/login", 
-        { email, password },
-        { validateStatus: (status) => status >= 200 && status < 600 }
-      );
+      const response = await axios.post("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/members/login", { email, password }, { validateStatus: (status) => status >= 200 && status < 600 });
 
       if (response.status === 200) {
         const accessToken = response.headers["authorization"];
@@ -91,6 +87,7 @@ const ModalBackground = styled.div`
   justify-content: center;
   align-items: center;
   position: fixed;
+  z-index: 150;
   top: 0;
   left: 0;
   width: 100%;
@@ -99,7 +96,7 @@ const ModalBackground = styled.div`
 `;
 
 const ModalContainer = styled.div`
-  z-index:4000;
+  z-index: 100;
   position: relative;
   background-color: white;
   padding: 20px;
@@ -158,10 +155,10 @@ const LoginButton = styled.button`
   border: none;
   border-radius: 5px;
   cursor: pointer;
-  
+
   //호버 시 밝게
   &:hover {
-    background-color: rgba(47, 79, 79, 0.8); 
+    background-color: rgba(47, 79, 79, 0.8);
   }
 `;
 
@@ -181,4 +178,4 @@ const ErrorMessage = styled.p`
   margin-top: 5px;
   margin-bottom: 10px;
   font-size: 0.8rem;
-`;
+`;
diff --git a/client/src/components/Logins/LoginConfirmatationModal.tsx b/client/src/components/Logins/LoginConfirmatationModal.tsx
@@ -1,26 +1,26 @@
-import React from 'react';
-import styled from 'styled-components';
-import StockHolmLogo from '../../asset/images/StockHolmLogo.png';
+import React from "react";
+import styled from "styled-components";
+import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
 
 const LoginConfirmationModal: React.FC<LoginConfirmationProps> = ({ onClose }) => {
-    const messageText = "로그인이 성공적으로 완료되었습니다!";
-    const confirmText = "확인"
+  const messageText = "로그인이 성공적으로 완료되었습니다!";
+  const confirmText = "확인";
 
-    return (
-      <ModalBackground>
-        <ModalContainer>
-          <Message>{messageText}</Message>
-          <Logo src={StockHolmLogo} alt="StockHolm Logo" />
-          <ConfirmButton onClick={onClose}>{confirmText}</ConfirmButton>
-        </ModalContainer>
-      </ModalBackground>
-    );
+  return (
+    <ModalBackground>
+      <ModalContainer>
+        <Message>{messageText}</Message>
+        <Logo src={StockHolmLogo} alt="StockHolm Logo" />
+        <ConfirmButton onClick={onClose}>{confirmText}</ConfirmButton>
+      </ModalContainer>
+    </ModalBackground>
+  );
 };
 
 export default LoginConfirmationModal;
 
 interface LoginConfirmationProps {
-    onClose: () => void;
+  onClose: () => void;
 }
 
 // ... Styled Components for ModalBackground, ModalContainer, Message, ConfirmButton ...
@@ -29,6 +29,7 @@ const ModalBackground = styled.div`
   justify-content: center;
   align-items: center;
   position: fixed;
+  z-index: 100;
   top: 0;
   left: 0;
   width: 100%;
@@ -37,7 +38,7 @@ const ModalBackground = styled.div`
 `;
 
 const ModalContainer = styled.div`
-  z-index:4000;
+  z-index: 100;
   position: relative;
   background-color: white;
   padding: 20px;
@@ -74,6 +75,6 @@ const ConfirmButton = styled.button`
 
   //호버 시 밝게
   &:hover {
-    background-color: rgba(47, 79, 79, 0.8); 
+    background-color: rgba(47, 79, 79, 0.8);
   }
 `;