♻️ Refactor: 모달 리팩토링

[un0211]

작업 설명

현재 모달에서는 Props가 여러 타입으로 올 수 있어서 | 로 연결하고, 타입 단언을 하고 있습니다.
미리 해당 타입이 맞는지 확인하는 방어적 코드를 추가합니다.

세부 작업 목록

• 확인, 취소/확인만 있는 간단한 모달 통합
  • notificationModal: 설명과 확인 버튼만 존재. 특별한 작업 원할 시 onClick 선택적으로
  • confirmModal: 삭제전 확인하는 모달. 삭제와 확인 버튼 존재. 삭제작업은 onActionClick 필수
• 이외 모달 리팩토링
  • newColumn 모달, ColumnsSection 수정
  • modifyColumn
  • inviteMember
  • newDashboard
• ModalProps 타입 단언 방어적 코드 작성

관련 이슈

• ✨ Feat: 모달 기능 #42

[un0211]

논의가 필요한 부분이 있습니다!

지금 대양님이 만들어준 모달은 함수에 필요한 인자를 모달에 넘겨주고, 모달에서 함수를 만들어서 실행하고 있습니다.
저는 공통으로 쓸만한 모달들은 아예 함수를 넘겨주는 방식으로 처리하려고 합니다.

요약하면 함수에 필요한 값 대신 함수 자체를 openModal 호출 시 인자로 넘기는 것입니다. 지금은 컬럼 삭제 모달, 대시보드 삭제 모달, 구성원 삭제 모달을 따로 만든다면, 그냥 확인/취소가 있는 모달을 만들고, 거기서 할 일을 props로 넘겨주는 방식입니다.

제가 생각하는 공통 모달:

확인	취소/확인

예시:

(실제로는 onActionClick은 공통Props에 포함될 것이므로 ModifiedColumnDeleteModalProps가 따로 정의될 일은 없습니다.)

이렇게 되면 handle 함수는 외부(모달을 여는 곳)에서 만들어서 인자로 보내야 합니다.
고민되는 점들은 다음과 같습니다.

• 모달에서 일어나는 일은 모달에서 함수 정의하는 게 더 옳은가? (의미상)
• 모달에서 정의했을 때 장점
  • 모달을 호출하는 곳에서 함수를 정의하면 호출하는 곳 코드가 복잡해질 수 있다.
  • 모달에서 함수를 생성하면 사용하는 입장에서 편리하다. (하지만 이건 어차피 누군가는 정의해야하며, 공통 모달은 한 페이지에서만 쓰이므로 실제로는 큰 차이가 없다)
• 밖에서 정의했을 때의 장점
  • 많은 모달들을 만들 필요 없이 공통 템플릿을 사용할 수 있다.

-> 저희가 한 모달을 여러 페이지에서 사용할 일이 있다면, 각각 모달을 만드는 것이 무조건 좋을 것이라 생각합니다.
(ex. 컬럼 삭제가 여기저기서 쓰인다면, 그 함수를 사용하는 곳마다 만드는 것보다는 모달 안에서 만드는 게 낫다. but 우리는 그런 일은 딱히 없기에 굳이 각각 만들 필요 없을 듯 하다.)
-> 각각 모달을 만들어주는 게 사실 cost가 더 큰 일인데, 이미 대양님이 해주신 걸 지울 필요가 있을까 싶기도 합니다..

[wjsdncl]

제가 생각했을 때는 호출한 곳에서 작업이 이뤄져야 한다고 생각해요
모달은 확인용으로 동작해야하고 함수는 해당 컴포넌트 내부에 정의가 되어야지 코드를 읽는데 좀더 수월할거 같습니다

[oceanlee-seoul]

말씀하신대로 공통 모달로 만들어서 해당 모달에서 실행될 함수를 컴포넌트 호출 부에서 선언한 후 전달하는 게 더 깔끔할 것 같아요!!
말씀하신대로 제가 만든 방식이 cost도 더 많이 들고, React에서 지향하는 모듈화된 코드는 아닌 것 같아요.
(제가 좀 작업할 때 무식하게 하는 경향이 있는 것 같네요.. ㅎㅎ)
혜원님 말씀하신대로 수정해 주시면 제가 보고 배우겠습니다. 항상 좋은 의견 감사해요 ㅠㅠ

[un0211]

대양님!! 제가 cost 많이 든다고 한 건, 그만큼 구체적인 모달을 만들어주는거라 대양님의 노력이 많이 들어갔다는 말이었어요!!
공통으로 만드는 건 조금 더 불친절하지만 만드는 사람이 편하고,
하나하나 만들어주는 게 더 친절하지만 만드는 사람이 할 일이 많다고 생각해서!!
그래서 대양님이 고생해주신걸 굳이 지워야할까 라는 뜻이었습니다!!