[트위터 클론코딩 챌랜지] 트윗 Delete_16

트윗을 작성했다면 삭제할 수 있어야 합니다. 이번엔 Delete 버튼을 만들겠습니다.

우선 tweets.tsx로 가줍니다.

const DeleteButton = styled.button`
    background-color: tomato;
    color: white;
    font-weight: 600;
    border: 0;
    font-size: 12px;
    padding: 5px 10px;
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
`;

export default function Tweet({ username, photo, tweet }: ITweet) {
    return (
        <Wrapper>
            <Column>
                <Username>{username}</Username>
                <Payload>{tweet}</Payload>
                <DeleteButton>Delete</DeleteButton>
            </Column>
            <Column>
                {photo ?
                    <Photo src={photo} />
                    : null}
            </Column>
        </Wrapper>
    )
}

Delete 버튼을 만들어주고 적당한 css를 적용해줍니다.

삭제가 가능하려면 삭제하려는 사용자 ID와 트윗의 ID가 같아야 삭제를 허락할 수 있습니다.

그럼 첫번째 단계는 ID가 일치하지 않을 때, Delete 버튼을 숨기는 겁니다.

export default function Tweet({ username, photo, tweet, userId }: ITweet) {
    const user = auth.currentUser;
    return (
        <Wrapper>
            <Column>
                <Username>{username}</Username>
                <Payload>{tweet}</Payload>
                {user?.uid === userId ? <DeleteButton>Delete</DeleteButton> : null}
            </Column>
            <Column>
                {photo ?
                    <Photo src={photo} />
                    : null}
            </Column>
        </Wrapper>
    )
}

user를 가져와주고 Tweet에서도 userId를 가져옵니다.
Delete 버튼에 조건을 걸어 uid와 userId가 다를 경우 null을 나타내도록 합니다.

그리고 onDelete를 만들어줄겁니다.

export default function Tweet({ username, photo, tweet, userId, id }: ITweet) {
    const user = auth.currentUser;
    const onDelete = async () => {
        if (user?.uid !== userId) return;
        try {
            await deleteDoc(doc(db, "tweets", id))
        } catch (e) {
            console.log(e);
        } finally {

        }
    }

타임라인(tweet)에서 id를 받아오고 조건문을 걸어 트윗과 동일한 ID가 아니라면 함수를 끝냅니다.
try-catch구문을 만들고 deleteDoc을 사용합니다. doc의 db안에 tweets 컬렉션의 id를 지칭합니다.
여기까지만 하면 문서를 삭제할 수 있습니다.

하지만 문서만 삭제하면 이미지는 계속 남기에 이미지도 삭제해줘야합니다.

우선 post-tweet-form.tsx로 가서

      if (file) {
        const locationRef = ref(
          storage,
          `tweets/${user.uid}/${doc.id}`
        );

이부분에 작성해둔 username을 삭제합니다.

firebase로 가서 storage와 collection을 모두 삭제해줍니다. 이후 새로 트윗을 생성해줍니다.

export default function Tweet({ username, photo, tweet, userId, id }: ITweet) {
    const user = auth.currentUser;
    const onDelete = async () => {
        const ok = confirm("정말 삭제하시겠습니까????")
        if (!ok || user?.uid !== userId) return;
        try {
            await deleteDoc(doc(db, "tweets", id));
            if (photo) {
                const photoRef = ref(storage, `tweets/${user.uid}/${id}`);
                await deleteObject(photoRef);
            }
        } catch (e) {
            console.log(e);
        } finally {
            
        }
    }
}

try구문에 조건문을 걸어줍니다. photo가 있다면 storage의 해당 경로에 있는 데이터를 photoRef에 저장하고,
deleteObject를 통해 삭제해줍니다.
이때, 확인구문을 넣어줍니다. ok를 생성하고 return조건문에 추가해줍니다.
DeleteButton에 onClick이벤트를 적용해주면 끝.

트윗을 삭제하면 db에서도 삭제되는 것을 볼 수 있습니다.