diff --git a/frontend/src/app/add-shows/_components/add-shows-form.tsx b/frontend/src/app/add-shows/_components/add-shows-form.tsx
index ba7442a..5b3bd24 100644
--- a/frontend/src/app/add-shows/_components/add-shows-form.tsx
+++ b/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}
diff --git a/frontend/src/app/add-shows/_components/basic-info.tsx b/frontend/src/app/add-shows/_components/basic-info.tsx
deleted file mode 100644
index b5b22b7..0000000
--- a/frontend/src/app/add-shows/_components/basic-info.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import clsx from "clsx";
-import { FieldErrors, UseFormRegister } from "react-hook-form";
-
-import Input from "@/components/common/input";
-
-import { ShowType } from "../types/index";
-
-interface BasicInfoProps {
-  register: UseFormRegister<ShowType>;
-  errors: FieldErrors<ShowType>;
-}
-
-export default function BasicInfo({ register, errors }: BasicInfoProps) {
-  return (
-    <>
-      <Input
-        label="팝업/전시회 이름 *"
-        id="title"
-        className="flex h-58 w-full items-start gap-10 self-stretch rounded-6 border bg-white p-16 lg:w-full"
-        placeholder="팝업/전시회 이름을 입력해주세요"
-        type="text"
-        error={errors.title?.message}
-        {...register("title")}
-      />
-
-      <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>
-
-      <Input
-        label="입장료"
-        type="text"
-        className="flex h-58 w-351 items-start gap-10 rounded-6 border bg-white p-16 lg:w-full"
-        placeholder="입장료를 입력해주세요"
-        {...register("fee", { valueAsNumber: true })}
-      />
-    </>
-  );
-}
diff --git a/frontend/src/app/add-shows/_components/custom-tag-input.tsx b/frontend/src/app/add-shows/_components/custom-tag-input.tsx
new file mode 100644
index 0000000..a846462
--- /dev/null
+++ b/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";
diff --git a/frontend/src/app/add-shows/_components/date-time-select.tsx b/frontend/src/app/add-shows/_components/date-time-select.tsx
deleted file mode 100644
index 2504dba..0000000
--- a/frontend/src/app/add-shows/_components/date-time-select.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-"use client";
-
-import "react-datepicker/dist/react-datepicker.css";
-
-import clsx from "clsx";
-import DatePicker from "react-datepicker";
-import {
-  FieldErrors,
-  UseFormRegister,
-  UseFormSetValue,
-  UseFormWatch,
-} from "react-hook-form";
-
-import { ShowType } from "../types/index";
-
-interface DateTimeSectionProps {
-  register: UseFormRegister<ShowType>;
-  errors: FieldErrors<ShowType>;
-  setValue: UseFormSetValue<ShowType>;
-  watch: UseFormWatch<ShowType>;
-}
-
-export default function DateTimeSection({
-  register,
-  errors,
-  setValue,
-  watch,
-}: DateTimeSectionProps) {
-  const startDate = watch("startDate");
-  const endDate = watch("endDate");
-
-  const toISOWithTime = (date: Date): string => {
-    const withTime = new Date(date);
-    withTime.setHours(17, 7, 41, 789);
-    return withTime.toISOString();
-  };
-
-  const handleStartDateChange = (date: Date | null) => {
-    setValue("startDate", date ? toISOWithTime(date) : "");
-  };
-
-  const handleEndDateChange = (date: Date | null) => {
-    setValue("endDate", date ? toISOWithTime(date) : "");
-  };
-
-  const parseISODate = (isoString: string): Date | undefined => {
-    if (!isoString) return undefined;
-    const date = new Date(isoString);
-    return Number.isNaN(date.getTime()) ? undefined : date;
-  };
-
-  return (
-    <>
-      <div className="flex w-full gap-12 md:w-full lg:w-full">
-        <div className="flex-1">
-          <label htmlFor="startDate" className="mb-5 block text-16-600">
-            시작일 *
-          </label>
-          <DatePicker
-            id="startDate"
-            selected={parseISODate(startDate) || null}
-            onChange={handleStartDateChange}
-            className="flex h-58 w-full items-start gap-10 rounded-6 border bg-white p-12 md:w-340 lg:w-500"
-            placeholderText="시작일을 선택해주세요"
-            dateFormat="yyyy-MM-dd"
-          />
-          {errors.startDate?.message && (
-            <p className="text-14-400 text-red-500">
-              {errors.startDate.message}
-            </p>
-          )}
-        </div>
-        <div className="flex-1">
-          <label htmlFor="endDate" className="mb-5 block text-16-600">
-            종료일 *
-          </label>
-          <DatePicker
-            id="endDate"
-            selected={parseISODate(endDate) || null}
-            onChange={handleEndDateChange}
-            className="flex h-58 w-full items-start gap-10 rounded-6 border bg-white p-12 md:w-340 lg:w-540"
-            placeholderText="종료일을 선택해주세요"
-            dateFormat="yyyy-MM-dd"
-            minDate={parseISODate(startDate)}
-          />
-          {errors.endDate?.message && (
-            <p className="text-14-400 text-red-500">{errors.endDate.message}</p>
-          )}
-        </div>
-      </div>
-
-      <div className="w-full md:w-full lg:w-full">
-        <label htmlFor="openTimes" className="mb-5 block text-16-600">
-          운영시간 *
-        </label>
-        <textarea
-          id="openTimes"
-          className={clsx(
-            "h-90 w-full resize-none rounded-6 border p-16",
-            errors.openTimes && "border-red-500",
-          )}
-          placeholder="운영시간을 입력해주세요 (예: 평일 09:00 ~ 18:00)"
-          {...register("openTimes")}
-        />
-        {errors.openTimes?.message && (
-          <p className="text-14-400 text-red-500">{errors.openTimes.message}</p>
-        )}
-      </div>
-    </>
-  );
-}
diff --git a/frontend/src/app/add-shows/_components/description-input.tsx b/frontend/src/app/add-shows/_components/description-input.tsx
new file mode 100644
index 0000000..f07544e
--- /dev/null
+++ b/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";
diff --git a/frontend/src/app/add-shows/_components/end-date-input.tsx b/frontend/src/app/add-shows/_components/end-date-input.tsx
new file mode 100644
index 0000000..d979fe1
--- /dev/null
+++ b/frontend/src/app/add-shows/_components/end-date-input.tsx
@@ -0,0 +1,54 @@
+// ./end-date-input.tsx
+
+"use client";
+
+import "react-datepicker/dist/react-datepicker.css";
+
+import { memo } from "react";
+import DatePicker from "react-datepicker";
+import { FieldErrors, UseFormSetValue, UseFormWatch } from "react-hook-form";
+
+import { ShowType } from "../types/index";
+import { parseISODate, toISOWithTime } from "../utils/date-utils";
+
+interface EndDateInputProps {
+  errors: FieldErrors<ShowType>;
+  setValue: UseFormSetValue<ShowType>;
+  watch: UseFormWatch<ShowType>;
+}
+
+export default function EndDateInputComponent({
+  errors,
+  setValue,
+  watch,
+}: EndDateInputProps): JSX.Element {
+  const startDate = watch("startDate");
+  const endDate = watch("endDate");
+
+  const handleEndDateChange = (date: Date | null) => {
+    setValue("endDate", date ? toISOWithTime(date) : "");
+  };
+
+  return (
+    <div className="flex-1">
+      <label htmlFor="endDate" className="mb-5 block text-16-600">
+        종료일 *
+      </label>
+      <DatePicker
+        id="endDate"
+        selected={parseISODate(endDate) || null}
+        onChange={handleEndDateChange}
+        className="flex h-58 w-full items-start gap-10 rounded-6 border bg-white p-12 md:w-340 lg:w-540"
+        placeholderText="종료일을 선택해주세요"
+        dateFormat="yyyy-MM-dd"
+        minDate={parseISODate(startDate)}
+      />
+      {errors.endDate?.message && (
+        <p className="text-14-400 text-red-500">{errors.endDate.message}</p>
+      )}
+    </div>
+  );
+}
+
+const EndDateInput = memo(EndDateInputComponent);
+EndDateInput.displayName = "EndDateInput";
diff --git a/frontend/src/app/add-shows/_components/facilities-section.tsx b/frontend/src/app/add-shows/_components/facilities-selector.tsx
similarity index 100%
rename from frontend/src/app/add-shows/_components/facilities-section.tsx
rename to frontend/src/app/add-shows/_components/facilities-selector.tsx
diff --git a/frontend/src/app/add-shows/_components/fee-input.tsx b/frontend/src/app/add-shows/_components/fee-input.tsx
new file mode 100644
index 0000000..972f47e
--- /dev/null
+++ b/frontend/src/app/add-shows/_components/fee-input.tsx
@@ -0,0 +1,28 @@
+import { memo } from "react";
+import { FieldErrors, UseFormRegister } from "react-hook-form";
+
+import Input from "@/components/common/input";
+
+import { ShowType } from "../types";
+
+interface FeeInputProps {
+  register: UseFormRegister<ShowType>;
+  errors: FieldErrors<ShowType>;
+}
+
+export default function FeeInputComponent({
+  register,
+}: FeeInputProps): JSX.Element {
+  return (
+    <Input
+      label="입장료"
+      type="text"
+      className="flex h-58 w-351 items-start gap-10 rounded-6 border bg-white p-16 lg:w-full"
+      placeholder="입장료를 입력해주세요"
+      {...register("fee", { valueAsNumber: true })}
+    />
+  );
+}
+
+const FeeInput = memo(FeeInputComponent);
+FeeInput.displayName = "FeeInput";
diff --git a/frontend/src/app/add-shows/_components/open-time-input.tsx b/frontend/src/app/add-shows/_components/open-time-input.tsx
new file mode 100644
index 0000000..3197776
--- /dev/null
+++ b/frontend/src/app/add-shows/_components/open-time-input.tsx
@@ -0,0 +1,42 @@
+// ./open-times-input.tsx
+
+"use client";
+
+import clsx from "clsx";
+import { memo } from "react";
+import { FieldErrors, UseFormRegister } from "react-hook-form";
+
+import { ShowType } from "../types/index";
+
+interface OpenTimesInputProps {
+  register: UseFormRegister<ShowType>;
+  errors: FieldErrors<ShowType>;
+}
+
+export default function OpenTimesInputComponent({
+  register,
+  errors,
+}: OpenTimesInputProps): JSX.Element {
+  return (
+    <div className="w-full md:w-full lg:w-full">
+      <label htmlFor="openTimes" className="mb-5 block text-16-600">
+        운영시간 *
+      </label>
+      <textarea
+        id="openTimes"
+        className={clsx(
+          "h-90 w-full resize-none rounded-6 border p-16",
+          errors.openTimes && "border-red-500",
+        )}
+        placeholder="운영시간을 입력해주세요 (예: 평일 09:00 ~ 18:00)"
+        {...register("openTimes")}
+      />
+      {errors.openTimes?.message && (
+        <p className="text-14-400 text-red-500">{errors.openTimes.message}</p>
+      )}
+    </div>
+  );
+}
+
+const OpenTimesInput = memo(OpenTimesInputComponent);
+OpenTimesInput.displayName = "OpenTimesInput";
diff --git a/frontend/src/app/add-shows/_components/start-date-input.tsx b/frontend/src/app/add-shows/_components/start-date-input.tsx
new file mode 100644
index 0000000..ae27e81
--- /dev/null
+++ b/frontend/src/app/add-shows/_components/start-date-input.tsx
@@ -0,0 +1,54 @@
+// ./start-date-input.tsx
+
+"use client";
+
+import "react-datepicker/dist/react-datepicker.css";
+
+import { memo } from "react";
+import DatePicker from "react-datepicker";
+import { FieldErrors, UseFormSetValue, UseFormWatch } from "react-hook-form";
+
+import { ShowType } from "../types/index";
+import { parseISODate, toISOWithTime } from "../utils/date-utils";
+
+interface StartDateInputProps {
+  errors: FieldErrors<ShowType>;
+  setValue: UseFormSetValue<ShowType>;
+  watch: UseFormWatch<ShowType>;
+}
+
+function StartDateInputComponent({
+  errors,
+  setValue,
+  watch,
+}: StartDateInputProps): JSX.Element {
+  const startDate = watch("startDate");
+
+  const handleStartDateChange = (date: Date | null) => {
+    setValue("startDate", date ? toISOWithTime(date) : "");
+  };
+
+  return (
+    <div className="flex-1">
+      <label htmlFor="startDate" className="mb-5 block text-16-600">
+        시작일 *
+      </label>
+      <DatePicker
+        id="startDate"
+        selected={parseISODate(startDate) || null}
+        onChange={handleStartDateChange}
+        className="flex h-58 w-full items-start gap-10 rounded-6 border bg-white p-12 md:w-340 lg:w-500"
+        placeholderText="시작일을 선택해주세요"
+        dateFormat="yyyy-MM-dd"
+      />
+      {errors.startDate?.message && (
+        <p className="text-14-400 text-red-500">{errors.startDate.message}</p>
+      )}
+    </div>
+  );
+}
+
+const StartDateInput = memo(StartDateInputComponent);
+StartDateInput.displayName = "StartDateInput";
+
+export default StartDateInput;
diff --git a/frontend/src/app/add-shows/_components/tag-select.tsx b/frontend/src/app/add-shows/_components/tag-select.tsx
deleted file mode 100644
index f5d99e9..0000000
--- a/frontend/src/app/add-shows/_components/tag-select.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { FieldErrors, UseFormRegister, UseFormSetValue } from "react-hook-form";
-
-import { ShowType } from "../types/index";
-import PublicTagSelect from "./select-public-tags";
-
-interface TagSectionProps {
-  register: UseFormRegister<ShowType>;
-  errors: FieldErrors<ShowType>;
-  tagInput: string;
-  setTagInput: (value: string) => void;
-  selectedTags: string[];
-  setSelectedTags: (tags: string[]) => void;
-  setValue: UseFormSetValue<ShowType>;
-}
-
-export default function TagSection({
-  register,
-  errors,
-  tagInput,
-  setTagInput,
-  selectedTags,
-  setSelectedTags,
-  setValue,
-}: TagSectionProps) {
-  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 (
-    <>
-      <PublicTagSelect
-        register={register}
-        setValue={setValue}
-        error={errors.publicTag?.message}
-        name="publicTag"
-      />
-
-      <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>
-    </>
-  );
-}
diff --git a/frontend/src/app/add-shows/_components/title-input.tsx b/frontend/src/app/add-shows/_components/title-input.tsx
new file mode 100644
index 0000000..028d076
--- /dev/null
+++ b/frontend/src/app/add-shows/_components/title-input.tsx
@@ -0,0 +1,31 @@
+import { memo } from "react";
+import { FieldErrors, UseFormRegister } from "react-hook-form";
+
+import Input from "@/components/common/input";
+
+import { ShowType } from "../types";
+
+interface TitleInputProps {
+  register: UseFormRegister<ShowType>;
+  errors: FieldErrors<ShowType>;
+}
+
+export default function TitleInputComponent({
+  register,
+  errors,
+}: TitleInputProps): JSX.Element {
+  return (
+    <Input
+      label="팝업/전시회 이름 *"
+      id="title"
+      className="flex h-58 w-full items-start gap-10 self-stretch rounded-6 border bg-white p-16 lg:w-full"
+      placeholder="팝업/전시회 이름을 입력해주세요"
+      type="text"
+      error={errors.title?.message}
+      {...register("title")}
+    />
+  );
+}
+
+const TitleInput = memo(TitleInputComponent);
+TitleInput.displayName = "TitleInput";
diff --git a/frontend/src/app/add-shows/utils/date-utils.ts b/frontend/src/app/add-shows/utils/date-utils.ts
new file mode 100644
index 0000000..1ea39f5
--- /dev/null
+++ b/frontend/src/app/add-shows/utils/date-utils.ts
@@ -0,0 +1,11 @@
+export const toISOWithTime = (date: Date): string => {
+  const withTime = new Date(date);
+  withTime.setHours(17, 7, 41, 789);
+  return withTime.toISOString();
+};
+
+export const parseISODate = (isoString: string): Date | undefined => {
+  if (!isoString) return undefined;
+  const date = new Date(isoString);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+};