From 067d12a1d5817ad608c3c8916dc5082c21b991a8 Mon Sep 17 00:00:00 2001
From: KIM_DEAHO <102588838+DHowor1d@users.noreply.github.com>
Date: Sat, 13 Sep 2025 20:51:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=B4=EC=8A=88=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95,=20=EB=8C=93=EA=B8=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/TaskDetail.jsx          | 475 ------------------
 src/components/common/task/TaskActions.jsx    |  37 ++
 src/components/common/task/TaskComments.jsx   | 239 +++++++++
 .../common/task/TaskDescription.jsx           |  31 ++
 src/components/common/task/TaskDetail.jsx     | 124 +++++
 src/components/common/task/TaskHeader.jsx     | 211 ++++++++
 src/components/common/task/TaskMetadata.jsx   |  42 ++
 src/components/common/task/TaskSchedule.jsx   |  85 ++++
 src/components/kanban/Kanban.jsx              |   4 +-
 src/components/kanban/KanbanCard.jsx          |   4 +-
 src/components/meeting/MeetingCreate.jsx      |   6 +-
 src/data/taskComments.js                      | 105 ++++
 src/index.css                                 |   4 +
 13 files changed, 885 insertions(+), 482 deletions(-)
 delete mode 100644 src/components/common/TaskDetail.jsx
 create mode 100644 src/components/common/task/TaskActions.jsx
 create mode 100644 src/components/common/task/TaskComments.jsx
 create mode 100644 src/components/common/task/TaskDescription.jsx
 create mode 100644 src/components/common/task/TaskDetail.jsx
 create mode 100644 src/components/common/task/TaskHeader.jsx
 create mode 100644 src/components/common/task/TaskMetadata.jsx
 create mode 100644 src/components/common/task/TaskSchedule.jsx
 create mode 100644 src/data/taskComments.js

