diff --git "a/src/apis/\bcreateImg.jsx" "b/src/apis/\bcreateImg.jsx"
new file mode 100644
index 0000000..66fc47e
--- /dev/null
+++ "b/src/apis/\bcreateImg.jsx"
@@ -0,0 +1,21 @@
+import axios from "axios";
+
+const createImg = async (csrfToken, formData) => {
+  try {
+    const serverResponse = await axios.post(`${process.env.REACT_APP_HOST_URL}/v1/images`, formData, {
+      withCredentials: true,
+      headers: {
+        "X-CSRF-TOKEN": csrfToken,
+        "Content-Type": "multipart/form-data",
+      },
+    });
+    console.log("이미지가 정상적으로 추가되었음", serverResponse);
+
+    return serverResponse.data.imageUrl;
+  } catch (error) {
+    console.error("이미지 추가 실패:", error);
+    throw error;
+  }
+};
+
+export default createImg;
diff --git a/src/apis/deleteDiary.jsx b/src/apis/deleteDiary.jsx
new file mode 100644
index 0000000..48f14fd
--- /dev/null
+++ b/src/apis/deleteDiary.jsx
@@ -0,0 +1,22 @@
+import axios from "axios";
+
+const deleteDiary = async (csrfToken, journalId) => {
+  console.log("API 코드에서 잘 넘어왔는지", csrfToken, journalId);
+  try {
+    const serverResponse = await axios.delete(`${process.env.REACT_APP_HOST_URL}/v1/journals/${journalId}`, {
+      withCredentials: true,
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-TOKEN": csrfToken,
+      },
+    });
+    console.log("일지가 정상적으로 삭제되었음", serverResponse);
+
+    return serverResponse.data;
+  } catch (error) {
+    console.error("일지 삭제 실패:", error);
+    throw error;
+  }
+};
+
+export default deleteDiary;
diff --git a/src/diaryDetailPage/components/DeleteConfirmModal.jsx b/src/diaryDetailPage/components/DeleteConfirmModal.jsx
index 9904a06..dafd703 100644
--- a/src/diaryDetailPage/components/DeleteConfirmModal.jsx
+++ b/src/diaryDetailPage/components/DeleteConfirmModal.jsx
@@ -1,16 +1,24 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
+import deleteDiary from "../../apis/deleteDiary";
+import { useRecoilValue } from "recoil";
+import { tokenState } from "../../atom/atom";
 
