[5/26] 퍼블리싱 완료

0. 프로젝트 진행상황

이력서를 넣었던 회사에서 과제전형 진행, 최종면접 (in Seoul) x3을 했더니 두 달이 훌쩍 지났다...
현재 진행상황은 로그인 / 메인페이지 / 메뉴 퍼블리싱만 완료.
다시 달려보자!

1. 애로사항

메뉴 빼고는 퍼블리싱 하는데는 그닥 어려운 점은 없었다.

전체적으로 반응형으로 만들려다 보니 메뉴가 active되었을 때 동그라미가 해당 위치에 정확하게 위치하게끔 구현하는 부분에 고민을 했었다.

before

<ul className={styles.wrap} onClick={menuClickHandler}>
  <li className={cx("homeBtn", isActive === "homeBtn" ? "active" : "")}>
    <Link href="/" aria-label="homeBtn">
      <HomeBtn />
    </Link>
  </li>
  ...

기존엔 이런 식으로 마크업을 했었는데

after

<div className={styles.background}>
  <ul className={styles.wrap} onClick={menuClickHandler}>
    <li className={cx("homeBtn", isActive === "homeBtn" ? "active" : "")}>
      <Link href="/" aria-label="homeBtn">
        <HomeBtn />
      </Link>
    </li>
    ...

ul을 div로 감싸서

• div부분을 반응형으로 늘어나게 만듦
• ul은 div의 가운데에 위치하게 만들고, width를 350px로 고정

-했더니 화면 크기가 늘어나도 동그라미가 제대로 위치하게 되었다.
하지만 화면 크기가 늘어나도 각 메뉴들 간격은 고정이라는 거.

무튼 퍼블리싱 완료!