검색창 구현

CentralChart폴더의 차트 구현 컴포넌트를 header에 import
기존 SearchBar의 CSS 디자인을 입혔습니다.
Issues #15

client/src/components/Headers/LoginHeader.tsx

@@ -6,18 +6,15 @@ import SampleProfile from "../../asset/images/ProfileSample.png";
 import { useNavigate } from "react-router-dom";  
 import AlarmImage from "../../asset/images/alarm.png"; 
 import ProfileModal from "../Profile/profileModal";
+import StockSearchComponent from './stockSearchComponent';
 
 
 // 로그인 상태일 때의 헤더 컴포넌트
 const LoginHeader: React.FC<LoginHeaderProps> = ({ onLogoutClick }) => {
   const [isProfileModalOpen, setProfileModalOpen] = useState(false); // 프로필 모달 상태
-  const [searchValue, setSearchValue] = useState<string>('');  // 검색어 상태
   const navigate = useNavigate();  // 페이지 이동 함수
 
-  // 검색어 입력 처리 함수
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchValue(event.target.value);
-  };
+
 
   const logoutText = "로그아웃";
   // 프로필 모달 열기 함수
@@ -40,7 +37,8 @@ const LoginHeader: React.FC<LoginHeaderProps> = ({ onLogoutClick }) => {
       <LogoButton onClick={handleLogoClick}>
         <LogoImage src={StockHolmLogo} />
       </LogoButton>
-      <SearchBar value={searchValue} onChange={handleSearchChange} />
+      {/* <SearchBar value={searchValue} onChange={handleSearchChange} /> */}
+      <StockSearchComponent/>
       <UserActions>
         <NotificationButton> 
           <img src={AlarmImage} alt="Notification" />
@@ -92,16 +90,6 @@ const LogoImage = styled.img`
   width: auto;
 `;
 
-// 검색창 스타일
-const SearchBar = styled.input.attrs({
-  type: 'text',
-  placeholder: '검색...'
-})`
-  width: 50%;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-`;
 
 // 사용자 액션 버튼들의 스타일
 const UserActions = styled.div`

client/src/components/Headers/LogoutHeader.tsx

@@ -1,23 +1,18 @@
-import React, { useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
 import { useNavigate } from "react-router-dom";  // 라우터의 네비게이션을 사용하기 위해 가져옴
 import { setLogoutState } from '../../reducer/member/loginSlice';
 import { useDispatch} from 'react-redux';
+import StockSearchComponent from './stockSearchComponent';
 
 const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
   //reduc-toolkit 활용
   const dispatch = useDispatch();
 
-  const [searchValue, setSearchValue] = useState<string>("");  // 검색 값 상태 관리
   const navigate = useNavigate();  // 라우터 네비게이션 훅 사용
 
 
-  // 검색 입력 변경 핸들러
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchValue(event.target.value);
-  };
-
   const loginText = "로그인";  // 로그인 버튼 텍스트
 
   // 로고 클릭 핸들러
@@ -28,14 +23,14 @@ const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
   // isLoggedOut 변수를 항상 0으로 설정
   dispatch(setLogoutState());
 
-
   // 컴포넌트 렌더링
   return (
     <HeaderContainer>
       <LogoButton onClick={handleLogoClick}>
         <LogoImage src={StockHolmLogo} />
       </LogoButton>
-      <SearchBar value={searchValue} onChange={handleSearchChange} />
+      {/* <SearchBar value={searchValue} onChange={handleSearchChange} /> */}
+      <StockSearchComponent/>
       <LoginButton onClick={onLoginClick}>{loginText}</LoginButton>
     </HeaderContainer>
   );
@@ -76,16 +71,6 @@ const LogoImage = styled.img`
   width: auto;
 `;
 
-const SearchBar = styled.input.attrs({
-  type: "text",
-  placeholder: "검색...",
-})`
-  width: 50%;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-`;
-
 const LoginButton = styled.button`
   background-color: #fff;
   color: #2f4f4f;
@@ -98,5 +83,3 @@ const LoginButton = styled.button`
     background-color: #f2f2f2;
   }
 `;
-
-

client/src/components/Headers/stockSearchComponent.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { useDispatch } from "react-redux";
+import styled from "styled-components";
+import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
+import useGetCompanyList from "../../hooks/useGetCompanyList";
+
+interface CompanyProps {
+  companyId: number;
+  code: string;
+  korName: string;
+  stockAsBiResponseDto: null;
+  stockInfResponseDto: null;
+}
+
+const StockSearchComponent: React.FC = () => {
+  const dispatch = useDispatch();
+  const { companyList } = useGetCompanyList();
+  const [searchWord, setSearchWord] = useState("");
+
+  const handleChangeSearchWord = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchWord(e.target.value);
+  };
+
+  const handleSearchCompany = () => {
+    let searchResult: string = "noExistCompany";
+
+    companyList.forEach((company: CompanyProps) => {
+      if (company.korName === searchWord) {
+        searchResult = "ExistCompany";
+        dispatch(changeCompanyId(company.companyId));
+      }
+    });
+
+    if (searchResult === "noExistCompany") {
+      dispatch(changeCompanyId(-1));
+    }
+  };
+
+  const handlePressEnterToSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === "Enter" && e.nativeEvent.isComposing === false) {
+      handleSearchCompany();
+      setSearchWord("");
+    }
+  };
+
+  return (
+    <SearchContainer>
+      <StyledSearchInput 
+        value={searchWord}
+        onChange={handleChangeSearchWord} 
+        onKeyDown={handlePressEnterToSearch} 
+        placeholder="종목 검색"
+      />
+      <StyledSearchButton onClick={handleSearchCompany}>검색</StyledSearchButton>
+    </SearchContainer>
+  );
+};
+
+export default StockSearchComponent;
+
+// 스타일 정의
+
+const SearchContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-grow: 0.7;  // 여기에 추가
+`;
+
+const StyledSearchInput = styled.input.attrs({
+  type: "text",
+  placeholder: "검색...",
+})`
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  flex: 1;
+`;
+
+const StyledSearchButton = styled.button`
+  background-color: #fff;
+  color: #2f4f4f;
+  border: 1px solid #2f4f4f;
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  &:hover {
+    background-color: #f2f2f2;
+  }
+  margin-left: 0.5rem;
+`;