Merge branch 'develop' of https://github.com/prgrms-web-devcourse-final-project/WEB2_3_9crops_FE into 91-rolling-paper-additionial

AAminha · AAminha · commit c96daf08f988 · 2025-03-08T00:51:28.000+09:00
diff --git a/src/apis/incomingLetters.ts b/src/apis/incomingLetters.ts
@@ -1,13 +1,9 @@
 import client from './client';
 
-export const getIncomingLetters = async (token: string) => {
+export const getIncomingLetters = async () => {
   try {
-    const { data } = await client.get('/api/letters?status=delivery', {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-    console.log('불러온 데이터', data);
+    const { data } = await client.get('/api/letters?status=delivery');
+    console.log('오고있는 편지 데이터', data);
     return data;
   } catch (error) {
     console.error('❌오고 있는 편지 목록을 불러오던 중 에러 발생', error);
diff --git a/src/apis/share.ts b/src/apis/share.ts
@@ -21,7 +21,7 @@ export interface SharePost {
   letters: ShareLetter[];
 }
 
-// 페이징 포함
+// 공유 게시글 목록 조회 - 페이징 포함
 export interface SharePostResponse {
   content: SharePost[];
   currentPage: number;
@@ -30,6 +30,15 @@ export interface SharePostResponse {
   totalPages: number;
 }
 
+// 편지 공유 요청 수신 조회
+export interface ShareProposal {
+  shareProposalId: number;
+  requesterZipCode: string;
+  recipientZipCode: string;
+  message: string;
+  status: 'REJECTED' | 'APPROVED' | 'PENDING';
+}
+
 // 편지 공유 수락 / 거절
 export interface SharePostApproval {
   shareProposalId: number;
@@ -84,6 +93,19 @@ export const postShareProposals = async (
   }
 };
 
+// 편지 공유 요청 수신 조회
+export const getShareProposalList = async () => {
+  try {
+    const response = await client.get('/api/share-proposals/inbox');
+    console.log(`🌟공유 요청 목록`, response.data);
+
+    return response.data.data;
+  } catch (error) {
+    console.error('❌ 편지 공유 요청을 조회하던 중 에러가 발생했습니다', error);
+    throw error;
+  }
+};
+
 // 편지 공유 수락 / 거절
 export const postShareProposalApproval = async (
   shareProposalId: number,
diff --git a/src/pages/Admin/Report.tsx b/src/pages/Admin/Report.tsx
@@ -5,6 +5,7 @@ import { AlarmIcon } from '@/assets/icons';
 
 import AdminPageTitle from './components/AdminPageTitle';
 import ListHeaderFrame from './components/ListHeaderFrame';
+import PagenationNavigation from './components/PagenationNavigation';
 import ReportDetailModal from './components/ReportDetailModal';
 import ReportHandlingModal from './components/ReportHandlingModal';
 import ReportListItem from './components/ReportListItem';
@@ -19,28 +20,33 @@ export default function ReportManage() {
     currentPage: '1',
     totalPages: '0',
   });
+
   const [selectedReport, setSelectReport] = useState<Report | null>(null);
   const [selectedReportId, setSelectedReportId] = useState<number | null>(null);
 
-  // const [allReports, setAllReports] = useState();
-
   const [reportQueryString, setReportQueryString] = useState<ReportQueryString>({
     reportType: null,
     status: 'PENDING',
     page: '1',
-    size: '3',
+    size: '2',
   });
+
   const handleGetReports = async (reportQueryString: ReportQueryString) => {
     const res = await getReports(reportQueryString);
     if (res?.status === 200) {
-      console.log(res.data.data.content);
-      setReports(res.data.data.content);
+      const data = res.data.data;
+      setReports(data.content);
       setReportPages(() => ({
-        currentPage: res.data.data.currentPage,
-        totalPages: res.data.data.totalPages,
+        currentPage: data.currentPage,
+        totalPages: data.totalPages,
       }));
     }
   };
+
+  const handleNowPage = (page: string) => {
+    setReportQueryString((cur) => ({ ...cur, page: page }));
+  };
+
   useEffect(() => {
     handleGetReports(reportQueryString);
   }, [reportQueryString]);
@@ -68,39 +74,11 @@ export default function ReportManage() {
               setSelectReport={setSelectReport}
             />
           ))}
-          <div className="bg-accent-1 mt-5 flex h-10 w-full items-center justify-center">
-            <div className="flex gap-2">
-              <button
-                className="h-full w-10 rounded-2xl border bg-white"
-                onClick={() => {
-                  const nowPage = Number(reportQueryString.page);
-                  if (nowPage > 1) {
-                    const newPage = (nowPage - 1).toString();
-                    setReportQueryString((cur) => ({ ...cur, page: newPage }));
-                  }
-                }}
-              >
-                뒤
-              </button>
-              <span>
-                {reportPages.currentPage}/{reportPages.totalPages}
-              </span>
-              <button
-                className="h-full w-10 rounded-2xl border bg-white"
-                onClick={() => {
-                  const nowPage = Number(reportQueryString.page);
-                  const totalPage = Number(reportPages.totalPages);
-                  if (nowPage < totalPage) {
-                    const newPage = (nowPage + 1).toString();
-                    console.log(newPage);
-                    setReportQueryString((cur) => ({ ...cur, page: newPage }));
-                  }
-                }}
-              >
-                앞
-              </button>
-            </div>
-          </div>
+          <PagenationNavigation
+            totalPage={Number(reportPages.totalPages)}
+            buttonLength={3}
+            handlePageNumberButtonClick={handleNowPage}
+          />
         </section>
         {detailModalOpen && (
           <ReportDetailModal selectedReport={selectedReport} closeEvent={setDetailModalOpen} />
diff --git a/src/pages/Admin/components/PagenationNavigation.tsx b/src/pages/Admin/components/PagenationNavigation.tsx
@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface PagenationNavigation {
+  totalPage: number;
+  buttonLength: number;
+  handlePageNumberButtonClick: (page: string) => void;
+}
+export default function PagenationNavigation({
+  totalPage,
+  buttonLength,
+  handlePageNumberButtonClick,
+}: PagenationNavigation) {
+  const totalSection = Math.ceil(totalPage / buttonLength) - 1;
+  const [nowSection, setNowSection] = useState<number>(0);
+  const [nowPageNumberAt, setNowPageNumberAt] = useState(1);
+
+  // 네비게이션 시작점, 끝점
+  const navigationRange = {
+    start: nowSection * buttonLength + 1,
+    end: nowSection * buttonLength + buttonLength,
+  };
+
+  // 페이지 버튼 배열
+  const pageNumberButtonArray = Array.from(
+    { length: navigationRange.end - navigationRange.start + 1 },
+    (_, index) => navigationRange.start + index,
+  );
+
+  // 페이지 버튼 클릭시 해당 번호값이 파라미터에 담김
+  const handlePageButtonClick = (page: number) => {
+    const pageString = page.toString();
+    handlePageNumberButtonClick(pageString);
+    setNowPageNumberAt(page);
+  };
+
+  const handlePrevButtonClick = () => {
+    if (nowSection > 0) {
+      const prev = (nowSection - 1) * buttonLength + buttonLength;
+      setNowSection((cur) => cur - 1);
+      handlePageButtonClick(prev);
+    }
+  };
+
+  const handleNextButtonClick = () => {
+    if (nowSection < totalSection) {
+      const next = (nowSection + 1) * buttonLength + 1;
+      setNowSection((cur) => cur + 1);
+      handlePageButtonClick(next);
+    }
+  };
+
+  const buttonStyle = 'border bg-white px-2 py-1 disabled:bg-gray-20';
+
+  return (
+    <div className="mt-5 flex h-10 w-full items-center justify-center">
+      <div className="flex items-center">
+        <button
+          className={twMerge(buttonStyle)}
+          disabled={nowSection <= 0}
+          onClick={() => {
+            handlePrevButtonClick();
+          }}
+        >
+          prev
+        </button>
+        {pageNumberButtonArray.map((num) => {
+          if (totalPage < num) return null;
+          return (
+            <button
+              key={num}
+              className={twMerge(buttonStyle, nowPageNumberAt === num && 'bg-accent-3')}
+              onClick={() => {
+                handlePageButtonClick(num);
+              }}
+            >
+              {num}
+            </button>
+          );
+        })}
+        <button
+          className={twMerge(buttonStyle)}
+          disabled={nowSection >= totalSection}
+          onClick={() => {
+            handleNextButtonClick();
+          }}
+        >
+          next
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Home/components/ShowDraftModal.tsx b/src/pages/Home/components/ShowDraftModal.tsx
@@ -60,22 +60,26 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
               <p className="caption-r text-black">로그아웃 시 임시 저장된 편지는 사라집니다</p>
             </div>
             <div className="mt-6 flex max-h-60 min-h-auto w-[251px] flex-col gap-[10px] overflow-y-scroll [&::-webkit-scrollbar]:hidden">
-              {draftLetters.map((draft) => (
-                <div
-                  className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
-                  key={draft.letterId}
-                  // onClick={() => handleNavigation(draft.letterId)}
-                >
-                  <p className="truncate">{draft.title}</p>
+ {draftLetters.length > 0 ? (
+                draftLetters.map((draft) => (
                   <div
-                    className="text-gray-20 active:text-gray-600"
-                    tabIndex={0}
-                    onClick={() => handleDeleteDraftLetters(draft.letterId)}
+                    className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
+                    key={draft.letterId}
+                    // onClick={() => handleNavigation(draft.letterId)}
                   >
-                    <DeleteOutlineRoundedIcon />
+                    <p className="truncate">{draft.title}</p>
+                    <div
+                      className="text-gray-20 active:text-gray-600"
+                      tabIndex={0}
+                      onClick={() => handleDeleteDraftLetters(draft.letterId)}
+                    >
+                      <DeleteOutlineRoundedIcon />
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))
+              ) : (
+                <p className="caption-m text-center text-gray-50">작성 중인 편지가 없어요</p>
+              )}
             </div>
           </ModalBackgroundWrapper>
         </div>
diff --git a/src/pages/Home/components/ShowIncomingLettersModal.tsx b/src/pages/Home/components/ShowIncomingLettersModal.tsx
@@ -29,15 +29,19 @@ const ShowIncomingLettersModal = ({ onClose }: ShowIncomingLettersModalProps) =>
               <p className="caption-r text-black">시간은 실제 시간을 기반으로 책정됩니다.</p>
             </div>
             <div className="mt-6 flex max-h-60 min-h-auto w-[251px] flex-col gap-[10px] overflow-y-scroll [&::-webkit-scrollbar]:hidden">
-              {data.map((letter) => (
-                <div
-                  className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
-                  key={letter.letterId}
-                >
-                  <p className="truncate">{letter.title}</p>
-                  <p>{letter.remainingTime}</p>
-                </div>
-              ))}
+              {data.length > 0 ? (
+                data.map((letter) => (
+                  <div
+                    className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
+                    key={letter.letterId}
+                  >
+                    <p className="truncate">{letter.title}</p>
+                    <p>{letter.remainingTime}</p>
+                  </div>
+                ))
+              ) : (
+                <p className="caption-m text-center text-gray-50">오고 있는 편지가 없어요</p>
+              )}
             </div>
           </ModalBackgroundWrapper>
         </div>
diff --git a/src/pages/Home/components/ShowShareAccessModal.tsx b/src/pages/Home/components/ShowShareAccessModal.tsx
diff --git a/src/stores/incomingLettersStore.ts b/src/stores/incomingLettersStore.ts
