[dashboard] dashboard modal에 dropdown, button 컴포넌트 적용, 전반적인 리팩토링

.vscode/settings.json

@@ -4,6 +4,6 @@
   "editor.formatOnSave": true,
   "eslint.format.enable": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }

middleware.ts

@@ -38,15 +38,15 @@ export function middleware(request: NextRequest): NextResponse {
   return NextResponse.next();
 }
 
-export const config = {
-  matcher: [
-    MYDASHBOARD_PATH,
-    `${MYDASHBOARD_PATH}/:path*`,
-    '/mypage',
-    '/mypage/:path*',
-    DASHBOARD_PATH,
-    `${DASHBOARD_PATH}/:path*`,
-    LOGIN_PATH,
-    '/signup',
-  ],
-};
+// export const config = {
+//   matcher: [
+//     MYDASHBOARD_PATH,
+//     `${MYDASHBOARD_PATH}/:path*`,
+//     '/mypage',
+//     '/mypage/:path*',
+//     DASHBOARD_PATH,
+//     `${DASHBOARD_PATH}/:path*`,
+//     LOGIN_PATH,
+//     '/signup',
+//   ],
+// };

src/components/dashboard/add-column-button.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import type { AddColumnButtonProps } from './type';
+import type { AddColumnButtonProps } from '@/components/dashboard/type';
 
 export default function AddColumnButton({ onClick }: AddColumnButtonProps) {
   return (

src/components/dashboard/add-task-button.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import type { AddTaskButtonProps } from './type';
+import type { AddTaskButtonProps } from '@/components/dashboard/type';
 
 export default function AddTaskButton({ onClick }: AddTaskButtonProps) {
   return (

src/components/dashboard/column-header.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import type { ColumnHeaderProps } from './type';
+import type { ColumnHeaderProps } from '@/components/dashboard/type';
 
 export default function ColumnHeader({
   column,

src/components/dashboard/column-layout.tsx

@@ -1,6 +1,6 @@
-import AddColumnButton from './add-column-button';
-import DashboardColumn from './dashboard-column';
-import type { ColumnType, TaskType } from './type';
+import AddColumnButton from '@/components/dashboard/add-column-button';
+import DashboardColumn from '@/components/dashboard/dashboard-column';
+import type { ColumnType, TaskType } from '@/components/dashboard/type';
 
 interface ColumnLayoutProps {
   columns: ColumnType[];

src/components/dashboard/column-task-card.tsx

@@ -1,11 +1,13 @@
 import Image from 'next/image';
+import type { TaskCardProps } from '@/components/dashboard/type';
 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 formatDueDate = (dueDate: string) => {
-  if (!dueDate) {return '';}
+const formatDueDate = (dueDate: string | undefined) => {
+  if (!dueDate) {
+    return '';
+  }
 
   const date = new Date(dueDate);
   const year = date.getFullYear();
@@ -14,7 +16,7 @@ const formatDueDate = (dueDate: string) => {
   const hours = String(date.getHours()).padStart(2, '0');
   const minutes = String(date.getMinutes()).padStart(2, '0');
 
-  return `${year}-${month}-${day} ${hours}:${minutes}`;
+  return `${String(year)}-${month}-${day} ${hours}:${minutes}`;
 };
 
 export default function ColumnTaskCard({ task, onEditTask }: TaskCardProps) {
@@ -25,7 +27,7 @@ export default function ColumnTaskCard({ task, onEditTask }: TaskCardProps) {
   };
 
   return (
-    <div
+    <button
       className='flex cursor-pointer flex-col gap-4 rounded-lg border border-gray-300 bg-white p-4'
       onClick={handleCardClick}
     >
@@ -45,20 +47,24 @@ export default function ColumnTaskCard({ task, onEditTask }: TaskCardProps) {
       {/* 본문 */}
       <div className='flex flex-col justify-between'>
         <div>
-          <h3 className='mb-3 line-clamp-2 text-base font-medium text-gray-900'>
+          <h3 className='mb-3 line-clamp-2 text-left text-base font-medium text-gray-900'>
             {task.title}
           </h3>
 
           {/* 태그들 */}
           <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'
-              /> }
-            )}
+            {task.tags.map((tag) => {
+              return (
+                <ChipTag
+                  key={tag.label}
+                  label={tag.label}
+                  size='md'
+                  color={
+                    tag.color as 'blue' | 'pink' | 'green' | 'brown' | 'red'
+                  }
+                />
+              );
+            })}
           </div>
 
           {/* 날짜와 담당자 */}
@@ -75,14 +81,14 @@ export default function ColumnTaskCard({ task, onEditTask }: TaskCardProps) {
 
             <div className='flex items-center'>
               <ChipProfile
-                label={String(task.manager.nickname || '').slice(0, 1)}
+                label={(task.manager.nickname || '').slice(0, 1)}
                 color={getProfileColor(task.manager.profileColor)}
                 size='sm'
               />
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </button>
   );
 }

src/components/dashboard/dashboard-column.tsx

@@ -1,7 +1,7 @@
-import AddTaskButton from './add-task-button';
-import ColumnHeader from './column-header';
-import ColumnTaskCard from './column-task-card';
-import type { ColumnType, TaskType } from './type';
+import AddTaskButton from '@/components/dashboard/add-task-button';
+import ColumnHeader from '@/components/dashboard/column-header';
+import ColumnTaskCard from '@/components/dashboard/column-task-card';
+import type { ColumnType, TaskType } from '@/components/dashboard/type';
 
 interface ColumnProps {
   column: ColumnType;
@@ -32,13 +32,15 @@ export default function DashboardColumn({
         {/* 할일 보드 - 스크롤 가능한 영역 */}
         <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}
-              /> }
-            )}
+            {column.tasks.map((task) => {
+              return (
+                <ColumnTaskCard
+                  key={task.id}
+                  task={task}
+                  onEditTask={onTaskClick}
+                />
+              );
+            })}
           </div>
         </div>
       </div>

src/components/dashboard/create-column-form.tsx → src/components/dashboard/modal/create-column-form.tsx

@@ -1,4 +1,5 @@
-import type { CreateColumnFormData } from './type';
+import type { ReactNode } from 'react';
+import type { CreateColumnFormData } from '@/components/dashboard/type';
 
 interface CreateColumnFormProps {
   formData: CreateColumnFormData;
@@ -10,7 +11,7 @@ export default function CreateColumnForm({
   formData,
   setFormData,
   hasError = false,
-}: CreateColumnFormProps): JSX.Element {
+}: CreateColumnFormProps): ReactNode {
   return (
     <>
       {/* 이름 */}

src/components/dashboard/create-column-modal.tsx → src/components/dashboard/modal/create-column-modal.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
+import CreateColumnForm from '@/components/dashboard/modal/create-column-form';
+import type { CreateColumnFormData } from '@/components/dashboard/type';
+import ButtonModal from '@/components/ui/modal/modal-button';
 import { useModalKeyHandler } from '@/hooks/useModal';
-import BaseModal from '../ui/base-modal';
-import CreateColumnForm from './create-column-form';
-import type { CreateColumnFormData } from './type';
 
 interface CreateColumnModalProps {
   isOpen: boolean;
@@ -37,30 +37,33 @@ export default function CreateColumnModal({
   const isMaxColumnsReached = existingColumns.length >= maxColumns;
 
   const handleSubmit = () => {
-    if (!isDuplicate && !isMaxColumnsReached) {
-      onSubmit(formData);
-      handleClose();
+    if (isDuplicate) {
+      return;
     }
+    if (isMaxColumnsReached) {
+      return;
+    }
+    onSubmit(formData);
+    handleClose();
   };
 
   const isSubmitDisabled =
     !formData.name.trim() || isDuplicate || isMaxColumnsReached;
+  const errorMessage = isMaxColumnsReached
+    ? `최대 ${String(maxColumns)}개까지만 생성할 수 있습니다.`
+    : isDuplicate
+      ? '중복된 컬럼 이름입니다.'
+      : undefined;
 
   return (
-    <BaseModal
+    <ButtonModal
       isOpen={isOpen}
       title='새 컬럼 생성'
       submitText='생성'
       cancelText='취소'
       isSubmitDisabled={isSubmitDisabled}
       width='w-[32rem]'
-      errorMessage={
-        isMaxColumnsReached
-          ? `최대 ${maxColumns}개까지만 생성할 수 있습니다.`
-          : isDuplicate
-            ? '중복된 컬럼 이름입니다.'
-            : undefined
-      }
+      errorMessage={errorMessage}
       onClose={handleClose}
       onSubmit={handleSubmit}
     >
@@ -69,6 +72,6 @@ export default function CreateColumnModal({
         setFormData={setFormData}
         hasError={isDuplicate}
       />
-    </BaseModal>
+    </ButtonModal>
   );
 }