diff --git a/src/apis/api.js b/src/apis/api.js
index 7a968e7d..b5b8654a 100644
--- a/src/apis/api.js
+++ b/src/apis/api.js
@@ -120,8 +120,12 @@ export const updateComment = async (id, data) => {
       console.log("[ERROR] error while updating comment");
     }
 };
-  
-// 과제 !!
+
 export const deleteComment = async (id) => {
-  
+  const response = await instanceWithToken.delete(`/comment/${id}/`);
+  if (response.status === 204) {
+    console.log("DELETE SUCCESS");
+  } else {
+    console.log("[ERROR] error while deleting comment");
+  }
 };
\ No newline at end of file
diff --git a/src/components/Comment/CommentElement.jsx b/src/components/Comment/CommentElement.jsx
index fd48385e..5d5e0711 100644
--- a/src/components/Comment/CommentElement.jsx
+++ b/src/components/Comment/CommentElement.jsx
@@ -1,4 +1,6 @@
 import { useState, useEffect } from "react";
+import { getUser, updateComment } from "../../apis/api";
+import { getCookie } from "../../utils/cookie";
 
 const CommentElement = (props) => {
     const { comment, handleCommentDelete, postId } = props;
@@ -6,6 +8,17 @@ const CommentElement = (props) => {
     const [isEdit, setIsEdit] = useState(false);
 
     const [onChangeValue, setOnChangeValue] = useState(content); // 수정 취소 시 직전 content 값으로 변경을 위한 state
+    const [user, setUser] = useState();
+
+    useEffect(() => {
+        if (getCookie("access_token")) {
+          const getUserAPI = async () => {
+            const user = await getUser();
+            setUser(user);
+          };
+          getUserAPI();
+        }
+      }, []);
 
     // comment created_at 전처리
     const date = new Date(comment.created_at);
@@ -16,18 +29,10 @@ const CommentElement = (props) => {
     day = day < 10 ? `0${day}` : day;
 
     const handleEditComment = () => { // add api call for editing comment
-        setContent(onChangeValue);
+        updateComment(comment.id, {...comment, content: onChangeValue});
         setIsEdit(!isEdit);
-        console.log({
-            post: postId,
-            comment: comment.id,
-            content: content
-        });
     };
 
-    useEffect(() => { // add api call to check if user is the author of the comment
-    }, []);
-
     return (
         <div className="w-full flex flex-row justify-between items-center mb-5">
             <div className="w-3/4 flex flex-col gap-1">
@@ -39,20 +44,20 @@ const CommentElement = (props) => {
 
                 <span className="text-base text-gray-300">{year}.{month}.{day}</span>
             </div>
-
-            <div className="flex flex-row items-center gap-3">
-                {isEdit ? (
-                    <>
-                        <button onClick={() => { setIsEdit(!isEdit); setOnChangeValue(content); }}>취소</button>
-                        <button onClick={handleEditComment}>완료</button>
-                    </>
-                ) : (
-                    <>
-                        <button onClick={() => handleCommentDelete(comment.id)}>삭제</button>
-                        <button onClick={() => setIsEdit(!isEdit)}>수정</button>
-                    </>
-                )}
-            </div>
+            {user?.id === comment?.author ? (
+                <div className="flex flex-row items-center gap-3">
+                    {isEdit ? (
+                        <>
+                            <button onClick={() => { setIsEdit(!isEdit); setOnChangeValue(content); }}>취소</button>
+                            <button onClick={handleEditComment}>완료</button>
+                        </>
+                    ) : (
+                        <>
+                            <button onClick={() => handleCommentDelete(comment.id)}>삭제</button>
+                            <button onClick={() => setIsEdit(!isEdit)}>수정</button>
+                        </>
+                    )}
+                </div> ) : null }
         </div>
     );
 };
diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx
index c8c4a27e..48e5f298 100644
--- a/src/components/Comment/index.jsx
+++ b/src/components/Comment/index.jsx
@@ -1,36 +1,43 @@
-import { useState } from "react";
-import comments from "../../data/comments"; // dummy data
+import { useState, useEffect } from "react";
+import { getComments, createComment, deleteComment } from "../../apis/api";
 import CommentElement from "./CommentElement";
+import { getCookie } from "../../utils/cookie";
 
 const Comment = ({ postId }) => {
-    const [commentList, setCommentList] = useState(comments); // state for comments
-    const [newContent, setNewContent] = useState(""); // state for new comment
+    const [commentList, setCommentList] = useState([]);
+
+    useEffect(() => {
+        const getCommentsAPI = async () => {
+          const comments = await getComments(postId);
+          setCommentList(comments);
+        };
+        getCommentsAPI();
+    });
+    
+    const [newComment, setNewComment] = useState({
+        post: postId,
+        content: "",
+    });
+
+    const handleChange = (e) => {
+        setNewComment({...newComment, content: e.target.value});
+    };
 
     const handleCommentSubmit = (e) => {
         e.preventDefault();
-        setCommentList([ // TODO: add api call for creating comment
-            ...commentList,
-            {
-                id: commentList.length + 1,
-                content: newContent,
-                created_at: new Date().toISOString(),
-                post: postId,
-                author: {
-                    id: 1,
-                    username: "user1"
-                }
-            }
-        ]);
-        console.log({
-            post: postId,
-            content: newContent
-        });
-        setNewContent("");
+        if (newComment.content.length > 0) createComment(newComment);
+        else alert('내용을 작성해주세요.');
     };
 
-    const handleCommentDelete = (commentId) => {
-        console.log("comment: ", commentId);
-        setCommentList(commentList.filter((comment) => comment.id !== commentId)); // TODO: add api call for deleting comment
+    const handleCommentDelete = async(commentId) => {
+        const confirmDelete = window.confirm("정말 삭제하시겠습니까?");
+        if (!confirmDelete) return;
+        try {
+            console.log(commentId);
+            await deleteComment(commentId);
+        } catch (error) {
+            console.error(error);
+        }
     };
 
     return (
@@ -41,11 +48,11 @@ const Comment = ({ postId }) => {
                     <CommentElement key={comment.id} comment={comment} handleCommentDelete={handleCommentDelete} postId={postId} />
                 );
             })}
-            
-            <form className="flex flex-row mt-10 gap-3" onSubmit={handleCommentSubmit}>
-                <input type="text" value={newContent} placeholder="댓글을 입력해주세요" className="input" style={{ width: "calc(100% - 100px)" }} onChange={(e) => setNewContent(e.target.value)} />
-                <button type="submit" className="button">작성</button>
-            </form>
+            {getCookie("access_token") ? (
+                <form className="flex flex-row mt-10 gap-3" onSubmit={handleCommentSubmit}>
+                    <input type="text" value={newComment.content} placeholder="댓글을 입력해주세요" className="input" style={{ width: "calc(100% - 100px)" }} onChange={handleChange} />
+                    <button type="submit" className="button">작성</button>
+                </form> ) : null}
         </div>
     );
 };