From 536d70bb35d73c49f0337fda51ef61a14d64d30c Mon Sep 17 00:00:00 2001
From: Suk Woo <gkdltjr@naver.com>
Date: Sat, 14 Sep 2024 14:25:21 +0900
Subject: [PATCH] =?UTF-8?q?UI:=20#127=20=EC=9D=BC=EC=A0=95=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=9E=85=EB=A0=A5=20=EC=96=91=EC=8B=9D=EB=93=A4?=
 =?UTF-8?q?=EC=9D=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC=20(#131)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* UI: #127 프로젝트 상태 radio input 컴포넌트 분리

* UI: #127 시작일, 종료일 컴포넌트 분리

* UI: #127 마크다운 컴포넌트 분리

* UI: #127 파일 DropZone 컴포넌트 분리

* UI: #127 마크다운 컴포넌트 props 변경

* UI: #127 시작일, 종료일 컴포넌트 props 변경

* UI: #127 프로젝트 상태 컴포넌트 props 변경

* UI: #127 시작일, 종료일 컴포넌트 props 변경

* UI: #127 마크다운 컴포넌트 props 변경
---
 src/components/common/FileDropZone.tsx      |  51 ++++
 src/components/common/MarkdownEditor.tsx    |  37 +++
 src/components/common/PeriodDateInput.tsx   |  85 ++++++
 src/components/common/StatusRadio.tsx       |  51 ++++
 src/components/modal/task/ModalTaskForm.tsx | 316 +++++++-------------
 src/types/FileType.tsx                      |   1 +
 6 files changed, 335 insertions(+), 206 deletions(-)
 create mode 100644 src/components/common/FileDropZone.tsx
 create mode 100644 src/components/common/MarkdownEditor.tsx
 create mode 100644 src/components/common/PeriodDateInput.tsx
 create mode 100644 src/components/common/StatusRadio.tsx
 create mode 100644 src/types/FileType.tsx

diff --git a/src/components/common/FileDropZone.tsx b/src/components/common/FileDropZone.tsx
new file mode 100644
index 00000000..709765f2
--- /dev/null
+++ b/src/components/common/FileDropZone.tsx
@@ -0,0 +1,51 @@
+import { GoPlusCircle } from 'react-icons/go';
+import { IoMdCloseCircle } from 'react-icons/io';
+import type { CustomFile } from '@/types/FileType';
+
+type FileDropZoneProps = {
+  id: string;
+  label: string;
+  files: CustomFile[];
+  onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onFileDrop: (e: React.DragEvent<HTMLElement>) => void;
+  onFileDeleteClick: (fileId: string) => void;
+};
+
+// ToDo: 파일 업로드 API 작업시 구조 다시 한 번 확인해보기
+export default function FileDropZone({
+  id,
+  label,
+  files,
+  onFileChange: handleFileChange,
+  onFileDrop: handleFileDrop,
+  onFileDeleteClick: handleFileDeleteClick,
+}: FileDropZoneProps) {
+  return (
+    <label htmlFor={id}>
+      <h3 className="text-large">{label}</h3>
+      <input type="file" id={id} className="h-0 w-0 opacity-0" multiple hidden onChange={handleFileChange} />
+      <section
+        className="flex cursor-pointer items-center gap-4 rounded-sl border-2 border-dashed border-input p-10"
+        onDrop={handleFileDrop}
+      >
+        <ul className="flex grow flex-wrap gap-4">
+          {files.map(({ id, file }) => (
+            <li key={id} className="flex items-center gap-4 rounded-md bg-button px-4 py-2">
+              <span>{file.name}</span>
+              <IoMdCloseCircle
+                className="text-close"
+                onClick={(e: React.MouseEvent<HTMLOrSVGElement>) => {
+                  e.preventDefault();
+                  handleFileDeleteClick(id);
+                }}
+              />
+            </li>
+          ))}
+        </ul>
+        <div>
+          <GoPlusCircle className="size-15 text-[#5E5E5E]" />
+        </div>
+      </section>
+    </label>
+  );
+}
diff --git a/src/components/common/MarkdownEditor.tsx b/src/components/common/MarkdownEditor.tsx
new file mode 100644
index 00000000..b5f764f1
--- /dev/null
+++ b/src/components/common/MarkdownEditor.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import ToggleButton from '@components/common/ToggleButton';
+import CustomMarkdown from '@components/common/CustomMarkdown';
+
+type MarkdownEditorProps = {
+  id: string;
+  label: string;
+  contentFieldName: string;
+};
+
+export default function MarkdownEditor({ id, label, contentFieldName }: MarkdownEditorProps) {
+  const [preview, setPreview] = useState(false);
+  const { watch, register } = useFormContext();
+
+  const handlePreviewToggle = () => setPreview((prev) => !prev);
+
+  return (
+    <label htmlFor={id} className="mb-20">
+      <h3 className="flex items-center space-x-2">
+        <span className="text-large">{label}</span>
+        <ToggleButton id="preview" checked={preview} onChange={handlePreviewToggle} />
+      </h3>
+      {preview ? (
+        <CustomMarkdown markdown={watch(contentFieldName)} />
+      ) : (
+        <textarea
+          id={id}
+          rows={10}
+          className="w-full border border-input p-10 placeholder:text-xs"
+          placeholder="마크다운 형식으로 입력해주세요."
+          {...register(contentFieldName)}
+        />
+      )}
+    </label>
+  );
+}
diff --git a/src/components/common/PeriodDateInput.tsx b/src/components/common/PeriodDateInput.tsx
new file mode 100644
index 00000000..46dfdd5b
--- /dev/null
+++ b/src/components/common/PeriodDateInput.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { TASK_VALIDATION_RULES } from '@constants/formValidationRules';
+import ToggleButton from '@components/common/ToggleButton';
+
+import type { FieldError } from 'react-hook-form';
+import type { Project } from '@/types/ProjectType';
+
+type PeriodDateInputProps = {
+  startDateLabel: string;
+  endDateLabel: string;
+  startDateId: string;
+  endDateId: string;
+  startDate: Project['startDate'];
+  endDate: Project['endDate'];
+  startDateFieldName: string;
+  endDateFieldName: string;
+};
+
+export default function PeriodDateInput({
+  startDateLabel,
+  endDateLabel,
+  startDateId,
+  endDateId,
+  startDate,
+  endDate,
+  startDateFieldName,
+  endDateFieldName,
+}: PeriodDateInputProps) {
+  const [hasDeadline, setHasDeadline] = useState(false);
+  const {
+    setValue,
+    getValues,
+    clearErrors,
+    watch,
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const handleDeadlineToggle = () => {
+    setValue(endDateFieldName, getValues(startDateFieldName));
+    clearErrors(endDateFieldName);
+    setHasDeadline((prev) => !prev);
+  };
+
+  return (
+    <div className="flex items-center justify-center gap-10">
+      <label htmlFor={startDateId} className="w-1/2">
+        <h3 className="text-large">{startDateLabel}</h3>
+        <input
+          id={startDateId}
+          type="date"
+          {...register(startDateFieldName, {
+            ...TASK_VALIDATION_RULES.START_DATE(startDate, endDate),
+            onChange: (e) => {
+              if (!hasDeadline) setValue(endDateFieldName, e.target.value);
+            },
+          })}
+        />
+        <div className={`my-5 h-10 grow text-xs text-error ${errors[startDateFieldName] ? 'visible' : 'invisible'}`}>
+          {(errors[startDateFieldName] as FieldError | undefined)?.message}
+        </div>
+      </label>
+      <label htmlFor={endDateId} className="w-1/2">
+        <h3 className="flex items-center space-x-2 text-large">
+          <span>{endDateLabel}</span>
+          <ToggleButton id="deadline" checked={hasDeadline} onChange={handleDeadlineToggle} />
+        </h3>
+        <input
+          id={endDateId}
+          type="date"
+          className={`${hasDeadline ? '' : '!bg-disable'}`}
+          disabled={!hasDeadline}
+          {...register(
+            endDateFieldName,
+            TASK_VALIDATION_RULES.END_DATE(hasDeadline, startDate, endDate, watch(startDateFieldName)),
+          )}
+        />
+        <div className={`my-5 h-10 grow text-xs text-error ${errors[endDateFieldName] ? 'visible' : 'invisible'}`}>
+          {(errors[endDateFieldName] as FieldError | undefined)?.message}
+        </div>
+      </label>
+    </div>
+  );
+}
diff --git a/src/components/common/StatusRadio.tsx b/src/components/common/StatusRadio.tsx
new file mode 100644
index 00000000..e12812f9
--- /dev/null
+++ b/src/components/common/StatusRadio.tsx
@@ -0,0 +1,51 @@
+import { useFormContext } from 'react-hook-form';
+import { TASK_VALIDATION_RULES } from '@constants/formValidationRules';
+
+import type { FieldError } from 'react-hook-form';
+import type { ProjectStatus } from '@/types/ProjectStatusType';
+
+type StatusRadioProps = {
+  statusFieldName: string;
+  statusList: ProjectStatus[];
+};
+
+export default function StatusRadio({ statusFieldName, statusList }: StatusRadioProps) {
+  const {
+    watch,
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  return (
+    <>
+      {/* ToDo: 상태 선택 리팩토링 할 것 */}
+      <div className="flex items-center justify-start gap-4">
+        {statusList.map((status) => {
+          const { statusId, statusName, colorCode } = status;
+          const isChecked = Number(watch('statusId')) === statusId;
+          return (
+            <label
+              key={statusId}
+              htmlFor={statusName}
+              className={`flex cursor-pointer items-center rounded-lg border px-5 py-3 text-emphasis ${isChecked ? 'border-input bg-white' : 'bg-button'}`}
+            >
+              <input
+                id={statusName}
+                type="radio"
+                className="invisible h-0 w-0"
+                value={statusId}
+                checked={isChecked}
+                {...register(statusFieldName, TASK_VALIDATION_RULES.STATUS)}
+              />
+              <div style={{ borderColor: colorCode }} className="mr-3 h-8 w-8 rounded-full border" />
+              <h3 className="text-xs">{statusName}</h3>
+            </label>
+          );
+        })}
+      </div>
+      <div className={`my-5 h-10 grow text-xs text-error ${errors[statusFieldName] ? 'visible' : 'invisible'}`}>
+        {(errors[statusFieldName] as FieldError | undefined)?.message}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx
index 0ca57397..258c99ee 100644
--- a/src/components/modal/task/ModalTaskForm.tsx
+++ b/src/components/modal/task/ModalTaskForm.tsx
@@ -1,16 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { DateTime } from 'luxon';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { IoSearch } from 'react-icons/io5';
-import { GoPlusCircle } from 'react-icons/go';
 import { IoMdCloseCircle } from 'react-icons/io';
 
 import { TASK_SETTINGS } from '@constants/settings';
 import { TASK_VALIDATION_RULES } from '@constants/formValidationRules';
 import Spinner from '@components/common/Spinner';
 import RoleIcon from '@components/common/RoleIcon';
-import ToggleButton from '@components/common/ToggleButton';
-import CustomMarkdown from '@components/common/CustomMarkdown';
+import StatusRadio from '@components/common/StatusRadio';
+import FileDropZone from '@components/common/FileDropZone';
+import MarkdownEditor from '@components/common/MarkdownEditor';
+import PeriodDateInput from '@components/common/PeriodDateInput';
 import DuplicationCheckInput from '@components/common/DuplicationCheckInput';
 import useToast from '@hooks/useToast';
 import useAxios from '@hooks/useAxios';
@@ -23,8 +24,8 @@ import type { SubmitHandler } from 'react-hook-form';
 import type { UserWithRole } from '@/types/UserType';
 import type { Project } from '@/types/ProjectType';
 import type { Task, TaskForm } from '@/types/TaskType';
+import type { CustomFile } from '@/types/FileType';
 
-type CustomFile = { id: string; file: File };
 type ModalTaskFormProps = {
   formId: string;
   project: Project;
@@ -38,10 +39,8 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
 
-  const [hasDeadline, setHasDeadline] = useState(false);
   const [keyword, setKeyword] = useState('');
   const [workers, setWorkers] = useState<UserWithRole[]>([]);
-  const [preview, setPreview] = useState(false);
   const [files, setFiles] = useState<CustomFile[]>([]);
 
   const { statusList, isStatusLoading } = useReadStatuses(projectId, taskId);
@@ -50,15 +49,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
   const { toastInfo, toastWarn } = useToast();
 
   // ToDo: 상태 수정 모달 작성시 기본값 설정 방식 변경할 것
-  const {
-    register,
-    watch,
-    setValue,
-    getValues,
-    clearErrors,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<TaskForm>({
+  const methods = useForm<TaskForm>({
     mode: 'onChange',
     defaultValues: {
       name: '',
@@ -69,6 +60,13 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
       statusId: statusList[0]?.statusId,
     },
   });
+  const {
+    register,
+    watch,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = methods;
 
   const searchUsers = useCallback(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
@@ -96,14 +94,6 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
     };
   }, [searchUsers, keyword]);
 
-  const handleDeadlineToggle = () => {
-    setValue('endDate', getValues('startDate'));
-    clearErrors('endDate');
-    setHasDeadline((prev) => !prev);
-  };
-
-  const handlePreviewToggle = () => setPreview((prev) => !prev);
-
   const handleKeywordChange = (e: React.ChangeEvent<HTMLInputElement>) => setKeyword(e.target.value.trim());
 
   const handleSearchClick = () => searchUsers();
@@ -134,11 +124,6 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
     setValue('userId', workersIdList);
   };
 
-  const handleFileDeleteClick = (fileId: string) => {
-    const filteredFiles = files.filter((file) => file.id !== fileId);
-    setFiles(filteredFiles);
-  };
-
   const updateFiles = (newFiles: FileList) => {
     // 최대 파일 등록 개수 확인
     if (files.length + newFiles.length > TASK_SETTINGS.MAX_FILE_COUNT) {
@@ -170,189 +155,108 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
     updateFiles(files);
   };
 
+  const handleFileDeleteClick = (fileId: string) => {
+    const filteredFiles = files.filter((file) => file.id !== fileId);
+    setFiles(filteredFiles);
+  };
+
   if (isStatusLoading) return <Spinner />;
 
   return (
-    <form id={formId} className="mb-20 flex w-4/5 grow flex-col justify-center" onSubmit={handleSubmit(onSubmit)}>
-      {/* ToDo: 상태 선택 리팩토링 할 것 */}
-      <div className="flex items-center justify-start gap-4">
-        {statusList.map((status) => {
-          const { statusId, statusName, colorCode } = status;
-          const isChecked = +watch('statusId') === statusId;
-          return (
-            <label
-              key={statusId}
-              htmlFor={statusName}
-              className={`flex cursor-pointer items-center rounded-lg border px-5 py-3 text-emphasis ${isChecked ? 'border-input bg-white' : 'bg-button'}`}
-            >
+    <FormProvider {...methods}>
+      <form id={formId} className="mb-20 flex w-4/5 grow flex-col justify-center" onSubmit={handleSubmit(onSubmit)}>
+        <StatusRadio statusFieldName="statusId" statusList={statusList} />
+
+        <DuplicationCheckInput
+          id="name"
+          label="일정"
+          value={watch('name')}
+          placeholder="일정명을 입력해주세요."
+          errors={errors.name?.message}
+          register={register('name', TASK_VALIDATION_RULES.TASK_NAME(taskNameList))}
+        />
+
+        <PeriodDateInput
+          startDateLabel="시작일"
+          endDateLabel="종료일"
+          startDateId="startDate"
+          endDateId="endDate"
+          startDate={startDate}
+          endDate={endDate}
+          startDateFieldName="startDate"
+          endDateFieldName="endDate"
+        />
+
+        {/* ToDo: 검색UI 공용 컴포넌트로 추출할 것 */}
+        <div className="mb-20">
+          <label htmlFor="search" className="group mb-10 flex items-center gap-5">
+            <h3 className="text-large">수행자</h3>
+            <section className="relative grow">
               <input
-                id={statusName}
-                type="radio"
-                className="invisible h-0 w-0"
-                value={statusId}
-                checked={isChecked}
-                {...register('statusId', TASK_VALIDATION_RULES.STATUS)}
+                type="text"
+                id="search"
+                className="h-25 w-full rounded-md border border-input pl-10 pr-25 text-regular placeholder:text-xs"
+                value={keyword}
+                onChange={handleKeywordChange}
+                onKeyDown={handleSearchKeyUp}
+                placeholder="닉네임을 검색해주세요."
               />
-              <div style={{ borderColor: colorCode }} className="mr-3 h-8 w-8 rounded-full border" />
-              <h3 className="text-xs">{statusName}</h3>
-            </label>
-          );
-        })}
-      </div>
-      <div className={`my-5 h-10 grow text-xs text-error ${errors.statusId ? 'visible' : 'invisible'}`}>
-        {errors.statusId?.message}
-      </div>
-
-      <DuplicationCheckInput
-        id="name"
-        label="일정"
-        value={watch('name')}
-        placeholder="일정명을 입력해주세요."
-        errors={errors.name?.message}
-        register={register('name', TASK_VALIDATION_RULES.TASK_NAME(taskNameList))}
-      />
-
-      <div className="flex items-center justify-center gap-10">
-        <label htmlFor="startDate" className="w-1/2">
-          <h3 className="text-large">시작일</h3>
-          <input
-            type="date"
-            id="startDate"
-            {...register('startDate', {
-              ...TASK_VALIDATION_RULES.START_DATE(startDate, endDate),
-              onChange: (e) => {
-                if (!hasDeadline) setValue('endDate', e.target.value);
-              },
-            })}
-          />
-          <div className={`my-5 h-10 grow text-xs text-error ${errors.startDate ? 'visible' : 'invisible'}`}>
-            {errors.startDate?.message}
-          </div>
-        </label>
-        <label htmlFor="endDate" className="w-1/2">
-          <h3 className="flex items-center space-x-2 text-large">
-            <span>종료일</span>
-            <ToggleButton id="deadline" checked={hasDeadline} onChange={handleDeadlineToggle} />
-          </h3>
-          <input
-            type="date"
-            id="endDate"
-            className={`${hasDeadline ? '' : '!bg-disable'}`}
-            disabled={!hasDeadline}
-            {...register(
-              'endDate',
-              TASK_VALIDATION_RULES.END_DATE(hasDeadline, startDate, endDate, watch('startDate')),
-            )}
-          />
-          <div className={`my-5 h-10 grow text-xs text-error ${errors.endDate ? 'visible' : 'invisible'}`}>
-            {errors.endDate?.message}
-          </div>
-        </label>
-      </div>
-
-      {/* ToDo: 검색UI 공용 컴포넌트로 추출할 것 */}
-      <div className="mb-20">
-        <label htmlFor="search" className="group mb-10 flex items-center gap-5">
-          <h3 className="text-large">수행자</h3>
-          <section className="relative grow">
-            <input
-              type="text"
-              id="search"
-              className="h-25 w-full rounded-md border border-input pl-10 pr-25 text-regular placeholder:text-xs"
-              value={keyword}
-              onChange={handleKeywordChange}
-              onKeyDown={handleSearchKeyUp}
-              placeholder="닉네임을 검색해주세요."
-            />
-            <button
-              type="button"
-              aria-label="search"
-              className="absolute right-5 top-1/2 -translate-y-1/2 cursor-pointer"
-              onClick={handleSearchClick}
-            >
-              <IoSearch className="size-15 text-emphasis hover:text-black" />
-            </button>
-            {keyword && !loading && (
-              <ul className="invisible absolute left-0 right-0 z-10 max-h-110 overflow-auto rounded-md border-2 bg-white group-focus-within:visible">
-                {data && data.length === 0 ? (
-                  <div className="h-20 border px-10 leading-8">&apos;{keyword}&apos; 의 검색 결과가 없습니다.</div>
-                ) : (
-                  data?.map((user) => (
-                    <li className="h-20 border" key={user.userId}>
-                      <button
-                        type="button"
-                        className="h-full w-full px-10 text-left hover:bg-sub"
-                        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                          e.currentTarget.blur();
-                          handleUserClick(user);
-                        }}
-                      >
-                        {user.nickname}
-                      </button>
-                    </li>
-                  ))
-                )}
-              </ul>
-            )}
-          </section>
-        </label>
-        <section className="flex w-full flex-wrap items-center gap-4">
-          {workers.map((user) => (
-            <div key={user.userId} className="flex items-center space-x-4 rounded-md bg-button px-5">
-              <RoleIcon roleName={user.roleName} />
-              <div>{user.nickname}</div>
-              <button type="button" aria-label="delete-worker" onClick={() => handleWorkerDeleteClick(user)}>
-                <IoMdCloseCircle className="text-close" />
+              <button
+                type="button"
+                aria-label="search"
+                className="absolute right-5 top-1/2 -translate-y-1/2 cursor-pointer"
+                onClick={handleSearchClick}
+              >
+                <IoSearch className="size-15 text-emphasis hover:text-black" />
               </button>
-            </div>
-          ))}
-        </section>
-      </div>
-
-      <label htmlFor="content" className="mb-20">
-        <h3 className="flex items-center space-x-2">
-          <span className="text-large">내용</span>
-          <ToggleButton id="preview" checked={preview} onChange={handlePreviewToggle} />
-        </h3>
-        {preview ? (
-          <CustomMarkdown markdown={watch('content')} />
-        ) : (
-          <textarea
-            id="content"
-            rows={10}
-            className="w-full border border-input p-10 placeholder:text-xs"
-            placeholder="마크다운 형식으로 입력해주세요."
-            {...register('content')}
-          />
-        )}
-      </label>
-
-      <label htmlFor="files">
-        <h3 className="text-large">첨부파일</h3>
-        <input type="file" id="files" className="h-0 w-0 opacity-0" multiple hidden onChange={handleFileChange} />
-        <section
-          className="flex cursor-pointer items-center gap-4 rounded-sl border-2 border-dashed border-input p-10"
-          onDrop={handleFileDrop}
-        >
-          <ul className="flex grow flex-wrap gap-4">
-            {files.map(({ id, file }) => (
-              <li key={id} className="flex items-center gap-4 rounded-md bg-button px-4 py-2">
-                <span>{file.name}</span>
-                <IoMdCloseCircle
-                  className="text-close"
-                  onClick={(e: React.MouseEvent<HTMLOrSVGElement>) => {
-                    e.preventDefault();
-                    handleFileDeleteClick(id);
-                  }}
-                />
-              </li>
+              {keyword && !loading && (
+                <ul className="invisible absolute left-0 right-0 z-10 max-h-110 overflow-auto rounded-md border-2 bg-white group-focus-within:visible">
+                  {data && data.length === 0 ? (
+                    <div className="h-20 border px-10 leading-8">&apos;{keyword}&apos; 의 검색 결과가 없습니다.</div>
+                  ) : (
+                    data?.map((user) => (
+                      <li className="h-20 border" key={user.userId}>
+                        <button
+                          type="button"
+                          className="h-full w-full px-10 text-left hover:bg-sub"
+                          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                            e.currentTarget.blur();
+                            handleUserClick(user);
+                          }}
+                        >
+                          {user.nickname}
+                        </button>
+                      </li>
+                    ))
+                  )}
+                </ul>
+              )}
+            </section>
+          </label>
+          <section className="flex w-full flex-wrap items-center gap-4">
+            {workers.map((user) => (
+              <div key={user.userId} className="flex items-center space-x-4 rounded-md bg-button px-5">
+                <RoleIcon roleName={user.roleName} />
+                <div>{user.nickname}</div>
+                <button type="button" aria-label="delete-worker" onClick={() => handleWorkerDeleteClick(user)}>
+                  <IoMdCloseCircle className="text-close" />
+                </button>
+              </div>
             ))}
-          </ul>
-          <div>
-            <GoPlusCircle className="size-15 text-[#5E5E5E]" />
-          </div>
-        </section>
-      </label>
-    </form>
+          </section>
+        </div>
+
+        <MarkdownEditor id="content" label="내용" contentFieldName="content" />
+
+        <FileDropZone
+          id="files"
+          label="첨부파일"
+          files={files}
+          onFileChange={handleFileChange}
+          onFileDrop={handleFileDrop}
+          onFileDeleteClick={handleFileDeleteClick}
+        />
+      </form>
+    </FormProvider>
   );
 }
diff --git a/src/types/FileType.tsx b/src/types/FileType.tsx
new file mode 100644
index 00000000..53946eed
--- /dev/null
+++ b/src/types/FileType.tsx
@@ -0,0 +1 @@
+export type CustomFile = { id: string; file: File };