From 6398bcef1eee43b72a2f48ae75b7c77659ddba38 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Sun, 24 Sep 2023 00:54:12 +0900 Subject: [PATCH] =?UTF-8?q?[Refactor]=20=EC=A2=8C=EC=B8=A1=20=EC=A2=85?= =?UTF-8?q?=EB=AA=A9=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20=EC=9D=BC=EB=B6=80=20?= =?UTF-8?q?=EC=A7=84=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 중복되는 컴포넌트가 다수의 파일로 중복 작성되어 있어 단일한 컴포넌트로 간결화 하여 모듈화 진행 중 Issues #122 --- .../LeftStockListSection/Header.tsx | 100 ++++++++++++++++++ .../components/LeftStockListSection/Index.tsx | 18 ++++ client/src/models/stateProps.ts | 1 + client/src/reducer/LeftStockList-Reducer.ts | 17 +++ client/src/store/config.ts | 2 + 5 files changed, 138 insertions(+) create mode 100644 client/src/components/LeftStockListSection/Header.tsx create mode 100644 client/src/components/LeftStockListSection/Index.tsx create mode 100644 client/src/reducer/LeftStockList-Reducer.ts diff --git a/client/src/components/LeftStockListSection/Header.tsx b/client/src/components/LeftStockListSection/Header.tsx new file mode 100644 index 00000000..b8daf103 --- /dev/null +++ b/client/src/components/LeftStockListSection/Header.tsx @@ -0,0 +1,100 @@ +import { useState } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import styled from "styled-components"; +import menuIcon from "../../asset/images/menu.png"; +import { StateProps } from "../../models/stateProps"; +import { setStockListType } from "../../reducer/LeftStockList-Reducer"; + +const stockList = ["전체종목", "관심종목", "보유종목"]; + +const Header = () => { + const dispatch = useDispatch(); + const [listMenu, setListMenu] = useState(false); + const [menuTitle, setMenuTitle] = useState(stockList[0]); + const stockListType = useSelector((state: StateProps) => state.leftStockListType); + + const handleSetMenuOnOff = () => { + setListMenu(!listMenu); + }; + + const handleChangeMenu = (menuTitle: string, menuTypeNum: number) => { + setMenuTitle(menuTitle); + dispatch(setStockListType(menuTypeNum)); + handleSetMenuOnOff(); + }; + + return ( + + + {menuTitle} + {listMenu && ( + + {stockList.map((menuType, index) => ( + handleChangeMenu(menuType, index)} stockListType={stockListType} index={index}> + {menuType} + + ))} + + )} + + ); +}; + +const HeaderWrapper = styled.div` + display: flex; + align-items: center; + position: relative; + width: 100%; + height: 44px; + border-bottom: 1px solid black; +`; + +const Icon = styled.img` + margin: 0px 10px 0px 10px; + width: 24px; + height: 24px; + cursor: pointer; + + &:hover { + background-color: #f2f2f2; + } +`; + +const HeaderText = styled.span` + margin-top: 2px; + font-size: 18px; +`; + +const SlideMenu = styled.div` + z-index: 30; + position: absolute; + top: 100%; + left: 0; + width: 247px; + background-color: #f7f7f7; + border-top: 1px solid black; + border-left: 1px solid black; + display: flex; + flex-direction: column; +`; + +const MenuItem = styled.button<{ stockListType: number; index: number }>` + height: 40px; + display: flex; + align-items: center; + padding-left: 20px; + border: none; + background-color: white; + text-align: left; + font-size: 15.5px; + cursor: pointer; + border-bottom: 1px solid black; + border-left: ${(props) => props.stockListType === props.index && "4px solid #4479c2"}; + + &:hover { + background-color: #f2f2f2; + color: darkslategray; + } +`; + +export default Header; diff --git a/client/src/components/LeftStockListSection/Index.tsx b/client/src/components/LeftStockListSection/Index.tsx new file mode 100644 index 00000000..8f9b622b --- /dev/null +++ b/client/src/components/LeftStockListSection/Index.tsx @@ -0,0 +1,18 @@ +import { styled } from "styled-components"; +import Header from "./Header"; + +const LeftStockListSection = () => { + return ( + +
+ + ); +}; + +export default LeftStockListSection; + +const Container = styled.section` + min-width: 248px; + height: 100%; + border-right: 1px solid black; +`; diff --git a/client/src/models/stateProps.ts b/client/src/models/stateProps.ts index f5872d4c..8da662ed 100644 --- a/client/src/models/stateProps.ts +++ b/client/src/models/stateProps.ts @@ -9,4 +9,5 @@ export interface StateProps { decisionWindow: boolean; login: number; compareChart: number; + leftStockListType: number; } diff --git a/client/src/reducer/LeftStockList-Reducer.ts b/client/src/reducer/LeftStockList-Reducer.ts new file mode 100644 index 00000000..ab8a3295 --- /dev/null +++ b/client/src/reducer/LeftStockList-Reducer.ts @@ -0,0 +1,17 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = 0; + +const leftStockListSlice = createSlice({ + name: "leftStockListType", + initialState: initialState, + reducers: { + setStockListType: (state, action) => { + state = action.payload; + return state; + }, + }, +}); + +export const { setStockListType } = leftStockListSlice.actions; +export const leftStockListReducer = leftStockListSlice.reducer; diff --git a/client/src/store/config.ts b/client/src/store/config.ts index c725b65d..e10d18cd 100644 --- a/client/src/store/config.ts +++ b/client/src/store/config.ts @@ -10,6 +10,7 @@ import memberInfoReducer from "../reducer/member/memberInfoSlice"; import { stockOrderVolumeReducer } from "../reducer/StockOrderVolume-Reducer"; import { setDecisionWindowReducer } from "../reducer/SetDecisionWindow-Reducer"; import { compareChartReducer } from "../reducer/CompareChart-Reducer"; +import { leftStockListReducer } from "../reducer/LeftStockList-Reducer"; const store = configureStore({ reducer: { @@ -24,6 +25,7 @@ const store = configureStore({ stockOrderVolume: stockOrderVolumeReducer, decisionWindow: setDecisionWindowReducer, compareChart: compareChartReducer, + leftStockListType: leftStockListReducer, }, });