[FE]오른쪽 탭 디자인 변경 및 OAuth로그인 에러 해결Dev client#19/watch list

client/src/components/EntireList/StockItem.tsx

@@ -128,6 +128,7 @@ const StockPrice = styled.span<{ change: string }>`
 const StockChange = styled.span<{ change: string }>`
   color: ${(props) => props.change};
   cursor: pointer;
+
   font-size: 13px;
 `;
 

client/src/components/Logins/OAuthLogin.tsx

@@ -4,7 +4,7 @@ import GoogleLoginButton from './GoogleLoginButton';
 import KakaoLoginButton from './KakaoLoginButton';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../store/config';
-import TokenHandler from './TokenHandler';
+
 
 const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick, onEmailSignupClick, onLoginSuccess  }) => {
     const titleText = "로그인";
@@ -30,7 +30,6 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick
     return (
         <ModalBackground>
             <ModalContainer>
-                <TokenHandler />
                 <CloseButton onClick={onClose}>&times;</CloseButton>
                 <Title>{titleText}</Title>
                 <GoogleLoginButton backendURL={GOOGLE_BACKEND_URL} />

client/src/components/MarketComponents/MarketKospiChart.tsx

@@ -32,6 +32,7 @@ const MarketkospiChart = () => {
         myChart.setOption({
           title: {
             text: "Kospi",
+            left: "center",
           },
           tooltip: {
             trigger: "axis",
@@ -41,18 +42,18 @@ const MarketkospiChart = () => {
             type: "category",
             boundaryGap: true,
             data: kospiData.map((kospi: KospiProps) => {
-              const year = kospi.stck_bsop_date.slice(0, 4);
+              // const year = kospi.stck_bsop_date.slice(0, 4);
               const month = kospi.stck_bsop_date.slice(4, 6);
-              const period = `${year}년 ${month}월`;
+              const period = ` ${month}월`;
               return period;
             }),
           },
           yAxis: [
             {
               type: "value",
-              boundaryGap: [0, "10%"],
+              boundaryGap: [10, '10%'],
               position: "left",
-              interval: 100,
+              interval: 200,
               min: 2000,
               splitLine: {
                 show: true,
@@ -77,22 +78,22 @@ const MarketkospiChart = () => {
               symbol: "none",
               sampling: "lttb",
               itemStyle: {
-                color: function (params: any) {
+                color: function (params: { data: number[] }) {
                   // 주식 상승이면 빨간색, 하락이면 파란색 반환
                   return params.data[1] >= params.data[0]
-                    ? "rgb(255, 0, 0)"
-                    : "rgb(0, 0, 255)";
+                    ? "#f87369"
+                    : "#5a99f8";
                 },
               },
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: "rgb(0,0, 200)",
+                    color: "#5a99f8",
                   },
                   {
                     offset: 1,
-                    color: "rgb(250, 0, 0)",
+                    color: 'white',
                   },
                 ]),
               },
@@ -108,8 +109,8 @@ const MarketkospiChart = () => {
                   // 현재 가격과 이전 가격을 비교하여 색상 설정
                   const color =
                     currentPrice > previousPrice
-                      ? "rgb(255, 0, 0)"
-                      : "rgb(0, 0, 255)";
+                      ? "#f87369"
+                      : "#5a99f8";
 
                   return {
                     value: currentPrice,
@@ -122,10 +123,10 @@ const MarketkospiChart = () => {
             },
           ],
           grid: {
-            left: "10%",
-            right: "15%",
+            left: "15%",
+            right: "10%",
             top: "20%",
-            bottom: "40%",
+            bottom: "20%",
           },
         });
       }
@@ -146,10 +147,11 @@ interface KospiProps {
   bstp_nmix_prpr: string;
   mod_yn: string;
   stck_bsop_date: string;
+  param: string;
 }
 
 const KospiChartStyle = styled.div`
-  margin-top: 30px;
+  margin: 0px;
   width: 100%;
   height: 200px;
 `;