From e9d88c9304d19935e60446dafa694fcd0456d484 Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Sun, 22 Dec 2024 03:11:05 +0900
Subject: [PATCH 01/15] =?UTF-8?q?Feat:=20Pagination=20=EA=B3=B5=ED=86=B5?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- antd 사용에서 공통 컴포넌트로 변경
- AdminTopicContent의 Pagination에 적용
- AdminInstanceContent의 Pagination에 적용
---
 .../AdminInstanceContent.tsx                  |  27 ++---
 .../AdminTopicContent/AdminTopicContent.tsx   |  27 ++---
 src/components/Common/Pagination/index.tsx    | 113 ++++++++++++++++++
 3 files changed, 137 insertions(+), 30 deletions(-)
 create mode 100644 src/components/Common/Pagination/index.tsx

diff --git a/src/components/Admin/AdminInstance/InstanceListComponent/AdminInstanceContent/AdminInstanceContent.tsx b/src/components/Admin/AdminInstance/InstanceListComponent/AdminInstanceContent/AdminInstanceContent.tsx
index 77909105..bb719af4 100644
--- a/src/components/Admin/AdminInstance/InstanceListComponent/AdminInstanceContent/AdminInstanceContent.tsx
+++ b/src/components/Admin/AdminInstance/InstanceListComponent/AdminInstanceContent/AdminInstanceContent.tsx
@@ -3,14 +3,13 @@ import CreateBtn from "@/components/Admin/CreateBtn/CreateBtn";
 import { useInstanceListQuery } from "@/hooks/queries/useAdminInstanceQuery";
 import { useTopicDetailQuery } from "@/hooks/queries/useAdminTopicQuery";
 import { decrypt } from "@/hooks/useCrypto";
-import { Pagination } from "antd";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useLocation } from "react-router-dom";
 import InstanceListComponent from "../InstanceListComponent";
