TrashFinderWebApp · LEEGURTS · May 20, 2024
diff --git a/src/app/(route)/(main)/_components/home/home.tsx b/src/app/(route)/(main)/_components/home/home.tsx
@@ -13,7 +13,7 @@ export default function Home() {
 
   const { data: rank } = useMyRankingQuery();
   const { data: myTrashcan, status: trashcanStatus } =
-    useMyTrashcanQuery("SUGGESTION");
+    useMyTrashcanQuery("REGISTRATION");
 
   return (
     <div className="flex flex-col gap-2">

diff --git a/src/app/(route)/(main)/_components/notice/notice.tsx b/src/app/(route)/(main)/_components/notice/notice.tsx
@@ -10,10 +10,10 @@ import { useState } from "react";
 
 export default function Notice() {
   const [selectedNoticeType, setSelectedNoticeType] =
-    useState<NoticeType>("all");
+    useState<NoticeType>("ALL");
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [page, setPage] = useState(1);
-  const { data: noticeData } = useNoticeQuery(page);
+  const [page, setPage] = useState(0);
+  const { data: noticeData } = useNoticeQuery(page, selectedNoticeType);
   const [selectedNotice, setSelectedNotice] = useState<NoticeResponse | null>(
     null,
   );
@@ -48,7 +48,7 @@ export default function Notice() {
             type="button"
             onClick={() =>
               setSelectedNoticeType(
-                type[0] as "all" | "updated" | "event" | "general",
+                type[0] as "ALL" | "UPDATED" | "EVENT" | "GENERAL",
               )
             }
             className={`${selectedNoticeType === type[0] ? "text-light-green border-b-4 border-light-green font-bold" : "border-b-2 py-2"}`}
@@ -64,7 +64,7 @@ export default function Notice() {
             new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
         )
         .filter((item) =>
-          selectedNoticeType === "all"
+          selectedNoticeType === "ALL"
             ? true
             : item.state === NoticeTypeDict[selectedNoticeType],
         )
@@ -94,7 +94,7 @@ export default function Notice() {
         .fill(0)
         .map((_, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <button key={index} type="button" onClick={() => setPage(index + 1)}>
+          <button key={index} type="button" onClick={() => setPage(index)}>
             {index + 1}
           </button>
         ))}

diff --git a/src/app/(route)/(main)/_components/registertrashcan/registertrashcan.tsx b/src/app/(route)/(main)/_components/registertrashcan/registertrashcan.tsx
@@ -94,7 +94,7 @@ export default function RegisterTrashCan() {
         formData.append("longitude", selectedCoordinate?.x.toString());
 
         fetch(
-          `${APIURL}/api/trashcan/${selectedMethod === "new" ? "registrations" : "suggestions"}`,
+          `${APIURL}/api/trashcans/${selectedMethod === "new" ? "registrations" : "suggestions"}`,
           {
             method: "POST",
             headers: {
@@ -103,9 +103,11 @@ export default function RegisterTrashCan() {
             body: formData,
           },
         )
-          .then((res) => {
+          .then(async (res) => {
+            console.log(await res.json());
             if (res.ok) {
               alert("성공적으로 등록되었습니다.");
+              window.location.reload();
             } else {
               alert("등록에 실패했습니다.");
             }

diff --git a/src/app/(route)/admin/map/[...status]/page.tsx b/src/app/(route)/admin/map/[...status]/page.tsx
@@ -34,15 +34,19 @@ function RegisterationPage({ params }: { params: { status: string } }) {
     needRefresh,
     reFresh,
     markerRef,
-  } = useDrawMarker(params.status[0] as TrashCanStatus);
+    setNeedRefresh: setNeedRefreshMarker,
+  } = useDrawMarker(params.status[0].toUpperCase() as TrashCanStatus);
 
   useEffect(() => {
     setNeedRefresh(needRefresh);
   }, [needRefresh]);
 
   useEffect(() => {
-    setRefreshCallback(() => reFresh);
-  }, [reFresh]);
+    setRefreshCallback(() => () => {
+      setNeedRefreshMarker(false);
+      reFresh();
+    });
+  }, [reFresh, setNeedRefreshMarker]);
 
   return (
     <div className="flex flex-col gap-2 mt-4">

diff --git a/src/app/(route)/admin/map/layout.tsx b/src/app/(route)/admin/map/layout.tsx
@@ -33,7 +33,7 @@ export default function MapLayout({ children }: { children: React.ReactNode }) {
                 location.longitude,
               ),
             );
-            refreshCallback();
+            refreshCallback?.();
           }}
           logo="/svg/searchicon.svg"
           keywordSearchMethod={keywordSearch}
@@ -46,7 +46,7 @@ export default function MapLayout({ children }: { children: React.ReactNode }) {
         type="button"
         onClick={() => {
           setNeedRefresh(false);
-          refreshCallback();
+          refreshCallback?.();
         }}
       >
         새로 고침

diff --git a/src/app/(route)/admin/notice/page.tsx b/src/app/(route)/admin/notice/page.tsx
@@ -14,19 +14,19 @@ import { useRef, useState } from "react";
 const buttonProps: ButtonProps<NoticeType>[] = [
   {
     content: "전체",
-    type: "all",
+    type: "ALL",
   },
   {
     content: "업데이트",
-    type: "updated",
+    type: "UPDATED",
   },
   {
     content: "이벤트",
-    type: "event",
+    type: "EVENT",
   },
   {
     content: "일반",
-    type: "general",
+    type: "GENERAL",
   },
 ];
 
@@ -38,10 +38,10 @@ const defaultRef = {
 };
 
 export default function NoticePage() {
-  const [page, setPage] = useState(1);
-  const { data: noticeData } = useNoticeQuery(page);
+  const [page, setPage] = useState(0);
   const [selectedNoticeType, setSelectedNoticeType] =
-    useState<NoticeType>("all");
+    useState<NoticeType>("ALL");
+  const { data: noticeData } = useNoticeQuery(page, selectedNoticeType);
   const selectedNoticeRef = useRef<NoticeResponse>(defaultRef);
   const [selectedNoticeId] = useState<string>("");
   const [selectedNoticeRefType, setSelectedNoticeRefType] =
@@ -94,7 +94,7 @@ export default function NoticePage() {
             <fieldset className="flex items-center">
               state:
               <div className="flex gap-2">
-                {["업데이트", "이벤트", "일반"].map((type) => (
+                {["UPDATED", "EVENT", "GENERAL"].map((type) => (
                   <button
                     type="button"
                     key={type}
@@ -134,7 +134,6 @@ export default function NoticePage() {
               className="bg-dark-blue text-white text-[1.25rem] font-bold p-2 rounded-md"
               onClick={() => {
                 if (createNotice) {
-                  console.log(selectedNoticeRef.current);
                   mutate(selectedNoticeRef.current);
                 }
               }}
@@ -187,7 +186,7 @@ export default function NoticePage() {
               new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
           )
           .filter((item) =>
-            selectedNoticeType === "all"
+            selectedNoticeType === "ALL"
               ? true
               : item.state === NoticeTypeDict[selectedNoticeType],
           )
@@ -206,7 +205,6 @@ export default function NoticePage() {
                   type="button"
                   onClick={() => {
                     selectedNoticeRef.current = { ...item };
-
                     setIsModalOpen(!isModalOpen);
                     setSelectedNoticeRefType(item.state);
                   }}

diff --git a/src/app/(route)/admin/trashcans/page.tsx b/src/app/(route)/admin/trashcans/page.tsx
@@ -1,49 +1,167 @@
 "use client";
 
+import Button from "@/components/button/button";
+import ButtonList from "@/components/button/buttonlist";
+import Modal from "@/components/modal/modal";
+import useTrashcanInfoByIdQuery from "@/hooks/query/usetrashcaninfobyid";
 import useTrashcanListQuery from "@/hooks/query/usetrashcanlist";
-import { useState } from "react";
+import { ButtonProps } from "@/types/button";
+import { TrashCanInfo, TrashCanStatus } from "@/types/trashinfo";
+import { useEffect, useState } from "react";
+
+const buttonProps: ButtonProps<TrashCanStatus>[] = [
+  {
+    content: "추가",
+    type: "ADDED",
+  },
+  {
+    content: "등록",
+    type: "REGISTERED",
+  },
+  {
+    content: "요청",
+    type: "SUGGESTED",
+  },
+  {
+    content: "삭제",
+    type: "REMOVED",
+  },
+];
 
 export default function TrashCansPage() {
   const [page, setPage] = useState(0);
-  const { data } = useTrashcanListQuery(page, "REGISTERED", "DESC");
+  const [selectedStatus, setSelectedStatus] = useState<TrashCanStatus>("ADDED");
+  const { data } = useTrashcanListQuery(page, selectedStatus, "DESC");
+  const [modalOpened, setModalOpened] = useState(true);
+  const [trashcanId, setTrashcanId] = useState<string>("");
+  const { data: trashcanData, status: trashcanLoadStatus } =
+    useTrashcanInfoByIdQuery(trashcanId);
+
+  useEffect(() => {
+    setPage(0);
+  }, [selectedStatus]);
 
-  console.log(data);
+  const getPageArray = () => {
+    if (!data?.totalPages) return [];
+    const floor = Math.floor(page / 10) * 10;
+    if (data.totalPages - floor > 9) {
+      return Array(10)
+        .fill(0)
+        .map((_, idx) => idx + floor);
+    }
+
+    return Array(data.totalPages - floor)
+      .fill(0)
+      .map((_, idx) => idx + floor);
+  };
 
   return (
     <div className="w-full h-full p-8 flex flex-col items-center gap-2">
+      <Modal isOpen={modalOpened} onClose={() => setModalOpened(false)}>
+        {trashcanLoadStatus === "pending" ? (
+          <div>로딩중...</div>
+        ) : (
+          <div className="flex flex-col">
+            <p>{trashcanData?.address}</p>
+            <p>{trashcanData?.addressDetail}</p>
+            <p>{trashcanData?.createdAt}</p>
+            <p>{trashcanData?.status}</p>
+            <p>설명</p>
+            {trashcanData?.description?.map((desc) => <p>{desc}</p>)}
+            <p>이미지</p>
+            <div className="grid grid-cols-3 gap-1">
+              {trashcanData?.imageUrls?.map((url) => (
+                <img
+                  src={url}
+                  alt=""
+                  className="w-full aspect-square object-cover rounded-md border-2"
+                />
+              ))}
+            </div>
+            <Button
+              content="삭제하기"
+              onClick={() => {}}
+              className="bg-red-600 border-red-600 text-white"
+            />
+          </div>
+        )}
+      </Modal>
       <div className="w-full flex justify-between items-center">
         <h1 className="font-bold text-2xl">쓰레기통 관리</h1>
+        <ButtonList
+          buttonInfo={buttonProps}
+          selectedStatus={selectedStatus}
+          setselectedStatus={setSelectedStatus}
+        />
       </div>
-      <div className="grid grid-flow-row grid-rows-[repeat(20,minmax(0px,1fr))] h-full ">
+      <div className="grid grid-flow-row grid-rows-[repeat(10,minmax(0px,1fr))] gap-2 h-full">
         {data &&
-          data?.reportResponses &&
-          data?.reportResponses.map((trashcan: any) => (
+          data?.trashcanListResponses &&
+          data?.trashcanListResponses.map((trashcan: TrashCanInfo) => (
             <button
               type="button"
-              key={trashcan.id}
+              key={trashcan.trashcanId}
               className="flex p-1 gap-2 border-2 rounded-md"
+              onClick={() => {
+                setModalOpened(true);
+                setTrashcanId(trashcan.trashcanId);
+              }}
             >
-              <p>{trashcan.id}</p>
-              <p>{trashcan.memberId}</p>
-              <p>{trashcan.createdAt}</p>
+              <p>{trashcan.trashcanId}</p>
+              <p>{trashcan.address}</p>
+              <p>{trashcan.addressDetail}</p>
               <p>{trashcan.description}</p>
             </button>
           ))}
       </div>
       <div className="flex items-center gap-2">
-        {Array(data?.totalPages)
-          .fill(0)
-          .map((_, index) => (
+        {page > 9 && (
+          <button
+            type="button"
+            onClick={() => {
+              if (data?.totalPages)
+                setPage((prev) => (Math.floor(prev / 10) - 1) * 10);
+            }}
+          >
+            {"<<"}
+          </button>
+        )}
+        {getPageArray().map((index) => (
+          <button
+            type="button"
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            onClick={() => setPage(index)}
+            className={index === page ? "font-bold" : ""}
+          >
+            {index + 1}
+          </button>
+        ))}
+        {data?.totalPages &&
+          Math.floor(data.totalPages / 10) !== Math.floor(page / 10) && (
             <button
               type="button"
-              // eslint-disable-next-line react/no-array-index-key
-              key={index}
-              onClick={() => setPage(index)}
+              onClick={() => {
+                if (data?.totalPages)
+                  setPage((prev) => (Math.floor(prev / 10) + 1) * 10);
+              }}
             >
-              {index + 1}
+              {">>"}
             </button>
-          ))}
+          )}
       </div>
+      <input
+        className="border p-1 rounded-md"
+        placeholder={`페이지 입력 / ${data?.totalPages}`}
+        type="number"
+        onKeyDown={(e) => {
+          const num = Number(e.currentTarget.value);
+          if (!data?.totalPages) return;
+          if (e.key === "Enter" && num >= 0 && num <= data.totalPages) {
+            setPage(num - 1);
+          }
+        }}
+      />
     </div>
   );
 }
diff --git a/src/app/api/auth/[...nextauth]/authoption.ts b/src/app/api/auth/[...nextauth]/authoption.ts
@@ -49,7 +49,6 @@ export const authOptions: AuthOptions = {
           });
 
           const result = await res.json();
-
           if (res.ok && result) {
             await setRefreshTokenCookie(res);
             return result;
@@ -85,6 +84,7 @@ export const authOptions: AuthOptions = {
         if (res.ok) {
           await setRefreshTokenCookie(res);
           const data = await res.json();
+
           if (data) {
             user.accessToken = data.accessToken;
             user.jwtExpiredTime = data.jwtExpiredTime;