-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
엔터키 누르면 다음 입력창/버튼을 클릭하도록 로직 수정 회원가입 시 닉네임 대신 이름 쓰도록 변경 비밀번호 설정 시 대문자 넣어도 되고 안넣어도 되도록 변경 Issues #15
- Loading branch information
Showing
39 changed files
with
2,933 additions
and
1,300 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| 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 handleOnCompareList = () => { | ||
| setCompare(true); | ||
| }; | ||
|
|
||
| const handleOffCompareList = () => { | ||
| setCompare(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <Container> | ||
| <div className="compareButtonContainer"> | ||
| <Icon src={IconImg} /> | ||
| <div className="compareButton" onMouseOver={handleOnCompareList}> | ||
| {buttonText} | ||
| </div> | ||
| </div> | ||
| {compare && ( | ||
| <CompareContainer onMouseOver={handleOnCompareList} onMouseLeave={handleOffCompareList}> | ||
| <StockList> | ||
| {companyList?.map((company) => { | ||
| const corpName = company.korName; | ||
| const companyId = company.companyId; | ||
|
|
||
| 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: relative; | ||
| z-index: 1; | ||
| `; | ||
|
|
||
| const StockList = styled.div` | ||
| position: absolute; | ||
| right: 0; | ||
| top: 24px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| font-size: 12px; | ||
| font-weight: 500; | ||
| line-height: 147%; | ||
| width: 92px; | ||
| height: 260px; | ||
| padding: 5px; | ||
| border-radius: 0.4rem; | ||
| z-index: 2; | ||
| border: none; | ||
| color: #b7b5b5; | ||
| background-color: #bfdaf6e8; | ||
| opacity: 0.65; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 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` | ||
| &:hover { | ||
| color: black; | ||
| transition: color 0.3s ease; | ||
| cursor: pointer; | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.