최종 프로젝트 12일 차 @드롭 다운, 모달 창 조정 및 css 작업

지난 주말 동안 열심히 css 작업을 하고 오늘도 계속 css 작업을 했다. css 작업이라고 얕볼 것이 아니라, 그저 유저에게 어떻게 보이는지가 목적일지라도 state로 관리하며 유저의 동작에 즉각 반응하도록 만들어야하기 때문에 여전히 해야할 일이 많았다. 

 

드롭 다운

먼저 일요일에 작업한 드롭 다운을 예시로 들자면 나는 드롭다운을 만들기 위해서

1. 커스텀 훅을 만들고
2. 변수들의 타입을 맞추고
3. relative와 absolute로 html 요소의 위치를 조정해야했다. 

또 드롭다운을 만드는 것이 처음이었기 때문에 여러 블로그를 살펴보며 드롭다운에 대해 공부하고 예시 코드 또한 살펴보아야 했다. 

 

아래는 드롭다운을 위한 커스텀 훅인데, 코드 자체는 예시 코드를 따왔다지만 타입을 지정하는 것이 정말 어려웠다. RefObject<HTMLDivElement>라느니, MouseEvent라느니, 심지어 MouseEvent는 타입을 복붙해서 넣었는데도 틀렸다는 메세지가 뜨기도 했다. 이러한 복잡한 타입에 대한 지식이 부족하기 때문에 또 이를 해결하기 위해서 구글 검색을 거쳤다. 

 

생각나는 타입 오류로는 e.target의 타입을 추론할 수가 없어서 인터넷에서 비슷한 사례로부터 타입(as Node)을 찾아낸 것이나,

 

커스텀 훅의 return 타입이 boolean | Dispatch<SetStateAction<boolean>> 형식으로 떠서 return 값들이 각각 boolean  과 Dispatch<SetStateAction<boolean>> 타입을 가지도록 하는 방법(as const)을 찾았던 것이다. 

const useDetectClose = (elem: RefObject<HTMLDivElement>, initialState: boolean) => {
  const [isOpen, setIsOpen] = useState(initialState);

  useEffect(() => {
    const onClick = (e: MouseEvent) => {
      if (elem.current !== null && !elem.current.contains(e.target as Node)) {
        setIsOpen(!isOpen);
      }
    };

    if (isOpen) {
      window.addEventListener('click', onClick);
    }

    return () => {
      window.removeEventListener('click', onClick);
    };
  }, [isOpen, elem]);
  return [isOpen, setIsOpen] as const;
};

 

모달 창 조정

또한 오늘은 끝없이 할 일이 있는 세세한 css 작업과 함께 어김없이 세세한 모달 창 조정을 또 해내야 했다. 

 

저번에 한 모달 창 조정은 open | close 컨트롤이었고, 이번에 한 조정은 한 모달 창의 내용을 내 마음대로 변경할 수 있도록 하는 작업이었다. 

 

아래 두 모달 창은 같은 컴포넌트로, display와 message라는 상태값을 선언하고 컨트롤해서 모달 창의 내용을 마음대로 변경할 수 있도록 했다. 

 

display는 '파티 프로필'이라는 제목을 보였다가 안 보였다가 하게 하는 것이고

 

message는 모달 창이 띄울 오류 메세지나 알림 메세지 같은 것들을 담을 수 있도록 했다. 

 

아이디어 자체는 단순했지만, 이번 프로젝트에서 사용한 모달 라이브러리의 구조를 다시 한 번 살펴보면서 신중하게 구현을 해야했다. 라이브러리는 내가 만든 게 아니라서 오류를 내도 쉽게 해결할 수가 없기 때문이다. 이번에 이렇게 모달 창 라이브러리를 크게 겪고 나니 다음번에는 직접 만들어봐야겠다는 생각이 들었다. 마침 드롭다운을 만들면서 구역 외를 클릭하면 창을 닫게 하는 구조에도 약간 감이 왔으니 말이다. 

 

그 외

그외에도 여태껏 css는 최소한으로만 신경을 써왔던 만큼 다들 css 작업에 익숙하지 않아서 생긴 해프닝들이 있었지만 대부분 조기에 발견할 수 있었던 것 같다. 

 

한 가지 희소식은 어제 가장 걱정이 되었던 초대하기 기능을 너무 복잡하게 수정하지 않아도 되었다는 것인데, 라디오 input 타입으로 1명을 선택해서 초대하는 기능을 상정하셨다고 해서 여러 명을 초대하는 경우의 로직에 대해서는 생각하지 않아도 되었다. 

 

역시 너무 힘들다싶은 것들은 일단 다른 사람들과 의논하고 볼 일인 것 같다.