[Feat] 컴포넌트 버튼 기능 연결

- 중앙 차트 좌/우측 화면 확장 버튼 및 매수/매도 버튼 관련 기능 연결

Issues #43

client/src/components/CentralChartMenu/ExpandScreenBtn.tsx

@@ -1,17 +1,37 @@
+import { useDispatch } from "react-redux";
 import { styled } from "styled-components";
+import { changeLeftScreen, changeRightScreen } from "../../reducer/ExpandScreen-Reducer";
 
 const expandLeft: string = "<";
 const expandRight: string = ">";
 
 const ExpandScreenBtn = (props: OwnProps) => {
   const { direction } = props;
 
+  const dispatch = useDispatch();
+
+  const handleChangeLeftScreen = () => {
+    dispatch(changeLeftScreen());
+  };
+
+  const handleChangeRightScreen = () => {
+    dispatch(changeRightScreen());
+  };
+
   if (direction === "left") {
-    return <Button direction="left">{expandLeft}</Button>;
+    return (
+      <Button direction="left" onClick={handleChangeLeftScreen}>
+        {expandLeft}
+      </Button>
+    );
   }
 
   if (direction === "right") {
-    return <Button direction="right">{expandRight}</Button>;
+    return (
+      <Button direction="right" onClick={handleChangeRightScreen}>
+        {expandRight}
+      </Button>
+    );
   }
 };
 
@@ -30,8 +50,6 @@ const Button = styled.div<OwnProps>`
   justify-content: center;
   align-items: center;
   font-size: 22px;
-  border-right: ${(props) =>
-    props.direction === "left" && "1px solid darkgray"};
-  border-left: ${(props) =>
-    props.direction === "right" && "1px solid darkgray"};
+  border-right: ${(props) => props.direction === "left" && "1px solid darkgray"};
+  border-left: ${(props) => props.direction === "right" && "1px solid darkgray"};
 `;

client/src/components/CentralChartMenu/StockOrderBtn.tsx

@@ -1,12 +1,29 @@
+import { useDispatch } from "react-redux";
 import { styled } from "styled-components";
+import { stockOrderOpen } from "../../reducer/StockOrderSet-Reducer";
+import { orderTypeBuying, orderTypeSelling } from "../../reducer/StockOrderType-Reducer";
 
 const StockOrderBtn = (props: OwnProps) => {
   const { type } = props;
   const buttonText: string = type === "buying" ? "매수" : "매도";
 
+  const dispatch = useDispatch();
+
+  const handleStockOrderSet = () => {
+    dispatch(stockOrderOpen());
+
+    if (type === "buying") {
+      dispatch(orderTypeBuying());
+    } else {
+      dispatch(orderTypeSelling());
+    }
+  };
+
   return (
     <Container>
-      <Button type={type}>{buttonText}</Button>
+      <Button type={type} onClick={handleStockOrderSet}>
+        {buttonText}
+      </Button>
     </Container>
   );
 };

client/src/components/CompareChartSection/Index.tsx

@@ -23,7 +23,7 @@ export default CompareChartSection;
 const Container = styled.div`
   position: fixed;
   z-index: 1;
-  left: 0px;
+  left: -300px;
   transition: 0.3s left ease-in-out;
   display: flex;
   flex-direction: column;

client/src/components/StockOrderSection/Index.tsx

@@ -1,4 +1,7 @@
+import { useSelector, useDispatch } from "react-redux";
 import { styled } from "styled-components";
+import { stockOrderClose } from "../../reducer/StockOrderSet-Reducer";
+import { StateProps } from "../../models/stateProps";
 
 import OrderRequest from "./OrderRequest";
 import OrderResult from "./OrderResult";
@@ -10,11 +13,20 @@ const marketType: string = "코스피";
 import { dummyStockName } from "./dummyData";
 
 const StockOrderSection = () => {
+  const stockOrderSet = useSelector((state: StateProps) => state.stockOrderSet);
+  const dispatch = useDispatch();
+
+  const handleStockOrderClose = () => {
+    dispatch(stockOrderClose());
+  };
+
   return (
-    <Container>
+    <Container orderSet={stockOrderSet}>
       <UpperBar>
         <h2 className="Title">{titleText}</h2>
-        <button className="CloseButton">&#10005;</button>
+        <button className="CloseButton" onClick={handleStockOrderClose}>
+          &#10005;
+        </button>
       </UpperBar>
       <StockName>
         <img className="CorpLogo" src={dummyStockName.corpLogo} />
@@ -33,16 +45,17 @@ const StockOrderSection = () => {
 
 export default StockOrderSection;
 
-const Container = styled.aside`
+const Container = styled.aside<{ orderSet: boolean }>`
   position: fixed;
   z-index: 1;
-  right: 0px;
+  right: ${(props) => (props.orderSet ? "0px" : "-500px")};
   transition: right 0.3s ease-in-out;
   display: flex;
   flex-direction: column;
   width: 26%;
   min-width: 400px;
   height: 100%;
+  border-left: 1px solid black;
   background-color: #ffffff;
 `;
 

