d.willr}
+ yLabel="Williams %R"
+ yDisplayFormat={format(",")}
+ labelFill='#095db0'
+ />
+
+ )
+}
diff --git a/src/components/invest/chart/KospiContent.jsx b/src/components/invest/chart/KospiContent.jsx
new file mode 100644
index 0000000..c20feda
--- /dev/null
+++ b/src/components/invest/chart/KospiContent.jsx
@@ -0,0 +1,94 @@
+import React, { useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux';
+import { getkospiKosdaqDatas } from '../../../store/reducers/Chart/kospiKosdaq';
+import styled from 'styled-components';
+import { CaretDownFill, CaretUpFill } from 'react-bootstrap-icons';
+
+export default function KospiContent() {
+ const dispatch = useDispatch();
+ const content = useSelector((state) => state.kospiKosdaq.data);
+
+ const kospiNum = parseFloat(content?.kospi?.upDown);
+ const kosdaqNum = parseFloat(content?.kosdaq?.upDown);
+ const kospiRate = parseFloat(content?.kospi?.rate);
+ const kosdaqRate = parseFloat(content?.kosdaq?.rate);
+
+ useEffect(() => {
+ dispatch(getkospiKosdaqDatas())
+ const timer = setInterval(() => {
+ dispatch(getkospiKosdaqDatas());
+ }, 3000)
+
+ return () => clearInterval(timer);
+ }, [])
+
+ return (
+
+
+
+ KOSPI
+ {content?.kospi?.price}
+
+
+
+ {kospiNum > 0 ?
+
+ : kospiNum < 0 ?
+
+ : null
+ }
+ {content?.kospi?.upDown}
+
+ ({content?.kospi?.rate}%)
+
+
+
+
+ KOSDAQ
+ {content?.kosdaq?.price}
+
+
+
+ {kosdaqNum > 0 ?
+
+ : kosdaqNum < 0 ?
+
+ : null
+ }
+ {content?.kosdaq?.upDown}
+
+ ({content?.kosdaq?.rate}%)
+
+
+
+ )
+}
+
+const Container = styled.div`
+ display: flex;
+`
+
+const SubContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ padding: 0 14px;
+ border-left: 1px solid rgba(0, 0, 0, 0.2);
+`
+
+const Content = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 15px;
+ gap: 7px;
+ font-size: 14px;
+`
+
+const MainFont = styled.span`
+ font-weight: 600;
+ font-size: 15px;
+`
+
+const NumFont = styled.span`
+ color: ${(props) => props.num > 0 ? "#c70606" : props.num < 0 ? "#0636c7" : "#000"};
+`
diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx
new file mode 100644
index 0000000..0c94892
--- /dev/null
+++ b/src/components/invest/chart/MainChart.jsx
@@ -0,0 +1,769 @@
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import { format } from "d3-format";
+import { timeFormat } from "d3-time-format";
+import {
+ discontinuousTimeScaleProviderBuilder,
+ Chart,
+ ChartCanvas,
+ BarSeries,
+ CandlestickSeries,
+ OHLCTooltip,
+ lastVisibleItemBasedZoomAnchor,
+ XAxis,
+ YAxis,
+ CrossHairCursor,
+ EdgeIndicator,
+ MouseCoordinateX,
+ MouseCoordinateY,
+ ZoomButtons,
+ HoverTooltip,
+ SingleValueTooltip,
+} from "react-financial-charts";
+
+import { useSelector, useDispatch } from "react-redux";
+import styled from "styled-components";
+import {
+ getChartDatas,
+ setLiveData,
+} from "../../../store/reducers/Chart/chart";
+
+// 차트지표
+import SMAChart from "./Indicators/chart/SMAChart";
+import WMAChart from "./Indicators/chart/WMAChart";
+import EMAChart from "./Indicators/chart/EMAChart";
+import BBANDSChart from "./Indicators/chart/BBANDSChart";
+import SARChart from "./Indicators/chart/SARChart";
+import MACDChart from "./Indicators/sub/MACDChart";
+import STOCHFChart from "./Indicators/sub/STOCHFast";
+import STOCHChart from "./Indicators/sub/STOCH";
+import RSIChart from "./Indicators/sub/RSIChart";
+import CCIChart from "./Indicators/sub/CCIChart";
+import MOMChart from "./Indicators/sub/MOMChart";
+import ROCChart from "./Indicators/sub/ROCChart";
+import ADChart from "./Indicators/sub/ADChart";
+import ATRChart from "./Indicators/sub/ATRChart";
+import MFIChart from "./Indicators/sub/MFIChart";
+import OBVChart from "./Indicators/sub/OBVChart";
+import ADOSCChart from "./Indicators/sub/ADOSCChart";
+import TRIXChart from "./Indicators/sub/TRIXChart";
+import WILLRChart from "./Indicators/sub/WILLRChart";
+import DMIChart from "./Indicators/sub/DMIChart";
+import ADXChart from "./Indicators/sub/ADXChart";
+import ADXRChart from "./Indicators/sub/ADXRChart";
+import AROONChart from "./Indicators/sub/AROONChart";
+import AROONOSCChart from "./Indicators/sub/AROONOSCChart";
+import STOCHRSIChart from "./Indicators/sub/STOCHRSIChart";
+import ULTOSCChart from "./Indicators/sub/ULTOSCChart";
+import PPOChart from "./Indicators/sub/PPOChart";
+
+import { useWebSocket } from "../../../lib/hooks/useWebSocket";
+import ButtonContainer from "./ButtonContainer";
+import TitleContainer from "./TitleContainer";
+
+export default function MainChart({ toggleCharts, toggleIndicators, showCharts, showIndicators }) {
+ const dataList = useSelector((state) => state.chart.datas);
+ const clickDate = useSelector((state) => state.chart.date);
+ const company = useSelector((state) => state.company.data[1]);
+ const dispatch = useDispatch();
+ const [isShow, setIsShow] = useState(false);
+
+ // 클릭한 보조지표
+ const subIndi = useSelector((state) => state.clickIndicator.subIndi);
+ const chartIndi = useSelector((state) => state.clickIndicator.chartIndi);
+
+ const { askPrice, nowPrice } = useWebSocket();
+ const [upNum, setUpNum] = useState(0);
+
+ // 일, 주, 월, 년 데이터 불러오는 함수
+ function getData(format) {
+ const today = new Date();
+ const formattedDate = today.toISOString().slice(0, 10).replace(/-/g, "");
+ const data = {
+ code: company.code,
+ start_date: "19990101",
+ end_date: formattedDate,
+ time_format: format,
+ };
+
+ dispatch(getChartDatas(data)).then((res) => setIsShow((prev) => !prev));
+ }
+
+ useEffect(() => {
+ getData(clickDate);
+ }, [company]);
+
+ // socket 연결 시, 현재가 불러올때마다 data에 저장
+ useEffect(() => {
+ const today = new Date();
+ const formattedDate = today.toISOString().slice(0, 10).replace(/-/g, "");
+
+ if (nowPrice) {
+ setUpNum(parseFloat(nowPrice.message.close) - parseFloat(dataList[dataList.length - 2].close))
+ nowPrice.message['date'] = formattedDate;
+ dispatch(setLiveData(nowPrice.message));
+ }
+ }, [nowPrice]);
+
+ const ScaleProvider =
+ discontinuousTimeScaleProviderBuilder().inputDateAccessor((d) => {
+ const year = d?.date?.substr(0, 4);
+ const month = d?.date?.substr(4, 2);
+ const day = d?.date?.substr(6, 2);
+ const nDate = `${year}-${month}-${day}`;
+ return new Date(nDate);
+ });
+
+ const margin = { left: 5, right: 75, top: 10, bottom: 24 };
+
+ // window 사이즈에 맞춘 넓이/높이
+ const [height, setHeight] = useState(0);
+ const [width, setWidth] = useState(0);
+
+ useEffect(() => {
+ // 브라우저 높이에서 178px을 빼서 height 상태 업데이트
+ const updateHeight = () => {
+ const calculatedHeight = window.innerHeight - 178;
+ setHeight(calculatedHeight);
+ };
+
+ // 브라우저 넓이에서 650px을 빼서 width 상태 업데이트
+ const updateWidth = () => {
+ const calculatedWidth = window.innerWidth - 650;
+ setWidth(calculatedWidth);
+ };
+
+ // 컴포넌트 마운트 시 높이, 넓이 계산
+ updateHeight();
+ updateWidth();
+
+ // 브라우저 창 크기가 변경될 때마다 높이 재계산
+ window.addEventListener('resize', updateHeight);
+ window.addEventListener('resize', updateWidth);
+
+ // cleanup 함수
+ return () => {
+ window.removeEventListener('resize', updateHeight);
+ window.removeEventListener('resize', updateWidth);
+ };
+ }, []);
+
+ const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider(dataList);
+
+ // 소수점 이하 둘째짜리까지만 표현
+ const pricesDisplayFormat = format(",");
+
+ const x_max = xAccessor(data[data.length - 1]);
+ const x_min = xAccessor(data[Math.max(0, data.length - 100)]);
+ const xExtents = [x_min, x_max + 2];
+
+ const gridHeight = height - margin.top - margin.bottom;
+
+ // default : 4
+ const barChartHeight = subIndi.length < 3 ? gridHeight / 4 : gridHeight / 6;
+
+ // 차트 추가될 때마다 origin 변경
+ const barChartOrigin = (_, h) => [
+ 0,
+ gridHeight - (subIndi.length + 1) * barChartHeight,
+ ];
+
+ // * (차트 개수)
+ const chartHeight = gridHeight - barChartHeight * (subIndi.length + 1);
+
+ const dateTimeFormat = "%Y/%m/%d";
+ const timeDisplayFormat = timeFormat(dateTimeFormat);
+
+ const hoverTimeFormat = "%Y년 %m월 %d일";
+ const HoverDisplayFormat = timeFormat(hoverTimeFormat);
+
+ const barChartExtents = (data) => {
+ return data?.volume;
+ };
+
+ const candleChartExtents = (data) => {
+ return [data?.high, data?.low];
+ };
+
+ const yEdgeIndicator = (data) => {
+ return data?.close;
+ };
+
+ const volumeColor = (data) => {
+ return data?.close > data?.open
+ ? "rgba(239, 83, 80, 0.3)"
+ : "rgba(38, 166, 154, 0.3)";
+ };
+
+ const volumeSeries = (data) => {
+ return data?.volume;
+ };
+
+ const openCloseColor = (data) => {
+ return data?.close > data?.open ? "#ef5350" :"#26a69a";
+ };
+
+ // hover 했을 때 보여줄 데이터
+ function tooltipContent() {
+ return ({ currentItem, xAccessor }) => {
+ return {
+ x: HoverDisplayFormat(xAccessor(currentItem)),
+ y: [
+ {
+ label: "시가",
+ value: currentItem?.open && pricesDisplayFormat(currentItem?.open),
+ },
+ {
+ label: "종가",
+ value:
+ currentItem?.close && pricesDisplayFormat(currentItem?.close),
+ },
+ {
+ label: "고가",
+ value: currentItem?.high && pricesDisplayFormat(currentItem?.high),
+ },
+ {
+ label: "저가",
+ value: currentItem?.low && pricesDisplayFormat(currentItem?.low),
+ },
+ {
+ label: "거래량",
+ value:
+ currentItem?.volume && pricesDisplayFormat(currentItem?.volume),
+ },
+ ],
+ };
+ };
+ }
+
+ return (
+
+ {dataList?.length > 0 ? (
+ <>
+
+
+ {/* 차트 */}
+
+ {/* 주식 캔들 차트 및 차트 지표 */}
+
+ {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */}
+
+
+
+
+
+ {/* 차트지표 */}
+ {chartIndi.includes("SMA") && (
+
+ )}
+ {chartIndi.includes("WMA") && (
+
+ )}
+ {chartIndi.includes("EMA") && (
+
+ )}
+ {chartIndi.includes("BBANDS") && (
+
+ )}
+ {chartIndi.includes("SAR") && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {/* 거래량 차트 */}
+
+
+
+
+
+ d.volume}
+ yLabel="거래량"
+ yDisplayFormat={format(",")}
+ />
+
+
+ {/* MACD 차트 */}
+ {subIndi.includes("MACD") && (
+ d.macd}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("MACD")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* STOCHF 차트 */}
+ {subIndi.includes("STOCHF") && (
+ data.outFastK}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("STOCHF")) *
+ barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* STOCHF 차트 */}
+ {subIndi.includes("STOCH") && (
+ data.outSlowK}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("STOCH")) *
+ barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* RSI 차트 */}
+ {subIndi.includes("RSI") && (
+ data.rsi}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("RSI")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* CCI 차트 */}
+ {subIndi.includes("CCI") && (
+ data.cci}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("CCI")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* MOM 차트 */}
+ {subIndi.includes("MOM") && (
+ data.mom}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("MOM")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* ROC 차트 */}
+ {subIndi.includes("ROC") && (
+ data.roc}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("ROC")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* AD 차트 */}
+ {subIndi.includes("AD") && (
+ data.ad}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("AD")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* ATR 차트 */}
+ {subIndi.includes("ATR") && (
+ data.atr}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("ATR")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* MFI 차트 */}
+ {subIndi.includes("MFI") && (
+ data.mfi}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("MFI")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* OBV 차트 */}
+ {subIndi.includes("OBV") && (
+ data.obv}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("OBV")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* ADOSC 차트 */}
+ {subIndi.includes("ADOSC") && (
+ data.adosc}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("ADOSC")) *
+ barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* TRIX 차트 */}
+ {subIndi.includes("TRIX") && (
+ data.trix}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("TRIX")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* WILLR 차트 */}
+ {subIndi.includes("WILLR") && (
+ data.willr}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("WILLR")) *
+ barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* DMI (DX) 차트 */}
+ {/* 값 제대로 받아오는지 확인 필요 */}
+ {subIndi.includes("DX") && (
+ data.dx}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("DX")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* ADX 차트 */}
+ {subIndi.includes("ADX") && (
+ data.adx}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("ADX")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* ADXR 차트 */}
+ {subIndi.includes("ADXR") && (
+ data.adxr}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("ADXR")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* AROON 차트 */}
+ {subIndi.includes("AROON") && (
+ data.aroonDown}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("AROON")) *
+ barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* AROONOSC 차트 */}
+ {subIndi.includes("AROONOSC") && (
+ data.aroonosc}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("AROONOSC")) *
+ barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* STOCHRSI 차트 */}
+ {subIndi.includes("STOCHRSI") && (
+ data.stochRsiK}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("STOCHRSI")) *
+ barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* ULTOSC 차트 */}
+ {subIndi.includes("ULTOSC") && (
+ data.ultosc}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("ULTOSC")) *
+ barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+ {/* PPO 차트 */}
+ {/* PPO Signal 데이터인듯 */}
+ {subIndi.includes("PPO") && (
+ data.ppo}
+ padding={20}
+ origin={(_, h) => [
+ 0,
+ gridHeight -
+ (subIndi.length - subIndi.indexOf("PPO")) * barChartHeight,
+ ]}
+ >
+
+
+ )}
+
+
+ ) : null}
+
+ );
+}
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: calc(100vw - 650px);
+ // padding: 0 10px;
+`;
+
diff --git a/src/components/invest/chart/TitleContainer.jsx b/src/components/invest/chart/TitleContainer.jsx
new file mode 100644
index 0000000..f7edad2
--- /dev/null
+++ b/src/components/invest/chart/TitleContainer.jsx
@@ -0,0 +1,142 @@
+import React from 'react'
+import styled from 'styled-components';
+import KospiContent from './KospiContent';
+import { CaretDownFill, CaretUpFill } from 'react-bootstrap-icons';
+import {getLogoFileName, onErrorImg} from "~/util/getLogoFileName";
+
+export default function TitleContainer({ nowPrice, company, upNum, dataList }) {
+
+ // 장이 열려있을 때, 현재가 대비 종가 등락
+ const nowRate = upNum / parseFloat(dataList[dataList.length - 2].close) * 100;
+
+ // 장이 마감됐을 때, 전일 대비 종가 등락
+ const upDown = parseFloat(dataList[dataList.length - 1].close) - parseFloat(dataList[dataList.length - 2].close)
+ const close = dataList[dataList.length - 1].close.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+ const stockRate = upDown / parseFloat(dataList[dataList.length - 2].close) * 100;
+
+ return (
+
+
+
+
+
+ {company.name}
+
+ {company.code} {company.market}
+
+
+
+
+ {/* 실시간 데이터가 있을 때 (장이 열려있을 때) */}
+ {nowPrice?.message ? (
+ <>
+ {nowPrice?.message.close.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+
+ {upNum > 0 ?
+
+ : upNum < 0 ?
+
+ : null
+ }
+ {upNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+ (
+ {nowRate > 0 && (
+ +
+ )}
+ {nowRate.toFixed(2)}%)
+
+
+ ) : (
+ <>
+ {close}
+
+ {upDown > 0 ?
+
+ : upDown < 0 ?
+
+ : null
+ }
+ {upDown.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+ (
+ {stockRate > 0 && (
+ +
+ )}
+ {stockRate.toFixed(2)}%)
+
+
+ )}
+
+
+
+
+ )
+}
+
+const MainContainer = styled.div`
+ display: flex;
+ align-items: center;
+ padding: 0 10px;
+ justify-content: space-between;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)
+`
+
+const SubContainer = styled.div`
+ display: flex;
+ gap: 20px;
+`
+
+const CompanyContainer = styled.div`
+ display: flex;
+ align-items: center;
+ padding: 10px 5px;
+`;
+
+const CompanyLogo = styled.img`
+ width: 40px;
+ height: 40px;
+ border-radius: 999px;
+ margin-right: 10px;
+`;
+
+const StockInfo = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 5px;
+`
+
+const StockDiv = styled.div`
+ display: flex;
+ align-items: center;
+ margin-top: 5px;
+ gap: 5px;
+`
+
+const StockFont = styled.span`
+ padding-right: 15px;
+ font-size: 20px;
+
+ color: ${(props) => props.num > 0 ? "#c70606" : props.num < 0 ? "#0636c7" : "#000"};
+`
+
+const StockFont2 = styled.span`
+ color: ${(props) => props.num > 0 ? "#c70606" : props.num < 0 ? "#0636c7" : "#000"};
+`
+
+const FontContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+const MainFont = styled.span`
+ font-weight: 700;
+`;
+
+const SubFont = styled.span`
+ font-size: 12px;
+`;
diff --git a/src/components/invest/left-bar/ChartIndicators.jsx b/src/components/invest/left-bar/ChartIndicators.jsx
new file mode 100644
index 0000000..e59d51d
--- /dev/null
+++ b/src/components/invest/left-bar/ChartIndicators.jsx
@@ -0,0 +1,200 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { useDispatch, useSelector } from "react-redux";
+import {
+ setActiveSub,
+ setChartIndi,
+ setDisactiveSub,
+} from "../../../store/reducers/Chart/Indicators/clickIndicators";
+import IndicatorDetail from "./IndicatorDetail";
+import chartData from "../../../Json/chartData.json";
+
+const ChartIndicators = ({ onClose }) => {
+ const dispatch = useDispatch();
+
+ const [showDetail, setShowDetail] = useState(
+ Array(chartData.length).fill(false)
+ );
+
+ const toggleDetail = (index) => {
+ setShowDetail((prevShowDetail) => {
+ const newShowDetail = [...prevShowDetail];
+ newShowDetail[index] = !newShowDetail[index];
+ return newShowDetail;
+ });
+ };
+
+ const isActive = useSelector((state) => state.clickIndicator);
+ const chartIndi = useSelector((state) => state.clickIndicator.chartIndi);
+
+ // 1️⃣ onChange함수를 사용하여 이벤트 감지, 필요한 값 받아오기
+ const onCheckedElement = (checked, item) => {
+ if (chartIndi.length < 3) {
+ if (checked) {
+ dispatch(setActiveSub(item));
+ dispatch(setChartIndi([...chartIndi, item]));
+ }
+ } else {
+ if (checked) {
+ dispatch(setActiveSub(item));
+ dispatch(
+ setChartIndi([...chartIndi.filter((el, idx) => idx !== 0), item])
+ );
+ dispatch(setDisactiveSub(chartIndi[0]));
+ }
+ }
+
+ if (!checked) {
+ dispatch(setDisactiveSub(item));
+ dispatch(setChartIndi(chartIndi.filter((el) => el !== item)));
+ }
+ };
+
+ return (
+
+
+ 차트지표
+
+
+
+ {chartData.map((item, idx) => (
+
+ {
+ onCheckedElement(e.target.checked, e.target.value);
+ }}
+ >
+ {item.showName}
+ toggleDetail(idx)}>설정
+
+ {showDetail[idx] ? (
+ toggleDetail(idx)}
+ initialValues={item.vars.map((item) => item.default)}
+ />
+ ) : (
+ <>
+ )}
+
+
+ ))}
+
+
+ );
+};
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+const CloseButton = styled.img`
+ position: absolute;
+ right: 10px;
+ top: 8px;
+ width: 25px;
+ cursor: pointer;
+`;
+
+const IndicatorsWrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ border-bottom: 1px solid #c9c9c9;
+ justify-content: center;
+`;
+
+const IndicatorDiv = styled.div`
+ color: #000;
+ text-align: center;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ padding-top: 10px;
+ padding-bottom: 10px;
+`;
+
+const ItemContainer = styled.div`
+ width: 100%;
+`;
+
+const ItemWrapper = styled.div`
+ display: flex;
+ height: 45px;
+ width: 100%;
+ align-items: center;
+ border-bottom: 1px solid #c9c9c9;
+ padding-right: 10px;
+`;
+
+const CheckBox = styled.input`
+ position: relative;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ margin: 0px 10px;
+ width: 20px;
+ height: 20px;
+ border: 1.5px solid gainsboro;
+ border-radius: 5px;
+ background-color: white;
+ transition: background-color 0.3s, border-color 0.3s;
+
+ &:checked {
+ border-color: transparent;
+ background-size: 100% 100%;
+ background-position: 50%;
+ background-repeat: no-repeat;
+ background-color: #fc6d6d;
+
+ &::before {
+ content: "✓";
+ font-size: 14px;
+ color: white;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+`;
+
+const ItemDiv = styled.div``;
+
+const DetailBtn = styled.button`
+ margin-left: auto;
+ background: none;
+ border: 1px solid #474747;
+ border-radius: 100px;
+
+ &:hover {
+ border: 1px solid #474747;
+ background-color: #474747;
+ color: white;
+ }
+`;
+
+const DetailContainer = styled.div`
+ width: 250px;
+ height: 100%;
+ background-color: #fff;
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
+ transform: translateX(${(props) => (props.$showdetail ? "0" : "-100%")});
+ transition: transform 0.3s ease;
+ position: absolute;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ z-index: 999;
+`;
+
+export default ChartIndicators;
diff --git a/src/components/invest/left-bar/IndicatorDetail.jsx b/src/components/invest/left-bar/IndicatorDetail.jsx
new file mode 100644
index 0000000..c1d4820
--- /dev/null
+++ b/src/components/invest/left-bar/IndicatorDetail.jsx
@@ -0,0 +1,266 @@
+import React from "react";
+import styled from "styled-components";
+import { useDispatch, useSelector } from "react-redux";
+import * as chartValuesModule from "../../../store/reducers/Trading/chartValues";
+import * as indicatorValuesModule from "../../../store/reducers/Trading/indicatorValues";
+
+const IndicatorDetail = ({
+ indiType,
+ showName,
+ name,
+ vars,
+ onClose,
+ initialValues,
+}) => {
+ const dispatch = useDispatch();
+
+ let setValuesReducer;
+ if (indiType === "chart") {
+ setValuesReducer = chartValuesModule;
+ } else if (indiType === "indi") {
+ setValuesReducer = indicatorValuesModule;
+ }
+ const { setValues } = setValuesReducer;
+
+ const values = useSelector((state) => {
+ if (indiType === "chart") {
+ return state.chartValues.values[name];
+ } else if (indiType === "indi") {
+ return state.indicatorValues.values[name];
+ }
+ });
+
+ const decreaseValue = (idx) => {
+ const newValues = [...values];
+ if (newValues[idx] > vars[idx].min) {
+ newValues[idx] = Math.round((newValues[idx] - vars[idx].val) * 100) / 100;
+ const payload = { [name]: newValues };
+ dispatch(setValues(payload));
+ }
+ };
+
+ const increaseValue = (idx) => {
+ const newValues = [...values];
+ if (newValues[idx] < vars[idx].max) {
+ newValues[idx] = Math.round((newValues[idx] + vars[idx].val) * 100) / 100;
+ const payload = { [name]: newValues };
+ dispatch(setValues(payload));
+ }
+ };
+
+ return (
+
+
+ {showName}
+
+
+
+ {values.length !== 0 ? (
+
+ 변수 설정
+ {
+ const payload = { [name]: initialValues };
+ dispatch(setValues(payload));
+ }}
+ >
+ 초기화
+
+
+ ) : (
+
+ 변수가 없습니다.
+
+ )}
+ {vars.map((item, idx) => (
+
+ {item.name}
+
+ {
+ decreaseValue(idx);
+ }}
+ >
+
+
+
+ {
+ const newValue =
+ e.target.value.trim() === ""
+ ? ""
+ : parseFloat(e.target.value);
+ const newValues = [...values];
+ newValues[idx] = newValue;
+ const payload = { [name]: newValues };
+ dispatch(setValues(payload));
+ }}
+ onBlur={(e) => {
+ const newValue =
+ e.target.value.trim() === ""
+ ? item.default
+ : parseFloat(e.target.value);
+ const newValues = [...values];
+ newValues[idx] = newValue;
+ const payload = { [name]: newValues };
+ dispatch(setValues(payload));
+ }}
+ />
+ {
+ increaseValue(idx);
+ }}
+ >
+
+
+
+
+
+ ))}
+
+
+ );
+};
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+const CloseButton = styled.img`
+ position: absolute;
+ right: 10px;
+ top: 8px;
+ width: 25px;
+ cursor: pointer;
+`;
+
+const IndicatorsWrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ border-bottom: 1px solid #c9c9c9;
+ justify-content: center;
+`;
+
+const IndicatorDiv = styled.div`
+ color: #000;
+ text-align: center;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ padding-top: 10px;
+ padding-bottom: 10px;
+`;
+
+const ItemContainer = styled.div`
+ width: 100%;
+`;
+
+const RowDiv = styled.div`
+ display: flex;
+ align-items: center;
+ margin: 10px 10px 0px 0px;
+`;
+
+const VarDiv = styled.div`
+ width: 100%;
+ margin-left: 10px;
+ font-size: 14px;
+ color: gray;
+`;
+
+const ResetBtn = styled.button`
+ background: none;
+ font-size: 14px;
+ width: 80px;
+ height: 30px;
+ box-sizing: border-box;
+ border: none;
+ color: gray;
+ &:hover {
+ background-color: #ececec;
+ color: black;
+ }
+`;
+
+const ItemWrapper = styled.div`
+ display: flex;
+ height: 50px;
+ width: 100%;
+ align-items: center;
+ border-bottom: 1px solid #c9c9c9;
+ padding-right: 10px;
+ justify-content: space-between;
+`;
+
+const ItemDiv = styled.div`
+ margin-left: 10px;
+ font-size: 17px;
+`;
+
+const ValueContainer = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+const VarInput = styled.input`
+ width: 80px;
+ margin: 0 5px;
+ padding: 2px 0;
+ font-size: 17px;
+ border: 0.5px solid black;
+ text-align: center;
+
+ -webkit-appearance: none;
+ -moz-appearance: textfield;
+ appearance: none;
+ &::-webkit-inner-spin-button,
+ &::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+`;
+
+const Img1 = styled.img`
+ width: 12px;
+`;
+
+const Img2 = styled.img`
+ width: 12px;
+ display: none;
+`;
+
+const Btn = styled.button`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 20px;
+ height: 20px;
+ background: none;
+ border: 1px solid black;
+ border-radius: 100px;
+ text-align: center;
+
+ &:hover {
+ background-color: black;
+ border: 1px solid black;
+ }
+
+ &:hover > ${Img2} {
+ display: block;
+ }
+
+ &:hover > ${Img1} {
+ display: none;
+ }
+`;
+
+export default IndicatorDetail;
diff --git a/src/components/invest/left-bar/Indicators.jsx b/src/components/invest/left-bar/Indicators.jsx
new file mode 100644
index 0000000..bbc7968
--- /dev/null
+++ b/src/components/invest/left-bar/Indicators.jsx
@@ -0,0 +1,213 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { useDispatch, useSelector } from "react-redux";
+import {
+ setActiveSub,
+ setDisactiveSub,
+ setSubIndi,
+} from "../../../store/reducers/Chart/Indicators/clickIndicators";
+import IndicatorDetail from "./IndicatorDetail";
+import indiData from "../../../Json/indiData.json";
+
+const Indicators = ({ onClose }) => {
+ const dispatch = useDispatch();
+ const [showDetail, setShowDetail] = useState(
+ Array(indiData.length).fill(false)
+ );
+
+ const toggleDetail = (index) => {
+ setShowDetail((prevShowDetail) => {
+ const newShowDetail = [...prevShowDetail];
+ newShowDetail[index] = !newShowDetail[index];
+ return newShowDetail;
+ });
+ };
+
+ const isActive = useSelector((state) => state.clickIndicator);
+ const subIndi = useSelector((state) => state.clickIndicator.subIndi);
+
+ // 1️⃣ onChange함수를 사용하여 이벤트 감지, 필요한 값 받아오기
+ const onCheckedElement = (checked, item) => {
+ if (subIndi.length < 3) {
+ if (checked) {
+ dispatch(setActiveSub(item));
+ dispatch(setSubIndi([...subIndi, item]));
+ }
+ } else {
+ if (checked) {
+ dispatch(setActiveSub(item));
+ dispatch(setSubIndi([...subIndi.filter((el, idx) => idx !== 0), item]));
+ dispatch(setDisactiveSub(subIndi[0]));
+ }
+ }
+
+ if (!checked) {
+ dispatch(setDisactiveSub(item));
+ dispatch(setSubIndi(subIndi.filter((el) => el !== item)));
+ }
+ };
+
+ return (
+
+
+ 보조지표
+
+
+
+ {indiData.map((item, idx) => (
+
+ {
+ onCheckedElement(e.target.checked, e.target.value);
+ }}
+ >
+ {item.showName}
+ toggleDetail(idx)}>설정
+
+ {showDetail[idx] ? (
+ toggleDetail(idx)}
+ initialValues={item.vars.map((item) => item.default)}
+ />
+ ) : (
+ <>
+ )}
+
+
+ ))}
+
+
+ );
+};
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+const CloseButton = styled.img`
+ position: absolute;
+ right: 10px;
+ top: 8px;
+ width: 25px;
+ cursor: pointer;
+`;
+
+const IndicatorsWrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ border-bottom: 1px solid #c9c9c9;
+ justify-content: center;
+`;
+
+const IndicatorDiv = styled.div`
+ color: #000;
+ text-align: center;
+ font-size: 18px;
+ font-weight: 400;
+ line-height: normal;
+ padding-top: 10px;
+ padding-bottom: 10px;
+`;
+
+const ItemContainer = styled.div`
+ width: 100%;
+ height: calc(100vh - 106px);
+ overflow: auto;
+
+ &::-webkit-scrollbar {
+ width: 3px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: 20px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 20px;
+ }
+`;
+
+const ItemWrapper = styled.div`
+ display: flex;
+ height: 45px;
+ width: 100%;
+ align-items: center;
+ border-bottom: 1px solid #c9c9c9;
+ padding-right: 10px;
+`;
+
+const CheckBox = styled.input`
+ position: relative;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ margin: 0px 10px;
+ width: 20px;
+ height: 20px;
+ border: 1.5px solid gainsboro;
+ border-radius: 5px;
+ background-color: white;
+ transition: background-color 0.3s, border-color 0.3s;
+
+ &:checked {
+ border-color: transparent;
+ background-size: 100% 100%;
+ background-position: 50%;
+ background-repeat: no-repeat;
+ background-color: #fc6d6d;
+
+ &::before {
+ content: "✓";
+ font-size: 14px;
+ color: white;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+`;
+
+const ItemDiv = styled.div``;
+
+const DetailBtn = styled.button`
+ margin-left: auto;
+ background: none;
+ border: 1px solid #474747;
+ color: #474747;
+ border-radius: 100px;
+
+ &:hover {
+ border: 1px solid #474747;
+ background-color: #474747;
+ color: white;
+ }
+`;
+
+const DetailContainer = styled.div`
+ width: 250px;
+ height: 100%;
+ background-color: #fff;
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
+ transform: translateX(${(props) => (props.$showdetail ? "0" : "-100%")});
+ transition: transform 0.3s ease;
+ position: absolute;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ z-index: 999;
+`;
+
+export default Indicators;
diff --git a/src/components/invest/left-bar/MyStockList.jsx b/src/components/invest/left-bar/MyStockList.jsx
new file mode 100644
index 0000000..ef0498d
--- /dev/null
+++ b/src/components/invest/left-bar/MyStockList.jsx
@@ -0,0 +1,95 @@
+import React, { useState, useEffect, useRef } from "react";
+import styled from "styled-components";
+import { useDispatch, useSelector } from "react-redux";
+import {
+ postSearchUser,
+ postLikeStock,
+ fetchLikeStock,
+ fetchLikeStockArr,
+} from "~/store/reducers/Trading/search";
+import { setFavoriteArr } from "~/store/reducers/Trading/search";
+import { getCookie } from "~/lib/apis/cookie";
+import StockItem from "./MyStockList/StockItem";
+import SearchStock from "./MyStockList/SearchStock";
+
+const MyStockList = () => {
+ const isLogin = !!getCookie("token");
+ const [searchInput, setSearchInput] = useState("");
+ const [isClick, setIsClick] = useState(false);
+
+ const dispatch = useDispatch();
+ const user = useSelector((state) => state.user.user);
+ const favoriteArr = useSelector((state) => state.search.favoriteArr);
+ const myFavoriteArr = useSelector((state) => state.search.myFavoriteArr);
+
+ useEffect(() => {
+ if (isLogin) {
+ dispatch(fetchLikeStock(user.id));
+ dispatch(fetchLikeStockArr(user.id));
+ }
+ }, [dispatch, isClick, user.id]);
+
+ const addToFavorites = (result) => {
+ setIsClick((prev) => !prev);
+ if (!result.isLike) {
+ const updatedArr = [...favoriteArr, result.code];
+ dispatch(setFavoriteArr(updatedArr));
+ dispatch(postLikeStock({ likeStock: updatedArr, userId: user.id }));
+ dispatch(postSearchUser({ searchQuery: searchInput, userId: user.id }));
+ } else {
+ const updatedFavoriteArr = favoriteArr.filter(
+ (item) => item !== result.code
+ );
+ dispatch(setFavoriteArr(updatedFavoriteArr));
+ dispatch(
+ postLikeStock({ likeStock: updatedFavoriteArr, userId: user.id })
+ );
+ dispatch(postSearchUser({ searchQuery: searchInput, userId: user.id }));
+ }
+ };
+
+ return (
+
+
+ 관심 종목
+
+
+
+
+ );
+};
+
+const LeftContainer = styled.section`
+ min-width: 250px;
+ width: 250px;
+ height: calc(100vh - 57px);
+ border-right: 1px solid #e2e2e2;
+`;
+
+const MyItemContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+const MyItemDiv = styled.div`
+ color: #000;
+ text-align: center;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ border-bottom: 1px solid #c9c9c9;
+`;
+
+export default MyStockList;
diff --git a/src/components/invest/left-bar/MyStockList/SearchStock.jsx b/src/components/invest/left-bar/MyStockList/SearchStock.jsx
new file mode 100644
index 0000000..c49ac9e
--- /dev/null
+++ b/src/components/invest/left-bar/MyStockList/SearchStock.jsx
@@ -0,0 +1,289 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { styled } from "styled-components";
+import {
+ postSearch,
+ postSearchUser,
+} from "../../../../store/reducers/Trading/search";
+import { getLogoFileName, onErrorImg } from "../../../../util/getLogoFileName";
+import { getCookie } from "../../../../lib/apis/cookie";
+import { setClickCompany } from "../../../../store/reducers/Chart/clickCompany";
+
+const SearchStock = ({ addToFavorites, searchInput, setSearchInput }) => {
+ const searchRef = useRef(null);
+ const isLogin = !!getCookie("token");
+ const [showSearch, setShowSearch] = useState(false);
+
+ const dispatch = useDispatch();
+ const user = useSelector((state) => state.user.user);
+ const searchResults = useSelector((state) => state.search.searchResults);
+
+ const searchFunc = (prop) => {
+ const actionToDispatch = isLogin
+ ? postSearchUser({ searchQuery: prop.searchQuery, userId: user.id })
+ : postSearch({ searchQuery: prop.searchQuery });
+ dispatch(actionToDispatch);
+ };
+
+ useEffect(() => {
+ searchFunc({ searchQuery: "" });
+ setSearchInput("");
+ setShowSearch(false);
+ }, []);
+
+ const onChangeInput = async (e) => {
+ setSearchInput(e.target.value);
+ searchFunc({ searchQuery: e.target.value });
+ };
+
+ return (
+ {
+ setShowSearch(true);
+ }}
+ >
+ {showSearch ? (
+
+
+ 
+ onChangeInput(e)}
+ >
+ {searchInput && (
+ {
+ setSearchInput("");
+ searchFunc({ searchQuery: "" });
+ }}
+ >
+ 
+
+ )}
+ {
+ e.stopPropagation();
+ setSearchInput("");
+ setShowSearch(false);
+ searchFunc({ searchQuery: "" });
+ }}
+ >
+ 닫기
+
+
+ {searchResults?.length > 0 && (
+
+ {searchResults?.map((result) => (
+ {
+ dispatch(setClickCompany(result));
+ }}
+ >
+ 
+
+ {result.name}
+
+ {result.code}
+
+ {result.market === "kospi" ? "코스피" : "코스닥"}
+
+
+
+ {isLogin ? (
+ addToFavorites(result)}
+ src={
+ result.isLike
+ ? "/icon/FilledStar.svg"
+ : "/icon/BlankStar.svg"
+ }
+ alt={result.isLike ? "filledstar" : "blankstar"}
+ $hover="hover"
+ />
+ ) : (
+ <>
+ )}
+
+ ))}
+
+ )}
+
+ 종목 검색
+
+ )}
+
+ );
+};
+
+const SearchContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ color: #000;
+ text-align: center;
+ font-size: 22px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ width: 100%;
+`;
+
+const SearchWrapper = styled.label`
+ position: relative;
+ display: flex;
+ width: 100%;
+ padding: 10px;
+ height: 44px;
+ background-color: #f3f3f3;
+`;
+
+const Img = styled.img`
+ position: absolute;
+ top: 15.2px;
+ left: 18px;
+ color: grey;
+ width: 15px;
+`;
+
+const SearchInput = styled.input`
+ width: 85%;
+ padding-left: 30px;
+ font-size: 15px;
+ border: none;
+ background-color: #f3f3f3;
+`;
+
+const SearchClearBtn = styled.button`
+ position: absolute;
+ right: 50px;
+ top: 14px;
+
+ border: none;
+ background: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+`;
+
+const SearchOutBtn = styled.button`
+ width: 17%;
+ margin-left: 5%;
+ border: none;
+ background: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+`;
+
+const SearchDiv = styled.div`
+ font-size: 18px;
+ width: 100%;
+ padding: 10px 30px;
+ height: 44px;
+
+ &:hover {
+ background-color: #f3f3f3;
+ }
+`;
+
+const SearchResults = styled.ul`
+ position: relative;
+ width: 100%;
+ padding-left: 0;
+ list-style: none;
+ max-height: calc(100vh - 151px);
+ height: calc(100vh - 151px);
+ overflow: auto;
+ padding-bottom: 5px;
+ box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25);
+ background-color: white;
+ z-index: 98;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+`;
+
+const SearchResult = styled.li`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 10px 10px;
+ text-align: left;
+ min-height: 60px;
+
+ cursor: pointer;
+ &:hover {
+ background-color: #f0f0f0;
+ }
+`;
+
+const StockDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ width: 100%;
+`;
+const StockName = styled.div`
+ color: #000;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ word-break: break-all;
+`;
+
+const RowDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ color: #8c8c8c;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
+`;
+
+const StarImg = styled.img`
+ &:hover {
+ transform: ${(props) =>
+ props.$hover == "hover" ? `scale(1.5)` : "scale(1)"};
+ }
+`;
+
+const StockCode = styled.div`
+ margin-right: 3px;
+`;
+
+const StockIndex = styled.div``;
+
+export default SearchStock;
diff --git a/src/components/invest/left-bar/MyStockList/StockItem.jsx b/src/components/invest/left-bar/MyStockList/StockItem.jsx
new file mode 100644
index 0000000..6d93aca
--- /dev/null
+++ b/src/components/invest/left-bar/MyStockList/StockItem.jsx
@@ -0,0 +1,125 @@
+import React from "react";
+import styled from "styled-components";
+import { getLogoFileName, onErrorImg } from "../../../../util/getLogoFileName";
+import { getCookie } from "../../../../lib/apis/cookie";
+import { useDispatch } from "react-redux";
+import { setClickCompany } from "../../../../store/reducers/Chart/clickCompany";
+
+const StockItem = ({ myFavoriteArr, addToFavorites }) => {
+ const dispatch = useDispatch();
+ const isLogin = !!getCookie("token");
+ return (
+
+ {isLogin &&
+ myFavoriteArr?.map((item, idx) => (
+ {
+ dispatch(setClickCompany(item));
+ }}
+ >
+
+
+
+
+ {item.name}
+
+ {item.code}
+ {item.market}
+
+
+ addToFavorites(item)}
+ src="/icon/FilledStar.svg"
+ alt="filledstar"
+ $hover="hover"
+ />
+
+ ))}
+
+ );
+};
+
+const MyListContainer = styled.div`
+ overflow: auto;
+ height: calc(100vh - 145px);
+ padding-bottom: 5px;
+ background-color: white;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+`;
+
+const MyListDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 10px 10px;
+ text-align: left;
+ min-height: 60px;
+ width: 249px;
+ cursor: pointer;
+ &:hover {
+ background-color: #f0f0f0;
+ }
+`;
+
+const ImgDiv = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 30px;
+ margin: 0px 10px;
+`;
+
+const StockDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ width: 100%;
+`;
+const StockName = styled.div`
+ color: #000;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ word-break: break-all;
+`;
+
+const RowDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ color: #8c8c8c;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
+`;
+
+const StockCode = styled.div`
+ margin-right: 3px;
+`;
+
+const StockIndex = styled.div``;
+
+const StarImg = styled.img`
+ &:hover {
+ transform: ${(props) =>
+ props.$hover == "hover" ? `scale(1.5)` : "scale(1)"};
+ }
+`;
+
+export default StockItem;
diff --git a/src/components/invest/right-bar/OrderHistory/CancleIcon.jsx b/src/components/invest/right-bar/OrderHistory/CancleIcon.jsx
new file mode 100644
index 0000000..9b84273
--- /dev/null
+++ b/src/components/invest/right-bar/OrderHistory/CancleIcon.jsx
@@ -0,0 +1,24 @@
+const CancleIcon = () => {
+ return (
+
+ ×
+
+ );
+};
+
+export default CancleIcon;
diff --git a/src/components/invest/right-bar/OrderHistory/NewIcon.jsx b/src/components/invest/right-bar/OrderHistory/NewIcon.jsx
new file mode 100644
index 0000000..35eb831
--- /dev/null
+++ b/src/components/invest/right-bar/OrderHistory/NewIcon.jsx
@@ -0,0 +1,25 @@
+const NewIcon = () => {
+ return (
+
+ N
+
+ );
+};
+
+export default NewIcon;
diff --git a/src/components/invest/right-bar/OrderHistory/OrderFilledItem.jsx b/src/components/invest/right-bar/OrderHistory/OrderFilledItem.jsx
new file mode 100644
index 0000000..403bbdb
--- /dev/null
+++ b/src/components/invest/right-bar/OrderHistory/OrderFilledItem.jsx
@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+import { postOrder } from "../../../../lib/apis/feed";
+
+const OrderFilledItem = ({ order, name, userId }) => {
+ const [isHovered, setIsHovered] = useState(false);
+ const [date, time] = order.time.split(" ");
+ const formattedDate = date.replace(/^\d{4}-/, "");
+
+ const handlePostButton = () => {
+ const isConfirmed = window.confirm("주문 내역을 공유하시겠습니까?");
+
+ if (isConfirmed) {
+ postOrder(userId, order.ownedShare, name, order.buyOrSell, order.quantity)
+ .then(() => {
+ window.alert("주문 내역이 공유되었습니다. 피드를 확인해주세요!");
+ })
+ .catch((error) => {
+ console.error("주문 내역 공유 오류:", error);
+ window.alert("주문 내역을 공유하는 동안 오류가 발생했습니다.");
+ });
+ }
+ };
+
+ return (
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
+ {formattedDate}
+
+ {time}
+
+
+
+
+
{name}
+
+
+
+ {order.buyOrSell === "buy" ? "매수" : "매도"}
+
+
{order.price.toLocaleString()}원
+
·
+
{order.quantity}주
+
+
+
+
+
+ {(order.price * order.quantity).toLocaleString()}원
+
+
+
+
+
+
+ {refreshTime} 기준
+
+
+
+
+
+
+ 미체결
+
+ {reservedHistory.length !== 0 ? (
+
+ {reservedHistory.map((order) => (
+
+ ))}
+
+ ) : (
+
+ 미체결 내역이 없습니다.
+
+ )}
+
+
+ 체결
+
+
+ {uniqueCompletedHistory?.length !== 0 ? (
+
+ {uniqueCompletedHistory?.map((order) => (
+
+ ))}
+
+ ) : (
+
+ 체결 내역이 없습니다.
+
+ )}
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
+
+
+
+
{name}
+
+
+
+ {order.buyOrSell === "buy" ? "매수" : "매도"}
+
+
{order?.price?.toLocaleString()}원
+
·
+
{order.quantity}주
+
+
+
+
+
onClick(type)}
+ style={{
+ backgroundColor: selectedType === type ? "#FFE3D7" : "#F5F5F5",
+ padding: "0.3rem 0.6rem",
+ borderRadius:
+ type === "지정가" ? "0.3rem 0 0 0.3rem" : "0 0.3rem 0.3rem 0",
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ alignItems: "center",
+ fontSize: "0.9rem",
+ cursor: "pointer",
+ }}
+ >
+ {type}
+
+ );
+};
+
+export default OrderTypeButton;
diff --git a/src/components/invest/right-bar/OrderManagement/Button/TradingInputButton.jsx b/src/components/invest/right-bar/OrderManagement/Button/TradingInputButton.jsx
new file mode 100644
index 0000000..139dc2c
--- /dev/null
+++ b/src/components/invest/right-bar/OrderManagement/Button/TradingInputButton.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+const TradingInputButton = ({ onClick, children, borderRadius, disabled }) => {
+ return (
+
+ );
+};
+
+export default TradingInputButton;
diff --git a/src/components/invest/right-bar/OrderManagement/Modal/ErrorOrderModal.jsx b/src/components/invest/right-bar/OrderManagement/Modal/ErrorOrderModal.jsx
new file mode 100644
index 0000000..cd1a33c
--- /dev/null
+++ b/src/components/invest/right-bar/OrderManagement/Modal/ErrorOrderModal.jsx
@@ -0,0 +1,35 @@
+import { Modal, Button } from "react-bootstrap";
+
+const ErrorOrderModal = ({ isOpen, onClose, content }) => {
+ return (
+
+
+ {content}
+
+
+
+ );
+};
+
+export default ErrorOrderModal;
diff --git a/src/components/invest/right-bar/OrderManagement/Modal/OrderModal.jsx b/src/components/invest/right-bar/OrderManagement/Modal/OrderModal.jsx
new file mode 100644
index 0000000..e98f189
--- /dev/null
+++ b/src/components/invest/right-bar/OrderManagement/Modal/OrderModal.jsx
@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from "react";
+import { postOrderStock } from "../../../../../lib/apis/order.jsx";
+import { useDispatch, useSelector } from "react-redux";
+import { joinRoom } from "../../../../../store/webSocket/nowPrice.js";
+import {
+ getLogoFileName,
+ onErrorImg,
+} from "../../../../../util/getLogoFileName.jsx";
+import { setIsNew } from "../../../../../store/reducers/Trading/trading.jsx";
+import { Modal } from "react-bootstrap";
+
+const OrderModal = ({ isOpen, onClose, userOrderType, price, quantity }) => {
+ const company = useSelector((state) => state.company.data[1]);
+ const user = useSelector((state) => state.user.user);
+ const dispatch = useDispatch();
+
+ const handleOrderConfirmation = async () => {
+ await postOrderStock(
+ company.code,
+ userOrderType === "매수" ? "buy" : "sell",
+ price,
+ quantity,
+ user.id
+ );
+ dispatch(setIsNew(true));
+ joinRoom(company.code);
+ onClose();
+ };
+
+ return (
+
+
+
+
+
+
{company.name}
+
+ {userOrderType}
+
+
+
+
+
주문단가
+
+
+ {price !== null ? parseInt(price).toLocaleString() : ""}
+
+
원
+
+
+
+
+
+
+
+
+
총 주문금액
+
+
{(price * quantity).toLocaleString()}
+
원
+
+
+
+
+
+
+
+
+ );
+};
+
+export default OrderModal;
diff --git a/src/components/invest/right-bar/OrderManagement/OrderBook.css b/src/components/invest/right-bar/OrderManagement/OrderBook.css
new file mode 100644
index 0000000..561b3db
--- /dev/null
+++ b/src/components/invest/right-bar/OrderManagement/OrderBook.css
@@ -0,0 +1,27 @@
+.selected-type-container {
+ position: relative; /* 상대적 위치 설정 */
+ display: inline-block; /* 선택 상자와 텍스트를 인라인 요소로 표시 */
+}
+
+.selected-type-animation {
+ position: absolute; /* 절대적 위치 설정 */
+ top: -25px; /* 텍스트가 상자 위로 올라가도록 설정 */
+ left: 0;
+ width: 50px; /* 선택 상자의 너비에 맞게 조정하세요 */
+ height: 25px; /* 선택 상자의 높이에 맞게 조정하세요 */
+ background-color: rgba(255, 227, 215, 0.5); /* 선택 상자의 투명도 추가 */
+ transition: left 0.5s ease;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 0.9rem; /* 선택 상자의 텍스트 크기 설정 */
+}
+
+.selected-type-animation.limit {
+ left: 54px; /* 지정가 선택 시 위치 */
+ border-radius: 0.3rem;
+}
+
+.selected-type-animation.market {
+ left: 100px; /* 시장가 선택 시 위치 */
+}
diff --git a/src/components/invest/right-bar/OrderManagement/OrderBook.jsx b/src/components/invest/right-bar/OrderManagement/OrderBook.jsx
new file mode 100644
index 0000000..bc7e210
--- /dev/null
+++ b/src/components/invest/right-bar/OrderManagement/OrderBook.jsx
@@ -0,0 +1,305 @@
+import React, { useState, useEffect } from "react";
+import OrderModal from "./Modal/OrderModal";
+import ErrorOrderModal from "./Modal/ErrorOrderModal";
+import OrderInput from "./OrderInput";
+import OrderTypeButton from "./Button/OrderTypeButton";
+import OrderBuySellButton from "./Button/OrderBuySellButton";
+import { useDispatch, useSelector } from "react-redux";
+import { useWebSocket } from "../../../../lib/hooks/useWebSocket";
+import {
+ setSelectedPrice,
+ setOrderType,
+ setSelectedQuantity,
+ increaseSelectedQuantity,
+ decreaseSelectedQuantity,
+} from "../../../../store/reducers/Trading/trading";
+import { getBalance, getHoldingQuantity } from "../../../../lib/apis/holding";
+
+const OrderBook = () => {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
+ const [balance, setBalance] = useState(0); // 잔고
+ const [maxQuantity, setMaxQuantity] = useState(0);
+ const [selectedType, setSelectedType] = useState("지정가"); // 지정가, 시장가
+ const { askPrice, nowPrice, ready } = useWebSocket();
+ const [content, setContent] = useState("");
+
+ const dispatch = useDispatch();
+ const { selectedPrice, selectedTab, orderType, selectedQuantity } =
+ useSelector((state) => state.trading);
+ const user = useSelector((state) => state.user.user);
+ const company = useSelector((state) => state.company.data[1]);
+
+ const openModal = () => setIsModalOpen(true);
+ const closeModal = () => setIsModalOpen(false);
+ const openErrorModal = (content) => {
+ setContent(content);
+ setIsErrorModalOpen(true);
+ };
+ const closeErrorModal = () => setIsErrorModalOpen(false);
+
+ const handleTypeChange = (type) => {
+ setSelectedType(type);
+ if (type === "시장가") {
+ dispatch(setSelectedQuantity(0));
+ dispatch(setSelectedPrice(0));
+ dispatch(setOrderType("시장가"));
+ } else {
+ dispatch(setSelectedQuantity(0));
+ dispatch(setSelectedPrice(nowPrice?.message?.close));
+ dispatch(setOrderType("지정가"));
+ }
+ };
+
+ const increasePrice = () => {
+ const priceDiff =
+ parseInt(askPrice?.message?.sellPrice[1]) -
+ parseInt(askPrice?.message?.sellPrice[0]);
+ dispatch(setSelectedPrice(parseInt(selectedPrice) + priceDiff));
+ };
+
+ const decreasePrice = () => {
+ const priceDiff =
+ parseFloat(askPrice.message.sellPrice[1]) -
+ parseFloat(askPrice.message.sellPrice[0]);
+ const newPrice = selectedPrice - priceDiff;
+ dispatch(setSelectedPrice(newPrice < 0 ? 0 : newPrice));
+ };
+
+ const increaseQuantity = () => {
+ dispatch(increaseSelectedQuantity());
+ };
+
+ const decreaseQuantity = () => {
+ dispatch(decreaseSelectedQuantity());
+ };
+
+ useEffect(() => {
+ const calculateMaxQuantity = async () => {
+ if (selectedTab === "매수") {
+ if (selectedType === "지정가") {
+ // 지정가
+ return Math.floor(balance / selectedPrice).toLocaleString();
+ } else {
+ // 시장가
+ return Math.floor(
+ parseInt(balance) / askPrice?.message?.sellPrice[0]
+ ).toLocaleString();
+ }
+ } else {
+ if (!user || Object.keys(user).length === 0) {
+ return "0";
+ } else {
+ const quantity = await getHoldingQuantity(user.id, company.code);
+ return parseInt(quantity).toLocaleString();
+ }
+ }
+ };
+
+ calculateMaxQuantity()
+ .then((result) => {
+ setMaxQuantity(result);
+ })
+ .catch((error) => {
+ console.error("Error calculating max quantity:", error);
+ });
+ }, [selectedTab, selectedType, balance, askPrice, user, company]);
+
+ useEffect(() => {
+ setSelectedType("지정가");
+ }, [user]);
+
+ useEffect(() => {
+ dispatch(setSelectedPrice(nowPrice?.message?.close));
+ }, [ready]);
+
+ useEffect(() => {
+ const fetchBalance = async () => {
+ if (user && Object.keys(user).length !== 0) {
+ const balance = await getBalance(user.id);
+ setBalance(parseInt(balance));
+ } else {
+ setBalance(0);
+ }
+ };
+
+ fetchBalance();
+ }, [isModalOpen, user]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
가격
+
+ dispatch(
+ setSelectedPrice(
+ e.target.value === "" ? 0 : parseFloat(e.target.value)
+ )
+ )
+ }
+ increase={increasePrice}
+ decrease={decreasePrice}
+ disabled={orderType === "시장가" ? true : false}
+ />
+
+
+
+
+
수량
+
+ 최대
+
+ {maxQuantity}
+
+ 주
+
+
+
+ dispatch(
+ setSelectedQuantity(
+ e.target.value === "" ? 0 : parseFloat(e.target.value)
+ )
+ )
+ }
+ increase={increaseQuantity}
+ decrease={decreaseQuantity}
+ />
+
+
+
+ {selectedTab === "매수" ? (
+
+
최대
+
+ {balance.toLocaleString()}
+
+
원
+
+ ) : null}
+
+
+ 주문총액
+
+
+
{(selectedPrice * selectedQuantity).toLocaleString()}
+
원
+
+
+
+
+
+
+
+
+ {label}
+
+
+
+ ▲
+
+
+ ▼
+
+
+
+
+ {askPrice?.message?.sellPrice
+ .map((price, index) => (
+
+ ))
+ .reverse()}
+
+
+
+ {askPrice?.message?.buyPrice.map((price, index) => (
+
+ ))}
+
+
{
+ onPriceSelect(price);
+ }}
+ style={{
+ width: "150px",
+ height: "2.3rem",
+ backgroundColor: backgroundColor,
+ marginBottom: "0.15rem",
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "space-between",
+ padding: "0 1rem",
+ border: price === nowPrice ? "1px solid black" : "none",
+ position: "relative",
+ cursor: "pointer",
+ }}
+ >
+ {isSelected && (
+
+ )}
+ {price !== "" && (
+ <>
+
{price.toLocaleString()}
+
+ {amount.toLocaleString()}
+
+
+ )}
+
+
+ {item.stbd_nm}
+
+
+ );
+}
+
+const RankDiv = styled.div`
+ background-color: ${(props) =>
+ props.num % 2 ? "rgba(255, 227, 215, 0.4)" : "rgba(0, 0, 0, 0.03)"};
+ display: flex;
+ align-items: center;
+ padding: 13px 0 13px 20px;
+ gap: 10px;
+ box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.05);
+ border-radius: 10px;
+ margin-bottom: 8px;
+`;
+
+const RankFont = styled.span`
+ font-size: 16px;
+ font-weight: 700;
+`;
+
+const CompanyLogo = styled.img`
+ width: 35px;
+ height: 35px;
+ border-radius: 999px;
+ margin-right: 10px;
+`;
diff --git a/src/components/side-bar/SideNavbar.jsx b/src/components/side-bar/SideNavbar.jsx
new file mode 100644
index 0000000..381b881
--- /dev/null
+++ b/src/components/side-bar/SideNavbar.jsx
@@ -0,0 +1,129 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import styled from "styled-components";
+
+const SideNavbar = () => {
+ const location = useLocation();
+
+ return (
+
+ );
+};
+
+const Nav = styled.nav`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ /* z-index: 1000; */
+ height: 62px;
+ border-top: 1px solid #e2e2e2;
+ img {
+ width: 22px;
+ }
+
+ ul {
+ list-style: none;
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ padding-left: 0px;
+ margin-bottom: 0px;
+ }
+
+ li {
+ flex: 6;
+ }
+
+ a {
+ text-decoration: none;
+ color: #4e5968;
+ font-size: 12px;
+
+ &.active {
+ color: #ff8049;
+ }
+ }
+`;
+
+export default SideNavbar;
diff --git a/src/components/side-bar/webSocketTest.jsx b/src/components/side-bar/webSocketTest.jsx
new file mode 100644
index 0000000..9e48920
--- /dev/null
+++ b/src/components/side-bar/webSocketTest.jsx
@@ -0,0 +1,80 @@
+import React, { useState, useEffect, useRef } from "react";
+import {
+ joinRoom,
+ leaveRoom,
+ subscribeAskPrice,
+ subscribeNowPrice,
+} from "../../store/webSocket/nowPrice"; // 경로는 실제 프로젝트 구조에 따라 조정해주세요.
+
+const WebSocketTest = () => {
+ const containerRef = useRef(null);
+ const [nowPrice, setNowPrice] = useState(null);
+ const [askPrice, setAskPrice] = useState(null);
+ const [stockCode, setStockCode] = useState("");
+
+ useEffect(() => {
+ const settingNowPrice = subscribeNowPrice((nowPriceMessage) => {
+ setNowPrice(nowPriceMessage);
+ });
+
+ const settingAskPrice = subscribeAskPrice((askPriceMessage) => {
+ setAskPrice(askPriceMessage);
+ });
+
+ return () => {
+ settingNowPrice();
+ settingAskPrice();
+ };
+ }, [nowPrice, askPrice]);
+
+ useEffect(() => {
+ const adjustScroll = () => {
+ const container = containerRef.current;
+ if (container) {
+ const scrollTop = (container.scrollHeight - container.clientHeight) / 2;
+ container.scrollTop = scrollTop;
+ }
+ };
+
+ adjustScroll(); // 스크롤 조정
+ }, []);
+
+ // joinRoom 및 leaveRoom 함수는 여기에서 직접 호출합니다.
+
+ return (
+
+
setStockCode(e.target.value)}
+ placeholder="Enter stock code"
+ />
+
+
+
+
Real-time Data:
+ {nowPrice ? (
+
{JSON.stringify(nowPrice, null, 2)}
+ ) : (
+
데이터 없음
+ )}
+
+
+
Real-time Data2:
+ {askPrice ? (
+
{JSON.stringify(askPrice, null, 2)}
+ ) : (
+
데이터 없음
+ )}
+
+
+ StockMate
+
+
+ {error && 이메일 혹은 비밀번호가 옳지 않습니다.}
+
+ navigate("/")}>홈으로
+ |
+ navigate("/signup")}>회원가입
+
+
+ );
+};
+export default SignIn;
+
+const SigninContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ gap: 32px;
+
+ @media (max-width: 500px) {
+ transform: scale(0.8);
+ }
+`;
+
+const Form = styled.form`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 32px;
+`;
+
+const Label = styled.label`
+ display: flex;
+ align-items: center;
+ background: #f4f5f7;
+`;
+
+const StyledInput = styled.input`
+ width: 400px;
+ height: 60px;
+ background: #f4f5f7;
+ border: none;
+ box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.1);
+ font-size: 18px;
+ font-weight: 400;
+ padding: 0 30px;
+
+ &::placeholder {
+ color: rgba(160, 160, 160, 0.8);
+ }
+
+ &:focus {
+ outline: 2px solid #ffd4c2;
+ }
+`;
+
+const StyledButton = styled.button`
+ border-radius: 16px;
+ border: none;
+ background: #FFE3D7;
+ width: 404px;
+ height: 55px;
+ color: #000;
+ text-align: center;
+ font-size: 18px;
+ font-weight: 400;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+
+ &:hover {
+ background-color: #ffcfba;
+ }
+`;
+
+const NavDiv = styled.div`
+ color: #8b8b8b;
+ text-align: center;
+ font-weight: 400;
+ margin-top: 30px;
+
+ &:hover {
+ cursor: pointer;
+ color: #FF7D75;
+ }
+`;
+
+const LogoDiv = styled.div`
+ display: flex;
+ align-items: center;
+ font-size: 32px;
+ font-weight: 200;
+ gap: 10px;
+`;
+
+const ErrorFont = styled.span`
+ color: #ff3333;
+`;
diff --git a/src/routes/Auth/SignUp.jsx b/src/routes/Auth/SignUp.jsx
new file mode 100644
index 0000000..df3a533
--- /dev/null
+++ b/src/routes/Auth/SignUp.jsx
@@ -0,0 +1,228 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import LogoIcon from "../../../public/icon/logo.svg";
+import { useDispatch } from "react-redux";
+import { postSignup } from "../../store/reducers/User/user";
+import { Button, Modal } from "react-bootstrap";
+
+const SignUp = () => {
+ const [nickname, setNickname] = useState("");
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [passwordCheck, setPasswordCheck] = useState("");
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+
+ const [error1, setError1] = useState("");
+ const [error2, setError2] = useState("");
+
+ const [isAlert, setIsAlert] = useState(false);
+ const [alertModal, setAlertModal] = useState("");
+
+ const onSignup = (e) => {
+ e.preventDefault();
+ if (emailCheck(email)) {
+ setError1("유효한 이메일 형식으로 입력해주세요.");
+ setError2("");
+ } else if (password === passwordCheck) {
+ const data = {
+ email,
+ password,
+ nickname,
+ };
+ dispatch(postSignup(data)).then((res) => {
+ if (res.payload.status === 201) {
+ setIsAlert(true);
+ setAlertModal("회원가입이 완료되었습니다. \n 🎉 해당 계정의 계좌로 1억원이 지급되었습니다 🎉 \n 로그인을 해보세요!");
+ } else {
+ setIsAlert(true);
+ setAlertModal("해당 이메일은 이미 사용 중 입니다.");
+ }
+ });
+
+ setEmail("");
+ setPassword("");
+ setPasswordCheck("");
+ setNickname("");
+ setError1("");
+ setError2("");
+ } else {
+ setError2("비밀번호가 일치하지 않습니다.");
+ setPassword("");
+ setPasswordCheck("");
+ setError1("");
+ }
+ };
+
+ function emailCheck(email_address) {
+ const email_regex = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
+ return !email_regex.test(email_address);
+ }
+
+ return (
+
+
+
+ StockMate
+
+
+
+ navigate("/")}>홈으로
+ |
+ navigate("/signin")}>로그인
+
+
+ {/* Signup 모달 */}
+ setIsAlert(false)} centered>
+
+ {alertModal}
+
+
+
+
+
+
+ );
+};
+export default SignUp;
+
+const SignupContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ gap: 32px;
+
+ @media (max-width: 500px) {
+ transform: scale(0.8);
+ }
+`;
+
+const Form = styled.form`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 22px;
+`;
+
+const Label = styled.label`
+ display: flex;
+ align-items: center;
+ background: #f4f5f7;
+`;
+
+const StyledInput = styled.input`
+ width: 400px;
+ height: 60px;
+ background: #f4f5f7;
+ box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.1);
+ border: none;
+ font-size: 18px;
+ font-weight: 400;
+ padding: 0 30px;
+
+ &::placeholder {
+ color: rgba(160, 160, 160, 0.8);
+ }
+
+ &:focus {
+ outline: 2px solid #ffd4c2;
+ }
+`;
+
+const StyledButton = styled.button`
+ border-radius: 16px;
+ border: none;
+ background: #FFE3D7;
+ width: 404px;
+ height: 55px;
+ color: #000;
+ text-align: center;
+ font-size: 18px;
+ font-weight: 400;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+
+ &:hover {
+ background-color: #ffcfba;
+ }
+`;
+
+const NavDiv = styled.div`
+ color: #8b8b8b;
+ text-align: center;
+ font-weight: 400;
+ margin-top: 30px;
+
+ &:hover {
+ cursor: pointer;
+ color: #FF7D75;
+ }
+`;
+
+const LogoDiv = styled.div`
+ display: flex;
+ align-items: center;
+ font-size: 32px;
+ font-weight: 200;
+ gap: 10px;
+`;
+
+const Error = styled.span`
+ color: #ff3333;
+ font-size: 13px;
+`;
diff --git a/src/routes/Feed/FeedPage.jsx b/src/routes/Feed/FeedPage.jsx
new file mode 100644
index 0000000..2d9a864
--- /dev/null
+++ b/src/routes/Feed/FeedPage.jsx
@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import * as S from "../../style/GlobalStyle";
+import FeedWriting from "~/components/Feed/FeedWriting";
+import Feed from "../../components/Feed/FeedShow/Feed";
+import { useLocation, useNavigate } from "react-router-dom";
+import { getCookie } from "../../lib/apis/cookie";
+import LogoIcon from "../../../public/icon/logo.svg";
+
+const FeedPage = () => {
+ const [isWrite, setIsWrite] = useState(false);
+ const location = useLocation();
+ const path = location.pathname;
+ const isLogin = !!getCookie("token");
+ const navigate = useNavigate();
+ const write = () => {
+ setIsWrite(true);
+ };
+
+ return (
+
+ {isLogin ? (
+ <>
+ {isWrite ? (
+
+ ) : (
+
+ 
+ 무슨 생각을 하고 계신가요?
+
+ )}
+
+
+
+
+ ) : (
+
+ navigate("/signin")} />
+ 로그인을 해주세요.
+
+ )}
+
+ );
+};
+
+const WritingContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ padding: 20px 35px;
+ gap: 15px;
+ cursor: pointer;
+ background-color: white;
+ height: 80px;
+ width: 100%;
+ margin-bottom: 5px;
+`;
+
+const InputDiv = styled.div`
+ width: 361px;
+ height: 40px;
+ border-radius: 20px;
+ background: #f3f3f3;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding-left: 22px;
+
+ color: #7e7e7e;
+ font-size: 15px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+const FeedContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+`;
+
+export default FeedPage;
diff --git a/src/routes/HotStock/HotStockPage.jsx b/src/routes/HotStock/HotStockPage.jsx
new file mode 100644
index 0000000..ba6bd3d
--- /dev/null
+++ b/src/routes/HotStock/HotStockPage.jsx
@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import * as S from "../../style/GlobalStyle";
+import { useDispatch, useSelector } from "react-redux";
+import { getHotDatas, getPopularDatas } from "../../store/reducers/Hot/getStockInfo";
+import restart_Img from '../../../public/icon/restart.svg';
+import { PuffLoader } from "react-spinners";
+import PopularStock from "../../components/side-bar/PopularStock";
+
+export default function HotStockPage() {
+ const dispatch = useDispatch();
+
+ const popularData = useSelector((state) => state.hot.popularData);
+ const hotData = useSelector((state) => state.hot.hotData);
+ const loading = useSelector((state) => state.hot.loading);
+ const [selectNum, setSelectNum] = useState(1);
+
+ useEffect(() => {
+ dispatch(getPopularDatas());
+ dispatch(getHotDatas(selectNum));
+ }, [selectNum]);
+
+ return (
+
+
+ {/* 인기 주식 */}
+
+
+
+ 실시간 인기 주식
+
+
+ {popularData.length > 0 ? (
+ popularData.map((item, idx) =>
+
+ )
+ ) : (
+
+ dispatch(getPopularDatas())}
+ />
+
+ )}
+
+
+
+ 핫이슈 종목
+
+
+
+ setSelectNum(1)}>
+ 거래량
+
+ setSelectNum(2)}>
+ 주가상승률
+
+ setSelectNum(3)}>
+ 외국인순매수
+
+ setSelectNum(4)}>
+ 기관순매수
+
+
+ {loading ? (
+
+ ) : (
+ hotData.length > 0 ? (
+ hotData.map((item, idx) =>
+
+ )
+ ) : (
+
+ 조건에 맞는 데이터가 없습니다.
+
+ )
+ )}
+
+ {eccontent?.map((item, idx) =>
+ {decode(item)}
+ )}
+
+
+
+
+ {strategy.corporateAnalysis?.bbs_name}
+
+
+ {strategy.corporateAnalysis?.title}.pdf
+
+ {corsummary?.split('\n').map((item, idx) =>
+
+ •
+ {decode(item)}
+
+ )}
+
+ {corcontent?.map((item, idx) =>
+ {decode(item)}
+ )}
+
+
+ )
+ )}
+
+
+ )
+}
+
+const Container = styled.div`
+ background-color: #FFF;
+ overflow-y: scroll;
+ height: 100vh;
+
+ &::-webkit-scrollbar {
+ width: 10px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: 20px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 20px;
+ }
+`
+
+const Content = styled.div`
+ padding: 0 0 20px 0;
+`
+
+const MainDiv = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 20px 15px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+`
+
+const IconImg = styled.img`
+ width: 30px;
+ height: 30px;
+`
+
+const MainFont = styled.div`
+ font-weight: 600;
+ font-size: 18px;
+`
+
+const FileDiv = styled.a`
+ color: #FF7D75;
+`
+
+const FileFont = styled.div`
+ color: #FF7D75;
+ font-weight: 600;
+ padding: 20px;
+`
+
+const SubDiv = styled.div`
+ display: flex;
+ align-items: center;
+ padding: 8px 20px;
+ gap: 10px;
+`
+
+const SubFont = styled.div`
+ // word-break: keep-all;
+ font-weight: 600;
+ font-size: 15px;
+`
+
+const ContentFont = styled.div`
+ // box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
+ white-space: pre-line;
+ padding: 10px 25px;
+ font-size: 15px;
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.8)
+`
\ No newline at end of file
diff --git a/src/routes/MarketInfo/MarketInfoPage.jsx b/src/routes/MarketInfo/MarketInfoPage.jsx
new file mode 100644
index 0000000..a0113ed
--- /dev/null
+++ b/src/routes/MarketInfo/MarketInfoPage.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+import styled from "styled-components";
+import * as S from "../../style/GlobalStyle";
+
+export default function MarketInfoPage() {
+ return MarketInfoPage;
+}
diff --git a/src/routes/MyPage/MyPage.jsx b/src/routes/MyPage/MyPage.jsx
new file mode 100644
index 0000000..b28d0ab
--- /dev/null
+++ b/src/routes/MyPage/MyPage.jsx
@@ -0,0 +1,235 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import * as S from "../../style/GlobalStyle";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchMyPageFeedCount } from "../../store/reducers/Feed/feed";
+import {
+ fetchFriendCount,
+ fetchFriends,
+ fetchPendingFriends,
+} from "../../store/reducers/User/friend";
+import Feed from "../../components/Feed/FeedShow/Feed";
+import FriendList from "../../components/MyPage/FriendList";
+import FriendSearch from "../../components/MyPage/FriendSearch";
+import MyAccount from "../../components/MyAccount/MyAccount";
+import LogoIcon from "../../../public/icon/logo.svg";
+import { useLocation, useNavigate } from "react-router-dom";
+import { getCookie } from "../../lib/apis/cookie";
+
+export default function MyPage() {
+ const isLogin = !!getCookie("token");
+ const [selectedTab, setSelectedTab] = useState("내 피드");
+
+ const handleTabClick = (tab) => {
+ setSelectedTab(tab);
+ };
+ const location = useLocation();
+ const path = location.pathname;
+ const dispatch = useDispatch();
+
+ useEffect(() => {
+ dispatch(fetchMyPageFeedCount(userId));
+ dispatch(fetchFriendCount(userId));
+ dispatch(fetchFriends());
+ dispatch(fetchPendingFriends());
+ }, []);
+
+ const pendingFriends = useSelector((state) => state.friend.pendingFriends);
+ const userId = useSelector((state) => state.user.user.id);
+ const userNickname = useSelector((state) => state.user.user.nickname);
+ const feedCount = useSelector((state) => state.feed.mypageFeedCount);
+ const friendCount = useSelector((state) => state.friend.friends);
+ // const friendCounts = useSelector((state) => state.friend.friendCount);
+
+ useEffect(() => {
+ dispatch(fetchFriendCount(userId));
+ }, [friendCount]);
+
+ const [showDetail, setShowDetail] = useState(false);
+
+ const toggleDetail = () => {
+ setShowDetail(!showDetail);
+ };
+
+ const [showFriendSearch, setShowFriendSearch] = useState(false);
+
+ const toggleFriendSearch = () => {
+ setShowFriendSearch(!showFriendSearch);
+ };
+
+ const navigate = useNavigate();
+ return (
+
+ {isLogin ? (
+ <>
+
+
handleTabClick("내 피드")}
+ >
+ 내 피드
+
+
handleTabClick("내 계좌")}
+ >
+ 내 계좌
+
+
+ {userNickname}
+
+
+ 게시물
+ {feedCount}
+
+
+ {pendingFriends.length != 0 && (
+ 
+ )}
+ 친구
+ {friendCount?.length}
+
+
+ {showDetail ? : <>}
+
+
+
+ {selectedTab === "내 피드" ? (
+
+ ) : (
+ <>
+ )}
+ {selectedTab === "내 계좌" ? : <>}
+
+
+ ) : (
+
+ navigate("/signin")} />
+ 로그인을 해주세요.
+
+ )}
+
+ );
+}
+
+const UserContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ padding: 35px 40px;
+ justify-content: space-around;
+ align-items: center;
+ background-color: white;
+ margin-bottom: 5px;
+`;
+
+const FriendDiv = styled.div`
+ position: absolute;
+ top: 45px;
+ right: 30px;
+ color: #a2a2a2;
+ font-size: smaller;
+ cursor: pointer;
+
+ &:hover {
+ color: #525252;
+ }
+`;
+
+const ImgDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ word-break: break-all;
+`;
+
+const NicknameDiv = styled.div`
+ font-size: 17px;
+ max-width: 98px;
+`;
+
+const ColumnDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 60px;
+ font-size: 18px;
+
+ cursor: ${(props) => props.$pointer || "default"};
+`;
+
+const ItemDiv = styled.div``;
+
+const NumDiv = styled.div``;
+
+const ContentContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: auto;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+`;
+
+const DetailContainer = styled.div`
+ width: 400px;
+ height: 100%;
+ background-color: #fff;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+ transform: translateX(${(props) => (props.$showdetail ? "0" : "100%")});
+ transition: transform 0.3s ease;
+ position: absolute;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ z-index: 999;
+`;
diff --git a/src/routes/SideLayout.jsx b/src/routes/SideLayout.jsx
new file mode 100644
index 0000000..d881550
--- /dev/null
+++ b/src/routes/SideLayout.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import styled from "styled-components";
+import SideNavbar from "~/components/side-bar/SideNavbar";
+const SideLayout = () => {
+ return (
+
+
+
+
+ );
+};
+
+const Container = styled.section`
+ display: flex;
+ flex-direction: column;
+ width: 400px;
+ position: relative;
+ z-index: 999;
+ background-color: white;
+ border-left: 1px solid #e2e2e2;
+`;
+export default SideLayout;
diff --git a/src/routes/Trading/TradingPage.jsx b/src/routes/Trading/TradingPage.jsx
new file mode 100644
index 0000000..5c88841
--- /dev/null
+++ b/src/routes/Trading/TradingPage.jsx
@@ -0,0 +1,165 @@
+import React, { useState, useEffect } from "react";
+import PriceBook from "../../components/invest/right-bar/OrderManagement/PriceBook";
+import OrderBook from "../../components/invest/right-bar/OrderManagement/OrderBook";
+import OrderList from "../../components/invest/right-bar/OrderHistory/OrderHistoryList";
+import NewIcon from "../../components/invest/right-bar/OrderHistory/NewIcon";
+import { useDispatch, useSelector } from "react-redux";
+import {
+ setSelectedTab,
+ setSelectedPrice,
+ setSelectedQuantity,
+ setIsNew,
+} from "../../store/reducers/Trading/trading";
+import { useWebSocket } from "../../lib/hooks/useWebSocket";
+import { getLogoFileName, onErrorImg } from "../../util/getLogoFileName";
+
+export default function TradingPage() {
+ const dispatch = useDispatch();
+ const { selectedTab, orderType, isNew } = useSelector(
+ (state) => state.trading
+ );
+ const { nowPrice } = useWebSocket();
+ const company = useSelector((state) => state.company.data[1]);
+
+ const handleTabClick = (tab) => {
+ dispatch(setSelectedTab(tab));
+ dispatch(setSelectedQuantity(0));
+ dispatch(setSelectedPrice(nowPrice?.message?.close));
+
+ if (orderType === "지정가") {
+ dispatch(setSelectedPrice(nowPrice?.message?.close));
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
{company.name}
+
+
+ {company.code}
+
+ 코스피
+
+
+
+
+
handleTabClick("매수")}
+ >
+ 매수
+
+
handleTabClick("매도")}
+ >
+ 매도
+
+
{
+ handleTabClick("주문내역");
+ dispatch(setIsNew(false));
+ }}
+ >
+ 주문내역
+ {isNew && }
+
+
+ {selectedTab === "매수" || selectedTab === "매도" ? (
+ <>
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+ {messages.map((message, index) => (
+
+
+ {message.sender === 'bot' && (
+
+ )}
+
+
+ {message.text}
+
+
+ ))}
+ {isWaitingForResponse && (
+
+ )}
+
+
+
+
+
+ 활용 Tip💡 /설명 /가이드 /매수매도 /차트지표 /보조지표 /SNS 등의 커멘더키를 사용해보세요!
+
+ );
+}
+
+export default ChatBot;
diff --git a/src/routes/mainLayout.jsx b/src/routes/mainLayout.jsx
new file mode 100644
index 0000000..cdc1c28
--- /dev/null
+++ b/src/routes/mainLayout.jsx
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import { Outlet } from "react-router-dom";
+import MyNavbar from "../components/MyNavbar";
+import MainChart from "../components/invest/chart/MainChart";
+import MyStockList from "../components/invest/left-bar/MyStockList";
+import styled from "styled-components";
+import ChartIndicators from "../components/invest/left-bar/ChartIndicators";
+import Indicators from "../components/invest/left-bar/Indicators";
+
+export default function MainLayout() {
+ const [showIndicators, setShowIndicators] = useState(false);
+ const [showCharts, setShowCharts] = useState(false);
+
+ const toggleIndicators = () => {
+ setShowIndicators(!showIndicators);
+ setShowCharts(false);
+ };
+
+ const toggleCharts = () => {
+ setShowCharts(!showCharts);
+ setShowIndicators(false);
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+ {showCharts ? : <>}
+
+
+ {showIndicators ? (
+
+ ) : (
+ <>
+ )}
+
+
+
+
+
+
+
+ );
+}
+
+const Container = styled.div`
+ display: flex;
+ height: calc(100vh - 65px);
+ overflow: hidden;
+`;
+
+const LeftContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ width: fit-content;
+ height: 100%;
+ position: relative;
+ overflow: hidden;
+ box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+`;
+
+const ContentContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ transition: margin-left 0.3s ease;
+ z-index: 99;
+`;
+
+const Content = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+const ChartsContainer = styled.div`
+ width: 250px;
+ height: 100%;
+ background-color: #fff;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+ transform: translateX(${(props) => (props.$showcharts ? "0" : "-100%")});
+ transition: transform 0.3s ease;
+ position: absolute;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+`;
+
+const IndicatorsContainer = styled.div`
+ width: 250px;
+ height: 100%;
+ background-color: #fff;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+ transform: translateX(${(props) => (props.$showindicators ? "0" : "-100%")});
+ transition: transform 0.3s ease;
+ position: absolute;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+`;
diff --git a/src/service/commander.jsx b/src/service/commander.jsx
new file mode 100644
index 0000000..b8e3da6
--- /dev/null
+++ b/src/service/commander.jsx
@@ -0,0 +1,19 @@
+
+export function commander(prompt){
+ const text = prompt.slice(0,5);
+ if(text === '/가이드'){
+ return "다음은 stock mate 사이트 이용에 대한 기본적인 가이드 입니다. \n\n 1. 오른쪽 상단의 로그인 및 회원가입을 실행합니다. \n 2. 왼쪽 사이드 바의 검색을 통하여 종목을 선정합니다 \n 3. 선정한 종목의 주가 및 보조 지표를 확인합니다. \n 4. 오른쪽 사이드바의 매수/매도를 통하여 선택종목을 거래합니다."
+ }else if(text ==='/설명'){
+ return "안녕하세요? Stock mate 의 설명을 도와드릴 챗 메이트 에요. 저희는 주식투자가 어려운 주린이들이나 나만의 투자전략을 수립하고 싶은 분들께 도움을 드리고 있어요. 저희 stock mate 사이트는 크게 4가지 기능을 가지고 있어요. \n\n 1. 모의투자 기능 \n 저희는 모의투자 기능을 제공해요. 일명 교육비(?)라고 불리우는 초기 투자 비용을 절감하여 부담없이 투자해보실 수 있어요. 여러 지표나 핫 테마 등을 활용하여 '나의 투자 전략'을 수립하고, 검증해볼 수도 있죠. \n\n 2. 보조지표와 차트지표 \n 투자자 여러분은 보조지표와 투자지표를 활용하여 주식 데이터를 분석하고, 전략을 수립하실 수 있어요! 지표의 설정을 통해서 세부적인 가중치를 정할 수 있고, 어려우시면 기본값으로 진행해도 좋아요. \n\n 3. SNS 기능 \n 저희는 기본적인 sns기능을 제공해요. 투자자 여러분은 자신의 투자전략이나 수익률 등을 공유하고, 공유받을 수 있어요. 원하는 투자고수를 팔로우하여 전략을 공유받으세요! \n\n 4. chat bot 서비스 \n 바로 저 '챗 메이트' 기능이에요. 보조지표나 차트지표에 대해서 궁금하신점을 물어보시거나 커멘더키(/기능)를 활용해서 사이트 활용 방법을 손쉽게 배울 수 있어요. \n\n 그럼 즐거운 이용되시길 바랍니다 *^^*"
+ }else if(text === '/매수매도'){
+ return "매수와 매도는 오른쪽 사이드바에서 진행하실 수 있습니다. 매수는 종목 '구매', 매도는 종목 '판매' 라고 이해하셔도 됩니다. \n 선택한 종목의 호가와 실시간 거래가를 확인한 후, 매수 매도를 진행해주세요!"
+ }else if(text === '/차트지표'){
+ return "차트 지표는 차트 지표는 주가 또는 거래량 등의 데이터를 분석하여 시장의 흐름과 추세를 파악하는 데 도움을 주는 기술적 지표들을 말합니다. 주로 주가 차트에 함께 표시되어 사용되며, 주가의 움직임을 그래픽으로 표현하여 투자자들이 시장의 동향을 파악하고 결정을 내릴 때 유용하게 활용됩니다. \n\n 차트 위쪽의 차트지표를 클릭하면 현재 보고있는 종목의 차트지표를 제공합니다. \n 각 차트지표에 대한 설명이 궁금하시면 'ex) AD Line은 뭐에요?' 와 같이 질문해주세요."
+ }else if(text === '/보조지표'){
+ return "보조 지표는 주가 차트의 움직임을 분석하고 예측하기 위해 가격 데이터를 기반으로 계산된 보조적인 지표를 말합니다. 보조 지표는 가격 데이터의 변화에 대한 신호를 제공하고, 추세의 방향성, 강도, 변화 등을 확인하는 데 도움을 줍니다. \n\n 차트 위쪽의 보조지표를 클릭하면 현재 보고있는 종목의 보조지표를 제공합니다. \n 각 보조지표에 대한 설명이 궁금하시면 'ex) AD Line은 뭐에요?' 와 같이 질문해주세요."
+ }else if(text === '/sns' || text==='/SNS'){
+ return "SNS 기능은 투자 고수와 초보 등 다양한 투자자들을 연결해주는 소셜 네트워크 입니다. 자신의 투자 수익률과 투자 전략을 공유하고, 인플루언서에 도전해보세요! 마음에 드는 인플루언서를 팔로우 하여 투자 전략을 참고할 수 있습니다! \n\n 오른쪽 사이드바 하단의 '피드' 와 '마이페이지' 를 통하여 이용하실 수 있습니다. 투표나 게시글을 생성하여 여러 유저와의 소통도 가능합니다."
+ }else{
+ return "잘못된 커멘더 키 입니다. 하단의 커멘더 키를 확인하시거나, 질문사항을 등록해주세요."
+ }
+}
diff --git a/src/service/taLib.js b/src/service/taLib.js
new file mode 100644
index 0000000..c820c32
--- /dev/null
+++ b/src/service/taLib.js
@@ -0,0 +1,878 @@
+import talib from 'talib';
+
+function processData(stockData){
+ let marketData = {open:[], high:[], low:[], close:[],volume:[]}
+ stockData.map(el=>{
+ marketData.open.push(el.open)
+ marketData.high.push(el.high)
+ marketData.low.push(el.low)
+ marketData.close.push(el.close)
+ marketData.volume.push(el.volume)
+ })
+ return marketData;
+}
+
+function SMA(stockData, lineTime){
+ const marketData = processData(stockData);
+
+ var indicatorParams = {
+ name: "SMA",
+ startIdx: 0,
+ endIdx: marketData.close.length - 1,
+ inReal: marketData.close,
+ optInTimePeriod: lineTime,
+ };
+
+ talib.execute(indicatorParams, function (err, result) {
+ if (err) {
+ console.error("Error:", err);
+ } else {
+ return result;
+ }
+ });
+}
+
+function WMA(stockData, lineTime){
+ const marketData = processData(stockData);
+ var indicatorParams = {
+ name: "WMA",
+ startIdx: 0,
+ endIdx: marketData.close.length - 1,
+ inReal: marketData.close,
+ optInTimePeriod: lineTime,
+ };
+ talib.execute(indicatorParams, function (err, result) {
+ if (err) {
+ console.error("Error:", err);
+ } else {
+ console.log(result);
+ return result;
+ }
+ });
+}
+
+function BBANDS(stockData, lineTime, stdev){
+ const marketData = processData(stockData);
+ var indicatorParams = {
+ name: "BBANDS",
+ startIdx: 0,
+ endIdx: marketData.close.length - 1,
+ inReal: marketData.close,
+ optInTimePeriod: lineTime,
+ optInNbDevUp: stdev,
+ optInNbDevDn: stdev,
+ optInMAType: 0,
+ };
+ talib.execute(indicatorParams, function (err, result) {
+ if (err) {
+ console.error("Error:", err);
+ } else {
+ return result;
+ }
+ });
+}
+
+WMA(
+ [
+ {
+ "open": 60600,
+ "close": 60000,
+ "high": 60700,
+ "low": 59600,
+ "volume": 18251170,
+ "date": "20220809"
+ },
+ {
+ "open": 61400,
+ "close": 60800,
+ "high": 61400,
+ "low": 60600,
+ "volume": 11313150,
+ "date": "20220808"
+ },
+ {
+ "open": 61700,
+ "close": 61500,
+ "high": 61900,
+ "low": 61200,
+ "volume": 9567620,
+ "date": "20220805"
+ },
+ {
+ "open": 61700,
+ "close": 61500,
+ "high": 61800,
+ "low": 61200,
+ "volume": 9125439,
+ "date": "20220804"
+ },
+ {
+ "open": 61600,
+ "close": 61300,
+ "high": 61600,
+ "low": 61000,
+ "volume": 10053861,
+ "date": "20220803"
+ },
+ {
+ "open": 61200,
+ "close": 61700,
+ "high": 61900,
+ "low": 61000,
+ "volume": 13614895,
+ "date": "20220802"
+ },
+ {
+ "open": 61000,
+ "close": 61300,
+ "high": 61700,
+ "low": 60300,
+ "volume": 13154816,
+ "date": "20220801"
+ },
+ {
+ "open": 62400,
+ "close": 61400,
+ "high": 62600,
+ "low": 61300,
+ "volume": 15093120,
+ "date": "20220729"
+ },
+ {
+ "open": 62300,
+ "close": 61900,
+ "high": 62600,
+ "low": 61600,
+ "volume": 10745302,
+ "date": "20220728"
+ },
+ {
+ "open": 61300,
+ "close": 61800,
+ "high": 61900,
+ "low": 61200,
+ "volume": 7320997,
+ "date": "20220727"
+ },
+ {
+ "open": 60800,
+ "close": 61700,
+ "high": 61900,
+ "low": 60800,
+ "volume": 6597211,
+ "date": "20220726"
+ },
+ {
+ "open": 60900,
+ "close": 61100,
+ "high": 61900,
+ "low": 60800,
+ "volume": 9193681,
+ "date": "20220725"
+ },
+ {
+ "open": 61800,
+ "close": 61300,
+ "high": 62200,
+ "low": 61200,
+ "volume": 10261310,
+ "date": "20220722"
+ },
+ {
+ "open": 61100,
+ "close": 61800,
+ "high": 61900,
+ "low": 60700,
+ "volume": 12291374,
+ "date": "20220721"
+ },
+ {
+ "open": 61800,
+ "close": 60500,
+ "high": 62100,
+ "low": 60500,
+ "volume": 16782238,
+ "date": "20220720"
+ },
+ {
+ "open": 61400,
+ "close": 60900,
+ "high": 61500,
+ "low": 60200,
+ "volume": 15248261,
+ "date": "20220719"
+ },
+ {
+ "open": 60600,
+ "close": 61900,
+ "high": 62000,
+ "low": 60500,
+ "volume": 20832517,
+ "date": "20220718"
+ },
+ {
+ "open": 58400,
+ "close": 60000,
+ "high": 60000,
+ "low": 58100,
+ "volume": 18685583,
+ "date": "20220715"
+ },
+ {
+ "open": 57500,
+ "close": 57500,
+ "high": 58200,
+ "low": 57400,
+ "volume": 15067012,
+ "date": "20220714"
+ },
+ {
+ "open": 58300,
+ "close": 58000,
+ "high": 58600,
+ "low": 58000,
+ "volume": 10841315,
+ "date": "20220713"
+ },
+ {
+ "open": 58600,
+ "close": 58100,
+ "high": 58700,
+ "low": 58100,
+ "volume": 9336061,
+ "date": "20220712"
+ },
+ {
+ "open": 59300,
+ "close": 58800,
+ "high": 59600,
+ "low": 58700,
+ "volume": 13042624,
+ "date": "20220711"
+ },
+ {
+ "open": 58600,
+ "close": 58700,
+ "high": 59300,
+ "low": 58200,
+ "volume": 15339271,
+ "date": "20220708"
+ },
+ {
+ "open": 56400,
+ "close": 58200,
+ "high": 58700,
+ "low": 56300,
+ "volume": 21322833,
+ "date": "20220707"
+ },
+ {
+ "open": 57300,
+ "close": 56400,
+ "high": 57300,
+ "low": 56400,
+ "volume": 16820461,
+ "date": "20220706"
+ },
+ {
+ "open": 57600,
+ "close": 57200,
+ "high": 58200,
+ "low": 57200,
+ "volume": 14216539,
+ "date": "20220705"
+ },
+ {
+ "open": 56100,
+ "close": 57100,
+ "high": 57400,
+ "low": 55700,
+ "volume": 17807126,
+ "date": "20220704"
+ },
+ {
+ "open": 56900,
+ "close": 56200,
+ "high": 57500,
+ "low": 55900,
+ "volume": 24982097,
+ "date": "20220701"
+ },
+ {
+ "open": 57200,
+ "close": 57000,
+ "high": 57600,
+ "low": 57000,
+ "volume": 18915142,
+ "date": "20220630"
+ },
+ {
+ "open": 58500,
+ "close": 58000,
+ "high": 58800,
+ "low": 58000,
+ "volume": 14677138,
+ "date": "20220629"
+ },
+ {
+ "open": 59200,
+ "close": 59400,
+ "high": 59500,
+ "low": 58700,
+ "volume": 13540538,
+ "date": "20220628"
+ },
+ {
+ "open": 59000,
+ "close": 58800,
+ "high": 59900,
+ "low": 58300,
+ "volume": 18122236,
+ "date": "20220627"
+ },
+ {
+ "open": 57900,
+ "close": 58400,
+ "high": 59100,
+ "low": 57700,
+ "volume": 23256103,
+ "date": "20220624"
+ },
+ {
+ "open": 57700,
+ "close": 57400,
+ "high": 58000,
+ "low": 56800,
+ "volume": 28338608,
+ "date": "20220623"
+ },
+ {
+ "open": 59000,
+ "close": 57600,
+ "high": 59100,
+ "low": 57600,
+ "volume": 23334687,
+ "date": "20220622"
+ },
+ {
+ "open": 58700,
+ "close": 58500,
+ "high": 59200,
+ "low": 58200,
+ "volume": 25148109,
+ "date": "20220621"
+ },
+ {
+ "open": 59800,
+ "close": 58700,
+ "high": 59900,
+ "low": 58100,
+ "volume": 34111306,
+ "date": "20220620"
+ },
+ {
+ "open": 59400,
+ "close": 59800,
+ "high": 59900,
+ "low": 59400,
+ "volume": 29053450,
+ "date": "20220617"
+ },
+ {
+ "open": 61300,
+ "close": 60900,
+ "high": 61800,
+ "low": 60500,
+ "volume": 23394895,
+ "date": "20220616"
+ },
+ {
+ "open": 61300,
+ "close": 60700,
+ "high": 61500,
+ "low": 60200,
+ "volume": 26811224,
+ "date": "20220615"
+ },
+ {
+ "open": 61200,
+ "close": 61900,
+ "high": 62200,
+ "low": 61100,
+ "volume": 24606419,
+ "date": "20220614"
+ },
+ {
+ "open": 62400,
+ "close": 62100,
+ "high": 62800,
+ "low": 62100,
+ "volume": 22157816,
+ "date": "20220613"
+ },
+ {
+ "open": 64000,
+ "close": 63800,
+ "high": 64400,
+ "low": 63800,
+ "volume": 22193552,
+ "date": "20220610"
+ },
+ {
+ "open": 65100,
+ "close": 65200,
+ "high": 65200,
+ "low": 64500,
+ "volume": 25790725,
+ "date": "20220609"
+ },
+ {
+ "open": 65400,
+ "close": 65300,
+ "high": 65700,
+ "low": 65300,
+ "volume": 12483180,
+ "date": "20220608"
+ },
+ {
+ "open": 66200,
+ "close": 65500,
+ "high": 66400,
+ "low": 65400,
+ "volume": 19355755,
+ "date": "20220607"
+ },
+ {
+ "open": 67200,
+ "close": 66800,
+ "high": 67300,
+ "low": 66800,
+ "volume": 8222883,
+ "date": "20220603"
+ },
+ {
+ "open": 66600,
+ "close": 66700,
+ "high": 67000,
+ "low": 66400,
+ "volume": 14959443,
+ "date": "20220602"
+ },
+ {
+ "open": 67500,
+ "close": 67400,
+ "high": 67500,
+ "low": 66700,
+ "volume": 24365002,
+ "date": "20220531"
+ },
+ {
+ "open": 67500,
+ "close": 67700,
+ "high": 67800,
+ "low": 66900,
+ "volume": 14255484,
+ "date": "20220530"
+ },
+ {
+ "open": 66700,
+ "close": 66500,
+ "high": 66900,
+ "low": 66200,
+ "volume": 11405555,
+ "date": "20220527"
+ },
+ {
+ "open": 66300,
+ "close": 65900,
+ "high": 67200,
+ "low": 65500,
+ "volume": 15970890,
+ "date": "20220526"
+ },
+ {
+ "open": 66700,
+ "close": 66400,
+ "high": 67100,
+ "low": 65900,
+ "volume": 15150490,
+ "date": "20220525"
+ },
+ {
+ "open": 67500,
+ "close": 66500,
+ "high": 67700,
+ "low": 66500,
+ "volume": 15482576,
+ "date": "20220524"
+ },
+ {
+ "open": 68800,
+ "close": 67900,
+ "high": 68800,
+ "low": 67600,
+ "volume": 13684088,
+ "date": "20220523"
+ },
+ {
+ "open": 67800,
+ "close": 68000,
+ "high": 68400,
+ "low": 67700,
+ "volume": 12109671,
+ "date": "20220520"
+ },
+ {
+ "open": 66500,
+ "close": 67500,
+ "high": 67600,
+ "low": 66500,
+ "volume": 17073727,
+ "date": "20220519"
+ },
+ {
+ "open": 68300,
+ "close": 68100,
+ "high": 68700,
+ "low": 67600,
+ "volume": 16486319,
+ "date": "20220518"
+ },
+ {
+ "open": 66600,
+ "close": 67600,
+ "high": 67900,
+ "low": 66600,
+ "volume": 15680447,
+ "date": "20220517"
+ },
+ {
+ "open": 67100,
+ "close": 66300,
+ "high": 67400,
+ "low": 66100,
+ "volume": 11937555,
+ "date": "20220516"
+ },
+ {
+ "open": 65300,
+ "close": 66500,
+ "high": 66700,
+ "low": 65200,
+ "volume": 14551536,
+ "date": "20220513"
+ },
+ {
+ "open": 65200,
+ "close": 64900,
+ "high": 65500,
+ "low": 64900,
+ "volume": 16414188,
+ "date": "20220512"
+ },
+ {
+ "open": 65500,
+ "close": 65700,
+ "high": 66300,
+ "low": 65200,
+ "volume": 12330920,
+ "date": "20220511"
+ },
+ {
+ "open": 65900,
+ "close": 65700,
+ "high": 66300,
+ "low": 65300,
+ "volume": 17235605,
+ "date": "20220510"
+ },
+ {
+ "open": 66300,
+ "close": 66100,
+ "high": 66900,
+ "low": 66100,
+ "volume": 11858736,
+ "date": "20220509"
+ },
+ {
+ "open": 67000,
+ "close": 66500,
+ "high": 67100,
+ "low": 66500,
+ "volume": 14356156,
+ "date": "20220506"
+ },
+ {
+ "open": 68000,
+ "close": 67900,
+ "high": 68400,
+ "low": 67500,
+ "volume": 11505248,
+ "date": "20220504"
+ },
+ {
+ "open": 67400,
+ "close": 67500,
+ "high": 68400,
+ "low": 67300,
+ "volume": 14168875,
+ "date": "20220503"
+ },
+ {
+ "open": 66600,
+ "close": 67300,
+ "high": 67600,
+ "low": 66500,
+ "volume": 14106184,
+ "date": "20220502"
+ },
+ {
+ "open": 65100,
+ "close": 67400,
+ "high": 67600,
+ "low": 65000,
+ "volume": 26190390,
+ "date": "20220429"
+ },
+ {
+ "open": 65400,
+ "close": 64800,
+ "high": 65500,
+ "low": 64500,
+ "volume": 16895527,
+ "date": "20220428"
+ },
+ {
+ "open": 65400,
+ "close": 65000,
+ "high": 65500,
+ "low": 64900,
+ "volume": 18122084,
+ "date": "20220427"
+ },
+ {
+ "open": 66400,
+ "close": 66100,
+ "high": 66700,
+ "low": 66100,
+ "volume": 12946923,
+ "date": "20220426"
+ },
+ {
+ "open": 66500,
+ "close": 66300,
+ "high": 66700,
+ "low": 66300,
+ "volume": 11016474,
+ "date": "20220425"
+ },
+ {
+ "open": 67200,
+ "close": 67000,
+ "high": 67300,
+ "low": 66700,
+ "volume": 11791478,
+ "date": "20220422"
+ },
+ {
+ "open": 67600,
+ "close": 67700,
+ "high": 68300,
+ "low": 67500,
+ "volume": 12847448,
+ "date": "20220421"
+ },
+ {
+ "open": 67000,
+ "close": 67400,
+ "high": 67400,
+ "low": 66500,
+ "volume": 16693293,
+ "date": "20220420"
+ },
+ {
+ "open": 67100,
+ "close": 67300,
+ "high": 68000,
+ "low": 67000,
+ "volume": 12959434,
+ "date": "20220419"
+ },
+ {
+ "open": 66500,
+ "close": 66700,
+ "high": 67100,
+ "low": 66100,
+ "volume": 10119203,
+ "date": "20220418"
+ },
+ {
+ "open": 67200,
+ "close": 66600,
+ "high": 67300,
+ "low": 66500,
+ "volume": 13176415,
+ "date": "20220415"
+ },
+ {
+ "open": 68700,
+ "close": 67500,
+ "high": 68700,
+ "low": 67500,
+ "volume": 16409494,
+ "date": "20220414"
+ },
+ {
+ "open": 67300,
+ "close": 68700,
+ "high": 69000,
+ "low": 67200,
+ "volume": 17378619,
+ "date": "20220413"
+ },
+ {
+ "open": 67600,
+ "close": 67000,
+ "high": 67700,
+ "low": 67000,
+ "volume": 13924389,
+ "date": "20220412"
+ },
+ {
+ "open": 67800,
+ "close": 67900,
+ "high": 68100,
+ "low": 67400,
+ "volume": 12263735,
+ "date": "20220411"
+ },
+ {
+ "open": 68100,
+ "close": 67800,
+ "high": 68300,
+ "low": 67700,
+ "volume": 15453191,
+ "date": "20220408"
+ },
+ {
+ "open": 68500,
+ "close": 68000,
+ "high": 68500,
+ "low": 68000,
+ "volume": 20683327,
+ "date": "20220407"
+ },
+ {
+ "open": 68600,
+ "close": 68500,
+ "high": 68800,
+ "low": 68500,
+ "volume": 15517308,
+ "date": "20220406"
+ },
+ {
+ "open": 69400,
+ "close": 69200,
+ "high": 69600,
+ "low": 69100,
+ "volume": 8467248,
+ "date": "20220405"
+ },
+ {
+ "open": 68900,
+ "close": 69300,
+ "high": 69300,
+ "low": 68600,
+ "volume": 11107905,
+ "date": "20220404"
+ },
+ {
+ "open": 69500,
+ "close": 69100,
+ "high": 69500,
+ "low": 69000,
+ "volume": 15916846,
+ "date": "20220401"
+ },
+ {
+ "open": 69900,
+ "close": 69600,
+ "high": 70200,
+ "low": 69600,
+ "volume": 12510366,
+ "date": "20220331"
+ },
+ {
+ "open": 70300,
+ "close": 69900,
+ "high": 70500,
+ "low": 69800,
+ "volume": 12670187,
+ "date": "20220330"
+ },
+ {
+ "open": 70000,
+ "close": 70200,
+ "high": 70300,
+ "low": 69800,
+ "volume": 13686208,
+ "date": "20220329"
+ },
+ {
+ "open": 69500,
+ "close": 69700,
+ "high": 69900,
+ "low": 69200,
+ "volume": 12619289,
+ "date": "20220328"
+ },
+ {
+ "open": 70100,
+ "close": 69800,
+ "high": 70200,
+ "low": 69600,
+ "volume": 12986010,
+ "date": "20220325"
+ },
+ {
+ "open": 69600,
+ "close": 69800,
+ "high": 70300,
+ "low": 69600,
+ "volume": 37943357,
+ "date": "20220324"
+ },
+ {
+ "open": 70600,
+ "close": 70500,
+ "high": 71200,
+ "low": 70300,
+ "volume": 12398025,
+ "date": "20220323"
+ },
+ {
+ "open": 69900,
+ "close": 70300,
+ "high": 70500,
+ "low": 69900,
+ "volume": 9402666,
+ "date": "20220322"
+ },
+ {
+ "open": 70900,
+ "close": 69900,
+ "high": 71000,
+ "low": 69900,
+ "volume": 11169002,
+ "date": "20220321"
+ },
+ {
+ "open": 70600,
+ "close": 70700,
+ "high": 70900,
+ "low": 70200,
+ "volume": 14410038,
+ "date": "20220318"
+ }
+ ],5
+);
\ No newline at end of file
diff --git a/src/store/reducers/.gitkeep b/src/store/reducers/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/store/reducers/Chart/Indicators/chart.jsx b/src/store/reducers/Chart/Indicators/chart.jsx
new file mode 100644
index 0000000..b165947
--- /dev/null
+++ b/src/store/reducers/Chart/Indicators/chart.jsx
@@ -0,0 +1,84 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { getBBANDS, getEMA, getSAR, getSMA, getWMA } from "../../../../lib/apis/chart";
+
+const initialState = {
+ SMADatas: [],
+ WMADatas: [],
+ EMADatas: [],
+ BBANDSDatas: [],
+ SARDatas: [],
+};
+
+export const getSMAChart = createAsyncThunk(
+ "chart/getSMA",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getSMA(data);
+ return response.data;
+ }
+)
+
+export const getWMAChart = createAsyncThunk(
+ "chart/getWMA",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getWMA(data);
+ return response.data;
+ }
+)
+
+export const getEMAChart = createAsyncThunk(
+ "chart/getEMA",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getEMA(data);
+ return response.data;
+ }
+)
+
+export const getBBANDSChart = createAsyncThunk(
+ "chart/getBBANDS",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getBBANDS(data);
+ return response.data;
+ }
+)
+
+export const getSARChart = createAsyncThunk(
+ "chart/getSAR",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getSAR(data);
+ return response.data;
+ }
+)
+
+const chartIndicatorSlice = createSlice({
+ name: "chartIndicator",
+ initialState: initialState,
+ reducers: {
+ setSMADatas(state, action) {
+ state.SMADatas = action.payload;
+ },
+ setWMADatas(state, action) {
+ state.WMADatas = action.payload;
+ },
+ setEMADatas(state, action) {
+ state.EMADatas = action.payload;
+ },
+ setBBANDSDatas(state, action) {
+ state.BBANDSDatas = action.payload;
+ },
+ setSARDatas(state, action) {
+ state.SARDatas = action.payload;
+ },
+ },
+ extraReducers: (builder) => {
+ },
+});
+
+const { setSMADatas, setWMADatas, setEMADatas, setBBANDSDatas, setSARDatas } = chartIndicatorSlice.actions;
+export { setSMADatas, setWMADatas, setEMADatas, setBBANDSDatas, setSARDatas };
+
+export default chartIndicatorSlice.reducer;
diff --git a/src/store/reducers/Chart/Indicators/clickIndicators.jsx b/src/store/reducers/Chart/Indicators/clickIndicators.jsx
new file mode 100644
index 0000000..027d9a1
--- /dev/null
+++ b/src/store/reducers/Chart/Indicators/clickIndicators.jsx
@@ -0,0 +1,58 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+ SMA: false,
+ WMA: false,
+ EMA: false,
+ BBANDS: false,
+ SAR: false,
+ MACD: false,
+ STOCHF: false,
+ STOCH: false,
+ RSI: false,
+ CCI: false,
+ MOM: false,
+ ROC: false,
+ AD: false,
+ ATR: false,
+ MFI: false,
+ OBV: false,
+ ADOSC: false,
+ TRIX: false,
+ WILLR: false,
+ DX: false,
+ ADX: false,
+ ADXR: false,
+ AROON: false,
+ AROONOSC: false,
+ STOCHRSI: false,
+ ULTOSC: false,
+ PPO: false,
+ chartIndi: [],
+ subIndi: [],
+};
+
+const clickSubSlice = createSlice({
+ name: "subChart",
+ initialState: initialState,
+ reducers: {
+ setActiveSub(state, action) {
+ state[action.payload] = true;
+ },
+ setDisactiveSub(state, action) {
+ state[action.payload] = false;
+ },
+ setChartIndi(state, action) {
+ state.chartIndi = action.payload;
+ },
+ setSubIndi(state, action) {
+ state.subIndi = action.payload;
+ },
+ },
+});
+
+const { setActiveSub, setDisactiveSub, setChartIndi, setSubIndi } =
+ clickSubSlice.actions;
+export { setActiveSub, setDisactiveSub, setChartIndi, setSubIndi };
+
+export default clickSubSlice.reducer;
diff --git a/src/store/reducers/Chart/Indicators/sub.jsx b/src/store/reducers/Chart/Indicators/sub.jsx
new file mode 100644
index 0000000..210bc96
--- /dev/null
+++ b/src/store/reducers/Chart/Indicators/sub.jsx
@@ -0,0 +1,215 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { getAD, getADOSC, getADX, getADXR, getAROON, getAROONOSC, getATR, getCCI, getDX, getMACD, getMFI, getMOM, getOBV, getPPO, getROC, getRSI, getSTOCH, getSTOCHF, getSTOCHRSI, getTRIX, getULTOSC, getWILLR } from "../../../../lib/apis/chart";
+
+const initialState = {
+ MACDDatas: [],
+};
+
+export const getMACDChart = createAsyncThunk(
+ "chart/getMACD",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getMACD(data);
+ return response.data;
+ }
+)
+
+export const getSTOCHFChart = createAsyncThunk(
+ "chart/getSTOCHF",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getSTOCHF(data);
+ return response.data;
+ }
+)
+
+export const getSTOCHChart = createAsyncThunk(
+ "chart/getSTOCH",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getSTOCH(data);
+ return response.data;
+ }
+)
+
+export const getRSIChart = createAsyncThunk(
+ "chart/getRSI",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getRSI(data);
+ return response.data;
+ }
+)
+
+export const getCCIChart = createAsyncThunk(
+ "chart/getCCI",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getCCI(data);
+ return response.data;
+ }
+)
+
+export const getMOMChart = createAsyncThunk(
+ "chart/getMOM",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getMOM(data);
+ return response.data;
+ }
+)
+
+export const getROCChart = createAsyncThunk(
+ "chart/getROC",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getROC(data);
+ return response.data;
+ }
+)
+
+export const getADChart = createAsyncThunk(
+ "chart/getAD",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getAD(data);
+ return response.data;
+ }
+)
+
+export const getATRChart = createAsyncThunk(
+ "chart/getATR",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getATR(data);
+ return response.data;
+ }
+)
+
+export const getMFIChart = createAsyncThunk(
+ "chart/getMFI",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getMFI(data);
+ return response.data;
+ }
+)
+
+export const getOBVChart = createAsyncThunk(
+ "chart/getOBV",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getOBV(data);
+ return response.data;
+ }
+)
+
+export const getADOSCChart = createAsyncThunk(
+ "chart/getADOSC",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getADOSC(data);
+ return response.data;
+ }
+)
+
+export const getTRIXChart = createAsyncThunk(
+ "chart/getTRIX",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getTRIX(data);
+ return response.data;
+ }
+)
+
+export const getWILLRChart = createAsyncThunk(
+ "chart/getWILLR",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getWILLR(data);
+ return response.data;
+ }
+)
+
+export const getDXChart = createAsyncThunk(
+ "chart/getDX",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getDX(data);
+ return response.data;
+ }
+)
+
+export const getADXChart = createAsyncThunk(
+ "chart/getADX",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getADX(data);
+ return response.data;
+ }
+)
+
+export const getADXRChart = createAsyncThunk(
+ "chart/getADXR",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getADXR(data);
+ return response.data;
+ }
+)
+
+export const getAROONChart = createAsyncThunk(
+ "chart/getAROON",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getAROON(data);
+ return response.data;
+ }
+)
+
+export const getAROONOSCChart = createAsyncThunk(
+ "chart/getAROONOSC",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getAROONOSC(data);
+ return response.data;
+ }
+)
+
+export const getSTOCHRSIChart = createAsyncThunk(
+ "chart/getSTOCHRSI",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getSTOCHRSI(data);
+ return response.data;
+ }
+)
+
+export const getULTOSCChart = createAsyncThunk(
+ "chart/getULTOSC",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getULTOSC(data);
+ return response.data;
+ }
+)
+
+export const getPPOChart = createAsyncThunk(
+ "chart/getPPO",
+ async (data, tunkAPI) => {
+ // const { code, start_date, end_date, time_format } = data;
+ const response = await getPPO(data);
+ return response.data;
+ }
+)
+
+const subIndicatorSlice = createSlice({
+ name: "subIndicator",
+ initialState: initialState,
+ reducers: {
+ },
+ extraReducers: (builder) => {
+ },
+});
+
+export default subIndicatorSlice.reducer;
diff --git a/src/store/reducers/Chart/chart.jsx b/src/store/reducers/Chart/chart.jsx
new file mode 100644
index 0000000..519927b
--- /dev/null
+++ b/src/store/reducers/Chart/chart.jsx
@@ -0,0 +1,305 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { getChartData, getMinuteData } from '../../../lib/apis/chart'
+
+const initialState = {
+ // default : 삼성전자
+ datas: [],
+ date: "D",
+ loading: false,
+};
+
+export const getChartDatas = createAsyncThunk(
+ "chart/getData",
+ async (data, tunkAPI) => {
+ const response = await getChartData(data);
+ return response.data;
+ }
+)
+
+export const getMinuteDatas = createAsyncThunk(
+ "chart/getMinuteData",
+ async (data, tunkAPI) => {
+ const response = await getMinuteData(data);
+ return response.data;
+ }
+)
+
+const chartSlice = createSlice({
+ name: "chart",
+ initialState: initialState,
+ reducers: {
+ setChartDatas(state, action) {
+ const f_idx = action.payload.data.begIndex;
+ const l_idx = action.payload.data.nbElement;
+ const getIndi = action.payload.data.result;
+ if (action.payload.name === 'MACD') {
+ state.datas.map(item => {
+ delete item.macd;
+ delete item.macdSignal;
+ delete item.macdHist;
+ });
+
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["macd"] = getIndi.outMACD[i]
+ state.datas[f_idx + i]["macdSignal"] = getIndi.outMACDSignal[i] // 새로운 속성 추가
+ state.datas[f_idx + i]["macdHist"] = getIndi.outMACDHist[i] // 새로운 속성 추가
+ }
+ } else if (action.payload.name === 'STOCHF') {
+ state.datas.map(item => {
+ delete item.outFastK;
+ delete item.outFastD;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["outFastK"] = getIndi.outFastK[i]
+ state.datas[f_idx + i]["outFastD"] = getIndi.outFastD[i] // 새로운 속성 추가
+ }
+ } else if (action.payload.name === 'STOCH') {
+ state.datas.map(item => {
+ delete item.outSlowK;
+ delete item.outSlowD;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["outSlowK"] = getIndi.outSlowK[i]
+ state.datas[f_idx + i]["outSlowD"] = getIndi.outSlowD[i] // 새로운 속성 추가
+ }
+ } else if (action.payload.name === 'RSI') {
+ state.datas.map(item => {
+ delete item.rsi;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["rsi"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'CCI') {
+ state.datas.map(item => {
+ delete item.cci;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["cci"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'MOM') {
+ state.datas.map(item => {
+ delete item.mom;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["mom"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'ROC') {
+ state.datas.map(item => {
+ delete item.roc;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["roc"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'AD') {
+ state.datas.map(item => {
+ delete item.ad;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["ad"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'ATR') {
+ state.datas.map(item => {
+ delete item.atr;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["atr"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'MFI') {
+ state.datas.map(item => {
+ delete item.mfi;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["mfi"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'OBV') {
+ state.datas.map(item => {
+ delete item.obv;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["obv"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'ADOSC') {
+ state.datas.map(item => {
+ delete item.adosc;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["adosc"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'TRIX') {
+ state.datas.map(item => {
+ delete item.trix;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["trix"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'WILLR') {
+ state.datas.map(item => {
+ delete item.willr;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["willr"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'DMI') {
+ state.datas.map(item => {
+ delete item.dx;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["dx"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'ADX') {
+ state.datas.map(item => {
+ delete item.adx;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["adx"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'ADXR') {
+ state.datas.map(item => {
+ delete item.adxr;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["adxr"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'AROON') {
+ state.datas.map(item => {
+ delete item.aroonDown;
+ delete item.aroonUp;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["aroonDown"] = getIndi.outAroonDown[i]
+ state.datas[f_idx + i]["aroonUp"] = getIndi.outAroonUp[i]
+ }
+ } else if (action.payload.name === 'AROONOSC') {
+ state.datas.map(item => {
+ delete item.aroonosc;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["aroonosc"] = getIndi.outReal[i]
+ }
+ } else if (action.payload.name === 'STOCHRSI') {
+ state.datas.map(item => {
+ delete item.stochRsiK;
+ delete item.stochRsiD;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["stochRsiK"] = getIndi.outFastK[i];
+ state.datas[f_idx + i]["stochRsiD"] = getIndi.outFastD[i];
+ }
+ } else if (action.payload.name === 'ULTOSC') {
+ state.datas.map(item => {
+ delete item.ultosc;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["ultosc"] = getIndi.outReal[i];
+ }
+ } else if (action.payload.name === 'PPO') {
+ state.datas.map(item => {
+ delete item.ppo;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["ppo"] = getIndi.outReal[i];
+ }
+ } else if (action.payload.name === 'BBANDS') {
+ state.datas.map(item => {
+ delete item.upper;
+ delete item.middle;
+ delete item.lower;
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["upper"] = getIndi.outRealUpperBand[i];
+ state.datas[f_idx + i]["middle"] = getIndi.outRealMiddleBand[i];
+ state.datas[f_idx + i]["lower"] = getIndi.outRealLowerBand[i];
+ }
+ } else if (action.payload.name === 'SAR') {
+ state.datas.map(item => {
+ delete item.sar;
+
+ });
+ for (let i = 0; i < l_idx; i++) {
+ state.datas[f_idx + i]["sar"] = getIndi.outReal[i];
+ }
+ } else if (action.payload.name === 'EMA') {
+ state.datas.map(item => {
+ Object.keys(item).forEach(key => {
+ if (key.includes('ema')) {
+ delete item[key];
+ }
+ });
+ });
+
+ const responses = [action.payload.data.response1, action.payload.data.response2, action.payload.data.response3, action.payload.data.response4, action.payload.data.response5];
+ const EMAValue = action.payload.value;
+ responses.forEach((response, index) => {
+ const f_idx = response.begIndex;
+ const l_idx = response.nbElement;
+ const subData = response.result.outReal;
+ for (let i = 0; i < l_idx; i++) {
+ const emaKey = `ema${[EMAValue[0], EMAValue[1], EMAValue[2], EMAValue[3], EMAValue[4]][index]}`;
+ state.datas[f_idx + i][emaKey] = subData[i];
+ }
+ });
+ } else if (action.payload.name === 'SMA') {
+ state.datas.map(item => {
+ Object.keys(item).forEach(key => {
+ if (key.includes('sma')) {
+ delete item[key];
+ }
+ });
+ });
+
+ const responses = [action.payload.data.response1, action.payload.data.response2, action.payload.data.response3, action.payload.data.response4, action.payload.data.response5];
+ const SMAValue = action.payload.value;
+ responses.forEach((response, index) => {
+ const f_idx = response.begIndex;
+ const l_idx = response.nbElement;
+ const subData = response.result.outReal;
+ for (let i = 0; i < l_idx; i++) {
+ const smaKey = `sma${[SMAValue[0], SMAValue[1], SMAValue[2], SMAValue[3], SMAValue[4]][index]}`;
+ state.datas[f_idx + i][smaKey] = subData[i];
+ }
+ });
+ } else if (action.payload.name === 'WMA') {
+ state.datas.map(item => {
+ Object.keys(item).forEach(key => {
+ if (key.includes('wma')) {
+ delete item[key];
+ }
+ });
+ });
+
+ const responses = [action.payload.data.response1, action.payload.data.response2, action.payload.data.response3, action.payload.data.response4, action.payload.data.response5];
+ const WMAValue = action.payload.value;
+ responses.forEach((response, index) => {
+ const f_idx = response.begIndex;
+ const l_idx = response.nbElement;
+ const subData = response.result.outReal;
+ for (let i = 0; i < l_idx; i++) {
+ const wmaKey = `wma${[WMAValue[0], WMAValue[1], WMAValue[2], WMAValue[3], WMAValue[4]][index]}`;
+ state.datas[f_idx + i][wmaKey] = subData[i];
+ }
+ });
+ }
+ },
+ setLiveData(state, action) {
+ state.datas.pop();
+ state.datas.push(action.payload)
+ },
+ setClickDate(state, action) {
+ state.date = action.payload;
+ }
+ },
+ extraReducers: (builder) => {
+ builder.addCase(getChartDatas.fulfilled, (state, action) => {
+ state.datas = action.payload.reverse();
+ state.loading = false;
+ }),
+ builder.addCase(getChartDatas.pending, (state, action) => {
+ state.loading = true;
+ })
+ },
+});
+
+const { setChartDatas, setClickDate, setLiveData } = chartSlice.actions;
+export { setChartDatas, setClickDate, setLiveData };
+
+export default chartSlice.reducer;
diff --git a/src/store/reducers/Chart/clickCompany.jsx b/src/store/reducers/Chart/clickCompany.jsx
new file mode 100644
index 0000000..f566df2
--- /dev/null
+++ b/src/store/reducers/Chart/clickCompany.jsx
@@ -0,0 +1,38 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+ data: [
+ {
+ code: "005930",
+ market: "kospi",
+ market_code: "KR7005930003",
+ name: "삼성전자",
+ __v: 0,
+ _id: "65f24176b5fd9b9fdc483b63",
+ },
+ {
+ code: "005930",
+ market: "kospi",
+ market_code: "KR7005930003",
+ name: "삼성전자",
+ __v: 0,
+ _id: "65f24176b5fd9b9fdc483b63",
+ }
+ ]
+};
+
+const companySlice = createSlice({
+ name: "company",
+ initialState: initialState,
+ reducers: {
+ setClickCompany(state, action) {
+ state.data.shift();
+ state.data.push(action.payload);
+ },
+ },
+});
+
+const { setClickCompany } = companySlice.actions;
+export { setClickCompany };
+
+export default companySlice.reducer;
diff --git a/src/store/reducers/Chart/kospiKosdaq.jsx b/src/store/reducers/Chart/kospiKosdaq.jsx
new file mode 100644
index 0000000..3adb60c
--- /dev/null
+++ b/src/store/reducers/Chart/kospiKosdaq.jsx
@@ -0,0 +1,30 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { getkospiKosdaq } from "../../../lib/apis/chart";
+
+const initialState = {
+ data: [],
+};
+
+export const getkospiKosdaqDatas = createAsyncThunk(
+ "chart/getkospiKosdaq",
+ async (data, tunkAPI) => {
+ const response = await getkospiKosdaq();
+ return response.data;
+ }
+)
+
+const kospiSlice = createSlice({
+ name: "kospi",
+ initialState: initialState,
+ reducers: {},
+ extraReducers: (builder) => {
+ builder.addCase(getkospiKosdaqDatas.fulfilled, (state, action) => {
+ state.data = action.payload;
+ }),
+ builder.addCase(getkospiKosdaqDatas.rejected, (state, action) => {
+ state.data = [];
+ })
+ },
+});
+
+export default kospiSlice.reducer;
diff --git a/src/store/reducers/Feed/comment.jsx b/src/store/reducers/Feed/comment.jsx
new file mode 100644
index 0000000..9d0815b
--- /dev/null
+++ b/src/store/reducers/Feed/comment.jsx
@@ -0,0 +1,127 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import {
+ fetchComments as reqFetchComments,
+ postComment as reqPostComment,
+ putComment as reqPutComment,
+ deleteComment as reqDeleteComment,
+} from "~/lib/apis/comment";
+
+const initialState = {
+ comments: {},
+ selectedFriend: null,
+ loading: "idle",
+};
+
+const fetchComments = createAsyncThunk(
+ "comment/fetchComments",
+ async (feedId, thunkAPI) => {
+ const response = await reqFetchComments(feedId);
+ return response;
+ }
+);
+
+const postComment = createAsyncThunk(
+ "comment/postComment",
+ async ({ feedId, content }, thunkAPI) => {
+ const response = await reqPostComment(feedId, content);
+ return response;
+ }
+);
+
+const putComment = createAsyncThunk(
+ "comment/putComment",
+ async ({ commentId, content }, thunkAPI) => {
+ const response = await reqPutComment(commentId, content);
+ return response;
+ }
+);
+
+const deleteComment = createAsyncThunk(
+ "comment/deleteComment",
+ async (commentId, thunkAPI) => {
+ const response = await reqDeleteComment(commentId);
+ return response;
+ }
+);
+
+const commentSlice = createSlice({
+ name: "comment",
+ initialState: initialState,
+ reducers: {
+ setSelectedFriend: (state, action) => {
+ state.selectedFriend = action.payload;
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchComments.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+
+ action.payload.forEach((comment) => {
+ const { feed, _id, ...rest } = comment;
+
+ if (!state.comments[feed]) {
+ state.comments[feed] = [];
+ }
+
+ if (
+ !state.comments[feed].some(
+ (existingComment) => existingComment._id === _id
+ )
+ ) {
+ state.comments[feed].push(comment);
+ }
+ });
+ })
+ .addCase(fetchComments.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchComments.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postComment.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ const comment = action.payload;
+
+ if (!state.comments[comment.feed]) {
+ state.comments[comment.feed] = [];
+ }
+ state.comments[comment.feed].push(comment);
+ })
+ .addCase(postComment.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postComment.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(putComment.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ })
+ .addCase(putComment.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(putComment.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(deleteComment.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ const deletedCommentId = action.meta.arg;
+
+ Object.keys(state.comments).forEach((feedId) => {
+ state.comments[feedId] = state.comments[feedId].filter(
+ (comment) => comment._id !== deletedCommentId
+ );
+ });
+ })
+ .addCase(deleteComment.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(deleteComment.rejected, (state) => {
+ state.loading = "rejected";
+ });
+ },
+});
+
+export const { setSelectedFriend } = commentSlice.actions;
+export { fetchComments, postComment, putComment, deleteComment };
+export default commentSlice.reducer;
diff --git a/src/store/reducers/Feed/feed.jsx b/src/store/reducers/Feed/feed.jsx
new file mode 100644
index 0000000..da1cd86
--- /dev/null
+++ b/src/store/reducers/Feed/feed.jsx
@@ -0,0 +1,282 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import {
+ fetchAFeed as reqFetchAFeed,
+ fetchMyFeed as reqFetchMyFeed,
+ fetchOtherFeed as reqFetchOtherFeed,
+ fetchAllFeed as reqFetchcAllFeed,
+ postBoardFeed as reqPostBoardFeed,
+ deleteFeed as reqDeleteFeed,
+ postVoteFeed as reqPostVoteFeed,
+ postVote as reqPostVote,
+ postLike as reqPostLike,
+ postUnlike as reqPostUnlike,
+ fetchMyFeedCount as reqFetchMyFeedCount,
+ postMyProfit as reqPostMyProfit,
+} from "~/lib/apis/feed";
+
+const initialState = {
+ myFeed: [],
+ allFeed: [],
+ otherFeed: [],
+ aFeed: null,
+ myFeedCount: null,
+ mypageFeedCount: null,
+ loading: "idle",
+};
+
+const fetchAFeed = createAsyncThunk(
+ "feed/fetchAFeed",
+ async (feedId, thunkAPI) => {
+ const response = await reqFetchAFeed(feedId);
+ return response;
+ }
+);
+
+const fetchMyFeed = createAsyncThunk(
+ "feed/fetchMyFeed",
+ async ({ userId, page }, thunkAPI) => {
+ const response = await reqFetchMyFeed(userId, page);
+ return response;
+ }
+);
+const fetchOtherFeed = createAsyncThunk(
+ "feed/fetchOtherFeed",
+ async ({ userId, page }, thunkAPI) => {
+ const response = await reqFetchOtherFeed(userId, page);
+ return response;
+ }
+);
+
+const fetchAllFeed = createAsyncThunk(
+ "feed/fetchAllFeed",
+ async (page, thunkAPI) => {
+ const response = await reqFetchcAllFeed(page);
+ return response;
+ }
+);
+
+const postBoardFeed = createAsyncThunk(
+ "feed/postBoardFeed",
+ async (formdata, thunkAPI) => {
+ const response = await reqPostBoardFeed(formdata);
+ return response;
+ }
+);
+
+const deleteFeed = createAsyncThunk(
+ "feed/deleteFeed",
+ async (feedId, thunkAPI) => {
+ const response = await reqDeleteFeed(feedId);
+ return response;
+ }
+);
+
+const postVoteFeed = createAsyncThunk(
+ "feed/postVoteFeed",
+ async (body, thunkAPI) => {
+ const response = await reqPostVoteFeed(body);
+ return response;
+ }
+);
+
+const postVote = createAsyncThunk(
+ "feed/postVote",
+ async ({ feedId, voteResult }, thunkAPI) => {
+ const response = await reqPostVote(feedId, voteResult);
+ return response;
+ }
+);
+
+const postLike = createAsyncThunk("feed/postLike", async (feedId, thunkAPI) => {
+ const response = await reqPostLike(feedId);
+ return response;
+});
+
+const postUnlike = createAsyncThunk(
+ "feed/postUnlike",
+ async (feedId, thunkAPI) => {
+ const response = await reqPostUnlike(feedId);
+ return response;
+ }
+);
+
+const fetchMyFeedCount = createAsyncThunk(
+ "feed/fetchMyFeedCount",
+ async (userId, thunkAPI) => {
+ const response = await reqFetchMyFeedCount(userId);
+ return response;
+ }
+);
+
+const fetchMyPageFeedCount = createAsyncThunk(
+ "feed/fetchMyPageFeedCount",
+ async (userId, thunkAPI) => {
+ const response = await reqFetchMyFeedCount(userId);
+ return response;
+ }
+);
+
+const postMyProfit = createAsyncThunk(
+ "feed/postMyProfit",
+ async (profit, thunkAPI) => {
+ const response = await reqPostMyProfit(profit);
+ return response;
+ }
+);
+
+const feedSlice = createSlice({
+ name: "feed",
+ initialState: initialState,
+ reducers: {},
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchAFeed.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.aFeed = action.payload;
+ })
+ .addCase(fetchAFeed.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchAFeed.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(fetchMyFeed.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ action.payload.forEach((item) => {
+ if (!state.myFeed.some((feedItem) => feedItem._id === item._id)) {
+ state.myFeed = [...state.myFeed, ...action.payload];
+ }
+ });
+ })
+ .addCase(fetchMyFeed.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchMyFeed.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(fetchOtherFeed.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ if (action.payload === "") {
+ state.otherFeed = [];
+ }
+ state.otherFeed = [...state.otherFeed, ...action.payload];
+ })
+ .addCase(fetchOtherFeed.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchOtherFeed.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(fetchAllFeed.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.allFeed = [...state.allFeed, ...action.payload];
+ })
+ .addCase(fetchAllFeed.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchAllFeed.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postBoardFeed.fulfilled, (state, action) => {
+ state.loading = "go";
+ })
+ .addCase(postBoardFeed.pending, (state) => {
+ state.loading = "wait";
+ })
+ .addCase(postBoardFeed.rejected, (state) => {
+ state.loading = "wait";
+ })
+ .addCase(deleteFeed.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+
+ const deletedFeedId = action.meta.arg;
+
+ state.allFeed = state.allFeed.filter(
+ (feed) => feed._id !== deletedFeedId
+ );
+
+ state.myFeed = state.myFeed.filter(
+ (feed) => feed._id !== deletedFeedId
+ );
+ })
+ .addCase(deleteFeed.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(deleteFeed.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postVoteFeed.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ })
+ .addCase(postVoteFeed.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postVoteFeed.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postVote.fulfilled, (state) => {
+ state.loading = "fulfilled";
+ })
+ .addCase(postVote.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postVote.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postLike.fulfilled, (state) => {
+ state.loading = "fulfilled";
+ })
+ .addCase(postLike.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postLike.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postUnlike.fulfilled, (state) => {
+ state.loading = "fulfilled";
+ })
+ .addCase(postUnlike.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postUnlike.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(fetchMyFeedCount.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.myFeedCount = action.payload.postCount;
+ })
+ .addCase(fetchMyFeedCount.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchMyFeedCount.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(fetchMyPageFeedCount.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.mypageFeedCount = action.payload.postCount;
+ })
+ .addCase(fetchMyPageFeedCount.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchMyPageFeedCount.rejected, (state) => {
+ state.loading = "rejected";
+ });
+ },
+});
+
+export {
+ fetchAFeed,
+ fetchMyFeed,
+ fetchOtherFeed,
+ fetchAllFeed,
+ postBoardFeed,
+ postVoteFeed,
+ postVote,
+ postLike,
+ postUnlike,
+ deleteFeed,
+ fetchMyFeedCount,
+ fetchMyPageFeedCount,
+ postMyProfit,
+};
+export default feedSlice.reducer;
diff --git a/src/store/reducers/Hot/getStockInfo.jsx b/src/store/reducers/Hot/getStockInfo.jsx
new file mode 100644
index 0000000..97020a1
--- /dev/null
+++ b/src/store/reducers/Hot/getStockInfo.jsx
@@ -0,0 +1,51 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { getHotStock, getPopularStock } from "../../../lib/apis/hot";
+
+const initialState = {
+ popularData: [],
+ hotData: [],
+ loading: false,
+};
+
+export const getPopularDatas = createAsyncThunk(
+ "chart/getPopularData",
+ async (data, tunkAPI) => {
+ const response = await getPopularStock();
+ return response.data;
+ }
+)
+
+export const getHotDatas = createAsyncThunk(
+ "chart/getHotData",
+ async (data, tunkAPI) => {
+ const response = await getHotStock(data);
+ return response.data;
+ }
+)
+
+const hotStockSlice = createSlice({
+ name: "hotStock",
+ initialState: initialState,
+ reducers: {},
+ extraReducers: (builder) => {
+ builder.addCase(getPopularDatas.fulfilled, (state, action) => {
+ state.popularData = action.payload;
+ }),
+ builder.addCase(getPopularDatas.rejected, (state, action) => {
+ state.popularData = [];
+ }),
+ builder.addCase(getHotDatas.fulfilled, (state, action) => {
+ state.hotData = action.payload;
+ state.loading = false;
+ }),
+ builder.addCase(getHotDatas.pending, (state, action) => {
+ state.loading = true;
+ }),
+ builder.addCase(getHotDatas.rejected, (state, action) => {
+ state.hotData = [];
+ state.loading = false;
+ })
+ },
+});
+
+export default hotStockSlice.reducer;
diff --git a/src/store/reducers/Strategy/getStrategy.jsx b/src/store/reducers/Strategy/getStrategy.jsx
new file mode 100644
index 0000000..397aa85
--- /dev/null
+++ b/src/store/reducers/Strategy/getStrategy.jsx
@@ -0,0 +1,32 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { getStrategy } from "../../../lib/apis/strategy";
+
+const initialState = {
+ strategy: {},
+ loading: false,
+};
+
+export const getStrategyDatas = createAsyncThunk(
+ "chart/getStrategyDatas",
+ async (data, tunkAPI) => {
+ const response = await getStrategy();
+ return response.data;
+ }
+)
+
+const strategySlice = createSlice({
+ name: "strategy",
+ initialState: initialState,
+ reducers: {},
+ extraReducers: (builder) => {
+ builder.addCase(getStrategyDatas.pending, (state, action) => {
+ state.loading = true;
+ }),
+ builder.addCase(getStrategyDatas.fulfilled, (state, action) => {
+ state.strategy = action.payload;
+ state.loading = false;
+ })
+ },
+});
+
+export default strategySlice.reducer;
diff --git a/src/store/reducers/Trading/chartValues.jsx b/src/store/reducers/Trading/chartValues.jsx
new file mode 100644
index 0000000..f7c752d
--- /dev/null
+++ b/src/store/reducers/Trading/chartValues.jsx
@@ -0,0 +1,25 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+ values: {
+ SMA: [5, 10, 20, 60, 120],
+ WMA: [5, 10, 20, 60, 120],
+ EMA: [5, 10, 20, 60, 120],
+ BBANDS: [5, 2],
+ SAR: [0.02, 0.2],
+ },
+};
+
+const chartValuesSlice = createSlice({
+ name: "chartValues",
+ initialState: initialState,
+ reducers: {
+ setValues: (state, action) => {
+ state.values = { ...state.values, ...action.payload };
+ },
+ },
+ extraReducers: (builder) => {},
+});
+
+export const { setValues } = chartValuesSlice.actions;
+export default chartValuesSlice.reducer;
diff --git a/src/store/reducers/Trading/indicatorValues.jsx b/src/store/reducers/Trading/indicatorValues.jsx
new file mode 100644
index 0000000..8740f77
--- /dev/null
+++ b/src/store/reducers/Trading/indicatorValues.jsx
@@ -0,0 +1,42 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+ values: {
+ MACD: [26, 12, 9],
+ STOCHF: [14, 3],
+ STOCH: [14, 3, 3],
+ RSI: [10],
+ CCI: [20],
+ MOM: [10],
+ ROC: [10],
+ AD: [],
+ ATR: [20],
+ MFI: [14],
+ OBV: [],
+ ADOSC: [10, 3],
+ TRIX: [12],
+ WILLR: [14],
+ DX: [14],
+ ADX: [14],
+ ADXR: [14],
+ AROON: [25],
+ AROONOSC: [25],
+ STOCHRSI: [14, 14, 3],
+ ULTOSC: [28, 14, 7],
+ PPO: [26, 12],
+ },
+};
+
+const indicatorValuesSlice = createSlice({
+ name: "indicatorValues",
+ initialState: initialState,
+ reducers: {
+ setValues: (state, action) => {
+ state.values = { ...state.values, ...action.payload };
+ },
+ },
+ extraReducers: (builder) => {},
+});
+
+export const { setValues } = indicatorValuesSlice.actions;
+export default indicatorValuesSlice.reducer;
diff --git a/src/store/reducers/Trading/search.jsx b/src/store/reducers/Trading/search.jsx
new file mode 100644
index 0000000..bf0b3db
--- /dev/null
+++ b/src/store/reducers/Trading/search.jsx
@@ -0,0 +1,128 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import {
+ postSearch as reqPostSearch,
+ postSearchUser as reqPostSearchUser,
+ postLikeStock as reqPostLikeStock,
+ fetchLikeStock as reqFetchLikeStock,
+ fetchLikeStockArr as reqFetchLikeStockArr,
+} from "~/lib/apis/search";
+
+const initialState = {
+ searchResults: [],
+ favoriteArr: [],
+ myFavoriteArr: [],
+ loading: "idle",
+};
+
+const postSearch = createAsyncThunk(
+ "search/postSearch",
+ async ({ searchQuery }, thunkAPI) => {
+ const response = await reqPostSearch(searchQuery);
+ return response;
+ }
+);
+
+const postSearchUser = createAsyncThunk(
+ "search/postSearchUser",
+ async ({ searchQuery, userId }, thunkAPI) => {
+ const response = await reqPostSearchUser(searchQuery, userId);
+ return response;
+ }
+);
+
+const postLikeStock = createAsyncThunk(
+ "search/postLikeStock",
+ async ({ likeStock, userId }, thunkAPI) => {
+ const response = await reqPostLikeStock(likeStock, userId);
+ return response;
+ }
+);
+
+const fetchLikeStock = createAsyncThunk(
+ "search/fetchLikeStock",
+ async (userId, thunkAPI) => {
+ const response = await reqFetchLikeStock(userId);
+ return response;
+ }
+);
+
+const fetchLikeStockArr = createAsyncThunk(
+ "search/fetchLikeStockArr",
+ async (userId, thunkAPI) => {
+ const response = await reqFetchLikeStockArr(userId);
+ return response;
+ }
+);
+
+const searchSlice = createSlice({
+ name: "search",
+ initialState: initialState,
+ reducers: {
+ setFavoriteArr: (state, action) => {
+ state.favoriteArr = action.payload;
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(postSearch.fulfilled, (state, action) => {
+ state.searchResults = action.payload;
+ state.loading = "idle";
+ })
+ .addCase(postSearch.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postSearch.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postSearchUser.fulfilled, (state, action) => {
+ state.searchResults = action.payload;
+ state.loading = "idle";
+ })
+ .addCase(postSearchUser.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postSearchUser.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postLikeStock.fulfilled, (state, action) => {
+ state.favoriteArr = action.payload;
+ state.loading = "idle";
+ })
+ .addCase(postLikeStock.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postLikeStock.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(fetchLikeStock.fulfilled, (state, action) => {
+ state.myFavoriteArr = action.payload;
+ state.loading = "idle";
+ })
+ .addCase(fetchLikeStock.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchLikeStock.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(fetchLikeStockArr.fulfilled, (state, action) => {
+ state.favoriteArr = action.payload;
+ state.loading = "idle";
+ })
+ .addCase(fetchLikeStockArr.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchLikeStockArr.rejected, (state) => {
+ state.loading = "rejected";
+ });
+ },
+});
+
+export const { setFavoriteArr } = searchSlice.actions;
+export {
+ postSearch,
+ postSearchUser,
+ postLikeStock,
+ fetchLikeStock,
+ fetchLikeStockArr,
+};
+export default searchSlice.reducer;
diff --git a/src/store/reducers/Trading/trading.jsx b/src/store/reducers/Trading/trading.jsx
new file mode 100644
index 0000000..6134b23
--- /dev/null
+++ b/src/store/reducers/Trading/trading.jsx
@@ -0,0 +1,56 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+ selectedTab: "매수",
+ selectedPrice: null,
+ selectedQuantity: 0,
+ scrollPosition: 100,
+ orderType: "지정가", // 시장가, 지정가 가격 input
+ isNew: false,
+};
+
+const tradingSlice = createSlice({
+ name: "trading",
+ initialState: initialState,
+ reducers: {
+ setSelectedTab(state, action) {
+ state.selectedTab = action.payload;
+ },
+ setSelectedPrice(state, action) {
+ state.selectedPrice = action.payload;
+ },
+ setSelectedQuantity(state, action) {
+ state.selectedQuantity = action.payload;
+ },
+ setScrollPosition(state, action) {
+ state.scrollPosition = action.payload;
+ },
+ setOrderType(state, action) {
+ state.orderType = action.payload;
+ },
+ increaseSelectedQuantity(state) {
+ state.selectedQuantity += 1;
+ },
+ setIsNew(state, action) {
+ state.isNew = action.payload;
+ },
+ decreaseSelectedQuantity(state) {
+ if (state.selectedQuantity > 0) {
+ state.selectedQuantity -= 1;
+ }
+ },
+ },
+ extraReducers: (builder) => {},
+});
+
+export const {
+ setSelectedPrice,
+ setScrollPosition,
+ setSelectedTab,
+ setOrderType,
+ setSelectedQuantity,
+ increaseSelectedQuantity,
+ decreaseSelectedQuantity,
+ setIsNew,
+} = tradingSlice.actions;
+export default tradingSlice.reducer;
diff --git a/src/store/reducers/User/friend.jsx b/src/store/reducers/User/friend.jsx
new file mode 100644
index 0000000..2125792
--- /dev/null
+++ b/src/store/reducers/User/friend.jsx
@@ -0,0 +1,247 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import {
+ fetchFriends as reqFetchFriends,
+ fetchPendingFriends as reqFetchPendingFriends,
+ fetchFriendsState as reqFetchFriendsState,
+ fetchFriendCount as reqFetchFriendCount,
+ postFriendRequest as reqPostFriendRequest,
+ postFriendAccept as reqPostFriendAccept,
+ deleteFriend as reqDeleteFriend,
+ deleteFriendRequest as reqDeleteFriendRequest,
+ deleteMyRequest as reqDeleteMyRequest,
+ postSearchFriend as reqPostSearchFriend,
+} from "~/lib/apis/friend";
+
+const initialState = {
+ friends: [],
+ pendingFriends: [],
+ friendsState: null,
+ friendCount: null,
+ friendNickname: null,
+ friendId: null,
+ friendSearch: [],
+ loading: "idle",
+};
+
+const fetchFriends = createAsyncThunk(
+ "friend/fetchFriends",
+ async (data, thunkAPI) => {
+ const response = await reqFetchFriends();
+ return response;
+ }
+);
+
+const fetchPendingFriends = createAsyncThunk(
+ "friend/fetchPendingFriends",
+ async (data, thunkAPI) => {
+ const response = await reqFetchPendingFriends();
+ return response;
+ }
+);
+
+const fetchFriendsState = createAsyncThunk(
+ "friend/fetchFriendsState",
+ async (friendId, thunkAPI) => {
+ const response = await reqFetchFriendsState(friendId);
+ return response;
+ }
+);
+
+const fetchFriendCount = createAsyncThunk(
+ "friend/fetchFriendCount",
+ async (userId, thunkAPI) => {
+ const response = await reqFetchFriendCount(userId);
+ return response;
+ }
+);
+
+const postFriendRequest = createAsyncThunk(
+ "friend/postFriendRequest",
+ async (friendId, thunkAPI) => {
+ const response = await reqPostFriendRequest(friendId);
+ return response;
+ }
+);
+
+const postFriendAccept = createAsyncThunk(
+ "friend/postFriendAccept",
+ async (friendId, thunkAPI) => {
+ const response = await reqPostFriendAccept(friendId);
+ return response;
+ }
+);
+
+const deleteFriend = createAsyncThunk(
+ "friend/deleteFriend",
+ async (friendId, thunkAPI) => {
+ const response = await reqDeleteFriend(friendId);
+ return response;
+ }
+);
+
+const deleteFriendRequest = createAsyncThunk(
+ "friend/deleteFriendRequest",
+ async (friendId, thunkAPI) => {
+ const response = await reqDeleteFriendRequest(friendId);
+ return response;
+ }
+);
+
+const deleteMyRequest = createAsyncThunk(
+ "friend/deleteMyRequest",
+ async (friendId, thunkAPI) => {
+ const response = await reqDeleteMyRequest(friendId);
+ return response;
+ }
+);
+
+const postSearchFriend = createAsyncThunk(
+ "friend/postSearchFriend",
+ async ({ nickname }, thunkAPI) => {
+ const response = await reqPostSearchFriend(nickname);
+ return response;
+ }
+);
+
+const friendSlice = createSlice({
+ name: "friend",
+ initialState: initialState,
+ reducers: {
+ setFriendNickname: (state, action) => {
+ state.friendNickname = action.payload;
+ },
+ setFriendId: (state, action) => {
+ state.friendId = action.payload;
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchFriends.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.friends = action.payload;
+ })
+ .addCase(fetchFriends.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchFriends.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(fetchPendingFriends.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.pendingFriends = action.payload;
+ })
+ .addCase(fetchPendingFriends.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchPendingFriends.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(fetchFriendsState.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.friendsState = action.payload;
+ })
+ .addCase(fetchFriendsState.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchFriendsState.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(fetchFriendCount.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.friendCount = action.payload.friendCount;
+ })
+ .addCase(fetchFriendCount.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchFriendCount.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postFriendRequest.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.friendsState = { friendId: action.meta.arg, state: "requested" };
+ })
+ .addCase(postFriendRequest.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postFriendRequest.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postFriendAccept.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ const acceptedFriend = state.pendingFriends.find(
+ (friend) => friend._id === action.meta.arg
+ );
+ if (acceptedFriend) {
+ state.friends = [...state.friends, acceptedFriend];
+ }
+ state.pendingFriends = state.pendingFriends.filter(
+ (friend) => friend._id !== action.meta.arg
+ );
+ })
+ .addCase(postFriendAccept.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postFriendAccept.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(deleteFriend.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.friends = state.friends.filter(
+ (friend) => friend._id !== action.meta.arg
+ );
+ })
+ .addCase(deleteFriend.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(deleteFriend.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(deleteFriendRequest.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.pendingFriends = state.pendingFriends.filter(
+ (friend) => friend._id !== action.meta.arg
+ );
+ })
+ .addCase(deleteFriendRequest.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(deleteFriendRequest.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(deleteMyRequest.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.friendsState = { friendId: action.meta.arg, state: "" };
+ })
+ .addCase(deleteMyRequest.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(deleteMyRequest.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(postSearchFriend.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.friendSearch = action.payload;
+ })
+ .addCase(postSearchFriend.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(postSearchFriend.rejected, (state) => {
+ state.loading = "rejected";
+ });
+ },
+});
+
+export const { setFriendNickname, setFriendId } = friendSlice.actions;
+export {
+ fetchFriends,
+ fetchPendingFriends,
+ fetchFriendsState,
+ fetchFriendCount,
+ postFriendRequest,
+ postFriendAccept,
+ deleteFriend,
+ deleteFriendRequest,
+ deleteMyRequest,
+ postSearchFriend,
+};
+export default friendSlice.reducer;
diff --git a/src/store/reducers/User/order.jsx b/src/store/reducers/User/order.jsx
new file mode 100644
index 0000000..f098861
--- /dev/null
+++ b/src/store/reducers/User/order.jsx
@@ -0,0 +1,69 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import {
+ fetchMyOrder as reqFetchMyOrder,
+ getOrderHistory as reqGetOrderHistory,
+} from "../../../lib/apis/order";
+
+const initialState = {
+ myMoney: {},
+ mystocks: [],
+ reservedHistory: [],
+ completedHistory: [],
+ uniqueCompletedHistory: [],
+ loading: "idle",
+};
+
+export const fetchMyOrder = createAsyncThunk(
+ "order/fetchMyOrder",
+ async (data, thunkAPI) => {
+ const response = await reqFetchMyOrder();
+ return response;
+ }
+);
+
+export const getOrderHistory = createAsyncThunk(
+ "order/getOrderHistory",
+ async ({ code, userId }, thunkAPI) => {
+ const response = await reqGetOrderHistory(code, userId);
+ return response;
+ }
+);
+
+const orderSlice = createSlice({
+ name: "order",
+ initialState: initialState,
+ reducers: {
+ setUniqueCompletedHistory: (state, action) => {
+ state.uniqueCompletedHistory = action.payload;
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchMyOrder.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.myMoney = action.payload.myMoney[0];
+ state.mystocks = action.payload.mystocks;
+ })
+ .addCase(fetchMyOrder.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(fetchMyOrder.rejected, (state) => {
+ state.loading = "rejected";
+ })
+ .addCase(getOrderHistory.fulfilled, (state, action) => {
+ state.loading = "fulfilled";
+ state.reservedHistory = action.payload.reservedHistory;
+ state.completedHistory = action.payload.completedHistory;
+ })
+ .addCase(getOrderHistory.pending, (state) => {
+ state.loading = "pending";
+ })
+ .addCase(getOrderHistory.rejected, (state) => {
+ state.loading = "rejected";
+ });
+ },
+});
+
+export const { setUniqueCompletedHistory } = orderSlice.actions;
+
+export default orderSlice.reducer;
diff --git a/src/store/reducers/User/user.jsx b/src/store/reducers/User/user.jsx
new file mode 100644
index 0000000..66f26c7
--- /dev/null
+++ b/src/store/reducers/User/user.jsx
@@ -0,0 +1,55 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { login, logout, signup } from "../../../lib/apis/user";
+import { removeCookie, setCookie } from "../../../lib/apis/cookie";
+
+const initialState = {
+ user: {},
+ loading: "idle",
+};
+
+export const postSignup = createAsyncThunk(
+ "user/signup",
+ async (data, thunkAPI) => {
+ const response = await signup(data.email, data.password, data.nickname);
+ return response;
+ }
+);
+
+export const postLogin = createAsyncThunk(
+ "user/login",
+ async (data, thunkAPI) => {
+ const response = await login(data.email, data.password);
+ setCookie("token", response.data.token, {
+ path: "/",
+ // secure: true,
+ });
+ return response;
+ }
+);
+
+export const postLogout = createAsyncThunk(
+ "user/logout",
+ async (data, thunkAPI) => {
+ const response = await logout(data);
+ removeCookie("token");
+
+ return response;
+ }
+);
+
+const userSlice = createSlice({
+ name: "user",
+ initialState: initialState,
+ reducers: {
+ setUser(state, action) {
+ state.user = action.payload;
+ state.loading = "fulfilled";
+ },
+ },
+ extraReducers: (builder) => {},
+});
+
+const { setUser } = userSlice.actions;
+export { setUser };
+
+export default userSlice.reducer;
diff --git a/src/store/store.js b/src/store/store.js
new file mode 100644
index 0000000..efe4a1e
--- /dev/null
+++ b/src/store/store.js
@@ -0,0 +1,84 @@
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import storage from "redux-persist/lib/storage";
+import {
+ FLUSH,
+ PAUSE,
+ PERSIST,
+ PURGE,
+ REGISTER,
+ REHYDRATE,
+ persistReducer,
+ persistStore,
+} from "redux-persist";
+import logger from "redux-logger";
+import chartValuesReducer from "./reducers/Trading/chartValues";
+import indicatorValuesReducer from "./reducers/Trading/indicatorValues";
+import chartReducer from "./reducers/Chart/chart.jsx";
+import companyReducer from "./reducers/Chart/clickCompany.jsx";
+import clickIndicatorsReducer from "./reducers/Chart/Indicators/clickIndicators.jsx";
+import getChartIndicatorReducer from "./reducers/Chart/Indicators/chart.jsx";
+import getSubIndicatorReducer from "./reducers/Chart/Indicators/sub.jsx";
+import searchReducer from "./reducers/Trading/search";
+import userReducer from "./reducers/User/user";
+import feedReducer from "./reducers/Feed/feed";
+import commentReducer from "./reducers/Feed/comment";
+import hotStockReducer from "./reducers/Hot/getStockInfo.jsx";
+import strategyReducer from "./reducers/Strategy/getStrategy.jsx";
+import tradingReducer from "./reducers/Trading/trading.jsx";
+import kospiKosdaqReducer from "./reducers/Chart/kospiKosdaq.jsx";
+import friendReducer from "./reducers/User/friend";
+import orderReducer from "./reducers/User/order";
+
+const rootPersistConfig = {
+ key: "root",
+ storage: storage,
+ whitelist: [
+ "user",
+ "chartValues",
+ "indicatorValues",
+ "search",
+ "chart",
+ "clickIndicator",
+ "getChartIndicator",
+ "getSubIndicator",
+ "company",
+ "user",
+ "order",
+ ],
+};
+
+const rootReducer = persistReducer(
+ rootPersistConfig,
+ combineReducers({
+ trading: tradingReducer,
+ chart: chartReducer,
+ company: companyReducer,
+ chartValues: chartValuesReducer,
+ indicatorValues: indicatorValuesReducer,
+ clickIndicator: clickIndicatorsReducer,
+ getChartIndicator: getChartIndicatorReducer,
+ getSubIndicator: getSubIndicatorReducer,
+ search: searchReducer,
+ user: userReducer,
+ feed: feedReducer,
+ comment: commentReducer,
+ hot: hotStockReducer,
+ strategy: strategyReducer,
+ kospiKosdaq: kospiKosdaqReducer,
+ friend: friendReducer,
+ order: orderReducer,
+ })
+);
+// const myMiddlewares = [logger];
+export const store = configureStore({
+ reducer: rootReducer,
+ middleware: (getDefaultMiddleware) =>
+ getDefaultMiddleware({
+ serializableCheck: {
+ ignoreActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+ },
+ }),
+ // .concat(myMiddlewares),
+});
+
+export const persistor = persistStore(store);
diff --git a/src/store/webSocket/nowPrice.js b/src/store/webSocket/nowPrice.js
new file mode 100644
index 0000000..61d90b3
--- /dev/null
+++ b/src/store/webSocket/nowPrice.js
@@ -0,0 +1,32 @@
+import io from "socket.io-client";
+const SERVER_URL = "";
+
+const socket = io(SERVER_URL);
+
+export const joinRoom = (stockCode) => {
+ if (stockCode) {
+ socket.emit("joinRoom", stockCode);
+ }
+};
+
+export const leaveRoom = (stockCode) => {
+ if (stockCode) {
+ socket.emit("leaveRoom", stockCode);
+ }
+};
+
+export const subscribeNowPrice = (callback) => {
+ socket.on("nowPrice", (message) => {
+ callback(message);
+ });
+
+ return () => socket.off("nowPrice");
+};
+
+export const subscribeAskPrice = (callback) => {
+ socket.on("askPrice", (message) => {
+ callback(message);
+ });
+
+ return () => socket.off("askPrice");
+};
diff --git a/src/style/GlobalStyle.js b/src/style/GlobalStyle.js
new file mode 100644
index 0000000..feb6fcb
--- /dev/null
+++ b/src/style/GlobalStyle.js
@@ -0,0 +1,119 @@
+import styled from "styled-components";
+
+// Sidebar
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 400px;
+ height: 100%;
+ position: relative;
+ overflow: hidden;
+ background-color: #f3f3f3;
+`;
+
+// FeedShow
+export const FeedWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ margin-bottom: 5px;
+`;
+
+export const UserDiv = styled.div`
+ margin: 20px 25px 0px 25px;
+ width: 80%;
+`;
+
+export const DeleteDiv = styled.div`
+ color: gray;
+ width: 20%;
+ cursor: pointer;
+ &:hover {
+ color: black;
+ }
+`;
+
+export const UserNickname = styled.div`
+ font-size: 16px;
+ font-weight: 600;
+ line-height: normal;
+ margin-bottom: 5px;
+ cursor: pointer;
+`;
+
+export const DateDiv = styled.div`
+ color: #c1c1c1;
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+`;
+
+export const BodyWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin: 15px 25px 0px 25px;
+`;
+
+export const BodyCenter = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+export const BodyDiv = styled.div`
+ margin-bottom: 15px;
+ font-weight: ${(props) => props.$weight || "400"};
+`;
+
+export const BottomWrapper = styled.div`
+ display: flex;
+ margin: 20px 25px 0px 25px;
+ padding: 15px 0px;
+ border-top: 1px solid #dadada;
+ gap: 20px;
+`;
+
+export const IconDiv = styled.div`
+ display: flex;
+ align-items: center;
+ width: 50px;
+`;
+
+export const StockWrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 95%;
+ padding: 11px 22px;
+ border-radius: 10px;
+ background-color: ${(props) =>
+ props.$buy === "sell"
+ ? "#FFE3D7"
+ : props.$buy === "returns"
+ ? "#EFEFEF"
+ : "#BEE4FF"};
+`;
+
+export const StockDiv = styled.div`
+ margin-left: ${(props) => props.$margin || "10px"};
+ color: #000;
+ font-size: 17px;
+ font-style: normal;
+ font-weight: 550;
+`;
+
+export const CommentDiv = styled.div`
+ display: ${(props) => (props.$check == true ? "none" : "flex")};
+`;
+
+//common
+export const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: white;
+ height: 100vh;
+ gap: 10px;
+`;
diff --git a/src/util/getLogoFileName.jsx b/src/util/getLogoFileName.jsx
new file mode 100644
index 0000000..edb1e6c
--- /dev/null
+++ b/src/util/getLogoFileName.jsx
@@ -0,0 +1,27 @@
+import default_Img from "../../public/icon/logo.svg";
+
+export const getLogoFileName = (name, code) => {
+ if (name.includes("스팩")) {
+ return "SPAC_230706";
+ } else if (name.includes("ETN")) {
+ return "ETN_230706";
+ } else if (
+ name.includes("KODEX") ||
+ name.includes("KOSEF") ||
+ name.includes("KoAct") ||
+ name.includes("TIGER") ||
+ name.includes("ACE") ||
+ name.includes("ARIRANG") ||
+ name.includes("합성 H") ||
+ name.includes("HANARO") ||
+ name.includes("SOL")
+ ) {
+ return "ETF_230706";
+ } else {
+ return `kr/${code}`;
+ }
+};
+
+export const onErrorImg = (e) => {
+ e.target.src = default_Img;
+};
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..bb873ea
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ proxy: {
+ "/api": "", // 서버 주소 기입
+ },
+ },
+ resolve: {
+ alias: [
+ // 절대경로로 접근
+ { find: "~/components", replacement: "/src/components" },
+ { find: "~/lib", replacement: "/src/lib" },
+ { find: "~/router", replacement: "/src/router" },
+ { find: "~/routes", replacement: "/src/routes" },
+ { find: "~/store", replacement: "/src/store" },
+ { find: "~/assets", replacement: "/src/assets" },
+ { find: "~/util", replacement: "/src/util" },
+ ],
+ },
+});
+ 
+ 
+