솔로프로젝트 과제 - header, footer

솔로프로젝트 처음으로는 간단하게 할 수 있는 header부분과 footer부분을 만들었다.
header부분은 프로젝트의 가장 윗줄로 사이트의 Navigation역할을 한다.

header.js

const Header = function Header() {
  const [drop, setDrop] = useState(false);
  
return (
    <div className="header">
      <div className="header-2">
        <img src={logo} alt="" className="img" />
        <span className="navtitle">COZ Shopping</span>
      </div>
      <div className="dropdown">
        <img
          src={hamburger}
          alt=""
          className="img2"
          onClick={() => {
            setDrop(!drop);
          }}
        />
        {drop === true ? ( // 삼항연산자를 이용해 햄버거버튼을 누르면 true, false에 따라 dropdown메뉴가 나오게 만들었다.
          <div className="dropdown">
            <img src={dropdown} alt="" className="dropdownimg" />
            <div className="dropdowntitle-1">OOO님, 안녕하세요</div>
            <div className="dropdowntitle-2">
              <img src={gift} alt="" className="icon" />
              상품리스트 페이지
            </div>
            <div className="dropdowntitle-3">
              <img src={star} alt="" className="icon" />
              북마크 페이지
            </div>
          </div>
        ) : null}
      </div>
    </div>
  );
};

차후 react router dom으로 링크 걸어줄 예정이지만 지금은 간단하게 목업만 디자인 해봤다.
너무 목업디자인만 생각하고 만들어서 그런지 만들고 난 뒤 드롭다운 메뉴를 보니 확장성이 매우 떨어져 보였다. 지금은 드롭다운 메뉴의 배경이되는 흰색 부분 이미지를 가져와 그 위에 글자를 올려놓는 식으로 만들었다. 수정을 하게 된다면 뒷 배경은 글자나 글자수를 추가하게 되면 늘어날 수 있도록 div박스를 배경으로 놓고 만들어야겠다는 생각이 든다.

App.js

/* header */
.header {
  background-color: white;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 8px 8px 0px rgb(0, 0, 0, 0.1);
  position: relative;
  position: fixed;
  width: 100%;
}
.header-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navtitle {
  font-weight: bold;
  font-size: 32px;
  margin-left: 10px;
}

.img {
  height: 40%;
  margin-left: 76px;
}
.img2 {
  height: 30%;
  margin-right: 76px;
}

/* dropdown */

.dropdownimg {
  position: relative;
  position: absolute;
  left: -130px;
  bottom: -180px;
}

.dropdowntitle-1 {
  width: 200px;
  height: 50px;
  position: absolute;
  left: -122px;
  bottom: -70px;
  border-bottom: solid 1px #888;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.dropdowntitle-2 {
  width: 200px;
  height: 50px;
  position: absolute;
  left: -122px;
  bottom: -120px;
  border-bottom: solid 1px #888;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.dropdowntitle-3 {
  width: 200px;
  height: 50px;
  position: absolute;
  left: -122px;
  bottom: -170px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.icon {
  margin-right: 10px;
}

드롭다운 메뉴의 위치조정은 포지션 속성을 이용해서 햄버거버튼 밑에 나오도록 했다.