2021 5월 8일 Front-end studying

Typescript Styled component 를 사용해서 Nav 바를 생성하고 모달형식의 로그인 로그아웃 창을 만들었다. 아이콘들은 font awesome 에서 Typescript 형식으로 이용했는데 처음에 이해가 안가서 시간좀 걸렸다. 이제 아이콘 활용도가 많이 높아질것같음.

모달창을 띄울때 모달창을 제외한 공간을 클릭했을때 모달창을 닫게 해야하는데 이것을 구현하기위해서는 useRef() 를 사용했다. useRef() 는 지정 document dom 을 이용하고싶을때 사용한다.

 const overLay = useRef<HTMLDivElement>(null);

  const handleLayOut = (e: React.MouseEvent<HTMLElement>) => {
    if (e.target === overLay.current) {
      login();
    }
  };
  
        <LayOut onClick={handleLayOut} ref={overLay} /> //이부분이 LayOut의 태그의 돔을 픽한다는 느낌이다. 

모달창 밖을 클릭했을때 의 클릭 이벤트와 layout의 dom 이 일치했을때 창을 닫게했다.

닫기 아이콘에 커서를 가져다 놓았을때 transition 을 써서 hover 를 줬다.

transition 에는 배경화면을 변경할수있는거 또는 움직이게할수도있다.
transform 에는
trotate = 회전, translate= 이동, scale= 크기, skew= 기울기, matrix= 모든것을 종합해놓으것. 이 있다.

const MoadalClose = styled.div`
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  // transition: transform 700ms ease-in-out;
  transition: background-color 2s;
  &: hover {
    // transform: rotate(-180deg);
    // transform: translate(50px, 30px);
    // transform: scale(5, 5);
    // transform: skew(0, -20deg);

    background-color: yellow;
  }
`;