From a1634ccacc3ed5a6c8f8c94f8fdc2c5afdf1d819 Mon Sep 17 00:00:00 2001
From: najitwo <jitwona99@gmail.com>
Date: Wed, 27 Nov 2024 02:07:20 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=92=84=20style:=20improve=20DatePicke?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/components/DatePicker.module.css     |  99 ++++++++++++--
 .../dashboard/[id]/components/DatePicker.tsx  | 121 ++++++++++++------
 src/utils/dateUtils.ts                        |  12 ++
 3 files changed, 185 insertions(+), 47 deletions(-)

diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css
index a6ebc9d..2ea004b 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css
@@ -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,20 +67,20 @@
   justify-content: space-between;
   align-items: center;
   padding: 10px;
-  background: var(--gray-200);
+  background: var(--violet-light);
   border-bottom: 1px solid var(--gray-200);
 }
 
 .daysOfWeek {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  background: var(--gray-300);
+  background: var(--violet-light);
   text-align: center;
   padding: 5px 0;
 }
 
 .day {
-  font-weight: bold;
+  font-weight: 800;
   color: var(--black-100);
 }
 
@@ -77,11 +91,13 @@
 }
 
 .dayButton {
-  padding: 10px;
+  font-size: 14px;
+  padding: 7px;
 }
 
-.dayButton:hover {
+.dayButton:hover:not(.disabled):not(.selected) {
   background: var(--violet-light);
+  color: var(--violet);
 }
 
 .dayButton.selected {
@@ -91,19 +107,59 @@
 }
 
 .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;
+}
+
 .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 +175,25 @@
     font-size: 18px;
     line-height: 26px;
   }
+
+  .input {
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  .calendarWrapper {
+    max-height: 290px;
+  }
+
+  .dayButton {
+    padding: 10px;
+  }
+
+  .timeSelect {
+    max-height: 250px;
+  }
+
+  .timeList {
+    padding: 10px;
+  }
 }
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx
index e6fd4f6..b990ef8 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx
@@ -1,14 +1,18 @@
 'use client';
 
-import React, { useState, ChangeEvent } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import Image from 'next/image';
+import { formatDateFormat } from '@/utils/dateUtils';
+import CalendarIcon from '/public/icons/calendar.svg';
 import styles from './DatePicker.module.css';
 
-const DatePicker = () => {
+export default function DatePicker() {
   const [selectedDate, setSelectedDate] = useState<string>('');
   const [selectedTime, setSelectedTime] = useState<string>('');
+
   const [isCalendarVisible, setIsCalendarVisible] = useState(false);
   const [currentMonth, setCurrentMonth] = useState(new Date());
+  const datePickerRef = useRef<HTMLDivElement | null>(null);
 
   const daysOfWeek = ['일', '월', '화', '수', '목', '금', '토'];
 
@@ -28,10 +32,6 @@ const DatePicker = () => {
     return days;
   };
 
-  const handleDateClick = (date: Date) => {
-    setSelectedDate(date.toISOString().split('T')[0]);
-  };
-
   const handleMonthChange = (direction: 'prev' | 'next') => {
     setCurrentMonth(
       (prev) =>
@@ -43,24 +43,54 @@ const DatePicker = () => {
     );
   };
 
-  const handleTimeChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    setSelectedTime(event.target.value);
+  const handleDateClick = (date: Date) => {
+    setSelectedDate(formatDateFormat(date));
+    setSelectedTime('23:30');
+  };
+
+  const handleTimeClick = (date: string) => {
+    setSelectedTime(date);
+    setIsCalendarVisible(false);
   };
 
-  const daysInMonth = getDaysInMonth(currentMonth);
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (
+        datePickerRef.current &&
+        !datePickerRef.current.contains(event.target as Node)
+      ) {
+        setIsCalendarVisible(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, []);
+
+  const daysInMonth = useMemo(
+    () => getDaysInMonth(currentMonth),
+    [currentMonth]
+  );
 
   return (
     <div className={styles.container}>
       <label className={styles.label}>마감일</label>
-      <div className={styles.inputWrapper}>
+      <div className={styles.inputWrapper} ref={datePickerRef}>
         <input
           type="text"
           className={styles.input}
-          value={`${selectedDate} ${selectedTime}`}
+          value={
+            selectedDate || selectedTime
+              ? `${selectedDate} ${selectedTime}`
+              : ''
+          }
           placeholder="날짜를 입력해주세요"
           readOnly
           onClick={() => setIsCalendarVisible((prev) => !prev)}
         />
+        <CalendarIcon className={styles.icon} />
         {isCalendarVisible && (
           <div className={styles.calendarWrapper}>
             <div className={styles.calendar}>
@@ -95,45 +125,64 @@ const DatePicker = () => {
                 ))}
               </div>
               <div className={styles.days}>
-                {daysInMonth.map((date, index) => (
-                  <button
-                    key={index}
-                    className={`${styles.dayButton} ${
-                      date &&
-                      selectedDate === date.toISOString().split('T')[0] &&
-                      styles.selected
-                    }`}
-                    onClick={() => date && handleDateClick(date)}
-                    disabled={!date}
-                  >
-                    {date?.getDate() || ''}
-                  </button>
-                ))}
+                {daysInMonth.map((date, index) => {
+                  const now = new Date();
+                  const todayStart = new Date(now.setHours(0, 0, 0, 0));
+                  const isToday = date?.getTime() === todayStart.getTime();
+                  const isPastDate =
+                    (date?.getTime() ?? Infinity) < todayStart.getTime() ||
+                    (isToday && now.getHours() >= 23 && now.getMinutes() >= 30);
+
+                  return (
+                    <button
+                      key={index}
+                      className={`${styles.dayButton} ${
+                        date &&
+                        selectedDate === formatDateFormat(date) &&
+                        styles.selected
+                      } ${isPastDate && styles.disabled}`}
+                      onClick={() => date && handleDateClick(date)}
+                      disabled={!date || isPastDate}
+                    >
+                      {date?.getDate() || ''}
+                    </button>
+                  );
+                })}
               </div>
             </div>
             <div className={styles.timePicker}>
-              <select
-                className={styles.timeSelect}
-                value={selectedTime}
-                onChange={handleTimeChange}
-              >
+              <h4>시간</h4>
+              <ul className={styles.timeSelect}>
                 {Array.from({ length: 24 }, (_, hour) =>
                   ['00', '30'].map((minute) => {
+                    const now = new Date();
                     const time = `${hour.toString().padStart(2, '0')}:${minute}`;
+                    const [hourInt, minuteInt] = time.split(':').map(Number);
+                    const timeDate = new Date(
+                      selectedDate || now.toISOString().split('T')[0]
+                    );
+                    timeDate.setHours(hourInt, minuteInt, 0, 0);
+                    const isPastTime = timeDate.getTime() < now.getTime();
+
                     return (
-                      <option key={time} value={time}>
+                      <li
+                        key={time}
+                        onClick={() => !isPastTime && handleTimeClick(time)}
+                        className={`${styles.timeList} ${
+                          selectedTime === time ? styles.selected : ''
+                        } ${isPastTime && styles.disabled}`}
+                        tabIndex={0}
+                      >
                         {time}
-                      </option>
+                      </li>
                     );
                   })
                 )}
-              </select>
+              </ul>
             </div>
           </div>
         )}
       </div>
     </div>
   );
-};
-
-export default DatePicker;
+}
diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts
index 4d32f1b..3307db1 100644
--- a/src/utils/dateUtils.ts
+++ b/src/utils/dateUtils.ts
@@ -11,3 +11,15 @@ export function formatDateToCustomFormat(targetDate: string): string {
 
   return `${year}.${month}.${day} ${hours}:${minutes}`;
 }
