Feat#57 animation post

src/api/postCollectionAnimation.ts

@@ -0,0 +1,20 @@
+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;
+}

src/components/animation/Comment/CommentInput.tsx

@@ -1,12 +1,46 @@
+import { useState } from 'react';
 import { flexCenter } from '@styles/globalStyle';
 import styled from 'styled-components';
 import { CollectDetailChatBottomIc } from '@assets/index';
+import { useMutation, useQueryClient } from 'react-query';
+import { postCollectionAnimation } from '@api/postCollectionAnimation';
 
 export default function CommentInput() {
+  const [inputValue, setInputValue] = useState('');
+  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<HTMLInputElement>) {
+    setInputValue(e.target.value);
+  }
+
   return (
     <Wrapper>
-      <CommentInputBox placeholder="컬렉션에 댓글을 남겨보세요." type="text" />
-      <InputSubmitButton>
+      <CommentInputBox
+        onChange={handleChangeComment}
+        value={inputValue}
+        placeholder="컬렉션에 댓글을 남겨보세요."
+        type="text"
+      />
+      <InputSubmitButton onClick={handleClickPostButton}>
         <CollectDetailChatBottomIcon />
         등록
       </InputSubmitButton>

src/types/Dummy.tsx

@@ -0,0 +1 @@
+// 폴더 구조 올리기 위해 생성한 파일 - 나중에 지울 것

src/types/postCollectionAnimationTypes.ts

@@ -0,0 +1,4 @@
+export interface postCollectionAnimationProps {
+  userId: number;
+  content: string;
+}