[Refactor] 좌측 종목리스트 관련 리팩토링 일부 진행

- 중복되는 컴포넌트가 다수의 파일로 중복 작성되어 있어 단일한 컴포넌트로 간결화 하여 모듈화 진행 중

Issues #122

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 (
+    <HeaderWrapper>
+      <Icon src={menuIcon} alt="menu icon" onClick={handleSetMenuOnOff} />
+      <HeaderText>{menuTitle}</HeaderText>
+      {listMenu && (
+        <SlideMenu>
+          {stockList.map((menuType, index) => (
+            <MenuItem key={menuType} onClick={() => handleChangeMenu(menuType, index)} stockListType={stockListType} index={index}>
+              {menuType}
+            </MenuItem>
+          ))}
+        </SlideMenu>
+      )}
+    </HeaderWrapper>
+  );
+};
+
+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;

client/src/components/LeftStockListSection/Index.tsx

@@ -0,0 +1,18 @@
+import { styled } from "styled-components";
+import Header from "./Header";
+
+const LeftStockListSection = () => {
+  return (
+    <Container>
+      <Header />
+    </Container>
+  );
+};
+
+export default LeftStockListSection;
+
+const Container = styled.section`
+  min-width: 248px;
+  height: 100%;
+  border-right: 1px solid black;
+`;

client/src/models/stateProps.ts

@@ -9,4 +9,5 @@ export interface StateProps {
   decisionWindow: boolean;
   login: number;
   compareChart: number;
+  leftStockListType: number;
 }

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;

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,
   },
 });