그다음에는 ArticleScreen에서 기존에 보여주고 있던 FlatList를 <></>로 감싸고, FlatList 하단에 이전에 게시글 삭제 기능을 구현하기 위해 만든 AskDialog를 보여주고, 방금 만든 onConfirmRemove와 onCancelRemove를 컴포넌트의 Props로 설정해주세요.

screens/ArticleScreen.tsx

import AskDialog from '../components/AskDialog';

(...)

function ArticleScreen() {
  (...)

  return (
    <>
      <FlatList
        (...)
      />
      <AskDialog
        visible={askRemoveComment}
        title="댓글 삭제"
        message="댓글을 삭제하시겠습니까?"
        isDestructive
        confirmText="삭제"
        onConfirm={onConfirmRemove}
        onClose={onCancelRemove}
      />
    </>
  );
}

(...)

그러고 나서 댓글의 삭제 버튼을 눌렀을 때 다음과 같이 AskModal이 화면에 나타나는지 확인해보세요.

▲ 그림 15-19 댓글 삭제 AskModal