diff --git a/client/src/components/Headers/LoginHeader.tsx b/client/src/components/Headers/LoginHeader.tsx index b9889b7b..1e5ca928 100644 --- a/client/src/components/Headers/LoginHeader.tsx +++ b/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 = ({ onLogoutClick }) => { const [isProfileModalOpen, setProfileModalOpen] = useState(false); // 프로필 모달 상태 - const [searchValue, setSearchValue] = useState(''); // 검색어 상태 const navigate = useNavigate(); // 페이지 이동 함수 - // 검색어 입력 처리 함수 - const handleSearchChange = (event: React.ChangeEvent) => { - setSearchValue(event.target.value); - }; + const logoutText = "로그아웃"; // 프로필 모달 열기 함수 @@ -40,7 +37,8 @@ const LoginHeader: React.FC = ({ onLogoutClick }) => { - + {/* */} + 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` diff --git a/client/src/components/Headers/LogoutHeader.tsx b/client/src/components/Headers/LogoutHeader.tsx index e9c8ce47..72afe9e1 100644 --- a/client/src/components/Headers/LogoutHeader.tsx +++ b/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 = ({ onLoginClick }) => { //reduc-toolkit 활용 const dispatch = useDispatch(); - const [searchValue, setSearchValue] = useState(""); // 검색 값 상태 관리 const navigate = useNavigate(); // 라우터 네비게이션 훅 사용 - // 검색 입력 변경 핸들러 - const handleSearchChange = (event: React.ChangeEvent) => { - setSearchValue(event.target.value); - }; - const loginText = "로그인"; // 로그인 버튼 텍스트 // 로고 클릭 핸들러 @@ -28,14 +23,14 @@ const LogoutHeader: React.FC = ({ onLoginClick }) => { // isLoggedOut 변수를 항상 0으로 설정 dispatch(setLogoutState()); - // 컴포넌트 렌더링 return ( - + {/* */} + {loginText} ); @@ -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; } `; - - diff --git a/client/src/components/Headers/stockSearchComponent.tsx b/client/src/components/Headers/stockSearchComponent.tsx new file mode 100644 index 00000000..5e47f036 --- /dev/null +++ b/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) => { + 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) => { + if (e.code === "Enter" && e.nativeEvent.isComposing === false) { + handleSearchCompany(); + setSearchWord(""); + } + }; + + return ( + + + 검색 + + ); +}; + +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; +`;