Merge pull request #33 from codestates-seb/dev-client#3/header2

[Feat]로그인 시 헤더구현
-알림 아이콘, 프로필 샘플 아이콘을 images폴더에 추가
-로고 이미지를 버튼으로 변경
-로그인 시 로그인 버튼을 로그아웃 버튼으로 변경
-알림 버튼, 프로필 버튼 추가

-현재 메인 페이지에 로그인 시 헤더와 로그아웃 시 헤더가 둘 다 들어가 있는데 작업할 때 상황에 맞는 헤더 하나만 쓰고 나머지 하나는 메인 페이지에서 컴포넌트를 삭제하시면 됩니다.
Issues #3

client/src/components/Headers/LoginHeader.tsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+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 [searchValue, setSearchValue] = useState<string>('');
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value);
+  };
+
+  const logoutText = "로그아웃";
+
+  const handleLogoClick = () => {
+    console.log("Logo clicked");
+  };
+
+  return (
+    <HeaderContainer>
+      <LogoButton onClick={handleLogoClick}>
+        <LogoImage src={StockHolmLogo} />
+      </LogoButton>
+      <SearchBar value={searchValue} onChange={handleSearchChange} />
+      <UserActions>
+        <NotificationButton> 
+          <img src={AlarmImage} alt="Notification" /> 
+        </NotificationButton>
+        <ProfileButton>
+          <ProfileImage src={SampleProfile} />
+        </ProfileButton>
+        <LogoutButton>{logoutText}</LogoutButton>
+      </UserActions>
+    </HeaderContainer>
+  );
+};
+
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem ;
+  background-color: #fff;
+  border-bottom: 1px solid #2F4F4F; 
+  width: 100%;
+  height: 51px;
+`;
+
+const LogoButton = styled.button`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  
+  &:focus {
+    outline: none;
+  }
+`;
+
+const LogoImage = styled.img`
+  height: 40px;
+  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`
+  display: flex;
+  align-items: center;
+`;
+
+const NotificationButton = styled.button`
+  margin-right: 1rem; 
+  background-color: #fff;
+  border: none;
+  cursor: pointer;
+
+  img {   
+    height: 40px;
+    width: auto;
+  }
+`;
+
+const ProfileButton = styled.button`
+  margin-right: 1rem;
+  background-color: transparent; // You can adjust this color if needed
+  border: none;
+  cursor: pointer;
+  padding: 0;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const ProfileImage = styled.img`
+  height: 40px;
+  width: auto;
+`;
+
+
+const LogoutButton = 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; 
+  }
+`;
+
+
+
+export default LoginHeader;

client/src/components/header.tsx → client/src/components/Headers/LogoutHeader.tsx

@@ -1,9 +1,9 @@
 
 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 = () => {
   const [searchValue, setSearchValue] = useState<string>('');
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -12,17 +12,21 @@ const Header: React.FC = () => {
 
   const loginText = "로그인";
 
+  const handleLogoClick = () => {
+    console.log("Logo clicked");
+  };
+
   return (
     <HeaderContainer>
-      <LogoImage src={StockHolmLogo} />
+      <LogoButton onClick={handleLogoClick}>
+        <LogoImage src={StockHolmLogo} />
+      </LogoButton>
       <SearchBar value={searchValue} onChange={handleSearchChange} />
       <LoginButton>{loginText}</LoginButton>
     </HeaderContainer>
   );
 };
 
-
-
 const HeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -35,6 +39,17 @@ const HeaderContainer = styled.div`
   
 `;
 
+const LogoButton = styled.button`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  
+  &:focus {
+    outline: none;
+  }
+`;
+
 const LogoImage = styled.img`
   height: 40px;
   width: auto;
@@ -64,4 +79,4 @@ const LoginButton = styled.button`
   }
 `;
 
-export default Header;
+export default LogoutHeader;

client/src/page/MainPage.tsx

@@ -1,10 +1,12 @@
 import { styled } from "styled-components";
-import Header from "../components/header"
+import LogoutHeader from "../components/Headers/LogoutHeader"
+import LoginHeader from "../components/Headers/LoginHeader"
 
 const MainPage = () => {
   return (
     <Container>
-      <Header />
+      <LoginHeader />
+      <LogoutHeader />
       <Main>
         <LeftSection></LeftSection>
         <CentralSection></CentralSection>