MathSection 영역이 다른 영역을 밀어내는 이슈 - boostcamp-2020/Project15-A-Client-Based-Formula-Editor GitHub Wiki

현재 이슈 사항

이슈사항

1차 해결

위 이미지를 보듯, 가운데 영역의 내부 아이템이 증가하면서 다른 영역을 밀어내는 이슈가 발생했습니다.
구축했던 레이아웃 구조를 다시 되짚어보고, 여러번의 시도 끝에 대부분 컴포넌트는 비율이나 flex로 되어있기 때문에 기준 너비가 없어서 발생한다고 판단했습니다.
따라서 이 문제를 해결하기 위해서는 우선적으로 최상단 DOM에 너비를 주어야한다는 결론을 냈습니다. global-style에 있는 #root의 width와 height를 주었습니다.

  #root {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

그 후, Aside 와 MainSection Container는 width로 23% 77%를 주었습니다. 그 결과, MainSection 영역이 아무리 증가해도 Aside를 밀어내지 않았습니다.

2차 해결

하지만 여전히 그래프 영역을 밀어내었기 때문에 이를 고치기 위한 방법을 고민했습니다.
첫째로, flex-grow를 0으로 주어 확장하지 않는 방법을 생각했었지만, graph영역이 활성화되었을때 해당 영역이 줄어들지않았습니다.
그래서 이 부분 또한 기준이 되는 'width'와 flex-basis를 visible 상태값에 따라 70% , 100%를 갖도록 함으로써 해결할 수 있었습니다.
--> (2020.12.16) flex-basis를 auto로 두면 width를 따라간다는 글을 보게 되어서 나중에 실험해봐야겠습니다.

//Mainsection 부분
export const MainSectionTemplate = styled.div<TemplateProps>`
  width: ${(props) => (props.show ? '70%' : '100%')};
  flex: 0 1 ${(props) => (props.show ? '70%' : '100%')};
  display: flex;
  flex-direction: column;
  position: relative;
`;

//GRAPH 영역 부분
export const RightArea = styled.div<Props>`
  flex: 0 1;
  flex-basis: ${(props) => (props.show ? '30%' : '0%')};
  width: ${(props) => (props.show ? '30%' : '0%')};
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: ${colors.graphPuple};
  overflow: hidden;
`;

3차 해결

width를 통해 너비가 강제된 덕분에 이전과 달리 tab이 계속적으로 증가해도 container가 확장하지않고 일정한 비율을 차지하도록 되었습니다.
또한, 처음에는 flex로 각 tab아이템의 너비를 수축하도록 만드려고 했으나, 계속 수축하면 닫기버튼이 보이지 않게되는 현상이 있었습니다.
따라서 overflow:scroll로 변경하여 모든 탭을 스크롤로 보이도록 수정하였습니다.
하지만, hover 시 높이가 커지는 현상때문에 tab영역의 height를 조절했습니다.

이번 기회로 flexbox에 대해 많이 공부를 하게 되었습니다. 반응형으로 만들기 위해 사용한 flex가 의외로 다루기 어려운 것을 깨달았습니다.
반응형으로 만들기 위해 좋은 방법을 꾸준히 생각하고 적용해봐야할 것 같습니다.

flex 참고

⚠️ **GitHub.com Fallback** ⚠️