Skip to content

Commit

Permalink
[Design] 우측 컴포넌트 레이아웃 깨지는 현상 해결
Browse files Browse the repository at this point in the history 
- 우측 컴포넌트(시장정보) 관련 컨텐츠 개수 증가에 따라 레이아웃 깨지는 현상 해결

Issues #122
  • Loading branch information
@novice1993
novice1993 committed Sep 18, 2023
1 parent 33e8903 commit 275b829
Show file tree
Hide file tree
Showing 10 changed files with 173 additions and 202 deletions.
2 changes: 1 addition & 1 deletion client/src/components/CentralChartMenu/ExpandScreenBtn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const Button = styled.div<OwnProps>`
display: flex;
justify-content: center;
align-items: center;
color: #2f4f4f;
color: black;
font-size: 22px;
border-right: ${(props) => props.direction === "left" && "1px solid black"};
border-left: ${(props) => props.direction === "right" && "1px solid black"};
Expand Down
20 changes: 10 additions & 10 deletions client/src/components/Headers/LogoutHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import React from "react";
import styled from "styled-components";
import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
import { useNavigate } from "react-router-dom";
import StockSearchComponent from './stockSearchComponent';
import StockSearchComponent from "./stockSearchComponent";

const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
const navigate = useNavigate();

const loginText = "로그인"; // 로그인 버튼 텍스트
const loginText = "로그인"; // 로그인 버튼 텍스트

// 로고 클릭 핸들러
const handleLogoClick = () => {
navigate("/"); // 메인 페이지로 이동
navigate("/"); // 메인 페이지로 이동
};

// 컴포넌트 렌더링
Expand All @@ -20,7 +20,7 @@ const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
<LogoButton onClick={handleLogoClick}>
<LogoImage src={StockHolmLogo} />
</LogoButton>
<StockSearchComponent/>
<StockSearchComponent />
<LoginButton onClick={onLoginClick}>{loginText}</LoginButton>
</HeaderContainer>
);
Expand All @@ -40,7 +40,7 @@ const HeaderContainer = styled.div`
align-items: center;
padding: 1rem 2rem;
background-color: #fff;
border-bottom: 1px solid #2F4F4F;
border-bottom: 1px solid black;
width: 100%;
height: 51px;
`;
Expand All @@ -54,7 +54,7 @@ const LogoButton = styled.button`
outline: none;
}
&:hover img {
filter: brightness(0.97); // darken the logo image slightly on hover
filter: brightness(0.97); // darken the logo image slightly on hover
}
`;

Expand All @@ -65,13 +65,13 @@ const LogoImage = styled.img`

