feat: 영수증 상세 페이지 구현

savemyreceipt · Jun 23, 2024 · 3b6b7f2 · 3b6b7f2
1 parent a8fb257
commit 3b6b7f2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/src/pages/groups/[id]/index.tsx b/src/pages/groups/[id]/index.tsx
@@ -85,7 +85,7 @@ export default withProtectedRoute(function GroupDetailPage() {
                                 ? Array.from({ length: 12 }).map((_, index) => {
                                       return <ReceiptCardSkeleton key={index} />;
                                   })
-                                : receipts?.map((receipt) => {
+                                : receipts?.content.map((receipt) => {
                                       return (
                                           <ReceiptCard
                                               key={receipt.id}

diff --git a/src/pages/groups/[id]/receipts.tsx b/src/pages/groups/[id]/receipts.tsx
@@ -1,10 +1,38 @@
+import { ReceiptCard, ReceiptCardSkeleton } from "@/components/display/Cards/ReceiptCard";
 import { withProtectedRoute } from "@/components/guards/withProtectedRoute";
+import { Pagination } from "@/components/navigation/Pagination";
 import { Title } from "@/components/typography/Title";
 
+import { useReceipt } from "@/hooks/receipt/useReceipt";
+
 export default withProtectedRoute(function GroupReceiptPage() {
+    const { isPending, data } = useReceipt();
+
     return (
-        <>
-            <Title title="" subtitle="그룹에 대한 영수증"></Title>
-        </>
+        <div className="container mx-auto">
+            <div className="container mx-auto max-w-md py-12">
+                <Title title="업로드된 영수증" subtitle="그룹에 대한 영수증"></Title>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                {isPending
+                    ? Array.from({ length: 12 }).map((_, key) => {
+                          return <ReceiptCardSkeleton key={key} />;
+                      })
+                    : data?.content.map((receipt) => {
+                          return (
+                              <ReceiptCard
+                                  key={receipt.id}
+                                  id={receipt.id}
+                                  category={receipt.category}
+                                  purchaseDate={receipt.purchaseDate}
+                                  price={receipt.price}
+                              />
+                          );
+                      })}
+            </div>
+
+            <Pagination totalPages={data?.totalPages as number} />
+        </div>
     );
 });
diff --git a/src/pages/groups/index.tsx b/src/pages/groups/index.tsx
@@ -1,7 +1,6 @@
 import Head from "next/head";
-import { useSearchParams } from "next/navigation";
 
-import { GroupCard, GroupCardSkeleton } from "@/components/display/Cards/GroupCard";
+import { GroupCardSkeleton } from "@/components/display/Cards/GroupCard";
 import { GroupSearchCard } from "@/components/display/Cards/GroupSearchCard";
 import { SearchBar } from "@/components/forms/SearchBar";
 import { withProtectedRoute } from "@/components/guards/withProtectedRoute";

diff --git a/src/services/groups/groups.service.ts b/src/services/groups/groups.service.ts
@@ -49,7 +49,7 @@ export const groupsService = {
     readReceiptsByGroupId: async (groupId: number, page: number = 0) => {
         if (!groupId) throw new Error("groupId is Not Provided");
         const response = await api.get<IReadReceiptByGroupIdResponse>(`/groups/${groupId}/receipts?page=${page}`);
-        return response.data.data.receiptList.content;
+        return response.data.data.receiptList;
     },
 
     joinGroup: async (groupId: number, role: ROLE = ROLE.MEMBER) => {