✨ Feat : 기록 아카이브 상세 조회 api 연결

bookduck/src/App.jsx

@@ -33,9 +33,9 @@ function App() {
     <Routes>
       <Route path="/selectBook" element={<SelectBookPage />} />
       <Route path="/archive" element={<ArchivePage />} />
-      <Route path="/extract-archive-detail" element={<ArchiveDetail />} />
-      <Route path="/review-archive-detail" element={<ArchiveDetail />} />
-      <Route path="/total-archive-detail" element={<ArchiveDetail />} />
+      <Route path="/excerpt-archive-detail/:id" element={<ArchiveDetail />} />
+      <Route path="/review-archive-detail/:id" element={<ArchiveDetail />} />
+      <Route path="/total-archive-detail/:id" element={<ArchiveDetail />} />
       <Route path="/recording" element={<RecordingPage />} />
       <Route path="/recording/decoration" element={<CardDecorationPage />} />
 

bookduck/src/api/archive.js

@@ -23,6 +23,16 @@ export const getExtractReview = async (userId, archiveType, page, size) => {
   }
 };
 
+export const getDetailExtractReview = async (id, archiveType) => {
+  try {
+    const res = await get(`/archives/${id}?type=${archiveType}`);
+    console.log("발췌 및 감상평 상세 조회 성공", res);
+    return res;
+  } catch (error) {
+    console.error("발췌 및 감상평 상세 조회 실패", error);
+  }
+};
+
 export const postExtractImage = async (formData) => {
   try {
     const res = await apiAuth.post(`/archives/excerpts/ocr`, formData, {

bookduck/src/components/RecordingPage/ArchiveDetailComponent.jsx

@@ -0,0 +1,127 @@
+import { useState } from "react";
+import BottomSheetModal from "../common/BottomSheetModal";
+import BottomSheetMenuComponent from "../common/BottomSheetMenuComponent";
+import { useParams } from "react-router-dom";
+import { getDetailExtractReview } from "../../api/archive";
+import { useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+import { getDetailExtractReview } from "../../api/archive";
+import heart_gray from "../../assets/recordingPage/heart-gray.svg";
+import share_gray from "../../assets/recordingPage/share-gray.svg";
+import kakao from "../../assets/recordingPage/kakao.svg";
+import instagram from "../../assets/recordingPage/instagram.svg";
+import x from "../../assets/recordingPage/x.svg";
+import gallery from "../../assets/recordingPage/gallery.svg";
+import link from "../../assets/recordingPage/link.svg";
+
+const ArchiveDetailComponent = () => {
+  const [bottomSheetShow, setBottomSheetShow] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  const handleCancleClick = () => {
+    setVisible(false);
+    setTimeout(() => {
+      setBottomSheetShow(false);
+    }, 200);
+  };
+
+  console.log(archiveDetailData);
+
+  const formattedDate = (date) => {
+    return date.split("T")[0].replace(/-/g, ".");
+  };
+
+  const {
+    data: archiveDetailData,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: ["archiveDetailData"],
+    queryFn: () => getDetailExtractReview(id, "EXCERPT"),
+  });
+
+  const typeState =
+    archiveDetailData.excerpt && archiveDetailData.review
+      ? "ALL"
+      : archiveDetailData.excerpt
+      ? "EXCERPT"
+      : "REVIEW";
+
+  return (
+    <div>
+      <div className="w-[22.5825rem]  px-5 py-6 rounded-[0.88rem] bg-gray-10 shadow-custom  ">
+        <div className="flex flex-col gap-5  ">
+          <div className="flex justify-between">
+            <div className="text-c1 text-gray-400">
+              {formattedDate(archiveDetailData.excerpt.createdTime)} (
+              {archiveDetailData.excerpt.modifiedTime &&
+                formattedDate(archiveDetailData.excerpt.modifiedTime)}{" "}
+              수정) /
+              {archiveDetailData.excerpt.visibility === "PUBLIC"
+                ? "공개"
+                : "비공개"}
+            </div>
+            <div className="text-b2 text-gray-400">
+              {archiveDetailData.excerpt.pageNumber}p
+            </div>
+          </div>
+          <div className="text-b2 text-gray-800  ">
+            {archiveDetailData.excerpt.excerptContent}
+          </div>
+          <div className=" flex gap-4 justify-end">
+            <img className="cursor-pointer" src={heart_gray} alt="heart_gray" />
+            <img
+              className="cursor-pointer"
+              src={share_gray}
+              alt="share_gray"
+              onClick={() => {
+                setBottomSheetShow(true);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <BottomSheetModal
+        bottomSheetShow={bottomSheetShow}
+        setBottomSheetShow={setBottomSheetShow}
+        visible={visible}
+        setVisible={setVisible}
+      >
+        <div className="flex flex-col">
+          <div className="flex justify-between items-center">
+            <span className="text-st font-semibold">내보내기</span>
+            <span
+              className="text-b1 text-gray-500 cursor-pointer"
+              onClick={handleCancleClick}
+            >
+              취소
+            </span>
+          </div>
+          <div className="flex flex-col my-4 px-1">
+            <BottomSheetMenuComponent
+              img={kakao}
+              text="카카오톡"
+              isExported={true}
+            />
+            <BottomSheetMenuComponent
+              img={instagram}
+              text="인스타그램 스토리"
+              isExported={true}
+            />
+            <BottomSheetMenuComponent img={x} text="X" isExported={true} />
+            <BottomSheetMenuComponent
+              img={gallery}
+              text="이미지 저장"
+              isExported={true}
+            />
+            <BottomSheetMenuComponent
+              img={link}
+              text="URL 복사"
+              isExported={true}
+            />
+          </div>
+        </div>
+      </BottomSheetModal>
+    </div>
+  );
+};

bookduck/src/components/RecordingPage/AuthorComponent.jsx

@@ -1,17 +1,23 @@
 import img_template from "../../assets/recordingPage/img-template.svg";
-const AuthorComponent = () => {
+const AuthorComponent = ({ archiveDetailData }) => {
   return (
     <>
       <div className="w-[22.5625rem] px-4 py-[0.62rem] rounded-[0.5rem] bg-gray-50">
         <div className="flex gap-[0.88rem]">
-          <div className="w-[3.0625rem] h-[4.375rem]">
-            <img src={img_template} alt="img_template" />
+          <div>
+            <img
+              className="w-[3.0625rem] h-[4.375rem]"
+              src={archiveDetailData.imgPath}
+              alt="img_template"
+            />
           </div>
           <div className="flex flex-col gap-[0.2rem] justify-center">
             <div className="text-b2 text-gray-800 font-semibold">
-              안녕하세요
+              {archiveDetailData.title}
+            </div>
+            <div className="text-c1 text-gray-500">
+              {archiveDetailData.author}
             </div>
-            <div className="text-c1 text-gray-500">지은이 / 출판사 / 2024</div>
           </div>
         </div>
       </div>

bookduck/src/components/RecordingPage/ExtractComponents.jsx

@@ -1,13 +1,27 @@
 import { useNavigate } from "react-router-dom";
+import { getDetailExtractReview } from "../../api/archive";
+import { getUserId } from "../../api/oauth";
 
-const ExtractComponents = ({ page, content, title, author }) => {
+const ExtractComponents = ({ page, content, title, author, excerptId }) => {
   const navigate = useNavigate();
 
+  const handleOnClick = async () => {
+    const res = await getDetailExtractReview(excerptId, "EXCERPT");
+    const typeState =
+      res.excerpt && res.review ? "ALL" : res.excerpt ? "EXCERPT" : "REVIEW";
+
+    if (typeState === "ALL")
+      navigate(`/total-archive-detail/${excerptId}`, {
+        state: { detailData: res },
+      });
+    if (typeState === "EXCERPT")
+      navigate(`/excerpt-archive-detail/${excerptId}`, {
+        state: { detailData: res },
+      });
+  };
+
   return (
-    <div
-      onClick={() => navigate("/extract-archive-detail")}
-      className="cursor-pointer"
-    >
+    <div onClick={handleOnClick} className="cursor-pointer">
       <div className="flex flex-col gap-[1.25rem] w-[22.5625rem]  p-[1.25rem] rounded-[0.875rem] bg-gray-10 shadow-custom">
         <div className="text-right text-b2 text-gray-400">{page}p</div>
         <div className="flex flex-col gap-[0.5rem]">

bookduck/src/components/RecordingPage/ExtractDetailComponent.jsx

@@ -9,7 +9,7 @@ import link from "../../assets/recordingPage/link.svg";
 
 import BottomSheetModal from "../common/BottomSheetModal";
 import BottomSheetMenuComponent from "../common/BottomSheetMenuComponent";
-const ExtractDetailComponent = () => {
+const ExtractDetailComponent = ({ archiveDetailData }) => {
   const [bottomSheetShow, setBottomSheetShow] = useState(false);
   const [visible, setVisible] = useState(false);
 
@@ -19,18 +19,27 @@ const ExtractDetailComponent = () => {
       setBottomSheetShow(false);
     }, 200);
   };
+
+  const formattedDate = (date) => {
+    return date.split("T")[0].replace(/-/g, ".");
+  };
+
   return (
     <div>
       <div className="w-[22.5825rem]  px-5 py-6 rounded-[0.88rem] bg-gray-10 shadow-custom  ">
         <div className="flex flex-col gap-5  ">
           <div className="flex justify-between">
-            <div className="text-c1 text-gray-400">2024.09.20 / 비공개</div>
-            <div className="text-b2 text-gray-400">54p</div>
+            <div className="text-c1 text-gray-400">
+              {formattedDate(archiveDetailData.excerpt.createdTime)}
+              {archiveDetailData.excerpt.visibility === "PRVATE" &&
+                "/ 나만보기"}
+            </div>
+            <div className="text-b2 text-gray-400">
+              {archiveDetailData.excerpt.pageNumber}p
+            </div>
           </div>
           <div className="text-b2 text-gray-800  ">
-            한번 피면 끝장을 보게 되는 책이다. 중간에 덮을 수가 없다. 초반엔
-            전기적 사실을 통해 배울 점들을 기대하며 천천히 읽어나가다 예상치 의
-            정수가 드러나기 시작한다.
+            {archiveDetailData.excerpt.excerptContent}
           </div>
           <div className=" flex gap-4 justify-end">
             <img className="cursor-pointer" src={heart_gray} alt="heart_gray" />

bookduck/src/components/RecordingPage/ExtractView.jsx

@@ -15,7 +15,7 @@ const ExtractView = () => {
   });
 
   return (
-    <div className="flex flex-col gap-[1rem] items-center h-[40rem]  mt-[1rem] overflow-y-auto">
+    <div className="flex flex-col gap-[1rem] items-center max-h-[40rem]  mt-[1rem] overflow-y-auto">
       {archiveExcerptData.archiveList.map((it, index) => (
         <ExtractComponents
           key={index}

bookduck/src/components/RecordingPage/ReviewComponents.jsx

@@ -1,6 +1,8 @@
 import { useNavigate } from "react-router-dom";
 import useReviewColorStore from "../../store/useReviewColorStore";
 import { useEffect } from "react";
+import { getUserId } from "../../api/oauth";
+import { getDetailExtractReview } from "../../api/archive";
 
 const ReviewComponents = ({
   page,
@@ -11,14 +13,25 @@ const ReviewComponents = ({
   author,
 }) => {
   const navigate = useNavigate();
-
   const { reviewColor } = useReviewColorStore();
 
+  const handleOnClick = async () => {
+    const res = await getDetailExtractReview(reviewId, "REVIEW");
+    const typeState =
+      res.excerpt && res.review ? "ALL" : res.excerpt ? "EXCERPT" : "REVIEW";
+
+    if (typeState === "ALL")
+      navigate(`/total-archive-detail/${reviewId}`, {
+        state: { detailData: res },
+      });
+    if (typeState === "REVIEW")
+      navigate(`/review-archive-detail/${reviewId}`, {
+        state: { detailData: res },
+      });
+  };
+
   return (
-    <div
-      onClick={() => navigate("/review-archive-detail")}
-      className="cursor-pointer "
-    >
+    <div onClick={handleOnClick} className="cursor-pointer ">
       <div
         style={{ backgroundColor: reviewColor }}
         className={`flex flex-col gap-[1.75rem] w-[22.5625rem]  p-[1.25rem] rounded-[0.88rem] ${

bookduck/src/components/RecordingPage/ReviewDetailComponent.jsx

@@ -11,7 +11,7 @@ import link from "../../assets/recordingPage/link.svg";
 import BottomSheetModal from "../common/BottomSheetModal";
 import BottomSheetMenuComponent from "../common/BottomSheetMenuComponent";
 
-const ReviewDetailComponent = () => {
+const ReviewDetailComponent = ({ archiveDetailData }) => {
   const [bottomSheetShow, setBottomSheetShow] = useState(false);
   const [visible, setVisible] = useState(false);
 
@@ -21,32 +21,24 @@ const ReviewDetailComponent = () => {
       setBottomSheetShow(false);
     }, 200);
   };
+
+  const formattedDate = (date) => {
+    return date.split("T")[0].replace(/-/g, ".");
+  };
+
   return (
     <div>
       <div className="w-[22.5825rem]  px-5 py-6 rounded-[0.88rem] bg-gray-400 shadow-custom ">
         <div className="flex flex-col gap-2 ">
-          <div className="text-c1 text-white ">2024.09.20 / 비공개</div>
-          <div className="text-st font-semibold text-white ">걸작. 최고다.</div>
+          <div className="text-c1 text-white ">
+            {formattedDate(archiveDetailData.excerpt.createdTime)}
+            {archiveDetailData.review.visibility === "PRVATE" && "/ 나만보기"}
+          </div>
+          <div className="text-st font-semibold text-white ">
+            {archiveDetailData.review.reviewTitle}
+          </div>
           <div className="text-b2 text-white ">
-            한번 피면 끝장을 보게 되는 책이다. 중간에 덮을 수가 없다. 초반엔
-            전기적 사실을 통해 배울 점들을 기대하며 천천히 읽어나가다 예상치
-            못한 어떤 지점에서 골이 띵할 정도의 과격한 유턴을 하게 되는데,
-            그때부터 이 책의 정수가 드러나기 시작한다. 한번 피면 끝장을 보게
-            되는 책이다. 중간에 덮을 수가 없다. 초반엔 전기적 사실을 통해 배울
-            점들을 기대하며 천천히 읽어나가다 예상치 못한 어떤 지점에서 골이
-            띵할 정도의 과격한 유턴을 하게 되는데, 그때부터 이 책의 정수가
-            드러나기 시작한다. 한번 피면 끝장을 보게 되는 책이다. 중간에 덮을
-            수가 없다. 초반엔 전기적 사실을 통해 배울 점들을 기대하며 천천히
-            읽어나가다 예상치 못한 어떤 지점에서 골이 띵할 정도의 과격한 유턴을
-            하게 되는데, 그때부터 이 책의 정수가 드러나기 시작한다. 한번 피면
-            끝장을 보게 되는 책이다. 중간에 덮을 수가 없다. 초반엔 전기적 사실을
-            통해 배울 점들을 기대하며 천천히 읽어나가다 예상치 못한 어떤
-            지점에서 골이 띵할 정도의 과격한 유턴을 하게 되는데, 그때부터 이
-            책의 정수가 드러나기 시작한다. 한번 피면 끝장을 보게 되는 책이다.
-            중간에 덮을 수가 없다. 초반엔 전기적 사실을 통해 배울 점들을
-            기대하며 천천히 읽어나가다 예상치 못한 어떤 지점에서 골이 띵할
-            정도의 과격한 유턴을 하게 되는데, 그때부터 이 책의 정수가 드러나기
-            시작한다.
+            {archiveDetailData.review.reviewContent}
           </div>
           <div className="flex gap-4 justify-end">
             <img

bookduck/src/components/RecordingPage/ReviewView.jsx

@@ -14,7 +14,7 @@ const ReviewView = () => {
     queryFn: () => getExtractReview(userId, "REVIEW", 0, 20),
   });
   return (
-    <div className="flex flex-col gap-[1rem] items-center h-[40rem]  mt-[1rem] overflow-y-auto">
+    <div className="flex flex-col gap-[1rem] items-center max-h-[40rem]  mt-[1rem] overflow-y-auto">
       {archiveReviewData.archiveList.map((it, index) => (
         <ReviewComponents
           key={index}

bookduck/src/components/RecordingPage/TotalView.jsx

@@ -16,7 +16,7 @@ const TotalView = () => {
   });
 
   return (
-    <div className="flex flex-col gap-[1rem] items-center mt-[1rem]">
+    <div className="flex flex-col gap-[1rem] items-center max-h-[40rem]  mt-[1rem] overflow-y-auto">
       {archiveData.archiveList.map((it, index) => (
         <>
           {it.type === "EXCERPT" ? (

bookduck/src/pages/RecordingPage/ArchiveDetailPage.jsx

@@ -1,4 +1,4 @@
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import AuthorComponent from "../../components/RecordingPage/AuthorComponent";
 import CloseButton from "../../components/RecordingPage/CloseButton";
 import Header2 from "../../components/RecordingPage/Header2";
@@ -20,6 +20,10 @@ const ArchiveDetail = () => {
   const [visibleMenu, setVisibleMenu] = useState(false);
   const [visible, setVisible] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const location = useLocation();
+
+  const archiveDetailData = location.state?.detailData || {};
+  console.log("123");
 
   const ref = useRef(null); // 두 컴포넌트의 높이를 측정할 ref
 
@@ -56,20 +60,20 @@ const ArchiveDetail = () => {
         <div className="flex flex-col gap-[0.31rem]">
           <Header2 handleMenu={handleMenu} />
           <div ref={ref} className="flex flex-col gap-4">
-            {pathname.split("/")[1] === "extract-archive-detail" && (
-              <ExtractDetailComponent />
+            {pathname.split("/")[1] === "excerpt-archive-detail" && (
+              <ExtractDetailComponent archiveDetailData={archiveDetailData} />
             )}
             {pathname.split("/")[1] === "review-archive-detail" && (
-              <ReviewDetailComponent />
+              <ReviewDetailComponent archiveDetailData={archiveDetailData} />
             )}
             {pathname.split("/")[1] === "total-archive-detail" && (
               <>
-                <ExtractDetailComponent />
-                <ReviewDetailComponent />
+                <ExtractDetailComponent archiveDetailData={archiveDetailData} />
+                <ReviewDetailComponent archiveDetailData={archiveDetailData} />
               </>
             )}
 
-            <AuthorComponent />
+            <AuthorComponent archiveDetailData={archiveDetailData} />
           </div>
           <div
             className={`mt-8 ${