diff --git a/src/components/Header.js b/src/components/Header.js index 0753ed5b938a04f309f1bdd30af7ed03a6335c4f..aac1118394a527e073fc94d49f96897f68252c1c 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -3,10 +3,11 @@ import { useNavigate } from "react-router-dom"; import header_styles from './Header.module.css'; import Logout from './logout'; import { AuthContext } from '../App'; + const Header=()=>{ const { userData } = useContext(AuthContext); - const navigate = useNavigate(); + const [LogoutModalOpen, setLogoutModalOpen] = useState(false); const [showUserInfo, setShowUserInfo] = useState(false); @@ -62,37 +63,36 @@ const Header=()=>{ return ( - <header> + <header className={header_styles.header}> <div className={header_styles.header_content}> - - <div className={header_styles.header_logo}><a href="/"><img src="/logo.png"></img></a></div> + <div className={header_styles.header_logo}><img src="/logo.png" onClick={goToHome}></img></div> <nav className={header_styles.header_nav}> - <ul> - <li onClick={goToHome}><a>홈</a></li> - <li onClick={goToSearch}><a>검색</a></li> - <li onClick={goToClientservice}><a>고객지원</a></li> - <li onClick={goToMypage}><a>마이페이지</a></li> + <ul className={header_styles.list}> + <li onClick={goToHome}>홈</li> + <li onClick={goToSearch}>검색</li> + <li onClick={goToClientservice}>고객지원</li> + <li onClick={goToMypage}>마이페이지</li> - <li><a onClick={handleimgClick}><img src="/logout_img.png" - ></img></a> - {showUserInfo &&( - <div className={header_styles.user_info}> - <div className={header_styles.profileinfo}> - <div><img className={header_styles.circular_img} src={userData.imagePath} alt="Profile"></img></div> - <div className={header_styles.userTextInfo}> - <div className={header_styles.userName}>{userData.name}</div> - <div className={header_styles.userNickname}>{userData.nickname}</div> + <li> + <a onClick={handleimgClick}><img src="/logout_img.png"></img></a> + {showUserInfo &&( + <div className={header_styles.user_info}> + <div className={header_styles.profileinfo}> + <div> + <img className={header_styles.circular_img} src={userData.imagePath} alt="Profile"/> </div> + <div className={header_styles.userTextInfo}> + <div className={header_styles.userName}>{userData.name}</div> + <div className={header_styles.userNickname}>{userData.nickname}</div> </div> - - <button className={header_styles.logout} onClick={openLogoutModal}>로그아웃</button> </div> - )} + + <button className={header_styles.logout} onClick={openLogoutModal}>로그아웃</button> + </div> + )} </li> - {/* </div> */} </ul> </nav> - </div> <Logout modalOpen={LogoutModalOpen} closeModal={closeLogoutModal} handleLogout={handleLogout} /> diff --git a/src/components/Header.module.css b/src/components/Header.module.css index a0fb0c3fe3129585c3ced933a3bc49ac99976aa7..8e39327659fad2932a2b1c35dbd4fc28532b20a0 100644 --- a/src/components/Header.module.css +++ b/src/components/Header.module.css @@ -1,64 +1,58 @@ @import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); -header { - background-color: white; - color: black; - padding: 1em; + +.header { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; + + width: 100%; + height: 120px; border-bottom: 2px solid #ddd; + padding: 20px; + + background-color: white; + color: black; + + font-weight: bold; - position: sticky; - top: 0; + /* top: 0; */ z-index:2; +} + +.header_content{ + display: flex; + justify-content: center; + align-items: center; - } .header_logo img { - height: 80px; /* 이미지 높이 조절 */ - margin-left: 20px; + height: 90px; /* 이미지 높이 조절 */ + margin-left: 100px; margin-right:100px; } -.header_nav { - margin-top: 3px; - display: flex; /* 로고와 네비게이션을 한 행에 배치하기 위해 추가 */ - -} -.header_nav ul { - list-style: none; +.header_nav{ display: flex; - + margin-top: 3px; } -.header_content { - display: flex; - align-items: center; - width: 100%; - +.list{ + display: flex; + list-style: none; } - .header_nav li { - font-size: 17px; - margin-top: 10px; + font-size: 19px; cursor: pointer; margin-right: 175px; - -} -.header_nav a { - text-decoration: none; - color: black; - } .header_nav li:last-child a img { height: 30px; width: auto; - - } + .user_info{ position: absolute; @@ -74,6 +68,7 @@ header { font-size: 15px; } + .profileinfo{ margin:10%; align-items: center; @@ -81,9 +76,6 @@ header { } - - - .circular_img { width: 50px; /* Adjust as needed */ height: 50px; /* Adjust as needed */ @@ -99,9 +91,11 @@ header { margin-bottom:10px; } + .userName{ font-size:14px; } + .logout { background-color:#9FB8AB; @@ -119,6 +113,7 @@ header { /* 추가적인 로그아웃 스타일 지정 */ } + .profileinfo{ display:flex;