refactor(member): 라이브러리 새로운 프로젝트 구조 적용 (#238)

apps/member/src/components/common/ErrorSection/ErrorSection.tsx

@@ -1,25 +1,35 @@
+import { useNavigate } from 'react-router-dom';
+
 import { Button } from '@clab-platforms/design-system';
 import { HighPriorityColor } from '@clab-platforms/icon';
 
+import Content from '../Content/Content';
+import { Section } from '../Section';
+
 interface Props {
   reset: () => void;
 }
 
 const ErrorSection = ({ reset }: Props) => {
+  const navigate = useNavigate();
+
   return (
-    <div className="m-auto flex flex-col items-center justify-center gap-4">
-      <HighPriorityColor width={64} height={64} />
-      <div className="text-clab-main text-center font-semibold">
-        <h1 className="text-2xl">
-          불편을 드려 죄송합니다. 오류가 발생했어요. 😭
-        </h1>
-      </div>
-      <div className="break-keep text-center text-gray-500">
-        <p>만약 같은 문제가 지속적으로 발생할 경우 문의 해주시기 바랍니다.</p>
-        <p>감사합니다.</p>
-      </div>
-      <Button onClick={reset}>재시도</Button>
-    </div>
+    <Content>
+      <Section className="flex flex-col items-center justify-center gap-4 py-20">
+        <HighPriorityColor width={64} height={64} />
+        <div className="text-clab-main text-center font-semibold">
+          <h1 className="text-2xl">해당 페이지에 접근할 수 없습니다.</h1>
+        </div>
+        <div className="break-keep text-center text-gray-500">
+          <p>만약 같은 문제가 지속적으로 발생할 경우 문의 해주시기 바랍니다.</p>
+          <p>감사합니다.</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button onClick={() => navigate(-1)}>뒤로가기</Button>
+          <Button onClick={reset}>재시도</Button>
+        </div>
+      </Section>
+    </Content>
   );
 };
 

apps/member/src/components/manage/ManageLibrarySection/ManageLibrarySection.tsx

@@ -5,7 +5,7 @@ import { Menubar, Table } from '@clab-platforms/design-system';
 import ActionButton from '@components/common/ActionButton/ActionButton';
 import Pagination from '@components/common/Pagination/Pagination';
 import { Section } from '@components/common/Section';
-import BookLoanConditionStatusBadge from '@components/library/BookLoanConditionStatusBadge/BookLoanConditionStatusBadge';
+import BookLoanConditionStatusBadge from '@components/library/BookLoanConditionStatusBadge';
 import { MemberInfoModal } from '@components/modal';
 
 import { TABLE_HEAD } from '@constants/head';

apps/member/src/hooks/queries/book-loan/index.ts

@@ -1,4 +1,3 @@
-export * from './useBookLoanBorrowMutation';
 export * from './useBookLoanExtendMutation';
 export * from './useBookLoanRecordApproveMutation';
 export * from './useBookLoanRecordConditions';

apps/member/src/hooks/queries/index.ts

@@ -1,7 +1,6 @@
 export * from './activity';
 export * from './blog';
 export * from './board';
-export * from './book';
 export * from './book-loan';
 export * from './comment';
 export * from './my';

apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx → apps/member/src/pages/LibraryDetailPage/components/BookDetailSection.tsx

@@ -12,21 +12,20 @@ import Section from '@components/common/Section/Section';
 import { BOOK_STORE_URL } from '@constants/path';
 import { SELECT_DEFAULT_OPTION } from '@constants/select';
 import { BOOK_STATE } from '@constants/state';
-import { useBookLoanBorrowMutation, useMyProfile } from '@hooks/queries';
+import { useMyProfile } from '@hooks/queries';
+import { useBookDetails } from '@pages/LibraryPage/hooks/useBookDetails';
 import { createImageUrl } from '@utils/api';
 import { bookReviewParser, toBookstore } from '@utils/string';
 
 import yes24Icon from '@assets/svg/yes24.svg';
 import aladinIcon from '@assets/webp/aladin.webp';
 import kyoboIcon from '@assets/webp/kyobobook.webp';
 
-import type { BookItem, BookstoreKorean } from '@type/book';
+import type { BookstoreKorean } from '@type/book';
 
-interface BookDetailSectionProps {
-  data: BookItem;
-}
+import { useBookLoanBorrowMutation } from '../hooks/useBookLoanBorrowMutation';
 
-const options = [
+const OPTIONS = [
   {
     icon: <img src={kyoboIcon} alt="교보문고" className="size-6" />,
     value: '교보문고',
@@ -41,9 +40,15 @@ const options = [
   },
 ] as const;
 
-const BookDetailSection = ({ data }: BookDetailSectionProps) => {
+interface Props {
+  paramsId: string;
+}
+
+export function DetailsSection({ paramsId }: Props) {
+  const { data: bookDetails } = useBookDetails(+paramsId);
   const { data: myInfo } = useMyProfile();
   const { bookBorrowMutate } = useBookLoanBorrowMutation();
+
   const {
     id,
     borrowerId,
@@ -53,7 +58,7 @@ const BookDetailSection = ({ data }: BookDetailSectionProps) => {
     publisher,
     imageUrl,
     reviewLinks,
-  } = data;
+  } = bookDetails;
 
   const handleBorrowClick = (bookId: number) => {
     bookBorrowMutate({
@@ -100,7 +105,7 @@ const BookDetailSection = ({ data }: BookDetailSectionProps) => {
               <label className="mb-1 ml-1 text-xs">온라인 서점 바로가기</label>
               <Tabs
                 value={SELECT_DEFAULT_OPTION}
-                options={options}
+                options={OPTIONS}
                 onChange={handleTabsChange}
               />
             </div>
@@ -110,6 +115,4 @@ const BookDetailSection = ({ data }: BookDetailSectionProps) => {
       </Grid>
     </Section>
   );
-};
-
-export default BookDetailSection;
+}

apps/member/src/components/library/BookLoanHistorySection/BookLoanHistorySection.tsx → apps/member/src/pages/LibraryDetailPage/components/BookLoanHistorySection.tsx

@@ -1,20 +1,21 @@
 import { Table } from '@clab-platforms/design-system';
 
 import Section from '@components/common/Section/Section';
+import BookLoanConditionStatusBadge from '@components/library/BookLoanConditionStatusBadge';
 
 import { TABLE_HEAD } from '@constants/head';
 import { useBookLoanRecordConditions } from '@hooks/queries';
+import { useBookDetails } from '@pages/LibraryPage/hooks/useBookDetails';
 import { formattedDate } from '@utils/date';
 import { formatMemberName } from '@utils/string';
 
-import BookLoanConditionStatusBadge from '../BookLoanConditionStatusBadge/BookLoanConditionStatusBadge';
-
-interface BookLoanHistorySectionProps {
-  id: number;
+interface Props {
+  paramsId: string;
 }
 
-const BookLoanHistorySection = ({ id }: BookLoanHistorySectionProps) => {
-  const { data } = useBookLoanRecordConditions({ bookId: id });
+export function LoanHistorySection({ paramsId }: Props) {
+  const { data: bookDetails } = useBookDetails(+paramsId);
+  const { data } = useBookLoanRecordConditions({ bookId: bookDetails.id });
 
   return (
     <Section>
@@ -46,6 +47,4 @@ const BookLoanHistorySection = ({ id }: BookLoanHistorySectionProps) => {
       </Section.Body>
     </Section>
   );
-};
-
-export default BookLoanHistorySection;
+}

apps/member/src/pages/LibraryDetailPage/index.tsx

@@ -0,0 +1,45 @@
+import { Suspense } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+
+import Content from '@components/common/Content/Content';
+import ErrorSection from '@components/common/ErrorSection/ErrorSection';
+import Header from '@components/common/Header/Header';
+
+import { LIBRARY_MESSAGE } from '@constants/message';
+import { PATH, PATH_NAME } from '@constants/path';
+import { ErrorBoundary } from '@suspensive/react';
+
+import { DetailsSection } from './components/BookDetailSection';
+import { LoanHistorySection } from './components/BookLoanHistorySection';
+
+export default function LibraryDetailPage() {
+  const { id } = useParams<{ id: string }>();
+
+  if (!id) {
+    throw new Error(LIBRARY_MESSAGE.NO_BOOK);
+  }
+
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary
+          onReset={reset}
+          fallback={({ reset }) => <ErrorSection reset={reset} />}
+        >
+          <Content>
+            <Header title={[PATH_NAME.LIBRARY]} path={[PATH.LIBRARY]} />
+            <Suspense>
+              <DetailsSection paramsId={id} />
+            </Suspense>
+
+            <Suspense>
+              <LoanHistorySection paramsId={id} />
+            </Suspense>
+          </Content>
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+}