[Add] 리팩토링 예시 코드

- 리팩토링 예시 코드 작성

Issues #122

client/src/components/EntireList/EntireList.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import Header from "./Header";
 import StockItem from "./StockItem";
 import useCompanyData from "../../hooks/useCompanyData";
 import { useSelector } from "react-redux"; // 👈 추가
@@ -23,8 +22,7 @@ import useGetCash from "../../hooks/useGetCash";
 const holdingAmountText = "보유 현금";
 const amountUnit = "원";
 
-const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListType }) => {
-  const [isMenuOpen, setMenuOpen] = useState(false);
+const EntireList = () => {
   const [showChangePrice, setShowChangePrice] = useState(false);
 
   // useCompanyData 훅 사용하여 데이터 가져오기
@@ -52,9 +50,6 @@ const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListTy
 
   return (
     <WatchListContainer>
-      <Header1Container>
-        <Header currentListType={currentListType} onChangeListType={onChangeListType} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
-      </Header1Container>
       {/* <Divider /> */}
       <Header2Container isLogin={isLogin}>
         {/* {isLogin == 0 ? (<HoldingsAmount>로그인이 필요한 서비스 입니다.</HoldingsAmount>) : (<HoldingsAmount>현금 보유량: {holdingsAmount}원</HoldingsAmount>)} */}
@@ -79,27 +74,14 @@ const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListTy
 
 export default EntireList;
 
-// Props와 상태에 대한 타입 정의
-type EntireListProps = {
-  currentListType: "전체종목" | "관심종목" | "보유종목";
-  onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
-};
-
 // WatchList 컴포넌트에 대한 스타일드 컴포넌트 정의
 const WatchListContainer = styled.div`
-  height: calc(100vh - 53px);
+  height: calc(100vh - 95px);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 `;
 
-const Header1Container = styled.div`
-  // 🔴
-  width: 100%;
-  height: 48px;
-  display: flex;
-`;
-
 const Header2Container = styled.div<{ isLogin: number }>`
   // 🔴
   width: 100%;

client/src/components/HoldingList/HoldingList.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import Header from "./Header";
 import StockItem from "./StockItem";
 import useGetStockHolds from "../../hooks/useGetStockholds";
 import { StockItemProps } from "./StockItem";
@@ -13,8 +12,7 @@ import { useSelector } from "react-redux";
 const evalutationProfitText = "평가 수익금";
 const profitUnit = "원";
 
-const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListType }) => {
-  const [isMenuOpen, setMenuOpen] = useState(false);
+const HoldingList = () => {
   const [showChangePrice, setShowChangePrice] = useState(false);
 
   const { stockHolds, stockHoldsLoading: isLoading, stockHoldsError: isError } = useGetStockHolds();
@@ -39,9 +37,6 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
 
   return (
     <WatchListContainer>
-      <Header1Container>
-        <Header currentListType={currentListType} onChangeListType={onChangeListType} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
-      </Header1Container>
       {/* <Divider /> */}
       <Header2Container>
         <EvaluationProfit profit={totalEvaluationProfit}>
@@ -75,27 +70,14 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
 
 export default HoldingList;
 
-type WatchListProps = {
-  currentListType: "전체종목" | "관심종목" | "보유종목";
-  onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
-  openOAuthModal: () => void;
-};
-
 const WatchListContainer = styled.div`
   width: 100%;
-  height: calc(100vh - 53px);
+  height: calc(100vh - 95px);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 `;
 
-const Header1Container = styled.div`
-  width: 100%;
-  height: 48px;
-  display: flex;
-  border-bottom: 1px solid black;
-`;
-
 const Header2Container = styled.div`
   width: 100%;
   height: 43.5px;

client/src/components/HoldingList/LoginRequestIndicator.tsx

@@ -3,16 +3,13 @@
 import React from "react";
 import styled from "styled-components";
 
-
-interface LoginRequestIndicatorProps {
-  openOAuthModal: () => void;
-}
-
-const LoginRequestIndicator: React.FC<LoginRequestIndicatorProps> = ({ openOAuthModal }) => {
+const LoginRequestIndicator = () => {
   return (
     <LoginRequestContainer>
       <div className="Notification">로그인이 필요한 서비스입니다.</div>
-      <button className="LoginButton" onClick={openOAuthModal}>StockHolm 로그인</button>
+      <button className="LoginButton" onClick={openOAuthModal}>
+        StockHolm 로그인
+      </button>
     </LoginRequestContainer>
   );
 };
@@ -39,8 +36,8 @@ const LoginRequestContainer = styled.div`
     background-color: #2f4f4f;
     border: none;
     border-radius: 0.3rem;
-    cursor: pointer;  
+    cursor: pointer;
   }
 `;
 
-export default LoginRequestIndicator;
+export default LoginRequestIndicator;

client/src/components/LeftStockListSection/Index.tsx

@@ -2,8 +2,9 @@ import { useSelector } from "react-redux";
 import { styled } from "styled-components";
 import { StateProps } from "../../models/stateProps";
 import Header from "./Header";
-import EntireList from "./EntireList";
-import HoldingList from "./HoldingList";
+import EntireList from "../EntireList/EntireList";
+import WatchList from "../watchlist/WatchList";
+import HoldingList from "../HoldingList/HoldingList";
 
 const LeftStockListSection = () => {
   const stockListType = useSelector((state: StateProps) => state.leftStockListType);
@@ -12,6 +13,7 @@ const LeftStockListSection = () => {
     <Container>
       <Header />
       {stockListType === 0 && <EntireList />}
+      {stockListType === 1 && <WatchList />}
       {stockListType === 2 && <HoldingList />}
     </Container>
   );