+
+export function formatDateFormat(targetDate: string | Date): string {
+  if (!targetDate) return '';
+
+  const date = new Date(targetDate);
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  return `${year}. ${month}. ${day}`;
+}

From ea078256a6bb388c982ffcf4cceee59753d547ba Mon Sep 17 00:00:00 2001
From: najitwo <jitwona99@gmail.com>
Date: Wed, 27 Nov 2024 03:10:12 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20FileInput=20to=20?=
 =?UTF-8?q?task=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CreateTaskModal.module.css     |  5 +++++
 .../[id]/components/CreateTaskModal.tsx       | 20 +++++++++++++++++-
 .../mypage/_components/Label.module.css       | 13 ------------
 .../mypage/_components/Label.tsx              | 15 -------------
 .../mypage/_components/ProfileForm.tsx        |  2 +-
 .../FileInput.module.css                      | 21 ++++++++++++++++---
 .../_components => components}/FileInput.tsx  | 20 ++++++++++++++----
 .../Textarea.module.css}                      |  0
 .../Input.tsx => components/Textarea.tsx}     | 16 +++++++-------
 9 files changed, 66 insertions(+), 46 deletions(-)
 delete mode 100644 src/app/(with-header-sidebar)/mypage/_components/Label.module.css
 delete mode 100644 src/app/(with-header-sidebar)/mypage/_components/Label.tsx
 rename src/{app/(with-header-sidebar)/mypage/_components => components}/FileInput.module.css (70%)
 rename src/{app/(with-header-sidebar)/mypage/_components => components}/FileInput.tsx (76%)
 rename src/{app/(with-header-sidebar)/mypage/_components/Input.module.css => components/Textarea.module.css} (100%)
 rename src/{app/(with-header-sidebar)/mypage/_components/Input.tsx => components/Textarea.tsx} (83%)

diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.module.css b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.module.css
index 757a334..723e81a 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.module.css
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.module.css
@@ -12,6 +12,11 @@
   color: var(--black-100);
 }
 
+.image.image {
+  width: 76px;
+  height: 76px;
+}
+
 .footer {
   display: flex;
   align-items: center;
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
index 102689d..600a1f3 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
@@ -5,19 +5,28 @@ 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';
 
 export interface ManagerOption {
   id: number;
   name: string;
 }
 
+export interface TaskFormValues {
+  image: File | null;
+  title: string;
+  description: string;
+}
+
 export default function CreateTaskModal() {
   const { closeModal } = useModalStore();
   const {
     register,
     handleSubmit,
     formState: { errors, isValid },
-  } = useForm<{ email: string }>({ mode: 'onChange' });
+    setValue,
+  } = useForm<TaskFormValues>({ mode: 'onChange' });
 
   const onSubmit = () => {
     // closeModal();
@@ -38,7 +47,16 @@ export default function CreateTaskModal() {
       <h2>할일 생성</h2>
       <SearchDropdown options={options} onSelect={handleSelect} />
       <Input name="title" label="제목" placeholder="제목을 입력해주세요" />
+      <Textarea name="description" label="내용" />
+
       <DatePicker />
+      <FileInput
+        id="image"
+        name="image"
+        label="이미지"
+        setValue={setValue}
+        className={styles.image}
+      />
       <div className={styles.footer}>
         <Button onClick={closeModal} className={styles.cancel}>
           취소
diff --git a/src/app/(with-header-sidebar)/mypage/_components/Label.module.css b/src/app/(with-header-sidebar)/mypage/_components/Label.module.css
deleted file mode 100644
index d8a06fa..0000000
--- a/src/app/(with-header-sidebar)/mypage/_components/Label.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.label {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  color: var(--black-100);
-}
-
-@media screen and (min-width: 768px) {
-  .label {
-    font-size: 16px;
-    line-height: 26px;
-  }
-}
diff --git a/src/app/(with-header-sidebar)/mypage/_components/Label.tsx b/src/app/(with-header-sidebar)/mypage/_components/Label.tsx
deleted file mode 100644
index 95065af..0000000
--- a/src/app/(with-header-sidebar)/mypage/_components/Label.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-import styles from './Label.module.css';
-
-interface LabelProps {
-  htmlFor: string;
-  children?: ReactNode;
-}
-
-export default function Label({ htmlFor, children }: LabelProps) {
-  return (
-    <label className={styles.label} htmlFor={htmlFor}>
-      {children}
-    </label>
-  );
-}
diff --git a/src/app/(with-header-sidebar)/mypage/_components/ProfileForm.tsx b/src/app/(with-header-sidebar)/mypage/_components/ProfileForm.tsx
index 09096d4..1fc517f 100644
--- a/src/app/(with-header-sidebar)/mypage/_components/ProfileForm.tsx
+++ b/src/app/(with-header-sidebar)/mypage/_components/ProfileForm.tsx
@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import useAuth from '../_hooks/useAuth';
-import FileInput from './FileInput';
+import FileInput from '@/components/FileInput';
 import Input from '@/components/Input';
 import Button from '@/components/Button';
 import { updateProfile } from '../_lib/userService';
diff --git a/src/app/(with-header-sidebar)/mypage/_components/FileInput.module.css b/src/components/FileInput.module.css
similarity index 70%
rename from src/app/(with-header-sidebar)/mypage/_components/FileInput.module.css
rename to src/components/FileInput.module.css
index 767db80..a2d2f19 100644
--- a/src/app/(with-header-sidebar)/mypage/_components/FileInput.module.css
+++ b/src/components/FileInput.module.css
@@ -1,4 +1,13 @@
 .label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--black-100);
+  margin-bottom: 5px;
+}
+
+.wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -10,7 +19,7 @@
   position: relative;
 }
 
