[Fix]관심종목 컴포넌트 분리

헤더와 개별 주식을 분리
검색기능 삭제
Issues #19

client/src/components/Logins/GoogleSignin.tsx

@@ -17,6 +17,9 @@ const GoogleSignIn: React.FC = () => {
     dispatch(setLoginState());
   };
 
+
+
+
   const handleError = () => {
     console.log("Login Failed");
   };

client/src/components/watchlist/Header.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import styled from 'styled-components';
+import Menu_icon from "../../asset/images/menu.png";
+
+const INTEREST_LIST = "관심목록";
+const INVESTMENT_LIST = "투자목록";
+
+// Header 컴포넌트는 다음과 같은 기능을 수행합니다.
+// 1. 메뉴 아이콘과 현재 리스트 타입을 표시합니다.
+// 2. 메뉴 아이콘을 클릭하면 메뉴의 열림/닫힘 상태를 토글합니다.
+// 3. 메뉴가 열려 있으면 SlideMenu를 통해 관심목록과 투자목록을 선택할 수 있습니다.
+
+const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMenuOpen, setMenuOpen }) => {
+    return (
+        <HeaderWrapper>
+          <Icon 
+            src={Menu_icon}
+            alt="menu icon"
+            onClick={() => setMenuOpen(!isMenuOpen)}
+          />
+          <HeaderText>{currentListType}</HeaderText>
+          {isMenuOpen && (
+            <SlideMenu>
+              <MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
+              <MenuItem onClick={() => { onChangeListType(INVESTMENT_LIST); setMenuOpen(false); }}>{INVESTMENT_LIST}</MenuItem>
+            </SlideMenu>
+          )}
+        </HeaderWrapper>
+      );
+    };
+
+// HeaderProps는 Header 컴포넌트가 받을 props의 타입을 정의합니다.
+type HeaderProps = {
+    currentListType: string;
+    onChangeListType: (type: "관심목록" | "투자목록") => void;
+    isMenuOpen: boolean;
+    setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+
+  };
+
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
+const Icon = styled.img`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  margin-right: 10px;
+`;
+
+const HeaderText = styled.span`
+  font-size: 18px;
+`;
+
+const SlideMenu = styled.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 248px;
+  background-color: #f7f7f7;
+  border: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+`;
+
+const MenuItem = styled.button`
+  padding: 8px 16px;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  text-align: left;
+`;
+
+export default Header;

client/src/components/watchlist/StockItem.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// StockItem 컴포넌트는 주식 정보를 나타내는 UI를 구성합니다.
+const StockItem: React.FC<StockItemProps> = ({ stock, setShowChangePrice, showChangePrice }) => {
+    return (
+      <StockItemWrapper>  {/* 전체 아이템을 감싸는 래퍼 */}
+        <Logo src={stock.logo} alt="stock logo"/>  {/* 로고 이미지 */}
+        <StockInfo>  {/* 주식의 이름과 코드를 담는 섹션 */}
+          <StockName>{stock.name}</StockName>  {/* 주식 이름 */}
+          <StockCode>{stock.code}</StockCode>  {/* 주식 코드 */}
+        </StockInfo>
+        <StockPriceSection>  {/* 주식의 가격과 변동률을 담는 섹션 */}
+          <StockPrice change={stock.change}>{stock.price}</StockPrice>  {/* 주식 가격 */}
+          <StockChange 
+            change={stock.change} 
+            onMouseEnter={() => setShowChangePrice(true)} 
+            onMouseLeave={() => setShowChangePrice(false)}
+          >
+            {showChangePrice ? stock.changePrice : stock.change}  {/* 변동률 또는 변동 가격 */}
+          </StockChange>
+        </StockPriceSection>
+      </StockItemWrapper>
+    );
+  };
+
+  type Stock = {
+    name: string;
+    code: string;
+    price: string;
+    change: string;
+    changePrice: string;
+    logo: string;
+  };
+
+  type StockItemProps = {
+    stock: Stock;
+    showChangePrice: boolean;
+    setShowChangePrice: React.Dispatch<React.SetStateAction<boolean>>;
+  };
+
+const StockItemWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 8px 0;
+  border-bottom: 1px solid #e0e0e0;
+  width: 100%;
+  background-color: transparent;
+  cursor: pointer;
+`;
+
+const Logo = styled.img`
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  margin-right: 12px;
+`;
+
+const StockInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-right: 16px;
+`;
+
+const StockName = styled.span`
+  font-weight: bold;
+`;
+
+const StockCode = styled.span`
+  color: gray;
+`;
+
+const StockPriceSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const StockPrice = styled.span<{ change: string }>`
+  color: ${props => props.change.startsWith('+') ? 'red' : 'blue'};
+`;
+
+const StockChange = styled.span<{ change: string }>`
+  color: ${props => props.change.startsWith('+') ? 'red' : 'blue'};
+  cursor: pointer;
+`;
+
+export default StockItem;