다 만든 다음에는 이 컴포넌트를 ArticleActionButtons 컴포넌트에서 사용해주세요.

    components/ArticleActionButtons.tsx

    import {useNavigation} from '@react-navigation/core';
    import React, {useState} from 'react';
    import {View, StyleSheet, Pressable, Text} from 'react-native';
    import {RootStackNavigationProp} from '../screens/types';
    import AskDialog from './AskDialog';
    
    export interface ArticleActionButtonsProps {
      articleId: number;
    }
    
    function ArticleActionButtons({articleId}: ArticleActionButtonsProps) {
      const [askRemove, setAskRemove] = useState(false);
      const navigation = useNavigation<RootStackNavigationProp>();
      const onPressModify = () => {
        navigation.navigate('Write', {articleId});
      };
    
      const onPressRemove = () => {
        setAskRemove(true);
      };
      const onCancelRemove = () => {
        setAskRemove(false);
      };
      const onConfirmRemove = () => {
        setAskRemove(false);
      };
    
      return (
        <>
          <View style={styles.block}>
            <Pressable
              style={({pressed}) => pressed && styles.pressed}
              onPress={onPressModify}>
              <Text style={styles.buttonText}>수정</Text>
            </Pressable>
            <View style={styles.separator} />
            <Pressable
              onPress={onPressRemove}
              style={({pressed}) => pressed && styles.pressed}>
              <Text style={styles.buttonText}>삭제</Text>
            </Pressable>
          </View>
          <AskDialog
            visible={askRemove}
            title="게시글 삭제"
            message="게시글을 삭제하시겠습니까?"
            isDestructive
            confirmText="삭제"
            onConfirm={onConfirmRemove}
            onClose={onCancelRemove}
          />
        </>
       );
    }
    
    (...)
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.