Feature/430 remove antd

package.json

@@ -21,28 +21,22 @@
     "@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",
-    "antd": "^5.12.5",
     "axios": "^1.6.3",
     "crypto-js": "^4.2.0",
-    "formik": "^2.4.5",
-    "modal": "^1.2.0",
-    "moment": "^2.30.1",
+    "date-fns": "^4.1.0",
     "nanoid": "^5.0.5",
     "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",
     "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": {
@@ -60,6 +54,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",

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`,

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 || {};

src/apis/getSearchedChallengeItem.ts

@@ -14,7 +14,7 @@ interface Data {
   participantCount: number;
   pointPerPerson: number;
   fileResponse: {
-    accessURI: string;
+    source: string;
   };
 }
 

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 ({

src/apis/patchProfileImage.ts

@@ -1,7 +1,8 @@
 import requests from "./axios/request";
 import { multiInstance } from "./axios/axios";
+
 type PostSignUpProfileImageParams = {
-  files: any;
+  files: File | null;
   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;
 };
 

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,

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 ({

src/components/Admin/AdminInstance/InstanceListComponent/AdminInstanceContent/AdminInstanceContent.tsx

@@ -1,55 +1,46 @@
 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 { 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;
   const decryptTopicId = decrypt(topicId);
 
-  const { data: topicDetail } = useTopicDetailQuery({
-    topicId: decryptTopicId,
-  });
   const { data: instanceContent } = useInstanceListQuery({
     pageNumber: pageNumber - 1,
+    topicId: decryptTopicId,
   });
 
   const handlePageChange = (page: number) => {
     setPageNumber(page);
   };
 
-  useEffect(() => {
-    setTotalNumber(instanceContent.totalElements);
-  }, [instanceContent]);
-
   return (
     <>
       <AdminListLayOut.MainContent>
         <>
           <CreateBtn tokken="instance" topicId={topicId} />
-          <InstanceListComponent
-            instanceList={instanceContent.content}
-            topicDetail={topicDetail}
-          />
+          <InstanceListComponent instanceList={instanceContent.content} />
         </>
       </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>
     </>
   );

src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx

@@ -1,22 +1,18 @@
 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";
 import { encrypt } from "@/hooks/useCrypto";
 import { PATH } from "@/constants/path";
+import { format } from "date-fns";
 
 type instanceListPropsType = {
-  instanceList: any;
-  topicDetail?: adminTopicDataType;
+  instanceList: instanceListDataType[];
 };
 
-const InstanceListComponent = ({
-  instanceList,
-  topicDetail,
-}: instanceListPropsType) => {
+const InstanceListComponent = ({ instanceList }: instanceListPropsType) => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -25,19 +21,14 @@ 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) => {
-            const imageData = item.fileResponse.accessURI;
-            const startDate = moment(item.startedAt).format("YYYY-MM-DD");
-            const completedDate = moment(item.completedAt).format("YYYY-MM-DD");
+          {instanceList.map((item: instanceListDataType) => {
+            const imageData = item.fileResponse.source;
+            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"

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>
     </>
   );

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={"챌린지 이미지"}
         />
 

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]"
           />

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]"
           />

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}

src/components/Common/BottomButton/BottomButton.tsx

@@ -1,6 +1,6 @@
 type bottomButtonType = {
   content: string;
-  onClick: any;
+  onClick?: any;
   btnColor: string;
   btnMaxWidth: string;
   btnTextColor: string;
@@ -30,7 +30,7 @@ const BottomButton = ({
           type="submit"
           onClick={() => {
             {
-              onClick();
+              onClick && onClick();
             }
           }}
         >