diff --git a/src/components/common/TaskDetail.jsx b/src/components/common/TaskDetail.jsx
deleted file mode 100644
index 574ceef..0000000
--- a/src/components/common/TaskDetail.jsx
+++ /dev/null
@@ -1,475 +0,0 @@
-import { useState } from "react";
-import {
-  ArrowBack,
-  CalendarToday,
-  Person,
-  Flag,
-  Assignment,
-  Delete,
-  Schedule,
-  Edit,
-  Save,
-  Cancel,
-} from "@mui/icons-material";
-import BadgeComponent from "./BadgeComponent";
-import Dropdown from "./Dropdown";
-import { membersData } from "../../data/employees";
-
-function TaskDetail({ task, onBack, onUpdate, onDelete }) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editData, setEditData] = useState({
-    ...task,
-    memberId:
-      task?.memberId || task?.memberName
-        ? membersData.find((m) => m.name === task.memberName)?.id
-        : null,
-  });
-
-  // 편집 핸들러
-  const handleEdit = () => {
-    setIsEditing(true);
-    setEditData({
-      ...task,
-      memberId:
-        task?.memberId || task?.memberName
-          ? membersData.find((m) => m.name === task.memberName)?.id
-          : null,
-    });
-  };
-
-  const handleDelete = () => {
-    if (window.confirm("이 작업을 삭제하시겠습니까?")) {
-      if (onDelete) {
-        onDelete(task.id);
-      }
-    }
-  };
-
-  const handleSave = () => {
-    if (onUpdate) {
-      onUpdate(task.id, editData);
-    }
-    setIsEditing(false);
-  };
-
-  const handleCancel = () => {
-    setEditData({
-      ...task,
-      memberId:
-        task?.memberId || task?.memberName
-          ? membersData.find((m) => m.name === task.memberName)?.id
-          : null,
-    });
-    setIsEditing(false);
-  };
-
-  // 드롭다운 옵션 데이터
-  const statusOptions = [
-    { value: "TODO", label: "할 일" },
-    { value: "PROGRESS", label: "진행 중" },
-    { value: "DONE", label: "완료" },
-  ];
-
-  const priorityOptions = [
-    { value: "HIGH", label: "높음" },
-    { value: "MEDIUM", label: "보통" },
-    { value: "LOW", label: "낮음" },
-  ];
-
-  const memberOptions = membersData.map((member) => ({
-    value: member.id,
-    label: member.name,
-  }));
-  if (!task) {
-    return (
-      <div className="min-h-full flex items-center justify-center">
-        <div className="text-center">
-          <p className="text-gray-500">작업 정보를 찾을 수 없습니다.</p>
-          <button
-            onClick={onBack}
-            className="mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
-          >
-            목록으로 돌아가기
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // 날짜 포맷팅
-  const formatDate = (dateString) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString("ko-KR", {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      weekday: "long",
-    });
-  };
-
-  // 우선순위 표시
-  const getPriorityInfo = (priority) => {
-    switch (priority?.toUpperCase()) {
-      case "HIGH":
-        return { label: "높음", color: "text-red-600 bg-red-50" };
-      case "MEDIUM":
-        return { label: "보통", color: "text-yellow-600 bg-yellow-50" };
-      case "LOW":
-        return { label: "낮음", color: "text-green-600 bg-green-50" };
-      default:
-        return { label: priority, color: "text-gray-600 bg-gray-50" };
-    }
-  };
-
-  // 상태 표시
-  const getStatusInfo = (status) => {
-    switch (status?.toUpperCase()) {
-      case "TODO":
-        return { label: "할 일", color: "text-gray-600 bg-gray-100" };
-      case "PROGRESS":
-        return { label: "진행 중", color: "text-blue-600 bg-blue-100" };
-      case "DONE":
-        return { label: "완료", color: "text-green-600 bg-green-100" };
-      default:
-        return { label: status, color: "text-gray-600 bg-gray-100" };
-    }
-  };
-
-  const priorityInfo = getPriorityInfo(task.priority);
-  const statusInfo = getStatusInfo(task.status);
-
-  // 메타데이터 구성
-  const metadataItems = [
-    { label: "작업 ID", value: `${task.id}` },
-    { label: "프로젝트 ID", value: `${task.projectId}` },
-    {
-      label: "생성일",
-      value: task.createdAt
-        ? new Date(task.createdAt).toLocaleDateString("ko-KR")
-        : "-",
-    },
-    {
-      label: "수정일",
-      value: task.updatedAt
-        ? new Date(task.updatedAt).toLocaleDateString("ko-KR")
-        : "-",
-    },
-  ];
-
-  return (
-    <div className="min-h-full">
-      <div className="mx-auto">
-        {/* 헤더 */}
-        <div className="pb-4 border-b border-gray-200">
-          <div className="flex items-start justify-between">
-            <div className="flex items-start gap-4 flex-1">
-              <button
-                onClick={onBack}
-                className="p-2 hover:bg-gray-100 rounded-lg transition-colors mt-1"
-              >
-                <ArrowBack className="w-7 h-7 text-gray-600" />
-              </button>
-              <div className="flex-1">
-                {isEditing ? (
-                  <input
-                    type="text"
-                    value={editData.title || ""}
-                    onChange={(e) =>
-                      setEditData({ ...editData, title: e.target.value })
-                    }
-                    className="text-2xl font-semibold text-gray-900 bg-white border border-gray-300 rounded-lg px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    placeholder="작업 제목을 입력하세요"
-                  />
-                ) : (
-                  <h1 className="text-2xl font-semibold text-gray-900">
-                    {task.title}
-                  </h1>
-                )}
-                <div className="flex items-center gap-4 mt-3">
-                  {/* 상태 */}
-                  <div className="flex items-center gap-2">
-                    <Assignment className="w-5 h-5 text-gray-500" />
-                    {isEditing ? (
-                      <Dropdown
-                        options={statusOptions}
-                        value={editData.status}
-                        onChange={(value) =>
-                          setEditData({ ...editData, status: value })
-                        }
-                        width="w-32"
-                        className="text-sm"
-                      />
-                    ) : (
-                      <span
-                        className={`px-3 py-1 rounded-full text-sm font-medium ${statusInfo.color}`}
-                      >
-                        {statusInfo.label}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* 우선순위 */}
-                  <div className="flex items-center gap-2">
-                    <Flag className="w-5 h-5 text-gray-500" />
-                    {isEditing ? (
-                      <Dropdown
-                        options={priorityOptions}
-                        value={editData.priority}
-                        onChange={(value) =>
-                          setEditData({ ...editData, priority: value })
-                        }
-                        width="w-32"
-                        className="text-sm"
-                      />
-                    ) : (
-                      <span
-                        className={`px-3 py-1 rounded-full text-sm font-medium ${priorityInfo.color}`}
-                      >
-                        {priorityInfo.label}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* 담당자 */}
-                  <div className="flex items-center gap-2">
-                    <Person className="w-5 h-5 text-gray-500" />
-                    {isEditing ? (
-                      <Dropdown
-                        options={memberOptions}
-                        value={editData.memberId}
-                        onChange={(value) => {
-                          const selectedMember = membersData.find(
-                            (m) => m.id === value
-                          );
-                          setEditData({
-                            ...editData,
-                            memberId: value,
-                            memberName: selectedMember?.name || "",
-                          });
-                        }}
-                        width="w-36"
-                        className="text-sm"
-                        placeholder="담당자 선택"
-                      />
-                    ) : (
-                      <span className="text-sm text-gray-700">
-                        {task.memberName || "담당자 미지정"}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* 마감일 */}
-                  <div className="flex items-center gap-2">
-                    <Schedule className="w-5 h-5 text-gray-500" />
-                    {isEditing ? (
-                      <input
-                        type="date"
-                        value={
-                          editData.endDate
-                            ? new Date(editData.endDate)
-                                .toISOString()
-                                .split("T")[0]
-                            : ""
-                        }
-                        onChange={(e) =>
-                          setEditData({ ...editData, endDate: e.target.value })
-                        }
-                        className="text-sm text-gray-700 border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                      />
-                    ) : (
-                      task.endDate && (
-                        <span className="text-sm text-gray-700">
-                          {formatDate(task.endDate)}
-                        </span>
-                      )
-                    )}
-                  </div>
-                </div>
-
-                {/* 태그 */}
-                {task.tags && task.tags.length > 0 && (
-                  <div className="flex items-center gap-2 mt-3">
-                    <span className="text-sm text-gray-500">태그:</span>
-                    <div className="flex flex-wrap gap-2">
-                      {task.tags.map((tag, index) => (
-                        <span
-                          key={index}
-                          className="px-2 py-1 bg-blue-100 text-blue-800 text-sm rounded-md"
-                        >
-                          {typeof tag === "object" ? tag.name : tag}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* 편집 버튼 영역 */}
-            <div className="flex items-center gap-2 ml-4">
-              {isEditing ? (
-                <>
-                  <button 
-                    onClick={handleSave} 
-                    className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-                  >
-                    <Save className="w-4 h-4" />
-                    저장
-                  </button>
-                  <button
-                    onClick={handleCancel}
-                    className="flex items-center gap-2 px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
-                  >
-                    <Cancel className="w-4 h-4" />
-                    취소
-                  </button>
-                </>
-              ) : (
-                <div className="flex items-center gap-3">
-                  <button 
-                    onClick={handleEdit} 
-                    className="editBtn"
-                  >
-                    <Edit />
-                    편집
-                  </button>
-                  <button 
-                    onClick={handleDelete} 
-                    className="deleteBtn"
-                  >
-                    <Delete/>
-                    삭제
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* 메인 컨텐츠 */}
-        <div className="grid grid-cols-5 gap-6">
-          <div className="col-span-3">
-            {/* 작업 설명 */}
-            <div className="rounded-lg p-6">
-              <h2 className="text-xl font-semibold mb-3">작업 설명</h2>
-              <div className="rounded-lg p-4 border border-gray-200 bg-gray-50">
-                {isEditing ? (
-                  <textarea
-                    value={editData.desc || ""}
-                    onChange={(e) =>
-                      setEditData({ ...editData, desc: e.target.value })
-                    }
-                    className="w-full whitespace-pre-wrap leading-relaxed text-gray-700 bg-white border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
-                    rows={6}
-                    placeholder="작업 설명을 입력하세요"
-                  />
-                ) : (
-                  <p className="whitespace-pre-wrap leading-relaxed text-gray-700">
-                    {task.desc || "작업 설명이 작성되지 않았습니다."}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            {/* 메타 정보 */}
-            <div className="rounded-lg p-6">
-              <h2 className="text-xl font-semibold mb-3">작업 정보</h2>
-              <div className="grid grid-cols-4 gap-4">
-                {metadataItems.map((item, index) => (
-                  <div
-                    key={index}
-                    className="flex justify-between p-3 bg-gray-100"
-                  >
-                    <span className="text-gray-600 font-medium">
-                      {item.label}
-                    </span>
-                    <span className={`text-gray-900 ${item.className || ""}`}>
-                      {item.value}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            {/* 일정 정보 */}
-            <div className="rounded-lg p-6">
-              <h2 className="text-xl font-semibold mb-3">일정</h2>
-              <div className="bg-gray-50 rounded-lg p-4">
-                <div className="grid grid-cols-2 gap-4">
-                  {/* 시작일 */}
-                  <div>
-                    <span className="text-gray-600 font-medium block mb-1">
-                      시작일
-                    </span>
-                    {isEditing ? (
-                      <input
-                        type="date"
-                        value={
-                          editData.startDate
-                            ? new Date(editData.startDate)
-                                .toISOString()
-                                .split("T")[0]
-                            : ""
-                        }
-                        onChange={(e) =>
-                          setEditData({
-                            ...editData,
-                            startDate: e.target.value,
-                          })
-                        }
-                        className="text-gray-900 border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                      />
-                    ) : (
-                      <span className="text-gray-900">
-                        {task.startDate ? formatDate(task.startDate) : "-"}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* 마감일 */}
-                  <div>
-                    <span className="text-gray-600 font-medium block mb-1">
-                      마감일
-                    </span>
-                    {isEditing ? (
-                      <input
-                        type="date"
-                        value={
-                          editData.endDate
-                            ? new Date(editData.endDate)
-                                .toISOString()
-                                .split("T")[0]
-                            : ""
-                        }
-                        onChange={(e) =>
-                          setEditData({ ...editData, endDate: e.target.value })
-                        }
-                        className="text-gray-900 border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                      />
-                    ) : (
-                      <span className="text-gray-900">
-                        {task.endDate ? formatDate(task.endDate) : "-"}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* 우측 영역 - 댓글 공간 (추후 구현) */}
-          <div className="col-span-2">
-            <div className=" p-6">
-              <h3 className="text-lg font-semibold mb-4 text-gray-700">댓글</h3>
-              <div className="flex items-center justify-center h-64">
-                <p className="text-gray-500">댓글 여기 넣을거임</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default TaskDetail;
diff --git a/src/components/common/task/TaskActions.jsx b/src/components/common/task/TaskActions.jsx
new file mode 100644
index 0000000..92cbf44
--- /dev/null
+++ b/src/components/common/task/TaskActions.jsx
@@ -0,0 +1,37 @@
+import { Delete, Edit } from "@mui/icons-material";
+
+function TaskActions({ 
+  isEditing, 
+  onEdit, 
+  onDelete, 
+  onSave, 
+  onCancel 
+}) {
+  return (
+    <>
+      {isEditing ? (
+        <>
+          <button onClick={onCancel} className="cancelBtn">
+            취소
+          </button>
+          <button onClick={onSave} className="createBtn">
+            저장
+          </button>
+        </>
+      ) : (
+        <div className="flex items-center gap-3">
+          <button onClick={onEdit} className="editBtn">
+            <Edit />
+            편집
+          </button>
+          <button onClick={onDelete} className="deleteBtn">
+            <Delete />
+            삭제
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default TaskActions;
\ No newline at end of file
diff --git a/src/components/common/task/TaskComments.jsx b/src/components/common/task/TaskComments.jsx
new file mode 100644
index 0000000..ea76931
--- /dev/null
+++ b/src/components/common/task/TaskComments.jsx
@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import { getCommentsByTaskId, addComment, updateComment, deleteComment } from '../../../data/taskComments';
+import { membersData } from '../../../data/employees';
+
+function TaskComments({ taskId = '4-1' }) {
+  const [comments, setComments] = useState([]);
+  const [newComment, setNewComment] = useState('');
+  const [editingCommentId, setEditingCommentId] = useState(null);
+  const [editContent, setEditContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // 현재 사용자 정보 (실제 구현시 AuthContext에서 가져옴)
+  const currentUser = membersData[0]; // 첫 번째 사용자를 현재 사용자로 가정
+
+  useEffect(() => {
+    // 댓글 목록 로드
+    const taskComments = getCommentsByTaskId(taskId);
+    setComments(taskComments);
+  }, [taskId]);
+
+  // 새 댓글 작성
+  const handleSubmitComment = async (e) => {
+    e.preventDefault();
+    if (!newComment.trim() || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      const comment = addComment(
+        taskId,
+        currentUser.id,
+        currentUser.name,
+        currentUser.position,
+        newComment.trim()
+      );
+      
+      setComments(prev => [...prev, comment]);
+      setNewComment('');
+    } catch (error) {
+      console.error('댓글 작성 실패:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // 댓글 수정 시작
+  const handleStartEdit = (comment) => {
+    setEditingCommentId(comment.id);
+    setEditContent(comment.content);
+  };
+
+  // 댓글 수정 취소
+  const handleCancelEdit = () => {
+    setEditingCommentId(null);
+    setEditContent('');
+  };
+
+  // 댓글 수정 저장
+  const handleSaveEdit = async (commentId) => {
+    if (!editContent.trim()) return;
+
+    try {
+      const updatedComment = updateComment(commentId, editContent.trim());
+      if (updatedComment) {
+        setComments(prev => 
+          prev.map(comment => 
+            comment.id === commentId ? updatedComment : comment
+          )
+        );
+        setEditingCommentId(null);
+        setEditContent('');
+      }
+    } catch (error) {
+      console.error('댓글 수정 실패:', error);
+    }
+  };
+
+  // 댓글 삭제
+  const handleDeleteComment = async (commentId) => {
+    if (!window.confirm('댓글을 삭제하시겠습니까?')) return;
+
+    try {
+      const deletedComment = deleteComment(commentId);
+      if (deletedComment) {
+        setComments(prev => prev.filter(comment => comment.id !== commentId));
+      }
+    } catch (error) {
+      console.error('댓글 삭제 실패:', error);
+    }
+  };
+
+  // 시간 포맷팅
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInHours = Math.floor((now - date) / (1000 * 60 * 60));
+    
+    if (diffInHours < 1) {
+      return '방금 전';
+    } else if (diffInHours < 24) {
+      return `${diffInHours}시간 전`;
+    } else {
+      return date.toLocaleDateString('ko-KR', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    }
+  };
+
+  return (
+    <div className="col-span-2">
+      <div className="p-6">
+        <h3 className="text-lg font-semibold mb-4 text-gray-700">
+          댓글 ({comments.length})
+        </h3>
+        
+        {/* 댓글 목록 */}
+        <div className="space-y-4 mb-6 max-h-96 overflow-y-auto">
+          {comments.length === 0 ? (
+            <div className="flex items-center justify-center h-32 bg-gray-50 rounded-lg">
+              <p className="text-gray-500">첫 번째 댓글을 작성하세요</p>
+            </div>
+          ) : (
+            comments.map((comment) => (
+              <div key={comment.id} className="bg-gray-50 rounded-lg p-4">
+                <div className="flex items-start justify-between mb-2">
+                  <div className="flex items-center space-x-2">
+                    <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
+                      <span className="text-white text-sm font-medium">
+                        {comment.authorName[0]}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="font-medium text-gray-900">
+                        {comment.authorName}
+                      </span>
+                      <span className="text-sm text-gray-500 ml-2">
+                        {comment.authorPosition}
+                      </span>
+                    </div>
+                  </div>
+                  
+                  {comment.authorId === currentUser.id && (
+                    <div className="flex space-x-2">
+                      <button
+                        onClick={() => handleStartEdit(comment)}
+                        className="text-sm text-gray-500 hover:text-gray-800"
+                      >
+                        수정
+                      </button>
+                      <button
+                        onClick={() => handleDeleteComment(comment.id)}
+                        className="text-sm text-gray-500 hover:text-red-600"
+                      >
+                        삭제
+                      </button>
+                    </div>
+                  )}
+                </div>
+                
+                {editingCommentId === comment.id ? (
+                  <div className="space-y-2">
+                    <textarea
+                      value={editContent}
+                      onChange={(e) => setEditContent(e.target.value)}
+                      className="w-full p-2 border border-gray-300 selected-none rounded-md resize-none "
+                      rows="3"
+                      placeholder="댓글을 입력하세요..."
+                    />
+                    <div className="flex space-x-2">
+                      <button
+                        onClick={() => handleSaveEdit(comment.id)}
+                        className="createBtn"
+                      >
+                        저장
+                      </button>
+                      <button
+                        onClick={handleCancelEdit}
+                        className="cancelBtn"
+                      >
+                        취소
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <div>
+                    <p className="text-gray-800 mb-2 whitespace-pre-wrap">
+                      {comment.content}
+                    </p>
+                    <div className="flex items-center space-x-2 text-xs text-gray-500">
+                      <span>{formatDate(comment.createdAt)}</span>
+                      {comment.isEdited && (
+                        <span className="text-gray-400">(수정됨)</span>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* 새 댓글 작성 폼 */}
+        <form onSubmit={handleSubmitComment} className="space-y-3">
+          <div className="flex items-start space-x-3 select-none">
+            <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
+              <span className="text-white text-sm font-medium">
+                {currentUser.name[0]}
+              </span>
+            </div>
+            <div className="flex-1">
+              <textarea
+                value={newComment}
+                onChange={(e) => setNewComment(e.target.value)}
+                className="w-full bg-white p-3 border border-gray-300 rounded-md resize-none focus:outline-none"
+                rows="3"
+                placeholder="댓글을 입력하세요..."
+                disabled={isSubmitting}
+              />
+            </div>
+          </div>
+          
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              disabled={!newComment.trim() || isSubmitting}
+              className="createBtn"
+            >
+              {isSubmitting ? '작성 중...' : '댓글 작성'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default TaskComments;
\ No newline at end of file
diff --git a/src/components/common/task/TaskDescription.jsx b/src/components/common/task/TaskDescription.jsx
new file mode 100644
index 0000000..bb7a2b2
--- /dev/null
+++ b/src/components/common/task/TaskDescription.jsx
@@ -0,0 +1,31 @@
+function TaskDescription({ 
+  task, 
+  isEditing, 
+  editData, 
+  setEditData 
+}) {
+  return (
+    <div className="rounded-lg p-6">
+      <h2 className="text-xl font-semibold mb-3">작업 설명</h2>
+      <div className="rounded-lg border p-3 border-gray-200 bg-white select-none">
+        {isEditing ? (
+          <textarea
+            value={editData.desc || ""}
+            onChange={(e) =>
+              setEditData({ ...editData, desc: e.target.value })
+            }
+            className="w-full whitespace-pre-wrap leading-relaxed text-gray-700 rounded-lg focus:outline-none resize-none"
+            rows={6}
+            placeholder="작업 설명을 입력하세요"
+          />
+        ) : (
+          <p className="whitespace-pre-wrap leading-relaxed text-gray-700">
+            {task.desc || "작업 설명이 작성되지 않았습니다."}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default TaskDescription;
\ No newline at end of file
diff --git a/src/components/common/task/TaskDetail.jsx b/src/components/common/task/TaskDetail.jsx
new file mode 100644
index 0000000..dd7a420
--- /dev/null
+++ b/src/components/common/task/TaskDetail.jsx
@@ -0,0 +1,124 @@
+import { useState } from "react";
+import TaskHeader from "./TaskHeader";
+import TaskActions from "./TaskActions";
+import TaskDescription from "./TaskDescription";
+import TaskMetadata from "./TaskMetadata";
+import TaskSchedule from "./TaskSchedule";
+import TaskComments from "./TaskComments";
+import { membersData } from "../../../data/employees";
+
+function TaskDetail({ task, onBack, onUpdate, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editData, setEditData] = useState({
+    ...task,
+    memberId:
+      task?.memberId || task?.memberName
+        ? membersData.find((m) => m.name === task.memberName)?.id
+        : null,
+  });
+
+  // 편집 핸들러
+  const handleEdit = () => {
+    setIsEditing(true);
+    setEditData({
+      ...task,
+      memberId:
+        task?.memberId || task?.memberName
+          ? membersData.find((m) => m.name === task.memberName)?.id
+          : null,
+    });
+  };
+
+  const handleDelete = () => {
+    if (window.confirm("이 작업을 삭제하시겠습니까?")) {
+      if (onDelete) {
+        onDelete(task.id);
+      }
+    }
+  };
+
+  const handleSave = () => {
+    if (onUpdate) {
+      onUpdate(task.id, editData);
+    }
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditData({
+      ...task,
+      memberId:
+        task?.memberId || task?.memberName
+          ? membersData.find((m) => m.name === task.memberName)?.id
+          : null,
+    });
+    setIsEditing(false);
+  };
+  if (!task) {
+    return (
+      <div className="min-h-full flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-gray-500">작업 정보를 찾을 수 없습니다.</p>
+          <button
+            onClick={onBack}
+            className="mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
+          >
+            목록으로 돌아가기
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-full">
+      <div className="mx-auto">
+        {/* 헤더 */}
+        <TaskHeader
+          task={task}
+          isEditing={isEditing}
+          editData={editData}
+          setEditData={setEditData}
+          onBack={onBack}
+        >
+          <TaskActions
+            isEditing={isEditing}
+            onEdit={handleEdit}
+            onDelete={handleDelete}
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
+        </TaskHeader>
+
+        {/* 메인 컨텐츠 */}
+        <div className="grid grid-cols-5 gap-6">
+          <div className="col-span-3">
+            {/* 작업 설명 */}
+            <TaskDescription
+              task={task}
+              isEditing={isEditing}
+              editData={editData}
+              setEditData={setEditData}
+            />
+
+            {/* 메타 정보*/}
+            <TaskMetadata task={task} />
+
+            {/* 일정*/}
+            <TaskSchedule
+              task={task}
+              isEditing={isEditing}
+              editData={editData}
+              setEditData={setEditData}
+            />
+          </div>
+
+          {/* 댓글 */}
+          <TaskComments />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TaskDetail;
diff --git a/src/components/common/task/TaskHeader.jsx b/src/components/common/task/TaskHeader.jsx
new file mode 100644
index 0000000..7d6921a
--- /dev/null
+++ b/src/components/common/task/TaskHeader.jsx
@@ -0,0 +1,211 @@
+import { ArrowBack, Person, Flag, Assignment, Schedule } from "@mui/icons-material";
+import Dropdown from "../Dropdown";
+import { membersData } from "../../../data/employees";
+
+function TaskHeader({ 
+  task, 
+  isEditing, 
+  editData, 
+  setEditData, 
+  onBack, 
+  children 
+}) {
+  // 드롭다운 옵션 데이터
+  const statusOptions = [
+    { value: "TODO", label: "할 일" },
+    { value: "PROGRESS", label: "진행 중" },
+    { value: "DONE", label: "완료" },
+  ];
+
+  const priorityOptions = [
+    { value: "HIGH", label: "높음" },
+    { value: "MEDIUM", label: "보통" },
+    { value: "LOW", label: "낮음" },
+  ];
+
+  const memberOptions = membersData.map((member) => ({
+    value: member.id,
+    label: member.name,
+  }));
+
+  // 날짜 포맷팅
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("ko-KR", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      weekday: "long",
+    });
+  };
+
+  // 우선순위 표시
+  const getPriorityInfo = (priority) => {
+    switch (priority?.toUpperCase()) {
+      case "HIGH":
+        return { label: "높음", color: "text-red-600 bg-red-50" };
+      case "MEDIUM":
+        return { label: "보통", color: "text-yellow-600 bg-yellow-50" };
+      case "LOW":
+        return { label: "낮음", color: "text-green-600 bg-green-50" };
+      default:
+        return { label: priority, color: "text-gray-600 bg-gray-50" };
+    }
+  };
+
+  // 상태 표시
+  const getStatusInfo = (status) => {
+    switch (status?.toUpperCase()) {
+      case "TODO":
+        return { label: "할 일", color: "text-gray-600 bg-gray-100" };
+      case "PROGRESS":
+        return { label: "진행 중", color: "text-blue-600 bg-blue-100" };
+      case "DONE":
+        return { label: "완료", color: "text-green-600 bg-green-100" };
+      default:
+        return { label: status, color: "text-gray-600 bg-gray-100" };
+    }
+  };
+
+  const priorityInfo = getPriorityInfo(task.priority);
+  const statusInfo = getStatusInfo(task.status);
+
+  return (
+    <div className="pb-4 mt-1 border-b border-gray-200">
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-4 flex-1">
+          <button
+            onClick={onBack}
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors mt-1"
+          >
+            <ArrowBack className="text-gray-600" />
+          </button>
+          <div className="flex-1">
+            {isEditing ? (
+              <input
+                type="text"
+                value={editData.title || ""}
+                onChange={(e) =>
+                  setEditData({ ...editData, title: e.target.value })
+                }
+                className="text-2xl font-semibold focus:outline-none hover:border-gray-400 text-gray-900 bg-white border border-gray-300 rounded-lg px-3 py-2 w-full"
+                placeholder="작업 제목을 입력하세요"
+              />
+            ) : (
+              <h1 className="text-2xl font-semibold text-gray-900">
+                {task.title}
+              </h1>
+            )}
+            <div className="flex items-center gap-4 mt-3">
+              {/* 상태 */}
+              <div className="flex items-center gap-2">
+                <Assignment className="text-gray-500" />
+                {isEditing ? (
+                  <Dropdown
+                    options={statusOptions}
+                    value={editData.status}
+                    onChange={(value) =>
+                      setEditData({ ...editData, status: value })
+                    }
+                    width="w-32"
+                    className="text-sm"
+                  />
+                ) : (
+                  <span
+                    className={`px-3 py-1 rounded-full text-sm font-medium ${statusInfo.color}`}
+                  >
+                    {statusInfo.label}
+                  </span>
+                )}
+              </div>
+
+              {/* 우선순위 */}
+              <div className="flex items-center gap-2">
+                <Flag className="w-5 h-5 text-gray-500" />
+                {isEditing ? (
+                  <Dropdown
+                    options={priorityOptions}
+                    value={editData.priority}
+                    onChange={(value) =>
+                      setEditData({ ...editData, priority: value })
+                    }
+                    width="w-32"
+                    className="text-sm"
+                  />
+                ) : (
+                  <span
+                    className={`px-3 py-1 rounded-full text-sm font-medium ${priorityInfo.color}`}
+                  >
+                    {priorityInfo.label}
+                  </span>
+                )}
+              </div>
+
+              {/* 담당자 */}
+              <div className="flex items-center gap-2">
+                <Person className="text-gray-500" />
+                {isEditing ? (
+                  <Dropdown
+                    options={memberOptions}
+                    value={editData.memberId}
+                    onChange={(value) => {
+                      const selectedMember = membersData.find(
+                        (m) => m.id === value
+                      );
+                      setEditData({
+                        ...editData,
+                        memberId: value,
+                        memberName: selectedMember?.name || "",
+                      });
+                    }}
+                    width="w-36"
+                    className="text-sm"
+                    placeholder="담당자 선택"
+                  />
+                ) : (
+                  <span className="text-sm text-gray-700">
+                    {task.memberName || "담당자 미지정"}
+                  </span>
+                )}
+              </div>
+
+              {/* 마감일 */}
+              <div className="flex items-center gap-2">
+                <Schedule className="text-gray-500" />
+                {isEditing ? (
+                  <input
+                    type="date"
+                    value={
+                      editData.endDate
+                        ? new Date(editData.endDate)
+                            .toISOString()
+                            .split("T")[0]
+                        : ""
+                    }
+                    onChange={(e) =>
+                      setEditData({ ...editData, endDate: e.target.value })
+                    }
+                    className="text-sm text-gray-700 border border-gray-300 rounded px-2 py-2 focus:outline-none"
+                  />
+                ) : (
+                  task.endDate && (
+                    <span className="text-sm text-gray-700">
+                      {formatDate(task.endDate)}
+                    </span>
+                  )
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 편집*/}
+        <div className="flex items-center gap-3 mt-1 ml-4">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TaskHeader;
\ No newline at end of file
diff --git a/src/components/common/task/TaskMetadata.jsx b/src/components/common/task/TaskMetadata.jsx
new file mode 100644
index 0000000..e9db054
--- /dev/null
+++ b/src/components/common/task/TaskMetadata.jsx
@@ -0,0 +1,42 @@
+function TaskMetadata({ task }) {
+  // 메타데이터 구성
+  const metadataItems = [
+    { label: "작업 ID", value: `${task.id}` },
+    { label: "프로젝트 ID", value: `${task.projectId}` },
+    {
+      label: "생성일",
+      value: task.createdAt
+        ? new Date(task.createdAt).toLocaleDateString("ko-KR")
+        : "-",
+    },
+    {
+      label: "수정일",
+      value: task.updatedAt
+        ? new Date(task.updatedAt).toLocaleDateString("ko-KR")
+        : "-",
+    },
+  ];
+
+  return (
+    <div className="rounded-lg p-6">
+      <h2 className="text-xl font-semibold mb-3">작업 정보</h2>
+      <div className="grid grid-cols-4 gap-4">
+        {metadataItems.map((item, index) => (
+          <div
+            key={index}
+            className="flex justify-between p-3 bg-gray-100"
+          >
+            <span className="text-gray-600 font-medium">
+              {item.label}
+            </span>
+            <span className={`text-gray-900 ${item.className || ""}`}>
+              {item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default TaskMetadata;
\ No newline at end of file
diff --git a/src/components/common/task/TaskSchedule.jsx b/src/components/common/task/TaskSchedule.jsx
new file mode 100644
index 0000000..2df6c5a
--- /dev/null
+++ b/src/components/common/task/TaskSchedule.jsx
@@ -0,0 +1,85 @@
+function TaskSchedule({ 
+  task, 
+  isEditing, 
+  editData, 
+  setEditData 
+}) {
+  // 날짜 포맷팅
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("ko-KR", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      weekday: "long",
+    });
+  };
+
+  return (
+    <div className="rounded-lg p-6">
+      <h2 className="text-xl font-semibold mb-3">일정</h2>
+      <div className="bg-gray-50 rounded-lg p-4">
+        <div className="grid grid-cols-2 gap-4">
+          {/* 시작일 */}
+          <div>
+            <span className="text-gray-600 font-medium block mb-1">
+              시작일
+            </span>
+            {isEditing ? (
+              <input
+                type="date"
+                value={
+                  editData.startDate
+                    ? new Date(editData.startDate)
+                        .toISOString()
+                        .split("T")[0]
+                    : ""
+                }
+                onChange={(e) =>
+                  setEditData({
+                    ...editData,
+                    startDate: e.target.value,
+                  })
+                }
+                className="text-gray-900 border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            ) : (
+              <span className="text-gray-900">
+                {task.startDate ? formatDate(task.startDate) : "-"}
+              </span>
+            )}
+          </div>
+
+          {/* 마감일 */}
+          <div>
+            <span className="text-gray-600 font-medium block mb-1">
+              마감일
+            </span>
+            {isEditing ? (
+              <input
+                type="date"
+                value={
+                  editData.endDate
+                    ? new Date(editData.endDate)
+                        .toISOString()
+                        .split("T")[0]
+                    : ""
+                }
+                onChange={(e) =>
+                  setEditData({ ...editData, endDate: e.target.value })
+                }
+                className="text-gray-900 border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            ) : (
+              <span className="text-gray-900">
+                {task.endDate ? formatDate(task.endDate) : "-"}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TaskSchedule;
\ No newline at end of file
diff --git a/src/components/kanban/Kanban.jsx b/src/components/kanban/Kanban.jsx
index c2b06a3..233cac3 100644
--- a/src/components/kanban/Kanban.jsx
+++ b/src/components/kanban/Kanban.jsx
@@ -3,7 +3,7 @@ import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 import KanbanColumn from './KanbanColumn'
 import KanbanCard from './KanbanCard'
 import KanbanHeader from './KanbanHeader'
-import TaskDetail from '../common/TaskDetail'
+import TaskDetail from '../common/task/TaskDetail'
 import { Add } from '@mui/icons-material'
 
 function Kanban({ projectId }) {
@@ -43,7 +43,7 @@ function Kanban({ projectId }) {
             id: `${projectId}-3`,
             title: 'API 개발',
             description: '사용자 인증 API 개발 진행 중',
-            assignee: '이백엔드',
+            assignee: '이백퍼',
             priority: 'high',
             dueDate: '2024-03-18'
           },
diff --git a/src/components/kanban/KanbanCard.jsx b/src/components/kanban/KanbanCard.jsx
index 65ba4a2..e89d69b 100644
--- a/src/components/kanban/KanbanCard.jsx
+++ b/src/components/kanban/KanbanCard.jsx
@@ -135,7 +135,7 @@ function KanbanCard({ item, index, onUpdate, onDelete, onCardClick }) {
             </div>
 
             {/* 태그 */}
-            {/* {item.tags && item.tags.length > 0 && (
+            {item.tags && item.tags.length > 0 && (
               <div className="flex flex-wrap gap-1 mb-3">
                 {item.tags.map((tag, tagIndex) => (
                   <span
@@ -146,7 +146,7 @@ function KanbanCard({ item, index, onUpdate, onDelete, onCardClick }) {
                   </span>
                 ))}
               </div>
-            )} */}
+            )}
 
             {/* 하단 정보 */}
             <div className="flex items-center justify-between text-xs">
diff --git a/src/components/meeting/MeetingCreate.jsx b/src/components/meeting/MeetingCreate.jsx
index e947c25..4b2063f 100644
--- a/src/components/meeting/MeetingCreate.jsx
+++ b/src/components/meeting/MeetingCreate.jsx
@@ -211,7 +211,7 @@ function MeetingCreate({ onBack, onSave, meeting = null, isEditing = false }) {
             <button
               onClick={onBack}
               disabled={isLoading}
-              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50"
+              className="cancelBtn"
             >
               취소
             </button>
@@ -220,8 +220,8 @@ function MeetingCreate({ onBack, onSave, meeting = null, isEditing = false }) {
               disabled={isLoading}
               className={`px-4 py-2 rounded-lg transition-colors ${
                 isLoading 
-                  ? 'bg-gray-400 text-white cursor-not-allowed' 
-                  : 'bg-green-400 text-white hover:bg-green-500'
+                  ? 'cancelBtn' 
+                  : 'createBtn'
               }`}
             >
               {isLoading ? '처리중...' : isEditing ? '수정' : '저장'}
diff --git a/src/data/taskComments.js b/src/data/taskComments.js
new file mode 100644
index 0000000..df9011a
--- /dev/null
+++ b/src/data/taskComments.js
@@ -0,0 +1,105 @@
+// 작업 댓글 더미 데이터
+export const taskCommentsData = [
+  {
+    id: 1,
+    taskId: '4-1', // 작업 ID와 연결
+    authorId: 1,
+    authorName: '박서호',
+    authorPosition: '사원',
+    content: '새로운 대시보드 UI 디자인 검토했습니다. 전반적으로 깔끔하고 사용자 친화적인 것 같습니다.',
+    createdAt: '2024-03-15T09:30:00',
+    updatedAt: '2024-03-15T09:30:00',
+    isEdited: false
+  },
+  {
+    id: 2,
+    taskId: '4-1',
+    authorId: 2,
+    authorName: '이지민',
+    authorPosition: '대리',
+    content: '컬러 팔레트 부분에서 접근성을 고려한 색상 대비 검토가 필요할 것 같습니다. WCAG 가이드라인을 참고해주세요.',
+    createdAt: '2024-03-15T10:15:00',
+    updatedAt: '2024-03-15T10:20:00',
+    isEdited: true
+  },
+  {
+    id: 3,
+    taskId: '4-1',
+    authorId: 3,
+    authorName: '최우식',
+    authorPosition: '주임',
+    content: '좋은 지적입니다. 다음 주 회의에서 접근성 가이드라인에 대해 논의해보겠습니다.',
+    createdAt: '2024-03-15T11:00:00',
+    updatedAt: '2024-03-15T11:00:00',
+    isEdited: false
+  },
+  {
+    id: 4,
+    taskId: '4-1',
+    authorId: 4,
+    authorName: '이수민',
+    authorPosition: '사원',
+    content: '대시보드의 반응형 디자인도 확인이 필요합니다. 모바일에서의 표시 방식은 어떻게 계획하고 계신가요?',
+    createdAt: '2024-03-15T14:30:00',
+    updatedAt: '2024-03-15T14:30:00',
+    isEdited: false
+  },
+  {
+    id: 5,
+    taskId: '4-1',
+    authorId: 1,
+    authorName: '박서호',
+    authorPosition: '사원',
+    content: '모바일 버전은 별도로 디자인하고 있습니다. 이번 주 내로 프로토타입을 공유드리겠습니다.',
+    createdAt: '2024-03-15T15:45:00',
+    updatedAt: '2024-03-15T15:45:00',
+    isEdited: false
+  }
+];
+
+// 작업 ID별 댓글 필터링 함수
+export const getCommentsByTaskId = (taskId) => {
+  return taskCommentsData.filter(comment => comment.taskId === taskId);
+};
+
+// 새 댓글 추가 함수 (실제 구현시 API 호출로 대체)
+export const addComment = (taskId, authorId, authorName, authorPosition, content) => {
+  const newComment = {
+    id: taskCommentsData.length + 1,
+    taskId,
+    authorId,
+    authorName,
+    authorPosition,
+    content,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    isEdited: false
+  };
+  
+  taskCommentsData.push(newComment);
+  return newComment;
+};
+
+// 댓글 수정 함수
+export const updateComment = (commentId, newContent) => {
+  const commentIndex = taskCommentsData.findIndex(comment => comment.id === commentId);
+  if (commentIndex !== -1) {
+    taskCommentsData[commentIndex] = {
+      ...taskCommentsData[commentIndex],
+      content: newContent,
+      updatedAt: new Date().toISOString(),
+      isEdited: true
+    };
+    return taskCommentsData[commentIndex];
+  }
+  return null;
+};
+
+// 댓글 삭제 함수
+export const deleteComment = (commentId) => {
+  const commentIndex = taskCommentsData.findIndex(comment => comment.id === commentId);
+  if (commentIndex !== -1) {
+    return taskCommentsData.splice(commentIndex, 1)[0];
+  }
+  return null;
+};
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index e358fa5..904ba4e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -41,6 +41,10 @@ body {
   @apply px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-2
 }
 
+.cancelBtn {
+  @apply px-4 py-2 text-gray-800 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50
+}
+
 /* 스크롤바 숨기기 */
 .hide-scrollbar {
   /* IE, Edge 및 Firefox */