diff --git a/bookduck/src/App.jsx b/bookduck/src/App.jsx
index 9022220f..426918a1 100644
--- a/bookduck/src/App.jsx
+++ b/bookduck/src/App.jsx
@@ -67,9 +67,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 />} />
 
diff --git a/bookduck/src/api/archive.js b/bookduck/src/api/archive.js
index bc2eeb2c..dc37f836 100644
--- a/bookduck/src/api/archive.js
+++ b/bookduck/src/api/archive.js
@@ -3,7 +3,7 @@ import { get, post } from "./example";
 
 export const postExtractReview = async (data) => {
   try {
-    const res = await post("/archive", data);
+    const res = await post("/archives", data);
     console.log("발췌 및 감상평 업로드 성공", res);
     return res;
   } catch (error) {
@@ -11,9 +11,35 @@ export const postExtractReview = async (data) => {
   }
 };
 
-export const postExtractImage = async (data) => {
+export const getExtractReview = async (userId, archiveType, page, size) => {
   try {
-    const res = await post(`/archives/excerpts/ocr`, data);
+    const res = await get(
+      `/users/${userId}/archives?type=${archiveType}&page=${page}&size=${size}`
+    );
+    console.log("발췌 및 감상평 조회 성공", res);
+    return res;
+  } catch (error) {
+    console.error("발췌 및 감상평 조회 실패", error);
+  }
+};
+
+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, {
+      headers: {
+        "Content-Type": "multipart/formdata",
+      },
+    });
     console.log("발췌 이미지 추출 성공", res);
     return res;
   } catch (error) {
diff --git a/bookduck/src/components/LibraryPage/BookListPage.jsx b/bookduck/src/components/LibraryPage/BookListPage.jsx
index 81973f9e..30e24b50 100644
--- a/bookduck/src/components/LibraryPage/BookListPage.jsx
+++ b/bookduck/src/components/LibraryPage/BookListPage.jsx
@@ -27,9 +27,9 @@ const BookListPage = ({ view }) => {
   const [statusVisible, setStatusVisible] = useState(false);
   const statusArr = ["읽고 싶어요", "읽고 있어요", "다 읽었어요", "중단했어요"];
   const [isCancel, setCancel] = useState(true);
-  const [currentState, setCurrentState] = useState("읽고 싶어요");
   const [sortedBookList, setSortedBookList] = useState([]);
   const [selectedBookId, setSelectedId] = useState();
+  const [currentState, setCurrentState] = useState({});
 
   const getSortKey = (sort) => {
     switch (sort) {
@@ -46,20 +46,20 @@ const BookListPage = ({ view }) => {
     }
   };
 
-  // const getReadingStatus = (status) => {
-  //   switch (status) {
-  //     case "NOT_STARTED":
-  //       return "읽고 싶어요";
-  //     case "READING,":
-  //       return "읽고 있어요";
-  //     case "FINISHED":
-  //       return "다 읽었어요";
-  //     case "STOPPED":
-  //       return "중단했어요";
-  //     default:
-  //       return "읽고 싶어요";
-  //   }
-  // };
+  const getReadingStatus = (status) => {
+    switch (status) {
+      case "NOT_STARTED":
+        return "읽고 싶어요";
+      case "READING,":
+        return "읽고 있어요";
+      case "FINISHED":
+        return "다 읽었어요";
+      case "STOPPED":
+        return "중단했어요";
+      default:
+        return "읽고 싶어요";
+    }
+  };
 
   const getReadingStatusKey = (status) => {
     switch (status) {
@@ -85,6 +85,16 @@ const BookListPage = ({ view }) => {
     queryFn: () => getTotalBook(getSortKey(sort)),
   });
 
+  useEffect(() => {
+    if (bookListData) {
+      const initialState = bookListData.bookList.reduce((acc, book) => {
+        acc[book.userBookId] = book.readStatus;
+        return acc;
+      }, {});
+      setCurrentState(initialState);
+    }
+  }, [bookListData]);
+
   const handleSortChange = (newSort) => {
     setSort(newSort);
     setVisible(false);
@@ -123,6 +133,10 @@ const BookListPage = ({ view }) => {
   };
 
   const handleStatusChange = async (status) => {
+    const initialState = bookListData.bookList.reduce((acc, book) => {
+      acc[book.userBookId] = book.readStatus;
+      return acc;
+    }, {});
     setCurrentState(status);
     const res = await patchBookStatus(
       selectedBookId,
@@ -168,7 +182,7 @@ const BookListPage = ({ view }) => {
                     handleStatusClick={() => handleStatusClick(book.userBookId)}
                     edit={true}
                     bottomSheet={true}
-                    status={currentState}
+                    status={getReadingStatus(currentState[book.userBookId])}
                     bookTitle={book.title}
                     author={book.authors}
                     bookImg={book.imgPath}
@@ -178,10 +192,10 @@ const BookListPage = ({ view }) => {
               : sortedBookList &&
                 sortedBookList.map((book) => (
                   <BookListView
-                    handleStatusClick={handleStatusClick}
+                    handleStatusClick={() => handleStatusClick(book.userBookId)}
                     edit={true}
                     bottomSheet={true}
-                    status={currentState}
+                    status={getReadingStatus(currentState[book.userBookId])}
                     bookTitle={book.title}
                     author={book.authors}
                     bookImg={book.imgPath}
diff --git a/bookduck/src/components/RecordingPage/ArchiveDetailComponent.jsx b/bookduck/src/components/RecordingPage/ArchiveDetailComponent.jsx
new file mode 100644
index 00000000..64b561dd
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/bookduck/src/components/RecordingPage/Archiving.jsx b/bookduck/src/components/RecordingPage/Archiving.jsx
index 47d82da8..f222b14c 100644
--- a/bookduck/src/components/RecordingPage/Archiving.jsx
+++ b/bookduck/src/components/RecordingPage/Archiving.jsx
@@ -2,9 +2,11 @@ import { useNavigate } from "react-router-dom";
 import BookListView from "../common/BookListView";
 import { useQuery } from "@tanstack/react-query";
 import { getSortedTotalBook } from "../../api/library";
+import useBookInfoStore from "../../store/useBookInfoStore";
 
 const Archiving = () => {
   const navigate = useNavigate();
+  const { setBookInfo } = useBookInfoStore();
 
   const {
     data: sortedBookListData = { bookList: [] },
@@ -15,7 +17,9 @@ const Archiving = () => {
     queryFn: () => getSortedTotalBook(["READING"], "latest"),
   });
 
-  const handleRecording = () => {
+  const handleRecording = (bookInfo) => {
+    console.log(bookInfo);
+    setBookInfo(bookInfo);
     navigate("/recording");
   };
   return (
@@ -24,7 +28,7 @@ const Archiving = () => {
         sortedBookListData.bookList.map((book) => (
           <BookListView
             edit={false}
-            handleOnClick={handleRecording}
+            handleOnClick={() => handleRecording(book)}
             bookTitle={book.title}
             author={book.authors}
             bookImg={book.imgPath}
diff --git a/bookduck/src/components/RecordingPage/AuthorComponent.jsx b/bookduck/src/components/RecordingPage/AuthorComponent.jsx
index 4ed0259e..f5051bb5 100644
--- a/bookduck/src/components/RecordingPage/AuthorComponent.jsx
+++ b/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>
diff --git a/bookduck/src/components/RecordingPage/ExtractComponents.jsx b/bookduck/src/components/RecordingPage/ExtractComponents.jsx
index 42835650..cf83773a 100644
--- a/bookduck/src/components/RecordingPage/ExtractComponents.jsx
+++ b/bookduck/src/components/RecordingPage/ExtractComponents.jsx
@@ -1,15 +1,49 @@
 import { useNavigate } from "react-router-dom";
+import { getDetailExtractReview } from "../../api/archive";
+import { getUserId } from "../../api/oauth";
 
+<<<<<<< HEAD
+const ExtractComponents = ({ excerptData, archive = false }) => {
+  console.log(excerptData);
+  const createdDate = excerptData?.data.createdTime
+    .split("T")[0]
+    .replace(/-/g, ".");
+  const excerptId = excerptData.data.excerptId;
+  const title = excerptData?.title;
+
+  const author = excerptData?.author;
+  const content = excerptData?.data.excerptContent;
+  const page = excerptData?.data.pageNumber;
+  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 },
+      });
+  };
+
+=======
 const ExtractComponents = ({ excerptData }) => {
   const navigate = useNavigate();
   const createdDate = excerptData?.createdTime.split("T")[0].replace(/-/g, ".");
+>>>>>>> dev
   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">
+<<<<<<< HEAD
+        {!archive && createdDate ? (
+=======
         {createdDate ? (
+>>>>>>> dev
           <>
             <div className="flex justify-between items-center">
               <div className="text-c2 text-gray-400">{createdDate}</div>
@@ -19,6 +53,18 @@ const ExtractComponents = ({ excerptData }) => {
             </div>
           </>
         ) : (
+<<<<<<< HEAD
+          <>
+            <div className="text-right text-b2 text-gray-400">{page}p</div>
+            <div className="flex flex-col gap-[0.5rem]">
+              <div className="text-b2 text-gray-800">{content} </div>
+              <div className="text-c2 text-gray-400">
+                {title && author && `${title} / ${author}`}
+              </div>
+            </div>
+          </>
+        )}
+=======
           <div className="text-right justify-end items-end text-b2 text-gray-400">
             {excerptData?.pageNumber || "54"}p
           </div>
@@ -32,6 +78,7 @@ const ExtractComponents = ({ excerptData }) => {
             {/* 수정 필요 */}내 편이 아니더라도 적을 만들지 마라 / 류츠신
           </div>
         </div>
+>>>>>>> dev
       </div>
     </div>
   );
diff --git a/bookduck/src/components/RecordingPage/ExtractDetailComponent.jsx b/bookduck/src/components/RecordingPage/ExtractDetailComponent.jsx
index 0d5c11dd..194c9a0f 100644
--- a/bookduck/src/components/RecordingPage/ExtractDetailComponent.jsx
+++ b/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" />
diff --git a/bookduck/src/components/RecordingPage/ExtractView.jsx b/bookduck/src/components/RecordingPage/ExtractView.jsx
index b3c4b8d1..88fea550 100644
--- a/bookduck/src/components/RecordingPage/ExtractView.jsx
+++ b/bookduck/src/components/RecordingPage/ExtractView.jsx
@@ -1,13 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import { getExtractReview } from "../../api/archive";
+import { getUserId } from "../../api/oauth";
 import ExtractComponents from "./ExtractComponents";
 
 const ExtractView = () => {
+  const userId = getUserId();
+  const {
+    data: archiveExcerptData,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: ["archiveExcerptData"],
+    queryFn: () => getExtractReview(userId, "EXCERPT", 0, 20),
+  });
+
   return (
-    <div className="flex flex-col gap-[1rem] items-center h-[40rem]  mt-[1rem] overflow-y-auto">
-      <ExtractComponents />
-      <ExtractComponents />
-      <ExtractComponents />
-      <ExtractComponents />
-      <ExtractComponents />
+    <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} excerptData={it} archive={true} />
+      ))}
     </div>
   );
 };
diff --git a/bookduck/src/components/RecordingPage/ExtractWritingComponent.jsx b/bookduck/src/components/RecordingPage/ExtractWritingComponent.jsx
index ac9e6592..1ad75ab0 100644
--- a/bookduck/src/components/RecordingPage/ExtractWritingComponent.jsx
+++ b/bookduck/src/components/RecordingPage/ExtractWritingComponent.jsx
@@ -6,12 +6,13 @@ import { postExtractImage } from "../../api/archive";
 
 const ExtractWritingComponent = ({
   inputValue,
+  setInputValue,
   handleTextField,
   pageInputValue,
+  extractPublicState,
+  setExtractPublicState,
 }) => {
-  const [extractPublicState, setExtractPublicState] = useState("전체공개");
   const [extractImgURL, setExtractImgURL] = useState("");
-
   const handleState = (state) => {
     setExtractPublicState(state);
   };
@@ -19,13 +20,12 @@ const ExtractWritingComponent = ({
   const handleExtractImage = async (e) => {
     const file = e.target.files[0]; // 선택한 파일
     if (file) {
-      setExtractImgURL(URL.createObjectURL(file));
-      console.log(URL.createObjectURL(file));
-      const data = {
-        image: URL.createObjectURL(file),
-      };
-      const res = await postExtractImage(data);
-      console.log(res);
+      const formData = new FormData();
+      formData.append("image", file);
+      console.log("발췌 시작");
+      const res = await postExtractImage(formData);
+      console.log(res.data);
+      setInputValue(res.data);
     }
   };
 
diff --git a/bookduck/src/components/RecordingPage/Library.jsx b/bookduck/src/components/RecordingPage/Library.jsx
index 38399910..078b6c45 100644
--- a/bookduck/src/components/RecordingPage/Library.jsx
+++ b/bookduck/src/components/RecordingPage/Library.jsx
@@ -2,9 +2,11 @@ import { useNavigate } from "react-router-dom";
 import BookListView from "../common/BookListView";
 import { getTotalBook } from "../../api/library";
 import { useQuery } from "@tanstack/react-query";
+import useBookInfoStore from "../../store/useBookInfoStore";
 
 const Library = () => {
   const navigate = useNavigate();
+  const { setBookInfo } = useBookInfoStore();
 
   const {
     data: bookListData = { bookList: [] },
@@ -15,7 +17,8 @@ const Library = () => {
     queryFn: () => getTotalBook("latest"),
   });
 
-  const handleRecording = () => {
+  const handleRecording = (book) => {
+    setBookInfo(book);
     navigate("/recording");
   };
   return (
@@ -24,7 +27,7 @@ const Library = () => {
         bookListData.bookList.map((book) => (
           <BookListView
             edit={false}
-            handleOnClick={handleRecording}
+            handleOnClick={() => handleRecording(book)}
             bookTitle={book.title}
             author={book.authors}
             bookImg={book.imgPath}
diff --git a/bookduck/src/components/RecordingPage/ReviewComponents.jsx b/bookduck/src/components/RecordingPage/ReviewComponents.jsx
index 8a472a10..b39af752 100644
--- a/bookduck/src/components/RecordingPage/ReviewComponents.jsx
+++ b/bookduck/src/components/RecordingPage/ReviewComponents.jsx
@@ -1,46 +1,59 @@
 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 = ({
-  reviewTitleValue = "감상평 제목",
-  contents = "감상평 내용이 들어갈 자리입니다.",
-  bookTitleValue,
-  authorValue,
-  reviewData,
-}) => {
-  const createdDate = reviewData?.createdTime.split("T")[0].replace(/-/g, ".");
-  const navigate = useNavigate();
+const ReviewComponents = ({ reviewData, archive = false }) => {
+  console.log(reviewData);
+  const content = reviewData?.data.reviewContent;
+  const reviewId = reviewData?.data.reviewId;
+  const reviewTitle = reviewData?.data.reviewTitle;
+  const title = reviewData?.title;
+  const author = reviewData?.author;
+  const color = reviewData?.data.color;
+  const createdDate = reviewData?.data.createdTime
+    .split("T")[0]
+    .replace(/-/g, ".");
 
+  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 }}
+        style={{ backgroundColor: color }}
         className={`flex flex-col gap-[1.75rem] w-[22.5625rem]  p-[1.25rem] rounded-[0.88rem] ${
           !reviewColor && "bg-gray-400"
         } shadow-custom`}
       >
-        {createdDate && (
+        {!archive && createdDate && (
           <div className="text-c2 text-[#ffffff99]">{createdDate}</div>
         )}
         <div className="flex flex-col gap-[0.25rem]">
           <div className="text-st text-[#FFFFFF] font-semibold">
-            {reviewData?.reviewTitle || reviewTitleValue}
-          </div>
-          <div className="text-b2 text-[#FFFFFF]">
-            {reviewData?.reviewContent || contents}
+            {reviewTitle}
           </div>
+          <div className="text-b2 text-[#FFFFFF]">{content}</div>
+        </div>
+        <div className="text-c2 text-[#ffffff99]">
+          {title && author && `${title} / ${author}`}
         </div>
-        {bookTitleValue && (
-          <div className="text-c2 text-[#ffffff99]">
-            {bookTitleValue} / {authorValue}
-          </div>
-        )}
       </div>
     </div>
   );
diff --git a/bookduck/src/components/RecordingPage/ReviewDetailComponent.jsx b/bookduck/src/components/RecordingPage/ReviewDetailComponent.jsx
index a0513bfb..d18ce46b 100644
--- a/bookduck/src/components/RecordingPage/ReviewDetailComponent.jsx
+++ b/bookduck/src/components/RecordingPage/ReviewDetailComponent.jsx
@@ -10,8 +10,10 @@ import link from "../../assets/recordingPage/link.svg";
 
 import BottomSheetModal from "../common/BottomSheetModal";
 import BottomSheetMenuComponent from "../common/BottomSheetMenuComponent";
+import { useParams } from "react-router-dom";
+import { getDetailExtractReview } from "../../api/archive";
 
-const ReviewDetailComponent = () => {
+const ReviewDetailComponent = ({ archiveDetailData }) => {
   const [bottomSheetShow, setBottomSheetShow] = useState(false);
   const [visible, setVisible] = useState(false);
 
@@ -21,32 +23,27 @@ 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
+        style={{ background: archiveDetailData.review.color }}
+        className="w-[22.5825rem]  px-5 py-6 rounded-[0.88rem]  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.review.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
diff --git a/bookduck/src/components/RecordingPage/ReviewView.jsx b/bookduck/src/components/RecordingPage/ReviewView.jsx
index dc3942be..650e820e 100644
--- a/bookduck/src/components/RecordingPage/ReviewView.jsx
+++ b/bookduck/src/components/RecordingPage/ReviewView.jsx
@@ -1,14 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+import { getExtractReview } from "../../api/archive";
+import { getUserId } from "../../api/oauth";
 import ReviewComponents from "./ReviewComponents";
 
 const ReviewView = () => {
+  const userId = getUserId();
+  const {
+    data: archiveReviewData,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: ["archiveReviewData"],
+    queryFn: () => getExtractReview(userId, "REVIEW", 0, 20),
+  });
   return (
-    <div className="flex flex-col gap-[1rem] items-center h-[40rem]  mt-[1rem] overflow-y-auto">
-      <ReviewComponents />
-      <ReviewComponents />
-      <ReviewComponents />
-      <ReviewComponents />
-      <ReviewComponents />
-      <ReviewComponents />
+    <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} reviewData={it} archive={true} />
+      ))}
     </div>
   );
 };
diff --git a/bookduck/src/components/RecordingPage/ReviewWritingComponent.jsx b/bookduck/src/components/RecordingPage/ReviewWritingComponent.jsx
index e6503f95..ed51a8df 100644
--- a/bookduck/src/components/RecordingPage/ReviewWritingComponent.jsx
+++ b/bookduck/src/components/RecordingPage/ReviewWritingComponent.jsx
@@ -11,8 +11,9 @@ const ReviewWritingComponent = ({
   titleInputValue,
   bookTitleValue = "책제목",
   authorValue = "지은이",
+  reviewPublicState,
+  setReviewPublicState,
 }) => {
-  const [reviewPublicState, setReviewPublicState] = useState("전체공개");
   const { reviewColor } = useReviewColorStore();
   const navigate = useNavigate();
   const handleState = (state) => {
diff --git a/bookduck/src/components/RecordingPage/TotalView.jsx b/bookduck/src/components/RecordingPage/TotalView.jsx
index d7b6cb7e..adcecd6f 100644
--- a/bookduck/src/components/RecordingPage/TotalView.jsx
+++ b/bookduck/src/components/RecordingPage/TotalView.jsx
@@ -1,15 +1,31 @@
+import { useQuery } from "@tanstack/react-query";
 import ExtractComponents from "./ExtractComponents";
 import ReviewComponents from "./ReviewComponents";
+import { getExtractReview } from "../../api/archive";
+import { getUserId } from "../../api/oauth";
 
 const TotalView = () => {
+  const userId = getUserId();
+  const {
+    data: archiveData,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: ["archiveData"],
+    queryFn: () => getExtractReview(userId, "ALL", 0, 20),
+  });
+  console.log(archiveData);
   return (
-    <div className="flex flex-col gap-[1rem] items-center mt-[1rem]">
-      <ExtractComponents />
-      <ReviewComponents />
-      <ExtractComponents />
-      <ReviewComponents />
-      <ExtractComponents />
-      <ReviewComponents />
+    <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" ? (
+            <ExtractComponents key={index} excerptData={it} archive={true} />
+          ) : (
+            <ReviewComponents key={index} reviewData={it} archive={true} />
+          )}
+        </>
+      ))}
     </div>
   );
 };
diff --git a/bookduck/src/components/common/Header3.jsx b/bookduck/src/components/common/Header3.jsx
index fe847834..876973d3 100644
--- a/bookduck/src/components/common/Header3.jsx
+++ b/bookduck/src/components/common/Header3.jsx
@@ -10,6 +10,7 @@ const Header3 = ({
   edit = false,
   editState = false,
   handleEdit,
+  handleComplete,
 }) => {
   const navigate = useNavigate();
 
@@ -27,7 +28,12 @@ const Header3 = ({
       {check && (
         <div className="flex gap-6">
           <div className="text-b1 text-gray-400 cursor-pointer">취소</div>
-          <div className="text-b1 text-blue-400 cursor-pointer">완료</div>
+          <div
+            onClick={handleComplete}
+            className="text-b1 text-blue-400 cursor-pointer"
+          >
+            완료
+          </div>
         </div>
       )}
       {edit && (
diff --git a/bookduck/src/pages/RecordingPage/ArchiveDetailPage.jsx b/bookduck/src/pages/RecordingPage/ArchiveDetailPage.jsx
index 4174b322..5ee9bafa 100644
--- a/bookduck/src/pages/RecordingPage/ArchiveDetailPage.jsx
+++ b/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 ${
diff --git a/bookduck/src/pages/RecordingPage/ArchivePage.jsx b/bookduck/src/pages/RecordingPage/ArchivePage.jsx
index eef47092..d6bbe692 100644
--- a/bookduck/src/pages/RecordingPage/ArchivePage.jsx
+++ b/bookduck/src/pages/RecordingPage/ArchivePage.jsx
@@ -9,6 +9,9 @@ import ReviewView from "../../components/RecordingPage/ReviewView";
 import StatusBar from "../../components/common/StatusBar";
 import { useNavigate } from "react-router-dom";
 import FloatingRecordButton from "../../components/common/FloatingRecordButton";
+import { useQuery } from "@tanstack/react-query";
+import { getExtractReview } from "../../api/archive";
+import { getUserId } from "../../api/oauth";
 
 const ArchivePage = () => {
   const [tab, setTab] = useState("전체보기");
diff --git a/bookduck/src/pages/RecordingPage/CardDecorationPage.jsx b/bookduck/src/pages/RecordingPage/CardDecorationPage.jsx
index e228ff82..4475df01 100644
--- a/bookduck/src/pages/RecordingPage/CardDecorationPage.jsx
+++ b/bookduck/src/pages/RecordingPage/CardDecorationPage.jsx
@@ -36,10 +36,10 @@ const CardDecorationPage = () => {
       <Header3 title="감상평 카드 꾸미기" />
       <div className="flex justify-center mt-[2.69rem] mb-[5.12rem]">
         <ReviewComponents
-          reviewTitleValue={reviewTitleValue}
-          contents={textValue}
-          bookTitleValue={bookTitleValue}
-          authorValue={authorValue}
+          content={textValue}
+          reviewTitle={reviewTitleValue}
+          title={bookTitleValue}
+          author={authorValue}
         />
       </div>
       <div className="relative min-h-[26rem] rounded-t-[1.25rem] shadow-custom2">
diff --git a/bookduck/src/pages/RecordingPage/RecordingPage.jsx b/bookduck/src/pages/RecordingPage/RecordingPage.jsx
index 90b145a2..a094c7eb 100644
--- a/bookduck/src/pages/RecordingPage/RecordingPage.jsx
+++ b/bookduck/src/pages/RecordingPage/RecordingPage.jsx
@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import Divider1 from "../../components/common/Divider1";
 import Divider2 from "../../components/common/Divider2";
 import Header1 from "../../components/common/Header1";
@@ -12,16 +12,37 @@ import { useEffect, useState } from "react";
 import BottomSheetModal from "../../components/common/BottomSheetModal";
 import WritingTemplate from "../../components/RecordingPage/WritingTemplate";
 import ButtonComponent from "../../components/common/ButtonComponent";
+import useBookInfoStore from "../../store/useBookInfoStore";
+import { postExtractReview } from "../../api/archive";
+import useExtractData from "../../store/useExtractDataStore";
+import useReviewData from "../../store/useReviewDataStore";
+import useReviewColorStore from "../../store/useReviewColorStore";
 
 const RecordingPage = () => {
   const navigate = useNavigate();
-  const [extractInputValue, setExtractInputValue] = useState("");
-  const [reviewInputValue, setReviewInputValue] = useState("");
-  const [pageInputValue, setPageInputValue] = useState("");
-  const [titleInputValue, setTitleInputValue] = useState("");
   const [viewBottomSheet, setViewBottomSheet] = useState(false);
   const [visible, setVisible] = useState(false);
   const [bottomSheetType, setBottomSheetType] = useState("");
+  const [extractPublicState, setExtractPublicState] = useState("전체공개");
+  const [reviewPublicState, setReviewPublicState] = useState("전체공개");
+  const {
+    pageInputValue,
+    setPageInputValue,
+    extractInputValue,
+    setExtractInputValue,
+  } = useExtractData();
+  const {
+    reviewPage,
+    setReviewPage,
+    titleInputValue,
+    setTitleInputValue,
+    reviewInputValue,
+    setReviewInputValue,
+  } = useReviewData();
+
+  const { reviewColor } = useReviewColorStore();
+
+  const { bookInfo, setBookInfo } = useBookInfoStore();
 
   const handleBack = () => {
     navigate("/selectBook");
@@ -50,21 +71,91 @@ const RecordingPage = () => {
       setViewBottomSheet(false); // 애니메이션이 끝난 후 모달 완전히 닫기
     }, 300);
   };
+  console.log(bookInfo);
+
+  const handleComplete = async () => {
+    const data = {};
+    if (pageInputValue && extractInputValue && reviewInputValue) {
+      data.excerpt = {
+        excerptContent: extractInputValue,
+        visibility: extractPublicState === "전체공개" ? "PUBLIC" : "PRIVATE",
+        pageNumber: parseInt(pageInputValue, 10),
+        userBookId: bookInfo.userBookId,
+      };
+      data.review = {
+        reviewTitle: titleInputValue,
+        reviewContent: reviewInputValue,
+        color: reviewColor,
+        visibility: reviewPublicState === "전체공개" ? "PUBLIC" : "PRIVATE",
+        userBookId: bookInfo.userBookId,
+      };
+    } else if (pageInputValue && extractInputValue) {
+      data.excerpt = {
+        excerptContent: extractInputValue,
+        visibility: extractPublicState === "전체공개" ? "PUBLIC" : "PRIVATE",
+        pageNumber: parseInt(pageInputValue, 10),
+        userBookId: bookInfo.userBookId,
+      };
+    } else if (reviewInputValue) {
+      data.review = {
+        reviewTitle: titleInputValue,
+        reviewContent: reviewInputValue,
+        color: reviewColor,
+        visibility: reviewPublicState === "전체공개" ? "PUBLIC" : "PRIVATE",
+        userBookId: bookInfo.userBookId,
+      };
+    }
+
+    // userBook: {
+    //   title: bookInfo.title,
+    //   authors: [bookInfo.author],
+    //   publisher: "bookInfo.publisher",
+    //   publishDate: "2020-10-10",
+    //   description: "<p><b>description...</p>",
+    //   genreId: 1,
+    //   category: ["fiction"],
+    //   imgPath: bookInfo.imgPath,
+    //   language: "한글",
+    //   readStatus: bookInfo.readStatus,
+    //   providerId: "Q7uTBgAAQBAJTEST3",
+    // },
+
+    console.log(data);
+    const res = await postExtractReview(data);
+    console.log(res);
+    setBookInfo({});
+    setPageInputValue();
+    setExtractInputValue("");
+    setTitleInputValue("");
+    setReviewInputValue("");
+    navigate("/archive");
+  };
 
   return (
     <>
       <StatusBar />
-      <Header3 title="기록하기" check={true} handleBack={handleBack} />
+      <Header3
+        title="기록하기"
+        check={true}
+        handleBack={handleBack}
+        handleComplete={handleComplete}
+      />
       <div className="flex flex-col gap-[1rem] mx-4">
         <div className="mt-5">
-          <ColoredAuthorComponent title="책제목" author="지은이" />
+          <ColoredAuthorComponent
+            title={bookInfo.title}
+            author={bookInfo.author}
+          />
         </div>
       </div>
       <div className="mx-4">
         <ExtractWritingComponent
           inputValue={extractInputValue}
+          setInputValue={setExtractInputValue}
           pageInputValue={pageInputValue}
           handleTextField={handleExtractTextField}
+          extractPublicState={extractPublicState}
+          setExtractPublicState={setExtractPublicState}
         />
       </div>
       <div className="mt-7 mb-4">
@@ -75,8 +166,10 @@ const RecordingPage = () => {
           inputValue={reviewInputValue}
           handleTextField={handleReviewTextField}
           titleInputValue={titleInputValue}
-          bookTitleValue="책제목"
-          authorValue="지은이"
+          bookTitleValue={bookInfo.title}
+          authorValue={bookInfo.author}
+          reviewPublicState={reviewPublicState}
+          setReviewPublicState={setReviewPublicState}
         />
       </div>
       <div className="h-[7.5rem]"></div>
@@ -89,7 +182,7 @@ const RecordingPage = () => {
         >
           <div className="absolute w-10 h-1 top-[0.75rem] left-1/2 -translate-x-1/2 rounded-[0.25rem] bg-gray-300"></div>
 
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-3 items-center">
             {bottomSheetType === "발췌" && (
               <>
                 <WritingTemplate height="18rem">
@@ -110,7 +203,7 @@ const RecordingPage = () => {
                       value={extractInputValue}
                       onChange={handleExtractOnChange}
                       placeholder="책의 구절을 입력하세요"
-                      className="w-[20.5625rem] mt-2 bg-transparent text-b2 text-gray-800 appearance-none outline-none resize-none"
+                      className="w-[20.5625rem] h-[13rem] mt-2 bg-transparent text-b2 text-gray-800 appearance-none outline-none resize-none"
                     />
                   </div>
                 </WritingTemplate>
diff --git a/bookduck/src/pages/RecordingPage/SelectBookPage.jsx b/bookduck/src/pages/RecordingPage/SelectBookPage.jsx
index e8a6c054..838a2629 100644
--- a/bookduck/src/pages/RecordingPage/SelectBookPage.jsx
+++ b/bookduck/src/pages/RecordingPage/SelectBookPage.jsx
@@ -13,6 +13,7 @@ const SelectBookPage = () => {
   const handleTab = (index) => {
     setTab(index);
   };
+
   return (
     <>
       <StatusBar />
diff --git a/bookduck/src/store/useBookInfoStore.js b/bookduck/src/store/useBookInfoStore.js
new file mode 100644
index 00000000..90fbace0
--- /dev/null
+++ b/bookduck/src/store/useBookInfoStore.js
@@ -0,0 +1,8 @@
+import { create } from "zustand";
+
+const useBookInfoStore = create((set) => ({
+  bookInfo: {},
+  setBookInfo: (newState) => set({ bookInfo: newState }),
+}));
+
+export default useBookInfoStore;
diff --git a/bookduck/src/store/useExtractDataStore.js b/bookduck/src/store/useExtractDataStore.js
new file mode 100644
index 00000000..9a2c954c
--- /dev/null
+++ b/bookduck/src/store/useExtractDataStore.js
@@ -0,0 +1,12 @@
+import { create } from "zustand";
+
+const useExtractData = create((set) => ({
+  pageInputValue: "",
+  extractInputValue: "",
+  setPageInputValue: (extractPage) => set({ pageInputValue: extractPage }),
+  setExtractInputValue: (extractContent) =>
+    set({ extractInputValue: extractContent }),
+  resetExtractData: () => set({ pageInputValue: "", extractInputValue: "" }),
+}));
+
+export default useExtractData;
diff --git a/bookduck/src/store/useReviewDataStore.js b/bookduck/src/store/useReviewDataStore.js
new file mode 100644
index 00000000..5978ec6d
--- /dev/null
+++ b/bookduck/src/store/useReviewDataStore.js
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+const useReviewData = create((set) => ({
+  reviewPage: "",
+  titleInputValue: "",
+  reviewInputValue: "",
+  setReviewPage: (reviewPage) => set({ reviewPage }),
+  setTitleInputValue: (reviewTitle) => set({ titleInputValue: reviewTitle }),
+  setReviewInputValue: (reviewContent) =>
+    set({ reviewInputValue: reviewContent }),
+  resetReviewData: () =>
+    set({ reviewPage: "", titleInputValue: "", reviewInputValue: "" }),
+}));
+
+export default useReviewData;