-function DeleteConfirmModal({ setDeleteModal, goalId }) {
+function DeleteConfirmModal({ setDeleteModal, goalId, journalId }) {
   const navigate = useNavigate();
+  const csrfToken = useRecoilValue(tokenState);
   const closeDeleteModal = () => {
     setDeleteModal(false);
   };
-  const deleteModal = () => {
-    //일지 삭제하는 부분 필요.
-    setDeleteModal(false);
-    navigate(`/diarylist`, { state: { goalId } });
+  const deleteModal = async () => {
+    try {
+      await deleteDiary(csrfToken, journalId);
+      setDeleteModal(false);
+      navigate(`/diarylist`, { state: { goalId } });
+    } catch (error) {
+      console.error("목표 삭제 실패", error);
+    }
   };
   return (
     <div>
diff --git a/src/diaryDetailPage/components/DiaryDetail.jsx b/src/diaryDetailPage/components/DiaryDetail.jsx
index 3351957..a52a534 100644
--- a/src/diaryDetailPage/components/DiaryDetail.jsx
+++ b/src/diaryDetailPage/components/DiaryDetail.jsx
@@ -31,7 +31,7 @@ function DiaryDetail() {
       }
     };
     fetchGoalList();
-  }, [goalId, csrfToken]);
+  }, [diaryId, csrfToken]);
 
   return (
     <Wrapper>
@@ -55,16 +55,12 @@ function DiaryDetail() {
           <ContentArea>
             <Contents>
               {/* html 태그 적용된 일지 내용 보여주는 부분 */}
-              <div
-                dangerouslySetInnerHTML={{ __html: diaryDetail.content }}
-              ></div>
+              <div dangerouslySetInnerHTML={{ __html: diaryDetail.content }}></div>
             </Contents>
           </ContentArea>
         </CenterBox>
 
-        {deleteModal && (
-          <DeleteConfirmModal setDeleteModal={setDeleteModal} goalId={goalId} />
-        )}
+        {deleteModal && <DeleteConfirmModal setDeleteModal={setDeleteModal} goalId={goalId} journalId={diaryId} />}
       </BoxWrapper>
     </Wrapper>
   );
diff --git a/src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx b/src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx
index 07438e7..ef07297 100644
--- a/src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx
+++ b/src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx
@@ -9,6 +9,8 @@ import ImgUpload from "../../../../asset/Icon/ImgUpload.svg";
 import { Toggle } from "./Toggle";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import updateGoal from "../../../../apis/updateGoal";
+import { fi } from "date-fns/locale";
+import createImg from "../../../../apis/\bcreateImg";
 
 const formatDate = (date) => {
   const year = date.getFullYear();
@@ -32,6 +34,7 @@ function CreateGoalModal({
   setIsUpdate,
   setIsGoalEditedModalOpen,
   expiredData,
+  setExpiredData,
 }) {
   const [isDateSetting, setIsDateSetting] = useState(true);
   const csrfToken = useRecoilValue(tokenState);
@@ -61,6 +64,8 @@ function CreateGoalModal({
       isUpdate && updateData?.thumbnail ? updateData.thumbnail : expiredData?.thumbnail ? expiredData.thumbnail : "",
   });
 
+  const [imageUrl, setImageUrl] = useState("");
+
   const goalId = isUpdate && updateData.goalId ? updateData.goalId : expiredData?.goalId;
   const status = isUpdate && updateData.status ? updateData.status : expiredData?.status;
   const [previewUrl, setPreviewUrl] = useState(
@@ -68,12 +73,13 @@ function CreateGoalModal({
   );
 
   useEffect(() => {
-    console.log("formData updated:", formData, csrfToken, updateData, isUpdate);
+    console.log("formData updated:", formData, csrfToken, updateData, isUpdate, imageUrl);
   }, [formData]);
 
   const closeCreateGoalModal = () => {
     setIsModalOpen(false);
     setIsUpdate(false);
+    setExpiredData(undefined);
   };
 
   const handleImageUploadClick = () => {
@@ -93,8 +99,11 @@ function CreateGoalModal({
     }
   };
 
-  const handleFileInputChange = (event) => {
+  const handleFileInputChange = async (event) => {
     const file = event.target.files[0];
+    const formData = new FormData();
+    formData.append("file", file);
+    setImageUrl(await createImg(csrfToken, formData));
 
     if (file) {
       const reader = new FileReader();
@@ -140,8 +149,8 @@ function CreateGoalModal({
       formDataToSend.append("startDate", startDate);
       formDataToSend.append("endDate", endDate);
 
-      if (fileInputRef.current.files[0]) {
-        formDataToSend.append("thumbnail", fileInputRef.current.files[0]);
+      if (imageUrl) {
+        formDataToSend.append("thumbnail", imageUrl);
       }
       await createGoal(formDataToSend, csrfToken);
       closeCreateGoalModal();
@@ -175,8 +184,8 @@ function CreateGoalModal({
       );
       formDataToSend.append("status", status);
 
-      if (fileInputRef.current.files[0]) {
-        formDataToSend.append("thumbnail", fileInputRef.current.files[0]);
+      if (imageUrl) {
+        formDataToSend.append("thumbnail", imageUrl);
       }
       await updateGoal(formDataToSend, csrfToken, goalId);
       closeCreateGoalModal();
@@ -184,6 +193,7 @@ function CreateGoalModal({
     } catch (error) {
       console.error("목표 수정 실패", error);
     }
+    setExpiredData(undefined);
   };
 
   const handleToggleDateSetting = () => {
diff --git a/src/homepage/component/goals/Goals.jsx b/src/homepage/component/goals/Goals.jsx
index 7e6e49e..0932d8f 100644
--- a/src/homepage/component/goals/Goals.jsx
+++ b/src/homepage/component/goals/Goals.jsx
@@ -77,6 +77,7 @@ function Goals() {
   }, [csrfToken, navigate, setCsrfToken]);
 
   const openCreateGoalsModal = () => {
+    setExpiredData(undefined);
     setIsModalOpen(true);
   };
 
@@ -132,105 +133,83 @@ function Goals() {
     <Container>
       <TopMenu>
         <Taps currentTab={currentTab} setCurrentTab={setCurrentTab} />
-        <GoalViewDropdown
-          currentSort={currentSort}
-          setCurrentSort={setCurrentSort}
-        />
+        <GoalViewDropdown currentSort={currentSort} setCurrentSort={setCurrentSort} />
       </TopMenu>
       <GoalContainer>
         <CreateGoalModalBtn onClick={openCreateGoalsModal}>
           <img src={CreateGoal} alt="" style={{ marginBottom: "15px" }} />
           목표 추가하기
         </CreateGoalModalBtn>
-        {!isLoading &&
-          filteredGoals.length === 0 &&
-          currentTab !== "완료한 도전" && (
-            <GoalDoesNotExist>
-              <img
-                src={GoalDoesNotExistImg}
-                alt=""
-                style={{ marginTop: "59px", width: "40px", height: "41px" }}
-              />
-              <div
-                style={{
-                  color: "#676767",
-                  fontWeight: "bold",
-                  fontSize: "18px",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  marginTop: "16px",
-                }}
-              >
-                <div>첫 걸음을 내딛는 순간</div>
-                <div style={{ marginTop: "5px" }}>성장이 시작됩니다!</div>
-              </div>
-              <div
-                style={{
-                  color: "#AEAEAE",
-                  fontSize: "14px",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  marginTop: "10px",
-                }}
-              >
-                <div>하고 싶은 일을 적어볼까요? </div>{" "}
-                <div style={{ marginTop: "5px" }}>
-                  작은 목표부터 큰 목표까지 모두 좋아요!
-                </div>
-              </div>
-            </GoalDoesNotExist>
-          )}
-        {!isLoading &&
-          filteredGoals.length === 0 &&
-          currentTab === "완료한 도전" && (
-            <GoalDoesNotExist>
-              <img
-                src={GoalDoesNotExistPink}
-                alt=""
-                style={{ marginTop: "59px", width: "40px", height: "41px" }}
-              />
-              <div
-                style={{
-                  color: "#676767",
-                  fontWeight: "bold",
-                  fontSize: "18px",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  marginTop: "16px",
-                }}
-              >
-                <div>작은 목표부터 시작해서</div>
-                <div style={{ marginTop: "5px" }}>하나씩 채워나가봐요!</div>
-              </div>
-              <div
-                style={{
-                  color: "#AEAEAE",
-                  fontSize: "14px",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  marginTop: "10px",
-                }}
-              >
-                <div>곧 이곳이 당신의 성취로</div>{" "}
-                <div style={{ marginTop: "5px" }}>가득 찰 거예요!</div>
-              </div>
-            </GoalDoesNotExist>
-          )}
+        {!isLoading && filteredGoals.length === 0 && currentTab !== "완료한 도전" && (
+          <GoalDoesNotExist>
+            <img src={GoalDoesNotExistImg} alt="" style={{ marginTop: "59px", width: "40px", height: "41px" }} />
+            <div
+              style={{
+                color: "#676767",
+                fontWeight: "bold",
+                fontSize: "18px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                marginTop: "16px",
+              }}
+            >
+              <div>첫 걸음을 내딛는 순간</div>
+              <div style={{ marginTop: "5px" }}>성장이 시작됩니다!</div>
+            </div>
+            <div
+              style={{
+                color: "#AEAEAE",
+                fontSize: "14px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                marginTop: "10px",
+              }}
+            >
+              <div>하고 싶은 일을 적어볼까요? </div>{" "}
+              <div style={{ marginTop: "5px" }}>작은 목표부터 큰 목표까지 모두 좋아요!</div>
+            </div>
+          </GoalDoesNotExist>
+        )}
+        {!isLoading && filteredGoals.length === 0 && currentTab === "완료한 도전" && (
+          <GoalDoesNotExist>
+            <img src={GoalDoesNotExistPink} alt="" style={{ marginTop: "59px", width: "40px", height: "41px" }} />
+            <div
+              style={{
+                color: "#676767",
+                fontWeight: "bold",
+                fontSize: "18px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                marginTop: "16px",
+              }}
+            >
+              <div>작은 목표부터 시작해서</div>
+              <div style={{ marginTop: "5px" }}>하나씩 채워나가봐요!</div>
+            </div>
+            <div
+              style={{
+                color: "#AEAEAE",
+                fontSize: "14px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                marginTop: "10px",
+              }}
+            >
+              <div>곧 이곳이 당신의 성취로</div> <div style={{ marginTop: "5px" }}>가득 찰 거예요!</div>
+            </div>
+          </GoalDoesNotExist>
+        )}
         <TransitionGroup component={null}>
           {filteredGoals.map((goal) => {
-            const randomIndex = Math.floor(
-              Math.random() * backgroundArr.length
-            );
+            const randomIndex = Math.floor(Math.random() * backgroundArr.length);
             const backgroundImg = backgroundArr[randomIndex];
             const daysLeft = getDaysLeft(goal.endDate);
             const expired = isExpired(goal.endDate);
-            const randomStampIndex = Math.floor(
-              Math.random() * complete_stamps.length
-            );
+            const randomStampIndex = Math.floor(Math.random() * complete_stamps.length);
             const completeStamps = complete_stamps[randomStampIndex];
             return (
               <CSSTransition key={goal.id} timeout={500} classNames="goal">
@@ -287,9 +266,7 @@ function Goals() {
                           }}
                         />
                       ) : (
-                        <Image
-                          style={{ backgroundImage: `url(${backgroundImg})` }}
-                        />
+                        <Image style={{ backgroundImage: `url(${backgroundImg})` }} />
                       )}
                       <GoalEditDropdown
                         setIsDeleteModalOpen={setIsDeleteModalOpen}
@@ -303,26 +280,19 @@ function Goals() {
 
                   <Info>
                     <InfoContainer>
-                      {daysLeft !== null &&
-                        daysLeft <= 5 &&
-                        daysLeft > 0 &&
-                        goal?.status === "OPEN" && (
-                          <DeadlineComing>
-                            <span>D-{daysLeft}</span>
-                          </DeadlineComing>
-                        )}
+                      {daysLeft !== null && daysLeft <= 5 && daysLeft > 0 && goal?.status === "OPEN" && (
+                        <DeadlineComing>
+                          <span>D-{daysLeft}</span>
+                        </DeadlineComing>
+                      )}
                       {expired && goal?.status === "OPEN" && (
                         <ExpirationText>
                           <span>기한이 지났어요!</span>
                         </ExpirationText>
                       )}
-                      {daysLeft === null || daysLeft > 5
-                        ? !expired && <div style={{ marginTop: "4px" }} />
-                        : null}
+                      {daysLeft === null || daysLeft > 5 ? !expired && <div style={{ marginTop: "4px" }} /> : null}
                       <TitleFireContainer>
-                        <Title isOpen={goal?.status === "OPEN"}>
-                          {goal.title}
-                        </Title>
+                        <Title isOpen={goal?.status === "OPEN"}>{goal.title}</Title>
                         {goal.streak >= 3 && (
                           <FireContainer>
                             <Fire>
@@ -335,9 +305,7 @@ function Goals() {
                       </TitleFireContainer>
                       {(goal.startDate || goal.endDate) && (
                         <Period isOpen={goal?.status === "OPEN"}>
-                          {goal.startDate && (
-                            <StartDate>{goal.startDate}</StartDate>
-                          )}
+                          {goal.startDate && <StartDate>{goal.startDate}</StartDate>}
                           {goal.startDate && goal.endDate && <span> → </span>}
                           {goal.endDate && <DueDate>{goal.endDate}</DueDate>}
                         </Period>
@@ -359,6 +327,7 @@ function Goals() {
           setIsUpdate={setIsUpdate}
           setIsGoalEditedModalOpen={setIsGoalEditedModalOpen}
           expiredData={expiredData}
+          setExpiredData={setExpiredData}
         />
       )}
       {isGoalCreatedModalOpen && (
@@ -368,12 +337,7 @@ function Goals() {
           updateData={updateData}
         />
       )}
-      {isDeleteModalOpen && (
-        <DeleteGoalModal
-          setIsDeleteModalOpen={setIsDeleteModalOpen}
-          goalId={updateData.goalId}
-        />
-      )}
+      {isDeleteModalOpen && <DeleteGoalModal setIsDeleteModalOpen={setIsDeleteModalOpen} goalId={updateData.goalId} />}
       {isGoalEditedModalOpen && <GoalEditedModal />}
       {isConfirmModalOpen && (
         <CompleteConfirmModal
@@ -384,12 +348,7 @@ function Goals() {
           setIsModalOpen={setIsModalOpen}
         />
       )}
-      {isCompModalOpen && (
-        <CompleteGoalModal
-          setIsCompModalOpen={setIsCompModalOpen}
-          isExpiredBox={isExpiredBox}
-        />
-      )}
+      {isCompModalOpen && <CompleteGoalModal setIsCompModalOpen={setIsCompModalOpen} isExpiredBox={isExpiredBox} />}
     </Container>
   );
 }