더북(TheBook)

9.6 포스트 수정 및 삭제 기능 구현하기

이제 포스트를 수정 및 삭제해볼 차례입니다. 우선 포스트가 자신의 포스트라면 우측 상단에 3개의 점이 있는 아이콘을 보여줍시다.

components/PostCard.js

(...)
import {useUserContext} from '../contexts/UserContext';
import Icon from 'react-native-vector-icons/MaterialIcons';

function PostCard({user, photoURL, description, createdAt, id}) {
  const date = useMemo(
    () => (createdAt ? new Date(createdAt._seconds * 1000) : new Date()),
    [createdAt],
  );
  const navigation = useNavigation();
  const routeNames = useNavigationState((state) => state.routeNames);
  const {user: me} = useUserContext();
  const isMyPost = me.id === user.id;

  const onOpenProfile = () => {
    (...)
  };

  return (
    <View style={styles.block}>
      <View style={[styles.head, styles.paddingBlock]}>
        <Pressable style={styles.profile} onPress={onOpenProfile}>
          <Avatar source={user.photoURL && {uri: photoURL}} />
          <Text style={styles.displayName}>{user.displayName}</Text>
        </Pressable>
        {isMyPost && (
          <Pressable hitSlop={8}>
            <Icon name="more-vert" size={20} />
          </Pressable>
        )}
      </View>

(...)
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.