client/src/models/stateProps.ts

@@ -2,4 +2,6 @@ export interface StateProps {
   stockOrderType: boolean;
   stockPriceType: boolean;
   stockOrderPrice: number;
+  expandScreen: { left: boolean; right: boolean };
+  stockOrderSet: boolean;
 }

client/src/page/MainPage.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback } from "react";
+import { useSelector } from "react-redux";
 import styled from "styled-components";
 import LogoutHeader from "../components/Headers/LogoutHeader";
 import LoginHeader from "../components/Headers/LoginHeader";
@@ -13,8 +14,12 @@ import Holdings from "../components/watchlist/Holdings"; // Assuming you have a
 import CompareChartSection from "../components/CompareChartSection/Index";
 import StockOrderSection from "../components/StockOrderSection/Index";
 
+import { StateProps } from "../models/stateProps";
+
 import { TabContainerPage } from "./TabPages/TabContainerPage";
 const MainPage = () => {
+  const expandScreen = useSelector((state: StateProps) => state.expandScreen);
+
   const [isOAuthModalOpen, setOAuthModalOpen] = useState(false);
   const [isEmailLoginModalOpen, setEmailLoginModalOpen] = useState(false);
   const [isEmailSignupModalOpen, setEmailSignupModalOpen] = useState(false);
@@ -88,10 +93,12 @@ const MainPage = () => {
       {isLoggedIn ? <LoginHeader onLogoutClick={handleLogout} /> : <LogoutHeader onLoginClick={openOAuthModal} />}
       <Main>
         <CompareChartSection />
-        <LeftSection>{selectedMenu === "관심목록" ? <WatchList key="watchlist" currentListType={selectedMenu} onChangeListType={handleMenuChange} /> : <Holdings currentListType={selectedMenu} onChangeListType={handleMenuChange} />}</LeftSection>
+        {!expandScreen.left && (
+          <LeftSection>{selectedMenu === "관심목록" ? <WatchList key="watchlist" currentListType={selectedMenu} onChangeListType={handleMenuChange} /> : <Holdings currentListType={selectedMenu} onChangeListType={handleMenuChange} />}</LeftSection>
+        )}
         <CentralChart />
         <StockOrderSection />
-        <TabContainerPage></TabContainerPage>
+        {!expandScreen.right && <TabContainerPage></TabContainerPage>}
       </Main>
       {isOAuthModalOpen && (
         <OAuthLoginModal onClose={closeOAuthModal} onEmailLoginClick={openEmailLoginModal} onEmailSignupClick={openEmailSignupModal} onWatchListClick={() => handleMenuChange("관심목록")} onHoldingsClick={() => handleMenuChange("투자목록")} />

client/src/reducer/ExpandScreen-Reducer.ts

@@ -0,0 +1,21 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState: { left: boolean; right: boolean } = { left: false, right: false };
+
+const expandScreenSlice = createSlice({
+  name: "expandScreen",
+  initialState: initialState,
+  reducers: {
+    changeLeftScreen: (state) => {
+      state.left ? (state.left = false) : (state.left = true);
+      return state;
+    },
+    changeRightScreen: (state) => {
+      state.right ? (state.right = false) : (state.right = true);
+      return state;
+    },
+  },
+});
+
+export const { changeLeftScreen, changeRightScreen } = expandScreenSlice.actions;
+export const expandScreenReducer = expandScreenSlice.reducer;

client/src/reducer/StockOrderSet-Reducer.ts

@@ -0,0 +1,15 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = false;
+
+const stockOrderSetSlice = createSlice({
+  name: "stockOrderSet",
+  initialState: initialState,
+  reducers: {
+    stockOrderOpen: () => true,
+    stockOrderClose: () => false,
+  },
+});
+
+export const { stockOrderOpen, stockOrderClose } = stockOrderSetSlice.actions;
+export const stockOrderSetReducer = stockOrderSetSlice.reducer;

client/src/store/config.ts

@@ -2,12 +2,16 @@ import { configureStore } from "@reduxjs/toolkit";
 import { stockOrderTypeReducer } from "../reducer/StockOrderType-Reducer";
 import { stockPriceTypeReducer } from "../reducer/StockPriceType-Reducer";
 import { stockOrderPriceReducer } from "../reducer/StockOrderPrice-Reducer";
+import { expandScreenReducer } from "../reducer/ExpandScreen-Reducer";
+import { stockOrderSetReducer } from "../reducer/StockOrderSet-Reducer";
 
 const store = configureStore({
   reducer: {
     stockOrderType: stockOrderTypeReducer,
     stockPriceType: stockPriceTypeReducer,
     stockOrderPrice: stockOrderPriceReducer,
+    expandScreen: expandScreenReducer,
+    stockOrderSet: stockOrderSetReducer,
   },
 });