graph 영역 삽질 일기

간단한 부분에서 sidebar 구현에서 flex로 변경까지 여러 번 삽질해서 삽질 일기를 남겨봅니다.

초기 목표

그래프 영역을 sidebar처럼 만들어서 버튼 클릭시 열고 닫도록 기능 구현하는게 목표였다.

삽질 1. 버튼과 그래프 영역은 다른 컴포넌트였다.

• action, redux, store를 구현한 후, component를 구현하면서 state를 받아 컴포넌트에 주입하는 걸 당연히 한 파일에서 해야한다고 생각했다.

• toolbar component에는 graph 버튼만 존재하고 container는 section에 있기 때문에 이렇게 구현하면 안되는 것 깨달았다.

• graph 영역을 위한 component를 따로 만들었다.

  • components/toolbar/GraphButton에는 useDispatch만 사용하여 action을 store에 넘겨주도록 했다.

  const dispatch = useDispatch();
  
  const onClickHandler = () => {
    dispatch(GraphAction.clickButton());
  };

  • components/graph에서는 상태값을 받아와 visible 값에 따라 해당 컴포넌트를 렌더링했다.

   const { visible } = useSelector((state: rootState) => state.graphHandler);

삽질 2. animation 후 원래 위치로 돌아오던 문제

• styled-components에서는 keyframe을 사용하여 애니메이션 효과를 줄 수 있다.

const SlideUp = keyframes`
  from{
    opacity: 0;
    transform: transitionX(100%);
  }
  to{
    opacity: 1;
    transform: transitionX(0%);
  }
`; 

...
const Graph = styled.div`
  animation : ${(props)=> props.show? `${SlideUp}`:`${SlideDown}`} 1s linear;
`;

• 하지만 기대와는 다르게 애니메이션 효과 후에 component가 원래 위치로 돌아오는 문제가 생겼다.
• 삽질 끝에 애니메이션 endpoint를 유지하기 위해서는 forward라는 키워드가 있어야한다는 것을 알게 되었고, linear->forward로 변경했다.

  const Graph = styled.div`
    animation : ${(props)=> props.show? `${SlideUp}`:`${SlideDown}`} 1s forward;
  `;

삽질 3. fixed와 overflow

• forward로 component의 transition이 이동했지만, 사라지지 않고 scroll이 생겼다.
• 해당 component에 position: fixed를 했는데도 scroll이 생겼다.
• 생각해보니 width가 늘어나지 않고 고정되어야하는 부분은 해당 컴포넌트가 아니라 더욱 윗쪽 부모 컴포넌트라는 걸 깨닫게 되었다.
• Gobal style에 있는 body부분에 position: fixed와 `overflow: hidden'을 줘서 해결할 수 있었다.

삽질 4. 우리 프로젝트에 맞게 다시 구현...

• 보통의 sidebar였으면 여기서 끝났을 것이다. 하지만, 우리 프로젝트는 수식 표현 영역을 최대한 가리지 않아야한다...
• 수식 표현 영역을 가리면 안되기때문에 그래프 영역이 활성화되면 수식 표현 영역을 줄어야한다.
• 따라서 z-index=1을 주면 안되고 flex를 사용해서 컴포넌트를 삽입할 영역을 두었다.
• graph component는 state에 따라 변경되지만 subsection 영역은 리렌더링이 되지 않았다.
• 생각해보니 graph component를 아무리 변경해도 subsection에는 state를 넘겨주지 않았으니 렌더링되지 않는다. 따라서,
  • components/graph 삭제
  • subsection에 state를 넘겨주도록 변경

삽질 5. 다시 애니메이션... & display:none

• subsection에 state에 따라 display 변경해주니 기능은 구현됬다.
• 애니메이션 효과를 주기 시작하면서 다시 삽질이 시작되었다.
  • mainSection과 subSection이 함께 줄어들고 늘어나야하는데, SlideUp시에는 이미 mainSection이 줄어들고 남은 공간에 transition이 이동되는 문제
  • 'SlideDown'에서는 display: none 때문에 애니메이션 효과없이 그냥 닫겨버리는 문제
  • 첫번째 시도: setTimeout로 animation과 close에 시간차를 준다.
    • velopert의 styled-component 관련 비슷한 코드가 있는 것 같아서 활용했지만 실패
  • 두번째 시도: flex 속성 animation 활용하기
    **참고
    • http://jsfiddle.net/L8hktsgn/11/
    • https://jsfiddle.net/MadLittleMods/EM4xL/ **
    • 위 링크들을 참고하여 flex 속성 값을 활용해 animation 주는 방법을 시도했다.
    • section에 transition: 1s all을 주어 flexbox에 animation 효과를 주었다.
    • mainSection과 subSection 영역 비율을 맞추기위해 flex 비율을 2:1로 주었다.
    • state에 따라 flex-grow를 1과 0으로 변경하여 원하는 기능을 구현할 수 있었다.

삽질 6. subsection 내부에 컴포넌트가 있을 경우 visible이 0임에도 graph 영역이 나타나는 현상

• flexbox는 내부 content까지는 공간을 차지하기때문에 flex-grow가 0임에도 화면에 보이게된다.
• overflow:hidden과 width:0%를 주어서 내용물이 있어도 보이지 않게 해결했다.

const RightArea = styled.div<Props>`
flex: 1;
width: ${(props) => (props.show ? '100%' : '0%')};
flex-grow: ${(props) => (props.show ? '1' : '0')};
overflow: hidden;
`;

구현 결과