diff --git a/src/api/user.ts b/src/api/user.ts
index 4b6d2eaf..72940f3b 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -57,3 +57,23 @@ export const getHistory = async (taskID: number) => {
   const response = await axiosInstance.get(`/api/tasks/${taskID}/histories`)
   return response.data
 }
+
+export const postComment = async (taskID: number, content: string) => {
+  const response = await axiosInstance.post(`/api/comment/${taskID}`, { content })
+  return response.data
+}
+
+export const postCommentAttachment = async (taskID: number, formdata: FormData) => {
+  const response = await formDataAxiosInstance.post(`/api/comment/attachment/${taskID}`, formdata)
+  return response.data
+}
+
+export const patchComment = async (commentId: number, content: string) => {
+  const response = await axiosInstance.patch(`/api/comment/${commentId}`, { content })
+  return response.data
+}
+
+export const deleteComment = async (commentId: number) => {
+  const response = await axiosInstance.delete(`/api/comment/${commentId}`)
+  return response.data
+}
diff --git a/src/assets/styles.css b/src/assets/styles.css
index 4627248b..ea127e9c 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -11,6 +11,7 @@
 
 body {
   font-family: 'SUIT-Variable', sans-serif;
+  color: #18181B;
 }
 
 .shadow-custom {
diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue
index a53cfe21..8409cfd3 100644
--- a/src/components/my-request/MyRequestList.vue
+++ b/src/components/my-request/MyRequestList.vue
@@ -26,13 +26,13 @@ import { useRequestParamsStore } from '@/stores/params'
 import type { MyRequestResponse } from '@/types/user'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
 import { useParseParams } from '../hooks/useParseParams'
 import ListContainer from '../lists/ListContainer.vue'
 import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
 import MyRequestListBar from './MyRequestListBar.vue'
 import MyRequestListCard from './MyRequestListCard.vue'
-import { computed } from 'vue'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
diff --git a/src/components/request-task/RequestTask.vue b/src/components/request-task/RequestTask.vue
index 985e3d3f..34d716ed 100644
--- a/src/components/request-task/RequestTask.vue
+++ b/src/components/request-task/RequestTask.vue
@@ -96,7 +96,6 @@ const handleSubmit = async () => {
   const formData = new FormData()
   const taskInfo = {
     categoryId: category2.value.id,
-
     title: title.value,
     description: description.value
   }
diff --git a/src/components/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue
index ccfb088d..d792a4c8 100644
--- a/src/components/requested/RequestedListCard.vue
+++ b/src/components/requested/RequestedListCard.vue
@@ -2,6 +2,7 @@
   <div class="list-card">
     <ListCardTab
       v-for="tab in requestedTabList"
+      @click="handleModal(info.taskId)"
       :key="tab.content"
       :content="tab.content"
       :width="tab.width"
@@ -19,13 +20,13 @@
         class="button-medium-default">
         거부
       </button>
-      <button
-        @click="toggleModal('reject')"
-        class="button-medium-default">
-        거부
-      </button>
     </div>
   </div>
+  <TaskDetail
+    v-if="selectedID"
+    :is-approved="true"
+    :selected-id="selectedID"
+    :close-task-detail="() => handleModal(null)" />
 
   <ModalView
     :is-open="isModalVisible.reject"
@@ -59,6 +60,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ListCardTab from '../lists/ListCardTab.vue'
 import ModalView from '../ModalView.vue'
+import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { info } = defineProps<{ info: RequestedListData }>()
 const requestedTabList: ListCardProps[] = [
@@ -69,6 +71,12 @@ const requestedTabList: ListCardProps[] = [
   { content: info.requesterName, width: 120, profileImg: info.requesterImg }
 ]
 
+const selectedID = ref<number | null>(null)
+
+const handleModal = (id: number | null) => {
+  selectedID.value = id
+}
+
 const router = useRouter()
 const queryClient = useQueryClient()
 
diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 69e1a5ac..897fdac3 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -3,19 +3,21 @@
     <div
       class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[1024px] bg-white p-6">
       <TaskDetailTopBar
-        :is-approved="isApproved"
+        :is-approved="data?.taskStatus !== 'REQUESTED'"
         :close-task-detail="closeTaskDetail"
         :id="data?.taskId || 0"
-        :isProcessor="data?.processorNickName === info.nickname" />
+        :isProcessor="data?.processorNickName === info.nickname || info.memberRole === 'ROLE_'"
+        :isRequestor="data?.requesterNickName === info.nickname" />
       <div
         class="w-full flex gap-6"
         v-if="data">
         <div class="w-full h-[718px] flex flex-col gap-y-8 overflow-y-auto scrollbar-hide">
           <TaskDetailLeft :data="data" />
-          <div class="w-full border-[0.5px] border-border-1"></div>
+          <div class="w-full h-[1px] bg-border-1 shrink-0"></div>
           <TaskDetailHistory
             :historyData="historyData?.histories || []"
-            :is-approved="isApproved" />
+            :task-id="selectedId"
+            :requestor-name="data.requesterNickName" />
         </div>
         <div class="w-[1px] bg-border-1"></div>
         <TaskDetailRight
@@ -27,9 +29,9 @@
 </template>
 
 <script setup lang="ts">
-import { getHistory, getTaskDetailManager } from '@/api/user'
+import { getHistory, getTaskDetailManager, getTaskDetailUser } from '@/api/user'
 import { useMemberStore } from '@/stores/member'
-import type { TaskDetailDatas, TaskDetailHistoryProps, TaskDetailProps } from '@/types/user'
+import type { TaskDetailDatas, TaskDetailHistoryData, TaskDetailProps } from '@/types/user'
 import { useQuery } from '@tanstack/vue-query'
 import { storeToRefs } from 'pinia'
 import TaskDetailHistory from './TaskDetailHistory.vue'
@@ -37,17 +39,21 @@ import TaskDetailLeft from './TaskDetailLeft.vue'
 import TaskDetailRight from './TaskDetailRight.vue'
 import TaskDetailTopBar from './TaskDetailTopBar.vue'
 
-const { isApproved, closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
+const { closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
+console.log(info, '인포')
 
 const { data } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
-  queryFn: () => getTaskDetailManager(selectedId)
+  queryFn:
+    info.value.memberRole === 'ROLE_USER'
+      ? () => getTaskDetailUser(selectedId)
+      : () => getTaskDetailManager(selectedId)
 })
 
-const { data: historyData } = useQuery<TaskDetailHistoryProps>({
+const { data: historyData } = useQuery<TaskDetailHistoryData>({
   queryKey: ['historyData', selectedId],
   queryFn: () => getHistory(selectedId)
 })
diff --git a/src/components/task-detail/TaskDetailHistory.vue b/src/components/task-detail/TaskDetailHistory.vue
index d6670ad3..2079946e 100644
--- a/src/components/task-detail/TaskDetailHistory.vue
+++ b/src/components/task-detail/TaskDetailHistory.vue
@@ -1,13 +1,17 @@
 <template>
   <div>
     <p class="task-detail">히스토리</p>
-    <TaskDetailHistoryInput :history="historyData" />
+    <TaskDetailHistoryInput
+      :history="historyData"
+      :taskId="taskId"
+      :requestor-name="requestorName" />
     <div class="flex flex-col w-full items-center gap-6 mt-8">
       <div
         class="flex w-full flex-col items-center gap-6"
-        v-for="item in historyData"
+        v-for="(item, i) in historyData"
         :key="item.historyId">
         <div
+          v-if="shouldDisplayDate(i)"
           class="flex px-4 h-7 items-center justify-center bg-primary1 rounded-full text-white text-xs font-bold">
           {{ formatDateWithDay(item.date) }}
         </div>
@@ -26,7 +30,16 @@
             class="text-primary1">
             {{ item.details.taskDetails?.value }}
           </p>
-          <TaskDetailHistoryChat v-else-if="item.taskHistoryType === 'COMMENT'" />
+          <TaskDetailHistoryChat
+            v-else-if="item.taskHistoryType === 'COMMENT'"
+            :history="item"
+            :requestor-name="requestorName"
+            :task-id="taskId" />
+          <TaskDetailHistoryFile
+            v-else-if="item.taskHistoryType === 'COMMENT_FILE'"
+            :history="item"
+            :requestor-name="requestorName"
+            :task-id="taskId" />
           <p>{{ HistoryMessageAfter[item.taskHistoryType] }}</p>
         </div>
       </div>
@@ -36,11 +49,28 @@
 
 <script setup lang="ts">
 import { HistoryMessageAfter, HistoryMessageBefore } from '@/constants/user'
-import type { TaskHistory } from '@/types/user'
+import type { TaskDetailHistoryProps } from '@/types/common'
 import { formatDateWithDay } from '@/utils/date'
+import { watch } from 'vue'
 import TaskDetailHistoryChat from './TaskDetailHistoryChat.vue'
+import TaskDetailHistoryFile from './TaskDetailHistoryFile.vue'
 import TaskDetailHistoryInput from './TaskDetailHistoryInput.vue'
 
-const { historyData } = defineProps<{ historyData: TaskHistory[] }>()
-console.log(historyData, '가져온 히스토리')
+const { historyData, taskId, requestorName } = defineProps<TaskDetailHistoryProps>()
+
+let displayedDates = new Set<string>()
+
+const shouldDisplayDate = (index: number) => {
+  const date = formatDateWithDay(historyData[index].date)
+  if (displayedDates.has(date)) return false
+  else displayedDates.add(date)
+  return true
+}
+
+watch(
+  () => historyData,
+  () => {
+    displayedDates = new Set<string>()
+  }
+)
 </script>
diff --git a/src/components/task-detail/TaskDetailHistoryChat.vue b/src/components/task-detail/TaskDetailHistoryChat.vue
index 83679ae9..2763ab9f 100644
--- a/src/components/task-detail/TaskDetailHistoryChat.vue
+++ b/src/components/task-detail/TaskDetailHistoryChat.vue
@@ -1,15 +1,79 @@
 <template>
-  <div class="flex w-full justify-start">
-    <div class="w-10 h-10 rounded-full pt-1.5">
+  <div :class="['flex w-full', isProcessor ? 'justify-end' : 'justify-start']">
+    <div :class="['w-10 h-10 rounded-full pt-1.5', isProcessor ? 'order-3' : 'order-1']">
       <img
-        src="/images/mockProfile.jpg"
+        :src="history.details.commentDetails?.profileImageUrl || '/images/mockProfile.jpg'"
         class="rounded-full" />
     </div>
-    <div class="flex max-w-[400px] flex-wrap px-6 py-4 bg-background-2 ml-4 text-black rounded-lg">
-      네네... 부탁드릴게요 가능하시다면 오늘 오후 6시까지 되었으면 좋겠습니다! 감사합니다.
+    <div
+      :class="[
+        'flex flex-col gap-2 order-2',
+        isProcessor ? 'items-end pr-4 pl-1' : 'items-start pl-4 pr-1'
+      ]">
+      <p>{{ history.details.commentDetails?.nickName }}</p>
+      <p
+        :class="[
+          'flex max-w-[400px] flex-wrap px-6 py-4  text-black rounded-lg',
+          isProcessor ? 'bg-primary2' : 'bg-background-2'
+        ]">
+        {{ history.details.commentDetails?.comment }}
+      </p>
+    </div>
+    <div
+      :class="[
+        'flex flex-col h-full justify-end text-xs font-bold text-body gap-1 relative',
+        isProcessor ? 'order-1 items-end' : 'order-3 items-start'
+      ]">
+      <div
+        v-if="history.details.commentDetails?.nickName === info.nickname"
+        class="relative cursor-pointer">
+        <CommonIcons
+          :name="menuDotIcon"
+          @click="clickMenuDot" />
+        <div
+          v-if="isClicked"
+          @click="deleteCommentText"
+            :class="[
+            'absolute shadow-custom bottom-0 w-20 h-7 flex items-center justify-center text-xs text-red-1 bg-white hover:bg-background-1',
+            isProcessor ? 'right-6' : 'left-6'
+            ]">
+          삭제
+        </div>
+      </div>
+      <div class="flex flex-col gap-1">
+        {{ history.details.commentDetails?.isModified ? '(수정됨)' : '' }}
+        {{ formatTodayOrNot(history.date, history.time) }}
+      </div>
     </div>
-    <div class="flex h-full items-end text-xs font-bold text-body ml-2">오후 2:18</div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { deleteComment } from '@/api/user'
+import { menuDotIcon } from '@/constants/iconPath'
+import { useMemberStore } from '@/stores/member'
+import type { TaskDetailHistoryChatProps } from '@/types/common'
+import { formatTodayOrNot } from '@/utils/date'
+import { useQueryClient } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
+import { computed, defineProps, ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+const isClicked = ref(false)
+const isProcessor = computed(() => history.details.commentDetails?.nickName !== requestorName)
+const queryClient = useQueryClient()
+
+const { taskId, history, requestorName } = defineProps<TaskDetailHistoryChatProps>()
+
+const clickMenuDot = async () => {
+  isClicked.value = !isClicked.value
+}
+
+const deleteCommentText = async () => {
+  isClicked.value = !isClicked.value
+  await deleteComment(history.historyId)
+  queryClient.invalidateQueries({ queryKey: ['historyData', taskId] })
+}
+</script>
diff --git a/src/components/task-detail/TaskDetailHistoryFile.vue b/src/components/task-detail/TaskDetailHistoryFile.vue
new file mode 100644
index 00000000..fbfd2642
--- /dev/null
+++ b/src/components/task-detail/TaskDetailHistoryFile.vue
@@ -0,0 +1,84 @@
+<template>
+  <div :class="['flex w-full', isProcessor ? 'justify-end' : 'justify-start']">
+    <div :class="['w-10 h-10 rounded-full pt-1.5', isProcessor ? 'order-3' : 'order-1']">
+      <img
+        :src="history.details.commentFileDetails?.profileImageUrl || '/images/mockProfile.jpg'"
+        class="rounded-full" />
+    </div>
+    <div :class="['flex flex-col gap-2 px-4 order-2', isProcessor ? 'items-end' : 'items-start']">
+      <p>{{ history.details.commentFileDetails?.nickName }}</p>
+      <div
+        :class="[
+          'flex max-w-[400px] flex-wrap px-6 py-4 gap-4 items-center text-black rounded-lg',
+          isProcessor ? 'bg-primary2' : 'bg-background-2'
+        ]">
+        <a
+          class="w-10 h-10 flex items-center justify-center bg-white border border-border-2 rounded-lg"
+          :href="history.details.commentFileDetails?.url"
+          download>
+          <CommonIcons :name="fileIcon" />
+        </a>
+        <div class="flex flex-col gap-2">
+          <p>{{ history.details.commentFileDetails?.fileName }}</p>
+          <p class="text-xs font-bold text-body">
+            용량 : {{ history.details.commentFileDetails?.size }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      :class="[
+        'flex h-full items-end text-xs font-bold text-body',
+        isProcessor ? 'ml-4 order-1' : 'ml-2 order-3'
+      ]">
+      <div
+        v-if="history.details.commentDetails?.nickName === info.nickname"
+        class="relative cursor-pointer">
+        <CommonIcons
+          :name="menuDotIcon"
+          @click="clickMenuDot" />
+        <div
+          v-if="isClicked"
+          @click="deleteCommentText"
+          :class="[
+            'absolute shadow-custom bottom-0 w-20 h-7 flex items-center justify-center text-xs text-red-1 bg-white hover:bg-background-1',
+            isProcessor ? 'right-6' : 'left-6'
+          ]">
+          삭제
+        </div>
+      </div>
+      {{ history.details.commentFileDetails?.isModified ? '(수정됨)' : '' }}
+      {{ formatTodayOrNot(history.date, history.time) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { deleteComment } from '@/api/user'
+import { fileIcon, menuDotIcon } from '@/constants/iconPath'
+import { useMemberStore } from '@/stores/member'
+import type { TaskDetailHistoryChatProps } from '@/types/common'
+import { formatTodayOrNot } from '@/utils/date'
+import { useQueryClient } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
+import { computed, defineProps, ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+
+const { history, requestorName, taskId } = defineProps<TaskDetailHistoryChatProps>()
+
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+const isClicked = ref(false)
+const queryClient = useQueryClient()
+const clickMenuDot = async () => {
+  isClicked.value = !isClicked.value
+}
+
+const deleteCommentText = async () => {
+  isClicked.value = !isClicked.value
+  await deleteComment(history.historyId)
+  queryClient.invalidateQueries({ queryKey: ['historyData', taskId] })
+}
+
+const isProcessor = computed(() => history.details.commentFileDetails?.nickName !== requestorName)
+</script>
diff --git a/src/components/task-detail/TaskDetailHistoryInput.vue b/src/components/task-detail/TaskDetailHistoryInput.vue
index db6b0ba8..3ce09df5 100644
--- a/src/components/task-detail/TaskDetailHistoryInput.vue
+++ b/src/components/task-detail/TaskDetailHistoryInput.vue
@@ -1,20 +1,23 @@
 <template>
   <div
     :class="[
-      'w-full flex gap-3 px-6 py-4 border border-border-1 items-center',
-      { 'bg-background-2': isPossible }
+      'w-full flex gap-3 px-4 py-3 border border-border-1 items-end rounded',
+      { 'bg-background-2': !isPossible, 'bg-white': isPossible }
     ]">
-    <input
-      class="w-full h-8 focus:outline-none"
+    <textarea
+      class="w-full h-20 focus:outline-none resize-none"
       type="text"
       :placeholder="placeHolderText"
-      :disabled="isPossible" />
+      v-model="messageText"
+      :disabled="!isPossible"
+      @compositionstart="isComposing = true"
+      @compositionend="isComposing = false"
+      @keyup.enter.prevent="handleEnterKey"></textarea>
     <input
       class="hidden"
       type="file"
       id="file"
-      :disabled="isPossible"
-      multiple
+      :disabled="!isPossible"
       @change="handleFileUpload" />
     <label
       for="file"
@@ -24,24 +27,66 @@
     <CommonIcons
       :name="sendIcon"
       class="cursor-pointer"
-      :style="{ fill: isPossible ? '#7879EB' : '#A1A1AA' }" />
+      :style="{ fill: isSendable ? '#7879EB' : '#A1A1AA' }"
+      @click="sendMessage" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { postComment, postCommentAttachment } from '@/api/user'
 import { clipIcon, sendIcon } from '@/constants/iconPath'
+import { useMemberStore } from '@/stores/member'
 import type { TaskHistory } from '@/types/user'
-import { ref } from 'vue'
+import { useQueryClient } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
+import { computed, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { history } = defineProps<{ history: TaskHistory[] }>()
-const isPossible = ref(history.length === 0)
-const placeHolderText = ref(isPossible?.value ? '텍스트를 입력' : '요청 승인 후 작성할 수 있습니다')
+const { history, taskId, requestorName } = defineProps<{
+  history: TaskHistory[]
+  taskId: number
+  requestorName: string
+}>()
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+const queryClient = useQueryClient()
 
-const handleFileUpload = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  if (target.files && target.files.length > 0) {
-    console.log('향후 파일 전송로직 추가')
+const messageText = ref('')
+const isComposing = ref(false)
+
+const isPossible = computed(
+  () =>
+    history.length !== 0 &&
+    (info.value.memberRole !== 'ROLE_USER' || info.value.nickname === requestorName)
+)
+
+const isSendable = computed(() => isPossible.value && messageText.value.trim() !== '')
+const placeHolderText = computed(() =>
+  isPossible.value ? '텍스트를 입력' : '요청 승인 후 작성할 수 있습니다'
+)
+
+const sendMessage = async () => {
+  if (!isPossible.value || !messageText.value.trim()) return
+
+  await postComment(taskId, messageText.value)
+  queryClient.invalidateQueries({ queryKey: ['historyData', taskId] })
+  messageText.value = ''
+}
+
+const handleEnterKey = () => {
+  if (!isComposing.value) {
+    sendMessage()
   }
 }
+
+const handleFileUpload = async (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+  const formData = new FormData()
+  formData.append('attachment', file)
+  await postCommentAttachment(taskId, formData)
+  queryClient.invalidateQueries({ queryKey: ['historyData', taskId] })
+  target.value = ''
+}
 </script>
diff --git a/src/components/task-detail/TaskDetailLeft.vue b/src/components/task-detail/TaskDetailLeft.vue
index 0f466524..95fdade4 100644
--- a/src/components/task-detail/TaskDetailLeft.vue
+++ b/src/components/task-detail/TaskDetailLeft.vue
@@ -14,7 +14,7 @@
     </div>
     <div>
       <p class="task-detail">부가 설명</p>
-      <p class="px-6 py-4 bg-primary2 rounded-lg font-normal">{{ data.description }}</p>
+      <p class="px-6 py-4 bg-primary2 rounded-lg font-normal min-h-[120px]">{{ data.description }}</p>
     </div>
     <div>
       <p class="task-detail">첨부 파일</p>
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index bf992b9f..7332f94e 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="min-w-60 flex flex-col gap-y-6 pb-6 text-black">
     <div>
-      <p class="task-detail">ID</p>
-      <p class="text-sm text-black">{{ data.taskId || '-' }}</p>
+      <p class="task-detail">고유코드</p>
+      <p class="text-sm text-black">{{ data.taskCode || '-' }}</p>
     </div>
     <div>
       <p class="task-detail">요청일</p>
@@ -56,25 +56,31 @@
         <p class="text-sm text-black">{{ data.processorNickName || '-' }}</p>
       </div>
     </div>
-    <div v-if="data.dueDate">
+    <div>
       <p class="task-detail">마감기한</p>
-      <div class="w-full flex justify-between items-center">
-        <p class="text-sm text-black">{{ formatDueDate(data.dueDate) || '-' }}</p>
+      <div v-if="data.dueDate">
+        <div class="w-full flex justify-between items-center">
+          <p class="text-sm text-black">{{ formatDueDate(data.dueDate) || '-' }}</p>
+        </div>
+        <p class="text-red-1 text-xs font-bold">{{ formatDaysBefore(data.dueDate) }}</p>
       </div>
-      <p class="text-red-1 text-xs font-bold">{{ formatDaysBefore(data.dueDate) }}</p>
+      <div v-else>-</div>
     </div>
-    <div v-if="data.labelName">
+    <div>
       <p class="task-detail">구분</p>
-      <TaskDetailLabelDropdown
-        v-if="isProcessor"
-        v-model="taskLabel"
-        :placeholder-text="'라벨을 선택해주세요'"
-        :task-id="data.taskId" />
-      <div
-        v-else-if="!isProcessor"
-        class="flex w-full items-center bg-white text-sm text-black">
-        {{ data.labelName }}
+      <div v-if="data.labelName">
+        <TaskDetailLabelDropdown
+          v-if="isProcessor"
+          v-model="taskLabel"
+          :placeholder-text="'라벨을 선택해주세요'"
+          :task-id="data.taskId" />
+        <div
+          v-else-if="!isProcessor"
+          class="flex w-full items-center bg-white text-sm text-black">
+          {{ data.labelName }}
+        </div>
       </div>
+      <div v-else>-</div>
     </div>
   </div>
 </template>
diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index 46e31bb1..a8944afc 100644
--- a/src/components/task-detail/TaskDetailTopBar.vue
+++ b/src/components/task-detail/TaskDetailTopBar.vue
@@ -2,13 +2,13 @@
   <div class="w-full flex justify-between items-center bg-white">
     <div class="flex gap-4 text-sm font-bold pb-6">
       <div
-        v-if="!isProcessor && isApproved"
+        v-if="isApproved && isRequestor"
         class="flex gap-1 items-center cursor-pointer">
         <CommonIcons :name="reRequestIcon" />
         <p class="text-body">재요청</p>
       </div>
       <div
-        v-if="!isProcessor && !isApproved"
+        v-if="!isApproved && isRequestor"
         class="flex gap-1 items-center cursor-pointer">
         <CommonIcons :name="modificationIcon" />
         <p class="text-primary1">요청 수정</p>
@@ -22,7 +22,7 @@
       </div>
       <div
         @click="cancelTask"
-        v-if="!isApproved"
+        v-if="!isApproved && (isRequestor || isProcessor)"
         class="flex gap-1 items-center cursor-pointer">
         <CommonIcons :name="cancelIcon" />
         <p class="text-red-1">요청취소</p>
@@ -57,7 +57,8 @@ import CommonIcons from '../common/CommonIcons.vue'
 import ModalView from '../ModalView.vue'
 
 const router = useRouter()
-const { isApproved, closeTaskDetail, id, isProcessor } = defineProps<TaskDetailTopBarProps>()
+const { isApproved, closeTaskDetail, id, isProcessor, isRequestor } =
+  defineProps<TaskDetailTopBarProps>()
 
 const isModalOpen = ref({
   cancel: false,
diff --git a/src/components/task-detail/TaskStatusList.vue b/src/components/task-detail/TaskStatusList.vue
index 51e2995f..3c071422 100644
--- a/src/components/task-detail/TaskStatusList.vue
+++ b/src/components/task-detail/TaskStatusList.vue
@@ -1,5 +1,25 @@
 <template>
   <div class="flex flex-wrap items-center gap-2.5">
+    <ModalView
+      :is-open="isModalVisible.reject"
+      @update:model-value="value => (rejectReason = value)"
+      type="inputType"
+      @close="closeModal"
+      @click="rejectRequest">
+      <template #header>종료 사유를 입력해주세요</template>
+    </ModalView>
+    <ModalView
+      :is-open="isModalVisible.success"
+      type="successType"
+      @close="closeModal">
+      <template #header>작업이 종료되었습니다</template>
+    </ModalView>
+    <ModalView
+      :is-open="isModalVisible.fail"
+      type="failType"
+      @close="closeModal">
+      <template #header>{{ modalError }}</template>
+    </ModalView>
     <div
       v-for="statusItem in TASK_STATUS_LIST"
       :key="statusItem.content"
@@ -20,16 +40,24 @@ import { patchChangeStatus } from '@/api/user'
 import { TASK_STATUS_LIST } from '@/constants/common'
 import type { Status } from '@/types/common'
 import type { TaskStatusListProps } from '@/types/user'
+import { axiosInstance } from '@/utils/axios'
 import { statusAsColor } from '@/utils/statusAsColor'
 import { useQueryClient } from '@tanstack/vue-query'
 import { ref, watch } from 'vue'
+import ModalView from '../ModalView.vue'
 
 const { modelValue, isProcessor, taskId } = defineProps<TaskStatusListProps>()
-
+const modalError = ref('')
+const rejectReason = ref('')
 const emit = defineEmits(['update:status'])
 
 const currentStatus = ref(modelValue)
 const queryClient = useQueryClient()
+const isModalVisible = ref({
+  reject: false,
+  fail: false,
+  success: false
+})
 
 watch(
   () => modelValue,
@@ -38,22 +66,53 @@ watch(
   }
 )
 
+const toggleModal = (key: keyof typeof isModalVisible.value) => {
+  isModalVisible.value = Object.fromEntries(
+    Object.keys(isModalVisible.value).map(k => [k, k === key])
+  ) as typeof isModalVisible.value
+}
+
+const closeModal = () => {
+  const prevSuccess = isModalVisible.value.success
+  isModalVisible.value = { reject: false, fail: false, success: false }
+  if (prevSuccess) queryClient.invalidateQueries({ queryKey: ['requested'] })
+}
+
 const textColor = (taskStatus: Status) => {
   return currentStatus.value === taskStatus ? 'text-white' : `text-${statusAsColor(taskStatus)}-1`
 }
+
 const bgColor = (taskStatus: Status) => {
   return currentStatus.value === taskStatus
     ? `bg-${statusAsColor(taskStatus)}-1`
     : `bg-${statusAsColor(taskStatus)}-2`
 }
 
+const rejectRequest = async () => {
+  if (rejectReason.value.length === 0) {
+    toggleModal('fail')
+    modalError.value = '종료 사유를 입력해주세요'
+    return
+  }
+  try {
+    await axiosInstance.patch(`/api/tasks/${taskId}/terminate`, rejectReason)
+    toggleModal('success')
+  } catch {
+    toggleModal('fail')
+    modalError.value = '작업 종료에 실패했습니다'
+  }
+}
+
 const changeStatus = async (newStatus: Status) => {
   if (currentStatus.value === newStatus) {
     return
   }
   currentStatus.value = newStatus
   emit('update:status', newStatus)
-
+  if (newStatus === 'TERMINATED') {
+    toggleModal('reject')
+    return
+  }
   try {
     const res = await patchChangeStatus(taskId || 0, newStatus)
     console.log(res, '상태 바꾸기')
diff --git a/src/constants/iconPath.ts b/src/constants/iconPath.ts
index ad957c46..4a79d92b 100644
--- a/src/constants/iconPath.ts
+++ b/src/constants/iconPath.ts
@@ -224,3 +224,26 @@ export const checkBoxIcon = {
   height: 12,
   fill: '#A1A1AA'
 }
+
+export const fileIcon = {
+  path: [
+    'M9 13.5H15M9 17.5H12M4 4.5V20.5C4 21.0304 4.21071 21.5391 4.58579 21.9142C4.96086 22.2893 5.46957 22.5 6 22.5H18C18.5304 22.5 19.0391 22.2893 19.4142 21.9142C19.7893 21.5391 20 21.0304 20 20.5V8.842C20 8.57556 19.9467 8.31181 19.8433 8.06624C19.7399 7.82068 19.5885 7.59824 19.398 7.412L14.958 3.07C14.5844 2.70466 14.0826 2.50007 13.56 2.5H6C5.46957 2.5 4.96086 2.71071 4.58579 3.08579C4.21071 3.46086 4 3.96957 4 4.5Z',
+    'M14 2.5V6.5C14 7.03043 14.2107 7.53914 14.5858 7.91421C14.9609 8.28929 15.4696 8.5 16 8.5H20'
+  ],
+  width: 24,
+  height: 25,
+  fill: 'none',
+  options: {
+    stroke: '#7879EB',
+    'stroke-width': 2,
+    'stroke-linecap': 'round' as const,
+    'stroke-linejoin': 'round' as const
+  }
+}
+
+export const menuDotIcon = {
+  path: 'M8.75 4.99973C8.75 4.82598 8.75 4.73848 8.76 4.66598C8.792 4.43727 8.89765 4.22522 9.06095 4.06192C9.22424 3.89863 9.43629 3.79298 9.665 3.76098C9.73875 3.75098 9.825 3.75098 9.99875 3.75098C10.1725 3.75098 10.2612 3.75098 10.3325 3.76098C10.5612 3.79298 10.7733 3.89863 10.9366 4.06192C11.0998 4.22522 11.2055 4.43727 11.2375 4.66598C11.2475 4.73848 11.2475 4.82598 11.2475 4.99973C11.2475 5.17348 11.2475 5.26098 11.2375 5.33348C11.2055 5.56218 11.0998 5.77423 10.9366 5.93753C10.7733 6.10083 10.5612 6.20647 10.3325 6.23848C10.26 6.24848 10.1725 6.24848 9.99875 6.24848C9.825 6.24848 9.7375 6.24848 9.665 6.23848C9.43629 6.20647 9.22424 6.10083 9.06095 5.93753C8.89765 5.77423 8.792 5.56218 8.76 5.33348C8.75 5.26098 8.75 5.17348 8.75 4.99973ZM8.75 9.99973C8.75 9.82598 8.75 9.73848 8.76 9.66598C8.792 9.43727 8.89765 9.22522 9.06095 9.06192C9.22424 8.89863 9.43629 8.79298 9.665 8.76098C9.73875 8.75098 9.825 8.75098 9.99875 8.75098C10.1725 8.75098 10.2612 8.75098 10.3325 8.76098C10.5612 8.79298 10.7733 8.89863 10.9366 9.06192C11.0998 9.22522 11.2055 9.43727 11.2375 9.66598C11.2475 9.73848 11.2475 9.82598 11.2475 9.99973C11.2475 10.1735 11.2475 10.261 11.2375 10.3335C11.2055 10.5622 11.0998 10.7742 10.9366 10.9375C10.7733 11.1008 10.5612 11.2065 10.3325 11.2385C10.26 11.2485 10.1725 11.2485 9.99875 11.2485C9.825 11.2485 9.7375 11.2485 9.665 11.2385C9.43629 11.2065 9.22424 11.1008 9.06095 10.9375C8.89765 10.7742 8.792 10.5622 8.76 10.3335C8.75 10.261 8.75 10.1735 8.75 9.99973ZM8.75 14.9997C8.75 14.826 8.75 14.7385 8.76 14.666C8.792 14.4373 8.89765 14.2252 9.06095 14.0619C9.22424 13.8986 9.43629 13.793 9.665 13.761C9.73875 13.751 9.825 13.751 9.99875 13.751C10.1725 13.751 10.2612 13.751 10.3325 13.761C10.5612 13.793 10.7733 13.8986 10.9366 14.0619C11.0998 14.2252 11.2055 14.4373 11.2375 14.666C11.2475 14.7385 11.2475 14.826 11.2475 14.9997C11.2475 15.1735 11.2475 15.261 11.2375 15.3347C11.2055 15.5634 11.0998 15.7755 10.9366 15.9388C10.7733 16.1021 10.5612 16.2077 10.3325 16.2397C10.26 16.2497 10.1725 16.2497 10 16.2497C9.8275 16.2497 9.73875 16.2497 9.66625 16.2397C9.43754 16.2077 9.22549 16.1021 9.0622 15.9388C8.8989 15.7755 8.79325 15.5634 8.76125 15.3347C8.75 15.2622 8.75 15.1747 8.75 14.9997Z',
+  width: 20,
+  height: 20,
+  fill: '#71717A'
+}
diff --git a/src/layout/TheView.vue b/src/layout/TheView.vue
index b8f29afa..99d0a959 100644
--- a/src/layout/TheView.vue
+++ b/src/layout/TheView.vue
@@ -1,6 +1,36 @@
 <template>
   <div class="w-full">
-    <!-- <TheTopBar /> -->
+    <div v-if="selectedID">
+      <TaskDetail
+        :selected-id="Number(selectedID)"
+        :close-task-detail="() => handleModal(null)" />
+    </div>
     <RouterView />
   </div>
 </template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+
+import TaskDetail from '@/components/task-detail/TaskDetail.vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const selectedID = ref(route.query.taskId || null)
+const handleModal = (id: string | null) => {
+  selectedID.value = id
+}
+
+watch(
+  () => route.query.taskId,
+  newTaskID => {
+    selectedID.value = newTaskID || null
+  }
+)
+
+onMounted(() => {
+  if (route.query.taskId) {
+    selectedID.value = route.query.taskId
+  }
+})
+</script>
diff --git a/src/types/common.ts b/src/types/common.ts
index 0315014d..4c18d85a 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -1,4 +1,5 @@
 import type { Ref } from 'vue'
+import type { TaskHistory } from './user'
 
 export interface Filter {
   title: string
@@ -109,3 +110,15 @@ export interface TaskStatusListTypes {
   value: Status
   content: string
 }
+
+export interface TaskDetailHistoryProps {
+  historyData: TaskHistory[]
+  taskId: number
+  requestorName: string
+}
+
+export interface TaskDetailHistoryChatProps {
+  history: TaskHistory
+  taskId: number
+  requestorName: string
+}
diff --git a/src/types/manager.ts b/src/types/manager.ts
index 854019d2..29c90ebc 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -104,6 +104,7 @@ export interface TaskDetailTopBarProps {
   closeTaskDetail: () => void
   id: number
   isProcessor: boolean
+  isRequestor: boolean
 }
 
 export interface DraggableEvent {
diff --git a/src/types/user.ts b/src/types/user.ts
index 01241965..9572ef1b 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -83,7 +83,7 @@ export type TaskHistoryType =
   | 'PROCESSOR_CHANGED'
   | 'TASK_TERMINATED'
 
-export interface TaskDetailHistoryProps {
+export interface TaskDetailHistoryData {
   histories: TaskHistory[]
 }
 
@@ -122,7 +122,6 @@ export interface CommentFileDetails {
 }
 
 export interface TaskDetailProps {
-  isApproved: boolean
   selectedId: number
   closeTaskDetail: () => void
 }
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 48a7ef26..7b7f2378 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -50,3 +50,15 @@ export const formatDaysBefore = (dateString: string) => {
 
   return `${diffDays}일 남음`
 }
+export const formatTodayOrNot = (dateStr: string, timeStr: string) => {
+  const inputDate = new Date(`${dateStr}T${timeStr}`)
+  const today = new Date()
+
+  const isSameDay = inputDate.toDateString() === today.toDateString()
+
+  if (isSameDay) {
+    return inputDate.toTimeString().slice(0, 5)
+  } else {
+    return `${inputDate.getMonth() + 1}월 ${inputDate.getDate()}일`
+  }
+}