alert(popUp) 커스텀하기
기존 window객체에있는 alert메서드를활용했을떄 나타다는 메세지창은 디자인적으로 현재 사이트와 맞지 않다고 생각되어 커스텀화를 해야할 것이라고 생각했었다. 구글링중 토스트메세지,sweetalert2등의 라이브러리를통해서 이를 해결할 수 있을것이라 생각했엇는데, 완전히 우리의 사이트와 맞게 커스텀화를 하는방식이라기보다 어느정도 템플릿을 지켜가며 커스텀이 되는것이라 판단이되어 이 라이브러리를 공부해서 사용하는 시간과 비슷한 템플릿을 찾는시간등을 고려했을떄 컴포넌트형식으로 만들어 직접 커스텀화를 하는것과 그렇게 큰 차이가 없을것이라 판단되었다. (물론 라이브러리를 사용하지않고 만들어보고 싶었던 욕심도 있었다. 그리고 아래에서 사용하는 팝업창은 alert창과 동일한 의미이다.)
- 우선 alert창을 생각해봤을때 사용자에게 추가적인 요청을받는 alert창, 단순히 정보전달을위한 alert창으로 총 2가지케이스로 분류된다.
- 정보전달을위한 alert의경우 어느정도보여주고 자동으로 사라지게 만들어야하는 요소를 생각해봐야한다.
- 또한 사용자 편의성을위해 enter나 esc등의 키보드로도 요청을 할 수 있게 만들어야한다.
1) 무엇을 props로 받는가. (관련 커밋 링크)
-
첫번쨰prop은 popUp부터 설명하자면 이 변수는 현재 유저가 popUp을 요청했을떄 팝업창을 보여주게 해주는 변수다. default값을 false로 유지하여 평소에는 보여주지않다가, 사용자가 예를들어 게시물 수정이나 게시물 작성완료버튼을 클릭했을떄 true로 바꿔줌으로써 보여줄 수있게해준다.
-
두번쨰prop은 사용자가 어떤 버튼을 클릭하여 정말로 의도한 행위인지를 다시한번 물어봄으로써 확인 만약 유저가 취소버튼을 클릭했으면 팝업창을 보이지않게하기위해 전달하는 함수다.
-
세번쨰 prop은 말그대로 팝업창에 어떤 메세지를 전달할것인가를 해당 컴포넌트로부터 받는 변수다.
-
네번쨰 prop은 이 팝업창이 사용자에게 추가적으로 요청을 요구하는 팝업창인지 단순히 메시지만을 전달하기위한 팝업창인지를 구분시켜주는 변수다.( 추가적인 요청을 요구하는 팝업창은 버튼이 필요하기떄문에)
-
5번쨰 prop은 매 상황마다 "취소"는 고정된 버튼이름일지라도, 요청을 보내는 부분은 버튼이름이 고정적이지않아 변수로 받아 사용했다.
-
6번쨰 prop은 해당 버튼을 클릭했을떄 동작을 의미하는 함수를 전달해주기위해 사용했다.
-
첫번쨰 구상조건은 isButton변수를통해 &&연산자를사용하여 컴포넌트내에서 분기처리로 해결하였다. (관련 커밋 링크)
-
두번쨰 구상조건은 아래부분에서 작성했지만 webApi에서 제공하는 setTimeout함수를 이용하여 충족시켰다.
-
세번쨰 구상조건은 팝업이 활성화되어있다면 window객체에 이벤트를 등록하여 키보드 키를 눌렀을떄 실행되는 콜백함수에서 키 정보를 확인후 esc,enter이면 적절한 함수를 호출 시켰다. (관련 커밋 링크)
-
전체적인 상황이 전부 적용되는 게시물상세컴포넌트를 예시로 사용하였다.
-
컴포넌트에서 팝업을 제어하는데 필요한 요소들 (관련 커밋 링크)
-
기존의 window에서 제공하는 alert 메서드 처럼 함수화하여 사용하기 (관련 커밋 링크)
1) 유저에게 추가적인 요청를 요구하는 popUp (관련 커밋 링크)
-
아래와같은 팝업을 의미한다.
-
아래와같은 팝업을 의미한다.
-
분기처리를통해 작성된 댓글내용이 없다면 위에서 작성한 alertPopUp함수에 보여주고자하는 내용과 적절한 시간을 설정하여 인자로 전달해준다. (관련 커밋 링크)
- 직접 구상하게되면 작성되는 코드양이 많아진다. 기존에 window객체에서 제공되는 alert메서드는 서버통신을 하는 코드에서도 바로사용할 수 있지만, 이를 컴포넌트로 직접 구성하다보니 사용할 수 있는 영역이 컴포넌트 영역으로 제한되어 추가적으로 작성되는 코드양이 늘어난다는점이 가장 큰 단점인것같다. 라이브러리의 편의성을 다시한번 느낄수 있었던 경험이였다.