[Design]오른쪽 탭 디자인 변경

게시판 UI 단순화
시장정보 UI 단순화
게시판에서 게시글 작성시 또는 댓글 작성시 이름과 시각 출력
전체종목을 종목 랭킹으로 변경
종목랭킹 필터 기능 4개 구현
종목랭킹 데이터 정상화
OAuth로그인 기능 에러 해결
Issues #15

client/src/components/EntireList/StockItem.tsx

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

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/Logo/Logo.tsx

@@ -0,0 +1,3 @@
+
+// import Samsung_logo from 'client/src/asset/logos/Samsung_logo.png';
+

client/src/components/MarketComponents/MarketKospiChart.tsx

@@ -32,6 +32,7 @@ const MarketkospiChart = () => {
         myChart.setOption({
           title: {
             text: "Kospi",
+            left: "center",
           },
           tooltip: {
             trigger: "axis",
@@ -41,16 +42,16 @@ 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: 200,
               min: 2000,
@@ -77,7 +78,7 @@ const MarketkospiChart = () => {
               symbol: "none",
               sampling: "lttb",
               itemStyle: {
-                color: function (params: any) {
+                color: function (params: { data: number[] }) {
                   // 주식 상승이면 빨간색, 하락이면 파란색 반환
                   return params.data[1] >= params.data[0]
                     ? "#f87369"
@@ -123,9 +124,9 @@ const MarketkospiChart = () => {
           ],
           grid: {
             left: "15%",
-            right: "0%",
+            right: "10%",
             top: "20%",
-            bottom: "33%",
+            bottom: "20%",
           },
         });
       }
@@ -150,7 +151,7 @@ interface KospiProps {
 }
 
 const KospiChartStyle = styled.div`
-  margin-top: 0px;
+  margin: 0px;
   width: 100%;
   height: 200px;
 `;