const LoginButton = styled.button`
background-color: #fff;
color: #2F4F4F;
border: 1px solid #2F4F4F;
color: #2f4f4f;
border: 1px solid #2f4f4f;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
&:hover {
background-color: #f2f2f2;
background-color: #f2f2f2;
}
`;
`;
99 changes: 48 additions & 51 deletions client/src/components/MarketComponents/MarketStockList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ import { useState, useEffect } from "react"; // useEffect 추가
import styled from "styled-components";
import { useDispatch } from "react-redux";
import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
import logo from '../../asset/images/StockHolmImage.png';
import logo from "../../asset/images/StockHolmImage.png";

const MarketServerUrl =
"http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies";
const MarketServerUrl = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies";

const MarketStockList: React.FC = () => {
const [marketStockList, setMarketStockList] = useState<any[]>([]);
Expand All @@ -16,7 +15,6 @@ const MarketStockList: React.FC = () => {
const numberWithCommas = (x: number): string => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};


useEffect(() => {
MarketDataFromServer();
Expand All @@ -34,7 +32,6 @@ const MarketStockList: React.FC = () => {
}
};
const SortName = () => {

const sortedList = [...marketStockList];
sortedList.sort((a, b) => a.korName.localeCompare(b.korName));
setMarketStockList(sortedList);
Expand Down Expand Up @@ -87,43 +84,33 @@ const MarketStockList: React.FC = () => {
<StockListHeaderItem5>거래량(주)</StockListHeaderItem5>
</StockListHeader>


{marketStockList.slice(0, 10).map((el, index) => (
<StockListInfo onClick={() => dispatch(changeCompanyId(el.companyId))}>
{isLoading === true ? (
<div>{MarketStockLists.isLoading}</div>
) : (
<>
<RankingBadge rank={index + 1} />
<Logo src={logo} alt="stock logo" />
<StockNameWrapper>
<StockName key={el.korName}>{el.korName}</StockName>
<StockCode key={el.code}>{el.code}</StockCode>
</StockNameWrapper>
<StockDetailWrapper>
<StockDetail>
<StockDetailItem key={el.stockInfResponseDto.stck_prpr}>
{numberWithCommas(parseFloat(el.stockInfResponseDto.stck_prpr))}
</StockDetailItem>
<StockDetailItem
key={el.stockInfResponseDto.prdy_ctrt}
variation={
parseFloat(el.stockInfResponseDto.prdy_ctrt) > 0
? 'positive'
: parseFloat(el.stockInfResponseDto.prdy_ctrt) < 0
? 'negative'
: 'neutral'
}
>
{el.stockInfResponseDto.prdy_ctrt}
</StockDetailItem>
<StockDetailItem key={el.stockInfResponseDto.acml_vol}>{numberWithCommas(parseFloat(el.stockInfResponseDto.acml_vol))}</StockDetailItem>
</StockDetail>
</StockDetailWrapper>
</>
)}
</StockListInfo>
))}
<StockInfoContainer>
{marketStockList.slice(0, 10).map((el, index) => (
<StockListInfo onClick={() => dispatch(changeCompanyId(el.companyId))}>
{isLoading === true ? (
<div>{MarketStockLists.isLoading}</div>
) : (
<>
<RankingBadge rank={index + 1} />
<Logo src={logo} alt="stock logo" />
<StockNameWrapper>
<StockName key={el.korName}>{el.korName}</StockName>
<StockCode key={el.code}>{el.code}</StockCode>
</StockNameWrapper>
<StockDetailWrapper>
<StockDetail>
<StockDetailItem key={el.stockInfResponseDto.stck_prpr}>{numberWithCommas(parseFloat(el.stockInfResponseDto.stck_prpr))}</StockDetailItem>
<StockDetailItem key={el.stockInfResponseDto.prdy_ctrt} variation={parseFloat(el.stockInfResponseDto.prdy_ctrt) > 0 ? "positive" : parseFloat(el.stockInfResponseDto.prdy_ctrt) < 0 ? "negative" : "neutral"}>
{el.stockInfResponseDto.prdy_ctrt}
</StockDetailItem>
<StockDetailItem key={el.stockInfResponseDto.acml_vol}>{numberWithCommas(parseFloat(el.stockInfResponseDto.acml_vol))}</StockDetailItem>
</StockDetail>
</StockDetailWrapper>
</>
)}
</StockListInfo>
))}
</StockInfoContainer>
</StockListContainer>
);
};
Expand Down Expand Up @@ -166,7 +153,7 @@ const StockListDetail = styled.div<{ selected?: boolean }>`
margin-right: 10px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background-color: #3a5a8a;
color: white;
Expand Down Expand Up @@ -239,6 +226,16 @@ const StockListHeaderItem5 = styled.div`
margin-right: 0;
}
`;

const StockInfoContainer = styled.div`
width: 100%;
height: calc(100vh - 266px);
overflow: scroll;
&::-webkit-scrollbar {
display: none;
}
`;

const StockListInfo = styled.div`
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -286,18 +283,18 @@ const StockDetail = styled.div`
align-items: center;
`;

const StockDetailItem = styled.div<{ variation?: 'positive' | 'neutral' | 'negative' }>`
const StockDetailItem = styled.div<{ variation?: "positive" | "neutral" | "negative" }>`
flex: 1;
text-align: right;
color: ${({ variation }) => {
switch (variation) {
case 'positive':
return 'red';
case 'negative':
return 'blue';
case 'neutral':
case "positive":
return "red";
case "negative":
return "blue";
case "neutral":
default:
return 'black';
return "black";
}
}};
`;
Expand All @@ -319,4 +316,4 @@ const RankingBadge = ({ rank }: { rank: number }) => {
const Medal = styled.span`
font-size: 20px;
margin-right: 8px;
`;
`;
Loading

0 comments on commit 275b829

Please sign in to comment.