diff --git a/src/api/postCollectionAnimation.ts b/src/api/postCollectionAnimation.ts
new file mode 100644
index 0000000..0cef07b
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/animation/Comment/CommentInput.tsx b/src/components/animation/Comment/CommentInput.tsx
index 49650c0..e8ba66f 100644
--- a/src/components/animation/Comment/CommentInput.tsx
+++ b/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>
diff --git a/src/types/Dummy.tsx b/src/types/Dummy.tsx
new file mode 100644
index 0000000..2f56c4b
--- /dev/null
+++ b/src/types/Dummy.tsx
@@ -0,0 +1 @@
+// 폴더 구조 올리기 위해 생성한 파일 - 나중에 지울 것
diff --git a/src/types/postCollectionAnimationTypes.ts b/src/types/postCollectionAnimationTypes.ts
new file mode 100644
index 0000000..6a441d8
--- /dev/null
+++ b/src/types/postCollectionAnimationTypes.ts
@@ -0,0 +1,4 @@
+export interface postCollectionAnimationProps {
+  userId: number;
+  content: string;
+}