Skip to content

Commit

Permalink
[Design] 디자인 및 레이아웃 수정
Browse files Browse the repository at this point in the history
- 좌측 컴포넌트 관련디자인 및 레이아웃 수정 (전체 종목)

Issues #122
  • Loading branch information
novice1993 committed Sep 17, 2023
1 parent 36b3bb2 commit 66915e4
Show file tree
Hide file tree
Showing 8 changed files with 210 additions and 129 deletions.
4 changes: 2 additions & 2 deletions client/src/components/CentralChartMenu/ExpandScreenBtn.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,6 @@ const Button = styled.div<OwnProps>`
align-items: center;
color: #2f4f4f;
font-size: 22px;
border-right: ${(props) => props.direction === "left" && "1px solid #2F4F4F"};
border-left: ${(props) => props.direction === "right" && "1px solid #2F4F4F"};
border-right: ${(props) => props.direction === "left" && "1px solid black"};
border-left: ${(props) => props.direction === "right" && "1px solid black"};
`;
4 changes: 2 additions & 2 deletions client/src/components/CentralChartMenu/Index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const Container = styled.div`
height: 44px;
display: flex;
flex-direction: row;
border-bottom: 1px solid #2f4f4f;
border-bottom: 1px solid black;
}
.SecondLine {
Expand All @@ -43,6 +43,6 @@ const Container = styled.div`
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #2f4f4f;
border-bottom: 1px solid black;
}
`;
101 changes: 72 additions & 29 deletions client/src/components/EntireList/EntireList.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Header from "./Header";
import StockItem from "./StockItem";
import useCompanyData from "../../hooks/useCompanyData";
import { useSelector } from "react-redux"; // 👈 추가
import { StateProps } from "../../models/stateProps"; // 👈 추가
import useGetCash from "../../hooks/useGetCash";

import React, { useState } from 'react';
import styled from 'styled-components';
import Header from './Header';
import StockItem from './StockItem';
import useCompanyData from '../../hooks/useCompanyData';
import { useSelector } from 'react-redux'; // 👈 추가
import { StateProps } from '../../models/stateProps'; // 👈 추가
import useGetCash from '../../hooks/useGetCash';
/*
🔴 수정사항
1) 불필요한 컴포넌트 사용 : Divider 컴포넌트
-> 구분선 (border) 설정위해 생성한 것으로 보이나, 상위 컴포넌트 너비 설정으로 해결 가능 (불필요하여 주석처리)
-> 삭제하는 게 좋을 것 같음
2) 현금 보유량 컴포넌트 조건부 렌더링 변경 (로그인 필요한 서비스 X -> 로그인 해야 화면에 나타나도록)
3) header 컨테이너 부분 height 43px로 고정
4) 금액에 회계 단위 (toLocaleString) 적용 -> 이를 위해 useEffect, useState 활용
*/

const holdingAmountText = "현금 보유량 :";
const amountUnit = "원";

const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListType }) => {
const [isMenuOpen, setMenuOpen] = useState(false);
Expand All @@ -27,17 +39,37 @@ const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListTy
// useGetCash 훅을 사용하여 현금 보유량 가져오기
const { cashData: holdingsAmount } = useGetCash(); // 👈 useGetCash 훅을 사용하여 현금 보유량 데이터를 가져옵니다.

// 🔴
const [holdingCash, setHoldingCash] = useState("");

useEffect(() => {
if (holdingsAmount) {
const holdingCash = holdingsAmount.toLocaleString();
setHoldingCash(holdingCash);
}
}, [holdingsAmount]);
// 🔴

return (
<WatchListContainer>
<Header1Container>
<Header currentListType={currentListType} onChangeListType={onChangeListType} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
</Header1Container>
<Divider />
<Header2Container>
{isLogin == 0 ? (<HoldingsAmount>로그인이 필요한 서비스 입니다.</HoldingsAmount>) : (<HoldingsAmount>현금 보유량: {holdingsAmount}</HoldingsAmount>)}
{/* <Divider /> */}
<Header2Container isLogin={isLogin}>
{/* {isLogin == 0 ? (<HoldingsAmount>로그인이 필요한 서비스 입니다.</HoldingsAmount>) : (<HoldingsAmount>현금 보유량: {holdingsAmount}원</HoldingsAmount>)} */}
<HoldingsAmount isLogin={isLogin}>
{isLogin === 1 && (
<>
<div>{holdingAmountText}</div>
<div>
{holdingCash} {amountUnit}
</div>
</>
)}
</HoldingsAmount>
</Header2Container>
<Divider />
{/* <Divider /> */}
<StockList>
{isLoading ? <div>Loading...</div> : isError ? <div>Error fetching data</div> : companiesList.map((company) => <StockItem key={company.companyId} company={company} setShowChangePrice={setShowChangePrice} showChangePrice={showChangePrice} />)}
</StockList>
Expand All @@ -61,31 +93,44 @@ const WatchListContainer = styled.div`
align-items: flex-start;
`;

const Header1Container =styled.div`
const Header1Container = styled.div`
// 🔴
width: 100%;
height: 48px;
display: flex;
`;

