날짜를 눌렀을 때는 'date' 모드, 시간을 선택했을 때는 'time' 모드를 사용하겠습니다. 컴포넌트를 다음과 같이 수정해보세요.

    components/WriteHeader.js

    import {useNavigation} from '@react-navigation/native';
    import {format} from 'date-fns';
    import {ko} from 'date-fns/locale';
    import React, {useState} from 'react';
    import {Pressable, StyleSheet, Text, View} from 'react-native';
    import TransparentCircleButton from './TransparentCircleButton';
    import DateTimePickerModal from 'react-native-modal-datetime-picker';
    
    function WriteHeader({onSave, onAskRemove, isEditing, date, onChangeDate}) {
      const navigation = useNavigation();
      const onGoBack = () => {
        navigation.pop();
      };
    
      const [mode, setMode] = useState('date');
      const [visible, setVisible] = useState(false);
    
      const onPressDate = () => {
        setMode('date');
        setVisible(true);
      };
    
      const onPressTime = () => {
        setMode('time');
        setVisible(true);
      };
    
      const onConfirm = (selectedDate) => {
        setVisible(false);
        onChangeDate(selectedDate);
      };
    
      const onCancel = () => {
        setVisible(false);
      };
    
      return (
        <View style={styles.block}>
          (...)
          <View style={styles.center}>
            <Pressable onPress={onPressDate}>
              <Text>
                {format(new Date(date), 'PPP', {
                  locale: ko,
                })}
              </Text>
            </Pressable>
            <View style={styles.separator} />
            <Pressable onPress={onPressTime}>
              <Text>{format(new Date(date), 'p', {locale: ko})}</Text>
            </Pressable>
          </View>
          <DateTimePickerModal
            isVisible={visible}
            mode={mode}
            onConfirm={onConfirm}
            onCancel={onCancel}
            date={date}
          />
        </View>
      );
    }
    
    (...)
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.