[feat] add task modal features and api integration

src/app/(with-header-sidebar)/dashboard/[id]/components/Column.tsx

@@ -60,7 +60,7 @@ function Column({
   }, [items]);
 
   const handleCreateTask = () => {
-    openModal(<CreateTaskModal />);
+    openModal(<CreateTaskModal columnId={id} />);
   };
 
   return (

src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.module.css

@@ -12,6 +12,31 @@
   color: var(--black-100);
 }
 
+.image.image {
+  width: 76px;
+  height: 76px;
+}
+
+.input input {
+  width: 295px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  padding: 13px 16px;
+}
+
+.input textarea {
+  width: 295px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  padding: 15px 16px;
+}
+
+.input label {
+  font-weight: 500;
+}
+
 .footer {
   display: flex;
   align-items: center;
@@ -37,6 +62,24 @@
     padding: 32px;
   }
 
+  .input input {
+    width: 520px;
+    font-size: 16px;
+    line-height: 26px;
+    padding: 12px 16px;
+  }
+
+  .input textarea {
+    width: 520px;
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  .input label {
+    font-size: 18px;
+    line-height: 26px;
+  }
+
   .footer {
     font-size: 16px;
     line-height: 26px;

src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx

@@ -2,43 +2,83 @@ import useModalStore from '@/store/modalStore';
 import { useForm } from 'react-hook-form';
 import Button from '@/components/Button';
 import Input from '@/components/Input';
-import styles from './CreateTaskModal.module.css';
 import SearchDropdown from './SearchDropdown';
 import DatePicker from './DatePicker';
+import Textarea from '@/components/Textarea';
+import FileInput from '@/components/FileInput';
+import TagsInput from '@/components/TagsInput';
+import useMember from '../edit/_hooks/useMember';
+import useDashboardStore from '@/store/dashboardStore';
+import { ERROR_MESSAGES } from '@/constants/message';
+import { createCard } from '@/lib/cardService';
+import styles from './CreateTaskModal.module.css';
 
-export interface ManagerOption {
-  id: number;
-  name: string;
+export interface TaskFormValues {
+  assigneeUserId: number;
+  image: File | null;
+  title: string;
+  description: string;
+  dueDate: string;
+  tags: string[];
 }
 
-export default function CreateTaskModal() {
+export default function CreateTaskModal({ columnId }: { columnId: number }) {
   const { closeModal } = useModalStore();
   const {
     register,
     handleSubmit,
     formState: { errors, isValid },
-  } = useForm<{ email: string }>({ mode: 'onChange' });
-
-  const onSubmit = () => {
-    // closeModal();
-  };
-
-  const options = [
-    { id: 1, name: '김김김' },
-    { id: 2, name: '이이이' },
-    { id: 3, name: '최최최' },
-  ];
+    setValue,
+  } = useForm<TaskFormValues>({ mode: 'onChange' });
+  const dashboard = useDashboardStore((state) => state.dashboard);
+  const { members } = useMember(dashboard?.id.toString() || null, 10);
 
-  const handleSelect = (selected: ManagerOption) => {
-    console.log('선택된 담당자:', selected);
+  const onSubmit = async (data: TaskFormValues) => {
+    if (dashboard) {
+      const response = await createCard(data, columnId, dashboard.id);
+      closeModal();
+    }
   };
 
   return (
     <form className={styles.modal} onSubmit={handleSubmit(onSubmit)}>
       <h2>할일 생성</h2>
-      <SearchDropdown options={options} onSelect={handleSelect} />
-      <Input name="title" label="제목" placeholder="제목을 입력해주세요" />
-      <DatePicker />
+      <SearchDropdown
+        name="assigneeUserId"
+        options={members}
+        setValue={setValue}
+      />
+      <Input
+        name="title"
+        label="제목"
+        placeholder="제목을 입력해주세요"
+        className={styles.input}
+        register={register('title', {
+          required: ERROR_MESSAGES.TITLE_REQUIRE,
+        })}
+        error={errors.title}
+        required={true}
+      />
+      <Textarea
+        name="description"
+        label="설명"
+        placeholder="설명을 입력해주세요"
+        className={styles.input}
+        register={register('description', {
+          required: ERROR_MESSAGES.DESCRIPTION_REQUIRE,
+        })}
+        error={errors.description}
+        required={true}
+      />
+      <DatePicker name="dueDate" setValue={setValue} />
+      <TagsInput name="tags" setValue={setValue} />
+      <FileInput
+        id="image"
+        name="image"
+        label="이미지"
+        setValue={setValue}
+        className={styles.image}
+      />
       <div className={styles.footer}>
         <Button onClick={closeModal} className={styles.cancel}>
           취소

src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 8px;
   position: relative;
-  width: 287px;
+  width: 295px;
 }
 
 .label {
@@ -24,7 +24,8 @@
   font-size: 14px;
   font-weight: 400;
   line-height: 24px;
-  padding: 11px 14px;
+  padding: 12px 0 12px 46px;
+  color: var(--black-100);
   cursor: pointer;
 }
 
@@ -36,11 +37,24 @@
   color: var(--gray-400);
 }
 
+.icon {
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  transform: translateY(-50%);
+}
+
+.icon path {
+  fill: var(--black-100);
+}
+
 .calendarWrapper {
+  display: flex;
   position: absolute;
-  top: 50px;
+  top: calc(100% + 4px);
   left: 0;
-  width: 100%;
+  width: auto;
+  max-height: 250px;
   background: var(--white);
   border: 1px solid var(--gray-200);
   border-radius: 4px;
@@ -53,21 +67,23 @@
   justify-content: space-between;
   align-items: center;
   padding: 10px;
-  background: var(--gray-200);
+  background: var(--violet-light);
   border-bottom: 1px solid var(--gray-200);
+  color: var(--black-100);
+  font-weight: 500;
 }
 
 .daysOfWeek {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  background: var(--gray-300);
   text-align: center;
-  padding: 5px 0;
+  padding: 7px 0;
 }
 
 .day {
-  font-weight: bold;
-  color: var(--black-100);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--violet);
 }
 
 .days {
@@ -77,11 +93,13 @@
 }
 
 .dayButton {
-  padding: 10px;
+  font-size: 14px;
+  padding: 7px;
 }
 
-.dayButton:hover {
+.dayButton:hover:not(.selected):not(:disabled) {
   background: var(--violet-light);
+  color: var(--violet);
 }
 
 .dayButton.selected {
@@ -91,19 +109,60 @@
 }
 
 .dayButton:disabled {
-  cursor: default;
+  color: var(--gray-300);
+  cursor: not-allowed;
 }
 
 .timePicker {
-  padding: 10px;
   border-top: 1px solid var(--gray-200);
 }
 
+.timePicker h4 {
+  background-color: var(--violet-light);
+  text-align: center;
+  padding: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--black-100);
+}
+
 .timeSelect {
   width: 100%;
-  padding: 8px;
+  max-height: 210px;
   border: 1px solid var(--gray-200);
   border-radius: 4px;
+  overflow-y: scroll;
+}
+
+.timeSelect::-webkit-scrollbar {
+  width: 4px;
+}
+
+.timeSelect::-webkit-scrollbar-thumb {
+  background: var(--purple);
+  border-radius: 5px;
+}
+
+.timeList {
+  font-size: 14px;
+  padding: 7px;
+  cursor: pointer;
+}
+
+.timeList:hover:not(.disabled):not(.selected) {
+  background-color: var(--violet-light);
+  color: var(--violet);
+}
+
+.timeList.selected {
+  background: var(--violet);
+  color: var(--white);
+}
+
+.timeList.disabled {
+  color: var(--gray-300);
+  cursor: not-allowed;
 }
 
 .image {
@@ -119,4 +178,29 @@
     font-size: 18px;
     line-height: 26px;
   }
+
+  .input {
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  .calendarWrapper {
+    max-height: 295px;
+  }
+
+  .daysOfWeek {
+    padding: 10px 0;
+  }
+
+  .dayButton {
+    padding: 10px;
+  }
+
+  .timeSelect {
+    max-height: 255px;
+  }
+
+  .timeList {
+    padding: 10px;
+  }
 }