const Header2Container =styled.div`
height: 43.5px;
const Header2Container = styled.div<{ isLogin: number }>`
// 🔴
width: 100%;
height: ${(props) => (props.isLogin === 0 ? "0px" : "43.5px")};
display: flex;
justify-content:center;
justify-content: center;
align-items: center;
border-bottom: ${(props) => (props.isLogin === 0 ? "" : "1px solid black")};
`;

const Divider = styled.div`
// 🔴
// const Divider = styled.div`
// width: 100%;
// display: flex;
// flex-direction: row;
// /* border-bottom: 1px solid #2f4f4f; */
// `;

const HoldingsAmount = styled.div<{ isLogin: number }>`
// 🔴
width: 100%;
display: flex;
height: 100%;
display: ${(props) => (props.isLogin === 0 ? "none" : "flex")};
flex-direction: row;
border-bottom: 1px solid #2f4f4f;
`;

const HoldingsAmount = styled.div`
font-size: 16px;
font-weight: bold;
margin-left: 20px;
color: darkslategray; // 현금 보유량을 파란색으로 표시
padding-left: 13px;
align-items: center;
gap: 5px;
font-size: 0.95em;
font-weight: 570;
color: #2f4f4f;
`;

const StockList = styled.div`
Expand All @@ -97,5 +142,3 @@ const StockList = styled.div`
display: none;
}
`;


54 changes: 36 additions & 18 deletions client/src/components/EntireList/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import styled from 'styled-components';
import React from "react";
import styled from "styled-components";
import Menu_icon from "../../asset/images/menu.png";

const ALL_LIST = "전체종목";
Expand All @@ -9,17 +9,34 @@ const HOLDING_LIST = "보유종목";
const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMenuOpen, setMenuOpen }) => {
return (
<HeaderWrapper>
<Icon
src={Menu_icon}
alt="menu icon"
onClick={() => setMenuOpen(!isMenuOpen)}
/>
<Icon src={Menu_icon} alt="menu icon" onClick={() => setMenuOpen(!isMenuOpen)} />
<HeaderText>{currentListType}</HeaderText>
{isMenuOpen && (
<SlideMenu>
<MenuItem1 onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem1>
<MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
<MenuItem onClick={() => { onChangeListType(HOLDING_LIST); setMenuOpen(false); }}>{HOLDING_LIST}</MenuItem>
<MenuItem1
onClick={() => {
onChangeListType(ALL_LIST);
setMenuOpen(false);
}}
>
{ALL_LIST}
</MenuItem1>
<MenuItem
onClick={() => {
onChangeListType(INTEREST_LIST);
setMenuOpen(false);
}}
>
{INTEREST_LIST}
</MenuItem>
<MenuItem
onClick={() => {
onChangeListType(HOLDING_LIST);
setMenuOpen(false);
}}
>
{HOLDING_LIST}
</MenuItem>
</SlideMenu>
)}
</HeaderWrapper>
Expand All @@ -33,11 +50,13 @@ type HeaderProps = {
setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
};


const HeaderWrapper = styled.div`
display: flex;
align-items: center;
position: relative;
width: 100%;
height: 44px;
border-bottom: 1px solid black;
`;

const Icon = styled.img`
Expand All @@ -47,7 +66,7 @@ const Icon = styled.img`
cursor: pointer;
&:hover {
background-color: #f2f2f2;
background-color: #f2f2f2;
}
`;

Expand All @@ -62,9 +81,8 @@ const SlideMenu = styled.div`
left: 0;
width: 247px;
background-color: #f7f7f7;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
border-left: 1px solid black;
display: flex;
flex-direction: column;
`;
Expand All @@ -76,15 +94,15 @@ const MenuItem = styled.button`
background-color: white;
cursor: pointer;
text-align: left;
border-bottom:1px solid black;
border-bottom: 1px solid black;
font-size: 17px;
&:hover {
background-color: #f2f2f2;
background-color: #f2f2f2;
}
`;
const MenuItem1 = styled(MenuItem)`
border-left: 4px solid darkslategray;
border-left: 4px solid darkslategray;
`;

export default Header;
Loading

0 comments on commit 66915e4

Please sign in to comment.