diff --git a/next.config.ts b/next.config.ts
index bc44c6e..34a2ffc 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -7,6 +7,9 @@ const nextConfig: NextConfig = {
     buildActivity: false,
     buildActivityPosition: 'bottom-right',
   },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 70834a2..73bf579 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
       "name": "taskify",
       "version": "0.1.0",
       "dependencies": {
-        "@tanstack/react-query": "^5.85.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "next": "15.5.2",
diff --git a/public/dashboard/check-icon.svg b/public/dashboard/check-icon.svg
new file mode 100644
index 0000000..5d69ac0
--- /dev/null
+++ b/public/dashboard/check-icon.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.75443 8.22328L12.673 0.304701C12.8094 0.168377 12.9712 0.0987407 13.1587 0.0957921C13.3461 0.0928587 13.5109 0.162495 13.6531 0.304701C13.7953 0.446891 13.8664 0.610241 13.8664 0.79475C13.8664 0.979245 13.7953 1.1426 13.6531 1.2848L5.33438 9.60353C5.16868 9.76923 4.97536 9.85208 4.75443 9.85208C4.53349 9.85208 4.34018 9.76923 4.17447 9.60353L0.347391 5.77647C0.211068 5.64014 0.143784 5.47826 0.145541 5.29082C0.147314 5.10337 0.219295 4.93856 0.361485 4.79637C0.503691 4.65416 0.667041 4.58306 0.851535 4.58306C1.03605 4.58306 1.1994 4.65416 1.34159 4.79637L4.75443 8.22328Z" fill="#787486"/>
+</svg>
diff --git a/src/components/dashboard/add-task-button.tsx b/src/components/dashboard/add-task-button.tsx
index a21f807..0444db6 100644
--- a/src/components/dashboard/add-task-button.tsx
+++ b/src/components/dashboard/add-task-button.tsx
@@ -4,7 +4,7 @@ import type { AddTaskButtonProps } from './type';
 export default function AddTaskButton({ onClick }: AddTaskButtonProps) {
   return (
     <button
-      className='flex h-11 w-full cursor-pointer items-center justify-center gap-3 rounded-lg border border-gray-300 bg-white'
+      className='flex h-11 w-full flex-shrink-0 cursor-pointer items-center justify-center gap-3 rounded-lg border border-gray-300 bg-white'
       onClick={onClick}
     >
       <Image
diff --git a/src/components/dashboard/column-header.tsx b/src/components/dashboard/column-header.tsx
index 5639bf3..a40504e 100644
--- a/src/components/dashboard/column-header.tsx
+++ b/src/components/dashboard/column-header.tsx
@@ -6,15 +6,18 @@ export default function ColumnHeader({
   onSettingsClick,
 }: ColumnHeaderProps) {
   return (
-    <header className='flex items-center justify-between'>
+    <header className='flex flex-shrink-0 items-center justify-between'>
       <div className='flex items-center gap-3'>
         <div className='h-2 w-2 rounded-full bg-violet-500'></div>
         <h2 className='text-lg font-bold text-gray-800'>{column.title}</h2>
-        <span className='flex min-w-[24px] items-center justify-center rounded-md bg-gray-200 px-2 py-1 text-center text-sm font-medium text-gray-500'>
+        <span className='bg-gray-4 text-gray-1 flex size-[20px] items-center justify-center rounded-[6px] text-xs'>
           {column.tasks.length}
         </span>
       </div>
-      <button className='cursor-pointer rounded p-1' onClick={onSettingsClick}>
+      <button
+        className='cursor-pointer rounded p-1 transition-transform duration-200 active:rotate-90'
+        onClick={onSettingsClick}
+      >
         <Image
           src='/dashboard/column-setting-icon.svg'
           alt='컬럼 설정'
diff --git a/src/components/dashboard/column-layout.tsx b/src/components/dashboard/column-layout.tsx
index ff66c82..a544056 100644
--- a/src/components/dashboard/column-layout.tsx
+++ b/src/components/dashboard/column-layout.tsx
@@ -8,6 +8,7 @@ interface ColumnLayoutProps {
   onColumnSettingsClick?: (columnId: string) => void;
   onAddTaskClick?: (columnId: string) => void;
   onTaskClick?: (task: TaskType) => void;
+  maxColumns?: number;
 }
 
 export default function ColumnLayout({
@@ -16,6 +17,7 @@ export default function ColumnLayout({
   onColumnSettingsClick,
   onAddTaskClick,
   onTaskClick,
+  maxColumns = 10,
 }: ColumnLayoutProps) {
   return (
     <div className='column-layout-container flex h-full'>
@@ -36,12 +38,14 @@ export default function ColumnLayout({
         );
       })}
 
-      {/* 칼럼 추가 버튼 */}
-      <div className='add-column-container h-full w-80 flex-shrink-0 px-4 py-6'>
-        <div className='mt-12'>
-          <AddColumnButton onClick={onAddColumnClick} />
+      {/* 칼럼 추가 버튼 (최대 개수 미달 시에만 표시) */}
+      {columns.length < maxColumns && (
+        <div className='add-column-container h-full w-80 flex-shrink-0 px-4 py-6'>
+          <div className='mt-12'>
+            <AddColumnButton onClick={onAddColumnClick} />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/dashboard/column-task-card.tsx b/src/components/dashboard/column-task-card.tsx
index 1677da9..1c2b53b 100644
--- a/src/components/dashboard/column-task-card.tsx
+++ b/src/components/dashboard/column-task-card.tsx
@@ -1,27 +1,20 @@
 import Image from 'next/image';
+import ChipProfile from '@/components/ui/chip/chip-profile';
+import ChipTag from '@/components/ui/chip/chip-tag';
+import { getProfileColor } from '@/utils/profile-color';
 import type { TaskCardProps } from './type';
 
-const getTagColorClasses = (color: string) => {
-  switch (color) {
-    case 'orange': {
-      return 'bg-orange-100 text-orange-600';
-    }
-    case 'green': {
-      return 'bg-green-100 text-green-600';
-    }
-    case 'blue': {
-      return 'bg-blue-100 text-blue-600';
-    }
-    case 'red': {
-      return 'bg-red-100 text-red-600';
-    }
-    case 'purple': {
-      return 'bg-purple-100 text-purple-600';
-    }
-    default: {
-      return 'bg-gray-100 text-gray-600';
-    }
-  }
+const formatDueDate = (dueDate: string) => {
+  if (!dueDate) {return '';}
+
+  const date = new Date(dueDate);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
 };
 
 export default function ColumnTaskCard({ task, onEditTask }: TaskCardProps) {
@@ -33,61 +26,59 @@ export default function ColumnTaskCard({ task, onEditTask }: TaskCardProps) {
 
   return (
     <div
-      className='cursor-pointer rounded-lg border border-gray-300 bg-white'
+      className='flex cursor-pointer flex-col gap-4 rounded-lg border border-gray-300 bg-white p-4'
       onClick={handleCardClick}
     >
-      {/* 이미지 */}
+      {/* 썸네일 */}
       {task.imageUrl && (
-        <div className='p-4 pb-0'>
-          <div className='h-40 w-full overflow-hidden rounded-lg'>
-            <Image
-              src={task.imageUrl}
-              alt='카드 이미지'
-              width={300}
-              height={160}
-              className='h-full w-full object-cover'
-            />
-          </div>
+        <div className='h-40 w-full overflow-hidden rounded-lg'>
+          <Image
+            src={task.imageUrl}
+            alt='카드 이미지'
+            width={300}
+            height={160}
+            className='h-full w-full object-cover'
+          />
         </div>
       )}
 
       {/* 본문 */}
-      <div className='p-4'>
-        <h3 className='mb-3 line-clamp-2 text-base font-medium text-gray-900'>
-          {task.title}
-        </h3>
-
-        {/* 태그들 */}
-        <div className='mb-3 flex flex-wrap gap-1.5'>
-          {task.tags.map((tag) => 
-            { return <span
-              key={tag.label}
-              className={`rounded-md px-2 py-1 text-xs font-medium ${getTagColorClasses(tag.color)}`}
-            >
-              {tag.label}
-            </span> }
-          )}
-        </div>
+      <div className='flex flex-col justify-between'>
+        <div>
+          <h3 className='mb-3 line-clamp-2 text-base font-medium text-gray-900'>
+            {task.title}
+          </h3>
 
-        <div className='flex items-center justify-between'>
-          {/* 날짜 */}
-          <div className='flex items-center gap-1.5 text-xs text-gray-500'>
-            <Image
-              src='/dashboard/calendar.svg'
-              alt='달력'
-              width={14}
-              height={16}
-            />
-            <span>{task.dueDate}</span>
+          {/* 태그들 */}
+          <div className='mb-3 flex flex-wrap items-center gap-1.5'>
+            {task.tags.map((tag) => 
+              { return <ChipTag
+                key={tag.label}
+                label={tag.label}
+                color={tag.color as 'blue' | 'pink' | 'green' | 'brown' | 'red'}
+                size='md'
+              /> }
+            )}
           </div>
 
-          {/* 담당자 */}
-          <div className='flex items-center'>
-            <div
-              className='flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium text-white'
-              style={{ backgroundColor: task.manager.profileColor }}
-            >
-              {task.manager.nickname.slice(0, 2)}
+          {/* 날짜와 담당자 */}
+          <div className='flex items-center justify-between'>
+            <div className='flex items-center gap-1.5 text-xs text-gray-500'>
+              <Image
+                src='/dashboard/calendar.svg'
+                alt='달력'
+                width={14}
+                height={16}
+              />
+              <span>{formatDueDate(task.dueDate)}</span>
+            </div>
+
+            <div className='flex items-center'>
+              <ChipProfile
+                label={String(task.manager.nickname || '').slice(0, 1)}
+                color={getProfileColor(task.manager.profileColor)}
+                size='sm'
+              />
             </div>
           </div>
         </div>
diff --git a/src/components/dashboard/create-column-form.tsx b/src/components/dashboard/create-column-form.tsx
index 869bc50..af9aded 100644
--- a/src/components/dashboard/create-column-form.tsx
+++ b/src/components/dashboard/create-column-form.tsx
@@ -3,12 +3,14 @@ import type { CreateColumnFormData } from './type';
 interface CreateColumnFormProps {
   formData: CreateColumnFormData;
   setFormData: React.Dispatch<React.SetStateAction<CreateColumnFormData>>;
+  hasError?: boolean;
 }
 
 export default function CreateColumnForm({
   formData,
   setFormData,
-}: CreateColumnFormProps) {
+  hasError = false,
+}: CreateColumnFormProps): JSX.Element {
   return (
     <>
       {/* 이름 */}
@@ -18,7 +20,7 @@ export default function CreateColumnForm({
           className='mb-2 block text-lg leading-6 font-medium'
         >
           대시보드 이름
-          <span className='align-baseline text-lg text-indigo-600'>*</span>
+          <span className='text-violet align-baseline text-lg'> *</span>
         </label>
         <input
           required
@@ -26,8 +28,12 @@ export default function CreateColumnForm({
           name='name'
           type='text'
           placeholder='새로운 프로젝트'
-          className='w-full rounded-lg border border-gray-300 p-4 focus:outline-none'
           value={formData.name}
+          className={`w-full rounded-lg border p-4 focus:outline-none ${
+            hasError
+              ? 'border-red-500 focus:border-red-500'
+              : 'focus:border-violet border-gray-300'
+          }`}
           onChange={(e) => {
             setFormData((prev) => ({ ...prev, name: e.target.value }));
           }}
diff --git a/src/components/dashboard/create-column-modal.tsx b/src/components/dashboard/create-column-modal.tsx
index b02d4a3..ce8e6f8 100644
--- a/src/components/dashboard/create-column-modal.tsx
+++ b/src/components/dashboard/create-column-modal.tsx
@@ -8,12 +8,16 @@ interface CreateColumnModalProps {
   isOpen: boolean;
   onClose: () => void;
   onSubmit: (columnData: CreateColumnFormData) => void;
+  existingColumns?: string[];
+  maxColumns?: number;
 }
 
 export default function CreateColumnModal({
   isOpen,
   onClose,
   onSubmit,
+  existingColumns = [],
+  maxColumns = 10,
 }: CreateColumnModalProps) {
   const [formData, setFormData] = useState<CreateColumnFormData>({
     name: '',
@@ -26,12 +30,21 @@ export default function CreateColumnModal({
 
   useModalKeyHandler(isOpen, handleClose);
 
+  const isDuplicate = existingColumns.some(
+    (columnName) => columnName.toLowerCase() === formData.name.toLowerCase()
+  );
+
+  const isMaxColumnsReached = existingColumns.length >= maxColumns;
+
   const handleSubmit = () => {
-    onSubmit(formData);
-    handleClose();
+    if (!isDuplicate && !isMaxColumnsReached) {
+      onSubmit(formData);
+      handleClose();
+    }
   };
 
-  const isSubmitDisabled = !formData.name.trim();
+  const isSubmitDisabled =
+    !formData.name.trim() || isDuplicate || isMaxColumnsReached;
 
   return (
     <BaseModal
@@ -41,10 +54,21 @@ export default function CreateColumnModal({
       cancelText='취소'
       isSubmitDisabled={isSubmitDisabled}
       width='w-[32rem]'
+      errorMessage={
+        isMaxColumnsReached
+          ? `최대 ${maxColumns}개까지만 생성할 수 있습니다.`
+          : isDuplicate
+            ? '중복된 컬럼 이름입니다.'
+            : undefined
+      }
       onClose={handleClose}
       onSubmit={handleSubmit}
     >
-      <CreateColumnForm formData={formData} setFormData={setFormData} />
+      <CreateColumnForm
+        formData={formData}
+        setFormData={setFormData}
+        hasError={isDuplicate}
+      />
     </BaseModal>
   );
 }
diff --git a/src/components/dashboard/create-task-form.tsx b/src/components/dashboard/create-task-form.tsx
index 35de8b0..9d283ba 100644
--- a/src/components/dashboard/create-task-form.tsx
+++ b/src/components/dashboard/create-task-form.tsx
@@ -1,52 +1,115 @@
 import Image from 'next/image';
-import { useState } from 'react';
+import type React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import ChipProfile from '@/components/ui/chip/chip-profile';
+import ChipTag from '@/components/ui/chip/chip-tag';
+import { mockProfileColors } from '@/lib/dashboard-mock-data';
+import type { UserType } from '@/lib/users/type';
+import { getProfileColor } from '@/utils/profile-color';
 import type { CreateTaskFormData } from './type';
+import { getRandomTagColor } from './type';
 
 interface CreateTaskFormProps {
   formData: CreateTaskFormData;
-  setFormData: React.Dispatch<React.SetStateAction<CreateTaskFormData>>;
+  setFormData: (
+    data:
+      | CreateTaskFormData
+      | ((prev: CreateTaskFormData) => CreateTaskFormData)
+  ) => void;
+  userInfo: UserType | null;
 }
 
 export default function CreateTaskForm({
   formData,
   setFormData,
-}: CreateTaskFormProps) {
+  userInfo,
+}: CreateTaskFormProps): React.ReactElement {
   const [currentTag, setCurrentTag] = useState('');
+  const [isAssigneeDropdownOpen, setIsAssigneeDropdownOpen] = useState(false);
+  const assigneeDropdownRef = useRef<HTMLDivElement>(null);
+
+  const assigneeOptions = [
+    {
+      value: userInfo?.id ?? 'user-1',
+      label: userInfo?.nickname ?? '사용자',
+      profileColor: mockProfileColors[0],
+    },
+    {
+      value: 'user-2',
+      label: '테스터',
+      profileColor: mockProfileColors[1],
+    },
+    {
+      value: 'user-3',
+      label: '관리자',
+      profileColor: mockProfileColors[2],
+    },
+  ];
+
+  const handleAssigneeSelect = (assignee: string) => {
+    setFormData((prev) => ({ ...prev, assignee }));
+    setIsAssigneeDropdownOpen(false);
+  };
+
+  // 드롭다운 외부 클릭 시 닫기
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        assigneeDropdownRef.current &&
+        !assigneeDropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsAssigneeDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
 
   const handleTagKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && currentTag.trim()) {
       e.preventDefault();
-      setFormData((prev) => { return {
+      setFormData((prev) => ({
         ...prev,
-        tags: [...prev.tags, currentTag.trim()],
-      } });
+        tags: [
+          ...prev.tags,
+          { label: currentTag.trim(), color: getRandomTagColor() },
+        ],
+      }));
       setCurrentTag('');
     }
   };
 
   const removeTag = (indexToRemove: number) => {
-    setFormData((prev) => { return {
+    setFormData((prev) => ({
       ...prev,
       tags: prev.tags.filter((_, index) => index !== indexToRemove),
-    } });
+    }));
   };
 
   const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
 
     if (file) {
-      setFormData((prev) => { return {
-        ...prev,
-        imageFile: file,
-      } });
+      setFormData((prev) => {
+        return {
+          ...prev,
+          imageFile: file,
+        };
+      });
     }
   };
 
   const removeImage = () => {
-    setFormData((prev) => { return {
-      ...prev,
-      imageFile: null,
-    } });
+    setFormData((prev) => {
+      return {
+        ...prev,
+        imageFile: null,
+      };
+    });
   };
 
   return (
@@ -56,28 +119,91 @@ export default function CreateTaskForm({
         <label htmlFor='assignee' className='mb-2 block text-lg font-medium'>
           담당자
         </label>
-        <div className='relative'>
-          <select
-            id='assignee'
-            name='assignee'
-            className='w-full cursor-pointer appearance-none rounded-lg border border-gray-300 p-4 pr-12 focus:outline-none'
-            value={formData.assignee}
-            onChange={(e) =>
-              { setFormData((prev) => ({ ...prev, assignee: e.target.value })); }
-            }
+        <div className='relative' ref={assigneeDropdownRef}>
+          <button
+            type='button'
+            className='flex w-full cursor-pointer appearance-none items-center justify-between rounded-lg border border-gray-300 p-4 pr-4 text-left focus:outline-none'
+            onClick={() => {
+              setIsAssigneeDropdownOpen(!isAssigneeDropdownOpen);
+            }}
           >
-            <option value=''>이름을 입력해 주세요</option>
-            <option value='user1'>사용자 1</option>
-            <option value='user2'>사용자 2</option>
-          </select>
-          <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4'>
+            <div className='flex items-center gap-2'>
+              {formData.assignee ? (
+                <>
+                  <ChipProfile
+                    size='md'
+                    label={
+                      (
+                        assigneeOptions.find(
+                          (opt) => opt.value === formData.assignee
+                        )?.label || ''
+                      ).slice(0, 1) || '배'
+                    }
+                    color={getProfileColor(
+                      assigneeOptions.find(
+                        (opt) => opt.value === formData.assignee
+                      )?.profileColor || '#10b981'
+                    )}
+                  />
+                  <span>
+                    {assigneeOptions.find(
+                      (opt) => opt.value === formData.assignee
+                    )?.label || '이름을 입력해 주세요'}
+                  </span>
+                </>
+              ) : (
+                <span className='text-gray-500'>이름을 입력해 주세요</span>
+              )}
+            </div>
             <Image
               src='/dashboard/input-dropdown-btn.svg'
               alt='드롭다운'
               width={14}
               height={16}
+              className={`transition-transform ${isAssigneeDropdownOpen ? 'rotate-180' : ''}`}
             />
-          </div>
+          </button>
+
+          {/* 드롭다운 옵션들 */}
+          {isAssigneeDropdownOpen && (
+            <div className='absolute top-full right-0 left-0 z-10 mt-1 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-lg'>
+              {assigneeOptions.map((option, index) => {
+                return (
+                  <button
+                    key={option.value}
+                    type='button'
+                    className={`flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-left hover:bg-gray-50 ${
+                      index === 0 ? 'rounded-t-lg' : ''
+                    } ${
+                      index === assigneeOptions.length - 1 ? 'rounded-b-lg' : ''
+                    }`}
+                    onClick={() => {
+                      handleAssigneeSelect(option.value);
+                    }}
+                  >
+                    <div className='flex h-[10px] w-[14px] items-center justify-center'>
+                      {formData.assignee === option.value && (
+                        <Image
+                          src='/dashboard/check-icon.svg'
+                          alt='선택됨'
+                          width={14}
+                          height={10}
+                        />
+                      )}
+                    </div>
+                    <div className='flex items-center gap-2'>
+                      <ChipProfile
+                        label={(option.label || '').slice(0, 1)}
+                        color={getProfileColor(option.profileColor)}
+                        size='md'
+                      />
+                      <span>{option.label}</span>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
         </div>
       </div>
 
@@ -87,7 +213,7 @@ export default function CreateTaskForm({
           htmlFor='title'
           className='mb-2 block text-lg leading-6 font-medium'
         >
-          제목 <span className='align-baseline text-lg text-indigo-600'>*</span>
+          제목 <span className='text-violet align-baseline text-lg'>*</span>
         </label>
         <input
           required
@@ -95,11 +221,11 @@ export default function CreateTaskForm({
           name='title'
           type='text'
           placeholder='제목을 입력해 주세요'
-          className='w-full rounded-lg border border-gray-300 p-4 focus:outline-none'
+          className='focus:border-violet w-full rounded-lg border border-gray-300 p-4 focus:outline-none'
           value={formData.title}
-          onChange={(e) =>
-            { setFormData((prev) => ({ ...prev, title: e.target.value })); }
-          }
+          onChange={(e) => {
+            setFormData((prev) => ({ ...prev, title: e.target.value }));
+          }}
         />
       </div>
 
@@ -109,7 +235,7 @@ export default function CreateTaskForm({
           htmlFor='description'
           className='mb-2 block text-lg leading-6 font-medium'
         >
-          설명 <span className='align-baseline text-lg text-indigo-600'>*</span>
+          설명 <span className='text-violet align-baseline text-lg'>*</span>
         </label>
         <textarea
           required
@@ -117,14 +243,16 @@ export default function CreateTaskForm({
           name='description'
           placeholder='설명을 입력해 주세요'
           rows={4}
-          className='w-full resize-none rounded-lg border border-gray-300 p-4 focus:outline-none'
+          className='focus:border-violet w-full resize-none rounded-lg border border-gray-300 p-4 focus:outline-none'
           value={formData.description}
-          onChange={(e) =>
-            { setFormData((prev) => { return {
-              ...prev,
-              description: e.target.value,
-            } }); }
-          }
+          onChange={(e) => {
+            setFormData((prev) => {
+              return {
+                ...prev,
+                description: e.target.value,
+              };
+            });
+          }}
         />
       </div>
 
@@ -138,26 +266,25 @@ export default function CreateTaskForm({
             id='dueDate'
             name='dueDate'
             type='datetime-local'
-            className='w-full cursor-pointer rounded-lg border border-gray-300 p-4 pl-12 focus:outline-none'
+            className='focus:border-violet w-full cursor-pointer rounded-lg border border-gray-300 p-4 pl-12 focus:outline-none'
             value={formData.dueDate}
             placeholder='날짜와 시간을 선택하세요'
-            onChange={(e) =>
-              { setFormData((prev) => ({ ...prev, dueDate: e.target.value })); }
-            }
+            onChange={(e) => {
+              setFormData((prev) => ({ ...prev, dueDate: e.target.value }));
+            }}
             onClick={(e) => {
-              // 일부 브라우저에서 datepicker를 강제로 열기 위해
-              (e.currentTarget as any).showPicker?.();
+              (e.currentTarget as HTMLInputElement).showPicker();
             }}
           />
-          <div
+          <button
+            type='button'
             className='absolute inset-y-0 left-0 flex cursor-pointer items-center pl-4'
             onClick={() => {
               const input = document.querySelector(
                 '#dueDate'
               ) as HTMLInputElement;
-
-              (input as any)?.showPicker?.();
-              input?.focus();
+              input.showPicker();
+              input.focus();
             }}
           >
             <Image
@@ -166,7 +293,7 @@ export default function CreateTaskForm({
               width={14}
               height={16}
             />
-          </div>
+          </button>
         </div>
       </div>
 
@@ -177,21 +304,28 @@ export default function CreateTaskForm({
         </label>
         <div className='flex min-h-[3.5rem] flex-wrap items-center gap-2 rounded-lg border border-gray-300 p-3 focus-within:border-gray-300'>
           {/* 기존 태그들 */}
-          {formData.tags.map((tag, index) => 
-            { return <span
-              key={index}
-              className='flex items-center gap-2 rounded-md bg-blue-100 px-3 py-1 text-sm text-blue-600'
-            >
-              {tag}
-              <button
-                type='button'
-                className='ml-1 text-blue-400 hover:text-blue-600'
-                onClick={() => { removeTag(index); }}
-              >
-                ×
-              </button>
-            </span> }
-          )}
+          {formData.tags.map((tag, index) => {
+            return (
+              <div key={tag.label} className='flex items-center gap-1'>
+                <ChipTag
+                  label={tag.label}
+                  color={
+                    tag.color as 'blue' | 'pink' | 'green' | 'brown' | 'red'
+                  }
+                  size='md'
+                />
+                <button
+                  type='button'
+                  className='ml-1 text-blue-400 hover:text-blue-600'
+                  onClick={() => {
+                    removeTag(index);
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+            );
+          })}
           {/* 새 태그 입력 */}
           <input
             id='tags'
@@ -200,8 +334,10 @@ export default function CreateTaskForm({
             placeholder={formData.tags.length === 0 ? '입력 후 Enter' : ''}
             className='min-w-[120px] flex-1 border-0 bg-transparent p-1 focus:outline-none'
             value={currentTag}
-            onChange={(e) => { setCurrentTag(e.target.value); }}
             onKeyDown={handleTagKeyDown}
+            onChange={(e) => {
+              setCurrentTag(e.target.value);
+            }}
           />
         </div>
       </div>
diff --git a/src/components/dashboard/create-task-modal.tsx b/src/components/dashboard/create-task-modal.tsx
index a335f72..945836d 100644
--- a/src/components/dashboard/create-task-modal.tsx
+++ b/src/components/dashboard/create-task-modal.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useModalKeyHandler } from '@/hooks/useModal';
+import type { UserType } from '@/lib/users/type';
 import BaseModal from '../ui/base-modal';
 import CreateTaskForm from './create-task-form';
 import type { CreateTaskFormData } from './type';
@@ -8,12 +9,14 @@ interface CreateTaskModalProps {
   isOpen: boolean;
   onClose: () => void;
   onSubmit: (taskData: CreateTaskFormData) => void;
+  userInfo: UserType | null;
 }
 
 export default function CreateTaskModal({
   isOpen,
   onClose,
   onSubmit,
+  userInfo,
 }: CreateTaskModalProps) {
   const [formData, setFormData] = useState<CreateTaskFormData>({
     assignee: '',
@@ -25,6 +28,7 @@ export default function CreateTaskModal({
   });
 
   const handleClose = () => {
+    console.log('CreateTaskModal handleClose called');
     setFormData({
       assignee: '',
       title: '',
@@ -33,13 +37,16 @@ export default function CreateTaskModal({
       tags: [],
       imageFile: null,
     });
+    console.log('Calling onClose');
     onClose();
   };
 
   useModalKeyHandler(isOpen, handleClose);
 
   const handleSubmit = () => {
+    console.log('CreateTaskModal handleSubmit called');
     onSubmit(formData);
+    console.log('Calling handleClose');
     handleClose();
   };
 
@@ -56,7 +63,11 @@ export default function CreateTaskModal({
       onClose={handleClose}
       onSubmit={handleSubmit}
     >
-      <CreateTaskForm formData={formData} setFormData={setFormData} />
+      <CreateTaskForm
+        formData={formData}
+        setFormData={setFormData}
+        userInfo={userInfo}
+      />
     </BaseModal>
   );
 }
diff --git a/src/components/dashboard/dashboard-column.tsx b/src/components/dashboard/dashboard-column.tsx
index 0601b53..95488bf 100644
--- a/src/components/dashboard/dashboard-column.tsx
+++ b/src/components/dashboard/dashboard-column.tsx
@@ -1,8 +1,6 @@
-import { useState } from 'react';
 import AddTaskButton from './add-task-button';
 import ColumnHeader from './column-header';
 import ColumnTaskCard from './column-task-card';
-import CreateTaskModal from './create-task-modal';
 import type { ColumnType, TaskType } from './type';
 
 interface ColumnProps {
@@ -18,39 +16,32 @@ export default function DashboardColumn({
   onAddTaskClick,
   onTaskClick,
 }: ColumnProps) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
   const handleAddTaskClick = () => {
-    setIsModalOpen(true);
     onAddTaskClick?.();
   };
 
-  const handleTaskSubmit = (taskData: any) => {
-    console.log('새 태스크 데이터:', taskData);
-    setIsModalOpen(false);
-  };
-
   return (
     <>
-      <div className='column-content flex h-full flex-col gap-4 overflow-y-auto'>
+      <div className='column-content tablet:min-h-0 flex h-full flex-col gap-4'>
         {/* 헤더 */}
         <ColumnHeader column={column} onSettingsClick={onSettingsClick} />
 
         {/* 카드 추가 버튼 */}
         <AddTaskButton onClick={handleAddTaskClick} />
 
-        {/* 할일 보드 */}
-        {column.tasks.map((task) => (
-          <ColumnTaskCard key={task.id} task={task} onEditTask={onTaskClick} />
-        ))}
+        {/* 할일 보드 - 스크롤 가능한 영역 */}
+        <div className='scrollbar-hide flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-4'>
+            {column.tasks.map((task) => 
+              { return <ColumnTaskCard
+                key={task.id}
+                task={task}
+                onEditTask={onTaskClick}
+              /> }
+            )}
+          </div>
+        </div>
       </div>
-
-      {/* 카드 추가 모달 */}
-      <CreateTaskModal
-        isOpen={isModalOpen}
-        onClose={() => { setIsModalOpen(false); }}
-        onSubmit={handleTaskSubmit}
-      />
     </>
   );
 }
diff --git a/src/components/dashboard/delete-column-modal.tsx b/src/components/dashboard/delete-column-modal.tsx
new file mode 100644
index 0000000..184f017
--- /dev/null
+++ b/src/components/dashboard/delete-column-modal.tsx
@@ -0,0 +1,39 @@
+import BaseModal from '../ui/base-modal';
+
+interface DeleteColumnModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  columnTitle: string;
+}
+
+export default function DeleteColumnModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  columnTitle,
+}: DeleteColumnModalProps) {
+  const handleConfirm = () => {
+    onConfirm();
+    onClose();
+  };
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      title=''
+      submitText='삭제'
+      cancelText='취소'
+      width='w-[32rem]'
+      onClose={onClose}
+      onSubmit={handleConfirm}
+      onCancel={onClose}
+    >
+      <div className='py-4 text-center'>
+        <p className='text-lg font-medium text-gray-900'>
+          컬럼의 모든 카드가 삭제됩니다.
+        </p>
+      </div>
+    </BaseModal>
+  );
+}
diff --git a/src/components/dashboard/edit-task-form.tsx b/src/components/dashboard/edit-task-form.tsx
index d405ebd..f0eb548 100644
--- a/src/components/dashboard/edit-task-form.tsx
+++ b/src/components/dashboard/edit-task-form.tsx
@@ -1,24 +1,103 @@
 import Image from 'next/image';
-import { useState } from 'react';
-import type { EditTaskFormData } from './type';
+import { useEffect, useRef, useState } from 'react';
+import ChipProfile from '@/components/ui/chip/chip-profile';
+import ChipState from '@/components/ui/chip/chip-state';
+import ChipTag from '@/components/ui/chip/chip-tag';
+import { mockProfileColors } from '@/lib/dashboard-mock-data';
+import type { UserType } from '@/lib/users/type';
+import { getProfileColor } from '@/utils/profile-color';
+import { type EditTaskFormData , getRandomTagColor } from './type';
+
 
 interface EditTaskFormProps {
   formData: EditTaskFormData;
-  setFormData: React.Dispatch<React.SetStateAction<EditTaskFormData>>;
+  setFormData: (
+    data: EditTaskFormData | ((prev: EditTaskFormData) => EditTaskFormData)
+  ) => void;
+  columns?: { id: string; title: string }[];
+  userInfo: UserType | null;
 }
 
 export default function EditTaskForm({
   formData,
   setFormData,
+  columns = [],
+  userInfo,
 }: EditTaskFormProps) {
   const [currentTag, setCurrentTag] = useState('');
+  const [isStatusDropdownOpen, setIsStatusDropdownOpen] = useState(false);
+  const [isAssigneeDropdownOpen, setIsAssigneeDropdownOpen] = useState(false);
+  const statusDropdownRef = useRef<HTMLDivElement>(null);
+  const assigneeDropdownRef = useRef<HTMLDivElement>(null);
+
+  const statusOptions = columns.map((column) => { return {
+    value: column.title,
+    label: column.title,
+  } });
+
+  const assigneeOptions = [
+    {
+      value: userInfo?.id ?? 'user-1',
+      label: userInfo?.nickname ?? '사용자',
+      profileColor: mockProfileColors[0],
+    },
+    {
+      value: 'user-2',
+      label: '테스터',
+      profileColor: mockProfileColors[1],
+    },
+    {
+      value: 'user-3',
+      label: '관리자',
+      profileColor: mockProfileColors[2],
+    },
+  ];
+
+  const handleStatusSelect = (status: string) => {
+    setFormData((prev) => ({ ...prev, status }));
+    setIsStatusDropdownOpen(false);
+  };
+
+  const handleAssigneeSelect = (assignee: string) => {
+    setFormData((prev) => ({ ...prev, assignee }));
+    setIsAssigneeDropdownOpen(false);
+  };
+
+  // 드롭다운 외부 클릭 시 닫기
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        statusDropdownRef.current &&
+        !statusDropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsStatusDropdownOpen(false);
+      }
+      if (
+        assigneeDropdownRef.current &&
+        !assigneeDropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsAssigneeDropdownOpen(false);
+      }
+    };
+
+    if (isStatusDropdownOpen || isAssigneeDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isStatusDropdownOpen, isAssigneeDropdownOpen]);
 
   const handleTagKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && currentTag.trim()) {
       e.preventDefault();
       setFormData((prev) => { return {
         ...prev,
-        tags: [...prev.tags, currentTag.trim()],
+        tags: [
+          ...prev.tags,
+          { label: currentTag.trim(), color: getRandomTagColor() },
+        ],
       } });
       setCurrentTag('');
     }
@@ -59,28 +138,53 @@ export default function EditTaskForm({
           <label htmlFor='status' className='mb-2 block text-lg font-medium'>
             상태
           </label>
-          <div className='relative'>
-            <select
-              id='status'
-              name='status'
-              className='w-full cursor-pointer appearance-none rounded-lg border border-gray-300 p-4 pr-12 focus:outline-none'
-              value={formData.status}
-              onChange={(e) =>
-                { setFormData((prev) => ({ ...prev, status: e.target.value })); }
-              }
+          <div className='relative' ref={statusDropdownRef}>
+            <button
+              type='button'
+              className='flex w-full cursor-pointer appearance-none items-center justify-between rounded-lg border border-gray-300 p-4 pr-4 text-left focus:outline-none'
+              onClick={() => {
+                setIsStatusDropdownOpen(!isStatusDropdownOpen);
+              }}
             >
-              <option value='To Do'>● To Do</option>
-              <option value='On Progress'>● On Progress</option>
-              <option value='Done'>● Done</option>
-            </select>
-            <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4'>
+              <ChipState label={formData.status} size='md' />
               <Image
                 src='/dashboard/input-dropdown-btn.svg'
                 alt='드롭다운'
                 width={14}
                 height={16}
+                className={`transition-transform ${isStatusDropdownOpen ? 'rotate-180' : ''}`}
               />
-            </div>
+            </button>
+
+            {/* 드롭다운 옵션들 */}
+            {isStatusDropdownOpen && (
+              <div className='absolute top-full right-0 left-0 z-10 mt-1 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-lg'>
+                {statusOptions.map((option, index) => 
+                  { return <button
+                    key={option.value}
+                    type='button'
+                    className={`flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-left hover:bg-gray-50 ${
+                      index === 0 ? 'rounded-t-lg' : ''
+                    } ${
+                      index === statusOptions.length - 1 ? 'rounded-b-lg' : ''
+                    }`}
+                    onClick={() => { handleStatusSelect(option.value); }}
+                  >
+                    <div className='flex h-[10px] w-[14px] items-center justify-center'>
+                      {formData.status === option.value && (
+                        <Image
+                          src='/dashboard/check-icon.svg'
+                          alt='선택됨'
+                          width={14}
+                          height={10}
+                        />
+                      )}
+                    </div>
+                    <ChipState label={option.label} size='md' />
+                  </button> }
+                )}
+              </div>
+            )}
           </div>
         </div>
 
@@ -89,28 +193,87 @@ export default function EditTaskForm({
           <label htmlFor='assignee' className='mb-2 block text-lg font-medium'>
             담당자
           </label>
-          <div className='relative'>
-            <select
-              id='assignee'
-              name='assignee'
-              className='w-full cursor-pointer appearance-none rounded-lg border border-gray-300 p-4 pr-12 focus:outline-none'
-              value={formData.assignee}
-              onChange={(e) =>
-                { setFormData((prev) => ({ ...prev, assignee: e.target.value })); }
-              }
+          <div className='relative' ref={assigneeDropdownRef}>
+            <button
+              type='button'
+              className='flex w-full cursor-pointer appearance-none items-center justify-between rounded-lg border border-gray-300 p-4 pr-4 text-left focus:outline-none'
+              onClick={() => {
+                setIsAssigneeDropdownOpen(!isAssigneeDropdownOpen);
+              }}
             >
-              <option value=''>이름을 입력해 주세요</option>
-              <option value='user1'>사용자 1</option>
-              <option value='user2'>사용자 2</option>
-            </select>
-            <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4'>
+              <div className='flex items-center gap-2'>
+                {formData.assignee ? (
+                  <>
+                    <ChipProfile
+                      size='md'
+                      label={
+                        String(
+                          assigneeOptions.find(
+                            (opt) => opt.value === formData.assignee
+                          )?.label || ''
+                        ).slice(0, 1) || '배'
+                      }
+                      color={getProfileColor(
+                        assigneeOptions.find(
+                          (opt) => opt.value === formData.assignee
+                        )?.profileColor || mockProfileColors[0]
+                      )}
+                    />
+                    <span>
+                      {assigneeOptions.find(
+                        (opt) => opt.value === formData.assignee
+                      )?.label || '이름을 입력해 주세요'}
+                    </span>
+                  </>
+                ) : (
+                  <span className='text-gray-500'>이름을 입력해 주세요</span>
+                )}
+              </div>
               <Image
                 src='/dashboard/input-dropdown-btn.svg'
                 alt='드롭다운'
                 width={14}
                 height={16}
+                className={`transition-transform ${isAssigneeDropdownOpen ? 'rotate-180' : ''}`}
               />
-            </div>
+            </button>
+
+            {/* 드롭다운 옵션들 */}
+            {isAssigneeDropdownOpen && (
+              <div className='absolute top-full right-0 left-0 z-10 mt-1 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-lg'>
+                {assigneeOptions.map((option, index) => 
+                  { return <button
+                    key={option.value}
+                    type='button'
+                    className={`flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-left hover:bg-gray-50 ${
+                      index === 0 ? 'rounded-t-lg' : ''
+                    } ${
+                      index === assigneeOptions.length - 1 ? 'rounded-b-lg' : ''
+                    }`}
+                    onClick={() => { handleAssigneeSelect(option.value); }}
+                  >
+                    <div className='flex h-[10px] w-[14px] items-center justify-center'>
+                      {formData.assignee === option.value && (
+                        <Image
+                          src='/dashboard/check-icon.svg'
+                          alt='선택됨'
+                          width={14}
+                          height={10}
+                        />
+                      )}
+                    </div>
+                    <div className='flex items-center gap-2'>
+                      <ChipProfile
+                        label={String(option.label || '').slice(0, 1)}
+                        color={getProfileColor(option.profileColor)}
+                        size='md'
+                      />
+                      <span>{option.label}</span>
+                    </div>
+                  </button> }
+                )}
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -121,7 +284,7 @@ export default function EditTaskForm({
           htmlFor='title'
           className='mb-2 block text-lg leading-6 font-medium'
         >
-          제목 <span className='align-baseline text-lg text-indigo-600'>*</span>
+          제목 <span className='text-violet align-baseline text-lg'>*</span>
         </label>
         <input
           required
@@ -129,11 +292,11 @@ export default function EditTaskForm({
           name='title'
           type='text'
           placeholder='제목을 입력해 주세요'
-          className='w-full rounded-lg border border-gray-300 p-4 focus:outline-none'
+          className='focus:border-violet w-full rounded-lg border border-gray-300 p-4 focus:outline-none'
           value={formData.title}
-          onChange={(e) =>
-            { setFormData((prev) => ({ ...prev, title: e.target.value })); }
-          }
+          onChange={(e) => {
+            setFormData((prev) => ({ ...prev, title: e.target.value }));
+          }}
         />
       </div>
 
@@ -143,7 +306,7 @@ export default function EditTaskForm({
           htmlFor='description'
           className='mb-2 block text-lg leading-6 font-medium'
         >
-          설명 <span className='align-baseline text-lg text-indigo-600'>*</span>
+          설명 <span className='text-violet align-baseline text-lg'>*</span>
         </label>
         <textarea
           required
@@ -151,14 +314,14 @@ export default function EditTaskForm({
           name='description'
           placeholder='설명을 입력해 주세요'
           rows={4}
-          className='w-full resize-none rounded-lg border border-gray-300 p-4 focus:outline-none'
+          className='focus:border-violet w-full resize-none rounded-lg border border-gray-300 p-4 focus:outline-none'
           value={formData.description}
-          onChange={(e) =>
-            { setFormData((prev) => { return {
+          onChange={(e) => {
+            setFormData((prev) => { return {
               ...prev,
               description: e.target.value,
-            } }); }
-          }
+            } });
+          }}
         />
       </div>
 
@@ -172,14 +335,14 @@ export default function EditTaskForm({
             id='dueDate'
             name='dueDate'
             type='datetime-local'
-            className='w-full cursor-pointer rounded-lg border border-gray-300 p-4 pl-12 focus:outline-none'
+            className='focus:border-violet w-full cursor-pointer rounded-lg border border-gray-300 p-4 pl-12 focus:outline-none'
             value={formData.dueDate}
             placeholder='날짜와 시간을 선택하세요'
-            onChange={(e) =>
-              { setFormData((prev) => ({ ...prev, dueDate: e.target.value })); }
-            }
+            onChange={(e) => {
+              setFormData((prev) => ({ ...prev, dueDate: e.target.value }));
+            }}
             onClick={(e) => {
-              (e.currentTarget as any).showPicker?.();
+              (e.currentTarget as HTMLInputElement).showPicker?.();
             }}
           />
           <div
@@ -189,7 +352,7 @@ export default function EditTaskForm({
                 '#dueDate'
               ) as HTMLInputElement;
 
-              (input as any)?.showPicker?.();
+              input?.showPicker?.();
               input?.focus();
             }}
           >
@@ -211,23 +374,18 @@ export default function EditTaskForm({
         <div className='flex min-h-[3.5rem] flex-wrap items-center gap-2 rounded-lg border border-gray-300 p-3 focus-within:border-gray-300'>
           {/* 기존 태그들 */}
           {formData.tags.map((tag, index) => 
-            { return <span
-              key={index}
-              className='flex items-center gap-2 rounded-md px-3 py-1 text-sm font-medium'
-              style={{
-                backgroundColor: index === 0 ? '#FED7AA' : '#DBEAFE',
-                color: index === 0 ? '#EA580C' : '#2563EB',
-              }}
-            >
-              {tag}
+            { return <div key={index} className='flex items-center gap-1'>
+              <ChipTag label={tag.label} color={tag.color} size='md' />
               <button
                 type='button'
                 className='ml-1 text-gray-400 hover:text-gray-600'
-                onClick={() => { removeTag(index); }}
+                onClick={() => {
+                  removeTag(index);
+                }}
               >
                 ×
               </button>
-            </span> }
+            </div> }
           )}
           {/* 새 태그 입력 */}
           <input
@@ -237,8 +395,10 @@ export default function EditTaskForm({
             placeholder={formData.tags.length === 0 ? '입력 후 Enter' : ''}
             className='min-w-[120px] flex-1 border-0 bg-transparent p-1 focus:outline-none'
             value={currentTag}
-            onChange={(e) => { setCurrentTag(e.target.value); }}
             onKeyDown={handleTagKeyDown}
+            onChange={(e) => {
+              setCurrentTag(e.target.value);
+            }}
           />
         </div>
       </div>
diff --git a/src/components/dashboard/edit-task-modal.tsx b/src/components/dashboard/edit-task-modal.tsx
index 5dd8492..0e0f80f 100644
--- a/src/components/dashboard/edit-task-modal.tsx
+++ b/src/components/dashboard/edit-task-modal.tsx
@@ -1,5 +1,6 @@
-import { useEffect,useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useModalKeyHandler } from '@/hooks/useModal';
+import type { UserType } from '@/lib/users/type';
 import BaseModal from '../ui/base-modal';
 import EditTaskForm from './edit-task-form';
 import type { EditTaskFormData, TaskType } from './type';
@@ -9,6 +10,9 @@ interface EditTaskModalProps {
   onClose: () => void;
   onSubmit: (taskData: EditTaskFormData) => void;
   initialTask?: TaskType;
+  columns?: { id: string; title: string }[];
+  currentColumnTitle?: string;
+  userInfo: UserType | null;
 }
 
 export default function EditTaskModal({
@@ -16,9 +20,12 @@ export default function EditTaskModal({
   onClose,
   onSubmit,
   initialTask,
+  columns = [],
+  currentColumnTitle,
+  userInfo,
 }: EditTaskModalProps) {
   const [formData, setFormData] = useState<EditTaskFormData>({
-    status: 'To Do',
+    status: currentColumnTitle || 'To Do',
     assignee: '',
     title: '',
     description: '',
@@ -32,7 +39,9 @@ export default function EditTaskModal({
    * 날짜 포맷 변환 함수.
    */
   const formatDateTimeLocal = (dateString: string) => {
-    if (!dateString) {return '';}
+    if (!dateString) {
+      return '';
+    }
 
     // '2025-08-28 10:30' -> '2025-08-28T10:30' 포맷으로 변환
     return dateString.replace(' ', 'T');
@@ -42,12 +51,12 @@ export default function EditTaskModal({
   useEffect(() => {
     if (initialTask && isOpen) {
       setFormData({
-        status: 'To Do', // 기본값, 실제로는 태스크의 컬럼 상태에 따라 설정
+        status: currentColumnTitle || 'To Do', // 현재 컬럼명 사용
         assignee: initialTask.manager.name,
         title: initialTask.title,
         description: initialTask.description || '',
         dueDate: formatDateTimeLocal(initialTask.dueDate || ''),
-        tags: initialTask.tags.map((tag) => tag.label),
+        tags: initialTask.tags,
         imageFile: null,
         existingImageUrl: initialTask.imageUrl,
       });
@@ -76,8 +85,25 @@ export default function EditTaskModal({
     handleClose();
   };
 
+  /**
+   * 원본 데이터와 비교하여 변경사항이 있는지 확인
+   */
+  const hasChanges = () => {
+    if (!initialTask) {return false;}
+
+    return (
+      formData.title !== initialTask.title ||
+      formData.description !== (initialTask.description || '') ||
+      formData.assignee !== initialTask.manager.name ||
+      formData.dueDate !== formatDateTimeLocal(initialTask.dueDate || '') ||
+      formData.status !== currentColumnTitle ||
+      JSON.stringify(formData.tags) !== JSON.stringify(initialTask.tags) ||
+      formData.imageFile !== null // 새 이미지가 업로드된 경우
+    );
+  };
+
   const isSubmitDisabled =
-    !formData.title.trim() || !formData.description.trim();
+    !formData.title.trim() || !formData.description.trim() || !hasChanges();
 
   return (
     <BaseModal
@@ -89,7 +115,12 @@ export default function EditTaskModal({
       onClose={handleClose}
       onSubmit={handleSubmit}
     >
-      <EditTaskForm formData={formData} setFormData={setFormData} />
+      <EditTaskForm
+        formData={formData}
+        setFormData={setFormData}
+        columns={columns}
+        userInfo={userInfo}
+      />
     </BaseModal>
   );
 }
diff --git a/src/components/dashboard/manage-column-form.tsx b/src/components/dashboard/manage-column-form.tsx
index bc514b9..ef57948 100644
--- a/src/components/dashboard/manage-column-form.tsx
+++ b/src/components/dashboard/manage-column-form.tsx
@@ -3,11 +3,13 @@ import type { ManageColumnFormData } from './type';
 interface ManageColumnFormProps {
   formData: ManageColumnFormData;
   setFormData: React.Dispatch<React.SetStateAction<ManageColumnFormData>>;
+  hasError?: boolean;
 }
 
 export default function ManageColumnForm({
   formData,
   setFormData,
+  hasError = false,
 }: ManageColumnFormProps) {
   return (
     <>
@@ -17,7 +19,7 @@ export default function ManageColumnForm({
           htmlFor='column-name'
           className='mb-2 block text-lg leading-6 font-medium'
         >
-          이름 <span className='align-baseline text-lg text-indigo-600'>*</span>
+          이름 <span className='text-violet align-baseline text-lg'>*</span>
         </label>
         <input
           required
@@ -25,11 +27,15 @@ export default function ManageColumnForm({
           name='name'
           type='text'
           placeholder='컬럼 이름을 입력해 주세요'
-          className='w-full rounded-lg border border-gray-300 p-4 focus:outline-none'
           value={formData.name}
-          onChange={(e) =>
-            { setFormData((prev) => ({ ...prev, name: e.target.value })); }
-          }
+          className={`w-full rounded-lg border p-4 focus:outline-none ${
+            hasError
+              ? 'border-red-500 focus:border-red-500'
+              : 'focus:border-violet border-gray-300'
+          }`}
+          onChange={(e) => {
+            setFormData((prev) => ({ ...prev, name: e.target.value }));
+          }}
         />
       </div>
     </>
diff --git a/src/components/dashboard/manage-column-modal.tsx b/src/components/dashboard/manage-column-modal.tsx
index 0ab8f5f..ea64cc6 100644
--- a/src/components/dashboard/manage-column-modal.tsx
+++ b/src/components/dashboard/manage-column-modal.tsx
@@ -1,6 +1,7 @@
-import { useEffect,useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useModalKeyHandler } from '@/hooks/useModal';
 import BaseModal from '../ui/base-modal';
+import DeleteColumnModal from './delete-column-modal';
 import ManageColumnForm from './manage-column-form';
 import type { ColumnType, ManageColumnFormData } from './type';
 
@@ -10,6 +11,7 @@ interface ManageColumnModalProps {
   column: ColumnType | null;
   onUpdate: (columnId: string, columnData: ManageColumnFormData) => void;
   onDelete: (columnId: string) => void;
+  existingColumns?: string[];
 }
 
 export default function ManageColumnModal({
@@ -18,10 +20,12 @@ export default function ManageColumnModal({
   column,
   onUpdate,
   onDelete,
+  existingColumns = [],
 }: ManageColumnModalProps) {
   const [formData, setFormData] = useState<ManageColumnFormData>({
     name: '',
   });
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
   useEffect(() => {
     if (column) {
@@ -43,29 +47,55 @@ export default function ManageColumnModal({
   };
 
   const handleDelete = () => {
+    handleClose(); // 기존 모달 먼저 닫기
+    setIsDeleteModalOpen(true);
+  };
+
+  const handleConfirmDelete = () => {
     if (column) {
       onDelete(column.id);
       handleClose();
     }
   };
 
-  const isUpdateDisabled = !formData.name.trim();
+  // 중복 검사 (현재 컬럼 제외)
+  const isDuplicate = existingColumns
+    .filter((colName) => colName !== column?.title)
+    .some((colName) => colName.toLowerCase() === formData.name.toLowerCase());
 
-  if (!column) {return null;}
+  const isUpdateDisabled = !formData.name.trim() || isDuplicate;
+
+  if (!column) {
+    return null;
+  }
 
   return (
-    <BaseModal
-      isOpen={isOpen}
-      title='컬럼 관리'
-      submitText='변경'
-      cancelText='삭제'
-      isSubmitDisabled={isUpdateDisabled}
-      width='w-[32rem]'
-      onClose={handleClose}
-      onSubmit={handleUpdate}
-      onCancel={handleDelete}
-    >
-      <ManageColumnForm formData={formData} setFormData={setFormData} />
-    </BaseModal>
+    <>
+      <BaseModal
+        isOpen={isOpen}
+        title='컬럼 관리'
+        submitText='변경'
+        cancelText='삭제'
+        isSubmitDisabled={isUpdateDisabled}
+        width='w-[32rem]'
+        errorMessage={isDuplicate ? '중복된 컬럼 이름입니다.' : undefined}
+        onClose={handleClose}
+        onSubmit={handleUpdate}
+        onCancel={handleDelete}
+      >
+        <ManageColumnForm
+          formData={formData}
+          setFormData={setFormData}
+          hasError={isDuplicate}
+        />
+      </BaseModal>
+
+      <DeleteColumnModal
+        isOpen={isDeleteModalOpen}
+        columnTitle={column.title}
+        onClose={() => { setIsDeleteModalOpen(false); }}
+        onConfirm={handleConfirmDelete}
+      />
+    </>
   );
 }
diff --git a/src/components/dashboard/task-detail-modal.tsx b/src/components/dashboard/task-detail-modal.tsx
index c657dec..f1d9d75 100644
--- a/src/components/dashboard/task-detail-modal.tsx
+++ b/src/components/dashboard/task-detail-modal.tsx
@@ -1,59 +1,46 @@
 import Image from 'next/image';
-import { useEffect,useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import type {
+  CommentType,
+  TaskDetailModalProps,
+} from '@/components/dashboard/type';
+import ChipProfile from '@/components/ui/chip/chip-profile';
+import ChipTag from '@/components/ui/chip/chip-tag';
 import { useModalKeyHandler } from '@/hooks/useModal';
-import type { CommentType,TaskDetailModalProps } from './type';
-
-// 임시 댓글 데이터
-const mockComments: CommentType[] = [
-  {
-    id: '1',
-    content: '오늘안에 CCC 까지 만들 수 있을까요?',
-    author: {
-      id: '1',
-      name: '정만철',
-      profileColor: '#FEF3C7',
-    },
-    createdAt: '2022.12.27 14:00',
-  },
-];
-
-const getTagColorClasses = (color: string) => {
-  switch (color) {
-    case 'orange': {
-      return 'bg-orange-100 text-orange-600';
-    }
-    case 'green': {
-      return 'bg-green-100 text-green-600';
-    }
-    case 'blue': {
-      return 'bg-blue-100 text-blue-600';
-    }
-    case 'red': {
-      return 'bg-red-100 text-red-600';
-    }
-    case 'purple': {
-      return 'bg-purple-100 text-purple-600';
-    }
-    default: {
-      return 'bg-gray-100 text-gray-600';
-    }
+import { getProfileColor } from '@/utils/profile-color';
+
+const formatDueDate = (dueDate: string) => {
+  if (!dueDate) {
+    return '';
   }
+
+  const date = new Date(dueDate);
+  const year = String(date.getFullYear());
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
 };
 
 export default function TaskDetailModal({
   isOpen,
   onClose,
   task,
+  columnTitle,
+  currentUser,
   onEdit,
   onDelete,
-}: TaskDetailModalProps) {
+}: TaskDetailModalProps): React.ReactElement | null {
   const [newComment, setNewComment] = useState('');
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [editingCommentId, setEditingCommentId] = useState<string | null>(null);
   const [editingContent, setEditingContent] = useState('');
+  const [comments, setComments] = useState<CommentType[]>([]);
   const menuRef = useRef<HTMLDivElement>(null);
 
-  const handleClose = () => {
+  const handleClose = (): void => {
     setNewComment('');
     setIsMenuOpen(false);
     setEditingCommentId(null);
@@ -62,11 +49,11 @@ export default function TaskDetailModal({
   };
 
   useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
+    const handleClickOutside = (event: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
         setIsMenuOpen(false);
       }
-    }
+    };
 
     if (isMenuOpen) {
       document.addEventListener('mousedown', handleClickOutside);
@@ -80,10 +67,32 @@ export default function TaskDetailModal({
   useModalKeyHandler(isOpen, handleClose);
 
   const handleCommentSubmit = () => {
-    if (newComment.trim()) {
-      console.log('New comment:', newComment);
-      setNewComment('');
+    if (!newComment.trim()) {
+      return;
     }
+
+    const newCommentObj: CommentType = {
+      id: `comment_${String(Date.now())}_${Math.random().toString(36).slice(2, 11)}`,
+      content: newComment.trim(),
+      author: {
+        id: currentUser?.id || 'current-user',
+        name: currentUser?.name || '사용자',
+        profileColor: currentUser?.profileColor || '#8B5CF6',
+      },
+      createdAt: new Date()
+        .toLocaleString('ko-KR', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+        })
+        .replaceAll('.', '.')
+        .replaceAll(',', ''),
+    };
+
+    setComments((prev) => [...prev, newCommentObj]);
+    setNewComment('');
   };
 
   const handleEditComment = (commentId: string, content: string) => {
@@ -91,11 +100,25 @@ export default function TaskDetailModal({
     setEditingContent(content);
   };
 
-  const handleSaveComment = () => {
-    if (editingContent.trim()) {
-      console.log('Save comment:', editingCommentId, editingContent);
-      setEditingCommentId(null);
-      setEditingContent('');
+  const handleUpdateComment = () => {
+    if (!editingCommentId || !editingContent.trim()) {
+      return;
+    }
+
+    setComments((prev) => {
+      return prev.map((comment) => {
+        return comment.id === editingCommentId
+          ? { ...comment, content: editingContent.trim() }
+          : comment;
+      });
+    });
+    setEditingCommentId(null);
+    setEditingContent('');
+  };
+
+  const handleDeleteComment = (commentId: string) => {
+    if (window.confirm('댓글을 삭제하시겠습니까?')) {
+      setComments((prev) => prev.filter((comment) => comment.id !== commentId));
     }
   };
 
@@ -109,20 +132,26 @@ export default function TaskDetailModal({
   };
 
   const handleEdit = () => {
-    if (task && onEdit) {
-      onEdit(task);
-      handleClose();
+    if (!task || !onEdit) {
+      return;
     }
+
+    onEdit(task);
+    handleClose();
   };
 
   const handleDelete = () => {
-    if (task && onDelete) {
-      onDelete(task.id);
-      handleClose();
+    if (!task || !onDelete) {
+      return;
     }
+
+    onDelete(task.id);
+    handleClose();
   };
 
-  if (!isOpen || !task) {return null;}
+  if (!isOpen || !task) {
+    return null;
+  }
 
   const handleOverlayClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
@@ -133,11 +162,19 @@ export default function TaskDetailModal({
   return (
     <div
       className='fixed inset-0 z-50 flex items-center justify-center bg-[rgba(0,0,0,0.7)]'
-      onClick={handleOverlayClick}
+      role='dialog'
+      tabIndex={-1}
     >
+      <button
+        className='absolute inset-0 h-full w-full'
+        aria-label='모달 닫기'
+        type='button'
+        onClick={handleOverlayClick}
+      />
       <div
         className='scrollbar-hide max-h-[90vh] w-[40rem] overflow-y-scroll rounded-lg bg-white'
-        onClick={(e) => { e.stopPropagation(); }}
+        role='document'
+        tabIndex={-1}
       >
         {/* 헤더 */}
         <div className='flex items-center justify-between p-6'>
@@ -164,13 +201,13 @@ export default function TaskDetailModal({
                   style={{ boxShadow: '0 .4rem 2rem 0 rgba(0, 0, 0, .08)' }}
                 >
                   <button
-                    className='w-full cursor-pointer rounded-md px-3 py-2 text-center text-sm hover:bg-purple-100 hover:text-purple-600'
+                    className='hover:bg-violet-light hover:text-violet w-full cursor-pointer rounded-md px-3 py-2 text-center text-sm'
                     onClick={handleEdit}
                   >
                     수정하기
                   </button>
                   <button
-                    className='w-full cursor-pointer rounded-md px-3 py-2 text-center text-sm hover:bg-purple-100 hover:text-purple-600'
+                    className='hover:bg-violet-light hover:text-violet w-full cursor-pointer rounded-md px-3 py-2 text-center text-sm'
                     onClick={handleDelete}
                   >
                     삭제하기
@@ -197,25 +234,26 @@ export default function TaskDetailModal({
         {/* 카테고리와 태그 */}
         <div className='px-6 pb-6'>
           <div className='flex flex-wrap items-center gap-2'>
-            <span className='flex items-center gap-2 rounded-full bg-indigo-100 px-3 py-1 text-sm font-medium text-indigo-600'>
-              <span className='h-2 w-2 rounded-full bg-indigo-600'></span>
-              To Do
+            <span className='bg-violet-light text-violet flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium'>
+              <span className='bg-violet h-2 w-2 rounded-full' />
+              {columnTitle || 'To Do'}
             </span>
 
-            {task.tags.length > 0 && (
-              <div className='h-4 w-px bg-gray-300'></div>
-            )}
-
             {task.tags.length > 0 && (
               <>
-                {task.tags.map((tag, index) => 
-                  { return <span
-                    key={index}
-                    className={`rounded-md px-3 py-1 text-sm font-medium ${getTagColorClasses(tag.color)}`}
-                  >
-                    {tag.label}
-                  </span> }
-                )}
+                <div className='h-4 w-px bg-gray-300' />
+                {task.tags.map((tag) => {
+                  return (
+                    <ChipTag
+                      key={tag.label}
+                      label={tag.label}
+                      size='md'
+                      color={
+                        tag.color as 'blue' | 'pink' | 'green' | 'brown' | 'red'
+                      }
+                    />
+                  );
+                })}
               </>
             )}
           </div>
@@ -245,23 +283,19 @@ export default function TaskDetailModal({
               )}
             </div>
 
-            <div
-              className='w-52 self-start rounded-lg border border-gray-300 p-4'
-              style={{
-                gap: '1.5rem',
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
+            <div className='flex w-52 flex-col gap-6 self-start rounded-lg border border-gray-300 p-4'>
               <div>
                 <span className='mb-2 block text-sm font-bold'>담당자</span>
                 <div className='flex items-center gap-2'>
-                  <div
-                    className='flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium text-white'
-                    style={{ backgroundColor: task.manager.profileColor }}
-                  >
-                    {task.manager.nickname.slice(0, 2)}
-                  </div>
+                  <ChipProfile
+                    color={getProfileColor(task.manager.profileColor)}
+                    size='md'
+                    label={
+                      typeof task.manager.nickname === 'string'
+                        ? task.manager.nickname.slice(0, 1)
+                        : ''
+                    }
+                  />
                   <span className='text-sm font-medium'>
                     {task.manager.name}
                   </span>
@@ -271,7 +305,9 @@ export default function TaskDetailModal({
               {task.dueDate && (
                 <div>
                   <span className='mb-2 block text-sm font-bold'>마감일</span>
-                  <p className='text-sm font-medium'>{task.dueDate}</p>
+                  <p className='text-sm font-medium'>
+                    {formatDueDate(task.dueDate)}
+                  </p>
                 </div>
               )}
             </div>
@@ -282,16 +318,18 @@ export default function TaskDetailModal({
         <div className='px-6 pt-6 pb-6'>
           <h3 className='mb-4 text-lg font-medium'>댓글</h3>
 
-          <div className='relative mb-6'>
+          <div className='relative'>
             <textarea
               placeholder='댓글 작성하기'
               rows={3}
-              className='w-full resize-none rounded-lg border border-gray-300 p-4 pr-20 focus:outline-none'
+              className='focus:border-violet w-full resize-none overflow-hidden rounded-lg border border-gray-300 p-4 pr-20 focus:outline-none'
               value={newComment}
-              onChange={(e) => { setNewComment(e.target.value); }}
+              onChange={(e) => {
+                setNewComment(e.target.value);
+              }}
             />
             <button
-              className='absolute right-4 bottom-4 cursor-pointer rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-indigo-600 hover:bg-gray-50'
+              className='text-violet absolute right-4 bottom-4 cursor-pointer rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50'
               onClick={handleCommentSubmit}
             >
               입력
@@ -299,73 +337,82 @@ export default function TaskDetailModal({
           </div>
 
           {/* 댓글 목록 */}
-          <div className='space-y-4'>
-            {mockComments.map((comment) => 
-              { return <div key={comment.id} className='flex gap-3'>
-                <div
-                  className='flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium'
-                  style={{
-                    backgroundColor: comment.author.profileColor,
-                    color: '#D97706',
-                  }}
-                >
-                  {comment.author.name.slice(0, 2)}
-                </div>
-                <div className='flex-1'>
-                  <div className='mb-1 flex items-center gap-2'>
-                    <span className='text-sm font-medium'>
-                      {comment.author.name}
-                    </span>
-                    <span className='text-xs text-gray-500'>
-                      {comment.createdAt}
-                    </span>
-                  </div>
-
-                  {editingCommentId === comment.id ? (
-                    <div className='space-y-3'>
-                      <textarea
-                        value={editingContent}
-                        className='w-full resize-none rounded-lg border border-gray-300 p-3 text-sm focus:outline-none'
-                        rows={3}
-                        onChange={(e) => { setEditingContent(e.target.value); }}
-                      />
-                      <div className='flex gap-3'>
-                        <button
-                          className='cursor-pointer text-xs text-gray-500 underline'
-                          onClick={handleSaveComment}
-                        >
-                          저장
-                        </button>
-                        <button
-                          className='cursor-pointer text-xs text-gray-500 underline'
-                          onClick={handleCancelEdit}
-                        >
-                          취소
-                        </button>
+          {comments.length > 0 && (
+            <div className='mt-6 space-y-6'>
+              {comments.map((comment) => {
+                return (
+                  <div key={comment.id} className='flex gap-3'>
+                    <ChipProfile
+                      label={(comment.author.name || '').slice(0, 1)}
+                      color={getProfileColor(comment.author.profileColor)}
+                      size='md'
+                    />
+                    <div className='flex-1'>
+                      <div className='mb-1 flex items-center gap-2'>
+                        <span className='text-sm font-medium'>
+                          {comment.author.name}
+                        </span>
+                        <span className='text-xs text-gray-500'>
+                          {comment.createdAt}
+                        </span>
                       </div>
+
+                      {editingCommentId === comment.id ? (
+                        <div className='space-y-3'>
+                          <textarea
+                            value={editingContent}
+                            className='focus:border-violet w-full resize-none rounded-lg border border-gray-300 p-3 text-sm focus:outline-none'
+                            rows={3}
+                            onChange={(e) => {
+                              setEditingContent(e.target.value);
+                            }}
+                          />
+                          <div className='flex gap-3'>
+                            <button
+                              className='cursor-pointer text-xs text-gray-500 underline'
+                              onClick={handleUpdateComment}
+                            >
+                              저장
+                            </button>
+                            <button
+                              className='cursor-pointer text-xs text-gray-500 underline'
+                              onClick={handleCancelEdit}
+                            >
+                              취소
+                            </button>
+                          </div>
+                        </div>
+                      ) : (
+                        <>
+                          <p className='text-sm text-gray-700'>
+                            {comment.content}
+                          </p>
+                          <div className='mt-2 flex gap-3'>
+                            <button
+                              className='cursor-pointer text-xs text-gray-500 underline'
+                              onClick={() => {
+                                handleEditComment(comment.id, comment.content);
+                              }}
+                            >
+                              수정
+                            </button>
+                            <button
+                              className='cursor-pointer text-xs text-gray-500 underline'
+                              onClick={() => {
+                                handleDeleteComment(comment.id);
+                              }}
+                            >
+                              삭제
+                            </button>
+                          </div>
+                        </>
+                      )}
                     </div>
-                  ) : (
-                    <>
-                      <p className='text-sm text-gray-700'>{comment.content}</p>
-                      <div className='mt-2 flex gap-3'>
-                        <button
-                          className='cursor-pointer text-xs text-gray-500 underline'
-                          onClick={() =>
-                            { handleEditComment(comment.id, comment.content); }
-                          }
-                        >
-                          수정
-                        </button>
-                        <button className='cursor-pointer text-xs text-gray-500 underline'>
-                          삭제
-                        </button>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </div> }
-            )}
-          </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/dashboard/type.ts b/src/components/dashboard/type.ts
index ceb2e40..6232e6b 100644
--- a/src/components/dashboard/type.ts
+++ b/src/components/dashboard/type.ts
@@ -3,6 +3,18 @@ export interface TagType {
   color: string;
 }
 
+// 사용 가능한 태그 색상 목록 (global CSS의 color-chip 색상만 사용)
+export const TAG_COLORS = ['blue', 'pink', 'green', 'brown', 'red'] as const;
+
+/**
+ * 랜덤 태그 색상 선택 함수
+ */
+export const getRandomTagColor = (): string => {
+  const randomIndex = Math.floor(Math.random() * TAG_COLORS.length);
+
+  return TAG_COLORS[randomIndex];
+};
+
 export interface TaskType {
   id: string;
   title: string;
@@ -64,7 +76,7 @@ export interface CreateTaskFormData {
   title: string;
   description: string;
   dueDate: string;
-  tags: string[];
+  tags: TagType[];
   imageFile: File | null;
 }
 
@@ -74,7 +86,7 @@ export interface EditTaskFormData {
   title: string;
   description: string;
   dueDate: string;
-  tags: string[];
+  tags: TagType[];
   imageFile: File | null;
   existingImageUrl?: string;
 }
@@ -111,6 +123,12 @@ export interface TaskDetailModalProps {
   isOpen: boolean;
   onClose: () => void;
   task: TaskType | null;
+  columnTitle?: string;
+  currentUser?: {
+    id: string;
+    name: string;
+    profileColor: string;
+  };
   onEdit?: (task: TaskType) => void;
   onDelete?: (taskId: string) => void;
 }
diff --git a/src/components/layout/dashboard-layout.tsx b/src/components/layout/dashboard-layout.tsx
index 19be7f8..1976819 100644
--- a/src/components/layout/dashboard-layout.tsx
+++ b/src/components/layout/dashboard-layout.tsx
@@ -8,7 +8,7 @@ export default function DashboardLayout({
   children: ReactNode;
 }): ReactNode {
   return (
-    <div className='tablet:pl-40 mobile:pl-[4rem] pt-16 pl-[18.75rem]'>
+    <div className='pt-16 pl-[18.75rem]'>
       <DashboardHeader />
       <SideMenu />
       {children}
diff --git a/src/components/ui/base-modal.tsx b/src/components/ui/base-modal.tsx
index da82fb9..3c2266a 100644
--- a/src/components/ui/base-modal.tsx
+++ b/src/components/ui/base-modal.tsx
@@ -12,6 +12,7 @@ interface BaseModalProps {
   isSubmitDisabled?: boolean;
   width?: string;
   hideCancelButton?: boolean;
+  errorMessage?: string;
 }
 
 export default function BaseModal({
@@ -26,6 +27,7 @@ export default function BaseModal({
   isSubmitDisabled = false,
   width = 'w-[40rem]',
   hideCancelButton = false,
+  errorMessage,
 }: BaseModalProps) {
   if (!isOpen) {
     return null;
@@ -46,7 +48,7 @@ export default function BaseModal({
 
   return (
     <div
-      className='mobile:min-w-xs fixed inset-0 z-50 flex items-center justify-center bg-[rgba(0,0,0,0.7)]'
+      className='mobile:min-w-xs fixed inset-0 z-50 flex items-center justify-center bg-[rgba(0,0,0,0.5)]'
       onClick={handleOverlayClick}
     >
       <div
@@ -57,11 +59,18 @@ export default function BaseModal({
       >
         <h2 className='mb-8 text-left text-2xl font-bold'>{title}</h2>
 
-        <form className='space-y-6' onSubmit={handleSubmit}>
-          {children}
+        <form onSubmit={handleSubmit}>
+          <div className='space-y-6'>
+            {children}
+
+            {/* 에러 메시지 */}
+            {errorMessage && (
+              <div className='-mt-2 text-sm text-red-500'>{errorMessage}</div>
+            )}
+          </div>
 
           {/* 버튼들 */}
-          <div className='flex gap-3'>
+          <div className='mt-6 flex gap-3'>
             {!hideCancelButton && (
               <button
                 type='button'
@@ -77,7 +86,7 @@ export default function BaseModal({
               className={`${hideCancelButton ? 'w-full' : 'flex-1'} cursor-pointer rounded-lg py-4 text-white ${
                 isSubmitDisabled
                   ? 'cursor-not-allowed bg-gray-400'
-                  : 'bg-indigo-600 hover:bg-indigo-700'
+                  : 'bg-violet hover:bg-violet-800'
               }`}
             >
               {submitText}
diff --git a/src/components/ui/chip/chip-tag.tsx b/src/components/ui/chip/chip-tag.tsx
index 2f2ce09..034acd6 100644
--- a/src/components/ui/chip/chip-tag.tsx
+++ b/src/components/ui/chip/chip-tag.tsx
@@ -9,6 +9,7 @@ export const ChipVariants = cva(`flex-center gap-1.5 rounded-sm font-normal`, {
       pink: 'bg-chip-pink-bg text-chip-pink',
       green: 'bg-chip-green-bg text-chip-green',
       brown: 'bg-chip-brown-bg text-chip-brown',
+      red: 'bg-chip-red-bg text-chip-red',
     },
     size: {
       md: 'text-xs px-1.5 py-1 h-[1.625rem]',
@@ -27,8 +28,8 @@ interface ChipProps
   label: string;
   /** 사이즈: 'md' | 'lg'*/
   size: 'md' | 'lg';
-  /** 색상: 'blue' | 'pink' | 'green' | 'brown'*/
-  color: 'blue' | 'pink' | 'green' | 'brown';
+  /** 색상: 'blue' | 'pink' | 'green' | 'brown' | 'red'*/
+  color: 'blue' | 'pink' | 'green' | 'brown' | 'red';
 }
 export default function ChipTag({
   label,
diff --git a/src/components/ui/dashboard-header/index.tsx b/src/components/ui/dashboard-header/index.tsx
index 80e6bca..3d22d40 100644
--- a/src/components/ui/dashboard-header/index.tsx
+++ b/src/components/ui/dashboard-header/index.tsx
@@ -8,9 +8,9 @@ import {
   useRef,
   useState,
 } from 'react';
+import InviteMemberModal from '@/components/mydashboard/invite-member-modal';
 import ChipProfile from '@/components/ui/chip/chip-profile';
 import ProfileList from '@/components/ui/dashboard-header/profile-list';
-import InviteMemberModal from '@/components/mydashboard/invite-member-modal';
 
 const buttonClass =
   'flex-center border-gray-3 text-md mobile:px-3 mobile:py-1.5 h-9 cursor-pointer gap-2 rounded-lg border-1 px-4 py-2.5 hover:bg-gray-4 active:bg-gray-3';
@@ -81,8 +81,8 @@ export default function DashboardHeader(): ReactNode {
   }, [close, router]);
 
   return (
-    <header className='mobile:h-[3.75rem] border-gray-3 tablet:pl-48 mobile:pl-12 tablet:justify-end fixed top-0 right-0 left-0 z-50 flex h-[4.375rem] w-full items-center justify-between border-b-1 bg-white pl-96'>
-      <div className='tablet:hidden flex gap-2 text-xl font-bold text-black'>
+    <header className='border-gray-3 fixed top-0 right-0 left-0 z-50 flex h-[4.375rem] w-full items-center justify-between border-b-1 bg-white pl-96'>
+      <div className='flex gap-2 text-xl font-bold text-black'>
         <h1>내 대시보드</h1>
         <Image
           className='h-4 w-5 self-center'
@@ -92,34 +92,34 @@ export default function DashboardHeader(): ReactNode {
           height={16}
         />
       </div>
-      <nav className='mobile:gap-2 flex h-full items-center gap-8'>
-        <div className='mobile:gap-1.5 flex gap-3'>
+      <nav className='flex h-full items-center gap-8'>
+        <div className='flex gap-3'>
           <Link
             href={`/dashboard/${String(dashboardId)}/edit`}
             className={buttonClass}
             aria-label='대시보드 관리 페이지로 이동'
           >
-            <span className='mobile:hidden *:fill-gray-1'>
+            <span className='*:fill-gray-1'>
               <SettingIcon />
             </span>
             <span>관리</span>
           </Link>
           <button className={buttonClass} onClick={handleOpenModal}>
-            <span className='mobile:hidden *:fill-gray-1'>
+            <span className='*:fill-gray-1'>
               <AddBoxIcon />
             </span>
             <span>초대하기</span>
           </button>
         </div>
-        <div className='mobile:gap-3 flex h-full gap-6'>
+        <div className='flex h-full gap-6'>
           <ProfileList />
           <Link
             href={'/mypage'}
             aria-label='마이 페이지로 이동'
-            className='border-l-gray-3 mobile:pl-3 hover:bg-gray-4 active:bg-gray-3 tablet:pr-8 mobile:pr-2 flex cursor-pointer items-center gap-3 border-l-1 pr-20 pl-6'
+            className='border-l-gray-3 hover:bg-gray-4 active:bg-gray-3 flex cursor-pointer items-center gap-3 border-l-1 pr-20 pl-6'
           >
             <ChipProfile label={'K'} size='lg' color='green' />
-            <span className='mobile:hidden font-medium'>권수형</span>
+            <span className='font-medium'>권수형</span>
           </Link>
         </div>
         <InviteMemberModal
diff --git a/src/components/ui/side-menu/index.tsx b/src/components/ui/side-menu/index.tsx
index 2dcc5a4..0e8d9b1 100644
--- a/src/components/ui/side-menu/index.tsx
+++ b/src/components/ui/side-menu/index.tsx
@@ -13,11 +13,8 @@ export default function SideMenu(): ReactNode {
   };
 
   return (
-    <section className='tablet:w-[10rem] mobile:w-auto mobile:min-w-10 border-gray-3 fixed top-0 bottom-0 left-0 z-50 flex w-[18.75rem] flex-col gap-14 border-r-1 bg-white px-3 py-5'>
-      <Link
-        href={'/'}
-        className='flex-center tablet:self-center justify-center self-start'
-      >
+    <section className='border-gray-3 fixed top-0 bottom-0 left-0 z-50 flex w-[18.75rem] flex-col gap-14 border-r-1 bg-white px-3 py-5'>
+      <Link href={'/'} className='flex-center justify-center self-start'>
         <Image
           priority
           src={'/side-menu/logo.png'}
@@ -30,16 +27,14 @@ export default function SideMenu(): ReactNode {
           priority
           src={'/side-menu/Taskify.svg'}
           alt='Taskify'
-          className='mobile:hidden h-auto w-auto'
+          className='h-auto w-auto'
           width={80}
           height={22}
         />
       </Link>
       <nav className='text-gray-1 flex flex-col gap-3'>
-        <div className='mobile:justify-center flex justify-between'>
-          <span className='mobile:hidden text-xs font-semibold'>
-            DashBoards
-          </span>
+        <div className='flex justify-between'>
+          <span className='text-xs font-semibold'>DashBoards</span>
           <button className='cursor-pointer'>
             <Image
               src={'/icon/add_box.svg'}
@@ -52,7 +47,7 @@ export default function SideMenu(): ReactNode {
         <DashboardList />
         <div className='mt-3'>
           <ButtonPagination
-            additionalClass='mobile:hidden'
+            additionalClass=''
             onPrevClick={handleClickPrev}
             onNextClick={handleClickNext}
           />
diff --git a/src/lib/dashboard-mock-data.ts b/src/lib/dashboard-mock-data.ts
new file mode 100644
index 0000000..48d92bb
--- /dev/null
+++ b/src/lib/dashboard-mock-data.ts
@@ -0,0 +1,80 @@
+import type { ColumnType, TaskType } from '@/components/dashboard/type';
+
+// Mock 컬럼 데이터
+export const mockColumns: ColumnType[] = [
+  {
+    id: '1',
+    title: 'To do',
+    tasks: [
+      {
+        id: 't1',
+        title: 'Test',
+        description:
+          '새로운 테스트 태스크입니다. sample-image를 포함한 테스트용 데이터입니다.',
+        tags: [
+          { label: '테스트', color: 'blue' },
+          { label: '샘플', color: 'green' },
+        ],
+        dueDate: '2025-01-15 14:30',
+        imageUrl: '/dashboard/sample-image.png',
+        manager: {
+          id: 'm1',
+          name: '테스터',
+          nickname: '테스터',
+          profileColor: '#3B82F6',
+        },
+      },
+      {
+        id: 't3',
+        title: '123433333',
+        description: '123433333',
+        tags: [
+          { label: '프로젝트', color: 'orange' },
+          { label: '백엔드', color: 'green' },
+        ],
+        dueDate: '2025-08-28 10:00',
+        imageUrl: '',
+        manager: {
+          id: 'm3',
+          name: 'te',
+          nickname: 'te',
+          profileColor: '#8B5CF6',
+        },
+      },
+    ],
+  },
+  {
+    id: '2',
+    title: 'On progress',
+    tasks: [
+      {
+        id: 't2',
+        title: '2222',
+        description: '2222',
+        tags: [{ label: '프로젝트', color: 'orange' }],
+        dueDate: '2025-08-28 10:30',
+        imageUrl: '',
+        manager: {
+          id: 'm2',
+          name: 'te',
+          nickname: 'te',
+          profileColor: '#8B5CF6',
+        },
+      },
+    ],
+  },
+  {
+    id: '3',
+    title: 'Done',
+    tasks: [],
+  },
+];
+
+// Mock 프로필 색상들
+export const mockProfileColors = [
+  '#8B5CF6', // 보라색
+  '#10B981', // 초록색
+  '#F59E0B', // 주황색
+  '#EF4444', // 빨간색
+  '#3B82F6', // 파란색
+] as const;
diff --git a/src/pages/dashboard/[dashboardId]/index.tsx b/src/pages/dashboard/[dashboardId]/index.tsx
index 9e61023..e359242 100644
--- a/src/pages/dashboard/[dashboardId]/index.tsx
+++ b/src/pages/dashboard/[dashboardId]/index.tsx
@@ -1,104 +1,57 @@
-import { type ReactNode, useState } from 'react';
+import type { GetServerSideProps } from 'next';
+import React, { useState } from 'react';
 import ColumnLayout from '@/components/dashboard/column-layout';
 import CreateColumnModal from '@/components/dashboard/create-column-modal';
+import CreateTaskModal from '@/components/dashboard/create-task-modal';
 import EditTaskModal from '@/components/dashboard/edit-task-modal';
 import ManageColumnModal from '@/components/dashboard/manage-column-modal';
 import TaskDetailModal from '@/components/dashboard/task-detail-modal';
 import type {
   ColumnType,
   CreateColumnFormData,
+  CreateTaskFormData,
   EditTaskFormData,
   ManageColumnFormData,
   TaskType,
 } from '@/components/dashboard/type';
+import DashboardLayout from '@/components/layout/dashboard-layout';
+import { mockColumns, mockProfileColors } from '@/lib/dashboard-mock-data';
+import type { UserType } from '@/lib/users/type';
 
-export default function DashboardDetailPage(): ReactNode {
+interface DashboardDetailPageProps {
+  userInfo: UserType | null;
+}
+
+export default function DashboardDetailPage({
+  userInfo,
+}: DashboardDetailPageProps): React.ReactElement {
   const [isColumnModalOpen, setIsColumnModalOpen] = useState(false);
   const [isManageColumnModalOpen, setIsManageColumnModalOpen] = useState(false);
   const [selectedColumn, setSelectedColumn] = useState<ColumnType | null>(null);
   const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
   const [selectedTask, setSelectedTask] = useState<TaskType | null>(null);
   const [isEditTaskModalOpen, setIsEditTaskModalOpen] = useState(false);
-  const mockColumns: ColumnType[] = [
-    {
-      id: '1',
-      title: 'To do',
-      tasks: [
-        {
-          id: 't1',
-          title: '1234',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          tags: [
-            { label: '프로젝트', color: 'orange' },
-            { label: '백엔드', color: 'green' },
-          ],
-          dueDate: '2025-08-28 10:30',
-          imageUrl: '/dashboard/sample-image.png',
-          manager: {
-            id: 'm1',
-            name: 'te',
-            nickname: 'te',
-            profileColor: '#8B5CF6',
-          },
-        },
-        {
-          id: 't3',
-          title: '123433333',
-          description: '123433333',
-          tags: [
-            { label: '프로젝트', color: 'orange' },
-            { label: '백엔드', color: 'green' },
-          ],
-          dueDate: '2025-08-28 10:00',
-          imageUrl: '',
-          manager: {
-            id: 'm3',
-            name: 'te',
-            nickname: 'te',
-            profileColor: '#8B5CF6',
-          },
-        },
-      ],
-    },
-    {
-      id: '2',
-      title: 'On progress',
-      tasks: [
-        {
-          id: 't2',
-          title: '2222',
-          description: '2222',
-          tags: [{ label: '프로젝트', color: 'orange' }],
-          dueDate: '2025-08-28 10:30',
-          imageUrl: '',
-          manager: {
-            id: 'm2',
-            name: 'te',
-            nickname: 'te',
-            profileColor: '#8B5CF6',
-          },
-        },
-      ],
-    },
-    {
-      id: '3',
-      title: 'Done',
-      tasks: [],
-    },
-  ];
+  const [isCreateTaskModalOpen, setIsCreateTaskModalOpen] = useState(false);
+  const [selectedColumnId, setSelectedColumnId] = useState<string | null>(null);
+  const [columns, setColumns] = useState<ColumnType[]>(mockColumns);
 
   const handleAddColumnClick = () => {
     setIsColumnModalOpen(true);
   };
 
   const handleColumnSubmit = (columnData: CreateColumnFormData) => {
-    // TODO: 컬럼 생성 API 호출
+    const newColumn: ColumnType = {
+      id: Date.now().toString(),
+      title: columnData.name,
+      tasks: [],
+    };
+
+    setColumns((prevColumns) => [...prevColumns, newColumn]);
     setIsColumnModalOpen(false);
   };
 
   const handleColumnSettingsClick = (columnId: string) => {
-    const column = mockColumns.find((col) => col.id === columnId);
+    const column = columns.find((col) => col.id === columnId);
 
     if (column) {
       setSelectedColumn(column);
@@ -110,12 +63,18 @@ export default function DashboardDetailPage(): ReactNode {
     columnId: string,
     columnData: ManageColumnFormData
   ) => {
-    // TODO: 컬럼 업데이트 API 호출
+    setColumns((prevColumns) => {
+      return prevColumns.map((col) =>
+        col.id === columnId ? { ...col, title: columnData.name } : col
+      );
+    });
     setIsManageColumnModalOpen(false);
   };
 
   const handleColumnDelete = (columnId: string) => {
-    // TODO: 컬럼 삭제 API 호출
+    setColumns((prevColumns) =>
+      prevColumns.filter((col) => col.id !== columnId)
+    );
     setIsManageColumnModalOpen(false);
   };
 
@@ -124,6 +83,16 @@ export default function DashboardDetailPage(): ReactNode {
     setIsDetailModalOpen(true);
   };
 
+  const getSelectedTaskColumn = () => {
+    if (!selectedTask) {
+      return null;
+    }
+
+    return columns.find((col) =>
+      col.tasks.some((task) => task.id === selectedTask.id)
+    );
+  };
+
   const handleTaskEdit = (task: TaskType) => {
     setSelectedTask(task);
     setIsDetailModalOpen(false);
@@ -131,59 +100,146 @@ export default function DashboardDetailPage(): ReactNode {
   };
 
   const handleTaskUpdate = (taskData: EditTaskFormData) => {
-    // TODO: 태스크 업데이트 API 호출
+    if (!selectedTask) {
+      return;
+    }
+
+    const updatedTask: TaskType = {
+      ...selectedTask,
+      title: taskData.title,
+      description: taskData.description,
+      tags: taskData.tags,
+      dueDate: taskData.dueDate,
+      imageUrl: taskData.imageFile
+        ? URL.createObjectURL(taskData.imageFile)
+        : (taskData.existingImageUrl ?? ''),
+      manager: {
+        ...selectedTask.manager,
+        name: taskData.assignee,
+        nickname: taskData.assignee,
+      },
+    };
+
+    const currentColumn = columns.find((col) =>
+      col.tasks.some((task) => task.id === selectedTask.id)
+    );
+    const targetColumn = columns.find((col) => col.title === taskData.status);
+
+    setColumns((prevColumns) => {
+      if (
+        currentColumn &&
+        targetColumn &&
+        currentColumn.id !== targetColumn.id
+      ) {
+        return prevColumns.map((col) => {
+          if (col.id === currentColumn.id) {
+            return {
+              ...col,
+              tasks: col.tasks.filter((task) => task.id !== selectedTask.id),
+            };
+          }
+          if (col.id === targetColumn.id) {
+            return {
+              ...col,
+              tasks: [...col.tasks, updatedTask],
+            };
+          }
+
+          return col;
+        });
+      }
+
+      return prevColumns.map((col) => {
+        return {
+          ...col,
+          tasks: col.tasks.map((task) =>
+            task.id === selectedTask.id ? updatedTask : task
+          ),
+        };
+      });
+    });
+
     setIsEditTaskModalOpen(false);
+    setSelectedTask(null);
+  };
+
+  const handleAddTaskClick = (columnId: string) => {
+    setSelectedColumnId(columnId);
+    setIsCreateTaskModalOpen(true);
+  };
+
+  const handleCreateTask = (taskData: CreateTaskFormData) => {
+    if (!selectedColumnId) {
+      return;
+    }
+
+    const newTask: TaskType = {
+      id: `task_${String(Date.now())}_${Math.random().toString(36).slice(2, 11)}`,
+      title: taskData.title,
+      description: taskData.description,
+      tags: taskData.tags,
+      dueDate: taskData.dueDate,
+      imageUrl: taskData.imageFile
+        ? URL.createObjectURL(taskData.imageFile)
+        : '',
+      manager: {
+        id: 'm1',
+        name: taskData.assignee,
+        nickname: taskData.assignee,
+        profileColor: mockProfileColors[0],
+      },
+    };
+
+    setColumns((prevColumns) => {
+      return prevColumns.map((col) => {
+        return col.id === selectedColumnId
+          ? { ...col, tasks: [...col.tasks, newTask] }
+          : col;
+      });
+    });
   };
 
   return (
     <div className='min-h-screen bg-gray-50'>
-      {/* 사이드바 영역 */}
-      <aside className='fixed top-0 left-0 z-50 h-screen w-[18.75rem] border-r border-gray-200 bg-white'>
-        <div className='h-full bg-blue-100 p-4'>
-          <div className='text-sm text-gray-600'>
-            사이드바 영역 (18.75rem = 300px)
-          </div>
-        </div>
-      </aside>
-
-      {/* 메인 콘텐츠 */}
-      <div className='ml-[18.75rem]'>
-        {/* 상단 네비게이션 헤더 */}
-        <header className='flex h-[4.375rem] items-center border-b border-gray-200 bg-green-100'>
-          <div className='flex h-full items-center px-4'>
-            <span className='text-sm text-gray-600'>
-              헤더 영역 (4.375rem = 70px)
-            </span>
-          </div>
-        </header>
-
-        {/* 대시보드 메인 콘텐츠 */}
-        <main className='layout-children h-[calc(100vh-4.375rem)] bg-gray-50'>
-          <ColumnLayout
-            columns={mockColumns}
-            onAddColumnClick={handleAddColumnClick}
-            onColumnSettingsClick={handleColumnSettingsClick}
-            onTaskClick={handleTaskClick}
-            onAddTaskClick={(columnId: string) => {
-              // TODO: 태스크 생성 모달 열기
-            }}
-          />
-        </main>
-      </div>
+      {/* 대시보드 메인 콘텐츠 */}
+      <main className='h-screen bg-gray-50'>
+        <ColumnLayout
+          columns={columns}
+          maxColumns={10}
+          onAddColumnClick={handleAddColumnClick}
+          onColumnSettingsClick={handleColumnSettingsClick}
+          onTaskClick={handleTaskClick}
+          onAddTaskClick={handleAddTaskClick}
+        />
+      </main>
 
       {/* 컬럼 생성 모달 */}
       <CreateColumnModal
         isOpen={isColumnModalOpen}
+        existingColumns={columns.map((col) => col.title)}
+        maxColumns={10}
         onSubmit={handleColumnSubmit}
         onClose={() => {
           setIsColumnModalOpen(false);
         }}
       />
 
+      {/* 태스크 생성 모달 */}
+      <CreateTaskModal
+        isOpen={isCreateTaskModalOpen}
+        userInfo={userInfo}
+        onSubmit={handleCreateTask}
+        onClose={() => {
+          setIsCreateTaskModalOpen(false);
+          setSelectedColumnId(null);
+        }}
+      />
+
       {/* 컬럼 관리 모달 */}
       <ManageColumnModal
         isOpen={isManageColumnModalOpen}
         column={selectedColumn}
+        existingColumns={columns.map((col) => col.title)}
         onUpdate={handleColumnUpdate}
         onDelete={handleColumnDelete}
         onClose={() => {
@@ -195,19 +251,37 @@ export default function DashboardDetailPage(): ReactNode {
       <TaskDetailModal
         isOpen={isDetailModalOpen}
         task={selectedTask}
+        columnTitle={getSelectedTaskColumn()?.title}
+        currentUser={{
+          id: String(userInfo?.id ?? 'user-1'),
+          name: userInfo?.nickname ?? '사용자',
+          profileColor: mockProfileColors[1],
+        }}
         onEdit={handleTaskEdit}
         onClose={() => {
           setIsDetailModalOpen(false);
         }}
         onDelete={(taskId) => {
-          // TODO: 태스크 삭제 API 호출
+          setColumns((prevColumns) => {
+            return prevColumns.map((col) => {
+              return {
+                ...col,
+                tasks: col.tasks.filter((task) => task.id !== taskId),
+              };
+            });
+          });
+          setIsDetailModalOpen(false);
+          setSelectedTask(null);
         }}
       />
 
       {/* 할일 수정 모달 */}
       <EditTaskModal
         isOpen={isEditTaskModalOpen}
-        initialTask={selectedTask || undefined}
+        initialTask={selectedTask ?? undefined}
+        columns={columns.map((col) => ({ id: col.id, title: col.title }))}
+        currentColumnTitle={getSelectedTaskColumn()?.title ?? undefined}
+        userInfo={userInfo}
         onSubmit={handleTaskUpdate}
         onClose={() => {
           setIsEditTaskModalOpen(false);
@@ -216,3 +290,46 @@ export default function DashboardDetailPage(): ReactNode {
     </div>
   );
 }
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { req } = context;
+
+  const accessToken = req.cookies.access_token;
+  const isAuthenticated = Boolean(accessToken);
+
+  if (!isAuthenticated) {
+    return {
+      redirect: {
+        destination: '/login',
+        permanent: false,
+      },
+    };
+  }
+
+  let userInfo = null;
+
+  try {
+    const response = await fetch(`/api/users/me`, {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${String(accessToken)}`,
+      },
+    });
+
+    if (response.ok) {
+      userInfo = await response.json();
+    }
+  } catch {
+    // 서버에서 사용자 정보 조회 실패 시 기본값 사용
+  }
+
+  return {
+    props: {
+      userInfo,
+    },
+  };
+};
+
+DashboardDetailPage.getLayout = function getLayout(page: React.ReactElement) {
+  return <DashboardLayout>{page}</DashboardLayout>;
+};
diff --git a/src/styles/globals.css b/src/styles/globals.css
index da25932..9853ef1 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -35,7 +35,6 @@
   --color-chip-green-bg: #e7f7db;
   --color-chip-brown: #d58d49;
   --color-chip-brown-bg: #f9eee3;
-
   --color-chip-red: #d25b68;
   --color-chip-red-bg: #f4d7da;
 
diff --git a/src/utils/profile-color.ts b/src/utils/profile-color.ts
new file mode 100644
index 0000000..bfd9c91
--- /dev/null
+++ b/src/utils/profile-color.ts
@@ -0,0 +1,53 @@
+/**
+ * HEX 색상을 ChipProfile 컴포넌트의 color prop으로 변환하는 함수
+ */
+export const getProfileColor = (
+  profileColor: string
+): 'green' | 'blue' | 'orange' | 'yellow' | 'brown' | 'red' => {
+  switch (profileColor.toLowerCase()) {
+    // HEX 색상
+    case '#8b5cf6': // 보라색
+    case '#10b981': { // 초록색
+      return 'green';
+    }
+    case '#f59e0b': { // 주황색
+      return 'orange';
+    }
+    case '#ef4444': { // 빨간색
+      return 'red';
+    }
+    case '#3b82f6': { // 파란색
+      return 'blue';
+    }
+    case '#eab308': { // 노란색
+      return 'yellow';
+    }
+    case '#a16207': { // 갈색
+      return 'brown';
+    }
+
+    // 문자열 색상 (사용자 프로필에서 사용)
+    case 'green': {
+      return 'green';
+    }
+    case 'orange': {
+      return 'orange';
+    }
+    case 'red': {
+      return 'red';
+    }
+    case 'blue': {
+      return 'blue';
+    }
+    case 'yellow': {
+      return 'yellow';
+    }
+    case 'brown': {
+      return 'brown';
+    }
+
+    default: {
+      return 'green';
+    }
+  }
+};