Merge pull request #259 from TripInfoWeb/dev_mypage

Dev mypage
TripInfoWeb · Sep 4, 2024 · e5d3235 · e5d3235
2 parents 18ced1f + 5df045d
commit e5d3235
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 24 deletions.
diff --git a/src/app/api/mypage/gathering/route.ts b/src/app/api/mypage/gathering/route.ts
@@ -12,20 +12,27 @@ export async function GET(request: NextRequest) {
     return new NextResponse("Refresh token not found", { status: 401 });
   }
 
-  const { searchParams } = new URL(request.url);
-  const category = searchParams.get("category");
-  const page = searchParams.get("page") || "1"; // 기본값을 1로 설정
+  const url = new URL(request.url);
+  const params = new URLSearchParams(url.search);
+  const category = params.get("category");
+  const page = Number(params.get("page"));
+  if (page < 0 || !Number.isSafeInteger(page)) {
+    throw new Error("Invalid Page Number");
+  }
+  params.delete("category");
+  url.search = params.toString();
 
   try {
     const response = await fetch(
-      `${process.env.BACKEND_URL}/api/users/mypage/gathering/${category}${+page > 1 ? "?page=" + page : ""}`,
+      `${process.env.BACKEND_URL}/api/users/mypage/gathering/${category}` +
+        url.search,
       {
         method: "GET",
         headers: {
           Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
           "Content-Type": "application/json",
         },
-        cache: "no-store"
+        cache: "no-store",
       },
     );
 

diff --git a/src/app/api/mypage/information/route.ts b/src/app/api/mypage/information/route.ts
@@ -12,27 +12,33 @@ export async function GET(request: NextRequest) {
     return new NextResponse("Refresh token not found", { status: 401 });
   }
 
-  const { searchParams } = new URL(request.url);
-  const category = searchParams.get("category");
-  const page = searchParams.get("page") || "1"; // 기본값을 1로 설정
+  const url = new URL(request.url);
+  const params = new URLSearchParams(url.search);
+  const category = params.get("category");
+  const page = Number(params.get("page"));
+  if (page < 0 || !Number.isSafeInteger(page)) {
+    throw new Error("Invalid Page Number");
+  }
+  params.delete("category");
+  url.search = params.toString();
 
   try {
     const response = await fetch(
-      `${process.env.BACKEND_URL}/api/users/mypage/information/${category}${+page > 1 ? "?page=" + page : ""}`,
+      `${process.env.BACKEND_URL}/api/users/mypage/information/${category}` +url.search,
       {
         method: "GET",
         headers: {
           Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
           "Content-Type": "application/json",
         },
-        cache: "no-store"
+        cache: "no-store",
       },
     );
 
     if (!response.ok) {
       throw new Error(response.statusText);
     }
-      
+
     return response;
     // return NextResponse.json({ status: 200, message: "마이페이지 게시물 조회 성공" });
   } catch (err) {

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -36,7 +36,7 @@ export default async function page() {
   return (
     <main
       className={
-        "flex min-h-[calc(100vh-25rem)] w-full flex-col px-[5%] pb-[2rem] pt-[2rem] lg:px-[0rem]"
+        "flex min-h-[calc(100vh-25rem)] w-full flex-col px-[5%] pb-[2.5rem] lg:px-[0rem]"
       }
     >
       <MyPageHeaderContainer userInfo={userInfo} /> 

diff --git a/src/containers/mypage/MyPageGatheringContainer.tsx b/src/containers/mypage/MyPageGatheringContainer.tsx
@@ -51,13 +51,20 @@ interface Gathering {
 const MyPageGatheringContainer = (props: IMyPageGatheringContainer) => {
   const searchParams = useSearchParams();
     const [activeCategory, setActiveCategory] = useState("");
-    const [currentPage, setCurrentPage] = useState(1);
+    const [currentPage, setCurrentPage] = useState(
+      Number(searchParams.get("page")) || 1,
+    );
     const [elements, setElements] = useState<Gathering[]>([]);
   const [totalElements, setTotalElements] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
-    const pageHandler = (page: number) => {
-        setCurrentPage(page);
-    }
+  const pageHandler = (page: number) => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    params.set("page", page + "");
+    url.search = params.toString();
+    setCurrentPage(page);
+    window.history.pushState({}, "", url.toString());
+  };
     const onClickCategoryHandler = (value: string) => {
       const url = new URL(window.location.href);
       const params = new URLSearchParams(url.search);
@@ -91,6 +98,14 @@ const MyPageGatheringContainer = (props: IMyPageGatheringContainer) => {
           cache: "no-store",
         },
       );
+
+      if (!res.ok) {
+        setElements([]);
+        setTotalElements(0);
+        setIsLoading(false);
+        return;
+      }
+
       const data = await res.json();
       setElements(data.content);
       setTotalElements(data.page.totalElements);
@@ -107,10 +122,7 @@ const MyPageGatheringContainer = (props: IMyPageGatheringContainer) => {
         onClickHandler={onClickCategoryHandler}
         activeCategory={activeCategory}
       />
-      <MyPageGatheringList
-        elements={elements}
-        isLoading={isLoading}
-        />
+      <MyPageGatheringList elements={elements} isLoading={isLoading} />
       <Pagination
         currentPage={currentPage}
         totalPages={Math.floor(totalElements / 6) + 1}

diff --git a/src/containers/mypage/MyPageInformationContainer.tsx b/src/containers/mypage/MyPageInformationContainer.tsx
@@ -39,9 +39,14 @@ const MyPageInformationContainer = (props: IMyPageInformationContainer) => {
   const [elements, setElements] = useState<Information[]>([]);
   const [totalElements, setTotalElements] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
-    const pageHandler = (page: number) => {
-        setCurrentPage(page);
-    }
+  const pageHandler = (page: number) => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    params.set("page", page + "");
+    url.search = params.toString();
+    setCurrentPage(page);
+    window.history.pushState({}, "", url.toString());
+  };
     const onClickCategoryHandler = (value: string) => {
       const url = new URL(window.location.href);
       const params = new URLSearchParams(url.search);
@@ -150,7 +155,7 @@ const onBookMarkClick = async (id: number) => {
       />
       <Pagination
         currentPage={currentPage}
-        totalPages={Math.floor(totalElements / 6) + 1}
+        totalPages={totalElements}
         pageHandler={pageHandler}
       />
     </div>