[솔로 프로젝트]

상세 요구사항

Main page (메인 페이지)

• path: /
• Header와 Footer를 갖고 있으며, 해당 GNB(Global Navigation Bar)와 Footer는 어느 페이지를 가더라도 항상 존재해야 합니다.
  • Header 내에는 메인 로고와 햄버거 버튼이 있어야 합니다.
    • Header는 페이지 내 스크롤이 발생하더라도 항상 상단에 붙어있어야 합니다.
    • 메인 로고
      • 클릭하면 / 페이지(메인 페이지)로 이동해야 합니다.
    • 햄버거 버튼
      • OOO님 안녕하세요! 부분에는 본인의 이름을 넣습니다.
      • 상품리스트: 클릭하면 /products/list 페이지로 이동해야 합니다.
      • 북마크 페이지: 클릭하면 /bookmark 페이지로 이동해야 합니다.
  • Footer
    • 일련의 텍스트 정보들을 넣어줍니다.

 

Header.js

export default function Header() {

return (

// flex container

<header className="header-container">

<div className='logo-container'>

<div className='logo-img'>

<img src="logo.png" alt="logo" />

</div>

<span className='logo-title'>COZ Shopping</span>

</div>

<img src="hamburger.png" alt="hamburger menu" />

</header>

);

}

 

Footer.js

export default function Footer() {

return (

<footer className="footer-container">

<div className='info-container'>

<div className='footer-info'>개인정보 처리방침|이용 약관</div>

<span className='footer-source'>All rights reserved @ Codestates</span>

</div>

</footer>

);

}

 

 

App.css

* {

box-sizing: border-box;

padding: 0;

margin: 0;

}

.header-container {

display: flex;

justify-content: space-between;

align-items: center;

position: sticky;

top: 0;

background-color: white;

max-width: 1280px;

height: 80px;

padding: 0 76px;

box-shadow: 0 3px 3px rgb(197, 196, 196);

}

span.logo-title {

font-size: 2rem;

font-weight: bold;

padding-left: 12px;

vertical-align: middle;

}

div.logo-container {

display: flex;

}

div.logo-img {

display: flex;

justify-content: center;

align-items: center;

}

.footer-container {

display: flex;

justify-content: center;

align-items: center;

background-color: white;

max-width: 1280px;

height: 58px;

position: relative;

margin-top: 1120px;

box-shadow: 0 0 3px rgb(197, 196, 196);

}

div.info-container {

color: rgb(154, 153, 153);

bottom: 100px;

left: 100px;

}

div.footer-info {

text-align: center;

}

 

figma에서 logo를 다운받고 public폴더에 넣어서 Header에 className으로 줬다. 

Footer는 간단한데 하단으로 내리는 부분에서 막혀서 오래 걸렸던 것 같다. 구글 검색해서 줬는데도 적용이 안 돼서 다른 방법을 찾다가  margin-top으로 공간을 주니까 됐다. 생각보다 시간을 너무 많이 잡아먹어서 조급했다.. 햄버거 버튼은 다 구현한 뒤에 할 생각이다!