refactor: 각각 컴포넌트로 분리

frontend/src/app/add-shows/_components/add-shows-form.tsx

@@ -8,13 +8,18 @@ import { useForm } from "react-hook-form";
 
 import { ShowType } from "../types";
 import { addShowForm } from "../validations/schema";
-import BasicInfo from "./basic-info";
-import DateTimeSection from "./date-time-select";
-import FacilitiesSection from "./facilities-section";
+import CustomTagInput from "./custom-tag-input";
+import DescriptionInput from "./description-input";
+import EndDateInput from "./end-date-input";
+import FacilitiesSection from "./facilities-selector";
+import FeeInput from "./fee-input";
 import LocationSection from "./location-select";
-import TagSection from "./tag-select";
+import OpenTimesInput from "./open-time-input";
+import PublicTagSelect from "./select-public-tags";
+import StartDateInput from "./start-date-input";
+import TitleInput from "./title-input";
 
-export default function AddShowsForm() {
+export default function AddShowsForm(): JSX.Element {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [tagInput, setTagInput] = useState("");
@@ -70,25 +75,31 @@ export default function AddShowsForm() {
     >
       <h1 className="text-24-700">팝업/전시회 등록</h1>
 
-      <BasicInfo register={register} errors={errors} />
+      <TitleInput register={register} errors={errors} />
+      <DescriptionInput register={register} errors={errors} />
+      <FeeInput register={register} errors={errors} />
 
-      <DateTimeSection
+      <div className="flex w-full gap-12 md:w-full lg:w-full">
+        <StartDateInput errors={errors} setValue={setValue} watch={watch} />
+        <EndDateInput errors={errors} setValue={setValue} watch={watch} />
+      </div>
+      <OpenTimesInput register={register} errors={errors} />
+
+      <LocationSection
         register={register}
         errors={errors}
         setValue={setValue}
         watch={watch}
       />
 
-      <LocationSection
+      <PublicTagSelect
         register={register}
-        errors={errors}
         setValue={setValue}
-        watch={watch}
+        error={errors.publicTag?.message}
+        name="publicTag"
       />
 
-      <TagSection
-        register={register}
-        errors={errors}
+      <CustomTagInput
         tagInput={tagInput}
         setTagInput={setTagInput}
         selectedTags={selectedTags}
@@ -97,6 +108,7 @@ export default function AddShowsForm() {
       />
 
       <FacilitiesSection register={register} />
+
       <button
         type="submit"
         disabled={!isValid || isLoading}

frontend/src/app/add-shows/_components/custom-tag-input.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { memo } from "react";
+import { UseFormSetValue } from "react-hook-form";
+
+import { ShowType } from "../types/index";
+
+interface CustomTagInputProps {
+  tagInput: string;
+  setTagInput: (value: string) => void;
+  selectedTags: string[];
+  setSelectedTags: (tags: string[]) => void;
+  setValue: UseFormSetValue<ShowType>;
+}
+
+export default function CustomTagInputComponent({
+  tagInput,
+  setTagInput,
+  selectedTags,
+  setSelectedTags,
+  setValue,
+}: CustomTagInputProps): JSX.Element {
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && tagInput.trim() !== "") {
+      e.preventDefault();
+      if (!selectedTags.includes(tagInput.trim())) {
+        const newTags = [...selectedTags, tagInput.trim()];
+        setSelectedTags(newTags);
+        setValue("tags", newTags);
+      }
+      setTagInput("");
+    }
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    const newTags = selectedTags.filter((tag) => tag !== tagToRemove);
+    setSelectedTags(newTags);
+    setValue("tags", newTags);
+  };
+
+  return (
+    <div className="w-full md:w-full lg:w-full">
+      <label htmlFor="tag" className="mb-5 block text-16-600">
+        태그
+      </label>
+      <input
+        id="tag"
+        type="text"
+        value={tagInput}
+        onChange={(e) => setTagInput(e.target.value)}
+        onKeyDown={handleAddTag}
+        placeholder="태그를 입력하고 Enter를 누르세요"
+        className="flex h-58 w-full items-start gap-10 rounded-6 border bg-white p-16"
+      />
+      <div className="mt-5 flex flex-wrap gap-5">
+        {selectedTags.map((tag) => (
+          <span
+            key={tag}
+            className="flex items-center gap-1 rounded-full bg-blue-100 px-8 py-4 text-16-400 text-blue-800"
+          >
+            {tag}
+            <button
+              type="button"
+              onClick={() => handleRemoveTag(tag)}
+              className="text-blue-800 hover:text-blue-900"
+            >
+              ×
+            </button>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const CustomTagInput = memo(CustomTagInputComponent);
+CustomTagInput.displayName = "CustomTagInput";

frontend/src/app/add-shows/_components/description-input.tsx

@@ -0,0 +1,38 @@
+import clsx from "clsx";
+import { memo } from "react";
+import { FieldErrors, UseFormRegister } from "react-hook-form";
+
+import { ShowType } from "../types";
+
+interface DescriptionInputProps {
+  register: UseFormRegister<ShowType>;
+  errors: FieldErrors<ShowType>;
+}
+
+export default function DescriptionInputComponent({
+  register,
+  errors,
+}: DescriptionInputProps): JSX.Element {
+  return (
+    <div className="w-full md:w-full lg:w-full">
+      <label htmlFor="description" className="mb-5 block text-16-600">
+        설명 *
+      </label>
+      <textarea
+        id="description"
+        className={clsx(
+          "h-138 w-full resize-none rounded-6 border p-16",
+          errors.description && "border-red-500",
+        )}
+        placeholder="팝업/전시회 설명을 입력해주세요"
+        {...register("description")}
+      />
+      {errors.description?.message && (
+        <p className="text-14-400 text-red-500">{errors.description.message}</p>
+      )}
+    </div>
+  );
+}
+
+const DescriptionInput = memo(DescriptionInputComponent);
+DescriptionInput.displayName = "DescriptionInput";