EFFI 프로젝트 #1 UI 와이어프레임 만들기

디자인 시안이 나오기전 와이어프레임이 먼저 나왔고 이에 따라 디자인이 나오기전에 FE끼리 미리 UI프레임 잡아두기를 진행하고자 했다
5명이 각자 페이지와 모달 등 나눌 수 있는 부분을 나누고 작업을 진행했다
내가 맡은 부분은 sideBar랑 navBar였고 일부 페이지를 제외하고는 모두 적용되어야 하는 부분이였기 때문에 호환성을 고려해야했다

고려해야 할 점

구현 방향에 대해 팀원들과 상의한 결과 fixed로 고정하거나 block으로 처리하거나 였는데 fixed로 결정되었다 추후 확장성을 고려한 방법이였고 이를 고려해서 모달 파트를 맡은 팀원과 상의해서 z-index를 설정하고 메인섹션쪽에서 margin으로 sideBar랑 navBar만큼 미는 형식으로 구현해야했다

접근방식

아무래도 반응형도 고려해야하고 margin으로 밀면 height 100vh를 줬을 시 스크롤이 발생하는 이슈가 생기니 margin을 계산해서 수치를 줘야했다
각 디바이스별 navBar와 sideBar크기를 전역변수처리해서 import해서 쓰는 방식은 채용했다 그에따라 팀원들에게 요청해서 height에 px처리보단 vh나 %를 이용해서 디바이스별 스크롤 발생여부를 제거해줬다

const S = {
  Main: styled.main<{ isSubSection: boolean }>`
    ${({ isSubSection }) =>
      isSubSection &&
      `
      margin: ${navBarHeight.desktop} 0 0 ${sideBarWidth.desktop};
      min-height: calc(100vh - ${navBarHeight.desktop});
      @media ${device.tablet} {
        margin: ${navBarHeight.tablet} 0 0 ${sideBarWidth.tablet};
        min-height: calc(100vh - ${navBarHeight.tablet});
      }
      @media ${device.mobile} {
        margin: ${navBarHeight.mobile} 0 0 ${sideBarWidth.mobile};
        min-height: calc(100vh - ${navBarHeight.mobile});
      }
    `}
  `,
};

이후 작업

다음은 mockData를 만들어서 데이터를 뿌려주는 테스트를 한뒤 추후 api가 나오면 갈아끼울 수 있도록 미리 사전 데이터 작업을 할 예정이다