이제 게시글 수정 및 삭제 기능을 구현해봅시다.

수정 버튼과 삭제 버튼을 보여줄 ArticleActionButtons 컴포넌트를 만들어보세요. 이 컴포넌트는 게시글의 id를 articleId라는 Prop으로 받아와서 수정 및 삭제를 처리합니다.

components/ArticleActionButtons.tsx

import {useNavigation} from '@react-navigation/core';
import React from 'react';
import {View, StyleSheet, Pressable, Text} from 'react-native';
import {RootStackNavigationProp} from '../screens/types';

export interface ArticleActionButtonsProps {
  articleId: number;
}

function ArticleActionButtons({articleId}: ArticleActionButtonsProps) {
  const navigation = useNavigation<RootStackNavigationProp>();
  const onPressModify = () => {
    navigation.navigate('Write', {articleId});
  };
  const onPressRemove = () => {
    // TODO: 구현 예정
  };
  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>
  );
}

const styles = StyleSheet.create({
  block: {
    marginTop: -16,
    paddingVertical: 12,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  separator: {
    width: 8,
  },
  buttonText: {
    color: '#2196f3',
    fontSize: 14,
  },
  pressed: {
    opacity: 0.75,
  },
});

export default ArticleActionButtons;