[feat] #19/할 일 생성 모달 레이아웃 구현

src/components/common/input/Input.tsx

@@ -29,6 +29,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       alt,
       error = false,
       errorMessage,
+      required,
       ...props
     },
     ref
@@ -57,6 +58,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       <div className="flex flex-col">
         <label className={inputStyles.label} htmlFor={label}>
           {label}
+          {required && <span className="ml-0.5 text-violet">*</span>}
         </label>
         <div
           className="relative"

src/components/common/textarea/Textarea.tsx

@@ -5,19 +5,29 @@ interface TextareaProps extends ComponentPropsWithoutRef<"textarea"> {
   containerClassName: string;
   labelClassName: string;
   textareaClassName: string;
+  spanClassName: string;
 }
 
 const Textarea = ({
   label,
+  required,
   containerClassName,
   labelClassName,
   textareaClassName,
+  spanClassName,
   ...props
 }: TextareaProps) => {
   return (
     <div className={`flex flex-col ${containerClassName}`}>
-      <label className={labelClassName}>{label}</label>
-      <textarea className={`resize-none ${textareaClassName}`} {...props} />
+      <label className={`text-gray-800 ${labelClassName}`}>
+        {label}
+        {required && <span className={`text-violet ${spanClassName}`}>*</span>}
+      </label>
+      <textarea
+        className={`border border-gray-400 resize-none ${textareaClassName}`}
+        required={required}
+        {...props}
+      />
     </div>
   );
 };

src/components/modal/create-task/CreateTaskModal.tsx

@@ -1,13 +1,23 @@
 import { useState } from "react";
+import Image from "next/image";
 import Modal from "@/components/common/modal/Modal";
 import TagInput from "@/components/common/input/TagInput";
+import Input from "@/components/common/input/Input";
+import DateInput from "@/components/common/input/DateInput";
+import ImageInput from "@/components/common/input/ImageInput";
+import Textarea from "@/components/common/textarea/Textarea";
+import dropdownIcon from "../../../../public/icon/dropdown_icon.svg";
 
 export default function CreateDashboardModal() {
   // 해당 폼이 유효성 검사 후 제출 가능해질 때 해당 state 값이 true가 되도록 하기
   const [isFormValid, setIsFormValid] = useState(false);
 
   // TagInput 컴포넌트에 전달할 state
   const [tags, setTags] = useState<string[]>([]);
+  const [selectedManager, setSelectedManager] = useState<string | null>(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const managers = ["김경민", "노현지", "이아름", "이재혁", "임지혜"];
 
   // 활성화된 모달 버튼 클릭 시 실행할 함수
   const buttonClick = () => {
@@ -22,9 +32,51 @@ export default function CreateDashboardModal() {
         disabled: !isFormValid,
       }}
     >
-      <div>
-        {/* 아래는 임시로 넣어본 TagInput 코드입니다 */}
+      <div className="flex flex-col w-[271px] gap-6 tablet:w-[520px] tablet:gap-8">
+        <div className="relative flex flex-col">
+          <label className="block mb-2.5 text-lg font-medium text-gray-800 tablet:mb-2 tablet:text-2lg">
+            담당자
+          </label>
+          <button
+            className="w-full px-4 py-3 font-normal text-md text-gray-500 border border-gray-400 rounded-md tablet:py-[11px] tablet:text-lg"
+            onClick={() => setIsDropdownOpen((prev) => !prev)}
+          >
+            <div className="flex justify-between">
+              <span>{selectedManager || "이름을 입력해 주세요"}</span>
+              <Image src={dropdownIcon} width={8} height={8} alt="" />
+            </div>
+          </button>
+        </div>
+
+        {isDropdownOpen && (
+          <ul className="border border-gray-400 rounded-md">
+            {managers.map((manager) => (
+              <li
+                key={manager}
+                className="px-4 py-2 hover:text-violet hover:bg-violet-8 cursor-pointer"
+                onClick={() => {
+                  setSelectedManager(manager);
+                  setIsDropdownOpen(false);
+                }}
+              >
+                {manager}
+              </li>
+            ))}
+          </ul>
+        )}
+        <Input label="제목" placeholder="제목을 입력해 주세요" required />
+        <Textarea
+          label="설명"
+          placeholder="설명을 입력해 주세요"
+          required
+          spanClassName="ml-0.5"
+          containerClassName="gap-2.5 tablet:gap-2"
+          labelClassName="font-medium text-lg tablet:text-2lg"
+          textareaClassName="font-normal placeholder:text-gray-500 rounded-md text-md  h-[84px] px-4 py-[13px] tablet:rounded-lg tablet:h-[126px] tablet:py-[15px] tablet:text-lg"
+        />
+        <DateInput />
         <TagInput label="태그" tags={tags} setTags={setTags} />
+        <ImageInput label="이미지" variant="task" columnId={46355} />
       </div>
     </Modal>
   );