Feat#57 animation post

[hae2ni]

📢 개요

#57

✨ PR 유형

어떤 변경 사항이 있나요?

• 새로운 기능 추가

➕ 변경 사항 in Detail

• 변경 사항
  • 변경 사항 상세 설명
    댓글 post를 useMutation으로 구현하였습니다.

post 관련 api 처리 로직은 다음과 같습니다.

import axios from 'axios';
import { postCollectionAnimationProps } from 'types/postCollectionAnimationTypes';

export async function postCollectionAnimation(props: postCollectionAnimationProps) {
  const { userId, content } = props;
  const response = await axios.post(
    `${import.meta.env.VITE_APP_BASE_URL}/api/collection/1`,
    {
      userId: userId,
      content: content,
    },
    {
      headers: {
        'Content-Type': 'application/json',
      },
    },
  );

  return response;
}

const queryClient = useQueryClient();

const { mutate: postComment } = useMutation(postCollectionAnimation, {
onSuccess: () => {
queryClient.invalidateQueries('getAnimationCollection');
setInputValue('');
},
onSettled: () => {
console.log('loading..');
},
onError: (error) => {
console.log(error);
},
});

function handleClickPostButton() {
if (inputValue.trim() !== '') {
postComment({ userId: 1, content: inputValue });
}
}

function handleChangeComment(e: React.ChangeEvent) {
setInputValue(e.target.value);
}

이렇게 처리해두었습니다...!

그리고 useMutation과 관련된 로직은,


## ✅ PR Checklist
PR이 다음 요구 사항을 충족하는지 확인하세요.
“왜” 구현 된건지 작동 원리 두번씩 생각하고 PR을 날려주세요
- [ ] 커밋 메시지 컨벤션에 맞게 작성했습니다.
- [ ] 변경 사항에 대한 테스트를 했습니다.(오류 수정/기능에 대한 테스트).

## 🔸 레퍼런스 
- 레퍼런스를 올려주세요
- [레퍼런스 제목](https://)