-.iconContainer {
+.iconContainer.iconContainer {
   position: relative;
   width: 20px;
   height: 20px;
@@ -29,12 +38,12 @@
   transition: opacity 0.3s ease-in-out;
 }
 
-.label:hover .image {
+.wrapper:hover .image {
   filter: brightness(50%);
   transition: filter 0.3s ease-in-out;
 }
 
-.label:hover .hoverContent {
+.wrapper:hover .hoverContent {
   opacity: 1;
   transition: opacity 0.3s ease-in-out;
   z-index: 1;
@@ -42,9 +51,15 @@
 
 @media screen and (min-width: 768px) {
   .label {
+    font-size: 18px;
+    line-height: 26px;
+  }
+
+  .wrapper {
     width: 182px;
     height: 182px;
   }
+
   .imageContainer {
     width: 30px;
     height: 30px;
diff --git a/src/app/(with-header-sidebar)/mypage/_components/FileInput.tsx b/src/components/FileInput.tsx
similarity index 76%
rename from src/app/(with-header-sidebar)/mypage/_components/FileInput.tsx
rename to src/components/FileInput.tsx
index 9bd3793..01ae52d 100644
--- a/src/app/(with-header-sidebar)/mypage/_components/FileInput.tsx
+++ b/src/components/FileInput.tsx
@@ -10,14 +10,25 @@ interface FileInputProps {
   name: 'image';
   setValue: (name: 'image', value: File | null) => void;
   url?: string | null;
+  className?: string;
+  label?: string;
 }
 
-export default function FileInput({ name, setValue, url, id }: FileInputProps) {
+export default function FileInput({
+  name,
+  setValue,
+  url,
+  id,
+  className,
+  label,
+}: FileInputProps) {
   const [preview, setPreview] = useState<string | null>(null);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
+      const allowedTypes = ['image/png', 'image/jpeg'];
+      if (!allowedTypes.includes(file.type)) return;
       setPreview(URL.createObjectURL(file));
       setValue(name, file);
     }
@@ -30,8 +41,9 @@ export default function FileInput({ name, setValue, url, id }: FileInputProps) {
   }, [url]);
 
   return (
-    <>
-      <label className={styles.label} htmlFor={id}>
+    <div>
+      {label && <span className={styles.label}>{label}</span>}
+      <label className={`${styles.wrapper} ${className}`} htmlFor={id}>
         {preview ? (
           <>
             <Image src={preview} alt="미리보기" fill className={styles.image} />
@@ -57,6 +69,6 @@ export default function FileInput({ name, setValue, url, id }: FileInputProps) {
         accept="image/png, image/jpeg"
         onChange={handleChange}
       />
-    </>
+    </div>
   );
 }
diff --git a/src/app/(with-header-sidebar)/mypage/_components/Input.module.css b/src/components/Textarea.module.css
similarity index 100%
rename from src/app/(with-header-sidebar)/mypage/_components/Input.module.css
rename to src/components/Textarea.module.css
diff --git a/src/app/(with-header-sidebar)/mypage/_components/Input.tsx b/src/components/Textarea.tsx
similarity index 83%
rename from src/app/(with-header-sidebar)/mypage/_components/Input.tsx
rename to src/components/Textarea.tsx
index 7730077..5701b87 100644
--- a/src/app/(with-header-sidebar)/mypage/_components/Input.tsx
+++ b/src/components/Textarea.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
 import Label from './Label';
-import styles from './Input.module.css';
+import styles from './Textarea.module.css';
+import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
 
-interface InputProps {
-  type: string;
+interface TextareaProps {
+  type?: string;
   name: string;
   className?: string;
   label?: string;
@@ -17,8 +17,7 @@ interface InputProps {
   readOnly?: boolean;
 }
 
-export default function Input({
-  type,
+export default function Textarea({
   name,
   className = '',
   label = '',
@@ -27,14 +26,13 @@ export default function Input({
   register,
   error,
   readOnly = false,
-}: InputProps) {
+}: TextareaProps) {
   return (
     <div className={`${styles.container} ${className}`}>
       <Label htmlFor={name}>{label}</Label>
       <div className={styles.inputWrapper}>
-        <input
+        <textarea
           className={`${styles.input} ${error ? styles.errorFocus : ''}`}
-          type={type}
           placeholder={placeholder}
           readOnly={readOnly}
           {...register}

From 70ae09149d6a571239b2133dd543c16fc09c06e9 Mon Sep 17 00:00:00 2001
From: najitwo <jitwona99@gmail.com>
Date: Wed, 27 Nov 2024 05:13:10 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20feat:=20integrate=20member=20fe?=
 =?UTF-8?q?tch=20API=20in=20SearchDropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/components/CreateTaskModal.tsx       | 36 ++++++++--------
 .../[id]/components/DatePicker.module.css     | 21 ++++++----
 .../dashboard/[id]/components/DatePicker.tsx  | 15 +++++--
 .../[id]/components/SearchDropdown.tsx        | 42 ++++++++++---------
 .../dashboard/[id]/edit/_hooks/useMember.ts   |  3 +-
 .../dashboard/[id]/edit/_lib/memberService.ts |  7 ++--
 src/components/TagsInput.module.css           | 19 +++++++++
 src/components/TagsInput.tsx                  | 17 ++++++++
 8 files changed, 106 insertions(+), 54 deletions(-)
 create mode 100644 src/components/TagsInput.module.css
 create mode 100644 src/components/TagsInput.tsx

diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
index 600a1f3..67d2a94 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
@@ -7,16 +7,17 @@ import SearchDropdown from './SearchDropdown';
 import DatePicker from './DatePicker';
 import Textarea from '@/components/Textarea';
 import FileInput from '@/components/FileInput';
-
-export interface ManagerOption {
-  id: number;
-  name: string;
-}
+import TagsInput from '@/components/TagsInput';
+import useMember from '../edit/_hooks/useMember';
+import useDashboardStore from '@/store/dashboardStore';
 
 export interface TaskFormValues {
+  assigneeUserId: number;
   image: File | null;
   title: string;
   description: string;
+  dueDate: string;
+  tags: string[];
 }
 
 export default function CreateTaskModal() {
@@ -27,29 +28,26 @@ export default function CreateTaskModal() {
     formState: { errors, isValid },
     setValue,
   } = useForm<TaskFormValues>({ mode: 'onChange' });
+  const dashboard = useDashboardStore((state) => state.dashboard);
+  const { members } = useMember(dashboard?.id.toString() || null, 10);
 
-  const onSubmit = () => {
+  const onSubmit = (data: TaskFormValues) => {
+    console.log(data);
     // closeModal();
   };
 
-  const options = [
-    { id: 1, name: '김김김' },
-    { id: 2, name: '이이이' },
-    { id: 3, name: '최최최' },
-  ];
-
-  const handleSelect = (selected: ManagerOption) => {
-    console.log('선택된 담당자:', selected);
-  };
-
   return (
     <form className={styles.modal} onSubmit={handleSubmit(onSubmit)}>
       <h2>할일 생성</h2>
-      <SearchDropdown options={options} onSelect={handleSelect} />
+      <SearchDropdown
+        name="assigneeUserId"
+        options={members}
+        setValue={setValue}
+      />
       <Input name="title" label="제목" placeholder="제목을 입력해주세요" />
       <Textarea name="description" label="내용" />
-
-      <DatePicker />
+      <DatePicker name="dueDate" setValue={setValue} />
+      <TagsInput name="tags" setValue={setValue} />
       <FileInput
         id="image"
         name="image"
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css
index 2ea004b..e0e6364 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css
@@ -69,19 +69,21 @@
   padding: 10px;
   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(--violet-light);
   text-align: center;
-  padding: 5px 0;
+  padding: 7px 0;
 }
 
 .day {
-  font-weight: 800;
-  color: var(--black-100);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--violet);
 }
 
 .days {
@@ -95,7 +97,7 @@
   padding: 7px;
 }
 
-.dayButton:hover:not(.disabled):not(.selected) {
+.dayButton:hover:not(.selected):not(:disabled) {
   background: var(--violet-light);
   color: var(--violet);
 }
@@ -122,6 +124,7 @@
   font-size: 16px;
   font-weight: 500;
   line-height: 18px;
+  color: var(--black-100);
 }
 
 .timeSelect {
@@ -182,7 +185,11 @@
   }
 
   .calendarWrapper {
-    max-height: 290px;
+    max-height: 295px;
+  }
+
+  .daysOfWeek {
+    padding: 10px 0;
   }
 
   .dayButton {
@@ -190,7 +197,7 @@
   }
 
   .timeSelect {
-    max-height: 250px;
+    max-height: 255px;
   }
 
   .timeList {
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx
index b990ef8..a3d6920 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx
@@ -6,7 +6,12 @@ import { formatDateFormat } from '@/utils/dateUtils';
 import CalendarIcon from '/public/icons/calendar.svg';
 import styles from './DatePicker.module.css';
 
-export default function DatePicker() {
+interface DatePickerProps {
+  name: 'dueDate';
+  setValue: (name: 'dueDate', value: string) => void;
+}
+
+export default function DatePicker({ name, setValue }: DatePickerProps) {
   const [selectedDate, setSelectedDate] = useState<string>('');
   const [selectedTime, setSelectedTime] = useState<string>('');
 
@@ -46,10 +51,12 @@ export default function DatePicker() {
   const handleDateClick = (date: Date) => {
     setSelectedDate(formatDateFormat(date));
     setSelectedTime('23:30');
+    setValue(name, `${formatDateFormat(date)} 23:30`);
   };
 
   const handleTimeClick = (date: string) => {
     setSelectedTime(date);
+    setValue(name, `${selectedDate} ${date}`);
     setIsCalendarVisible(false);
   };
 
@@ -79,6 +86,7 @@ export default function DatePicker() {
       <label className={styles.label}>마감일</label>
       <div className={styles.inputWrapper} ref={datePickerRef}>
         <input
+          name={name}
           type="text"
           className={styles.input}
           value={
@@ -95,7 +103,7 @@ export default function DatePicker() {
           <div className={styles.calendarWrapper}>
             <div className={styles.calendar}>
               <div className={styles.calendarHeader}>
-                <button onClick={() => handleMonthChange('prev')}>
+                <button type="button" onClick={() => handleMonthChange('prev')}>
                   <Image
                     src="/icons/arrow_left.svg"
                     width={16}
@@ -107,7 +115,7 @@ export default function DatePicker() {
                 <span>
                   {currentMonth.getFullYear()}년 {currentMonth.getMonth() + 1}월
                 </span>
-                <button onClick={() => handleMonthChange('next')}>
+                <button type="button" onClick={() => handleMonthChange('next')}>
                   <Image
                     src="/icons/arrow_right.svg"
                     width={16}
@@ -136,6 +144,7 @@ export default function DatePicker() {
                   return (
                     <button
                       key={index}
+                      type="button"
                       className={`${styles.dayButton} ${
                         date &&
                         selectedDate === formatDateFormat(date) &&
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx
index 79aa1f0..c263c5d 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx
@@ -1,40 +1,40 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
-import styles from './SearchDropdown.module.css';
 import Image from 'next/image';
-import { ManagerOption } from './CreateTaskModal';
-import CheckIcon from '/public/icons/done.svg';
 import Avatar from '@/components/Avatar';
+import { Member } from '@/types/member';
+import styles from './SearchDropdown.module.css';
+import CheckIcon from '/public/icons/done.svg';
 
 interface SearchDropdownProps {
-  options: ManagerOption[];
+  options: Member[];
+  name: 'assigneeUserId';
+  setValue: (name: 'assigneeUserId', value: number) => void;
   placeholder?: string;
-  onSelect: (selected: ManagerOption) => void;
 }
 
 export default function SearchDropdown({
   options,
+  name,
+  setValue,
   placeholder = '이름을 입력해 주세요',
-  onSelect,
 }: SearchDropdownProps) {
   const [query, setQuery] = useState('');
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState(-1);
-  const [selectedOption, setSelectedOption] = useState<ManagerOption | null>(
-    null
-  );
+  const [selectedOption, setSelectedOption] = useState<Member | null>(null);
   const dropdownRef = useRef<HTMLUListElement | null>(null);
 
   const filteredOptions = options.filter((option) =>
-    option.name.toLowerCase().includes(query.toLowerCase())
+    option.nickname.toLowerCase().includes(query.toLowerCase())
   );
 
-  const handleSelect = (option: ManagerOption) => {
-    setQuery(option.name);
+  const handleSelect = (option: Member) => {
+    setQuery(option.nickname);
     setSelectedOption(option);
     setIsDropdownVisible(false);
-    onSelect(option);
+    setValue(name, option.id);
     setFocusedIndex(-1);
   };
 
@@ -84,7 +84,7 @@ export default function SearchDropdown({
     if (!dropdownRef.current?.contains(e.relatedTarget as Node)) {
       setIsDropdownVisible(false);
       setFocusedIndex(-1);
-      setQuery(selectedOption?.name || '');
+      setQuery(selectedOption?.nickname || '');
     }
   };
 
@@ -101,7 +101,7 @@ export default function SearchDropdown({
     option,
     index,
   }: {
-    option: ManagerOption;
+    option: Member;
     index: number;
   }) => {
     const isSelected = selectedOption?.id === option.id;
@@ -117,8 +117,8 @@ export default function SearchDropdown({
         aria-selected={isSelected}
       >
         {isSelected && <CheckIcon className={styles.check} />}
-        <Avatar name={option.name} className={styles.avatar} />
-        {option.name}
+        <Avatar name={option.nickname} className={styles.avatar} />
+        {option.nickname}
       </li>
     );
   };
@@ -132,8 +132,9 @@ export default function SearchDropdown({
       <label className={styles.label}>담당자</label>
       <div className={styles.inputWrapper}>
         <input
+          name={name}
           type="text"
-          className={`${styles.input} ${selectedOption?.name === query ? styles.withAvatar : ''}`}
+          className={`${styles.input} ${selectedOption?.nickname === query ? styles.withAvatar : ''}`}
           placeholder={placeholder}
           value={query}
           onChange={(e) => {
@@ -141,10 +142,11 @@ export default function SearchDropdown({
             setIsDropdownVisible(true);
           }}
           onFocus={() => setIsDropdownVisible(true)}
+          autoComplete="off"
         />
-        {selectedOption?.name === query && (
+        {selectedOption?.nickname === query && (
           <div className={styles.avatarContainer}>
-            <Avatar name={selectedOption.name} className={styles.avatar} />
+            <Avatar name={selectedOption.nickname} className={styles.avatar} />
           </div>
         )}
         <Image
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/edit/_hooks/useMember.ts b/src/app/(with-header-sidebar)/dashboard/[id]/edit/_hooks/useMember.ts
index a06fbd3..2180867 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/edit/_hooks/useMember.ts
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/edit/_hooks/useMember.ts
@@ -31,7 +31,8 @@ const useMember = (dashboardId: string | null, pageSize = 4) => {
       try {
         const response: GetMembersResponse | undefined = await getMembersAsync(
           dashboardId,
-          page
+          page,
+          pageSize
         );
 
         const members = response?.members ?? [];
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/edit/_lib/memberService.ts b/src/app/(with-header-sidebar)/dashboard/[id]/edit/_lib/memberService.ts
index 7878b63..b6b685c 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/edit/_lib/memberService.ts
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/edit/_lib/memberService.ts
@@ -1,15 +1,14 @@
 import axiosInstance from '@/lib/axiosInstance';
 import { GetMembersResponse } from '@/types/member';
 
-const PAGE_SIZE = 4;
-
 export const getMembers = async (
   dashboardId: string,
-  page: number = 1
+  page: number = 1,
+  pageSize: number = 4
 ): Promise<GetMembersResponse> => {
   try {
     const response = await axiosInstance.get(
-      `members?page=${page}&size=${PAGE_SIZE}&dashboardId=${dashboardId}`
+      `members?page=${page}&size=${pageSize}&dashboardId=${dashboardId}`
     );
     return response.data;
   } catch (error) {
diff --git a/src/components/TagsInput.module.css b/src/components/TagsInput.module.css
new file mode 100644
index 0000000..11e444a
--- /dev/null
+++ b/src/components/TagsInput.module.css
@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.container label {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--black-100);
+}
+
+@media screen and (min-width: 768px) {
+  .container label {
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
diff --git a/src/components/TagsInput.tsx b/src/components/TagsInput.tsx
new file mode 100644
index 0000000..8a09bf2
--- /dev/null
+++ b/src/components/TagsInput.tsx
@@ -0,0 +1,17 @@
+import styles from './TagsInput.module.css';
+
+interface TagsInputProps {
+  name: 'tags';
+  setValue: (name: 'tags', value: string[]) => void;
+}
+
+export default function TagsInput({ name, setValue }: TagsInputProps) {
+  return (
+    <div className={styles.container}>
+      <label>태그</label>
+      <div className={styles.inputContainer}>
+        <input />
+      </div>
+    </div>
+  );
+}

From 79aa07a380c585d03d268310990786173c179ef1 Mon Sep 17 00:00:00 2001
From: najitwo <jitwona99@gmail.com>
Date: Wed, 27 Nov 2024 06:40:52 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20feat:=20implement=20TagsInput?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/components/CreateTaskModal.tsx       |  1 +
 .../[id]/components/SearchDropdown.tsx        |  4 +-
 .../mypage/_components/Modal.module.css       |  3 +
 src/components/TagsInput.module.css           | 60 +++++++++++++++++++
 src/components/TagsInput.tsx                  | 40 ++++++++++++-
 src/components/card/Tag.module.css            |  1 +
 src/components/card/Tag.tsx                   | 10 +++-
 7 files changed, 114 insertions(+), 5 deletions(-)

diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
index 67d2a94..a8aac45 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
@@ -33,6 +33,7 @@ export default function CreateTaskModal() {
 
   const onSubmit = (data: TaskFormValues) => {
     console.log(data);
+
     // closeModal();
   };
 
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx
index c263c5d..ad260b7 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, KeyboardEvent } from 'react';
 import Image from 'next/image';
 import Avatar from '@/components/Avatar';
 import { Member } from '@/types/member';
@@ -38,7 +38,7 @@ export default function SearchDropdown({
     setFocusedIndex(-1);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     if (!isDropdownVisible && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
       setIsDropdownVisible(true);
       return;
diff --git a/src/app/(with-header-sidebar)/mypage/_components/Modal.module.css b/src/app/(with-header-sidebar)/mypage/_components/Modal.module.css
index 79dc9cd..e43ee12 100644
--- a/src/app/(with-header-sidebar)/mypage/_components/Modal.module.css
+++ b/src/app/(with-header-sidebar)/mypage/_components/Modal.module.css
@@ -12,6 +12,9 @@
 }
 
 .modal {
+  max-height: 95%;
+  overflow-y: auto;
+  scrollbar-width: none;
   background: var(--white);
   border-radius: 16px;
 }
diff --git a/src/components/TagsInput.module.css b/src/components/TagsInput.module.css
index 11e444a..947bca8 100644
--- a/src/components/TagsInput.module.css
+++ b/src/components/TagsInput.module.css
@@ -11,9 +11,69 @@
   color: var(--black-100);
 }
 
+.inputContainer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  width: 295px;
+  border: 1px solid var(--gray-300);
+  border-radius: 6px;
+  padding: 10px 16px;
+  overflow: hidden;
+}
+
+.inputContainer:focus-within {
+  outline: 2px solid var(--violet);
+}
+
+.input {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--black-100);
+}
+
+.input::placeholder {
+  color: var(--gray-400);
+}
+
+.input:focus {
+  outline: none;
+}
+
+.tag {
+  padding: 4px 6px;
+  transition:
+    filter 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.tag:hover {
+  filter: brightness(0.7);
+  opacity: 0.8;
+  cursor: pointer;
+}
+
 @media screen and (min-width: 768px) {
   .container label {
     font-size: 18px;
     line-height: 26px;
   }
+
+  .inputContainer {
+    width: 520px;
+  }
+
+  .input {
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  .tag {
+    font-size: 14px;
+    line-height: 24px;
+    padding: 2px 6px;
+  }
 }
diff --git a/src/components/TagsInput.tsx b/src/components/TagsInput.tsx
index 8a09bf2..d36ecde 100644
--- a/src/components/TagsInput.tsx
+++ b/src/components/TagsInput.tsx
@@ -1,4 +1,8 @@
+'use client';
+
+import { useState, KeyboardEvent } from 'react';
 import styles from './TagsInput.module.css';
+import Tag from './card/Tag';
 
 interface TagsInputProps {
   name: 'tags';
@@ -6,11 +10,45 @@ interface TagsInputProps {
 }
 
 export default function TagsInput({ name, setValue }: TagsInputProps) {
+  const [tags, setTags] = useState<string[]>([]);
+
+  const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const { value } = e.currentTarget;
+      e.currentTarget.value = '';
+
+      if (tags.includes(value) || value.trim() === '') return;
+      setTags([...tags, value]);
+      setValue(name, [...tags, value]);
+    }
+  };
+
+  const handleClick = (target: string) => {
+    const nextValue = tags.filter((tag) => tag !== target);
+    setValue(name, nextValue);
+    setTags(nextValue);
+  };
+
   return (
     <div className={styles.container}>
       <label>태그</label>
       <div className={styles.inputContainer}>
-        <input />
+        {tags.map((tag) => (
+          <Tag
+            key={tag}
+            name={tag}
+            className={styles.tag}
+            onClick={() => handleClick(tag)}
+          />
+        ))}
+        <input
+          className={styles.input}
+          onKeyDown={handleKeyUp}
+          placeholder="입력 후 Enter"
+        />
       </div>
     </div>
   );
diff --git a/src/components/card/Tag.module.css b/src/components/card/Tag.module.css
index d46a9d9..8a6d41b 100644
--- a/src/components/card/Tag.module.css
+++ b/src/components/card/Tag.module.css
@@ -4,4 +4,5 @@
   line-height: 18px;
   padding: 2px 6px;
   border-radius: 4px;
+  white-space: nowrap;
 }
diff --git a/src/components/card/Tag.tsx b/src/components/card/Tag.tsx
index d0b1762..b5908e8 100644
--- a/src/components/card/Tag.tsx
+++ b/src/components/card/Tag.tsx
@@ -3,9 +3,11 @@ import styles from './Tag.module.css';
 
 interface TagProps {
   name: string;
+  className?: string;
+  onClick?: VoidFunction;
 }
 
-export default function Tag({ name }: TagProps) {
+export default function Tag({ name, className, onClick }: TagProps) {
   const mainColor = getRandomColor(name);
   const style = {
     backgroundColor: mainColor,
@@ -13,7 +15,11 @@ export default function Tag({ name }: TagProps) {
   };
 
   return (
-    <div style={style} className={styles.tag}>
+    <div
+      style={style}
+      className={`${styles.tag} ${className}`}
+      onClick={onClick}
+    >
       {name}
     </div>
   );

From 32a69eabe5be60f772562f34cf5577df2629ff8d Mon Sep 17 00:00:00 2001
From: najitwo <jitwona99@gmail.com>
Date: Wed, 27 Nov 2024 08:08:47 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=A8=20feat:=20integrate=20post=20requ?=
 =?UTF-8?q?est=20for=20card=20creation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/[id]/components/Column.tsx      |  2 +-
 .../components/CreateTaskModal.module.css     | 38 ++++++++++++++++++
 .../[id]/components/CreateTaskModal.tsx       | 39 +++++++++++++++----
 .../[id]/components/DatePicker.module.css     |  2 +-
 .../dashboard/[id]/components/DatePicker.tsx  |  6 +--
 .../[id]/components/SearchDropdown.module.css |  2 +-
 .../[id]/components/SearchDropdown.tsx        | 18 ++++++---
 src/components/Input.module.css               |  5 +++
 src/components/Input.tsx                      |  7 +++-
 src/components/Textarea.module.css            | 17 +++++---
 src/components/Textarea.tsx                   | 11 ++++--
 src/constants/message.ts                      |  2 +
 src/lib/cardService.ts                        | 36 +++++++++++++++++
 src/utils/dateUtils.ts                        | 14 +++++++
 14 files changed, 171 insertions(+), 28 deletions(-)

diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.tsx
index 71962c3..da1e23d 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.tsx
+++ b/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 (
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.module.css b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.module.css
index 723e81a..8ee1766 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.module.css
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.module.css
@@ -17,6 +17,26 @@
   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;
@@ -42,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;
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
index a8aac45..8aaf794 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal.tsx
@@ -2,7 +2,6 @@ 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';
@@ -10,6 +9,9 @@ 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 TaskFormValues {
   assigneeUserId: number;
@@ -20,7 +22,7 @@ export interface TaskFormValues {
   tags: string[];
 }
 
-export default function CreateTaskModal() {
+export default function CreateTaskModal({ columnId }: { columnId: number }) {
   const { closeModal } = useModalStore();
   const {
     register,
@@ -31,10 +33,11 @@ export default function CreateTaskModal() {
   const dashboard = useDashboardStore((state) => state.dashboard);
   const { members } = useMember(dashboard?.id.toString() || null, 10);
 
-  const onSubmit = (data: TaskFormValues) => {
-    console.log(data);
-
-    // closeModal();
+  const onSubmit = async (data: TaskFormValues) => {
+    if (dashboard) {
+      const response = await createCard(data, columnId, dashboard.id);
+      closeModal();
+    }
   };
 
   return (
@@ -45,8 +48,28 @@ export default function CreateTaskModal() {
         options={members}
         setValue={setValue}
       />
-      <Input name="title" label="제목" placeholder="제목을 입력해주세요" />
-      <Textarea name="description" label="내용" />
+      <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
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css
index e0e6364..ab1e86d 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.module.css
+++ b/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 {
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx
index a3d6920..8e51ef1 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/DatePicker.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import Image from 'next/image';
-import { formatDateFormat } from '@/utils/dateUtils';
+import { formatDateFormat, formatDateTimeFormat } from '@/utils/dateUtils';
 import CalendarIcon from '/public/icons/calendar.svg';
 import styles from './DatePicker.module.css';
 
@@ -51,12 +51,12 @@ export default function DatePicker({ name, setValue }: DatePickerProps) {
   const handleDateClick = (date: Date) => {
     setSelectedDate(formatDateFormat(date));
     setSelectedTime('23:30');
-    setValue(name, `${formatDateFormat(date)} 23:30`);
+    setValue(name, formatDateTimeFormat(`${formatDateFormat(date)} 23:30`));
   };
 
   const handleTimeClick = (date: string) => {
     setSelectedTime(date);
-    setValue(name, `${selectedDate} ${date}`);
+    setValue(name, formatDateTimeFormat(`${selectedDate} ${date}`));
     setIsCalendarVisible(false);
   };
 
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.module.css b/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.module.css
index f5f16a5..d22842d 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.module.css
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 8px;
   position: relative;
-  width: 287px;
+  width: 295px;
 }
 
 .label {
diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx
index ad260b7..80a3d35 100644
--- a/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx
+++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/SearchDropdown.tsx
@@ -34,7 +34,7 @@ export default function SearchDropdown({
     setQuery(option.nickname);
     setSelectedOption(option);
     setIsDropdownVisible(false);
-    setValue(name, option.id);
+    setValue(name, option.userId);
     setFocusedIndex(-1);
   };
 
@@ -104,7 +104,7 @@ export default function SearchDropdown({
     option: Member;
     index: number;
   }) => {
-    const isSelected = selectedOption?.id === option.id;
+    const isSelected = selectedOption?.userId === option.userId;
     const isFocused = index === focusedIndex;
 
     return (
@@ -117,7 +117,11 @@ export default function SearchDropdown({
         aria-selected={isSelected}
       >
         {isSelected && <CheckIcon className={styles.check} />}
-        <Avatar name={option.nickname} className={styles.avatar} />
+        <Avatar
+          name={option.nickname}
+          className={styles.avatar}
+          profileImageUrl={option.profileImageUrl}
+        />
         {option.nickname}
       </li>
     );
@@ -146,7 +150,11 @@ export default function SearchDropdown({
         />
         {selectedOption?.nickname === query && (
           <div className={styles.avatarContainer}>
-            <Avatar name={selectedOption.nickname} className={styles.avatar} />
+            <Avatar
+              name={selectedOption.nickname}
+              className={styles.avatar}
+              profileImageUrl={selectedOption.profileImageUrl}
+            />
           </div>
         )}
         <Image
@@ -161,7 +169,7 @@ export default function SearchDropdown({
         <ul className={styles.dropdown} ref={dropdownRef}>
           {filteredOptions.length > 0 ? (
             filteredOptions.map((option, index) => (
-              <DropdownItem key={option.id} option={option} index={index} />
+              <DropdownItem key={option.userId} option={option} index={index} />
             ))
           ) : (
             <li className={styles.noResult}>검색 결과가 없습니다</li>
diff --git a/src/components/Input.module.css b/src/components/Input.module.css
index a216e01..69effe3 100644
--- a/src/components/Input.module.css
+++ b/src/components/Input.module.css
@@ -43,3 +43,8 @@
   line-height: 24px;
   color: var(--red);
 }
+
+.required {
+  color: var(--violet);
+  padding-left: 2px;
+}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index d79267a..6fc2bab 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -15,6 +15,7 @@ interface InputProps {
   register?: UseFormRegisterReturn;
   error?: FieldError;
   readOnly?: boolean;
+  required?: boolean;
 }
 
 export default function Input({
@@ -27,10 +28,14 @@ export default function Input({
   register,
   error,
   readOnly = false,
+  required,
 }: InputProps) {
   return (
     <div className={`${styles.container} ${className}`}>
-      <Label htmlFor={name}>{label}</Label>
+      <Label htmlFor={name}>
+        {label}
+        {required && <span className={styles.required}>*</span>}
+      </Label>
       <div className={styles.inputWrapper}>
         <input
           className={`${styles.input} ${error ? styles.errorFocus : ''}`}
diff --git a/src/components/Textarea.module.css b/src/components/Textarea.module.css
index a216e01..01ccc76 100644
--- a/src/components/Textarea.module.css
+++ b/src/components/Textarea.module.css
@@ -4,12 +4,13 @@
   gap: 8px;
 }
 
-.inputWrapper {
+.textareaWrapper {
   position: relative;
 }
 
-.input {
+.textarea {
   width: 100%;
+  height: 126px;
   border: 1px solid var(--gray-300);
   border-radius: 8px;
   font-size: 16px;
@@ -17,18 +18,19 @@
   line-height: 26px;
   color: var(--black-100);
   padding: 12px 16px;
+  resize: none;
 }
 
-.input:read-only {
+.textarea:read-only {
   color: var(--gray-400);
   outline: none;
 }
 
-.input:focus:not(:read-only) {
+.textarea:focus:not(:read-only) {
   outline-color: var(--violet);
 }
 
-.input::placeholder {
+.textarea::placeholder {
   color: var(--gray-400);
 }
 
@@ -43,3 +45,8 @@
   line-height: 24px;
   color: var(--red);
 }
+
+.required {
+  color: var(--violet);
+  padding-left: 2px;
+}
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index 5701b87..1f51490 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -15,6 +15,7 @@ interface TextareaProps {
   register?: UseFormRegisterReturn;
   error?: FieldError;
   readOnly?: boolean;
+  required?: boolean;
 }
 
 export default function Textarea({
@@ -26,13 +27,17 @@ export default function Textarea({
   register,
   error,
   readOnly = false,
+  required,
 }: TextareaProps) {
   return (
     <div className={`${styles.container} ${className}`}>
-      <Label htmlFor={name}>{label}</Label>
-      <div className={styles.inputWrapper}>
+      <Label htmlFor={name}>
+        {label}
+        {required && <span className={styles.required}>*</span>}
+      </Label>
+      <div className={styles.textareaWrapper}>
         <textarea
-          className={`${styles.input} ${error ? styles.errorFocus : ''}`}
+          className={`${styles.textarea} ${error ? styles.errorFocus : ''}`}
           placeholder={placeholder}
           readOnly={readOnly}
           {...register}
diff --git a/src/constants/message.ts b/src/constants/message.ts
index 58577f7..c432e77 100644
--- a/src/constants/message.ts
+++ b/src/constants/message.ts
@@ -7,6 +7,8 @@ export const ERROR_MESSAGES = {
   NICKNAME_REQUIRE: '닉네임을 입력해주세요.',
   PASSWORD_REQUIRE: '비밀번호를 입력해주세요.',
   DASHBOARD_TITLE_REQUIRE: '대시보드 이름은 필수입니다.',
+  TITLE_REQUIRE: '제목은 필수입니다.',
+  DESCRIPTION_REQUIRE: '설명은 필수입니다.',
   REQUIRED_EMAIL: '이메일을 입력해 주세요.',
   INVALID_EMAIL: '이메일 형식으로 작성해 주세요.',
 };
diff --git a/src/lib/cardService.ts b/src/lib/cardService.ts
index c20832d..c495c4a 100644
--- a/src/lib/cardService.ts
+++ b/src/lib/cardService.ts
@@ -1,3 +1,4 @@
+import { TaskFormValues } from '@/app/(with-header-sidebar)/dashboard/[id]/components/CreateTaskModal';
 import axiosInstance from '@/lib/axiosInstance';
 
 export const deleteCard = async (cardId: number) => {
@@ -7,3 +8,38 @@ export const deleteCard = async (cardId: number) => {
     throw error;
   }
 };
+
+export const createCard = async (
+  data: TaskFormValues,
+  columnId: number,
+  dashboardId: number
+) => {
+  const { image, ...body } = data;
+
+  let url = null;
+  try {
+    if (image) {
+      const formData = new FormData();
+      formData.append('image', image);
+      const response = await axiosInstance.post(
+        `/columns/${columnId}/card-image`,
+        formData,
+        {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        }
+      );
+      url = response.data.imageUrl;
+    }
+    const response = await axiosInstance.post('/cards', {
+      columnId,
+      dashboardId,
+      ...body,
+      ...(url && { imageUrl: url }),
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts
index 3307db1..56e3bd5 100644
--- a/src/utils/dateUtils.ts
+++ b/src/utils/dateUtils.ts
@@ -23,3 +23,17 @@ export function formatDateFormat(targetDate: string | Date): string {
 
   return `${year}. ${month}. ${day}`;
 }
+
+export function formatDateTimeFormat(targetDate: string | Date): string {
+  if (!targetDate) return '';
+
+  const date = new Date(targetDate);
+
+  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}`;
+}