[Feat] 로그인 컴포넌트 브랜치 병합

- 로그인/로그아웃 관련 컴포넌트 구현으로 인한 브랜치 병합

Issues #11

client/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.5.0",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "react": "^18.2.0",

client/src/components/Headers/LoginHeader.tsx

@@ -4,7 +4,7 @@ import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
 import SampleProfile from "../../asset/images/ProfileSample.png"; 
 import AlarmImage from "../../asset/images/alarm.png"; 
 
-const LoginHeader: React.FC = () => {
+const LoginHeader: React.FC<LoginHeaderProps> = ({ onLogoutClick }) => {
   const [searchValue, setSearchValue] = useState<string>('');
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -30,12 +30,18 @@ const LoginHeader: React.FC = () => {
         <ProfileButton>
           <ProfileImage src={SampleProfile} />
         </ProfileButton>
-        <LogoutButton>{logoutText}</LogoutButton>
+        <LogoutButton onClick={onLogoutClick}>{logoutText}</LogoutButton>  {/* 로그아웃 버튼 클릭 시 onLogoutClick 실행 */}
       </UserActions>
     </HeaderContainer>
   );
 };
 
+export default LoginHeader;
+
+interface LoginHeaderProps {
+  onLogoutClick: () => void;  // 로그아웃 클릭 핸들러 타입 정의
+}
+
 const HeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -124,4 +130,3 @@ const LogoutButton = styled.button`
 
 
 
-export default LoginHeader;

client/src/components/Headers/LogoutHeader.tsx

@@ -1,19 +1,9 @@
-<<<<<<< HEAD:client/src/components/header.tsx
 import React, { useState } from "react";
 import styled from "styled-components";
-import StockHolmLogo from "../asset/images/StockHolmLogo.png";
+import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
 
-const Header: React.FC = () => {
+const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
   const [searchValue, setSearchValue] = useState<string>("");
-=======
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import StockHolmLogo from "../../asset/images/StockHolmLogo.png"
-
-const LogoutHeader: React.FC = () => {
-  const [searchValue, setSearchValue] = useState<string>('');
->>>>>>> abeda5eea2cb094da744b5034865c55e4cbb769f:client/src/components/Headers/LogoutHeader.tsx
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(event.target.value);
@@ -31,7 +21,7 @@ const LogoutHeader: React.FC = () => {
         <LogoImage src={StockHolmLogo} />
       </LogoButton>
       <SearchBar value={searchValue} onChange={handleSearchChange} />
-      <LoginButton>{loginText}</LoginButton>
+      <LoginButton onClick={onLoginClick}>{loginText}</LoginButton>
     </HeaderContainer>
   );
 };
@@ -52,7 +42,7 @@ const LogoButton = styled.button`
   border: none;
   cursor: pointer;
   padding: 0;
-  
+
   &:focus {
     outline: none;
   }
@@ -86,5 +76,8 @@ const LoginButton = styled.button`
     background-color: #f2f2f2; // 호버 시 약간 어두운 흰색으로 변경
   }
 `;
+interface LogoutHeaderProps {
+  onLoginClick: () => void;
+}
 
 export default LogoutHeader;