From 38d239dde12dd799b0779eb442647fd4316c494f Mon Sep 17 00:00:00 2001
From: jihye5081 <ekftn90@gmail.com>
Date: Sat, 29 Mar 2025 03:24:52 +0900
Subject: [PATCH] feat: Implement Create Task layout

---
 public/icon/dropdown_icon.svg                 |  3 +
 src/components/common/input/Input.tsx         |  2 +
 src/components/common/textarea/Textarea.tsx   | 14 ++++-
 .../modal/create-task/CreateTaskModal.tsx     | 56 ++++++++++++++++++-
 4 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 public/icon/dropdown_icon.svg

diff --git a/public/icon/dropdown_icon.svg b/public/icon/dropdown_icon.svg
new file mode 100644
index 0000000..3ee9530
--- /dev/null
+++ b/public/icon/dropdown_icon.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5656 5.01269L0.151883 1.599C0.104794 1.55191 0.0677083 1.49933 0.040625 1.44127C0.0135417 1.38318 0 1.32095 0 1.25458C0 1.12184 0.0448865 1.00651 0.134659 0.908593C0.224413 0.810677 0.342721 0.761719 0.489585 0.761719H7.68119C7.82805 0.761719 7.94636 0.811147 8.03611 0.910001C8.12588 1.00887 8.17077 1.12421 8.17077 1.25602C8.17077 1.28899 8.12007 1.40339 8.01867 1.59922L4.60517 5.01272C4.5267 5.09119 4.44558 5.14848 4.36182 5.18459C4.27805 5.2207 4.1859 5.23876 4.08539 5.23876C3.98487 5.23876 3.89272 5.2207 3.80895 5.18459C3.72519 5.14848 3.64407 5.09118 3.5656 5.01269Z" fill="#333236"/>
+</svg>
diff --git a/src/components/common/input/Input.tsx b/src/components/common/input/Input.tsx
index c413c43..81279b4 100644
--- a/src/components/common/input/Input.tsx
+++ b/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"
diff --git a/src/components/common/textarea/Textarea.tsx b/src/components/common/textarea/Textarea.tsx
index 48e05ad..8abf919 100644
--- a/src/components/common/textarea/Textarea.tsx
+++ b/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>
   );
 };
diff --git a/src/components/modal/create-task/CreateTaskModal.tsx b/src/components/modal/create-task/CreateTaskModal.tsx
index aa3ae6f..1c2c4fb 100644
--- a/src/components/modal/create-task/CreateTaskModal.tsx
+++ b/src/components/modal/create-task/CreateTaskModal.tsx
@@ -1,6 +1,12 @@
 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가 되도록 하기
@@ -8,6 +14,10 @@ export default function CreateDashboardModal() {
 
   // 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>
   );