+import { Pagination } from "@/components/Common/Pagination";
 
 function AdminInstanceContent() {
-  const [pageNumber, setPageNumber] = useState<number>(0);
-  const [totalNumber, setTotalNumber] = useState<number>(0);
+  const [pageNumber, setPageNumber] = useState<number>(1);
   const location = useLocation();
 
   const topicId = location.state.topicId;
@@ -27,10 +26,6 @@ function AdminInstanceContent() {
     setPageNumber(page);
   };
 
-  useEffect(() => {
-    setTotalNumber(instanceContent.totalElements);
-  }, [instanceContent]);
-
   return (
     <>
       <AdminListLayOut.MainContent>
@@ -43,13 +38,15 @@ function AdminInstanceContent() {
         </>
       </AdminListLayOut.MainContent>
       <AdminListLayOut.PageNation>
-        <Pagination
-          current={pageNumber}
-          pageSize={5}
-          total={totalNumber}
-          onChange={handlePageChange}
-          className="mt-10"
-        />
+        {instanceContent.totalElements > 0 && (
+          <Pagination
+            currentPage={pageNumber}
+            totalPages={instanceContent.totalPages}
+            limit={5}
+            onPageChange={handlePageChange}
+            className="mt-10"
+          />
+        )}
       </AdminListLayOut.PageNation>
     </>
   );
diff --git a/src/components/Admin/AdminTopic/TopicListComponent/AdminTopicContent/AdminTopicContent.tsx b/src/components/Admin/AdminTopic/TopicListComponent/AdminTopicContent/AdminTopicContent.tsx
index 32b43de4..4a73b245 100644
--- a/src/components/Admin/AdminTopic/TopicListComponent/AdminTopicContent/AdminTopicContent.tsx
+++ b/src/components/Admin/AdminTopic/TopicListComponent/AdminTopicContent/AdminTopicContent.tsx
@@ -1,13 +1,12 @@
 import { AdminListLayOut } from "@/components/Admin/AdminLayOut/AdminListLayOut/AdminListLayOut";
 import CreateBtn from "@/components/Admin/CreateBtn/CreateBtn";
-import { Pagination } from "antd";
 import TopicListComponents from "@/components/Admin/AdminTopic/TopicListComponent/TopicListComponent";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useTopicListQuery } from "@/hooks/queries/useAdminTopicQuery";
+import { Pagination } from "@/components/Common/Pagination";
 
 function AdminTopicContent() {
-  const [pageNumber, setPageNumber] = useState<number>(0);
-  const [totalNumber, setTotalNumber] = useState<number>(0);
+  const [pageNumber, setPageNumber] = useState<number>(1);
 
   const { data: adminData } = useTopicListQuery({
     pageNumber: pageNumber - 1,
@@ -18,10 +17,6 @@ function AdminTopicContent() {
     setPageNumber(page);
   };
 
-  useEffect(() => {
-    setTotalNumber(adminData.totalElements);
-  }, [adminData]);
-
   return (
     <>
       <AdminListLayOut.MainContent>
@@ -31,13 +26,15 @@ function AdminTopicContent() {
         </>
       </AdminListLayOut.MainContent>
       <AdminListLayOut.PageNation>
-        <Pagination
-          current={pageNumber}
-          pageSize={5}
-          total={totalNumber}
-          onChange={handlePageChange}
-          className="mt-10"
-        />
+        {adminData.totalElements > 0 && (
+          <Pagination
+            currentPage={pageNumber}
+            totalPages={adminData.totalPages}
+            limit={5}
+            onPageChange={handlePageChange}
+            className="mt-10"
+          />
+        )}
       </AdminListLayOut.PageNation>
     </>
   );
diff --git a/src/components/Common/Pagination/index.tsx b/src/components/Common/Pagination/index.tsx
new file mode 100644
index 00000000..d1cccd36
--- /dev/null
+++ b/src/components/Common/Pagination/index.tsx
@@ -0,0 +1,113 @@
+import { useState } from "react";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  limit: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+export const Pagination = ({
+  currentPage,
+  totalPages,
+  limit,
+  onPageChange,
+  className = "",
+}: PaginationProps) => {
+  const getVisibleStartPage = (targetPage: number, limit: number) => {
+    return Math.floor((targetPage - 1) / limit) * limit + 1;
+  };
+
+  const [visibleStartPage, setVisibleStartPage] = useState(
+    getVisibleStartPage(currentPage + 1, limit)
+  );
+  const visibleEndPage = Math.min(visibleStartPage + limit - 1, totalPages);
+
+  const pageNumbers = Array.from(
+    { length: visibleEndPage - visibleStartPage + 1 },
+    (_, i) => visibleStartPage + i
+  );
+
+  const onClickPrevPage = () => {
+    if (currentPage > 1) {
+      const newPage = currentPage - 1;
+      onPageChange(newPage);
+      setVisibleStartPage(getVisibleStartPage(newPage, limit));
+    }
+  };
+
+  const onClickNextPage = () => {
+    if (currentPage < totalPages) {
+      const newPage = currentPage + 1;
+      onPageChange(newPage);
+      setVisibleStartPage(getVisibleStartPage(newPage, limit));
+    }
+  };
+
+  const onClickPage = (page: number) => {
+    onPageChange(page);
+    setVisibleStartPage(getVisibleStartPage(page, limit));
+  };
+
+  const PageTurner = () => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="12"
+        height="12"
+        viewBox="0 0 12 19"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M7.58342 9.07L0 2.07287L1.72002 0L11.55 9.07L1.72002 18.14L0 16.0671L7.58342 9.07Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  };
+
+  const pageButtonClass = `rounded-md disabled:bg-white disabled:border-gray-300 disabled:text-gray-300 text-_coral-70 border-_coral-70 border w-10  flex justify-center items-center hover:bg-_coral-70 hover:text-white`;
+
+  return (
+    <div className={`flex justify-center ${className}`}>
+      <div className="flex h-10 gap-5">
+        <button
+          onClick={onClickPrevPage}
+          disabled={currentPage === 1}
+          className={pageButtonClass}
+          aria-label="Previous page"
+        >
+          <div className="rotate-180">
+            <PageTurner />
+          </div>
+        </button>
+
+        <div className="flex h-full gap-2">
+          {pageNumbers.map((page) => (
+            <button
+              key={page}
+              onClick={() => onClickPage(page)}
+              className={`${pageButtonClass} ${
+                page === currentPage && "bg-_coral-70 text-white cursor-default"
+              } `}
+            >
+              <div>{page}</div>
+            </button>
+          ))}
+        </div>
+
+        <button
+          onClick={onClickNextPage}
+          disabled={currentPage === totalPages}
+          className={pageButtonClass}
+          aria-label="Next page"
+        >
+          <PageTurner />
+        </button>
+      </div>
+    </div>
+  );
+};

From b04784b3731196409043ed1b5a889668792c46be Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Mon, 23 Dec 2024 15:25:04 +0900
Subject: [PATCH 02/15] =?UTF-8?q?Feat:=20InstanceCreate=EC=9D=98=20Button,?=
 =?UTF-8?q?=20DatePicker,=20Form,=20Image,=20Input,=20Select,=20Upload,=20?=
 =?UTF-8?q?UploadProps=EC=9D=84=20antd=20=EC=97=86=EC=9D=B4=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   4 +
 src/components/Common/Form/index.tsx          | 151 ++++++
 src/components/Common/Pagination/index.tsx    |   4 +-
 src/index.css                                 |  32 ++
 .../InstanceCreate/InstanceCreate.tsx         | 444 ++++++++----------
 src/utils/makeFileToBase64Image.ts            |  24 +
 yarn.lock                                     |  78 +++
 7 files changed, 488 insertions(+), 249 deletions(-)
 create mode 100644 src/components/Common/Form/index.tsx
 create mode 100644 src/utils/makeFileToBase64Image.ts

diff --git a/package.json b/package.json
index 577fdf64..9a41a71c 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "antd": "^5.12.5",
     "axios": "^1.6.3",
     "crypto-js": "^4.2.0",
+    "date-fns": "^4.1.0",
     "formik": "^2.4.5",
     "modal": "^1.2.0",
     "moment": "^2.30.1",
@@ -33,9 +34,11 @@
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-custom-scrollbars": "^4.2.1",
+    "react-datepicker": "^7.5.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",
     "react-facebook-login": "^4.1.1",
+    "react-hook-form": "^7.54.2",
     "react-intersection-observer": "^9.8.1",
     "react-modal": "^3.16.1",
     "react-query": "^3.39.3",
@@ -60,6 +63,7 @@
     "@types/crypto-js": "^4.2.2",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.43",
+    "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^18.2.17",
     "@types/react-query": "^1.2.9",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
diff --git a/src/components/Common/Form/index.tsx b/src/components/Common/Form/index.tsx
new file mode 100644
index 00000000..597e5792
--- /dev/null
+++ b/src/components/Common/Form/index.tsx
@@ -0,0 +1,151 @@
+import {
+  InputHTMLAttributes,
+  ReactNode,
+  SelectHTMLAttributes,
+  TextareaHTMLAttributes,
+} from "react";
+import { FieldError, Merge, UseFormRegisterReturn } from "react-hook-form";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  id: string;
+  label: string;
+  error?: FieldError;
+  registration?: UseFormRegisterReturn; // optional로 변경
+  children?: ReactNode;
+}
+
+export const Input = ({
+  id,
+  label,
+  error,
+  registration,
+  children,
+  ...props
+}: InputProps) => {
+  // registration이 있을 때만 destructuring
+  const { ref, ...restRegistration } = registration || {};
+
+  return (
+    <div className="w-full flex flex-col gap-2">
+      <div className="flex gap-4 text-[1.4rem]">
+        <label
+          htmlFor={id}
+          className="flex shrink-0 justify-center items-center"
+        >
+          {label}
+          {props.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        {children ? (
+          children
+        ) : (
+          <input
+            id={id}
+            ref={ref}
+            className="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            {...restRegistration}
+            {...props}
+          />
+        )}
+      </div>
+      {error && (
+        <p className="mt-1 text-md text-red-500 text-right">{error.message}</p>
+      )}
+    </div>
+  );
+};
+
+interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  id: string;
+  label: string;
+  error?: FieldError;
+  registration: UseFormRegisterReturn;
+}
+
+export const TextArea = ({
+  id,
+  label,
+  error,
+  registration,
+  ...props
+}: TextAreaProps) => {
+  const { ref, ...restRegistration } = registration;
+
+  return (
+    <div className="w-full flex flex-col gap-2">
+      <div className="flex gap-4 text-[1.4rem]">
+        <label
+          htmlFor={id}
+          className="flex shrink-0 justify-center items-center"
+        >
+          {label}
+          {props.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <textarea
+          id={id}
+          ref={ref}
+          {...restRegistration}
+          {...props}
+          className="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      {error && (
+        <p className="mt-1 text-md text-red-500 text-right">{error.message}</p>
+      )}
+    </div>
+  );
+};
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  id: string;
+  label: string;
+  options: Option[];
+  error?: FieldError | Merge<FieldError, (FieldError | undefined)[]>;
+  registration: UseFormRegisterReturn;
+}
+
+export const Select = ({
+  id,
+  label,
+  options,
+  error,
+  registration,
+  ...props
+}: SelectProps) => {
+  const { ref, ...restRegistration } = registration;
+
+  return (
+    <div className="w-full flex flex-col gap-2">
+      <div className="flex gap-4 text-[1.4rem]">
+        <label
+          htmlFor={id}
+          className="flex shrink-0 justify-center items-center"
+        >
+          {label}
+          {props.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <select
+          id={id}
+          ref={ref}
+          multiple={props.multiple}
+          className="w-full p-2 border rounded-lg"
+          {...restRegistration}
+          {...props}
+        >
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+      {error && (
+        <p className="mt-1 text-md text-red-500 text-right">{error.message}</p>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Common/Pagination/index.tsx b/src/components/Common/Pagination/index.tsx
index d1cccd36..3a2d4b93 100644
--- a/src/components/Common/Pagination/index.tsx
+++ b/src/components/Common/Pagination/index.tsx
@@ -60,8 +60,8 @@ export const Pagination = ({
         fill="currentColor"
       >
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M7.58342 9.07L0 2.07287L1.72002 0L11.55 9.07L1.72002 18.14L0 16.0671L7.58342 9.07Z"
           fill="currentColor"
         />
diff --git a/src/index.css b/src/index.css
index 167ec116..dbc94341 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,6 +27,38 @@ html {
   overflow: hidden;
 }
 
+.react-datepicker-wrapper {
+  width: 100%;
+}
+
+.react-datepicker-popper .react-datepicker {
+  font-size: 1.2rem;
+  width: 100%;
+}
+
+.react-datepicker-popper .react-datepicker__header {
+  padding: 1rem;
+}
+
+.react-datepicker-popper .react-datepicker__month {
+  margin: 1rem;
+}
+
+.react-datepicker-popper .react-datepicker__day-name,
+.react-datepicker-popper .react-datepicker__day {
+  width: 4rem;
+  height: 4rem;
+  line-height: 4rem;
+}
+
+.react-datepicker-popper .react-datepicker__current-month {
+  font-size: 1.6rem;
+}
+
+.react-datepicker-popper .react-datepicker__navigation {
+  top: 1rem;
+}
+
 @font-face {
   font-family: "RobotoMedium";
   src: url("./assets/font/subset-Roboto-Medium.ttf") format("truetype");
diff --git a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
index e206f1f4..f0022eb8 100644
--- a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
+++ b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
@@ -1,19 +1,12 @@
-import {
-  Button,
-  DatePicker,
-  Form,
-  Image,
-  Input,
-  Select,
-  Upload,
-  UploadProps,
-} from "antd";
-import { UploadOutlined } from "@ant-design/icons";
 import "@/utils/antdCheck.module.css";
 import moment from "moment";
-import { useEffect, useRef, useState } from "react";
-import Loading from "@/components/Common/Loading/Loading";
+import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import { Controller, useForm } from "react-hook-form";
+import { ko } from "date-fns/locale";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import Loading from "@/components/Common/Loading/Loading";
 import { decrypt } from "@/hooks/useCrypto";
 import AdminFormLayOut from "@/components/Admin/AdminLayOut/AdminFormLayOut/AdminFormLayOut";
 import {
@@ -21,8 +14,15 @@ import {
   usePostInstanceFileCreate,
 } from "@/hooks/queries/useAdminInstanceQuery";
 import { useTopicDetailQuery } from "@/hooks/queries/useAdminTopicQuery";
+import { Input, Select, TextArea } from "@/components/Common/Form/index";
+import { ModalLayer } from "@/components/Common/Modal/Modal";
+import { useModalStore } from "@/stores/modalStore";
+import { interestsOption } from "@/data/InterestData";
+import { makeFileToBase64Image } from "@/utils/makeFileToBase64Image";
 
-type instanceCreateData = {
+type DateRange = [Date | null, Date | null];
+
+interface InstanceCreateData {
   topicId: number;
   instanceId: number;
   title: string;
@@ -33,86 +33,86 @@ type instanceCreateData = {
   notice: string;
   startedAt: string;
   completedAt: string;
-  ranger: {
-    $d: string;
-  }[];
-  fileResponse: {
-    fileId: number;
-    accessURI: string;
-    originFileObj: any;
-  }[];
-};
+  dateRange: DateRange;
+  image: FileList;
+}
 
 const InstanceCreate = () => {
   const { id } = useParams();
-  const [form] = Form.useForm();
   const decryptTopicId = decrypt(id);
-  const valuesRef = useRef<instanceCreateData | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const { setModal } = useModalStore();
 
   const { data: adminDetail } = useTopicDetailQuery({
     topicId: decryptTopicId,
   });
 
-  const title = adminDetail?.title;
-  const description = adminDetail?.description;
-  const notice = adminDetail?.notice;
-  const tags = adminDetail?.tags;
-  const tagsArray = tags ? tags.split(",") : [];
-  const point = adminDetail?.pointPerPerson;
+  const { mutate: instanceFileCreate, isLoading: instanceFileCreateLoading } =
+    usePostInstanceFileCreate();
+
+  const defaultValues: Partial<InstanceCreateData> = {
+    title: adminDetail?.title || "",
+    description: adminDetail?.description || "",
+    notice: adminDetail?.notice || "",
+    tags: adminDetail?.tags?.split(",") || [],
+    pointPerPerson: adminDetail?.pointPerPerson || 0,
+    certMethod: "",
+    dateRange: [null, null],
+    image: adminDetail.accessURI || "",
+  };
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<InstanceCreateData>({ defaultValues });
+
+  const image = watch("image");
+
+  const getTomorrowDate = (today: Date) => {
+    const tomorrow = new Date(today);
+    tomorrow.setDate(today.getDate() + 1);
+    return tomorrow;
+  };
+
+  const formatDateRange = (data: InstanceCreateData) => ({
+    formmatStartDate: moment(data.dateRange[0]).format("YYYY-MM-DDT00:00:00"),
+    formmatEndDate: moment(data.dateRange[1]).format("YYYY-MM-DDT23:59:59"),
+  });
 
   const onSuccessUsePostInstance = (res: any) => {
-    if (valuesRef.current) {
-      const instanceFile = {
-        instanceImg: valuesRef.current.fileResponse[0]?.originFileObj,
-        instanceId: res,
-      };
-      instanceFileCreate(instanceFile);
-      alert("인스턴스가 생성되었습니다.");
+    const file = watch("image")?.[0];
+    if (!file) return;
 
-      form.setFieldsValue({
-        title: adminDetail?.title,
-        description: adminDetail?.description,
-        notice: adminDetail?.notice,
-        tags: tagsArray,
-        point: adminDetail?.pointPerPerson,
-        certMethod: "",
-        ranger: "",
-      });
-    }
+    instanceFileCreate({ instanceImg: file, instanceId: res });
+    alert("인스턴스가 생성되었습니다.");
+    reset();
   };
 
   const { mutate: instanceCreate, isLoading: instanceCreateLoading } =
     usePostInstanceCreate({
       onSuccess: onSuccessUsePostInstance,
     });
-  const { mutate: instanceFileCreate, isLoading: instanceFileCreateLoading } =
-    usePostInstanceFileCreate();
-
-  const isLoading = instanceCreateLoading || instanceFileCreateLoading;
 
-  const instanceSumbit = (values: instanceCreateData) => {
-    valuesRef.current = values;
-    if (!valuesRef.current?.fileResponse[0]?.originFileObj) {
+  const instanceSumbit = (data: InstanceCreateData) => {
+    if (!data?.image?.[0]) {
       alert("이미지를 설정해주세요");
       return;
     }
 
-    const tagString = values.tags.join();
-    const formmatStartDate = moment(values.ranger[0].$d).format(
-      "YYYY-MM-DDT00:00:00"
-    );
+    const { formmatStartDate, formmatEndDate } = formatDateRange(data);
 
-    const formmatEndDate = moment(values.ranger[1].$d).format(
-      "YYYY-MM-DDT23:59:59"
-    );
     const instanceData = {
       topicId: decryptTopicId,
-      instanceTitle: values.title,
-      instanceDesc: values.description,
-      instanceNotice: values.notice,
-      instanceCertMethod: values.certMethod,
-      instanceTags: tagString,
-      instancePoint: values.pointPerPerson,
+      instanceTitle: data.title,
+      instanceDesc: data.description,
+      instanceNotice: data.notice,
+      instanceCertMethod: data.certMethod,
+      instanceTags: data.tags.join(),
+      instancePoint: data.pointPerPerson,
       instanceRangeStart: formmatStartDate,
       instanceRangeEnd: formmatEndDate,
     };
@@ -120,194 +120,144 @@ const InstanceCreate = () => {
     instanceCreate(instanceData);
   };
 
-  useEffect(() => {
-    form.setFieldsValue({
-      title: adminDetail?.title,
-      description: adminDetail?.description,
-      notice: adminDetail?.notice,
-      tags: tagsArray,
-      point: adminDetail?.pointPerPerson,
-    });
-  }, [adminDetail, form]);
-
-  return (
-    <div>
-      {isLoading ? (
-        <Loading />
-      ) : (
-        <AdminFormLayOut title={"인스턴스 생성 페이지"} instanceTokken={true}>
-          <Form
-            form={form}
-            onFinish={instanceSumbit}
-            className="w-full max-w-[1200px]"
-          >
-            <FormTitle title={title} />
-            <FormDesc description={description} notice={notice} />
-            <FormImg />
-            <FormInterest tags={tagsArray} />
-            <FormPoint point={point} />
-            <FormRangePicker />
-            <SubmitButtom />
-          </Form>
-        </AdminFormLayOut>
-      )}
-    </div>
-  );
-};
-
-const FormTitle = ({ title }: { title: string | undefined }) => {
-  return (
-    <>
-      <Form.Item label="제목" name="title" initialValue={title}>
-        <Input />
-      </Form.Item>
-    </>
-  );
-};
-const FormDesc = ({
-  description,
-  notice,
-}: {
-  description: string | undefined;
-  notice: string | undefined;
-}) => {
-  const [certMethod, setCertMethod] = useState("");
-  const certMethodHandle = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setCertMethod(e.target.value);
+  const openImagePreview = () => {
+    setModal(
+      <ModalLayer>
+        <img src={imagePreview || ""} alt="선택한 이미지" />
+      </ModalLayer>
+    );
   };
-  return (
-    <>
-      <Form.Item
-        label="간단한 소개"
-        name="description"
-        initialValue={description}
-      >
-        <Input.TextArea allowClear showCount />
-      </Form.Item>
-      <Form.Item label="유의사항" name="notice" initialValue={notice}>
-        <Input.TextArea allowClear showCount />
-      </Form.Item>
-      <Form.Item
-        label="인증방법"
-        validateStatus={certMethod ? "success" : "error"}
-        hasFeedback
-        help={certMethod ? null : "인증방법을 입력해주세요"}
-        name="certMethod"
-      >
-        <Input.TextArea allowClear showCount onChange={certMethodHandle} />
-      </Form.Item>
-    </>
-  );
-};
-const FormImg = () => {
-  const [visible, setVisible] = useState(false);
-  const [imageSrc, setImageSrc] = useState("");
 
-  const normFile = (e: any) => {
-    if (Array.isArray(e)) {
-      return e;
-    }
-    if (e && e.fileList && e.fileList.length > 0) {
-      const file = e.fileList[e.fileList.length - 1];
-      if (file && file.originFileObj) {
-        const imageUrl = URL.createObjectURL(file.originFileObj);
-        setImageSrc(imageUrl);
+  useEffect(() => {
+    const file = image?.[0];
+    const loadPreview = async () => {
+      try {
+        const result = await makeFileToBase64Image(file);
+        setImagePreview(result);
+      } catch (error) {
+        alert(error);
       }
-    }
-    return e?.fileList;
-  };
+    };
+    loadPreview();
+  }, [image]);
 
-  const props: UploadProps = {
-    beforeUpload: () => {
-      return false;
-    },
-  };
+  const isLoading = instanceCreateLoading || instanceFileCreateLoading;
+
+  if (isLoading) return <Loading />;
 
   return (
-    <>
-      <Form.Item
-        name="fileResponse"
-        label="챌린지 이미지"
-        valuePropName="fileResponse"
-        getValueFromEvent={normFile}
-        initialValue={""}
+    <AdminFormLayOut title="인스턴스 생성 페이지" instanceTokken={true}>
+      <form
+        onSubmit={handleSubmit(instanceSumbit)}
+        className="w-full flex flex-col gap-4"
       >
-        <Upload {...props}>
-          <div className="w-[5rem] h-[5rem]">
-            <Button icon={<UploadOutlined />}>사진을 선택해주세요</Button>
-          </div>
-        </Upload>
-      </Form.Item>
-      <Form.Item label="이미지 미리보기">
-        <Button type="dashed" onClick={() => setVisible(true)}>
-          이미지 미리보기
-        </Button>
-        <Image
-          width={200}
-          style={{ display: "none" }}
-          src={imageSrc}
-          preview={{
-            visible,
-            src: imageSrc,
-            onVisibleChange: (value) => {
-              setVisible(value);
-            },
-          }}
+        <Input
+          id="title"
+          label="제목"
+          registration={register("title", { required: "제목을 입력해주세요" })}
+          error={errors.title}
+          required
+        />
+        <TextArea
+          id="description"
+          label="간단한 소개"
+          registration={register("description", {
+            required: "간단 소개를 입력해주세요",
+          })}
+          error={errors.description}
+          required
+          rows={4}
+        />
+        <TextArea
+          id="notice"
+          label="유의사항"
+          registration={register("notice", {
+            required: "유의사항을 입력해주세요",
+          })}
+          error={errors.notice}
+          required
+          rows={4}
+        />
+        <TextArea
+          id="certMethod"
+          label="인증방법"
+          registration={register("certMethod", {
+            required: "인증방법을 입력해주세요",
+          })}
+          error={errors.certMethod}
+          required
+          rows={4}
         />
-      </Form.Item>
-    </>
+        <div className="flex gap-4">
+          <Input
+            type="file"
+            accept="image/*"
+            id="image"
+            label="이미지 업로드"
+            registration={register("image", {
+              required: "사진을 첨부해주세요",
+            })}
+            error={errors.image}
+            required
+          />
+          {imagePreview && (
+            <button
+              type="button"
+              className="text-[1.2rem] bg-gray-200 border rounded-lg p-4 shrink-0"
+              onClick={openImagePreview}
+            >
+              미리보기
+            </button>
+          )}
+        </div>
+        <Select
+          id="tags"
+          label="관심사 선택"
+          options={interestsOption}
+          registration={register("tags")}
+          error={errors.tags}
+          multiple
+          disabled
+        />
+        <Input
+          id="pointPerPerson"
+          label="포인트"
+          registration={register("pointPerPerson", {
+            required: "포인트를 입력해주세요",
+          })}
+          error={errors.pointPerPerson}
+          required
+        />
+        <Controller
+          name="dateRange"
+          control={control}
+          render={({ field, fieldState: { error } }) => (
+            <Input id="dateRange" label="챌린지 기간" error={error} required>
+              <DatePicker
+                id="dateRange"
+                locale={ko}
+                minDate={getTomorrowDate(new Date())}
+                startDate={field.value?.[0] || undefined}
+                endDate={field.value?.[1] || undefined}
+                dateFormat="yyyy-MM-dd"
+                onChange={(range: DateRange) => {
+                  field.onChange(range);
+                }}
+                placeholderText="Start Date ~ End Date"
+                className="border-gray-300 border rounded-lg py-2 text-center w-full"
+                selectsRange={true}
+              />
+            </Input>
+          )}
+        />
+        <div className="flex justify-center gap-32">
+          <button className="rounded-xl w-[10rem] h-[5rem] text-white bg-_neutral-70 text-_h3 hover:opacity-65">
+            생성
+          </button>
+        </div>
+      </form>
+    </AdminFormLayOut>
   );
 };
 
-const FormInterest = ({ tags }: { tags: string[] | undefined }) => {
-  return (
-    <>
-      <Form.Item name="tags" label="관심사 선택" initialValue={tags}>
-        <Select mode="multiple" disabled>
-          {tags?.map((option: string, i: number) => (
-            <Select.Option key={i} value={option}>
-              {option}
-            </Select.Option>
-          ))}
-        </Select>
-      </Form.Item>
-    </>
-  );
-};
-const FormPoint = ({ point }: { point: number | undefined }) => {
-  return (
-    <>
-      <Form.Item label="포인트" name="pointPerPerson" initialValue={point}>
-        <Input />
-      </Form.Item>
-    </>
-  );
-};
-const FormRangePicker = () => {
-  const { RangePicker } = DatePicker;
-  const disabledDate = (current: any) => {
-    return current && current < moment().startOf("day").add(1, "day");
-  };
-  return (
-    <>
-      <Form.Item name="ranger" label="챌린지 기간">
-        <RangePicker format="YYYY-MM-DD" disabledDate={disabledDate} />
-      </Form.Item>
-    </>
-  );
-};
-const SubmitButtom = () => {
-  return (
-    <>
-      <div className="flex justify-center gap-32">
-        <Button
-          htmlType="submit"
-          className="w-[10rem] h-[5rem] text-white bg-_neutral-70 text-_h3 hover:opacity-65"
-        >
-          생성
-        </Button>
-      </div>
-    </>
-  );
-};
 export default InstanceCreate;
diff --git a/src/utils/makeFileToBase64Image.ts b/src/utils/makeFileToBase64Image.ts
new file mode 100644
index 00000000..1e2820bc
--- /dev/null
+++ b/src/utils/makeFileToBase64Image.ts
@@ -0,0 +1,24 @@
+export const makeFileToBase64Image = (file: File): Promise<string | null> => {
+  return new Promise((resolve, reject) => {
+    if (!file) {
+      resolve(null);
+      return;
+    }
+
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+      } else {
+        resolve(null);
+      }
+    };
+
+    reader.onerror = () => {
+      reject(new Error("파일을 읽는데 실패했습니다"));
+    };
+
+    reader.readAsDataURL(file);
+  });
+};
diff --git a/yarn.lock b/yarn.lock
index 5a01453e..fde0294f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1443,6 +1443,21 @@
   dependencies:
     "@floating-ui/utils" "^0.1.3"
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
 "@floating-ui/dom@^1.5.1":
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
@@ -1458,11 +1473,32 @@
   dependencies:
     "@floating-ui/dom" "^1.5.1"
 
+"@floating-ui/react-dom@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
+  integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/react@^0.26.23":
+  version "0.26.28"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.28.tgz#93f44ebaeb02409312e9df9507e83aab4a8c0dc7"
+  integrity sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==
+  dependencies:
+    "@floating-ui/react-dom" "^2.1.2"
+    "@floating-ui/utils" "^0.2.8"
+    tabbable "^6.0.0"
+
 "@floating-ui/utils@^0.1.3":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
   integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+
 "@fortawesome/fontawesome-common-types@6.5.1":
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz#fdb1ec4952b689f5f7aa0bffe46180bb35490032"
@@ -3431,6 +3467,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-datepicker@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-7.0.0.tgz#1d36553a92546246f1e10d862b3cfa7d295dff01"
+  integrity sha512-4tWwOUq589tozyQPBVEqGNng5DaZkomx5IVNuur868yYdgjH6RaL373/HKiVt1IDoNNXYiTGspm1F7kjrarM8Q==
+  dependencies:
+    react-datepicker "*"
+
 "@types/react-dom@^18.0.0", "@types/react-dom@^18.2.17":
   version "18.2.18"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.18.tgz#16946e6cd43971256d874bc3d0a72074bb8571dd"
@@ -4545,6 +4588,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -4770,6 +4818,16 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+
+date-fns@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-4.1.0.tgz#64b3d83fff5aa80438f5b1a633c2e83b8a1c2d14"
+  integrity sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==
+
 dayjs@^1.11.1:
   version "1.11.10"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
@@ -8427,6 +8485,16 @@ react-custom-scrollbars@^4.2.1:
     prop-types "^15.5.10"
     raf "^3.1.0"
 
+react-datepicker@*, react-datepicker@^7.5.0:
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-7.5.0.tgz#e7b1014a6dbd3b314839a5c57a6dacfbb16074e4"
+  integrity sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==
+  dependencies:
+    "@floating-ui/react" "^0.26.23"
+    clsx "^2.1.1"
+    date-fns "^3.6.0"
+    prop-types "^15.8.1"
+
 react-docgen-typescript@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"
@@ -8482,6 +8550,11 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-hook-form@^7.54.2:
+  version "7.54.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.54.2.tgz#8c26ed54c71628dff57ccd3c074b1dd377cfb211"
+  integrity sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==
+
 react-intersection-observer@^9.8.1:
   version "9.8.1"
   resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.8.1.tgz#9c3631c0c9acd624a2af1c192318752ea73b5d91"
@@ -9278,6 +9351,11 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.17.tgz#38901319632f946c982152586f2caf8ddc25c032"
   integrity sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==
 
+tabbable@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 tailwind-scrollbar-hide@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz#90b481fb2e204030e3919427416650c54f56f847"

From 33bb17f2297cf06d44d6a9891b4a3d49c4eb4894 Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Mon, 23 Dec 2024 18:25:04 +0900
Subject: [PATCH 03/15] =?UTF-8?q?Feat:=20InstanceEdit=EC=9D=98=20Button,?=
 =?UTF-8?q?=20Form,=20Image,=20Input,=20Upload,=20UploadProps=EB=A5=BC=20a?=
 =?UTF-8?q?ntd=EC=97=86=EC=9D=B4=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/Form/index.tsx          |   8 +-
 src/hooks/queries/useAdminInstanceQuery.tsx   |   4 +-
 .../InstanceCreate/InstanceCreate.tsx         |  92 ++--
 .../InstanceEdit/InstanceEdit.tsx             | 412 +++++++++---------
 src/utils/makeBase64ToFile.ts                 |  19 +
 ...Base64IncodedImage.ts => makeBase64URL.ts} |   2 +-
 src/utils/makeFileToBase64Image.ts            |  24 -
 7 files changed, 295 insertions(+), 266 deletions(-)
 create mode 100644 src/utils/makeBase64ToFile.ts
 rename src/utils/{makeBase64IncodedImage.ts => makeBase64URL.ts} (60%)
 delete mode 100644 src/utils/makeFileToBase64Image.ts

diff --git a/src/components/Common/Form/index.tsx b/src/components/Common/Form/index.tsx
index 597e5792..9ab82b92 100644
--- a/src/components/Common/Form/index.tsx
+++ b/src/components/Common/Form/index.tsx
@@ -10,7 +10,8 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   id: string;
   label: string;
   error?: FieldError;
-  registration?: UseFormRegisterReturn; // optional로 변경
+  information?: string;
+  registration?: UseFormRegisterReturn;
   children?: ReactNode;
 }
 
@@ -19,10 +20,10 @@ export const Input = ({
   label,
   error,
   registration,
+  information,
   children,
   ...props
 }: InputProps) => {
-  // registration이 있을 때만 destructuring
   const { ref, ...restRegistration } = registration || {};
 
   return (
@@ -50,6 +51,9 @@ export const Input = ({
       {error && (
         <p className="mt-1 text-md text-red-500 text-right">{error.message}</p>
       )}
+      {information && (
+        <p className="mt-1 text-md text-blue-500 text-right">{information}</p>
+      )}
     </div>
   );
 };
diff --git a/src/hooks/queries/useAdminInstanceQuery.tsx b/src/hooks/queries/useAdminInstanceQuery.tsx
index 6db42f81..30b1a970 100644
--- a/src/hooks/queries/useAdminInstanceQuery.tsx
+++ b/src/hooks/queries/useAdminInstanceQuery.tsx
@@ -91,7 +91,7 @@ export const usePostInstanceCreate = ({
 };
 
 export const usePostInstanceFileCreate = () => {
-  const { mutate, isLoading } = useMutation(
+  const { mutateAsync, isLoading } = useMutation(
     ({ instanceImg, instanceId }: instanceCreateFileApiType) =>
       postAdminInstanceFileApi({
         instanceId: instanceId,
@@ -105,7 +105,7 @@ export const usePostInstanceFileCreate = () => {
       },
     }
   );
-  return { mutate, isLoading };
+  return { mutateAsync, isLoading };
 };
 
 type PatchInstanceCreateType = {
diff --git a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
index f0022eb8..0526bb61 100644
--- a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
+++ b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
@@ -1,13 +1,13 @@
 import "@/utils/antdCheck.module.css";
 import moment from "moment";
-import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import { Controller, useForm } from "react-hook-form";
 import { ko } from "date-fns/locale";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import Loading from "@/components/Common/Loading/Loading";
-import { decrypt } from "@/hooks/useCrypto";
+import { decrypt, encrypt } from "@/hooks/useCrypto";
 import AdminFormLayOut from "@/components/Admin/AdminLayOut/AdminFormLayOut/AdminFormLayOut";
 import {
   usePostInstanceCreate,
@@ -18,23 +18,18 @@ import { Input, Select, TextArea } from "@/components/Common/Form/index";
 import { ModalLayer } from "@/components/Common/Modal/Modal";
 import { useModalStore } from "@/stores/modalStore";
 import { interestsOption } from "@/data/InterestData";
-import { makeFileToBase64Image } from "@/utils/makeFileToBase64Image";
 
 type DateRange = [Date | null, Date | null];
 
 interface InstanceCreateData {
-  topicId: number;
-  instanceId: number;
   title: string;
   description: string;
   certMethod: string;
   pointPerPerson: number;
   tags: string[];
   notice: string;
-  startedAt: string;
-  completedAt: string;
   dateRange: DateRange;
-  image: FileList;
+  image: FileList | null;
 }
 
 const InstanceCreate = () => {
@@ -42,30 +37,35 @@ const InstanceCreate = () => {
   const decryptTopicId = decrypt(id);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
   const { setModal } = useModalStore();
+  const navigate = useNavigate();
 
   const { data: adminDetail } = useTopicDetailQuery({
     topicId: decryptTopicId,
   });
 
-  const { mutate: instanceFileCreate, isLoading: instanceFileCreateLoading } =
-    usePostInstanceFileCreate();
+  const {
+    mutateAsync: instanceFileCreate,
+    isLoading: instanceFileCreateLoading,
+  } = usePostInstanceFileCreate();
 
-  const defaultValues: Partial<InstanceCreateData> = {
-    title: adminDetail?.title || "",
-    description: adminDetail?.description || "",
-    notice: adminDetail?.notice || "",
-    tags: adminDetail?.tags?.split(",") || [],
-    pointPerPerson: adminDetail?.pointPerPerson || 0,
-    certMethod: "",
-    dateRange: [null, null],
-    image: adminDetail.accessURI || "",
-  };
+  const defaultValues = useMemo<Partial<InstanceCreateData>>(
+    () => ({
+      title: adminDetail?.title || "",
+      description: adminDetail?.description || "",
+      notice: adminDetail?.notice || "",
+      tags: adminDetail?.tags?.split(",") || [],
+      pointPerPerson: adminDetail?.pointPerPerson || 0,
+      certMethod: "",
+      dateRange: [null, null],
+      image: null,
+    }),
+    [adminDetail]
+  );
 
   const {
     register,
     handleSubmit,
     watch,
-    reset,
     control,
     formState: { errors },
   } = useForm<InstanceCreateData>({ defaultValues });
@@ -78,18 +78,19 @@ const InstanceCreate = () => {
     return tomorrow;
   };
 
-  const formatDateRange = (data: InstanceCreateData) => ({
-    formmatStartDate: moment(data.dateRange[0]).format("YYYY-MM-DDT00:00:00"),
-    formmatEndDate: moment(data.dateRange[1]).format("YYYY-MM-DDT23:59:59"),
+  const formatDateRange = (dateRange: DateRange) => ({
+    formmatStartDate: moment(dateRange[0]).format("YYYY-MM-DDT00:00:00"),
+    formmatEndDate: moment(dateRange[1]).format("YYYY-MM-DDT23:59:59"),
   });
 
-  const onSuccessUsePostInstance = (res: any) => {
-    const file = watch("image")?.[0];
+  const onSuccessUsePostInstance = async (res: number) => {
+    const file = image?.[0];
     if (!file) return;
 
-    instanceFileCreate({ instanceImg: file, instanceId: res });
+    await instanceFileCreate({ instanceImg: file, instanceId: res });
+    const encryptedInstanceId = encrypt(res);
     alert("인스턴스가 생성되었습니다.");
-    reset();
+    navigate(`/admin/instance/${encryptedInstanceId}/edit`);
   };
 
   const { mutate: instanceCreate, isLoading: instanceCreateLoading } =
@@ -103,7 +104,9 @@ const InstanceCreate = () => {
       return;
     }
 
-    const { formmatStartDate, formmatEndDate } = formatDateRange(data);
+    const { formmatStartDate, formmatEndDate } = formatDateRange(
+      data.dateRange
+    );
 
     const instanceData = {
       topicId: decryptTopicId,
@@ -130,15 +133,18 @@ const InstanceCreate = () => {
 
   useEffect(() => {
     const file = image?.[0];
-    const loadPreview = async () => {
-      try {
-        const result = await makeFileToBase64Image(file);
-        setImagePreview(result);
-      } catch (error) {
-        alert(error);
-      }
+
+    if (!file) {
+      setImagePreview(null);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(file);
+    setImagePreview(objectUrl);
+
+    return () => {
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-    loadPreview();
   }, [image]);
 
   const isLoading = instanceCreateLoading || instanceFileCreateLoading;
@@ -149,7 +155,7 @@ const InstanceCreate = () => {
     <AdminFormLayOut title="인스턴스 생성 페이지" instanceTokken={true}>
       <form
         onSubmit={handleSubmit(instanceSumbit)}
-        className="w-full flex flex-col gap-4"
+        className="w-full flex flex-col gap-6"
       >
         <Input
           id="title"
@@ -196,6 +202,12 @@ const InstanceCreate = () => {
             label="이미지 업로드"
             registration={register("image", {
               required: "사진을 첨부해주세요",
+              onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+                if (!e.target.files?.length) {
+                  e.preventDefault();
+                  return false;
+                }
+              },
             })}
             error={errors.image}
             required
@@ -219,6 +231,7 @@ const InstanceCreate = () => {
           multiple
           disabled
         />
+
         <Input
           id="pointPerPerson"
           label="포인트"
@@ -228,6 +241,7 @@ const InstanceCreate = () => {
           error={errors.pointPerPerson}
           required
         />
+
         <Controller
           name="dateRange"
           control={control}
diff --git a/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx b/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
index 8308a5fd..d8f48a4b 100644
--- a/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
+++ b/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
@@ -1,8 +1,4 @@
-import { Button, Form, Image, Input, Upload, UploadProps } from "antd";
-import { useEffect, useRef, useState } from "react";
-import { UploadOutlined } from "@ant-design/icons";
-import moment from "moment";
-import { fileType, instanceDeteilType } from "@/types/adminType";
+import { useEffect, useMemo, useState } from "react";
 import Loading from "@/components/Common/Loading/Loading";
 import { useParams } from "react-router-dom";
 import { useQueryClient } from "react-query";
@@ -14,59 +10,85 @@ import {
   usePatchInstanceCreate,
   usePatchInstanceFileCreate,
 } from "@/hooks/queries/useAdminInstanceQuery";
+import { Controller, useForm } from "react-hook-form";
+import { Input, Select, TextArea } from "@/components/Common/Form";
+import { ModalLayer } from "@/components/Common/Modal/Modal";
+import { useModalStore } from "@/stores/modalStore";
+import { interestsOption } from "@/data/InterestData";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { ko } from "date-fns/locale";
+import { makeBase64URL } from "@/utils/makeBase64URL";
+import { makeBase64ToFileList } from "@/utils/makeBase64ToFile";
+
+type DateRange = [Date | null, Date | null];
 
 type InstanceEditData = {
-  topicId: number;
-  instanceId: number;
   title: string;
   description: string;
   pointPerPerson: number;
   certMethod: string;
   tags: string;
   notice: string;
-  startedAt: string;
-  completedAt: string;
-  ranger: {
-    _d: string;
-  }[];
-  fileResponse: {
-    fileId: number;
-    accessURI: string;
-    originFileObj: any;
-  }[];
+  dateRange: DateRange;
+  image: FileList | null;
 };
 
 const InstanceEdit = () => {
   const { id } = useParams();
   const queryClient = useQueryClient();
-  const decryptedTopicId = decrypt(id);
-  const [form] = Form.useForm();
-  const valuesRef = useRef<InstanceEditData | null>(null);
+  const decryptedInstanceId = decrypt(id);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const { setModal } = useModalStore();
 
   const { data: instanceDetail } = useInstanceDetailQuery({
-    instanceId: decryptedTopicId,
+    instanceId: decryptedInstanceId,
   });
 
-  const tags = instanceDetail?.tags;
-  const tagsArray = tags ? tags.split(",") : [];
-  const file = instanceDetail?.fileResponse;
+  const originalFileList = useMemo(
+    () =>
+      makeBase64ToFileList(
+        instanceDetail?.fileResponse?.source,
+        `instance_${decryptedInstanceId}_original`
+      ),
+    [instanceDetail?.fileResponse?.source, decryptedInstanceId]
+  );
 
-  const initData = {
-    description: instanceDetail?.description,
-    notice: instanceDetail?.notice,
-    tags: tagsArray,
-    certMethod: instanceDetail?.certificationMethod,
-    pointPerPerson: instanceDetail?.pointPerPerson,
-  };
+  const defaultValues = useMemo<Partial<InstanceEditData>>(
+    () => ({
+      title: instanceDetail?.title,
+      description: instanceDetail?.description,
+      notice: instanceDetail?.notice,
+      tags: instanceDetail?.tags?.split(",") || [],
+      certMethod: instanceDetail?.certificationMethod,
+      pointPerPerson: instanceDetail?.pointPerPerson,
+      dateRange: [
+        instanceDetail?.startedAt ? new Date(instanceDetail.startedAt) : null,
+        instanceDetail?.completedAt
+          ? new Date(instanceDetail.completedAt)
+          : null,
+      ],
+      image: null,
+    }),
+    [instanceDetail]
+  );
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    formState: { errors },
+  } = useForm<InstanceEditData>({ defaultValues });
+
+  const image = watch("image");
 
   const onSuccessUsePatchInstance = () => {
-    if (valuesRef.current) {
-      const instanceData = {
-        instanceId: decryptedTopicId,
-        instanceImg: valuesRef.current.fileResponse[0]?.originFileObj,
-      };
-      instanceFilePatch(instanceData);
-    }
+    const instanceData = {
+      instanceId: decryptedInstanceId,
+      instanceImg: image?.[0] || originalFileList?.[0],
+    };
+    instanceFilePatch(instanceData);
   };
   const onSuccessUsePatchIntanceFileCreate = () => {
     alert("인스턴스가 수정되었습니다.");
@@ -85,42 +107,55 @@ const InstanceEdit = () => {
 
   const isLoading = instancePatchIsLoading || instanceFilePatchIsLoading;
 
-  const instanceSumbit = (values: InstanceEditData) => {
-    valuesRef.current = values;
-
-    if (!valuesRef?.current?.fileResponse[0]?.originFileObj && !file) {
+  const instanceSumbit = (data: InstanceEditData) => {
+    if (!data?.image?.[0] && !originalFileList?.[0]) {
       alert("이미지를 선택해주세요");
       return;
     }
-    const startedAt = moment(values.ranger[0]._d).format("YYYY-MM-DDTHH:mm:ss");
-    const completedAtFormat = moment(values.ranger[1]._d).format(
-      "YYYY-MM-DDTHH:mm:ss"
-    );
 
     const instanceData = {
-      instanceId: decryptedTopicId,
-      topicIdId: values.topicId,
-      instanceTitle: values.title,
-      instanceDesc: values.description,
-      instanceCertificationMethod: values.certMethod,
-      instanceNotice: values.notice,
-      instancePoint: values.pointPerPerson,
-      instanceStartAt: startedAt,
-      instanceCompletedAt: completedAtFormat,
+      instanceId: decryptedInstanceId,
+      topicIdId: instanceDetail.topicId,
+      instanceTitle: data.title,
+      instanceDesc: data.description,
+      instanceCertificationMethod: data.certMethod,
+      instanceNotice: data.notice,
+      instancePoint: data.pointPerPerson,
+      instanceStartAt: instanceDetail.startedAt,
+      instanceCompletedAt: instanceDetail.completedAt,
     };
 
     instancePatch(instanceData);
   };
 
+  const openImagePreview = () => {
+    setModal(
+      <ModalLayer>
+        <img src={imagePreview || ""} alt="선택한 이미지" />
+      </ModalLayer>
+    );
+  };
+
   useEffect(() => {
-    form.setFieldsValue({
-      description: instanceDetail?.description,
-      notice: instanceDetail?.notice,
-      tags: tagsArray,
-      certMethod: instanceDetail?.certificationMethod,
-      pointPerPerson: instanceDetail?.pointPerPerson,
-    });
-  }, [instanceDetail, form]);
+    const file = image?.[0];
+
+    if (!file) {
+      setImagePreview(
+        makeBase64URL({
+          uri: instanceDetail?.fileResponse?.source,
+          format: "jpg",
+        })
+      );
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(file);
+    setImagePreview(objectUrl);
+
+    return () => {
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [image, instanceDetail?.fileResponse?.source]);
 
   return (
     <>
@@ -128,148 +163,129 @@ const InstanceEdit = () => {
         <Loading />
       ) : (
         <AdminFormLayOut title={"인스턴스 수정 페이지"} instanceTokken={true}>
-          <Form
-            form={form}
-            onFinish={instanceSumbit}
-            initialValues={initData}
-            className="w-full"
+          <form
+            onSubmit={handleSubmit(instanceSumbit)}
+            className="w-full flex flex-col gap-6"
           >
-            <FormDesc />
-            <FormImg file={file} />
-            <FormPoint />
-            <FormRangePicker instanceDetail={instanceDetail} />
-            <SubmitButtom />
-          </Form>
-        </AdminFormLayOut>
-      )}
-    </>
-  );
-};
-const FormDesc = () => {
-  return (
-    <>
-      <Form.Item label="간단한 소개" name="description">
-        <Input.TextArea allowClear showCount />
-      </Form.Item>
-      <Form.Item label="유의사항" name="notice">
-        <Input.TextArea allowClear showCount />
-      </Form.Item>
-      <Form.Item label="인증 방법" name="certMethod">
-        <Input.TextArea allowClear showCount />
-      </Form.Item>
-    </>
-  );
-};
-const FormImg = ({ file }: fileType) => {
-  const [visible, setVisible] = useState(false);
-  const [imageSrc, setImageSrc] = useState("");
+            <Input
+              id="title"
+              label="제목"
+              registration={register("title", {
+                required: "제목을 입력해주세요",
+              })}
+              error={errors.title}
+              disabled
+            />
 
-  useEffect(() => {
-    setImageSrc(`${file?.accessURI}`);
-  }, []);
+            <TextArea
+              id="description"
+              label="간단한 소개"
+              registration={register("description", {
+                required: "간단 소개를 입력해주세요",
+              })}
+              error={errors.description}
+              required
+              rows={4}
+            />
 
-  const normFile = (e: any) => {
-    if (Array.isArray(e)) {
-      return e;
-    }
-    if (e && e.fileList && e.fileList.length > 0) {
-      const file = e.fileList[e.fileList.length - 1];
-      if (file && file.originFileObj) {
-        const imageUrl = URL.createObjectURL(file.originFileObj);
-        setImageSrc(imageUrl);
-      }
-    }
-    return e?.fileList;
-  };
-  const props: UploadProps = {
-    beforeUpload: () => {
-      return false;
-    },
-  };
-  return (
-    <>
-      <Form.Item
-        name="fileResponse"
-        label="인스턴스 이미지 수정"
-        valuePropName="fileResponse"
-        getValueFromEvent={normFile}
-        initialValue={""}
-      >
-        <Upload {...props}>
-          <div className="w-[5rem] h-[5rem]">
-            <Button icon={<UploadOutlined />}>사진을 선택해주세요</Button>
-          </div>
-        </Upload>
-      </Form.Item>
-      <Form.Item label="이미지 미리보기">
-        <Button type="dashed" onClick={() => setVisible(true)}>
-          이미지 미리보기
-        </Button>
-        <Image
-          width={200}
-          style={{ display: "none" }}
-          src={imageSrc}
-          preview={{
-            visible,
-            src: imageSrc,
-            onVisibleChange: (value) => {
-              setVisible(value);
-            },
-          }}
-        />
-      </Form.Item>
-    </>
-  );
-};
-const FormPoint = () => {
-  return (
-    <>
-      <Form.Item label="포인트" name="pointPerPerson">
-        <Input />
-      </Form.Item>
-    </>
-  );
-};
-const FormRangePicker = ({
-  instanceDetail,
-}: {
-  instanceDetail: instanceDeteilType | undefined;
-}) => {
-  const startedAt = moment(instanceDetail?.startedAt).format("YYYY-MM-DD");
-  const completedAt = moment(instanceDetail?.completedAt).format("YYYY-MM-DD");
+            <TextArea
+              id="notice"
+              label="유의사항"
+              registration={register("notice", {
+                required: "유의사항을 입력해주세요",
+              })}
+              error={errors.notice}
+              required
+              rows={4}
+            />
 
-  const initialValues = {
-    ranger: [moment(startedAt), moment(completedAt)],
-  };
+            <TextArea
+              id="certMethod"
+              label="인증방법"
+              registration={register("certMethod", {
+                required: "인증방법을 입력해주세요",
+              })}
+              error={errors.certMethod}
+              required
+              rows={4}
+            />
 
-  return (
-    <>
-      <Form.Item
-        name="ranger"
-        label="챌린지 기간"
-        initialValue={initialValues.ranger}
-      >
-        <div className="flex justify-around">
-          <span>{startedAt}</span>
-          <span>{completedAt}</span>
-        </div>
-      </Form.Item>
-    </>
-  );
-};
+            <div className="flex gap-4">
+              <Input
+                type="file"
+                accept="image/*"
+                id="image"
+                label="이미지 업로드"
+                registration={register("image")}
+                error={errors.image}
+                information="선택된 파일이 없으면 기존 인스턴스 이미지가 적용됩니다."
+              />
 
-const SubmitButtom = () => {
-  return (
-    <>
-      <div className="flex justify-center gap-32">
-        <Button
-          htmlType="submit"
-          className="w-[10rem] h-[4rem] text-white bg-_neutral-70 text-_h4 hover:opacity-65"
-        >
-          수정
-        </Button>
-      </div>
+              {imagePreview && (
+                <button
+                  type="button"
+                  className="text-[1.2rem] bg-gray-200 border rounded-lg p-4 shrink-0 "
+                  onClick={openImagePreview}
+                >
+                  미리보기
+                </button>
+              )}
+            </div>
+
+            <Select
+              id="tags"
+              label="관심사 선택"
+              options={interestsOption}
+              registration={register("tags")}
+              error={errors.tags}
+              multiple
+              disabled
+            />
+
+            <Input
+              id="pointPerPerson"
+              label="포인트"
+              registration={register("pointPerPerson", {
+                required: "포인트를 입력해주세요",
+              })}
+              error={errors.pointPerPerson}
+              required
+            />
+
+            <Controller
+              name="dateRange"
+              control={control}
+              render={({ field, fieldState: { error } }) => (
+                <Input
+                  id="dateRange"
+                  label="챌린지 기간"
+                  error={error}
+                  disabled
+                >
+                  <DatePicker
+                    id="dateRange"
+                    locale={ko}
+                    startDate={field.value?.[0] || undefined}
+                    endDate={field.value?.[1] || undefined}
+                    dateFormat="yyyy-MM-dd"
+                    className="border-gray-300 border rounded-lg py-2 text-center w-full"
+                    selectsRange={true}
+                    disabled
+                  />
+                </Input>
+              )}
+            />
+
+            <div className="flex justify-center gap-32">
+              <button className="rounded-xl w-[10rem] h-[5rem] text-white bg-_neutral-70 text-_h3 hover:opacity-65">
+                수정
+              </button>
+            </div>
+          </form>
+        </AdminFormLayOut>
+      )}
     </>
   );
 };
+
 export default InstanceEdit;
diff --git a/src/utils/makeBase64ToFile.ts b/src/utils/makeBase64ToFile.ts
new file mode 100644
index 00000000..1ce5b167
--- /dev/null
+++ b/src/utils/makeBase64ToFile.ts
@@ -0,0 +1,19 @@
+export const makeBase64ToFileList = (
+  pureBase64: string,
+  fileName: string,
+  mimeType = "image/jpeg"
+): FileList => {
+  const decodedData = atob(pureBase64);
+  const byteArray = new Uint8Array(decodedData.length);
+
+  for (let i = 0; i < decodedData.length; i++) {
+    byteArray[i] = decodedData.charCodeAt(i);
+  }
+
+  const imageFile = new File([byteArray], fileName, { type: mimeType });
+
+  const dataTransfer = new DataTransfer();
+  dataTransfer.items.add(imageFile);
+
+  return dataTransfer.files;
+};
diff --git a/src/utils/makeBase64IncodedImage.ts b/src/utils/makeBase64URL.ts
similarity index 60%
rename from src/utils/makeBase64IncodedImage.ts
rename to src/utils/makeBase64URL.ts
index 3c61f39d..22af6e64 100644
--- a/src/utils/makeBase64IncodedImage.ts
+++ b/src/utils/makeBase64URL.ts
@@ -3,6 +3,6 @@ interface Params {
   format: string;
 }
 
-export const makeBase64IncodedImage = ({ uri, format }: Params) => {
+export const makeBase64URL = ({ uri, format }: Params) => {
   return `data:image/${format};base64,${uri}`;
 };
diff --git a/src/utils/makeFileToBase64Image.ts b/src/utils/makeFileToBase64Image.ts
deleted file mode 100644
index 1e2820bc..00000000
--- a/src/utils/makeFileToBase64Image.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const makeFileToBase64Image = (file: File): Promise<string | null> => {
-  return new Promise((resolve, reject) => {
-    if (!file) {
-      resolve(null);
-      return;
-    }
-
-    const reader = new FileReader();
-
-    reader.onloadend = () => {
-      if (typeof reader.result === "string") {
-        resolve(reader.result);
-      } else {
-        resolve(null);
-      }
-    };
-
-    reader.onerror = () => {
-      reject(new Error("파일을 읽는데 실패했습니다"));
-    };
-
-    reader.readAsDataURL(file);
-  });
-};

From 8969617490e52d0bcc22b58bf8aa0c575ca61e1f Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Mon, 23 Dec 2024 18:47:00 +0900
Subject: [PATCH 04/15] =?UTF-8?q?Feat:=20TopicCreate=EC=9D=98=20Button,=20?=
 =?UTF-8?q?Form,=20Input,=20Select=EB=A5=BC=20antd=20=EC=97=86=EC=9D=B4=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AdminTopic/TopicCreate/TopicCreate.tsx    | 235 +++++++-----------
 1 file changed, 90 insertions(+), 145 deletions(-)

diff --git a/src/pages/Admin/AdminTopic/TopicCreate/TopicCreate.tsx b/src/pages/Admin/AdminTopic/TopicCreate/TopicCreate.tsx
index 6ed55604..42b91e95 100644
--- a/src/pages/Admin/AdminTopic/TopicCreate/TopicCreate.tsx
+++ b/src/pages/Admin/AdminTopic/TopicCreate/TopicCreate.tsx
@@ -1,33 +1,25 @@
 import AdminFormLayOut from "@/components/Admin/AdminLayOut/AdminFormLayOut/AdminFormLayOut";
+import { Input, Select, TextArea } from "@/components/Common/Form";
 import LoadingBox from "@/components/Common/Loading/LoadingBox/LoadingBox";
 import { interestsOption } from "@/data/InterestData";
 import { usePostTopicCreate } from "@/hooks/queries/useAdminTopicQuery";
-import { Button, Form, Input, Select } from "antd";
-import { useRef, useState } from "react";
+import { encrypt } from "@/hooks/useCrypto";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
 
 type FormDataType = {
   description: string;
   notice: string;
-  pointPerPerson: string;
-  tags: string[];
+  pointPerPerson: string | null;
+  tags: string[] | null;
   title: string;
-  upload: {
-    lastModified: number;
-    lastModifiedDate?: Date;
-    name: string;
-    originFileObj: File;
-    percent: number;
-    size: number;
-    type: string;
-    uid: string;
-  }[];
 };
 
 const TopicCreate = () => {
-  const valuesRef = useRef<FormDataType | null>(null);
-
-  const onSuccessPostTopic = () => {
+  const navigate = useNavigate();
+  const onSuccessPostTopic = (res: number) => {
     alert("토픽이 생성되었습니다");
+    navigate(`/admin/topic/edit/${encrypt(res)}`);
   };
 
   const { mutate: topicCreate, isLoading: topicCreateIsLoading } =
@@ -37,19 +29,31 @@ const TopicCreate = () => {
 
   const isLoading = topicCreateIsLoading;
 
-  const topicSubmit = (values: FormDataType) => {
-    valuesRef.current = values;
-    const tagString = values.tags.join();
+  const topicSubmit = (data: FormDataType) => {
     const topicCreateData = {
-      topicTitle: values.title,
-      topicDesc: values.description,
-      topicNotice: values.notice,
-      topicTags: tagString,
-      topicPoint: values.pointPerPerson,
+      topicTitle: data.title,
+      topicDesc: data.description,
+      topicNotice: data.notice,
+      topicTags: data?.tags?.join(",") || "",
+      topicPoint: data.pointPerPerson || "",
     };
     topicCreate(topicCreateData);
   };
 
+  const defaultValues: FormDataType = {
+    title: "",
+    description: "",
+    notice: "",
+    tags: null,
+    pointPerPerson: null,
+  };
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormDataType>({ defaultValues });
+
   return (
     <>
       {isLoading ? (
@@ -57,13 +61,67 @@ const TopicCreate = () => {
       ) : (
         <>
           <AdminFormLayOut title={"토픽 생성 페이지"}>
-            <Form onFinish={topicSubmit} className="w-full max-w-[1200px]">
-              <FormTitle />
-              <FormDesc />
-              <FormInterest />
-              <FormPoint />
-              <SubmitButtom />
-            </Form>
+            <form
+              onSubmit={handleSubmit(topicSubmit)}
+              className="w-full flex flex-col gap-6"
+            >
+              <Input
+                id="title"
+                label="토픽 제목"
+                registration={register("title", {
+                  required: "제목을 입력해주세요",
+                })}
+                error={errors.title}
+                required
+              />
+              <TextArea
+                id="description"
+                label="간단한 소개"
+                registration={register("description", {
+                  required: "간단 소개를 입력해주세요",
+                })}
+                error={errors.description}
+                required
+                rows={4}
+              />
+              <TextArea
+                id="notice"
+                label="유의사항"
+                registration={register("notice", {
+                  required: "유의사항을 입력해주세요",
+                })}
+                error={errors.notice}
+                required
+                rows={4}
+              />
+
+              <Select
+                id="tags"
+                label="관심사 선택"
+                options={interestsOption}
+                registration={register("tags", {
+                  required: "관심사 태그를 설정해주세요",
+                })}
+                error={errors.tags}
+                required
+                multiple
+              />
+
+              <Input
+                id="pointPerPerson"
+                label="포인트"
+                registration={register("pointPerPerson", {
+                  required: "포인트를 입력해주세요",
+                })}
+                error={errors.pointPerPerson}
+                required
+              />
+              <div className="flex justify-center gap-32">
+                <button className="rounded-xl w-[10rem] h-[5rem] text-white bg-_neutral-70 text-_h3 hover:opacity-65">
+                  생성
+                </button>
+              </div>
+            </form>
           </AdminFormLayOut>
         </>
       )}
@@ -71,117 +129,4 @@ const TopicCreate = () => {
   );
 };
 
-const FormTitle = () => {
-  return (
-    <>
-      <Form.Item
-        label="토픽 제목"
-        rules={[
-          {
-            validator: async (_, names) => {
-              if (!names || names.length < 1) {
-                return Promise.reject(new Error("제목을 입력해주세요"));
-              }
-            },
-          },
-        ]}
-        name="title"
-      >
-        <Input />
-      </Form.Item>
-    </>
-  );
-};
-const FormDesc = () => {
-  const [simpleInfo, setSimpleInfo] = useState("");
-  const [notice, setTopicNotice] = useState("");
-
-  const simpleInfoChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setSimpleInfo(e.target.value);
-  };
-
-  const noticeChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setTopicNotice(e.target.value);
-  };
-
-  return (
-    <>
-      <Form.Item
-        label="간단한 소개"
-        validateStatus={simpleInfo ? "success" : "error"}
-        hasFeedback
-        help={simpleInfo ? null : "간단한 소개를 입력해주세요"}
-        name="description"
-      >
-        <Input.TextArea allowClear showCount onChange={simpleInfoChange} />
-      </Form.Item>
-      <Form.Item
-        label="유의사항"
-        validateStatus={notice ? "success" : "error"}
-        hasFeedback
-        help={notice ? null : "유의사항을 입력해주세요"}
-        name="notice"
-      >
-        <Input.TextArea allowClear showCount onChange={noticeChange} />
-      </Form.Item>
-    </>
-  );
-};
-
-const FormInterest = () => {
-  return (
-    <>
-      <Form.Item name="tags" label="관심사 선택">
-        <Select
-          mode="multiple"
-          placeholder="챌린지에 해당되는 관심사를 선택하세요"
-        >
-          {interestsOption.map((option) => (
-            <Select.Option key={option.value} value={option.value}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select>
-      </Form.Item>
-    </>
-  );
-};
-
-const FormPoint = () => {
-  return (
-    <>
-      <Form.Item
-        label="포인트"
-        rules={[
-          {
-            validator: async (_, names) => {
-              if (!names || names.length < 1) {
-                return Promise.reject(new Error("인당 포인트를 입력해주세요"));
-              }
-            },
-          },
-        ]}
-        name="pointPerPerson"
-      >
-        <Input />
-      </Form.Item>
-    </>
-  );
-};
-
-const SubmitButtom = () => {
-  return (
-    <>
-      <div className="flex justify-center gap-32">
-        <Button
-          htmlType="submit"
-          className="w-[10rem] h-[5rem] text-white bg-_neutral-70 text-_h3 hover:opacity-65"
-        >
-          생성
-        </Button>
-      </div>
-    </>
-  );
-};
-
 export default TopicCreate;

From cd62f9180015b9bb1133ae728f37700b93f6aab7 Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Mon, 23 Dec 2024 20:05:31 +0900
Subject: [PATCH 05/15] =?UTF-8?q?Feat:=20TopicEdit=EC=9D=98=20Button,=20Fo?=
 =?UTF-8?q?rm,=20Input,=20Select=EB=A5=BC=20antd=EC=97=86=EC=9D=B4=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InstanceCreate/InstanceCreate.tsx         |  40 ++-
 .../InstanceEdit/InstanceEdit.tsx             |  42 +--
 .../AdminTopic/TopicCreate/TopicCreate.tsx    | 182 ++++++------
 .../Admin/AdminTopic/TopicEdit/TopicEdit.tsx  | 264 +++++++-----------
 src/types/adminType.ts                        |   2 +-
 5 files changed, 222 insertions(+), 308 deletions(-)

diff --git a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
index 0526bb61..86854220 100644
--- a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
+++ b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
@@ -1,6 +1,6 @@
 import "@/utils/antdCheck.module.css";
 import moment from "moment";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Controller, useForm } from "react-hook-form";
 import { ko } from "date-fns/locale";
@@ -48,27 +48,14 @@ const InstanceCreate = () => {
     isLoading: instanceFileCreateLoading,
   } = usePostInstanceFileCreate();
 
-  const defaultValues = useMemo<Partial<InstanceCreateData>>(
-    () => ({
-      title: adminDetail?.title || "",
-      description: adminDetail?.description || "",
-      notice: adminDetail?.notice || "",
-      tags: adminDetail?.tags?.split(",") || [],
-      pointPerPerson: adminDetail?.pointPerPerson || 0,
-      certMethod: "",
-      dateRange: [null, null],
-      image: null,
-    }),
-    [adminDetail]
-  );
-
   const {
     register,
     handleSubmit,
     watch,
+    reset,
     control,
     formState: { errors },
-  } = useForm<InstanceCreateData>({ defaultValues });
+  } = useForm<InstanceCreateData>();
 
   const image = watch("image");
 
@@ -149,6 +136,21 @@ const InstanceCreate = () => {
 
   const isLoading = instanceCreateLoading || instanceFileCreateLoading;
 
+  useEffect(() => {
+    if (adminDetail) {
+      reset({
+        title: adminDetail.title,
+        description: adminDetail.description,
+        notice: adminDetail.notice,
+        tags: adminDetail.tags?.split(",") || [],
+        pointPerPerson: adminDetail.pointPerPerson,
+        certMethod: "",
+        dateRange: [null, null],
+        image: null,
+      });
+    }
+  }, [adminDetail, reset]);
+
   if (isLoading) return <Loading />;
 
   return (
@@ -202,12 +204,6 @@ const InstanceCreate = () => {
             label="이미지 업로드"
             registration={register("image", {
               required: "사진을 첨부해주세요",
-              onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
-                if (!e.target.files?.length) {
-                  e.preventDefault();
-                  return false;
-                }
-              },
             })}
             error={errors.image}
             required
diff --git a/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx b/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
index d8f48a4b..ca90f96a 100644
--- a/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
+++ b/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
@@ -54,32 +54,14 @@ const InstanceEdit = () => {
     [instanceDetail?.fileResponse?.source, decryptedInstanceId]
   );
 
-  const defaultValues = useMemo<Partial<InstanceEditData>>(
-    () => ({
-      title: instanceDetail?.title,
-      description: instanceDetail?.description,
-      notice: instanceDetail?.notice,
-      tags: instanceDetail?.tags?.split(",") || [],
-      certMethod: instanceDetail?.certificationMethod,
-      pointPerPerson: instanceDetail?.pointPerPerson,
-      dateRange: [
-        instanceDetail?.startedAt ? new Date(instanceDetail.startedAt) : null,
-        instanceDetail?.completedAt
-          ? new Date(instanceDetail.completedAt)
-          : null,
-      ],
-      image: null,
-    }),
-    [instanceDetail]
-  );
-
   const {
     register,
     handleSubmit,
     watch,
+    reset,
     control,
     formState: { errors },
-  } = useForm<InstanceEditData>({ defaultValues });
+  } = useForm<InstanceEditData>();
 
   const image = watch("image");
 
@@ -157,6 +139,26 @@ const InstanceEdit = () => {
     };
   }, [image, instanceDetail?.fileResponse?.source]);
 
+  useEffect(() => {
+    if (instanceDetail) {
+      reset({
+        title: instanceDetail.title,
+        description: instanceDetail.description,
+        notice: instanceDetail.notice,
+        tags: instanceDetail.tags?.split(",") || [],
+        certMethod: instanceDetail.certificationMethod,
+        pointPerPerson: instanceDetail.pointPerPerson,
+        dateRange: [
+          instanceDetail.startedAt ? new Date(instanceDetail.startedAt) : null,
+          instanceDetail.completedAt
+            ? new Date(instanceDetail.completedAt)
+            : null,
+        ],
+        image: null,
+      });
+    }
+  }, [instanceDetail, reset]);
+
   return (
     <>
       {isLoading ? (
diff --git a/src/pages/Admin/AdminTopic/TopicCreate/TopicCreate.tsx b/src/pages/Admin/AdminTopic/TopicCreate/TopicCreate.tsx
index 42b91e95..8d308a3e 100644
--- a/src/pages/Admin/AdminTopic/TopicCreate/TopicCreate.tsx
+++ b/src/pages/Admin/AdminTopic/TopicCreate/TopicCreate.tsx
@@ -7,125 +7,107 @@ import { encrypt } from "@/hooks/useCrypto";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 
-type FormDataType = {
+type TopicFormData = {
+  title: string;
   description: string;
   notice: string;
-  pointPerPerson: string | null;
-  tags: string[] | null;
-  title: string;
+  pointPerPerson: string;
+  tags: string[];
 };
 
 const TopicCreate = () => {
   const navigate = useNavigate();
-  const onSuccessPostTopic = (res: number) => {
-    alert("토픽이 생성되었습니다");
-    navigate(`/admin/topic/edit/${encrypt(res)}`);
-  };
 
-  const { mutate: topicCreate, isLoading: topicCreateIsLoading } =
-    usePostTopicCreate({
-      onSuccess: onSuccessPostTopic,
-    });
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TopicFormData>();
 
-  const isLoading = topicCreateIsLoading;
+  const { mutate: topicCreate, isLoading } = usePostTopicCreate({
+    onSuccess: (res: number) => {
+      const encryptedTopicId = encrypt(res);
+      alert("토픽이 생성되었습니다");
+      navigate(`/admin/topic/edit/${encryptedTopicId}`);
+    },
+  });
 
-  const topicSubmit = (data: FormDataType) => {
-    const topicCreateData = {
+  const onSubmit = (data: TopicFormData) => {
+    const formData = {
       topicTitle: data.title,
       topicDesc: data.description,
       topicNotice: data.notice,
-      topicTags: data?.tags?.join(",") || "",
+      topicTags: data.tags?.join(",") || "",
       topicPoint: data.pointPerPerson || "",
     };
-    topicCreate(topicCreateData);
-  };
 
-  const defaultValues: FormDataType = {
-    title: "",
-    description: "",
-    notice: "",
-    tags: null,
-    pointPerPerson: null,
+    topicCreate(formData);
   };
 
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<FormDataType>({ defaultValues });
+  if (isLoading) return <LoadingBox />;
 
   return (
-    <>
-      {isLoading ? (
-        <LoadingBox />
-      ) : (
-        <>
-          <AdminFormLayOut title={"토픽 생성 페이지"}>
-            <form
-              onSubmit={handleSubmit(topicSubmit)}
-              className="w-full flex flex-col gap-6"
-            >
-              <Input
-                id="title"
-                label="토픽 제목"
-                registration={register("title", {
-                  required: "제목을 입력해주세요",
-                })}
-                error={errors.title}
-                required
-              />
-              <TextArea
-                id="description"
-                label="간단한 소개"
-                registration={register("description", {
-                  required: "간단 소개를 입력해주세요",
-                })}
-                error={errors.description}
-                required
-                rows={4}
-              />
-              <TextArea
-                id="notice"
-                label="유의사항"
-                registration={register("notice", {
-                  required: "유의사항을 입력해주세요",
-                })}
-                error={errors.notice}
-                required
-                rows={4}
-              />
-
-              <Select
-                id="tags"
-                label="관심사 선택"
-                options={interestsOption}
-                registration={register("tags", {
-                  required: "관심사 태그를 설정해주세요",
-                })}
-                error={errors.tags}
-                required
-                multiple
-              />
-
-              <Input
-                id="pointPerPerson"
-                label="포인트"
-                registration={register("pointPerPerson", {
-                  required: "포인트를 입력해주세요",
-                })}
-                error={errors.pointPerPerson}
-                required
-              />
-              <div className="flex justify-center gap-32">
-                <button className="rounded-xl w-[10rem] h-[5rem] text-white bg-_neutral-70 text-_h3 hover:opacity-65">
-                  생성
-                </button>
-              </div>
-            </form>
-          </AdminFormLayOut>
-        </>
-      )}
-    </>
+    <AdminFormLayOut title="토픽 생성 페이지">
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="w-full flex flex-col gap-6"
+      >
+        <Input
+          id="title"
+          label="토픽 제목"
+          registration={register("title", {
+            required: "제목을 입력해주세요",
+          })}
+          error={errors.title}
+          required
+        />
+        <TextArea
+          id="description"
+          label="간단한 소개"
+          registration={register("description", {
+            required: "간단 소개를 입력해주세요",
+          })}
+          error={errors.description}
+          required
+          rows={4}
+        />
+        <TextArea
+          id="notice"
+          label="유의사항"
+          registration={register("notice", {
+            required: "유의사항을 입력해주세요",
+          })}
+          error={errors.notice}
+          required
+          rows={4}
+        />
+        <Select
+          id="tags"
+          label="관심사 선택"
+          options={interestsOption}
+          registration={register("tags", {
+            required: "관심사 태그를 설정해주세요",
+          })}
+          error={errors.tags}
+          required
+          multiple
+        />
+        <Input
+          id="pointPerPerson"
+          label="포인트"
+          registration={register("pointPerPerson", {
+            required: "포인트를 입력해주세요",
+          })}
+          error={errors.pointPerPerson}
+          required
+        />
+        <div className="flex justify-center gap-32">
+          <button className="rounded-xl w-[10rem] h-[5rem] text-white bg-_neutral-70 text-_h3 hover:opacity-65">
+            생성
+          </button>
+        </div>
+      </form>
+    </AdminFormLayOut>
   );
 };
 
diff --git a/src/pages/Admin/AdminTopic/TopicEdit/TopicEdit.tsx b/src/pages/Admin/AdminTopic/TopicEdit/TopicEdit.tsx
index acfdb6aa..cd7632bf 100644
--- a/src/pages/Admin/AdminTopic/TopicEdit/TopicEdit.tsx
+++ b/src/pages/Admin/AdminTopic/TopicEdit/TopicEdit.tsx
@@ -1,6 +1,3 @@
-import { Button, Form, Input, Select } from "antd";
-import { useEffect, useRef } from "react";
-import { uploadDataType } from "@/types/adminType";
 import Loading from "@/components/Common/Loading/Loading";
 import { useParams } from "react-router-dom";
 import { decrypt } from "@/hooks/useCrypto";
@@ -12,194 +9,131 @@ import {
   usePatchTopicEdit,
   useTopicDetailQuery,
 } from "@/hooks/queries/useAdminTopicQuery";
+import { useForm } from "react-hook-form";
+import { Input, Select, TextArea } from "@/components/Common/Form";
+import { useEffect } from "react";
 
-type topicSubmitType = {
-  tags: any;
-  title: string;
+type TopicFormData = {
   description: string;
   notice: string;
-  fileResponse: uploadDataType;
-  pointPerPerson: number;
+  pointPerPerson: string;
+  tags: string[];
+  title: string;
 };
 
 const TopicEdit = () => {
   const { id } = useParams();
   const queryClient = useQueryClient();
   const decryptedTopicId = decrypt(id);
-  const [form] = Form.useForm();
-  const valuesRef = useRef<topicSubmitType | null>(null);
 
   const { data: adminDetail } = useTopicDetailQuery({
     topicId: decryptedTopicId,
   });
 
-  const title = adminDetail?.title;
-  const description = adminDetail?.description;
-  const notice = adminDetail?.notice;
-  const tags = adminDetail?.tags;
-  const tagsArray = tags ? tags.split(",") : [];
-  const point = adminDetail?.pointPerPerson;
-
-  const onSuccessUsePatchTopicEdit = () => {
-    alert("토픽이 수정되었습니다.");
-    queryClient.invalidateQueries(QUERY_KEY.ADMIN_TOPIC_DETAIL);
-  };
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<TopicFormData>();
 
-  const { mutate: instancePatch, isLoading: instancePatchIsLoading } =
-    usePatchTopicEdit({
-      onSuccess: onSuccessUsePatchTopicEdit,
-    });
+  useEffect(() => {
+    if (adminDetail) {
+      reset({
+        title: adminDetail.title,
+        description: adminDetail.description,
+        notice: adminDetail.notice,
+        tags: adminDetail.tags?.split(",") || [],
+        pointPerPerson: adminDetail.pointPerPerson,
+      });
+    }
+  }, [adminDetail, reset]);
 
-  const isLoading = instancePatchIsLoading;
+  const { mutate: topicPatch, isLoading } = usePatchTopicEdit({
+    onSuccess: () => {
+      queryClient.invalidateQueries(QUERY_KEY.ADMIN_TOPIC_DETAIL);
+      alert("토픽이 수정되었습니다.");
+    },
+  });
 
-  const topicSubmit = (values: topicSubmitType) => {
-    valuesRef.current = values;
-    const tagString = values.tags.join();
-    const topicData = {
+  const onSubmit = (data: TopicFormData) => {
+    const formData = {
       topicId: decryptedTopicId,
-      topicTitle: values.title,
-      topicDesc: values.description,
-      topicNotice: values.notice,
-      topicTags: tagString,
-      topicPoint: values.pointPerPerson,
+      topicTitle: data.title,
+      topicDesc: data.description,
+      topicNotice: data.notice,
+      topicTags: data.tags.join(","),
+      topicPoint: data.pointPerPerson,
     };
 
-    instancePatch(topicData);
+    topicPatch(formData);
   };
 
-  useEffect(() => {
-    form.setFieldsValue({
-      title: adminDetail?.title,
-      description: adminDetail?.description,
-      notice: adminDetail?.notice,
-      file: adminDetail?.fileResponse,
-      tags: tagsArray,
-      pointPerPerson: adminDetail?.pointPerPerson,
-    });
-  }, [adminDetail, form]);
-  return (
-    <>
-      {isLoading ? (
-        <Loading />
-      ) : (
-        <>
-          <AdminFormLayOut title={"토픽 수정 페이지"}>
-            <Form
-              form={form}
-              onFinish={topicSubmit}
-              className="w-full max-w-[1200px]"
-            >
-              <FormTitle title={title} />
-              <FormDesc description={description} notice={notice} />
-              <FormInterest tags={tags} />
-              <FormPoint point={point} />
-              <SubmitButtom />
-            </Form>
-          </AdminFormLayOut>
-        </>
-      )}
-    </>
-  );
-};
+  if (isLoading) return <Loading />;
 
-const FormTitle = ({ title }: { title: string | undefined }) => {
-  return (
-    <>
-      <Form.Item
-        label="토픽 제목"
-        rules={[
-          {
-            validator: async (_, names) => {
-              if (!names || names.length < 1) {
-                return Promise.reject(new Error("제목을 입력해주세요"));
-              }
-            },
-          },
-        ]}
-        initialValue={title}
-        name="title"
-      >
-        <Input />
-      </Form.Item>
-    </>
-  );
-};
-const FormDesc = ({
-  description,
-  notice,
-}: {
-  description: string | undefined;
-  notice: string | undefined;
-}) => {
   return (
-    <>
-      <Form.Item
-        label="간단한 소개"
-        initialValue={description}
-        name="description"
+    <AdminFormLayOut title="토픽 수정 페이지">
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="w-full flex flex-col gap-6"
       >
-        <Input.TextArea allowClear showCount />
-      </Form.Item>
-      <Form.Item label="유의사항" initialValue={notice} name="notice">
-        <Input.TextArea allowClear showCount />
-      </Form.Item>
-    </>
-  );
-};
-const FormInterest = ({ tags }: { tags: string | undefined }) => {
-  const tagsArray = tags ? tags.split(",") : [];
-
-  return (
-    <>
-      <Form.Item name="tags" label="관심사 선택" initialValue={tagsArray}>
+        <Input
+          id="title"
+          label="토픽 제목"
+          registration={register("title", {
+            required: "제목을 입력해주세요",
+          })}
+          error={errors.title}
+          required
+        />
+        <TextArea
+          id="description"
+          label="간단한 소개"
+          registration={register("description", {
+            required: "간단 소개를 입력해주세요",
+          })}
+          error={errors.description}
+          required
+          rows={4}
+        />
+        <TextArea
+          id="notice"
+          label="유의사항"
+          registration={register("notice", {
+            required: "유의사항을 입력해주세요",
+          })}
+          error={errors.notice}
+          required
+          rows={4}
+        />
         <Select
-          mode="multiple"
-          placeholder="챌린지에 해당되는 관심사를 선택하세요"
-        >
-          {interestsOption.map((option) => (
-            <Select.Option key={option.value} value={option.value}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select>
-      </Form.Item>
-    </>
-  );
-};
-const FormPoint = ({ point }: { point: number | undefined }) => {
-  return (
-    <>
-      <Form.Item
-        label="포인트"
-        rules={[
-          {
-            validator: async (_, names) => {
-              if (!names || names.length < 1) {
-                return Promise.reject(new Error("인당 포인트를 입력해주세요"));
-              }
-            },
-          },
-        ]}
-        initialValue={point}
-        name="pointPerPerson"
-      >
-        <Input />
-      </Form.Item>
-    </>
-  );
-};
-const SubmitButtom = () => {
-  return (
-    <>
-      <div className="flex justify-center gap-32">
-        <Button
-          htmlType="submit"
-          className="w-[10rem] h-[4rem] text-white bg-_neutral-70 text-_h4 hover:opacity-65"
-        >
-          수정
-        </Button>
-      </div>
-    </>
+          id="tags"
+          label="관심사 선택"
+          options={interestsOption}
+          registration={register("tags", {
+            required: "관심사 태그를 설정해주세요",
+          })}
+          error={errors.tags}
+          required
+          multiple
+        />
+        <Input
+          id="pointPerPerson"
+          label="포인트"
+          registration={register("pointPerPerson", {
+            required: "포인트를 입력해주세요",
+          })}
+          error={errors.pointPerPerson}
+          required
+        />
+        <div className="flex justify-center gap-32">
+          <button className="rounded-xl w-[10rem] h-[5rem] text-white bg-_neutral-70 text-_h3 hover:opacity-65">
+            수정
+          </button>
+        </div>
+      </form>
+    </AdminFormLayOut>
   );
 };
+
 export default TopicEdit;
diff --git a/src/types/adminType.ts b/src/types/adminType.ts
index bf9d7c9d..3706c4ff 100644
--- a/src/types/adminType.ts
+++ b/src/types/adminType.ts
@@ -3,7 +3,7 @@ export type adminTopicEditApiType = {
   topicDesc: string;
   topicNotice: string;
   topicTags: string;
-  topicPoint: number;
+  topicPoint: string;
   topicFile?: any;
   topicId?: number;
 };

From 938ee7f13a1795356973f6b695c6e95ea10da520 Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Mon, 23 Dec 2024 20:38:30 +0900
Subject: [PATCH 06/15] =?UTF-8?q?Feat:=20=ED=8A=B9=EC=A0=95=20=ED=86=A0?=
 =?UTF-8?q?=ED=94=BD=EC=97=90=20=EB=8C=80=ED=95=9C=20=EC=9D=B8=EC=8A=A4?=
 =?UTF-8?q?=ED=84=B4=EC=8A=A4=20=EC=A1=B0=ED=9A=8C=20api=20=EC=9D=B4?=
 =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=97=AC=20=EC=9D=B8=EC=8A=A4=ED=84=B4?=
 =?UTF-8?q?=EC=8A=A4=20=EB=9D=84=EC=9A=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/axios/request.ts                       |  1 +
 src/apis/getAdminInstanceListApi.ts             |  4 +++-
 .../AdminInstanceContent.tsx                    | 10 ++--------
 .../InstanceListComponent.tsx                   | 17 ++++-------------
 src/hooks/queries/useAdminInstanceQuery.tsx     |  3 +++
 5 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/apis/axios/request.ts b/src/apis/axios/request.ts
index d51cfd08..8ab1d0cd 100644
--- a/src/apis/axios/request.ts
+++ b/src/apis/axios/request.ts
@@ -6,6 +6,7 @@ const requests = {
   fetchLogout: `/logout`,
   fetchTopic: `/admin/topic`,
   fetchInstance: `/admin/instance`,
+  fetchTopicInstnaces: `/admin/topic/instances`,
   fetchChallenges: `/challenges`,
   fetchChallengesLatest: `/challenges/latest`,
   fetchChallengesActivity: `/challenges/my/activity`,
diff --git a/src/apis/getAdminInstanceListApi.ts b/src/apis/getAdminInstanceListApi.ts
index a263b3e1..fac66b6b 100644
--- a/src/apis/getAdminInstanceListApi.ts
+++ b/src/apis/getAdminInstanceListApi.ts
@@ -3,13 +3,15 @@ import requests from "./axios/request";
 
 type adminInstanceListApiType = {
   pageNumber?: number;
+  topicId: number;
 };
 
 const getAdminInstanceListPageApi = async ({
   pageNumber,
+  topicId,
 }: adminInstanceListApiType) => {
   const data = await instance
-    .get(`${requests.fetchInstance}?page=${pageNumber}&size=5`)
+    .get(`${requests.fetchTopicInstnaces}/${topicId}?page=${pageNumber}&size=5`)
     .then((res) => {
       const list = res.data.data;
       return list || {};
diff --git a/src/components/Admin/AdminInstance/InstanceListComponent/AdminInstanceContent/AdminInstanceContent.tsx b/src/components/Admin/AdminInstance/InstanceListComponent/AdminInstanceContent/AdminInstanceContent.tsx
index bb719af4..1c99f3cd 100644
--- a/src/components/Admin/AdminInstance/InstanceListComponent/AdminInstanceContent/AdminInstanceContent.tsx
+++ b/src/components/Admin/AdminInstance/InstanceListComponent/AdminInstanceContent/AdminInstanceContent.tsx
@@ -1,7 +1,6 @@
 import { AdminListLayOut } from "@/components/Admin/AdminLayOut/AdminListLayOut/AdminListLayOut";
 import CreateBtn from "@/components/Admin/CreateBtn/CreateBtn";
 import { useInstanceListQuery } from "@/hooks/queries/useAdminInstanceQuery";
-import { useTopicDetailQuery } from "@/hooks/queries/useAdminTopicQuery";
 import { decrypt } from "@/hooks/useCrypto";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
@@ -15,11 +14,9 @@ function AdminInstanceContent() {
   const topicId = location.state.topicId;
   const decryptTopicId = decrypt(topicId);
 
-  const { data: topicDetail } = useTopicDetailQuery({
-    topicId: decryptTopicId,
-  });
   const { data: instanceContent } = useInstanceListQuery({
     pageNumber: pageNumber - 1,
+    topicId: decryptTopicId,
   });
 
   const handlePageChange = (page: number) => {
@@ -31,10 +28,7 @@ function AdminInstanceContent() {
       <AdminListLayOut.MainContent>
         <>
           <CreateBtn tokken="instance" topicId={topicId} />
-          <InstanceListComponent
-            instanceList={instanceContent.content}
-            topicDetail={topicDetail}
-          />
+          <InstanceListComponent instanceList={instanceContent.content} />
         </>
       </AdminListLayOut.MainContent>
       <AdminListLayOut.PageNation>
diff --git a/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx b/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
index b5cca7c0..cc9e9a28 100644
--- a/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
+++ b/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
@@ -1,7 +1,7 @@
 import Button from "@/components/Common/Button";
 import moment from "moment";
 import deleteAdminInstanceApi from "@/apis/deleteAdminInstanceApi";
-import { adminTopicDataType, instanceListDataType } from "@/types/adminType";
+import { instanceListDataType } from "@/types/adminType";
 import InstanceTitle from "./InstanceTitle/InstanceTitle";
 import { useNavigate } from "react-router-dom";
 import { useQueryClient } from "react-query";
@@ -9,14 +9,10 @@ import { encrypt } from "@/hooks/useCrypto";
 import { PATH } from "@/constants/path";
 
 type instanceListPropsType = {
-  instanceList: any;
-  topicDetail?: adminTopicDataType;
+  instanceList: instanceListDataType[];
 };
 
-const InstanceListComponent = ({
-  instanceList,
-  topicDetail,
-}: instanceListPropsType) => {
+const InstanceListComponent = ({ instanceList }: instanceListPropsType) => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -25,16 +21,11 @@ const InstanceListComponent = ({
     navigate(`${PATH.ADMIN_INSTANCE}/${InstanceCryptoId}/edit`);
   };
 
-  const topicPropsId = topicDetail?.topicId;
-  const instanceFilterList = instanceList.filter(
-    (item: instanceListDataType) => item.topicId === topicPropsId
-  );
-
   return (
     <>
       <ul className="flex flex-col gap-10 rounded-xl h-full">
         <>
-          {instanceFilterList.map((item: instanceListDataType) => {
+          {instanceList.map((item: instanceListDataType) => {
             const imageData = item.fileResponse.accessURI;
             const startDate = moment(item.startedAt).format("YYYY-MM-DD");
             const completedDate = moment(item.completedAt).format("YYYY-MM-DD");
diff --git a/src/hooks/queries/useAdminInstanceQuery.tsx b/src/hooks/queries/useAdminInstanceQuery.tsx
index 30b1a970..7a9e1ee0 100644
--- a/src/hooks/queries/useAdminInstanceQuery.tsx
+++ b/src/hooks/queries/useAdminInstanceQuery.tsx
@@ -16,6 +16,7 @@ import { useMutation, useQuery } from "react-query";
 
 type useInstanceListQueryType = {
   pageNumber?: number;
+  topicId: number;
 };
 type useInstanceDetailQueryType = {
   instanceId?: number;
@@ -23,12 +24,14 @@ type useInstanceDetailQueryType = {
 
 export const useInstanceListQuery = ({
   pageNumber,
+  topicId,
 }: useInstanceListQueryType) => {
   const { data } = useQuery<any>({
     queryKey: [QUERY_KEY.ADMIN_INSTANCE_PAGE, pageNumber],
     queryFn: () =>
       getAdminInstanceListPageApi({
         pageNumber: pageNumber,
+        topicId,
       }),
     keepPreviousData: true,
   });

From 82ae9689c944d44a0efe9482362ff9fcae72f2be Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Mon, 23 Dec 2024 22:27:57 +0900
Subject: [PATCH 07/15] =?UTF-8?q?Feat:=20antd=EC=9D=98=20Checkbox=20?=
 =?UTF-8?q?=EC=97=86=EC=95=A0=EA=B3=A0=20=EC=A7=81=EC=A0=91=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- UserInformationEditForm의 antd Form 삭제하고 직접 구현
- InterestCheckEdit의 antd Checkbox, Col, Row 삭제하고 직접 구현
- 필요없는 InterestEdit 컴포넌트 삭제
- Checkbox 공통 컴포넌트 구현
---
 .../Common/BottomButton/BottomButton.tsx      |   2 +-
 src/components/Common/Form/index.tsx          |  64 ++++++++++
 .../InterestCheckEdit/InterestCheckEdit.tsx   |  71 -----------
 .../InterestTagEditFrom.tsx                   | 114 +++++++++---------
 4 files changed, 125 insertions(+), 126 deletions(-)
 delete mode 100644 src/components/MyPage/InterestEdit/InterestCheckEdit/InterestCheckEdit.tsx

diff --git a/src/components/Common/BottomButton/BottomButton.tsx b/src/components/Common/BottomButton/BottomButton.tsx
index 49f7c1f9..5c417912 100644
--- a/src/components/Common/BottomButton/BottomButton.tsx
+++ b/src/components/Common/BottomButton/BottomButton.tsx
@@ -1,6 +1,6 @@
 type bottomButtonType = {
   content: string;
-  onClick: any;
+  onClick?: any;
   btnColor: string;
   btnMaxWidth: string;
   btnTextColor: string;
diff --git a/src/components/Common/Form/index.tsx b/src/components/Common/Form/index.tsx
index 9ab82b92..bf363c7a 100644
--- a/src/components/Common/Form/index.tsx
+++ b/src/components/Common/Form/index.tsx
@@ -1,3 +1,4 @@
+import InterestBtn from "@/components/Interest/InterestButton/InterestBtn";
 import {
   InputHTMLAttributes,
   ReactNode,
@@ -5,6 +6,8 @@ import {
   TextareaHTMLAttributes,
 } from "react";
 import { FieldError, Merge, UseFormRegisterReturn } from "react-hook-form";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   id: string;
@@ -153,3 +156,64 @@ export const Select = ({
     </div>
   );
 };
+
+interface CheckboxOption {
+  label: string;
+  value: string;
+}
+
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  options: CheckboxOption[];
+  error?: FieldError | Merge<FieldError, (FieldError | undefined)[]>;
+  registration: UseFormRegisterReturn;
+  checkedValues: string[];
+}
+
+export const Checkbox = ({
+  options,
+  checkedValues,
+  error,
+  registration,
+  ...props
+}: CheckboxProps) => {
+  return (
+    <div>
+      <ul className="flex flex-wrap gap-2">
+        {options.map((option) => (
+          <li key={option.value}>
+            <label className="cursor-pointer">
+              <input
+                type="checkbox"
+                value={option.value}
+                className="hidden"
+                {...registration}
+                {...props}
+              />
+              <span className="inline-block">
+                <InterestBtn
+                  bgColor={
+                    checkedValues.some((item) => item === option.value)
+                      ? "bg-[#282828]"
+                      : "bg-[#dddddd]"
+                  }
+                  textColor={
+                    checkedValues.some((item) => item === option.value)
+                      ? "text-white"
+                      : "text-black"
+                  }
+                  checkText={option.label}
+                  icon={
+                    checkedValues.some((item) => item === option.value)
+                      ? faCheck
+                      : faPlus
+                  }
+                />
+              </span>
+            </label>
+          </li>
+        ))}
+      </ul>
+      {error && <p className="text-red-500 mt-1 text-sm">{error.message}</p>}
+    </div>
+  );
+};
diff --git a/src/components/MyPage/InterestEdit/InterestCheckEdit/InterestCheckEdit.tsx b/src/components/MyPage/InterestEdit/InterestCheckEdit/InterestCheckEdit.tsx
deleted file mode 100644
index 16df5ac7..00000000
--- a/src/components/MyPage/InterestEdit/InterestCheckEdit/InterestCheckEdit.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Checkbox, Col, Row } from "antd";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
-import InterestBtn from "@/components/Interest/InterestButton/InterestBtn";
-import { CheckboxValueType } from "antd/es/checkbox/Group";
-import "@/components/Interest/InterestCheck/antdCheckbox.css";
-import Interest from "@/pages/Interest/Interest";
-
-import { useEffect } from "react";
-import { useGetMyProfileInterestTag } from "@/hooks/queries/useProfileQuery";
-
-type InterestCheckType = {
-  InterestValue: Interest[];
-  checkedValues: CheckboxValueType[];
-  setCheckedValues: (check: CheckboxValueType[]) => void;
-};
-
-const InterestCheckEdit = ({
-  InterestValue,
-  checkedValues,
-  setCheckedValues,
-}: InterestCheckType) => {
-  const { data } = useGetMyProfileInterestTag();
-
-  const onChange = (check: CheckboxValueType[]) => {
-    setCheckedValues(check);
-  };
-
-  useEffect(() => {
-    if (data) setCheckedValues(data);
-  }, [data]);
-
-  return (
-    <>
-      <Checkbox.Group
-        style={{
-          width: "100%",
-        }}
-        value={checkedValues}
-        onChange={onChange}
-      >
-        <Row>
-          {InterestValue.map((valueInterest: Interest) => (
-            <Col key={valueInterest.id}>
-              <Checkbox value={valueInterest.name} className="checkboxHidden">
-                {checkedValues.includes(valueInterest.name) ? (
-                  <InterestBtn
-                    key={valueInterest.id}
-                    bgColor="bg-[#282828]"
-                    textColor="text-white"
-                    checkText={valueInterest.name}
-                    icon={faCheck}
-                  />
-                ) : (
-                  <InterestBtn
-                    bgColor="bg-[#dddddd]"
-                    textColor="text-black"
-                    checkText={valueInterest.name}
-                    icon={faPlus}
-                  />
-                )}
-              </Checkbox>
-            </Col>
-          ))}
-        </Row>
-      </Checkbox.Group>
-    </>
-  );
-};
-
-export default InterestCheckEdit;
diff --git a/src/components/MyPage/InterestEdit/InterestTagEditFrom/InterestTagEditFrom.tsx b/src/components/MyPage/InterestEdit/InterestTagEditFrom/InterestTagEditFrom.tsx
index 46ff60df..1d85a7fd 100644
--- a/src/components/MyPage/InterestEdit/InterestTagEditFrom/InterestTagEditFrom.tsx
+++ b/src/components/MyPage/InterestEdit/InterestTagEditFrom/InterestTagEditFrom.tsx
@@ -1,72 +1,78 @@
 import BottomButton from "@/components/Common/BottomButton/BottomButton";
 import CommonModal from "@/components/Common/CommonModal/CommonModal";
 import InterestHeader from "@/components/Interest/InterestHeader/InterestHeader";
-import InterestCheckEdit from "@/components/MyPage/InterestEdit/InterestCheckEdit/InterestCheckEdit";
-import { interestsData } from "@/data/InterestData";
-import { CheckboxValueType } from "antd/es/checkbox/Group";
-import { useState } from "react";
+import { interestsOption } from "@/data/InterestData";
+import { useEffect } from "react";
 import LoadingBox from "@/components/Common/Loading/LoadingBox/LoadingBox";
 import { useModalStore } from "@/stores/modalStore";
-import { usePostMyProfileInterestTag } from "@/hooks/queries/useProfileQuery";
-export type Interest = {
-  id: number;
-  name: string;
-};
+import {
+  useGetMyProfileInterestTag,
+  usePostMyProfileInterestTag,
+} from "@/hooks/queries/useProfileQuery";
+import { Checkbox } from "@/components/Common/Form";
+import { useForm } from "react-hook-form";
+
+interface InterestTagForm {
+  interests: string[];
+}
 
 function InterestTagEditFrom() {
   const { setModal, closeModal } = useModalStore();
-  const [checkedValues, setCheckedValues] = useState<CheckboxValueType[]>([]);
+  const { data: initialInterests } = useGetMyProfileInterestTag();
+  const { register, watch, handleSubmit, reset } = useForm<InterestTagForm>({
+    defaultValues: { interests: [] },
+  });
 
-  const InterestValue: Interest[] = interestsData;
-  const onSuccessPostMyProfileInterestTag = () => {
-    setModal(
-      <CommonModal
-        content="관심사 수정에 성공하였습니다."
-        buttonContent="확인"
-        onClick={closeModal}
-      />
-    );
-  };
+  const watchedInterests = watch("interests");
 
-  const { mutate, isLoading } = usePostMyProfileInterestTag({
-    onSuccess: onSuccessPostMyProfileInterestTag,
+  const { mutate: updateInterests, isLoading } = usePostMyProfileInterestTag({
+    onSuccess: () => {
+      setModal(
+        <CommonModal
+          content="관심사 수정에 성공하였습니다."
+          buttonContent="확인"
+          onClick={closeModal}
+        />
+      );
+    },
   });
 
-  const handleInterestEdit = () => {
-    mutate(checkedValues);
+  const handleFormSubmit = (data: InterestTagForm) => {
+    updateInterests(data.interests);
   };
 
+  useEffect(() => {
+    if (initialInterests) {
+      reset({ interests: initialInterests });
+    }
+  }, [reset, initialInterests]);
+
+  if (isLoading) return <LoadingBox />;
+
   return (
-    <>
-      {isLoading ? (
-        <LoadingBox />
-      ) : (
-        <>
-          <div className="w-full h-full px-[15.3rem] py-[15.2rem] _sm:px-[2rem] _sm:py-[15.2rem] _md:px-[2rem] _md:py-[11.2rem]">
-            <div className="mb-[11rem]">
-              <InterestHeader />
-            </div>
-            <InterestCheckEdit
-              InterestValue={InterestValue}
-              setCheckedValues={setCheckedValues}
-              checkedValues={checkedValues}
-            />
-          </div>
-          <BottomButton
-            onClick={handleInterestEdit}
-            content="수정완료"
-            borderColor="border-black"
-            btnMaxWidth="max-w-[46.7rem]"
-            btnHeight="h-[5.1rem]"
-            marginX="mx-[2rem]"
-            marginXmob="_sm:ml-[20rem]"
-            btnColor="bg-black"
-            btnTextColor="text-white"
-            btnMaxWidthMob="_sm:max-w-[16.4rem]"
-          />
-        </>
-      )}
-    </>
+    <form onSubmit={handleSubmit(handleFormSubmit)}>
+      <div className="w-full h-full px-[15.3rem] py-[15.2rem] _sm:px-[2rem] _sm:py-[15.2rem] _md:px-[2rem] _md:py-[11.2rem]">
+        <div className="mb-[11rem]">
+          <InterestHeader />
+        </div>
+        <Checkbox
+          options={interestsOption}
+          registration={register("interests")}
+          checkedValues={watchedInterests}
+        />
+      </div>
+      <BottomButton
+        content="수정완료"
+        borderColor="border-black"
+        btnMaxWidth="max-w-[46.7rem]"
+        btnHeight="h-[5.1rem]"
+        marginX="mx-[2rem]"
+        marginXmob="_sm:ml-[20rem]"
+        btnColor="bg-black"
+        btnTextColor="text-white"
+        btnMaxWidthMob="_sm:max-w-[16.4rem]"
+      />
+    </form>
   );
 }
 

From 5e292e66f1b8cc5b9c15b649cd890fe51480fd6d Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Mon, 23 Dec 2024 22:45:12 +0900
Subject: [PATCH 08/15] =?UTF-8?q?Feat:=20InterestCheck=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=97=86=EC=95=A0=EA=B3=A0,=20In?=
 =?UTF-8?q?terest=EC=97=90=EC=84=9C=20Checkbox=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/Button.tsx              |  2 +-
 .../Interest/InterestCheck/InterestCheck.tsx  | 60 -------------------
 .../Interest/InterestCheck/antdCheckbox.css   |  7 ---
 .../InterestTagEdit.tsx}                      |  0
 src/pages/Interest/Interest.tsx               | 38 ++++++------
 .../MyPage/InterestEdit/InterestEdit.tsx      |  4 +-
 6 files changed, 22 insertions(+), 89 deletions(-)
 delete mode 100644 src/components/Interest/InterestCheck/InterestCheck.tsx
 delete mode 100644 src/components/Interest/InterestCheck/antdCheckbox.css
 rename src/components/MyPage/{InterestEdit/InterestTagEditFrom/InterestTagEditFrom.tsx => InterestTagEdit/InterestTagEdit.tsx} (100%)

diff --git a/src/components/Common/Button.tsx b/src/components/Common/Button.tsx
index ceeb5e98..432c81f8 100644
--- a/src/components/Common/Button.tsx
+++ b/src/components/Common/Button.tsx
@@ -6,7 +6,7 @@ interface Props {
   textSize: string;
   fontWeight: string;
   textColor: string;
-  handleClick: () => void;
+  handleClick?: () => void;
 }
 
 function Button({
diff --git a/src/components/Interest/InterestCheck/InterestCheck.tsx b/src/components/Interest/InterestCheck/InterestCheck.tsx
deleted file mode 100644
index 0d167104..00000000
--- a/src/components/Interest/InterestCheck/InterestCheck.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Checkbox, Col, Row } from "antd";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
-import InterestBtn from "@/components/Interest/InterestButton/InterestBtn";
-import { CheckboxValueType } from "antd/es/checkbox/Group";
-import "@/components/Interest/InterestCheck/antdCheckbox.css";
-import Interest from "@/pages/Interest/Interest";
-
-type InterestCheckType = {
-  InterestValue: Interest[];
-  checkedValues: CheckboxValueType[];
-  setCheckedValues: (check: CheckboxValueType[]) => void;
-};
-
-const InterestCheck = ({
-  InterestValue,
-  setCheckedValues,
-  checkedValues,
-}: InterestCheckType) => {
-  const onChange = (check: CheckboxValueType[]) => {
-    setCheckedValues(check);
-  };
-
-  return (
-    <>
-      <Checkbox.Group
-        style={{
-          width: "100%",
-        }}
-        onChange={onChange}
-      >
-        <Row>
-          {InterestValue.map((valueInterest: Interest) => (
-            <Col key={valueInterest.id}>
-              <Checkbox value={valueInterest.name} className="checkboxHidden">
-                {checkedValues.includes(valueInterest.name) ? (
-                  <InterestBtn
-                    bgColor="bg-[#282828]"
-                    textColor="text-white"
-                    checkText={valueInterest.name}
-                    icon={faCheck}
-                  />
-                ) : (
-                  <InterestBtn
-                    bgColor="bg-[#dddddd]"
-                    textColor="text-black"
-                    checkText={valueInterest.name}
-                    icon={faPlus}
-                  />
-                )}
-              </Checkbox>
-            </Col>
-          ))}
-        </Row>
-      </Checkbox.Group>
-    </>
-  );
-};
-
-export default InterestCheck;
diff --git a/src/components/Interest/InterestCheck/antdCheckbox.css b/src/components/Interest/InterestCheck/antdCheckbox.css
deleted file mode 100644
index d82451ea..00000000
--- a/src/components/Interest/InterestCheck/antdCheckbox.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.checkboxHidden > .ant-checkbox {
-  display: none;
-}
-.checkboxHidden > .ant-checkbox:hover {
-  border-color: blue;
-  background-color: yellow;
-}
diff --git a/src/components/MyPage/InterestEdit/InterestTagEditFrom/InterestTagEditFrom.tsx b/src/components/MyPage/InterestTagEdit/InterestTagEdit.tsx
similarity index 100%
rename from src/components/MyPage/InterestEdit/InterestTagEditFrom/InterestTagEditFrom.tsx
rename to src/components/MyPage/InterestTagEdit/InterestTagEdit.tsx
diff --git a/src/pages/Interest/Interest.tsx b/src/pages/Interest/Interest.tsx
index 080db984..ab97af88 100644
--- a/src/pages/Interest/Interest.tsx
+++ b/src/pages/Interest/Interest.tsx
@@ -1,11 +1,8 @@
-import { useState } from "react";
 import { useLocation } from "react-router-dom";
-import { CheckboxValueType } from "antd/es/checkbox/Group";
 import LoginMobCard from "@/components/Common/LoginMobCard";
 import Button from "@/components/Common/Button";
-import InterestCheck from "@/components/Interest/InterestCheck/InterestCheck";
+import { interestsOption } from "@/data/InterestData";
 import InterestHeader from "@/components/Interest/InterestHeader/InterestHeader";
-import { interestsData } from "@/data/InterestData";
 import basicOrangeProfileImage from "@/assets/image/basic-profile-image-orange.png";
 import basicGrayProfileImage from "@/assets/image/basic-profile-image-gray.png";
 import basicPinkProfileImage from "@/assets/image/basic-profile-image-pink.png";
@@ -15,20 +12,24 @@ import Loading from "@/components/Common/Loading/Loading";
 import { usePostAuth } from "@/hooks/queries/useAuthQuery";
 import { usePostProfileImage } from "@/hooks/queries/useFileQuery";
 import { usePostSignUp } from "@/hooks/queries/useUserQuery";
+import { Checkbox } from "@/components/Common/Form";
+import { useForm } from "react-hook-form";
 
-type Interest = {
-  id: number;
-  name: string;
-};
+interface InterestTagForm {
+  interests: string[];
+}
 
 const Interest = () => {
-  const [checkedValues, setCheckedValues] = useState<CheckboxValueType[]>([]);
   const location = useLocation();
   const locationState = location.state;
-  const InterestValue: Interest[] = interestsData;
   const { mutateAsync: postSignUpMutateAsync, isLoading: postSignUpLoading } =
     usePostSignUp();
 
+  const { register, watch, handleSubmit } = useForm<InterestTagForm>({
+    defaultValues: { interests: [] },
+  });
+  const watchedInterests = watch("interests");
+
   const {
     mutate: postSignUpProfileImageMutate,
     isLoading: postSignUpProfileImageLoading,
@@ -49,12 +50,12 @@ const Interest = () => {
     return imagePaths[randomIndex];
   };
 
-  const handleSignUp = async () => {
+  const handleSignUp = async (formData: InterestTagForm) => {
     const data = await postSignUpMutateAsync({
       identifier: locationState.gitNickName,
       nickname: locationState.nickName,
       information: locationState.myInfo,
-      interest: checkedValues,
+      interest: formData.interests,
     });
     await mutateAsync();
     postSignUpProfileImageMutate({
@@ -67,15 +68,15 @@ const Interest = () => {
     return <Loading />;
   }
   return (
-    <>
+    <form onSubmit={handleSubmit(handleSignUp)}>
       <LoginMobCard>
         <div className="mb-[22rem]">
           <InterestHeader />
         </div>
-        <InterestCheck
-          InterestValue={InterestValue}
-          setCheckedValues={setCheckedValues}
-          checkedValues={checkedValues}
+        <Checkbox
+          options={interestsOption}
+          registration={register("interests")}
+          checkedValues={watchedInterests}
         />
         <div className="flex flex-col justify-between h-40 mt-[22rem]">
           <Button
@@ -86,11 +87,10 @@ const Interest = () => {
             textSize={"text-[1.7rem]"}
             textColor={"text-white"}
             fontWeight={"font-medium"}
-            handleClick={handleSignUp}
           />
         </div>
       </LoginMobCard>
-    </>
+    </form>
   );
 };
 export default Interest;
diff --git a/src/pages/MyPage/InterestEdit/InterestEdit.tsx b/src/pages/MyPage/InterestEdit/InterestEdit.tsx
index 1a53373b..5eccd9f4 100644
--- a/src/pages/MyPage/InterestEdit/InterestEdit.tsx
+++ b/src/pages/MyPage/InterestEdit/InterestEdit.tsx
@@ -2,7 +2,7 @@ import Header from "@/components/Common/Header/Header";
 import LoadingBox from "@/components/Common/Loading/LoadingBox/LoadingBox";
 import MobCard from "@/components/Common/MobCard";
 import CommonGetErrorFallback from "@/components/Error/CommonGetErrorFallback/CommonGetErrorFallback";
-import InterestTagEditFrom from "@/components/MyPage/InterestEdit/InterestTagEditFrom/InterestTagEditFrom";
+import InterestTagEdit from "@/components/MyPage/InterestTagEdit/InterestTagEdit";
 import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { QueryErrorResetBoundary } from "react-query";
@@ -19,7 +19,7 @@ const InterestEdit = () => {
               FallbackComponent={CommonGetErrorFallback}
             >
               <Suspense fallback={<LoadingBox />}>
-                <InterestTagEditFrom />
+                <InterestTagEdit />
               </Suspense>
             </ErrorBoundary>
           )}

From d1ad109f176c0db88f2af1525d4ee6aee21ebd5a Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Tue, 24 Dec 2024 18:42:51 +0900
Subject: [PATCH 09/15] =?UTF-8?q?Feat:=20UserImage=EC=9D=98=20antd=20Form,?=
 =?UTF-8?q?=20Upload,=20message=EB=A5=BC=20=EC=A7=81=EC=A0=91=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84,=20UserInformationEditForm=EC=9D=98=20antd=20Form?=
 =?UTF-8?q?=EC=9D=84=20=EC=A7=81=EC=A0=91=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/patchProfileImage.ts                 |  21 +-
 src/apis/postInterestEditApi.ts               |   3 +-
 src/apis/postSignUpApi.ts                     |   3 +-
 .../Common/BottomButton/BottomButton.tsx      |   2 +-
 src/components/Common/Button.tsx              |  23 +-
 src/components/Common/Form/index.tsx          |   4 +-
 .../MyPage/UserEdit/UserImg/UserImg.tsx       | 112 +-----
 .../UserInformationEditForm.tsx               | 357 ++++++++++--------
 src/hooks/queries/useFileQuery.tsx            |   2 +-
 src/hooks/queries/useProfileQuery.tsx         |   3 +-
 src/hooks/queries/useUserQuery.tsx            |  11 +-
 src/types/profileType.ts                      |   2 +-
 12 files changed, 246 insertions(+), 297 deletions(-)

diff --git a/src/apis/patchProfileImage.ts b/src/apis/patchProfileImage.ts
index e9d0886d..a313ced8 100644
--- a/src/apis/patchProfileImage.ts
+++ b/src/apis/patchProfileImage.ts
@@ -1,7 +1,8 @@
 import requests from "./axios/request";
 import { multiInstance } from "./axios/axios";
+
 type PostSignUpProfileImageParams = {
-  files: any;
+  files: File;
   userId: number;
 };
 
@@ -10,19 +11,15 @@ const patchProfileImage = async ({
   userId,
 }: PostSignUpProfileImageParams) => {
   if (!files) return;
+
   const formData = new FormData();
-  const realFile = files?.file?.originFileObj;
-  const blob = new Blob([realFile], { type: files?.file?.type });
-  formData.append("files", blob, `profile-image.jpg`);
+  formData.append("files", files, `profile-image.jpg`);
+
+  const data = await multiInstance.patch(
+    `${requests.fetchFile}/${userId}?type=profile`,
+    formData
+  );
 
-  const data = await multiInstance
-    .patch(`${requests.fetchFile}/${userId}?type=profile`, formData)
-    .then((res) => {
-      return res;
-    })
-    .catch((err) => {
-      throw err;
-    });
   return data;
 };
 
diff --git a/src/apis/postInterestEditApi.ts b/src/apis/postInterestEditApi.ts
index 70e11418..9753aa96 100644
--- a/src/apis/postInterestEditApi.ts
+++ b/src/apis/postInterestEditApi.ts
@@ -1,9 +1,8 @@
-import { CheckboxValueType } from "antd/es/checkbox/Group";
 import requests from "./axios/request";
 import { instance } from "./axios/axios";
 
 type postInterestEditApiType = {
-  interestEditData: CheckboxValueType[];
+  interestEditData: string[];
 };
 const postInterestEditApi = async ({
   interestEditData,
diff --git a/src/apis/postSignUpApi.ts b/src/apis/postSignUpApi.ts
index 7af63520..49ac8690 100644
--- a/src/apis/postSignUpApi.ts
+++ b/src/apis/postSignUpApi.ts
@@ -1,11 +1,10 @@
-import { CheckboxValueType } from "antd/es/checkbox/Group";
 import requests from "./axios/request";
 import { acceptInstance } from "./axios/axios";
 type SignUpApiParams = {
   identifier: string;
   nickname: string;
   information: string;
-  interest: CheckboxValueType[];
+  interest: string[];
 };
 
 const signUpApi = async ({
diff --git a/src/components/Common/BottomButton/BottomButton.tsx b/src/components/Common/BottomButton/BottomButton.tsx
index 5c417912..0d49a961 100644
--- a/src/components/Common/BottomButton/BottomButton.tsx
+++ b/src/components/Common/BottomButton/BottomButton.tsx
@@ -30,7 +30,7 @@ const BottomButton = ({
           type="submit"
           onClick={() => {
             {
-              onClick();
+              onClick && onClick();
             }
           }}
         >
diff --git a/src/components/Common/Button.tsx b/src/components/Common/Button.tsx
index 432c81f8..cfc998ee 100644
--- a/src/components/Common/Button.tsx
+++ b/src/components/Common/Button.tsx
@@ -1,12 +1,15 @@
-interface Props {
+import { ButtonHTMLAttributes } from "react";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   content: string;
-  width: string;
-  height: string;
-  backgroundColor: string;
-  textSize: string;
-  fontWeight: string;
-  textColor: string;
+  width?: string;
+  height?: string;
+  backgroundColor?: string;
+  textSize?: string;
+  fontWeight?: string;
+  textColor?: string;
   handleClick?: () => void;
+  className?: string;
 }
 
 function Button({
@@ -18,12 +21,14 @@ function Button({
   fontWeight,
   textColor,
   handleClick,
+  className,
+  ...props
 }: Props) {
   return (
     <button
-      className={`${width} ${height} ${backgroundColor} ${textColor} ${textSize} ${fontWeight} rounded-[1rem]`}
+      className={`${width} ${height} ${backgroundColor} ${textColor} ${textSize} ${fontWeight} rounded-[1rem] ${className}`}
       onClick={handleClick}
-      id="payment-button"
+      {...props}
     >
       {content}
     </button>
diff --git a/src/components/Common/Form/index.tsx b/src/components/Common/Form/index.tsx
index bf363c7a..193ca637 100644
--- a/src/components/Common/Form/index.tsx
+++ b/src/components/Common/Form/index.tsx
@@ -34,7 +34,7 @@ export const Input = ({
       <div className="flex gap-4 text-[1.4rem]">
         <label
           htmlFor={id}
-          className="flex shrink-0 justify-center items-center"
+          className="flex shrink-0 justify-center items-center text-[1.6rem] font-medium"
         >
           {label}
           {props.required && <span className="text-red-500 ml-1">*</span>}
@@ -82,7 +82,7 @@ export const TextArea = ({
       <div className="flex gap-4 text-[1.4rem]">
         <label
           htmlFor={id}
-          className="flex shrink-0 justify-center items-center"
+          className="flex shrink-0 justify-center items-center text-[1.6rem] font-medium"
         >
           {label}
           {props.required && <span className="text-red-500 ml-1">*</span>}
diff --git a/src/components/MyPage/MyPage/UserEdit/UserImg/UserImg.tsx b/src/components/MyPage/MyPage/UserEdit/UserImg/UserImg.tsx
index 5f7ddf2f..910f5aaa 100644
--- a/src/components/MyPage/MyPage/UserEdit/UserImg/UserImg.tsx
+++ b/src/components/MyPage/MyPage/UserEdit/UserImg/UserImg.tsx
@@ -1,108 +1,26 @@
 import { Profile } from "@/components/Common/Profile/Profile";
-import { Form, Upload, message } from "antd";
-import userImage from "@/assets/icon/image-edit.svg";
-import { useState } from "react";
-import React from "react";
 import { FRAMEID } from "@/constants/localStorageKey";
 import { decrypt } from "@/hooks/useCrypto";
-import { MyProfileDataType } from "@/types/profileType";
 import { profileImageFrame } from "@/data/frameData";
 
-function UserInfo({
-  data,
-  setImageUrl,
-  imageUrl,
-}: {
-  data?: MyProfileDataType;
-  setImageUrl: React.Dispatch<React.SetStateAction<string>>;
-  imageUrl: string;
-}) {
-  const [imgPreview, setimgPreview] = useState("");
+interface UserInfoProps {
+  image: string;
+}
+
+function ProfileImage({ image }: UserInfoProps) {
   const frameGet = localStorage.getItem(FRAMEID);
   const frameId = decrypt(frameGet);
 
-  const normFile = (e: any) => {
-    setImageUrl(e);
-    getBase64(e.file.originFileObj as any, (url) => {
-      setimgPreview(url);
-    });
-    if (Array.isArray(e)) {
-      return e;
-    }
-    return e && e.fileList;
-  };
-  const getBase64 = (img: any, callback: (url: string) => void) => {
-    const reader = new FileReader();
-    reader.addEventListener("load", () => callback(reader.result as string));
-    reader.readAsDataURL(img);
-  };
-
-  const beforeUpload = (file: any) => {
-    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
-    if (!isJpgOrPng) {
-      message.error("You can only upload JPG/PNG file!");
-    }
-    const isLt2M = file.size / 1024 / 1024 < 2;
-    if (!isLt2M) {
-      message.error("Image must smaller than 2MB!");
-    }
-    return isJpgOrPng && isLt2M;
-  };
-
   return (
-    <>
-      <Form.Item
-        name="fileResponse"
-        valuePropName="fileResponse"
-        getValueFromEvent={normFile}
-      >
-        <Upload
-          name="fileResponse"
-          showUploadList={false}
-          beforeUpload={beforeUpload}
-        >
-          {imageUrl ? (
-            <Profile>
-              {frameId && (
-                <Profile.ImageFrame
-                  frame={profileImageFrame[frameId]}
-                  frameStyle={`마이페이지`}
-                />
-              )}
-              <Profile.Image
-                imgSrc={imgPreview}
-                alt="프로필 이미지"
-                width="w-[10.2rem]"
-              />
-              <img
-                src={userImage}
-                alt="이미지 수정 아이콘"
-                className="absolute right-0 bottom-0 z-50"
-              />
-            </Profile>
-          ) : (
-            <Profile>
-              {frameId && (
-                <Profile.ImageFrame
-                  frame={profileImageFrame[frameId]}
-                  frameStyle={`마이페이지`}
-                />
-              )}
-              <Profile.Image
-                imgSrc={data?.fileResponse.accessURI}
-                alt="프로필 이미지"
-                width="w-[10.2rem]"
-              />
-              <img
-                src={userImage}
-                alt="이미지 수정 아이콘"
-                className="absolute right-0 bottom-0 z-50"
-              />
-            </Profile>
-          )}
-        </Upload>
-      </Form.Item>
-    </>
+    <Profile>
+      {frameId && (
+        <Profile.ImageFrame
+          frame={profileImageFrame[frameId]}
+          frameStyle={`마이페이지`}
+        />
+      )}
+      <Profile.Image imgSrc={image} alt="프로필 이미지" width="w-[10.2rem]" />
+    </Profile>
   );
 }
-export default UserInfo;
+export default ProfileImage;
diff --git a/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx b/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
index 9a150b11..b943cab6 100644
--- a/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
+++ b/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
@@ -1,13 +1,6 @@
-import { Form } from "antd";
-import { ChangeEvent, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import BottomButton from "@/components/Common/BottomButton/BottomButton";
-import UserPreview from "@/components/MyPage/MyPage/UserEdit/UserPreview/UserPreview";
-import InfoInput from "@/components/MyPage/MyPage/UserEdit/InfoInput/InfoInput";
-import formikUtil from "@/utils/useEditFormik";
-import UserInfo from "@/components/MyPage/MyPage/UserEdit/UserImg/UserImg";
 import UserName from "@/components/MyPage/MyPage/UserEdit/UserName/UserName";
-import NickNameInput from "@/components/Common/NickNameInput/NickNameInput";
-import { EditModal } from "@/components/MyPage/EditModal/EditModal";
 import {
   useGetMyProfile,
   usePostMyProfile,
@@ -15,38 +8,72 @@ import {
 import CommonMutationErrorModal from "@/components/Error/CommonMutationErrorModal/CommonMutationErrorModal";
 import { usePatchProfileImage } from "@/hooks/queries/useFileQuery";
 import { useQueryClient } from "react-query";
-import { useNavigate } from "react-router-dom";
 import { QUERY_KEY } from "@/constants/queryKey";
-import { PATH } from "@/constants/path";
 import { useModalStore } from "@/stores/modalStore";
+import { Controller, useForm, useWatch } from "react-hook-form";
+import { Input, TextArea } from "@/components/Common/Form";
+import { useGetCheckNickName } from "@/hooks/queries/useUserQuery";
+import Button from "@/components/Common/Button";
+import ProfileImage from "../../MyPage/UserEdit/UserImg/UserImg";
+import { makeBase64URL } from "@/utils/makeBase64URL";
+import userImage from "@/assets/icon/image-edit.svg";
+import { makeBase64ToFileList } from "@/utils/makeBase64ToFile";
+
+interface UserInformationFormType {
+  nickname: string;
+  information: string;
+  image: FileList | null;
+}
 
 function UserInformationEditForm() {
   const { setModal, closeModal } = useModalStore();
-  const [signUpBoolean, setsignUpBoolean] = useState(true);
-  const [nickCheck, setNickCheck] = useState("");
-  const [nickName, setNickName] = useState("");
-  const [myInfo, setMyInfo] = useState("");
-  const [infoShow, setInfoShow] = useState(0);
-  const [nickNameShow, setNickNameShow] = useState(0);
-  const [imageUrl, setImageUrl] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+  const [isNicknameChecked, setIsNicknameChecked] = useState(false);
+  const [nicknameInfo, setNicknameInfo] = useState("");
+  const [imagePreview, setImagePreview] = useState("");
+  const selectedProfileFileList = useRef<HTMLInputElement>(null);
 
   const queryClient = useQueryClient();
-  const navigate = useNavigate();
+  const { data: profileData } = useGetMyProfile();
+  const { mutateAsync: postMyProfileMutate } = usePostMyProfile();
+  const { mutateAsync: patchProfileImage } = usePatchProfileImage();
 
-  const { data } = useGetMyProfile();
-  const { formik } = formikUtil();
+  const originalFileList = useMemo(
+    () =>
+      makeBase64ToFileList(
+        profileData?.fileResponse.source || "",
+        `profile_original`
+      ),
+    [profileData?.fileResponse?.source]
+  );
 
-  const { mutateAsync: postMyProfileMutate } = usePostMyProfile();
+  const {
+    register,
+    handleSubmit,
+    setError,
+    clearErrors,
+    reset,
+    control,
+    trigger,
+    formState: { errors },
+  } = useForm<UserInformationFormType>();
+
+  const changedNickname = useWatch({
+    control,
+    name: "nickname",
+  });
+
+  const changedImage = useWatch({
+    control,
+    name: "image",
+  });
 
-  const { mutateAsync: patchProfileImage } = usePatchProfileImage();
   const changeMyInformation = async ({
     file,
     userId,
     myInfo,
     nickName,
   }: {
-    file: string;
+    file: File;
     userId: number;
     myInfo: string;
     nickName: string;
@@ -57,13 +84,6 @@ function UserInformationEditForm() {
         patchProfileImage({ userId, file }),
       ]);
       queryClient.invalidateQueries(QUERY_KEY.MY_PROFILE);
-      setNickCheck("");
-      setNickName("");
-      setInfoShow(0);
-      setNickNameShow(0);
-      setIsLoading(false);
-      closeModal();
-      navigate(PATH.MY_PAGE);
     } catch (error: any) {
       setModal(
         <CommonMutationErrorModal error={error} closeModal={closeModal} />
@@ -71,150 +91,161 @@ function UserInformationEditForm() {
     }
   };
 
-  const handleNickNameChange = (e: ChangeEvent<HTMLInputElement>) => {
-    formik.handleChange(e);
-    setNickName(e.target.value);
-  };
-  const handleMyInfoChange = (e: any) => {
-    formik.handleChange(e);
-    setMyInfo(e.target.value);
-  };
-  const editModalOpen = () => {
-    setIsLoading(false);
-    setModal(
-      <EditModal
-        modalHandle={editHandle}
-        isLoading={isLoading}
-        editBoolean={true}
-        success="유저정보를 수정하시겠습니까?"
-        fail="Error"
-        buttonText="확인하기"
-      />
-    );
+  const { mutate: getCheckNinkNameMutate } = useGetCheckNickName({
+    onSuccess: () => {
+      setIsNicknameChecked(true);
+      setNicknameInfo("사용 가능한 닉네임입니다.");
+    },
+    onError: () => {
+      setIsNicknameChecked(false);
+      setError("nickname", {
+        type: "manual",
+        message: "이미 사용 중인 닉네임입니다.",
+      });
+    },
+  });
+
+  useEffect(() => {
+    reset({
+      nickname: profileData?.nickname,
+      information: profileData?.information,
+      image: null,
+    });
+  }, [profileData, reset]);
+
+  useEffect(() => {
+    trigger("nickname");
+    setNicknameInfo("");
+    setIsNicknameChecked(false);
+    clearErrors("nickname");
+  }, [changedNickname, clearErrors, trigger]);
+
+  const checkNickname = () => {
+    if (errors.nickname) return;
+    getCheckNinkNameMutate({ value: changedNickname });
   };
-  const editHandle = () => {
-    setIsLoading(true);
-    const valueMyInfo = formik.values.myInfo;
-
-    const finalNickName = nickName || data?.nickname;
-    const finalMyinfo = valueMyInfo || data?.information;
-
-    if (finalNickName && signUpBoolean) {
-      if (/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-zA-Z0-9]/.test(finalNickName)) {
-        setModal(
-          <EditModal
-            modalHandle={closeModal}
-            isLoading={isLoading}
-            editBoolean={true}
-            success="닉네임에는 특수문자를 사용할 수 없습니다."
-            fail="Error"
-            buttonText="확인하기"
-          />
-        );
-      }
-    }
-    if (signUpBoolean && finalMyinfo && finalNickName && data) {
+
+  const editHandle = (data: UserInformationFormType) => {
+    if (!profileData) return;
+    if (profileData?.nickname === data.nickname || isNicknameChecked) {
       changeMyInformation({
-        file: imageUrl,
-        userId: data.userId,
-        myInfo: finalMyinfo,
-        nickName: finalNickName,
+        file: data.image?.[0] || originalFileList?.[0],
+        userId: profileData.userId,
+        myInfo: data.information,
+        nickName: data.nickname,
       });
-      postMyProfileMutate({ myInfo: finalMyinfo, nickName: finalNickName });
     }
-    setIsLoading(false);
+  };
 
-    if (!signUpBoolean && finalNickName !== data?.nickname) {
-      setModal(
-        <EditModal
-          modalHandle={closeModal}
-          isLoading={isLoading}
-          editBoolean={true}
-          success="닉네임 중복체크 해주세요"
-          fail="Error"
-          buttonText="확인하기"
-        />
+  useEffect(() => {
+    const file = changedImage?.[0];
+
+    if (!file) {
+      setImagePreview(
+        makeBase64URL({
+          uri: profileData?.fileResponse?.source,
+          format: "jpg",
+        })
       );
+      return;
     }
-    if (isLoading) {
-      closeModal();
-    }
-  };
+
+    const objectUrl = URL.createObjectURL(file);
+    setImagePreview(objectUrl);
+
+    return () => {
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [profileData?.fileResponse?.source, changedImage]);
+
   return (
     <>
-      <Form>
-        <UserInfo data={data} setImageUrl={setImageUrl} imageUrl={imageUrl} />
-      </Form>
-      <UserName data={data} />
       <form
-        onSubmit={formik.handleSubmit}
-        className="w-full flex justify-center"
+        onSubmit={handleSubmit(editHandle)}
+        className="w-full flex flex-col gap-4"
       >
-        <ul className="w-5/6 _sm:w-11/12 _md:w-11/12">
-          {nickNameShow === 0 ? (
-            <UserPreview
-              label="닉네임"
-              id="nickName"
-              value={data?.nickname}
-              setShow={setNickNameShow}
-              setNickName={setNickName}
-            />
-          ) : (
-            <NickNameInput
-              label="닉네임"
-              required="required"
-              margin="mb-[5rem]"
-              id="nickName"
-              name="nickName"
-              placeholder="2 ~ 15자 입력 가능합니다."
-              formikNickName={formik.values.nickName}
-              userValue={data?.nickname}
-              maxLength={15}
-              signUpBoolean={signUpBoolean}
-              setsignUpBoolean={setsignUpBoolean}
-              value={nickName}
-              nickCheck={nickCheck}
-              setNickCheck={setNickCheck}
-              setValue={setNickName}
-              onChange={handleNickNameChange}
-              onBlur={formik.handleBlur}
-              error={
-                formik.touched.nickName && formik.errors.nickName
-                  ? formik.errors.nickName
-                  : null
-              }
-            />
-          )}
-          {infoShow === 0 ? (
-            <UserPreview
-              label="한 줄 소개"
-              id="myInfoPreveiw"
-              value={data?.information}
-              setShow={setInfoShow}
-              setMyInfo={setMyInfo}
-            />
-          ) : (
-            <InfoInput
-              label="한 줄 소개"
-              required={null}
-              margin={null}
-              id="myInfo"
-              name="myInfo"
-              placeholder="자신을 소개해주세요. (100자까지)"
-              maxLength={100}
-              value={myInfo}
-              onChange={handleMyInfoChange}
-              onBlur={formik.handleBlur}
-              error={
-                formik.touched.myInfo && formik.errors.myInfo
-                  ? formik.errors.myInfo
-                  : null
-              }
-            />
-          )}
-        </ul>
+        <div className="flex flex-col gap-6 justify-center items-center">
+          <button
+            className="w-[10rem] h-[10rem]  rounded-full"
+            onClick={() => selectedProfileFileList?.current?.click()}
+          >
+            <div className="relative">
+              <ProfileImage image={imagePreview} />
+              <img
+                src={userImage}
+                alt="이미지 수정 아이콘"
+                className="absolute right-0 bottom-0 z-50"
+              />
+            </div>
+          </button>
+
+          <Controller
+            name="image"
+            control={control}
+            render={({ field }) => (
+              <input
+                type="file"
+                accept="image/*"
+                id="image"
+                className="hidden"
+                ref={selectedProfileFileList}
+                onChange={(e) => {
+                  field.onChange(e.target.files);
+                }}
+              />
+            )}
+          />
+
+          <UserName data={profileData} />
+        </div>
+
+        <div className="flex gap-5">
+          <Input
+            id="nickname"
+            label="닉네임"
+            registration={register("nickname", {
+              required: "닉네임을 입력해주세요",
+              pattern: {
+                value: /^[가-힣a-zA-Z0-9]{2,15}$/,
+                message: "특수문자를 제외한 2~15자 까지 입력 가능합니다.",
+              },
+            })}
+            placeholder="특수문자를 제외한 2~15자 까지 입력 가능합니다."
+            maxLength={15}
+            required
+          />
+
+          <Button
+            type="button"
+            content="중복 확인"
+            handleClick={checkNickname}
+            disabled={
+              !changedNickname ||
+              changedNickname === profileData?.nickname ||
+              Boolean(errors.nickname)
+            }
+            className="w-[7rem] h-[3.5rem] shrink-0 bg-[#6893FF] disabled:bg-[#dddddd] text-white text-[1.3rem] font-medium "
+          />
+        </div>
+        <span className="text-right text-red-500 ">
+          {errors?.nickname?.message}
+        </span>
+        <span className="text-right text-blue-500">{nicknameInfo}</span>
+
+        <TextArea
+          id="information"
+          label="한 줄 소개"
+          registration={register("information", {
+            maxLength: {
+              value: 100,
+              message: "최대 100자까지 입력 가능합니다.",
+            },
+          })}
+          placeholder="나를 표현하는 한 마디를 적어주세요."
+          maxLength={100}
+          rows={5}
+        />
         <BottomButton
-          onClick={editModalOpen}
           content="수정완료"
           borderColor="border-black"
           btnMaxWidth="max-w-[46.7rem]"
diff --git a/src/hooks/queries/useFileQuery.tsx b/src/hooks/queries/useFileQuery.tsx
index 55fe6741..6b300c29 100644
--- a/src/hooks/queries/useFileQuery.tsx
+++ b/src/hooks/queries/useFileQuery.tsx
@@ -27,7 +27,7 @@ export const usePostProfileImage = () => {
 };
 
 interface PatchProfileImageMutationType {
-  file: string;
+  file: File;
   userId: number;
 }
 
diff --git a/src/hooks/queries/useProfileQuery.tsx b/src/hooks/queries/useProfileQuery.tsx
index eb8f7993..2a658848 100644
--- a/src/hooks/queries/useProfileQuery.tsx
+++ b/src/hooks/queries/useProfileQuery.tsx
@@ -15,7 +15,6 @@ import {
   MyProfileDataType,
   UserDataType,
 } from "@/types/profileType";
-import { CheckboxValueType } from "antd/es/checkbox/Group";
 import { AxiosError } from "axios";
 import { useMutation, useQuery } from "react-query";
 import { useNavigate } from "react-router-dom";
@@ -89,7 +88,7 @@ export const usePostMyProfileInterestTag = ({
 }: usePostMyProfileInterestTagParams) => {
   const { setModal, closeModal } = useModalStore();
   const { mutate, isLoading } = useMutation(
-    (checkedValues: CheckboxValueType[]) =>
+    (checkedValues: string[]) =>
       postInterestEditApi({ interestEditData: checkedValues }),
     {
       onSuccess: () => onSuccess(),
diff --git a/src/hooks/queries/useUserQuery.tsx b/src/hooks/queries/useUserQuery.tsx
index a74f8a86..fae5a6f2 100644
--- a/src/hooks/queries/useUserQuery.tsx
+++ b/src/hooks/queries/useUserQuery.tsx
@@ -1,6 +1,5 @@
 import signUpApi from "@/apis/postSignUpApi";
 import { FRAMEID, IDENTIFIER } from "@/constants/localStorageKey";
-import { CheckboxValueType } from "antd/es/checkbox/Group";
 import { AxiosError, AxiosResponse } from "axios";
 import { useMutation } from "react-query";
 import { encrypt } from "../useCrypto";
@@ -18,7 +17,7 @@ interface PostSignUpMutateType {
   identifier: string;
   nickname: string;
   information: string;
-  interest: CheckboxValueType[];
+  interest: string[];
 }
 
 export const usePostSignUp = () => {
@@ -70,9 +69,11 @@ export const useGetCheckNickName = ({
         onSuccess(res);
       },
       onError: (err: AxiosError<{ message?: string }>) => {
-        setModal(
-          <CommonMutationErrorModal error={err} closeModal={closeModal} />
-        );
+        if (err?.response?.data?.message !== "이미 존재하는 닉네임입니다.") {
+          setModal(
+            <CommonMutationErrorModal error={err} closeModal={closeModal} />
+          );
+        }
         onError();
       },
     }
diff --git a/src/types/profileType.ts b/src/types/profileType.ts
index ef2a4056..3be3c3d4 100644
--- a/src/types/profileType.ts
+++ b/src/types/profileType.ts
@@ -6,7 +6,7 @@ export interface MyProfileDataType {
   point: number;
   progressBar: number;
   fileResponse: {
-    accessURI: string;
+    source: string;
   };
 }
 

From 000e12583cdfcff5cc82e8529f92143e0c55b0a5 Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Tue, 24 Dec 2024 19:01:46 +0900
Subject: [PATCH 10/15] =?UTF-8?q?Chore:=20antd=20=EB=9D=BC=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 -
 src/components/Common/Form/index.tsx          |   2 +-
 .../InstanceCreate/InstanceCreate.tsx         |   1 -
 yarn.lock                                     | 623 +-----------------
 4 files changed, 3 insertions(+), 624 deletions(-)

diff --git a/package.json b/package.json
index 9a41a71c..4097ee0f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
     "@types/react-facebook-login": "^4.1.10",
     "@types/react-modal": "^3.16.3",
     "@types/yup": "^0.32.0",
-    "antd": "^5.12.5",
     "axios": "^1.6.3",
     "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
diff --git a/src/components/Common/Form/index.tsx b/src/components/Common/Form/index.tsx
index 193ca637..e5c60c34 100644
--- a/src/components/Common/Form/index.tsx
+++ b/src/components/Common/Form/index.tsx
@@ -130,7 +130,7 @@ export const Select = ({
       <div className="flex gap-4 text-[1.4rem]">
         <label
           htmlFor={id}
-          className="flex shrink-0 justify-center items-center"
+          className="flex shrink-0 justify-center items-center  text-[1.6rem] font-medium"
         >
           {label}
           {props.required && <span className="text-red-500 ml-1">*</span>}
diff --git a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
index 86854220..2b8ea362 100644
--- a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
+++ b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
@@ -1,4 +1,3 @@
-import "@/utils/antdCheck.module.css";
 import moment from "moment";
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
diff --git a/yarn.lock b/yarn.lock
index fde0294f..b0daa8cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25,53 +25,6 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@ant-design/colors@^7.0.0":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-7.0.1.tgz#5f4cf62fecbd7e91a11a25d78c41cc2d1444e5c3"
-  integrity sha512-SrZBQcrXNmrH8TJPXZReYcXs4jSqkwNS3EEhpN6esBI9sNX70g5LZP05/uSPjflkIt2orvjivQ/ywVBqTbHZ+A==
-  dependencies:
-    "@ctrl/tinycolor" "^4.0.2"
-
-"@ant-design/cssinjs@^1.18.1":
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/@ant-design/cssinjs/-/cssinjs-1.18.2.tgz#d993a64c1d0bf51f4a9d662ddc8ed8426977b5c3"
-  integrity sha512-514V9rjLaFYb3v4s55/8bg2E6fb81b99s3crDZf4nSwtiDLLXs8axnIph+q2TVkY2hbJPZOn/cVsVcnLkzFy7w==
-  dependencies:
-    "@babel/runtime" "^7.11.1"
-    "@emotion/hash" "^0.8.0"
-    "@emotion/unitless" "^0.7.5"
-    classnames "^2.3.1"
-    csstype "^3.1.3"
-    rc-util "^5.35.0"
-    stylis "^4.0.13"
-
-"@ant-design/icons-svg@^4.3.0":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz#4b2f65a17d4d32b526baa6414aca2117382bf8da"
-  integrity sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g==
-
-"@ant-design/icons@^5.2.6":
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-5.2.6.tgz#2d4a9a37f531eb2a20cebec01d6fb69cf593900d"
-  integrity sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==
-  dependencies:
-    "@ant-design/colors" "^7.0.0"
-    "@ant-design/icons-svg" "^4.3.0"
-    "@babel/runtime" "^7.11.2"
-    classnames "^2.2.6"
-    rc-util "^5.31.1"
-
-"@ant-design/react-slick@~1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@ant-design/react-slick/-/react-slick-1.0.2.tgz#241bb412aeacf7ff5d50c61fa5db66773fde6b56"
-  integrity sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==
-  dependencies:
-    "@babel/runtime" "^7.10.4"
-    classnames "^2.2.5"
-    json2mq "^0.2.0"
-    resize-observer-polyfill "^1.5.1"
-    throttle-debounce "^5.0.0"
-
 "@antfu/utils@^0.7.2":
   version "0.7.7"
   resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.7.tgz#26ea493a831b4f3a85475e7157be02fb4eab51fb"
@@ -1067,13 +1020,6 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.4":
-  version "7.23.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.7.tgz#dd7c88deeb218a0f8bd34d5db1aa242e0f203193"
-  integrity sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
 "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
@@ -1144,31 +1090,11 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@ctrl/tinycolor@^3.6.0", "@ctrl/tinycolor@^3.6.1":
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
-  integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
-
-"@ctrl/tinycolor@^4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-4.0.2.tgz#7665b09c0163722ffc20ee885eb9a8ff80d9ebde"
-  integrity sha512-fKQinXE9pJ83J1n+C3rDl2xNLJwfoYNvXLRy5cYZA9hBJJw2q+sbb/AOSNKmLxnTWyNTmy4994dueSwP4opi5g==
-
 "@discoveryjs/json-ext@^0.5.3":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@emotion/hash@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
-
-"@emotion/unitless@^0.7.5":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
 "@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
@@ -2168,72 +2094,6 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@rc-component/color-picker@~1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@rc-component/color-picker/-/color-picker-1.4.1.tgz#dcab0b660e9c4ed63a7582db68ed4a77c862cb93"
-  integrity sha512-vh5EWqnsayZa/JwUznqDaPJz39jznx/YDbyBuVJntv735tKXKwEUZZb2jYEldOg+NKWZwtALjGMrNeGBmqFoEw==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    "@ctrl/tinycolor" "^3.6.0"
-    classnames "^2.2.6"
-    rc-util "^5.30.0"
-
-"@rc-component/context@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@rc-component/context/-/context-1.4.0.tgz#dc6fb021d6773546af8f016ae4ce9aea088395e8"
-  integrity sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    rc-util "^5.27.0"
-
-"@rc-component/mini-decimal@^1.0.1":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz#7b7a362b14a0a54cb5bc6fd2b82731f29f11d9b0"
-  integrity sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==
-  dependencies:
-    "@babel/runtime" "^7.18.0"
-
-"@rc-component/mutate-observer@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz#ee53cc88b78aade3cd0653609215a44779386fd8"
-  integrity sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==
-  dependencies:
-    "@babel/runtime" "^7.18.0"
-    classnames "^2.3.2"
-    rc-util "^5.24.4"
-
-"@rc-component/portal@^1.0.0-8", "@rc-component/portal@^1.0.0-9", "@rc-component/portal@^1.0.2", "@rc-component/portal@^1.1.0", "@rc-component/portal@^1.1.1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@rc-component/portal/-/portal-1.1.2.tgz#55db1e51d784e034442e9700536faaa6ab63fc71"
-  integrity sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==
-  dependencies:
-    "@babel/runtime" "^7.18.0"
-    classnames "^2.3.2"
-    rc-util "^5.24.4"
-
-"@rc-component/tour@~1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@rc-component/tour/-/tour-1.11.1.tgz#bb47af908fb6fcaf395402901a1fb505ef8fb1e6"
-  integrity sha512-c9Lw3/oVinj5D64Rsp8aDLOXcgdViE+hq7bj0Qoo8fTuQEh9sSpUw5OZcum943JkjeIE4hLcc5FD4a5ANtMJ4w==
-  dependencies:
-    "@babel/runtime" "^7.18.0"
-    "@rc-component/portal" "^1.0.0-9"
-    "@rc-component/trigger" "^1.3.6"
-    classnames "^2.3.2"
-    rc-util "^5.24.4"
-
-"@rc-component/trigger@^1.17.0", "@rc-component/trigger@^1.18.0", "@rc-component/trigger@^1.18.2", "@rc-component/trigger@^1.3.6", "@rc-component/trigger@^1.5.0", "@rc-component/trigger@^1.7.0":
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/@rc-component/trigger/-/trigger-1.18.2.tgz#dc52c4c66fa8aaccaf0710498f2429fc05454e3b"
-  integrity sha512-jRLYgFgjLEPq3MvS87fIhcfuywFSRDaDrYw1FLku7Cm4esszvzTbA0JBsyacAyLrK9rF3TiHFcvoEDMzoD3CTA==
-  dependencies:
-    "@babel/runtime" "^7.23.2"
-    "@rc-component/portal" "^1.1.0"
-    classnames "^2.3.2"
-    rc-motion "^2.0.0"
-    rc-resize-observer "^1.3.1"
-    rc-util "^5.38.0"
-
 "@remix-run/router@1.14.1":
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.14.1.tgz#6d2dd03d52e604279c38911afc1079d58c50a755"
@@ -3958,60 +3818,6 @@ ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
-antd@^5.12.5:
-  version "5.12.5"
-  resolved "https://registry.yarnpkg.com/antd/-/antd-5.12.5.tgz#b4075a13c51483ee3721afddd28f9c7b342efb78"
-  integrity sha512-m9r9VhTmANS4kdBwHcxI4QWIGoZh3LspXNb2SxoezRSUZ9RUFpf+gO0AjPx8EPeO/nLKsHAoCSLza9r041bAgw==
-  dependencies:
-    "@ant-design/colors" "^7.0.0"
-    "@ant-design/cssinjs" "^1.18.1"
-    "@ant-design/icons" "^5.2.6"
-    "@ant-design/react-slick" "~1.0.2"
-    "@babel/runtime" "^7.23.4"
-    "@ctrl/tinycolor" "^3.6.1"
-    "@rc-component/color-picker" "~1.4.1"
-    "@rc-component/mutate-observer" "^1.1.0"
-    "@rc-component/tour" "~1.11.1"
-    "@rc-component/trigger" "^1.18.2"
-    classnames "^2.3.2"
-    copy-to-clipboard "^3.3.3"
-    dayjs "^1.11.1"
-    qrcode.react "^3.1.0"
-    rc-cascader "~3.20.0"
-    rc-checkbox "~3.1.0"
-    rc-collapse "~3.7.2"
-    rc-dialog "~9.3.4"
-    rc-drawer "~6.5.2"
-    rc-dropdown "~4.1.0"
-    rc-field-form "~1.41.0"
-    rc-image "~7.5.1"
-    rc-input "~1.3.11"
-    rc-input-number "~8.4.0"
-    rc-mentions "~2.9.1"
-    rc-menu "~9.12.4"
-    rc-motion "^2.9.0"
-    rc-notification "~5.3.0"
-    rc-pagination "~4.0.3"
-    rc-picker "~3.14.6"
-    rc-progress "~3.5.1"
-    rc-rate "~2.12.0"
-    rc-resize-observer "^1.4.0"
-    rc-segmented "~2.2.2"
-    rc-select "~14.10.0"
-    rc-slider "~10.5.0"
-    rc-steps "~6.0.1"
-    rc-switch "~4.1.0"
-    rc-table "~7.36.1"
-    rc-tabs "~12.14.1"
-    rc-textarea "~1.5.3"
-    rc-tooltip "~6.1.3"
-    rc-tree "~5.8.2"
-    rc-tree-select "~5.15.0"
-    rc-upload "~4.3.5"
-    rc-util "^5.38.1"
-    scroll-into-view-if-needed "^3.1.0"
-    throttle-debounce "^5.0.0"
-
 any-promise@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -4086,11 +3892,6 @@ array-flatten@1.1.1:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
-array-tree-filter@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
-  integrity sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==
-
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -4124,11 +3925,6 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-async-validator@^4.1.0:
-  version "4.2.5"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
-  integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
-
 async@^3.2.3:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
@@ -4534,11 +4330,6 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107"
   integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
 
-classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
-  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -4674,11 +4465,6 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
-compute-scroll-into-view@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz#753f11d972596558d8fe7c6bcbc8497690ab4c87"
-  integrity sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -4721,13 +4507,6 @@ cookie@0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-copy-to-clipboard@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
-  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
-  dependencies:
-    toggle-selection "^1.0.6"
-
 core-js-compat@^3.31.0, core-js-compat@^3.33.1:
   version "3.34.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.34.0.tgz#61a4931a13c52f8f08d924522bba65f8c94a5f17"
@@ -4804,7 +4583,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.0.2, csstype@^3.1.3:
+csstype@^3.0.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -4828,11 +4607,6 @@ date-fns@^4.1.0:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-4.1.0.tgz#64b3d83fff5aa80438f5b1a633c2e83b8a1c2d14"
   integrity sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==
 
-dayjs@^1.11.1:
-  version "1.11.10"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
-  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
-
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -7023,13 +6797,6 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json2mq@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
-  integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
-  dependencies:
-    string-convert "^0.2.0"
-
 json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
@@ -8059,11 +7826,6 @@ pure-rand@^6.0.0:
   resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.4.tgz#50b737f6a925468679bff00ad20eade53f37d5c7"
   integrity sha512-LA0Y9kxMYv47GIPJy6MI84fqTd2HmYZI83W/kM/SkKfDlajnZYfmXFTxkbY+xSBPkLJxltMa9hIkmdc29eguMA==
 
-qrcode.react@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
-  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
-
 qs@6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
@@ -8115,355 +7877,6 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc-cascader@~3.20.0:
-  version "3.20.0"
-  resolved "https://registry.yarnpkg.com/rc-cascader/-/rc-cascader-3.20.0.tgz#b270f9d84ed83417ee7309ef5e56e415f1586076"
-  integrity sha512-lkT9EEwOcYdjZ/jvhLoXGzprK1sijT3/Tp4BLxQQcHDZkkOzzwYQC9HgmKoJz0K7CukMfgvO9KqHeBdgE+pELw==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    array-tree-filter "^2.1.0"
-    classnames "^2.3.1"
-    rc-select "~14.10.0"
-    rc-tree "~5.8.1"
-    rc-util "^5.37.0"
-
-rc-checkbox@~3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/rc-checkbox/-/rc-checkbox-3.1.0.tgz#6be0d9d8de2cc96fb5e37f9036a1c3e360d0a42d"
-  integrity sha512-PAwpJFnBa3Ei+5pyqMMXdcKYKNBMS+TvSDiLdDnARnMJHC8ESxwPfm4Ao1gJiKtWLdmGfigascnCpwrHFgoOBQ==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "^2.3.2"
-    rc-util "^5.25.2"
-
-rc-collapse@~3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/rc-collapse/-/rc-collapse-3.7.2.tgz#d11538ff9c705a5c988d9a4dfcc051a919692fe3"
-  integrity sha512-ZRw6ipDyOnfLFySxAiCMdbHtb5ePAsB9mT17PA6y1mRD/W6KHRaZeb5qK/X9xDV1CqgyxMpzw0VdS74PCcUk4A==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "2.x"
-    rc-motion "^2.3.4"
-    rc-util "^5.27.0"
-
-rc-dialog@~9.3.4:
-  version "9.3.4"
-  resolved "https://registry.yarnpkg.com/rc-dialog/-/rc-dialog-9.3.4.tgz#e0decb3d4a0dbe36524a67ed2f8fe2daa4b7b73c"
-  integrity sha512-975X3018GhR+EjZFbxA2Z57SX5rnu0G0/OxFgMMvZK4/hQWEm3MHaNvP4wXpxYDoJsp+xUvVW+GB9CMMCm81jA==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    "@rc-component/portal" "^1.0.0-8"
-    classnames "^2.2.6"
-    rc-motion "^2.3.0"
-    rc-util "^5.21.0"
-
-rc-drawer@~6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/rc-drawer/-/rc-drawer-6.5.2.tgz#49c1f279261992f6d4653d32a03b14acd436d610"
-  integrity sha512-QckxAnQNdhh4vtmKN0ZwDf3iakO83W9eZcSKWYYTDv4qcD2fHhRAZJJ/OE6v2ZlQ2kSqCJX5gYssF4HJFvsEPQ==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    "@rc-component/portal" "^1.1.1"
-    classnames "^2.2.6"
-    rc-motion "^2.6.1"
-    rc-util "^5.36.0"
-
-rc-dropdown@~4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/rc-dropdown/-/rc-dropdown-4.1.0.tgz#418a68939631520de80d0865d02b440eeeb4168e"
-  integrity sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@rc-component/trigger" "^1.7.0"
-    classnames "^2.2.6"
-    rc-util "^5.17.0"
-
-rc-field-form@~1.41.0:
-  version "1.41.0"
-  resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-1.41.0.tgz#660ed8691fdabbc1e5b1ee6b5e0e4f534b295cf0"
-  integrity sha512-k9AS0wmxfJfusWDP/YXWTpteDNaQ4isJx9UKxx4/e8Dub4spFeZ54/EuN2sYrMRID/+hUznPgVZeg+Gf7XSYCw==
-  dependencies:
-    "@babel/runtime" "^7.18.0"
-    async-validator "^4.1.0"
-    rc-util "^5.32.2"
-
-rc-image@~7.5.1:
-  version "7.5.1"
-  resolved "https://registry.yarnpkg.com/rc-image/-/rc-image-7.5.1.tgz#39a93354e14fe3e5eaafd9c9464e8fe3c6c171a0"
-  integrity sha512-Z9loECh92SQp0nSipc0MBuf5+yVC05H/pzC+Nf8xw1BKDFUJzUeehYBjaWlxly8VGBZJcTHYri61Fz9ng1G3Ag==
-  dependencies:
-    "@babel/runtime" "^7.11.2"
-    "@rc-component/portal" "^1.0.2"
-    classnames "^2.2.6"
-    rc-dialog "~9.3.4"
-    rc-motion "^2.6.2"
-    rc-util "^5.34.1"
-
-rc-input-number@~8.4.0:
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/rc-input-number/-/rc-input-number-8.4.0.tgz#f0d0caa2ce3a4e37f062556f9cb4c08c8c23322d"
-  integrity sha512-B6rziPOLRmeP7kcS5qbdC5hXvvDHYKV4vUxmahevYx2E6crS2bRi0xLDjhJ0E1HtOWo8rTmaE2EBJAkTCZOLdA==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    "@rc-component/mini-decimal" "^1.0.1"
-    classnames "^2.2.5"
-    rc-input "~1.3.5"
-    rc-util "^5.28.0"
-
-rc-input@~1.3.11, rc-input@~1.3.5:
-  version "1.3.11"
-  resolved "https://registry.yarnpkg.com/rc-input/-/rc-input-1.3.11.tgz#08f25d6d65b418dc9001e8f36432fe323bde37fa"
-  integrity sha512-jhH7QP5rILanSHCGSUkdoFE5DEtpv8FIseYhuYkOZzUBeiVAiwM3q26YqZ6xBB0QFEZ/yUAgms4xW4iuub3xFQ==
-  dependencies:
-    "@babel/runtime" "^7.11.1"
-    classnames "^2.2.1"
-    rc-util "^5.18.1"
-
-rc-mentions@~2.9.1:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/rc-mentions/-/rc-mentions-2.9.1.tgz#cfe55913fd5bc156ef9814f38c1a2ceefee032ce"
-  integrity sha512-cZuElWr/5Ws0PXx1uxobxfYh4mqUw2FitfabR62YnWgm+WAfDyXZXqZg5DxXW+M1cgVvntrQgDDd9LrihrXzew==
-  dependencies:
-    "@babel/runtime" "^7.22.5"
-    "@rc-component/trigger" "^1.5.0"
-    classnames "^2.2.6"
-    rc-input "~1.3.5"
-    rc-menu "~9.12.0"
-    rc-textarea "~1.5.0"
-    rc-util "^5.34.1"
-
-rc-menu@~9.12.0, rc-menu@~9.12.4:
-  version "9.12.4"
-  resolved "https://registry.yarnpkg.com/rc-menu/-/rc-menu-9.12.4.tgz#4959b5eeb780be7ff52aac31952b35efca46b9a3"
-  integrity sha512-t2NcvPLV1mFJzw4F21ojOoRVofK2rWhpKPx69q2raUsiHPDP6DDevsBILEYdsIegqBeSXoWs2bf6CueBKg3BFg==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    "@rc-component/trigger" "^1.17.0"
-    classnames "2.x"
-    rc-motion "^2.4.3"
-    rc-overflow "^1.3.1"
-    rc-util "^5.27.0"
-
-rc-motion@^2.0.0, rc-motion@^2.0.1, rc-motion@^2.3.0, rc-motion@^2.3.4, rc-motion@^2.4.3, rc-motion@^2.4.4, rc-motion@^2.6.1, rc-motion@^2.6.2, rc-motion@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.9.0.tgz#9e18a1b8d61e528a97369cf9a7601e9b29205710"
-  integrity sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==
-  dependencies:
-    "@babel/runtime" "^7.11.1"
-    classnames "^2.2.1"
-    rc-util "^5.21.0"
-
-rc-notification@~5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/rc-notification/-/rc-notification-5.3.0.tgz#e31c86fe2350598ade8cff383babd1befa7a94fe"
-  integrity sha512-WCf0uCOkZ3HGfF0p1H4Sgt7aWfipxORWTPp7o6prA3vxwtWhtug3GfpYls1pnBp4WA+j8vGIi5c2/hQRpGzPcQ==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "2.x"
-    rc-motion "^2.9.0"
-    rc-util "^5.20.1"
-
-rc-overflow@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/rc-overflow/-/rc-overflow-1.3.2.tgz#72ee49e85a1308d8d4e3bd53285dc1f3e0bcce2c"
-  integrity sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==
-  dependencies:
-    "@babel/runtime" "^7.11.1"
-    classnames "^2.2.1"
-    rc-resize-observer "^1.0.0"
-    rc-util "^5.37.0"
-
-rc-pagination@~4.0.3:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/rc-pagination/-/rc-pagination-4.0.4.tgz#ea401388ae86eac17ed5b41212d487f12b65b773"
-  integrity sha512-GGrLT4NgG6wgJpT/hHIpL9nELv27A1XbSZzECIuQBQTVSf4xGKxWr6I/jhpRPauYEWEbWVw22ObG6tJQqwJqWQ==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "^2.3.2"
-    rc-util "^5.38.0"
-
-rc-picker@~3.14.6:
-  version "3.14.6"
-  resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-3.14.6.tgz#60fc34f9883272e10f6c593fa6d82e7e7a70781b"
-  integrity sha512-AdKKW0AqMwZsKvIpwUWDUnpuGKZVrbxVTZTNjcO+pViGkjC1EBcjMgxVe8tomOEaIHJL5Gd13vS8Rr3zzxWmag==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    "@rc-component/trigger" "^1.5.0"
-    classnames "^2.2.1"
-    rc-util "^5.30.0"
-
-rc-progress@~3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-3.5.1.tgz#a3cdfd2fe04eb5c3d43fa1c69e7dd70c73b102ae"
-  integrity sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "^2.2.6"
-    rc-util "^5.16.1"
-
-rc-rate@~2.12.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/rc-rate/-/rc-rate-2.12.0.tgz#0182deffed3b009cdcc61660da8746c39ed91ed5"
-  integrity sha512-g092v5iZCdVzbjdn28FzvWebK2IutoVoiTeqoLTj9WM7SjA/gOJIw5/JFZMRyJYYVe1jLAU2UhAfstIpCNRozg==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "^2.2.5"
-    rc-util "^5.0.1"
-
-rc-resize-observer@^1.0.0, rc-resize-observer@^1.1.0, rc-resize-observer@^1.3.1, rc-resize-observer@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz#7bba61e6b3c604834980647cce6451914750d0cc"
-  integrity sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==
-  dependencies:
-    "@babel/runtime" "^7.20.7"
-    classnames "^2.2.1"
-    rc-util "^5.38.0"
-    resize-observer-polyfill "^1.5.1"
-
-rc-segmented@~2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/rc-segmented/-/rc-segmented-2.2.2.tgz#a34f12ce6c0975fc3042ae7656bcd18e1744798e"
-  integrity sha512-Mq52M96QdHMsNdE/042ibT5vkcGcD5jxKp7HgPC2SRofpia99P5fkfHy1pEaajLMF/kj0+2Lkq1UZRvqzo9mSA==
-  dependencies:
-    "@babel/runtime" "^7.11.1"
-    classnames "^2.2.1"
-    rc-motion "^2.4.4"
-    rc-util "^5.17.0"
-
-rc-select@~14.10.0:
-  version "14.10.0"
-  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.10.0.tgz#5f60e61ed7c9a83c8591616b1174a1c4ab2de0cd"
-  integrity sha512-TsIJTYafTTapCA32LLNpx/AD6ntepR1TG8jEVx35NiAAWCPymhUfuca8kRcUNd3WIGVMDcMKn9kkphoxEz+6Ag==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    "@rc-component/trigger" "^1.5.0"
-    classnames "2.x"
-    rc-motion "^2.0.1"
-    rc-overflow "^1.3.1"
-    rc-util "^5.16.1"
-    rc-virtual-list "^3.5.2"
-
-rc-slider@~10.5.0:
-  version "10.5.0"
-  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.5.0.tgz#1bd4853d114cb3403b67c485125887adb6a2a117"
-  integrity sha512-xiYght50cvoODZYI43v3Ylsqiw14+D7ELsgzR40boDZaya1HFa1Etnv9MDkQE8X/UrXAffwv2AcNAhslgYuDTw==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "^2.2.5"
-    rc-util "^5.27.0"
-
-rc-steps@~6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/rc-steps/-/rc-steps-6.0.1.tgz#c2136cd0087733f6d509209a84a5c80dc29a274d"
-  integrity sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==
-  dependencies:
-    "@babel/runtime" "^7.16.7"
-    classnames "^2.2.3"
-    rc-util "^5.16.1"
-
-rc-switch@~4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/rc-switch/-/rc-switch-4.1.0.tgz#f37d81b4e0c5afd1274fd85367b17306bf25e7d7"
-  integrity sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==
-  dependencies:
-    "@babel/runtime" "^7.21.0"
-    classnames "^2.2.1"
-    rc-util "^5.30.0"
-
-rc-table@~7.36.1:
-  version "7.36.1"
-  resolved "https://registry.yarnpkg.com/rc-table/-/rc-table-7.36.1.tgz#4a1a6d7e9797d553845bfa62571720cc613ecc94"
-  integrity sha512-9qMxEm/3Y8ukdW8I8ZvmhX0QImfNKzH0JEUlSbyaUlsYTB+/tQEbfaB8YkG4sHVZ1io4pxqK/BXoZYqebi/TIQ==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    "@rc-component/context" "^1.4.0"
-    classnames "^2.2.5"
-    rc-resize-observer "^1.1.0"
-    rc-util "^5.37.0"
-    rc-virtual-list "^3.11.1"
-
-rc-tabs@~12.14.1:
-  version "12.14.1"
-  resolved "https://registry.yarnpkg.com/rc-tabs/-/rc-tabs-12.14.1.tgz#1fe4c0bd54550c216f9612b76eff7fbe750f4d2b"
-  integrity sha512-1xlE7JQNYxD5RwBsM7jf2xSdUrkmTSDFLFEm2gqAgnsRlOGydEzXXNAVTOT6QcgM1G/gCm+AgG+FYPUGb4Hs4g==
-  dependencies:
-    "@babel/runtime" "^7.11.2"
-    classnames "2.x"
-    rc-dropdown "~4.1.0"
-    rc-menu "~9.12.0"
-    rc-motion "^2.6.2"
-    rc-resize-observer "^1.0.0"
-    rc-util "^5.34.1"
-
-rc-textarea@~1.5.0, rc-textarea@~1.5.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/rc-textarea/-/rc-textarea-1.5.3.tgz#513e837d308584996c05f540f4f58645a3a8c89a"
-  integrity sha512-oH682ghHx++stFNYrosPRBfwsypywrTXpaD0/5Z8MPkUOnyOQUaY9ueL9tMu6BP1LfsuYQ1VLpg5OtshViLNgA==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "^2.2.1"
-    rc-input "~1.3.5"
-    rc-resize-observer "^1.0.0"
-    rc-util "^5.27.0"
-
-rc-tooltip@~6.1.3:
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-6.1.3.tgz#83b97004a1ab918ed4936bbf089bc754254efd1b"
-  integrity sha512-HMSbSs5oieZ7XddtINUddBLSVgsnlaSb3bZrzzGWjXa7/B7nNedmsuz72s7EWFEro9mNa7RyF3gOXKYqvJiTcQ==
-  dependencies:
-    "@babel/runtime" "^7.11.2"
-    "@rc-component/trigger" "^1.18.0"
-    classnames "^2.3.1"
-
-rc-tree-select@~5.15.0:
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/rc-tree-select/-/rc-tree-select-5.15.0.tgz#8591f1dd28b043dde6fa1ca30c7acb198b160a42"
-  integrity sha512-YJHfdO6azFnR0/JuNBZLDptGE4/RGfVeHAafUIYcm2T3RBkL1O8aVqiHvwIyLzdK59ry0NLrByd+3TkfpRM+9Q==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "2.x"
-    rc-select "~14.10.0"
-    rc-tree "~5.8.1"
-    rc-util "^5.16.1"
-
-rc-tree@~5.8.1, rc-tree@~5.8.2:
-  version "5.8.2"
-  resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-5.8.2.tgz#ed3a3f7c56597bbeab3303407a9e1739bbf15621"
-  integrity sha512-xH/fcgLHWTLmrSuNphU8XAqV7CdaOQgm4KywlLGNoTMhDAcNR3GVNP6cZzb0GrKmIZ9yae+QLot/cAgUdPRMzg==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "2.x"
-    rc-motion "^2.0.1"
-    rc-util "^5.16.1"
-    rc-virtual-list "^3.5.1"
-
-rc-upload@~4.3.5:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-4.3.6.tgz#6a87397315cee065a04bee4103d6de9dbe2e377a"
-  integrity sha512-Bt7ESeG5tT3IY82fZcP+s0tQU2xmo1W6P3S8NboUUliquJLQYLkUcsaExi3IlBVr43GQMCjo30RA2o0i70+NjA==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    classnames "^2.2.5"
-    rc-util "^5.2.0"
-
-rc-util@^5.0.1, rc-util@^5.16.1, rc-util@^5.17.0, rc-util@^5.18.1, rc-util@^5.2.0, rc-util@^5.20.1, rc-util@^5.21.0, rc-util@^5.24.4, rc-util@^5.25.2, rc-util@^5.27.0, rc-util@^5.28.0, rc-util@^5.30.0, rc-util@^5.31.1, rc-util@^5.32.2, rc-util@^5.34.1, rc-util@^5.35.0, rc-util@^5.36.0, rc-util@^5.37.0, rc-util@^5.38.0, rc-util@^5.38.1:
-  version "5.38.1"
-  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.38.1.tgz#4915503b89855f5c5cd9afd4c72a7a17568777bb"
-  integrity sha512-e4ZMs7q9XqwTuhIK7zBIVFltUtMSjphuPPQXHoHlzRzNdOwUxDejo0Zls5HYaJfRKNURcsS/ceKVULlhjBrxng==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    react-is "^18.2.0"
-
-rc-virtual-list@^3.11.1, rc-virtual-list@^3.5.1, rc-virtual-list@^3.5.2:
-  version "3.11.3"
-  resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz#77d4e12e20c1ba314b43c0e37e118296674c5401"
-  integrity sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==
-  dependencies:
-    "@babel/runtime" "^7.20.0"
-    classnames "^2.2.6"
-    rc-resize-observer "^1.0.0"
-    rc-util "^5.36.0"
-
 react-colorful@^5.1.2:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
@@ -8575,7 +7988,7 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.0.0, react-is@^18.2.0:
+react-is@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
@@ -8825,11 +8238,6 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -8958,13 +8366,6 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
-scroll-into-view-if-needed@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz#fa9524518c799b45a2ef6bbffb92bcad0296d01f"
-  integrity sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==
-  dependencies:
-    compute-scroll-into-view "^3.0.2"
-
 "semver@2 || 3 || 4 || 5", semver@^5.6.0:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
@@ -9188,11 +8589,6 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
   integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
-string-convert@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
-  integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
-
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@@ -9292,11 +8688,6 @@ strip-json-comments@^3.0.1, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-stylis@^4.0.13:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
-  integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
-
 sucrase@^3.32.0:
   version "3.34.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
@@ -9480,11 +8871,6 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
-throttle-debounce@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz#a17a4039e82a2ed38a5e7268e4132d6960d41933"
-  integrity sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==
-
 through2@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -9554,11 +8940,6 @@ tocbot@^4.20.1:
   resolved "https://registry.yarnpkg.com/tocbot/-/tocbot-4.25.0.tgz#bc38aea5ec8f076779bb39636f431b044129a237"
   integrity sha512-kE5wyCQJ40hqUaRVkyQ4z5+4juzYsv/eK+aqD97N62YH0TxFhzJvo22RUQQZdO3YnXAk42ZOfOpjVdy+Z0YokA==
 
-toggle-selection@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
-  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
-
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"

From a44abb3294278760561ab95db2398dee5d11dc58 Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Tue, 24 Dec 2024 22:40:48 +0900
Subject: [PATCH 11/15] =?UTF-8?q?Feat:=20formik=EC=9D=84=20react=20hook=20?=
 =?UTF-8?q?form=EC=9C=BC=EB=A1=9C=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/Form/index.tsx          |   7 +-
 .../Common/NickNameInput/NickNameInput.tsx    | 179 -------------
 .../GuestLoginForm/GuestLoginForm.tsx         | 103 ++++----
 .../GuestLoginForm/IdInput/IdInput.tsx        |  67 -----
 .../GuestLoginForm/PwInput/PwInput.tsx        |  67 -----
 .../UserInformationEditForm.tsx               |   2 +-
 .../SignUp/SignUpForm/SignUpForm.tsx          | 242 +++++++++---------
 src/utils/useEditFormik.ts                    |  28 --
 8 files changed, 179 insertions(+), 516 deletions(-)
 delete mode 100644 src/components/Common/NickNameInput/NickNameInput.tsx
 delete mode 100644 src/components/GuestLogin/GuestLoginForm/IdInput/IdInput.tsx
 delete mode 100644 src/components/GuestLogin/GuestLoginForm/PwInput/PwInput.tsx
 delete mode 100644 src/utils/useEditFormik.ts

diff --git a/src/components/Common/Form/index.tsx b/src/components/Common/Form/index.tsx
index e5c60c34..d198c0ce 100644
--- a/src/components/Common/Form/index.tsx
+++ b/src/components/Common/Form/index.tsx
@@ -66,6 +66,7 @@ interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   label: string;
   error?: FieldError;
   registration: UseFormRegisterReturn;
+  information?: string;
 }
 
 export const TextArea = ({
@@ -73,6 +74,7 @@ export const TextArea = ({
   label,
   error,
   registration,
+  information,
   ...props
 }: TextAreaProps) => {
   const { ref, ...restRegistration } = registration;
@@ -82,7 +84,7 @@ export const TextArea = ({
       <div className="flex gap-4 text-[1.4rem]">
         <label
           htmlFor={id}
-          className="flex shrink-0 justify-center items-center text-[1.6rem] font-medium"
+          className="flex shrink-0 justify-center text-[1.6rem] font-medium"
         >
           {label}
           {props.required && <span className="text-red-500 ml-1">*</span>}
@@ -98,6 +100,9 @@ export const TextArea = ({
       {error && (
         <p className="mt-1 text-md text-red-500 text-right">{error.message}</p>
       )}
+      {information && (
+        <p className="mt-1 text-md text-blue-500 text-right">{information}</p>
+      )}
     </div>
   );
 };
diff --git a/src/components/Common/NickNameInput/NickNameInput.tsx b/src/components/Common/NickNameInput/NickNameInput.tsx
deleted file mode 100644
index 16d0bc89..00000000
--- a/src/components/Common/NickNameInput/NickNameInput.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import Button from "@/components/Common/Button";
-import React, {
-  ChangeEvent,
-  Dispatch,
-  FocusEvent,
-  SetStateAction,
-} from "react";
-import nickname_X from "@/assets/icon/nickname_X.svg";
-import { AxiosResponse } from "axios";
-import { useModalStore } from "@/stores/modalStore";
-import { useGetCheckNickName } from "@/hooks/queries/useUserQuery";
-import CommonModal from "../CommonModal/CommonModal";
-
-type SignUpInputProps = {
-  label: string;
-  id: string;
-  name: string;
-  placeholder: string;
-  maxLength: number;
-  value: string;
-  setValue: React.Dispatch<React.SetStateAction<string>>;
-  nickCheck: string;
-  setNickCheck: React.Dispatch<React.SetStateAction<string>>;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  onBlur: (event: FocusEvent<HTMLInputElement>) => void;
-  error: string | null;
-  required: string | null;
-  margin: string | null;
-  signUpBoolean: boolean;
-  setsignUpBoolean: Dispatch<SetStateAction<boolean>>;
-  userValue?: string;
-  formikNickName: string;
-};
-
-const NickNameInput: React.FC<SignUpInputProps> = ({
-  label,
-  id,
-  name,
-  placeholder,
-  maxLength,
-  value,
-  setValue,
-  nickCheck,
-  setNickCheck,
-  onChange,
-  onBlur,
-  error,
-  required,
-  margin,
-  signUpBoolean,
-  setsignUpBoolean,
-  userValue,
-  formikNickName,
-}) => {
-  const { setModal, closeModal } = useModalStore();
-
-  const onSuccessGetCheckNickName = (res: AxiosResponse) => {
-    const replaceData = (res.data.message = res.data.message.replace(
-      "요청이 정상적으로 처리되었습니다",
-      "사용 가능한 닉네임입니다"
-    ));
-    setsignUpBoolean(true);
-    setNickCheck(replaceData);
-  };
-  const onErrorGetCheckNickName = () => {
-    setsignUpBoolean(false);
-  };
-  const { mutate: getCheckNinkNameMutate } = useGetCheckNickName({
-    onSuccess: onSuccessGetCheckNickName,
-    onError: onErrorGetCheckNickName,
-  });
-
-  const sameNickCheck = () => {
-    setModal(
-      <CommonModal
-        content="닉네임 변경 후 시도해주세요"
-        buttonContent="확인"
-        onClick={closeModal}
-      />
-    );
-  };
-
-  const nickNameCheck = () => {
-    if (formikNickName) {
-      if (/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-zA-Z0-9]/.test(formikNickName)) {
-        setModal(
-          <CommonModal
-            content="닉네임에는 특수문자를 사용할 수 없습니다."
-            buttonContent="확인"
-            onClick={closeModal}
-          />
-        );
-      } else {
-        getCheckNinkNameMutate({ value });
-      }
-    } else if (!formikNickName) {
-      setModal(
-        <CommonModal
-          content="닉네임을 입력해주세요."
-          buttonContent="확인"
-          onClick={closeModal}
-        />
-      );
-    }
-  };
-
-  const resetValue = () => {
-    setValue("");
-    onChange({ target: { value: "" } } as ChangeEvent<HTMLInputElement>);
-  };
-  const inputChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (signUpBoolean) {
-      setsignUpBoolean(false);
-    }
-    onChange(event);
-  };
-
-  return (
-    <li className={`flex flex-col ${margin}`}>
-      <label htmlFor={id} className={`signUp-lable ${required} relative`}>
-        {label}
-      </label>
-      <div className="flex items-end">
-        <div className="w-full relative pr-[1.2rem]">
-          <input
-            className="signUp-placeholder signUp-input relative"
-            type="text"
-            id={id}
-            name={name}
-            placeholder={placeholder}
-            maxLength={maxLength}
-            value={value}
-            onChange={inputChange}
-            onBlur={onBlur}
-          />
-          <>
-            <button
-              className="w-[16px] h-[38px] absolute right-5 bottom-0"
-              onClick={resetValue}
-            >
-              <img src={nickname_X} alt="nickname_X" />
-            </button>
-          </>
-        </div>
-        {userValue === value ? (
-          <Button
-            width="w-[76px]"
-            height="h-[38px]"
-            content="중복확인"
-            fontWeight="font-medium"
-            backgroundColor="bg-[#dddddd]"
-            textColor="text-white"
-            textSize="text-[1.3rem]"
-            handleClick={sameNickCheck}
-          />
-        ) : (
-          <Button
-            width="w-[76px]"
-            height="h-[38px]"
-            content="중복확인"
-            fontWeight="font-medium"
-            backgroundColor="bg-[#6893FF]"
-            textColor="text-white"
-            textSize="text-[1.3rem]"
-            handleClick={nickNameCheck}
-          />
-        )}
-      </div>
-      {signUpBoolean ? (
-        <div className="signUp-check">{nickCheck}</div>
-      ) : (
-        <>
-          <div className="signUp-err">{error}</div>
-        </>
-      )}
-    </li>
-  );
-};
-export default NickNameInput;
diff --git a/src/components/GuestLogin/GuestLoginForm/GuestLoginForm.tsx b/src/components/GuestLogin/GuestLoginForm/GuestLoginForm.tsx
index 651a8506..220637f9 100644
--- a/src/components/GuestLogin/GuestLoginForm/GuestLoginForm.tsx
+++ b/src/components/GuestLogin/GuestLoginForm/GuestLoginForm.tsx
@@ -1,38 +1,26 @@
-import { useState } from "react";
-import { useFormik } from "formik";
-import { useModalStore } from "@/stores/modalStore";
 import Button from "@/components/Common/Button";
 import { GuestLoginModal } from "../GuestLoginModal";
-import IdInput from "./IdInput/IdInput";
-import PwInput from "./PwInput/PwInput";
 import { usePostGuestLogin } from "@/hooks/queries/useUserQuery";
 import { GuestAuthDataType } from "@/types/authType";
 import { useNavigate } from "react-router-dom";
 import { PATH } from "@/constants/path";
+import { useForm } from "react-hook-form";
+import { Input } from "@/components/Common/Form";
+import { useModalStore } from "@/stores/modalStore";
+
+interface GuestLoginForm {
+  id: string;
+  password: string;
+}
 
 function GuestLOginForm() {
-  const { setModal, closeModal } = useModalStore();
-  const [idState, setIdState] = useState("");
-  const [pwState, setPwState] = useState("");
   const navigate = useNavigate();
-
-  const formik = useFormik({
-    initialValues: {
-      nickName: "",
-      myInfo: "",
-    },
-    onSubmit: () => {},
-  });
-
-  const handleIdChange = (e: any) => {
-    formik.handleChange(e);
-    setIdState(e.target.value);
-  };
-
-  const handlePwChange = (e: any) => {
-    formik.handleChange(e);
-    setPwState(e.target.value);
-  };
+  const { setModal, closeModal } = useModalStore();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<GuestLoginForm>();
 
   const { mutateAsync, isLoading } = usePostGuestLogin();
 
@@ -45,7 +33,7 @@ function GuestLOginForm() {
           modalHandle={closeModal}
           isLoading={isLoading}
           editBoolean={true}
-          success="아이디 및 비밀번호가 틀립니다."
+          success="아이디 또는는 비밀번호가 틀립니다."
           fail="Error"
           buttonText="확인하기"
         />
@@ -53,40 +41,52 @@ function GuestLOginForm() {
     }
   };
 
-  const handleGuestLogin = async () => {
-    const data = await mutateAsync({ id: idState, password: pwState });
-
+  const handleGuestLogin = async (formData: GuestLoginForm) => {
+    const data = await mutateAsync({
+      id: formData.id,
+      password: formData.password,
+    });
     onSuccessPostAuth(data);
   };
 
   return (
-    <form onSubmit={formik.handleSubmit}>
-      <ul className="mb-[15rem]">
-        <IdInput
-          label="아이디"
-          required="required"
-          margin="mb-[5rem]"
+    <form onSubmit={handleSubmit(handleGuestLogin)}>
+      <div className="mb-[15rem] flex flex-col gap-10">
+        <Input
           id="id"
-          name="id"
+          label="아이디"
+          required
           placeholder="아이디를 입력해주세요."
           maxLength={15}
-          value={idState}
-          setValue={setIdState}
-          onChange={handleIdChange}
+          registration={register("id", {
+            pattern: {
+              value: /^[a-z0-9]{4,20}$/,
+              message: "영문 소문자, 숫자 4~20자로 입력해주세요",
+            },
+          })}
+          error={errors.id}
         />
-        <PwInput
+
+        <Input
+          type="password"
+          id="password"
           label="비밀번호"
-          required="required"
-          margin="mb-[5rem]"
-          id="pw"
-          name="pw"
-          placeholder="비밀번호를 입력해주세요"
-          maxLength={15}
-          value={pwState}
-          setValue={setPwState}
-          onChange={handlePwChange}
+          required
+          placeholder="아이디를 입력해주세요."
+          maxLength={20}
+          registration={register("password", {
+            /*             pattern: {
+              value: /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9!@#$%^&*]{4,20}$/,
+              message: "영문, 숫자를 포함한 8~20자로 입력해주세요",
+            }, */
+            pattern: {
+              value: /^[a-zA-Z0-9!@#$%^&*]{4,20}$/,
+              message: "영문, 숫자, 특수문자를 조합하여 4~20자로 입력해주세요",
+            },
+          })}
+          error={errors.password}
         />
-      </ul>
+      </div>
       <Button
         content={"로그인하기"}
         width={"w-full"}
@@ -95,7 +95,6 @@ function GuestLOginForm() {
         textSize={"text-[1.7rem]"}
         textColor={"text-white"}
         fontWeight={"font-medium"}
-        handleClick={handleGuestLogin}
       />
     </form>
   );
diff --git a/src/components/GuestLogin/GuestLoginForm/IdInput/IdInput.tsx b/src/components/GuestLogin/GuestLoginForm/IdInput/IdInput.tsx
deleted file mode 100644
index 952d87d9..00000000
--- a/src/components/GuestLogin/GuestLoginForm/IdInput/IdInput.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { ChangeEvent } from "react";
-import nickname_X from "@/assets/icon/nickname_X.svg";
-
-type SignUpInputProps = {
-  label: string;
-  id: string;
-  name: string;
-  placeholder: string;
-  maxLength: number;
-  value: string;
-  setValue: React.Dispatch<React.SetStateAction<string>>;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  required: string | null;
-  margin: string | null;
-};
-
-const IdInput: React.FC<SignUpInputProps> = ({
-  label,
-  id,
-  name,
-  placeholder,
-  maxLength,
-  value,
-  setValue,
-  onChange,
-  required,
-  margin,
-}) => {
-  const resetValue = () => {
-    setValue("");
-    onChange({ target: { value: "" } } as ChangeEvent<HTMLInputElement>);
-  };
-  const inputChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange(event);
-  };
-
-  return (
-    <li className={`flex flex-col ${margin}`}>
-      <label htmlFor={id} className={`signUp-lable ${required} relative`}>
-        {label}
-      </label>
-      <div className="flex items-end">
-        <div className="w-full relative pr-[1.2rem]">
-          <input
-            className="signUp-placeholder signUp-input relative"
-            type="text"
-            id={id}
-            name={name}
-            placeholder={placeholder}
-            maxLength={maxLength}
-            value={value}
-            onChange={inputChange}
-          />
-          <>
-            <button
-              className="w-[16px] h-[38px] absolute right-5 bottom-0"
-              onClick={resetValue}
-            >
-              <img src={nickname_X} alt="nickname_X" />
-            </button>
-          </>
-        </div>
-      </div>
-    </li>
-  );
-};
-export default IdInput;
diff --git a/src/components/GuestLogin/GuestLoginForm/PwInput/PwInput.tsx b/src/components/GuestLogin/GuestLoginForm/PwInput/PwInput.tsx
deleted file mode 100644
index 8ea10b75..00000000
--- a/src/components/GuestLogin/GuestLoginForm/PwInput/PwInput.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { ChangeEvent } from "react";
-import nickname_X from "@/assets/icon/nickname_X.svg";
-
-type SignUpInputProps = {
-  label: string;
-  id: string;
-  name: string;
-  placeholder: string;
-  maxLength: number;
-  value: string;
-  setValue: React.Dispatch<React.SetStateAction<string>>;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  required: string | null;
-  margin: string | null;
-};
-
-const PwInput: React.FC<SignUpInputProps> = ({
-  label,
-  id,
-  name,
-  placeholder,
-  maxLength,
-  value,
-  setValue,
-  onChange,
-  required,
-  margin,
-}) => {
-  const resetValue = () => {
-    setValue("");
-    onChange({ target: { value: "" } } as ChangeEvent<HTMLInputElement>);
-  };
-  const inputChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange(event);
-  };
-
-  return (
-    <li className={`flex flex-col ${margin}`}>
-      <label htmlFor={id} className={`signUp-lable ${required} relative`}>
-        {label}
-      </label>
-      <div className="flex items-end">
-        <div className="w-full relative pr-[1.2rem]">
-          <input
-            className="signUp-placeholder signUp-input relative"
-            type="password"
-            id={id}
-            name={name}
-            placeholder={placeholder}
-            maxLength={maxLength}
-            value={value}
-            onChange={inputChange}
-          />
-          <>
-            <button
-              className="w-[16px] h-[38px] absolute right-5 bottom-0"
-              onClick={resetValue}
-            >
-              <img src={nickname_X} alt="nickname_X" />
-            </button>
-          </>
-        </div>
-      </div>
-    </li>
-  );
-};
-export default PwInput;
diff --git a/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx b/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
index b943cab6..2a6f4469 100644
--- a/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
+++ b/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
@@ -217,7 +217,7 @@ function UserInformationEditForm() {
 
           <Button
             type="button"
-            content="중복 확인"
+            content="중복확인"
             handleClick={checkNickname}
             disabled={
               !changedNickname ||
diff --git a/src/components/SignUp/SignUpForm/SignUpForm.tsx b/src/components/SignUp/SignUpForm/SignUpForm.tsx
index 23ee422b..905c67b7 100644
--- a/src/components/SignUp/SignUpForm/SignUpForm.tsx
+++ b/src/components/SignUp/SignUpForm/SignUpForm.tsx
@@ -1,146 +1,147 @@
-import { useFormik } from "formik";
 import { useLocation, useNavigate } from "react-router-dom";
-import * as Yup from "yup";
 import Button from "@/components/Common/Button";
 import { PATH } from "@/constants/path";
-import SignUpDesc from "./SignUpInput/SignUpDesc";
-import { useState } from "react";
-import NickNameInput from "@/components/Common/NickNameInput/NickNameInput";
-import { SignUpModal } from "./SignUpModal/SignUpModal";
-import { useModalStore } from "@/stores/modalStore";
+import { useEffect, useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { useGetCheckNickName } from "@/hooks/queries/useUserQuery";
+import { Input, TextArea } from "@/components/Common/Form";
+
+interface SignUpForm {
+  nickname: string;
+  information: string;
+}
 
 const SignUpForm = () => {
-  const { setModal, closeModal } = useModalStore();
-  const [signUpBoolean, setsignUpBoolean] = useState(false);
-  const [nickName, setNickName] = useState("");
-  const [nickCheck, setNickCheck] = useState("");
   const navigate = useNavigate();
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
   const gitName = searchParams.get("identifier");
-  const [isLoading, setIsLoading] = useState(false);
-  const validationSchema = Yup.object().shape({
-    nickName: Yup.string()
-      .required("닉네임을 입력해주세요.")
-      .min(2, "닉네임은 최소 2글자 이상이어야 합니다.")
-      .max(15, "닉네임은 최대 15글자까지 입력 가능합니다.")
-      .matches(
-        /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-zA-Z0-9]*$/,
-        "프로필 이름에는 스페이스바와 특수문자를 사용할 수 없습니다."
-      ),
-    myInfo: Yup.string().max(
-      100,
-      "한 줄 소개는 최대 100자까지 입력 가능합니다"
-    ),
+
+  const [isNicknameChecked, setIsNicknameChecked] = useState(false);
+  const [nicknameInfo, setNicknameInfo] = useState("");
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    clearErrors,
+    control,
+    trigger,
+    formState: { errors },
+  } = useForm<SignUpForm>({ defaultValues: { nickname: "", information: "" } });
+
+  const nickname = useWatch({
+    control,
+    name: "nickname",
   });
 
-  const formik = useFormik({
-    initialValues: {
-      nickName: "",
-      myInfo: "",
+  const information = useWatch({
+    control,
+    name: "information",
+  });
+
+  const { mutate: getCheckNinkNameMutate } = useGetCheckNickName({
+    onSuccess: () => {
+      setIsNicknameChecked(true);
+      setNicknameInfo("사용 가능한 닉네임입니다.");
+    },
+    onError: () => {
+      setIsNicknameChecked(false);
+      setError("nickname", {
+        type: "manual",
+        message: "이미 사용 중인 닉네임입니다.",
+      });
     },
-    validationSchema: validationSchema,
-    onSubmit: () => {},
   });
-  const handleNickNameChange = (e: any) => {
-    formik.handleChange(e);
-    setNickName(e.target.value);
+
+  useEffect(() => {
+    trigger("nickname");
+    setNicknameInfo("");
+    setIsNicknameChecked(false);
+    clearErrors("nickname");
+  }, [nickname, clearErrors, trigger]);
+
+  const checkNickname = () => {
+    if (
+      errors.nickname &&
+      errors.nickname.message === "닉네임 중복확인이 필요합니다."
+    ) {
+      clearErrors("nickname");
+    }
+    if (errors.nickname) return;
+    getCheckNinkNameMutate({ value: nickname });
   };
-  const naviState = () => {
-    if (formik.values.nickName && signUpBoolean) {
-      if (/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-zA-Z0-9]/.test(formik.values.nickName)) {
-        setIsLoading(false);
-        setModal(
-          <SignUpModal
-            modalHandle={closeModal}
-            isLoading={isLoading}
-            editBoolean={true}
-            success="닉네임에는 특수문자를 사용할 수 없습니다."
-            fail="Error"
-            buttonText="확인하기"
-          />
-        );
-      } else {
-        navigate(PATH.INTEREST, {
-          state: {
-            gitNickName: gitName,
-            nickName: formik.values.nickName,
-            myInfo: formik.values.myInfo,
-          },
-        });
-      }
-    } else if (!formik.values.nickName) {
-      setIsLoading(false);
-      setModal(
-        <SignUpModal
-          modalHandle={closeModal}
-          isLoading={isLoading}
-          editBoolean={true}
-          success="닉네임을 입력해주세요."
-          fail="Error"
-          buttonText="확인하기"
-        />
-      );
-    } else if (!signUpBoolean) {
-      setIsLoading(false);
-      setModal(
-        <SignUpModal
-          modalHandle={closeModal}
-          isLoading={isLoading}
-          editBoolean={true}
-          success="닉네임 중복확인을 해주세요."
-          fail="Error"
-          buttonText="확인하기"
-        />
-      );
+
+  const redirectNextStep = (data: SignUpForm) => {
+    if (isNicknameChecked) {
+      navigate(PATH.INTEREST, {
+        state: {
+          gitNickName: gitName,
+          nickName: data.nickname,
+          myInfo: data.information,
+        },
+      });
+    } else {
+      setError("nickname", {
+        type: "manual",
+        message: "닉네임 중복확인이 필요합니다.",
+      });
     }
   };
 
   return (
     <>
-      <form onSubmit={formik.handleSubmit}>
-        <ul className="mb-[15rem]">
-          <NickNameInput
-            label="닉네임"
-            required="required"
-            margin="mb-[5rem]"
-            id="nickName"
-            name="nickName"
-            placeholder="2 ~ 15자 입력 가능합니다."
-            maxLength={15}
-            formikNickName={formik.values.nickName}
-            signUpBoolean={signUpBoolean}
-            setsignUpBoolean={setsignUpBoolean}
-            value={nickName}
-            setValue={setNickName}
-            nickCheck={nickCheck}
-            setNickCheck={setNickCheck}
-            onChange={handleNickNameChange}
-            onBlur={formik.handleBlur}
-            error={
-              formik.touched.nickName && formik.errors.nickName
-                ? formik.errors.nickName
-                : null
-            }
-          />
-          <SignUpDesc
+      <form onSubmit={handleSubmit(redirectNextStep)} className="mb-[10rem]">
+        <div className="mb-[15rem] flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <div className="flex gap-5">
+              <Input
+                id="nickname"
+                label="닉네임"
+                registration={register("nickname", {
+                  required: "닉네임을 입력해주세요",
+                  pattern: {
+                    value: /^[가-힣a-zA-Z0-9]{2,15}$/,
+                    message: "특수문자를 제외한 2~15자 까지 입력 가능합니다.",
+                  },
+                })}
+                placeholder="특수문자를 제외한 2~15자 까지 입력 가능합니다."
+                maxLength={15}
+                required
+              />
+
+              <Button
+                type="button"
+                content="중복확인"
+                handleClick={checkNickname}
+                disabled={Boolean(
+                  errors.nickname &&
+                    errors.nickname.message !== "닉네임 중복확인이 필요합니다."
+                )}
+                className="w-[7rem] h-[3.5rem] shrink-0 bg-[#6893FF] disabled:bg-[#dddddd] text-white text-[1.3rem] font-medium "
+              />
+            </div>
+            <span className="text-right text-red-500 ">
+              {errors?.nickname?.message}
+            </span>
+            <span className="text-right text-blue-500">{nicknameInfo}</span>
+          </div>
+
+          <TextArea
+            id="information"
             label="한 줄 소개"
-            required={null}
-            margin={null}
-            id="myInfo"
-            name="myInfo"
+            registration={register("information", {
+              maxLength: {
+                value: 100,
+                message: "최대 100자까지 입력 가능합니다.",
+              },
+            })}
             placeholder="자신을 소개해주세요. (100자까지)"
             maxLength={100}
-            value={formik.values.myInfo}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={
-              formik.touched.myInfo && formik.errors.myInfo
-                ? formik.errors.myInfo
-                : null
-            }
+            information={`${information?.length} / 100`}
+            rows={4}
           />
-        </ul>
+        </div>
         <Button
           content={"계속하기"}
           width={"w-full"}
@@ -149,7 +150,6 @@ const SignUpForm = () => {
           textSize={"text-[1.7rem]"}
           textColor={"text-white"}
           fontWeight={"font-medium"}
-          handleClick={naviState}
         />
       </form>
     </>
diff --git a/src/utils/useEditFormik.ts b/src/utils/useEditFormik.ts
deleted file mode 100644
index cc9d61b7..00000000
--- a/src/utils/useEditFormik.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useFormik } from "formik";
-import * as Yup from "yup";
-const useEditFormik = () => {
-  const validationSchema = Yup.object().shape({
-    nickName: Yup.string()
-      .min(2, "닉네임은 최소 2글자 이상이어야 합니다.")
-      .max(15, "닉네임은 최대 15글자까지 입력 가능합니다.")
-      .matches(
-        /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-zA-Z0-9]*$/,
-        "프로필 이름에는 스페이스바와 특수문자를 사용할 수 없습니다."
-      ),
-    myInfo: Yup.string().max(
-      100,
-      "한 줄 소개는 최대 100자까지 입력 가능합니다"
-    ),
-  });
-  const formik = useFormik({
-    initialValues: {
-      nickName: "",
-      myInfo: "",
-    },
-    validationSchema: validationSchema,
-    onSubmit: () => {},
-  });
-  return { formik };
-};
-
-export default useEditFormik;

From 9b4bd7f64f99808072976aba612d2d9400dfd215 Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Tue, 24 Dec 2024 23:24:59 +0900
Subject: [PATCH 12/15] =?UTF-8?q?Chore:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   8 --
 .../InstanceListComponent.tsx                 |   6 +-
 src/components/Common/Form/index.tsx          |   1 -
 .../SignCompleteHeader/SignCompleteHeader.tsx |  43 ------
 .../SignCompleteModal/SignCompleteModal.tsx   |  34 -----
 .../SignCompletePropsModal.tsx                |  55 --------
 .../InstanceCreate/InstanceCreate.tsx         |  22 +--
 src/pages/Shop/Shop.tsx                       |   1 -
 src/pages/Shop/swiperCustomStyle.css          |   3 -
 yarn.lock                                     | 132 +-----------------
 10 files changed, 16 insertions(+), 289 deletions(-)
 delete mode 100644 src/components/SignCompleteModal/SignCompleteHeader/SignCompleteHeader.tsx
 delete mode 100644 src/components/SignCompleteModal/SignCompleteModal/SignCompleteModal.tsx
 delete mode 100644 src/components/SignCompleteModal/SignCompletePropModal/SignCompletePropsModal.tsx
 delete mode 100644 src/pages/Shop/swiperCustomStyle.css

diff --git a/package.json b/package.json
index 4097ee0f..c9316486 100644
--- a/package.json
+++ b/package.json
@@ -21,14 +21,9 @@
     "@types/node": "^20.10.5",
     "@types/react-custom-scrollbars": "^4.0.13",
     "@types/react-facebook-login": "^4.1.10",
-    "@types/react-modal": "^3.16.3",
-    "@types/yup": "^0.32.0",
     "axios": "^1.6.3",
     "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
-    "formik": "^2.4.5",
-    "modal": "^1.2.0",
-    "moment": "^2.30.1",
     "nanoid": "^5.0.5",
     "qs": "^6.11.2",
     "react": "^18.2.0",
@@ -39,12 +34,9 @@
     "react-facebook-login": "^4.1.1",
     "react-hook-form": "^7.54.2",
     "react-intersection-observer": "^9.8.1",
-    "react-modal": "^3.16.1",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.21.1",
-    "swiper": "^11.0.7",
     "tailwind-scrollbar-hide": "^1.1.7",
-    "yup": "^1.3.3",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
diff --git a/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx b/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
index cc9e9a28..7262ebe8 100644
--- a/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
+++ b/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
@@ -1,5 +1,4 @@
 import Button from "@/components/Common/Button";
-import moment from "moment";
 import deleteAdminInstanceApi from "@/apis/deleteAdminInstanceApi";
 import { instanceListDataType } from "@/types/adminType";
 import InstanceTitle from "./InstanceTitle/InstanceTitle";
@@ -7,6 +6,7 @@ import { useNavigate } from "react-router-dom";
 import { useQueryClient } from "react-query";
 import { encrypt } from "@/hooks/useCrypto";
 import { PATH } from "@/constants/path";
+import { format } from "date-fns";
 
 type instanceListPropsType = {
   instanceList: instanceListDataType[];
@@ -27,8 +27,8 @@ const InstanceListComponent = ({ instanceList }: instanceListPropsType) => {
         <>
           {instanceList.map((item: instanceListDataType) => {
             const imageData = item.fileResponse.accessURI;
-            const startDate = moment(item.startedAt).format("YYYY-MM-DD");
-            const completedDate = moment(item.completedAt).format("YYYY-MM-DD");
+            const startDate = format(item.startedAt, "yyyy-MM-dd");
+            const completedDate = format(item.completedAt, "yyyy-MM-dd");
             return (
               <li
                 className="flex gap-[1.5rem] p-[1rem] bg-_neutral-10"
diff --git a/src/components/Common/Form/index.tsx b/src/components/Common/Form/index.tsx
index d198c0ce..178e3071 100644
--- a/src/components/Common/Form/index.tsx
+++ b/src/components/Common/Form/index.tsx
@@ -28,7 +28,6 @@ export const Input = ({
   ...props
 }: InputProps) => {
   const { ref, ...restRegistration } = registration || {};
-
   return (
     <div className="w-full flex flex-col gap-2">
       <div className="flex gap-4 text-[1.4rem]">
diff --git a/src/components/SignCompleteModal/SignCompleteHeader/SignCompleteHeader.tsx b/src/components/SignCompleteModal/SignCompleteHeader/SignCompleteHeader.tsx
deleted file mode 100644
index 2f088418..00000000
--- a/src/components/SignCompleteModal/SignCompleteHeader/SignCompleteHeader.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import completeIcon from "@/assets/image/complete-icon.png";
-
-const SignCompleteHeader: React.FC = () => {
-  const imageRef = useRef<HTMLImageElement>(null);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          const img = entry.target as HTMLImageElement;
-          img.src = img.dataset.src!;
-          observer.unobserve(img);
-        }
-      });
-    });
-
-    if (imageRef.current) {
-      observer.observe(imageRef.current);
-    }
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  return (
-    <>
-      <img
-        ref={imageRef}
-        data-src={completeIcon}
-        alt="complete icon"
-        className="w-[4.8rem]"
-      />
-      <h1 className="text-_h1 font-bold mb-12">
-        {/* 가입한 프로필네임 */}
-        <span>유저님,</span> 반갑습니다 <i>:)</i>
-      </h1>
-    </>
-  );
-};
-
-export default SignCompleteHeader;
diff --git a/src/components/SignCompleteModal/SignCompleteModal/SignCompleteModal.tsx b/src/components/SignCompleteModal/SignCompleteModal/SignCompleteModal.tsx
deleted file mode 100644
index 06e5d466..00000000
--- a/src/components/SignCompleteModal/SignCompleteModal/SignCompleteModal.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useEffect, useState } from "react";
-import SignCompletePropsModal from "../SignCompletePropModal/SignCompletePropsModal";
-
-const SignCompleteModal = () => {
-  const [signUpModalIsOpen, setSignUpModalIsOpen] = useState<boolean>(false);
-
-  const openSignupModal = () => {
-    if (sessionStorage.getItem("signToken")) {
-      setSignUpModalIsOpen(true);
-    }
-  };
-
-  // 나중에하기 버튼
-  const signUpcloseModal = () => {
-    sessionStorage.removeItem("signToken");
-    setSignUpModalIsOpen(false);
-  };
-
-  useEffect(() => {
-    openSignupModal();
-  }, []);
-  return (
-    <>
-      {signUpModalIsOpen && (
-        <SignCompletePropsModal
-          signUpModalIsOpen={signUpModalIsOpen}
-          signUpcloseModal={signUpcloseModal}
-        />
-      )}
-    </>
-  );
-};
-
-export default SignCompleteModal;
diff --git a/src/components/SignCompleteModal/SignCompletePropModal/SignCompletePropsModal.tsx b/src/components/SignCompleteModal/SignCompletePropModal/SignCompletePropsModal.tsx
deleted file mode 100644
index 02b7e116..00000000
--- a/src/components/SignCompleteModal/SignCompletePropModal/SignCompletePropsModal.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import Button from "@/components/Common/Button";
-import SignCompleteHeader from "@/components/SignCompleteModal/SignCompleteHeader/SignCompleteHeader";
-import { modalCard } from "@/utils/modalCard";
-import Modal from "react-modal";
-type ModalProps = {
-  signUpModalIsOpen: boolean;
-  signUpcloseModal: () => void;
-};
-const SignCompletePropsModal: React.FC<ModalProps> = ({
-  signUpModalIsOpen,
-  signUpcloseModal,
-}) => {
-  const todoLink = () => {
-    alert("제작 중");
-  };
-  const mainLink = () => {
-    signUpcloseModal();
-  };
-  return (
-    <Modal
-      isOpen={signUpModalIsOpen}
-      onRequestClose={signUpcloseModal}
-      contentLabel="sign complete message"
-      shouldCloseOnOverlayClick={false}
-      ariaHideApp={false}
-      style={modalCard}
-    >
-      <SignCompleteHeader />
-      <div className="flex flex-col justify-between h-36">
-        <Button
-          content={"첫 투두 만들러 가기"}
-          width={"w-full"}
-          height={"h-[4.4rem]"}
-          backgroundColor={"bg-_primary-50"}
-          textSize={"text-_body1"}
-          textColor={"text-white"}
-          fontWeight={"font-semibold"}
-          handleClick={todoLink}
-        />
-        <Button
-          content={"나중에 하기"}
-          width={"w-full"}
-          height={"h-[2.2rem]"}
-          backgroundColor={"bg-transparent"}
-          textSize={"text-_caption"}
-          textColor={"text-black"}
-          fontWeight={"font-normal"}
-          handleClick={mainLink}
-        />
-      </div>
-    </Modal>
-  );
-};
-
-export default SignCompletePropsModal;
diff --git a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
index 2b8ea362..d9bed07f 100644
--- a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
+++ b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
@@ -1,4 +1,3 @@
-import moment from "moment";
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Controller, useForm } from "react-hook-form";
@@ -17,6 +16,7 @@ import { Input, Select, TextArea } from "@/components/Common/Form/index";
 import { ModalLayer } from "@/components/Common/Modal/Modal";
 import { useModalStore } from "@/stores/modalStore";
 import { interestsOption } from "@/data/InterestData";
+import { format } from "date-fns";
 
 type DateRange = [Date | null, Date | null];
 
@@ -64,10 +64,13 @@ const InstanceCreate = () => {
     return tomorrow;
   };
 
-  const formatDateRange = (dateRange: DateRange) => ({
-    formmatStartDate: moment(dateRange[0]).format("YYYY-MM-DDT00:00:00"),
-    formmatEndDate: moment(dateRange[1]).format("YYYY-MM-DDT23:59:59"),
-  });
+  const formatDateRange = (dateRange: DateRange) => {
+    if (!dateRange[0] || !dateRange[1]) return null;
+    return {
+      formmatStartDate: format(dateRange[0], "yyyy-MM-dd'T'00:00:00"),
+      formmatEndDate: format(dateRange[1], "yyyy-MM-dd'T'23:59:59"),
+    };
+  };
 
   const onSuccessUsePostInstance = async (res: number) => {
     const file = image?.[0];
@@ -85,14 +88,12 @@ const InstanceCreate = () => {
     });
 
   const instanceSumbit = (data: InstanceCreateData) => {
-    if (!data?.image?.[0]) {
-      alert("이미지를 설정해주세요");
+    const dateFormat = formatDateRange(data.dateRange);
+    if (!dateFormat) {
       return;
     }
 
-    const { formmatStartDate, formmatEndDate } = formatDateRange(
-      data.dateRange
-    );
+    const { formmatStartDate, formmatEndDate } = dateFormat;
 
     const instanceData = {
       topicId: decryptTopicId,
@@ -255,6 +256,7 @@ const InstanceCreate = () => {
                 placeholderText="Start Date ~ End Date"
                 className="border-gray-300 border rounded-lg py-2 text-center w-full"
                 selectsRange={true}
+                required
               />
             </Input>
           )}
diff --git a/src/pages/Shop/Shop.tsx b/src/pages/Shop/Shop.tsx
index 17e4dddf..ea26848b 100644
--- a/src/pages/Shop/Shop.tsx
+++ b/src/pages/Shop/Shop.tsx
@@ -1,6 +1,5 @@
 import MyPoint from "@/components/MyPage/MyPage/MyPoint/MyPoint";
 import MobShopFrameSlice from "@/components/Shop/ShopFrameList/MobShopFrameSlice/MobShopFrameSlice";
-import "@/pages/Shop/swiperCustomStyle.css";
 import { Suspense } from "react";
 import ShopFrameList from "@/components/Shop/ShopFrameList/ShopFrameList";
 import ShopTicketList from "@/components/Shop/ShopTicketList/ShopTicketList";
diff --git a/src/pages/Shop/swiperCustomStyle.css b/src/pages/Shop/swiperCustomStyle.css
deleted file mode 100644
index f8f77fb5..00000000
--- a/src/pages/Shop/swiperCustomStyle.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.swiper-slide {
-  margin-right: 10px;
-}
diff --git a/yarn.lock b/yarn.lock
index b0daa8cc..734caa9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3189,14 +3189,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
-  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/http-errors@*":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
@@ -3348,13 +3340,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-modal@^3.16.3":
-  version "3.16.3"
-  resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.16.3.tgz#250f32c07f1de28e2bcf9c3e84b56adaa6897013"
-  integrity sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-query@^1.2.9":
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/@types/react-query/-/react-query-1.2.9.tgz#61df5a0594ea4b90234f9c0fdd8f12a06e331fed"
@@ -3451,13 +3436,6 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@types/yup@^0.32.0":
-  version "0.32.0"
-  resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.32.0.tgz#2a19c3bbbb3aed1bd755204f83e800f9c95f249a"
-  integrity sha512-Gr2lllWTDxGVYHgWfL8szjdedERpNgm44L9BDL2cmcHG7Bfd6taEpiW3ayMFLaYvlJr/6bFXDJdh6L406AGlFg==
-  dependencies:
-    yup "*"
-
 "@typescript-eslint/eslint-plugin@^6.14.0":
   version "6.15.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.15.0.tgz#b0b3e15fa8c3e67ed4386b765cc0ba98ad3a303b"
@@ -4667,11 +4645,6 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
-  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
-
 deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -5208,11 +5181,6 @@ execa@^5.0.0, execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-exenv@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
-  integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
-
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -5464,20 +5432,6 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-formik@^2.4.5:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.5.tgz#f899b5b7a6f103a8fabb679823e8fafc7e0ee1b4"
-  integrity sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.1"
-    deepmerge "^2.1.1"
-    hoist-non-react-statics "^3.3.0"
-    lodash "^4.17.21"
-    lodash-es "^4.17.21"
-    react-fast-compare "^2.0.1"
-    tiny-warning "^1.0.2"
-    tslib "^2.0.0"
-
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -5788,13 +5742,6 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
-hoist-non-react-statics@^3.3.0:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -6892,11 +6839,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
-  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
-
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -7186,16 +7128,6 @@ mkdirp@^1.0.3:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-modal@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/modal/-/modal-1.2.0.tgz#3da970f622dc8c640b9d0732143f800dafba8d63"
-  integrity sha512-Xoz/k7hnrpS0BT3Wh0hyOJ6NLQ7+jh7uPN5hVVoaxVWtZ60+RfGa8CfBjtR+JOvsmLqHKrXcWDsBbO2qNUMPWA==
-
-moment@^2.30.1:
-  version "2.30.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
-  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
-
 mri@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
@@ -7752,11 +7684,6 @@ prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-property-expr@^2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.6.tgz#f77bc00d5928a6c748414ad12882e83f24aec1e8"
-  integrity sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==
-
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -7958,11 +7885,6 @@ react-facebook-login@^4.1.1:
   resolved "https://registry.yarnpkg.com/react-facebook-login/-/react-facebook-login-4.1.1.tgz#005121236a6ac0dee02099976fb1a3265f9d633e"
   integrity sha512-COnHEHlYGTKipz4963safFAK9PaNTcCiXfPXMS/yxo8El+/AJL5ye8kMJf23lKSSGGPgqFQuInskIHVqGqTvSw==
 
-react-fast-compare@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
-  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
-
 react-hook-form@^7.54.2:
   version "7.54.2"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.54.2.tgz#8c26ed54c71628dff57ccd3c074b1dd377cfb211"
@@ -7978,7 +7900,7 @@ react-is@18.1.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
   integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7993,21 +7915,6 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-lifecycles-compat@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
-react-modal@^3.16.1:
-  version "3.16.1"
-  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.1.tgz#34018528fc206561b1a5467fc3beeaddafb39b2b"
-  integrity sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==
-  dependencies:
-    exenv "^1.2.0"
-    prop-types "^15.7.2"
-    react-lifecycles-compat "^3.0.0"
-    warning "^4.0.3"
-
 react-query@*, react-query@^3.39.3:
   version "3.39.3"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35"
@@ -8727,11 +8634,6 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-swiper@^11.0.7:
-  version "11.0.7"
-  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.0.7.tgz#fe51bb64546c2c21a1ec6914e7764af953443ded"
-  integrity sha512-cDfglW1B6uSmB6eB6pNmzDTNLmZtu5bWWa1vak0RU7fOI9qHjMzl7gVBvYSl34b0RU2N11HxxETJqQ5LeqI1cA==
-
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -8879,21 +8781,11 @@ through2@^2.0.3:
     readable-stream "~2.3.6"
     xtend "~4.0.1"
 
-tiny-case@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03"
-  integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
-
 tiny-invariant@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
 
-tiny-warning@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
-  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-
 tinyspy@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-2.2.0.tgz#9dc04b072746520b432f77ea2c2d17933de5d6ce"
@@ -8945,11 +8837,6 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
-toposort@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
-  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
-
 tough-cookie@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
@@ -9340,13 +9227,6 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-warning@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack@^2.2.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
@@ -9591,16 +9471,6 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-yup@*, yup@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/yup/-/yup-1.3.3.tgz#d2f6020ad1679754c5f8178a29243d5447dead04"
-  integrity sha512-v8QwZSsHH2K3/G9WSkp6mZKO+hugKT1EmnMqLNUcfu51HU9MDyhlETT/JgtzprnrnQHPWsjc6MUDMBp/l9fNnw==
-  dependencies:
-    property-expr "^2.0.5"
-    tiny-case "^1.0.3"
-    toposort "^2.0.2"
-    type-fest "^2.19.0"
-
 zustand@^4.5.2:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.2.tgz#fddbe7cac1e71d45413b3682cdb47b48034c3848"

From 249a0a3bb642fd6e1e1e8b3175352fb4d6b27891 Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Wed, 25 Dec 2024 01:41:23 +0900
Subject: [PATCH 13/15] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=ED=8F=AC=EB=A7=B7,=20=ED=81=AC=EA=B8=B0=20=EC=A0=9C=ED=95=9C?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/patchProfileImage.ts                 |  2 +-
 src/components/Common/Form/index.tsx          |  2 +-
 .../UserInformationEditForm.tsx               | 69 ++++++++++++-------
 src/hooks/queries/useFileQuery.tsx            |  2 +-
 .../InstanceCreate/InstanceCreate.tsx         | 17 ++++-
 .../InstanceEdit/InstanceEdit.tsx             | 38 +++++-----
 src/types/adminType.ts                        |  2 +-
 7 files changed, 81 insertions(+), 51 deletions(-)

diff --git a/src/apis/patchProfileImage.ts b/src/apis/patchProfileImage.ts
index a313ced8..d258aa6d 100644
--- a/src/apis/patchProfileImage.ts
+++ b/src/apis/patchProfileImage.ts
@@ -2,7 +2,7 @@ import requests from "./axios/request";
 import { multiInstance } from "./axios/axios";
 
 type PostSignUpProfileImageParams = {
-  files: File;
+  files: File | null;
   userId: number;
 };
 
diff --git a/src/components/Common/Form/index.tsx b/src/components/Common/Form/index.tsx
index 178e3071..561a87a7 100644
--- a/src/components/Common/Form/index.tsx
+++ b/src/components/Common/Form/index.tsx
@@ -54,7 +54,7 @@ export const Input = ({
         <p className="mt-1 text-md text-red-500 text-right">{error.message}</p>
       )}
       {information && (
-        <p className="mt-1 text-md text-blue-500 text-right">{information}</p>
+        <p className="mt-1 text-md text-gray-500 text-right">{information}</p>
       )}
     </div>
   );
diff --git a/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx b/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
index 2a6f4469..102c9e10 100644
--- a/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
+++ b/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import BottomButton from "@/components/Common/BottomButton/BottomButton";
 import UserName from "@/components/MyPage/MyPage/UserEdit/UserName/UserName";
 import {
@@ -17,7 +17,7 @@ import Button from "@/components/Common/Button";
 import ProfileImage from "../../MyPage/UserEdit/UserImg/UserImg";
 import { makeBase64URL } from "@/utils/makeBase64URL";
 import userImage from "@/assets/icon/image-edit.svg";
-import { makeBase64ToFileList } from "@/utils/makeBase64ToFile";
+import CommonModal from "@/components/Common/CommonModal/CommonModal";
 
 interface UserInformationFormType {
   nickname: string;
@@ -37,15 +37,6 @@ function UserInformationEditForm() {
   const { mutateAsync: postMyProfileMutate } = usePostMyProfile();
   const { mutateAsync: patchProfileImage } = usePatchProfileImage();
 
-  const originalFileList = useMemo(
-    () =>
-      makeBase64ToFileList(
-        profileData?.fileResponse.source || "",
-        `profile_original`
-      ),
-    [profileData?.fileResponse?.source]
-  );
-
   const {
     register,
     handleSubmit,
@@ -73,7 +64,7 @@ function UserInformationEditForm() {
     myInfo,
     nickName,
   }: {
-    file: File;
+    file: File | null;
     userId: number;
     myInfo: string;
     nickName: string;
@@ -84,6 +75,13 @@ function UserInformationEditForm() {
         patchProfileImage({ userId, file }),
       ]);
       queryClient.invalidateQueries(QUERY_KEY.MY_PROFILE);
+      setModal(
+        <CommonModal
+          content="수정 완료"
+          buttonContent="확인"
+          onClick={closeModal}
+        />
+      );
     } catch (error: any) {
       setModal(
         <CommonMutationErrorModal error={error} closeModal={closeModal} />
@@ -129,7 +127,7 @@ function UserInformationEditForm() {
     if (!profileData) return;
     if (profileData?.nickname === data.nickname || isNicknameChecked) {
       changeMyInformation({
-        file: data.image?.[0] || originalFileList?.[0],
+        file: data.image?.[0] || null,
         userId: profileData.userId,
         myInfo: data.information,
         nickName: data.nickname,
@@ -158,6 +156,14 @@ function UserInformationEditForm() {
     };
   }, [profileData?.fileResponse?.source, changedImage]);
 
+  const validateFileSize = (files: FileList | null) => {
+    if (!files?.length) return true;
+    const maxSize = 5 * 1024 * 1024;
+    return (
+      files[0].size <= maxSize || "파일첨부 사이즈는 5MB 이내로 가능합니다."
+    );
+  };
+
   return (
     <>
       <form
@@ -166,6 +172,7 @@ function UserInformationEditForm() {
       >
         <div className="flex flex-col gap-6 justify-center items-center">
           <button
+            type="button"
             className="w-[10rem] h-[10rem]  rounded-full"
             onClick={() => selectedProfileFileList?.current?.click()}
           >
@@ -182,17 +189,29 @@ function UserInformationEditForm() {
           <Controller
             name="image"
             control={control}
-            render={({ field }) => (
-              <input
-                type="file"
-                accept="image/*"
-                id="image"
-                className="hidden"
-                ref={selectedProfileFileList}
-                onChange={(e) => {
-                  field.onChange(e.target.files);
-                }}
-              />
+            rules={{
+              validate: {
+                fileSize: validateFileSize,
+              },
+            }}
+            render={({ field, fieldState: { error } }) => (
+              <>
+                <input
+                  type="file"
+                  accept="image/jpeg, image/png, image/gif"
+                  id="image"
+                  className="hidden"
+                  ref={selectedProfileFileList}
+                  onChange={(e) => {
+                    field.onChange(e.target.files);
+                  }}
+                />
+                {error && (
+                  <span className="text-red-500 text-[1.2rem]">
+                    {error.message}
+                  </span>
+                )}
+              </>
             )}
           />
 
@@ -246,7 +265,7 @@ function UserInformationEditForm() {
           rows={5}
         />
         <BottomButton
-          content="수정완료"
+          content="수정하기"
           borderColor="border-black"
           btnMaxWidth="max-w-[46.7rem]"
           btnHeight="h-[5.1rem]"
diff --git a/src/hooks/queries/useFileQuery.tsx b/src/hooks/queries/useFileQuery.tsx
index 6b300c29..f53e6350 100644
--- a/src/hooks/queries/useFileQuery.tsx
+++ b/src/hooks/queries/useFileQuery.tsx
@@ -27,7 +27,7 @@ export const usePostProfileImage = () => {
 };
 
 interface PatchProfileImageMutationType {
-  file: File;
+  file: File | null;
   userId: number;
 }
 
diff --git a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
index d9bed07f..31ff1af7 100644
--- a/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
+++ b/src/pages/Admin/AdminInstance/InstanceCreate/InstanceCreate.tsx
@@ -52,6 +52,7 @@ const InstanceCreate = () => {
     handleSubmit,
     watch,
     reset,
+    trigger,
     control,
     formState: { errors },
   } = useForm<InstanceCreateData>();
@@ -119,6 +120,7 @@ const InstanceCreate = () => {
   };
 
   useEffect(() => {
+    trigger("image");
     const file = image?.[0];
 
     if (!file) {
@@ -132,7 +134,7 @@ const InstanceCreate = () => {
     return () => {
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [image]);
+  }, [image, trigger]);
 
   const isLoading = instanceCreateLoading || instanceFileCreateLoading;
 
@@ -151,6 +153,14 @@ const InstanceCreate = () => {
     }
   }, [adminDetail, reset]);
 
+  const validateFileSize = (files: FileList | null) => {
+    if (!files?.length) return true;
+    const maxSize = 5 * 1024 * 1024;
+    return (
+      files[0].size <= maxSize || "파일첨부 사이즈는 5MB 이내로 가능합니다."
+    );
+  };
+
   if (isLoading) return <Loading />;
 
   return (
@@ -199,11 +209,14 @@ const InstanceCreate = () => {
         <div className="flex gap-4">
           <Input
             type="file"
-            accept="image/*"
+            accept="image/jpeg, image/png, image/gif"
             id="image"
             label="이미지 업로드"
             registration={register("image", {
               required: "사진을 첨부해주세요",
+              validate: {
+                fileSize: validateFileSize,
+              },
             })}
             error={errors.image}
             required
diff --git a/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx b/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
index ca90f96a..a29505f8 100644
--- a/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
+++ b/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import Loading from "@/components/Common/Loading/Loading";
 import { useParams } from "react-router-dom";
 import { useQueryClient } from "react-query";
@@ -19,7 +19,6 @@ import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { ko } from "date-fns/locale";
 import { makeBase64URL } from "@/utils/makeBase64URL";
-import { makeBase64ToFileList } from "@/utils/makeBase64ToFile";
 
 type DateRange = [Date | null, Date | null];
 
@@ -45,19 +44,11 @@ const InstanceEdit = () => {
     instanceId: decryptedInstanceId,
   });
 
-  const originalFileList = useMemo(
-    () =>
-      makeBase64ToFileList(
-        instanceDetail?.fileResponse?.source,
-        `instance_${decryptedInstanceId}_original`
-      ),
-    [instanceDetail?.fileResponse?.source, decryptedInstanceId]
-  );
-
   const {
     register,
     handleSubmit,
     watch,
+    trigger,
     reset,
     control,
     formState: { errors },
@@ -68,7 +59,7 @@ const InstanceEdit = () => {
   const onSuccessUsePatchInstance = () => {
     const instanceData = {
       instanceId: decryptedInstanceId,
-      instanceImg: image?.[0] || originalFileList?.[0],
+      instanceImg: image?.[0] || null,
     };
     instanceFilePatch(instanceData);
   };
@@ -90,11 +81,6 @@ const InstanceEdit = () => {
   const isLoading = instancePatchIsLoading || instanceFilePatchIsLoading;
 
   const instanceSumbit = (data: InstanceEditData) => {
-    if (!data?.image?.[0] && !originalFileList?.[0]) {
-      alert("이미지를 선택해주세요");
-      return;
-    }
-
     const instanceData = {
       instanceId: decryptedInstanceId,
       topicIdId: instanceDetail.topicId,
@@ -119,8 +105,8 @@ const InstanceEdit = () => {
   };
 
   useEffect(() => {
+    trigger("image");
     const file = image?.[0];
-
     if (!file) {
       setImagePreview(
         makeBase64URL({
@@ -137,7 +123,7 @@ const InstanceEdit = () => {
     return () => {
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [image, instanceDetail?.fileResponse?.source]);
+  }, [image, instanceDetail?.fileResponse?.source, trigger]);
 
   useEffect(() => {
     if (instanceDetail) {
@@ -159,6 +145,14 @@ const InstanceEdit = () => {
     }
   }, [instanceDetail, reset]);
 
+  const validateFileSize = (files: FileList | null) => {
+    if (!files?.length) return true;
+    const maxSize = 5 * 1024 * 1024;
+    return (
+      files[0].size <= maxSize || "파일첨부 사이즈는 5MB 이내로 가능합니다."
+    );
+  };
+
   return (
     <>
       {isLoading ? (
@@ -218,7 +212,11 @@ const InstanceEdit = () => {
                 accept="image/*"
                 id="image"
                 label="이미지 업로드"
-                registration={register("image")}
+                registration={register("image", {
+                  validate: {
+                    fileSize: validateFileSize,
+                  },
+                })}
                 error={errors.image}
                 information="선택된 파일이 없으면 기존 인스턴스 이미지가 적용됩니다."
               />
diff --git a/src/types/adminType.ts b/src/types/adminType.ts
index 3706c4ff..21c289e7 100644
--- a/src/types/adminType.ts
+++ b/src/types/adminType.ts
@@ -140,5 +140,5 @@ export type editInstacneApiType = {
 };
 export type editInstacneFileApiType = {
   instanceId: number;
-  instanceImg?: File;
+  instanceImg?: File | null;
 };

From c8aee8d6ced13c7483ec0fb1d84c5de0cbb1d72f Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Wed, 25 Dec 2024 01:57:21 +0900
Subject: [PATCH 14/15] =?UTF-8?q?Fix:=20accessURI=20=ED=95=84=EB=93=9C?=
 =?UTF-8?q?=EB=AA=85=EC=9D=84=20source=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/getSearchedChallengeItem.ts                 |  2 +-
 .../InstanceListComponent/InstanceListComponent.tsx  |  2 +-
 .../ChallengeInformation/ChallengeInformation.tsx    |  2 +-
 .../MyProfile/MyProfile.tsx                          |  2 +-
 .../OthersProfile/OthersProfile.tsx                  |  2 +-
 .../ChallengeDetailContent.tsx                       |  2 +-
 .../VerticalChallengeItems.tsx                       |  4 ++--
 .../PopularChallengeItems/PopularChallengeItems.tsx  |  2 +-
 .../SuggestionChallengeItems.tsx                     |  2 +-
 .../MyChallengeActivityList.tsx                      |  2 +-
 .../MyChallengeDoneList/MyChallengeDoneList.tsx      |  2 +-
 .../MyChallengePreActivityList.tsx                   |  2 +-
 .../InfiniteInterestChallenge.tsx                    |  2 +-
 src/components/MyPage/MyPage/MyProfile/MyProfile.tsx |  2 +-
 .../OthersCurrentCertification.tsx                   |  2 +-
 src/types/adminType.ts                               | 12 ++++++------
 src/types/certificationType.ts                       |  4 ++--
 src/types/homeInstance.ts                            |  2 +-
 src/types/instanceDetail.ts                          |  2 +-
 src/types/likeType.ts                                |  2 +-
 src/types/myChallengeType.ts                         |  2 +-
 src/types/profileType.ts                             |  2 +-
 22 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/apis/getSearchedChallengeItem.ts b/src/apis/getSearchedChallengeItem.ts
index 61e9fe24..15819ea9 100644
--- a/src/apis/getSearchedChallengeItem.ts
+++ b/src/apis/getSearchedChallengeItem.ts
@@ -14,7 +14,7 @@ interface Data {
   participantCount: number;
   pointPerPerson: number;
   fileResponse: {
-    accessURI: string;
+    source: string;
   };
 }
 
diff --git a/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx b/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
index 7262ebe8..06fc622d 100644
--- a/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
+++ b/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
@@ -26,7 +26,7 @@ const InstanceListComponent = ({ instanceList }: instanceListPropsType) => {
       <ul className="flex flex-col gap-10 rounded-xl h-full">
         <>
           {instanceList.map((item: instanceListDataType) => {
-            const imageData = item.fileResponse.accessURI;
+            const imageData = item.fileResponse.source;
             const startDate = format(item.startedAt, "yyyy-MM-dd");
             const completedDate = format(item.completedAt, "yyyy-MM-dd");
             return (
diff --git a/src/components/Certification/Certification/ChallengeInformation/ChallengeInformation.tsx b/src/components/Certification/Certification/ChallengeInformation/ChallengeInformation.tsx
index 13a86f3c..0179eb95 100644
--- a/src/components/Certification/Certification/ChallengeInformation/ChallengeInformation.tsx
+++ b/src/components/Certification/Certification/ChallengeInformation/ChallengeInformation.tsx
@@ -29,7 +29,7 @@ function ChallengeInformation() {
     <>
       <div className="relative">
         <ChallengeImage
-          imgSrc={data.fileResponse.accessURI}
+          imgSrc={data.fileResponse.source}
           alt={"챌린지 이미지"}
         />
 
diff --git a/src/components/Certification/MyAllCurrentCertification/MyProfile/MyProfile.tsx b/src/components/Certification/MyAllCurrentCertification/MyProfile/MyProfile.tsx
index 3e3a88a6..d175b163 100644
--- a/src/components/Certification/MyAllCurrentCertification/MyProfile/MyProfile.tsx
+++ b/src/components/Certification/MyAllCurrentCertification/MyProfile/MyProfile.tsx
@@ -24,7 +24,7 @@ function MyProfile({ decryptedUserId }: Props) {
             />
           )}
           <Profile.Image
-            imgSrc={userProfile.fileResponse.accessURI}
+            imgSrc={userProfile.fileResponse.source}
             alt={"프로필 이미지"}
             width="w-[13rem]"
           />
diff --git a/src/components/Certification/OthersAllCurrentCertification/OthersProfile/OthersProfile.tsx b/src/components/Certification/OthersAllCurrentCertification/OthersProfile/OthersProfile.tsx
index 1656b063..58f494a5 100644
--- a/src/components/Certification/OthersAllCurrentCertification/OthersProfile/OthersProfile.tsx
+++ b/src/components/Certification/OthersAllCurrentCertification/OthersProfile/OthersProfile.tsx
@@ -20,7 +20,7 @@ function OthersProfile({ decryptedUserId }: Props) {
             />
           )}
           <Profile.Image
-            imgSrc={userProfile.fileResponse.accessURI}
+            imgSrc={userProfile.fileResponse.source}
             alt={"프로필 이미지"}
             width="w-[13rem]"
           />
diff --git a/src/components/ChallengeDetail/ChallengeDetailContent/ChallengeDetailContent.tsx b/src/components/ChallengeDetail/ChallengeDetailContent/ChallengeDetailContent.tsx
index 7f6e011f..ce99d8df 100644
--- a/src/components/ChallengeDetail/ChallengeDetailContent/ChallengeDetailContent.tsx
+++ b/src/components/ChallengeDetail/ChallengeDetailContent/ChallengeDetailContent.tsx
@@ -26,7 +26,7 @@ function ChallengeDetailContent({ decryptId }: Props) {
   return (
     <>
       <div className="max-w-[54.6rem] w-full flex flex-col gap-[2.3rem]">
-        <Image imgSrc={data.fileResponse.accessURI} alt={"챌린지 이미지"} />
+        <Image imgSrc={data.fileResponse.source} alt={"챌린지 이미지"} />
         <CoreInformation
           challengeTitle={data.title}
           applicant={data.participantCount}
diff --git a/src/components/Common/VerticalChallengeItems/VerticalChallengeItems.tsx b/src/components/Common/VerticalChallengeItems/VerticalChallengeItems.tsx
index 9957af0f..dad86023 100644
--- a/src/components/Common/VerticalChallengeItems/VerticalChallengeItems.tsx
+++ b/src/components/Common/VerticalChallengeItems/VerticalChallengeItems.tsx
@@ -9,7 +9,7 @@ interface ChallengeItemProps {
   participantCnt: number;
   pointPerPerson: number;
   fileResponse: {
-    accessURI: string;
+    source: string;
   };
 }
 
@@ -31,7 +31,7 @@ function VerticalChallengeItems({ data }: Props) {
             onClick={() => onClick(encrypt(item.instanceId))}
           >
             <ChallengeItem.Image
-              imgSrc={item.fileResponse.accessURI}
+              imgSrc={item.fileResponse.source}
               direction="vertical"
               alt="챌린지 이미지"
             >
diff --git a/src/components/Home/PopularChallengeItems/PopularChallengeItems.tsx b/src/components/Home/PopularChallengeItems/PopularChallengeItems.tsx
index 4f7be5eb..75e658bc 100644
--- a/src/components/Home/PopularChallengeItems/PopularChallengeItems.tsx
+++ b/src/components/Home/PopularChallengeItems/PopularChallengeItems.tsx
@@ -45,7 +45,7 @@ function PopularChallengeItems() {
                       onClick={() => onClick(item.instanceId, clickPossible)}
                     >
                       <ChallengeItem.Image
-                        imgSrc={item.fileResponse.accessURI}
+                        imgSrc={item.fileResponse.source}
                         alt="챌린지 사진"
                         direction="horizontal"
                       >
diff --git a/src/components/Home/SuggestionChallengeItems/SuggestionChallengeItems.tsx b/src/components/Home/SuggestionChallengeItems/SuggestionChallengeItems.tsx
index 86fe06ed..f080131e 100644
--- a/src/components/Home/SuggestionChallengeItems/SuggestionChallengeItems.tsx
+++ b/src/components/Home/SuggestionChallengeItems/SuggestionChallengeItems.tsx
@@ -43,7 +43,7 @@ function SuggestionChallengeItems() {
                       onClick={() => onClick(item.instanceId, clickPossible)}
                     >
                       <ChallengeItem.Image
-                        imgSrc={item.fileResponse.accessURI}
+                        imgSrc={item.fileResponse.source}
                         alt="챌린지 사진"
                         direction="horizontal"
                       >
diff --git a/src/components/Main/MyChallenge/MyChallengeActivityList/MyChallengeActivityList.tsx b/src/components/Main/MyChallenge/MyChallengeActivityList/MyChallengeActivityList.tsx
index 485f1a0d..8b700e3a 100644
--- a/src/components/Main/MyChallenge/MyChallengeActivityList/MyChallengeActivityList.tsx
+++ b/src/components/Main/MyChallenge/MyChallengeActivityList/MyChallengeActivityList.tsx
@@ -70,7 +70,7 @@ const MyChallengeActivityList = () => {
                 <div className="min-w-[16.4rem] w-[16.4rem]">
                   <ChallengeItem>
                     <ChallengeItem.Image
-                      imgSrc={item.fileResponse.accessURI}
+                      imgSrc={item.fileResponse.source}
                       alt={"챌린지 이미지"}
                       direction="vertical"
                     >
diff --git a/src/components/Main/MyChallenge/MyChallengeDoneList/MyChallengeDoneList.tsx b/src/components/Main/MyChallenge/MyChallengeDoneList/MyChallengeDoneList.tsx
index 0f92a8ee..055ed82c 100644
--- a/src/components/Main/MyChallenge/MyChallengeDoneList/MyChallengeDoneList.tsx
+++ b/src/components/Main/MyChallenge/MyChallengeDoneList/MyChallengeDoneList.tsx
@@ -60,7 +60,7 @@ const MyChallengeDoneList = () => {
                 <div className="min-w-[16.4rem] w-[16.4rem]">
                   <ChallengeItem>
                     <ChallengeItem.Image
-                      imgSrc={item.fileResponse.accessURI}
+                      imgSrc={item.fileResponse.source}
                       alt={"챌린지 이미지"}
                       direction="vertical"
                     >
diff --git a/src/components/Main/MyChallenge/MyChallengePreActivityList/MyChallengePreActivityList.tsx b/src/components/Main/MyChallenge/MyChallengePreActivityList/MyChallengePreActivityList.tsx
index 81c8726e..53b19e50 100644
--- a/src/components/Main/MyChallenge/MyChallengePreActivityList/MyChallengePreActivityList.tsx
+++ b/src/components/Main/MyChallenge/MyChallengePreActivityList/MyChallengePreActivityList.tsx
@@ -29,7 +29,7 @@ function MyChallengePreActivityList() {
                 <div className="min-w-[16.4rem] w-[16.4rem] h-[12.6rem]">
                   <ChallengeItem>
                     <ChallengeItem.Image
-                      imgSrc={item.fileResponse.accessURI}
+                      imgSrc={item.fileResponse.source}
                       alt={"챌린지 이미지"}
                       direction="vertical"
                     >
diff --git a/src/components/MyPage/InterestChallenge/InfiniteInterestChallenge/InfiniteInterestChallenge.tsx b/src/components/MyPage/InterestChallenge/InfiniteInterestChallenge/InfiniteInterestChallenge.tsx
index e7a1a9ed..f716152d 100644
--- a/src/components/MyPage/InterestChallenge/InfiniteInterestChallenge/InfiniteInterestChallenge.tsx
+++ b/src/components/MyPage/InterestChallenge/InfiniteInterestChallenge/InfiniteInterestChallenge.tsx
@@ -63,7 +63,7 @@ function InfiniteInterestChallenge() {
                       onClick={() => onClickChallengeItem(post.instanceId)}
                     >
                       <ChallengeItem.Image
-                        imgSrc={post.fileResponse.accessURI}
+                        imgSrc={post.fileResponse.source}
                         alt={"챌린지 이미지"}
                         direction="vertical"
                         maxWidth="max-w-[16.5rem]"
diff --git a/src/components/MyPage/MyPage/MyProfile/MyProfile.tsx b/src/components/MyPage/MyPage/MyProfile/MyProfile.tsx
index 146cb857..ed700992 100644
--- a/src/components/MyPage/MyPage/MyProfile/MyProfile.tsx
+++ b/src/components/MyPage/MyPage/MyProfile/MyProfile.tsx
@@ -29,7 +29,7 @@ function MyProfile() {
               />
             )}
             <Profile.Image
-              imgSrc={data.fileResponse.accessURI}
+              imgSrc={data.fileResponse.source}
               alt="프로필 이미지"
               width="w-[10.2rem]"
             />
diff --git a/src/pages/Certification/OthersCurrentCertification/OthersCurrentCertification.tsx b/src/pages/Certification/OthersCurrentCertification/OthersCurrentCertification.tsx
index 1c53fce1..fea192df 100644
--- a/src/pages/Certification/OthersCurrentCertification/OthersCurrentCertification.tsx
+++ b/src/pages/Certification/OthersCurrentCertification/OthersCurrentCertification.tsx
@@ -39,7 +39,7 @@ function OthersCurrentCertification() {
                 <div>
                   <div className="flex justify-between mb-[2.3rem] _sm:mb-[1.7rem]">
                     <OthersProfile
-                      imgSrc={post.profile.accessURI}
+                      imgSrc={post.profile.source}
                       alt="프로필 이미지"
                       nickName={post.nickname}
                       frameId={post.frameId}
diff --git a/src/types/adminType.ts b/src/types/adminType.ts
index 21c289e7..ae260a47 100644
--- a/src/types/adminType.ts
+++ b/src/types/adminType.ts
@@ -37,7 +37,7 @@ export type adminTopicDataType = {
   topicId: number;
   fileResponse: {
     fileId: number;
-    accessURI: string;
+    source: string;
   };
 };
 export type topicDeteilType = {
@@ -49,13 +49,13 @@ export type topicDeteilType = {
   pointPerPerson: number;
   fileResponse: {
     fileId: number;
-    accessURI: string;
+    source: string;
   };
 };
 export type topicListType = {
   topicId: number;
   title: string;
-  fileResponse: { fileId: number; accessURI: string };
+  fileResponse: { fileId: number; source: string };
 };
 export type instanceListDataType = {
   topicId: number;
@@ -63,7 +63,7 @@ export type instanceListDataType = {
   title: string;
   startedAt: string;
   completedAt: string;
-  fileResponse: { fileId: number; accessURI: string };
+  fileResponse: { fileId: number; source: string };
 };
 export type instanceDeteilType = {
   topicId: number;
@@ -77,7 +77,7 @@ export type instanceDeteilType = {
   completedAt: string;
   fileResponse: {
     fileId: number;
-    accessURI: string;
+    source: string;
   };
 };
 export type instanceCreateApiType = {
@@ -96,7 +96,7 @@ export type instanceCreateFileApiType = {
   instanceImg: File;
 };
 export type fileType = {
-  file?: { fileId?: number; accessURI?: string };
+  file?: { fileId?: number; source?: string };
 };
 export type fileDataType = {
   lastModified: number;
diff --git a/src/types/certificationType.ts b/src/types/certificationType.ts
index e62dadfc..5d795552 100644
--- a/src/types/certificationType.ts
+++ b/src/types/certificationType.ts
@@ -29,7 +29,7 @@ export interface CertificationInstnaceDetailDataType {
 }
 
 interface File {
-  accessURI: string;
+  source: string;
 }
 
 export interface myWeekCertificationDataType {
@@ -43,7 +43,7 @@ export interface AllWeekCertificationDataType {
   certifications: CertificationDataType[];
   frameId: number;
   profile: {
-    accessURI: string;
+    source: string;
   };
 }
 
diff --git a/src/types/homeInstance.ts b/src/types/homeInstance.ts
index fe5a1590..3d03a833 100644
--- a/src/types/homeInstance.ts
+++ b/src/types/homeInstance.ts
@@ -4,7 +4,7 @@ export interface InstanceThumbnailDataType {
   participantCnt: number;
   pointPerPerson: number;
   fileResponse: {
-    accessURI: string;
+    source: string;
   };
   likesId: number;
 }
diff --git a/src/types/instanceDetail.ts b/src/types/instanceDetail.ts
index 1914fe2a..ab083bb8 100644
--- a/src/types/instanceDetail.ts
+++ b/src/types/instanceDetail.ts
@@ -22,5 +22,5 @@ interface Likes {
 }
 
 interface File {
-  accessURI: string;
+  source: string;
 }
diff --git a/src/types/likeType.ts b/src/types/likeType.ts
index 7f187a94..44bd889c 100644
--- a/src/types/likeType.ts
+++ b/src/types/likeType.ts
@@ -3,7 +3,7 @@ export interface LikedChallengeDataType {
   title: string;
   pointPerPerson: number;
   fileResponse: {
-    accessURI: string;
+    source: string;
   };
   likesId: number;
 }
diff --git a/src/types/myChallengeType.ts b/src/types/myChallengeType.ts
index 48c51800..46f92b26 100644
--- a/src/types/myChallengeType.ts
+++ b/src/types/myChallengeType.ts
@@ -8,7 +8,7 @@ export interface MyChallengePreActivityDataType {
 }
 
 interface File {
-  accessURI: string;
+  source: string;
 }
 
 export interface MyChallengeDoneDataType {
diff --git a/src/types/profileType.ts b/src/types/profileType.ts
index 3be3c3d4..0c65fff2 100644
--- a/src/types/profileType.ts
+++ b/src/types/profileType.ts
@@ -14,7 +14,7 @@ export interface UserDataType {
   identifier: string;
   nickname: string;
   fileResponse: {
-    accessURI: "none" | string;
+    source: "none" | string;
   };
   frameId: number;
 }

From 801be2c5496a47e9a963c0255606c9cc486f6788 Mon Sep 17 00:00:00 2001
From: choiseona <tjsdk617@naver.com>
Date: Wed, 25 Dec 2024 02:00:09 +0900
Subject: [PATCH 15/15] =?UTF-8?q?Fix:=20=ED=83=80=EC=9E=85=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/patchAdminInstanceFileEditApi.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apis/patchAdminInstanceFileEditApi.ts b/src/apis/patchAdminInstanceFileEditApi.ts
index 988125fc..23c95a87 100644
--- a/src/apis/patchAdminInstanceFileEditApi.ts
+++ b/src/apis/patchAdminInstanceFileEditApi.ts
@@ -3,7 +3,7 @@ import { multiInstance } from "./axios/axios";
 
 type editInstacneType = {
   instanceId: number;
-  instanceImg?: File;
+  instanceImg?: File | null;
 };
 
 const patchAdminInstanceFileEditApi = async ({