From 68ef18419059a5718436e43f175956ad223e9612 Mon Sep 17 00:00:00 2001 From: YoungseoChoi23 Date: Sat, 16 Nov 2024 11:52:08 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=E2=9C=A8=20Feat=20:=20=EB=B0=9C=EC=B7=8C/?= =?UTF-8?q?=EA=B0=90=EC=83=81=ED=8F=89=20OCR=20=EC=9D=B8=EC=8B=9D=20api=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bookduck/src/api/archive.js | 10 ++- .../components/RecordingPage/Archiving.jsx | 8 +- .../RecordingPage/ExtractWritingComponent.jsx | 18 ++-- .../src/components/RecordingPage/Library.jsx | 7 +- .../RecordingPage/ReviewWritingComponent.jsx | 3 +- bookduck/src/components/common/Header3.jsx | 8 +- .../src/pages/RecordingPage/RecordingPage.jsx | 85 +++++++++++++++++-- .../pages/RecordingPage/SelectBookPage.jsx | 2 + bookduck/src/store/useBookInfoStore.js | 8 ++ bookduck/src/store/useExtractDataStore.js | 12 +++ bookduck/src/store/useReviewDataStore.js | 15 ++++ 11 files changed, 150 insertions(+), 26 deletions(-) create mode 100644 bookduck/src/store/useBookInfoStore.js create mode 100644 bookduck/src/store/useExtractDataStore.js create mode 100644 bookduck/src/store/useReviewDataStore.js diff --git a/bookduck/src/api/archive.js b/bookduck/src/api/archive.js index bc2eeb2c..6d60d687 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,13 @@ export const postExtractReview = async (data) => { } }; -export const postExtractImage = async (data) => { +export const postExtractImage = async (formData) => { try { - const res = await post(`/archives/excerpts/ocr`, data); + 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/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) => ( handleRecording(book)} bookTitle={book.title} author={book.authors} bookImg={book.imgPath} 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) => ( handleRecording(book)} bookTitle={book.title} author={book.authors} bookImg={book.imgPath} 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/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 && (
취소
-
완료
+
+ 완료 +
)} {edit && ( diff --git a/bookduck/src/pages/RecordingPage/RecordingPage.jsx b/bookduck/src/pages/RecordingPage/RecordingPage.jsx index 90b145a2..65073c2e 100644 --- a/bookduck/src/pages/RecordingPage/RecordingPage.jsx +++ b/bookduck/src/pages/RecordingPage/RecordingPage.jsx @@ -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 } = useBookInfoStore(); const handleBack = () => { navigate("/selectBook"); @@ -50,21 +71,67 @@ const RecordingPage = () => { setViewBottomSheet(false); // 애니메이션이 끝난 후 모달 완전히 닫기 }, 300); }; + console.log(bookInfo); + + const handleComplete = async () => { + const data = { + excerpt: { + excerptContent: extractInputValue, + visibility: extractPublicState === "전체공개" ? "PUBLIC" : "PRIVATE", + pageNumber: parseInt(pageInputValue, 10), + userBookId: bookInfo.userBookId, + }, + 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: "

description...

", + genreId: 1, + category: ["fiction"], + imgPath: bookInfo.imgPath, + language: "한글", + readStatus: bookInfo.readStatus, + providerId: "Q7uTBgAAQBAJTEST3", + }, + }; + console.log(data); + const res = await postExtractReview(data); + console.log(res); + }; return ( <> - +
- +
@@ -77,6 +144,8 @@ const RecordingPage = () => { titleInputValue={titleInputValue} bookTitleValue="책제목" authorValue="지은이" + reviewPublicState={reviewPublicState} + setReviewPublicState={setReviewPublicState} />
@@ -89,7 +158,7 @@ const RecordingPage = () => { >
-
+
{bottomSheetType === "발췌" && ( <> @@ -110,7 +179,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" />
diff --git a/bookduck/src/pages/RecordingPage/SelectBookPage.jsx b/bookduck/src/pages/RecordingPage/SelectBookPage.jsx index e8a6c054..afe4b19a 100644 --- a/bookduck/src/pages/RecordingPage/SelectBookPage.jsx +++ b/bookduck/src/pages/RecordingPage/SelectBookPage.jsx @@ -13,6 +13,8 @@ const SelectBookPage = () => { const handleTab = (index) => { setTab(index); }; + + return ( <> 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; From 6c07cc1371f9fe284ac648c1800d1dfd0f6cf741 Mon Sep 17 00:00:00 2001 From: YoungseoChoi23 Date: Sat, 23 Nov 2024 06:22:00 +0900 Subject: [PATCH 2/8] =?UTF-8?q?=E2=9C=A8=20Feat=20:=20=EB=B0=9C=EC=B7=8C?= =?UTF-8?q?=20=EB=B0=8F=20=EA=B0=90=EC=83=81=ED=8F=89=20=EC=A1=B0=ED=9A=8C?= =?UTF-8?q?=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bookduck/src/api/archive.js | 12 ++++ .../RecordingPage/ExtractComponents.jsx | 10 ++- .../RecordingPage/ReviewComponents.jsx | 16 +++-- .../components/RecordingPage/TotalView.jsx | 31 ++++++-- .../src/pages/RecordingPage/ArchivePage.jsx | 23 +++++- .../src/pages/RecordingPage/RecordingPage.jsx | 70 +++++++++++++------ .../pages/RecordingPage/SelectBookPage.jsx | 1 - 7 files changed, 116 insertions(+), 47 deletions(-) diff --git a/bookduck/src/api/archive.js b/bookduck/src/api/archive.js index 6d60d687..8326f242 100644 --- a/bookduck/src/api/archive.js +++ b/bookduck/src/api/archive.js @@ -11,6 +11,18 @@ export const postExtractReview = async (data) => { } }; +export const getExtractReview = async (userId, archiveType, page, size) => { + try { + 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 postExtractImage = async (formData) => { try { const res = await apiAuth.post(`/archives/excerpts/ocr`, formData, { diff --git a/bookduck/src/components/RecordingPage/ExtractComponents.jsx b/bookduck/src/components/RecordingPage/ExtractComponents.jsx index 6f270ef3..cdbdbb62 100644 --- a/bookduck/src/components/RecordingPage/ExtractComponents.jsx +++ b/bookduck/src/components/RecordingPage/ExtractComponents.jsx @@ -1,6 +1,6 @@ import { useNavigate } from "react-router-dom"; -const ExtractComponents = () => { +const ExtractComponents = ({ page, content, title, author }) => { const navigate = useNavigate(); return ( @@ -9,13 +9,11 @@ const ExtractComponents = () => { className="cursor-pointer" >
-
54p
+
{page}p
-
- 한번 피면 끝장을 보게 되는 책이다. -
+
{content}
- 내 편이 아니더라도 적을 만들지 마라 / 류츠신 + {title} / {author}
diff --git a/bookduck/src/components/RecordingPage/ReviewComponents.jsx b/bookduck/src/components/RecordingPage/ReviewComponents.jsx index e6f12730..d6fd843b 100644 --- a/bookduck/src/components/RecordingPage/ReviewComponents.jsx +++ b/bookduck/src/components/RecordingPage/ReviewComponents.jsx @@ -3,10 +3,12 @@ import useReviewColorStore from "../../store/useReviewColorStore"; import { useEffect } from "react"; const ReviewComponents = ({ - reviewTitleValue = "감상평 제목", - contents = "감상평 내용이 들어갈 자리입니다.", - bookTitleValue = "감상평 책", - authorValue = "감상평 지은이", + page, + content, + reviewId, + reviewTitle, + title, + author, }) => { const navigate = useNavigate(); @@ -25,12 +27,12 @@ const ReviewComponents = ({ >
- {reviewTitleValue} + {reviewTitle}
-
{contents}
+
{content}
- {bookTitleValue} / {authorValue} + {title} / {author}
diff --git a/bookduck/src/components/RecordingPage/TotalView.jsx b/bookduck/src/components/RecordingPage/TotalView.jsx index d7b6cb7e..993b1f79 100644 --- a/bookduck/src/components/RecordingPage/TotalView.jsx +++ b/bookduck/src/components/RecordingPage/TotalView.jsx @@ -1,15 +1,32 @@ import ExtractComponents from "./ExtractComponents"; import ReviewComponents from "./ReviewComponents"; -const TotalView = () => { +const TotalView = ({ archiveData }) => { + console.log(archiveData.archiveList); return (
- - - - - - + {archiveData.archiveList.map((it, index) => ( + <> + {it.type === "EXCERPT" ? ( + + ) : ( + + )} + + ))}
); }; diff --git a/bookduck/src/pages/RecordingPage/ArchivePage.jsx b/bookduck/src/pages/RecordingPage/ArchivePage.jsx index eef47092..a12945aa 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("전체보기"); @@ -18,6 +21,20 @@ const ArchivePage = () => { navigate("/selectBook"); }; + const archiveType = + tab === "전체보기" ? "ALL" : (tab = "발췌" ? "EXCERPT" : "REVIEW"); + + const userId = getUserId(); + + const { + data: archiveData, + isError, + error, + } = useQuery({ + queryKey: ["archiveData"], + queryFn: () => getExtractReview(userId, archiveType, 0, 20), + }); + return ( <> @@ -31,9 +48,9 @@ const ArchivePage = () => { borderWidth="3rem" />
- {tab === "전체보기" && } - {tab === "발췌" && } - {tab === "감상평" && } + {tab === "전체보기" && } + {tab === "발췌" && } + {tab === "감상평" && }
diff --git a/bookduck/src/pages/RecordingPage/RecordingPage.jsx b/bookduck/src/pages/RecordingPage/RecordingPage.jsx index 65073c2e..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"; @@ -42,7 +42,7 @@ const RecordingPage = () => { const { reviewColor } = useReviewColorStore(); - const { bookInfo } = useBookInfoStore(); + const { bookInfo, setBookInfo } = useBookInfoStore(); const handleBack = () => { navigate("/selectBook"); @@ -74,37 +74,61 @@ const RecordingPage = () => { console.log(bookInfo); const handleComplete = async () => { - const data = { - excerpt: { + const data = {}; + if (pageInputValue && extractInputValue && reviewInputValue) { + data.excerpt = { excerptContent: extractInputValue, visibility: extractPublicState === "전체공개" ? "PUBLIC" : "PRIVATE", pageNumber: parseInt(pageInputValue, 10), userBookId: bookInfo.userBookId, - }, - review: { + }; + 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: "

description...

", - genreId: 1, - category: ["fiction"], - imgPath: bookInfo.imgPath, - language: "한글", - readStatus: bookInfo.readStatus, - providerId: "Q7uTBgAAQBAJTEST3", - }, - }; + }; + } 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: "

description...

", + // 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 ( @@ -142,8 +166,8 @@ const RecordingPage = () => { inputValue={reviewInputValue} handleTextField={handleReviewTextField} titleInputValue={titleInputValue} - bookTitleValue="책제목" - authorValue="지은이" + bookTitleValue={bookInfo.title} + authorValue={bookInfo.author} reviewPublicState={reviewPublicState} setReviewPublicState={setReviewPublicState} /> diff --git a/bookduck/src/pages/RecordingPage/SelectBookPage.jsx b/bookduck/src/pages/RecordingPage/SelectBookPage.jsx index afe4b19a..838a2629 100644 --- a/bookduck/src/pages/RecordingPage/SelectBookPage.jsx +++ b/bookduck/src/pages/RecordingPage/SelectBookPage.jsx @@ -14,7 +14,6 @@ const SelectBookPage = () => { setTab(index); }; - return ( <> From 23621a0d552b9dbb185b8c53e7389b3539236972 Mon Sep 17 00:00:00 2001 From: YoungseoChoi23 Date: Sat, 23 Nov 2024 06:32:31 +0900 Subject: [PATCH 3/8] =?UTF-8?q?=E2=9C=A8=20Feat=20:=20=EB=B0=9C=EC=B7=8C,?= =?UTF-8?q?=20=EA=B0=90=EC=83=81=ED=8F=89=20=EA=B0=81=EA=B0=81=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/RecordingPage/ExtractView.jsx | 28 ++++++++++++++---- .../components/RecordingPage/ReviewView.jsx | 29 +++++++++++++++---- .../components/RecordingPage/TotalView.jsx | 18 ++++++++++-- .../src/pages/RecordingPage/ArchivePage.jsx | 20 ++----------- 4 files changed, 65 insertions(+), 30 deletions(-) diff --git a/bookduck/src/components/RecordingPage/ExtractView.jsx b/bookduck/src/components/RecordingPage/ExtractView.jsx index b3c4b8d1..a8b130e8 100644 --- a/bookduck/src/components/RecordingPage/ExtractView.jsx +++ b/bookduck/src/components/RecordingPage/ExtractView.jsx @@ -1,13 +1,31 @@ +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 (
- - - - - + {archiveExcerptData.archiveList.map((it, index) => ( + + ))}
); }; diff --git a/bookduck/src/components/RecordingPage/ReviewView.jsx b/bookduck/src/components/RecordingPage/ReviewView.jsx index dc3942be..9696f26b 100644 --- a/bookduck/src/components/RecordingPage/ReviewView.jsx +++ b/bookduck/src/components/RecordingPage/ReviewView.jsx @@ -1,14 +1,31 @@ +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 (
- - - - - - + {archiveReviewData.archiveList.map((it, index) => ( + + ))}
); }; diff --git a/bookduck/src/components/RecordingPage/TotalView.jsx b/bookduck/src/components/RecordingPage/TotalView.jsx index 993b1f79..3eda0386 100644 --- a/bookduck/src/components/RecordingPage/TotalView.jsx +++ b/bookduck/src/components/RecordingPage/TotalView.jsx @@ -1,14 +1,27 @@ +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), + }); -const TotalView = ({ archiveData }) => { - console.log(archiveData.archiveList); return (
{archiveData.archiveList.map((it, index) => ( <> {it.type === "EXCERPT" ? ( { /> ) : ( { navigate("/selectBook"); }; - const archiveType = - tab === "전체보기" ? "ALL" : (tab = "발췌" ? "EXCERPT" : "REVIEW"); - - const userId = getUserId(); - - const { - data: archiveData, - isError, - error, - } = useQuery({ - queryKey: ["archiveData"], - queryFn: () => getExtractReview(userId, archiveType, 0, 20), - }); - return ( <> @@ -48,9 +34,9 @@ const ArchivePage = () => { borderWidth="3rem" />
- {tab === "전체보기" && } - {tab === "발췌" && } - {tab === "감상평" && } + {tab === "전체보기" && } + {tab === "발췌" && } + {tab === "감상평" && }
From 555d2529d7d8e2e79ffe050705441adf476b5e4c Mon Sep 17 00:00:00 2001 From: YoungseoChoi23 Date: Sat, 23 Nov 2024 12:31:01 +0900 Subject: [PATCH 4/8] =?UTF-8?q?=E2=9C=A8=20Feat=20:=20=EA=B8=B0=EB=A1=9D?= =?UTF-8?q?=20=EC=95=84=EC=B9=B4=EC=9D=B4=EB=B8=8C=20=EC=83=81=EC=84=B8=20?= =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bookduck/src/App.jsx | 6 +- bookduck/src/api/archive.js | 10 ++ .../RecordingPage/ArchiveDetailComponent.jsx | 127 ++++++++++++++++++ .../RecordingPage/AuthorComponent.jsx | 16 ++- .../RecordingPage/ExtractComponents.jsx | 24 +++- .../RecordingPage/ExtractDetailComponent.jsx | 21 ++- .../components/RecordingPage/ExtractView.jsx | 2 +- .../RecordingPage/ReviewComponents.jsx | 23 +++- .../RecordingPage/ReviewDetailComponent.jsx | 36 ++--- .../components/RecordingPage/ReviewView.jsx | 2 +- .../components/RecordingPage/TotalView.jsx | 2 +- .../pages/RecordingPage/ArchiveDetailPage.jsx | 18 ++- 12 files changed, 231 insertions(+), 56 deletions(-) create mode 100644 bookduck/src/components/RecordingPage/ArchiveDetailComponent.jsx diff --git a/bookduck/src/App.jsx b/bookduck/src/App.jsx index 30a94d44..7dd2f1c0 100644 --- a/bookduck/src/App.jsx +++ b/bookduck/src/App.jsx @@ -33,9 +33,9 @@ function App() { } /> } /> - } /> - } /> - } /> + } /> + } /> + } /> } /> } /> diff --git a/bookduck/src/api/archive.js b/bookduck/src/api/archive.js index 8326f242..dc37f836 100644 --- a/bookduck/src/api/archive.js +++ b/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, { 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 ( +
+
+
+
+
+ {formattedDate(archiveDetailData.excerpt.createdTime)} ( + {archiveDetailData.excerpt.modifiedTime && + formattedDate(archiveDetailData.excerpt.modifiedTime)}{" "} + 수정) / + {archiveDetailData.excerpt.visibility === "PUBLIC" + ? "공개" + : "비공개"} +
+
+ {archiveDetailData.excerpt.pageNumber}p +
+
+
+ {archiveDetailData.excerpt.excerptContent} +
+
+ heart_gray + share_gray { + setBottomSheetShow(true); + }} + /> +
+
+
+ +
+
+ 내보내기 + + 취소 + +
+
+ + + + + +
+
+ +
+ ); +}; 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 ( <>
-
- img_template +
+ img_template
- 안녕하세요 + {archiveDetailData.title} +
+
+ {archiveDetailData.author}
-
지은이 / 출판사 / 2024
diff --git a/bookduck/src/components/RecordingPage/ExtractComponents.jsx b/bookduck/src/components/RecordingPage/ExtractComponents.jsx index cdbdbb62..2816592b 100644 --- a/bookduck/src/components/RecordingPage/ExtractComponents.jsx +++ b/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 ( -
navigate("/extract-archive-detail")} - className="cursor-pointer" - > +
{page}p
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 (
-
2024.09.20 / 비공개
-
54p
+
+ {formattedDate(archiveDetailData.excerpt.createdTime)} + {archiveDetailData.excerpt.visibility === "PRVATE" && + "/ 나만보기"} +
+
+ {archiveDetailData.excerpt.pageNumber}p +
- 한번 피면 끝장을 보게 되는 책이다. 중간에 덮을 수가 없다. 초반엔 - 전기적 사실을 통해 배울 점들을 기대하며 천천히 읽어나가다 예상치 의 - 정수가 드러나기 시작한다. + {archiveDetailData.excerpt.excerptContent}
heart_gray diff --git a/bookduck/src/components/RecordingPage/ExtractView.jsx b/bookduck/src/components/RecordingPage/ExtractView.jsx index a8b130e8..6bd7d047 100644 --- a/bookduck/src/components/RecordingPage/ExtractView.jsx +++ b/bookduck/src/components/RecordingPage/ExtractView.jsx @@ -15,7 +15,7 @@ const ExtractView = () => { }); return ( -
+
{archiveExcerptData.archiveList.map((it, index) => ( { 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 ( -
navigate("/review-archive-detail")} - className="cursor-pointer " - > +
{ +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 (
-
2024.09.20 / 비공개
-
걸작. 최고다.
+
+ {formattedDate(archiveDetailData.excerpt.createdTime)} + {archiveDetailData.review.visibility === "PRVATE" && "/ 나만보기"} +
+
+ {archiveDetailData.review.reviewTitle} +
- 한번 피면 끝장을 보게 되는 책이다. 중간에 덮을 수가 없다. 초반엔 - 전기적 사실을 통해 배울 점들을 기대하며 천천히 읽어나가다 예상치 - 못한 어떤 지점에서 골이 띵할 정도의 과격한 유턴을 하게 되는데, - 그때부터 이 책의 정수가 드러나기 시작한다. 한번 피면 끝장을 보게 - 되는 책이다. 중간에 덮을 수가 없다. 초반엔 전기적 사실을 통해 배울 - 점들을 기대하며 천천히 읽어나가다 예상치 못한 어떤 지점에서 골이 - 띵할 정도의 과격한 유턴을 하게 되는데, 그때부터 이 책의 정수가 - 드러나기 시작한다. 한번 피면 끝장을 보게 되는 책이다. 중간에 덮을 - 수가 없다. 초반엔 전기적 사실을 통해 배울 점들을 기대하며 천천히 - 읽어나가다 예상치 못한 어떤 지점에서 골이 띵할 정도의 과격한 유턴을 - 하게 되는데, 그때부터 이 책의 정수가 드러나기 시작한다. 한번 피면 - 끝장을 보게 되는 책이다. 중간에 덮을 수가 없다. 초반엔 전기적 사실을 - 통해 배울 점들을 기대하며 천천히 읽어나가다 예상치 못한 어떤 - 지점에서 골이 띵할 정도의 과격한 유턴을 하게 되는데, 그때부터 이 - 책의 정수가 드러나기 시작한다. 한번 피면 끝장을 보게 되는 책이다. - 중간에 덮을 수가 없다. 초반엔 전기적 사실을 통해 배울 점들을 - 기대하며 천천히 읽어나가다 예상치 못한 어떤 지점에서 골이 띵할 - 정도의 과격한 유턴을 하게 되는데, 그때부터 이 책의 정수가 드러나기 - 시작한다. + {archiveDetailData.review.reviewContent}
{ queryFn: () => getExtractReview(userId, "REVIEW", 0, 20), }); return ( -
+
{archiveReviewData.archiveList.map((it, index) => ( { }); return ( -
+
{archiveData.archiveList.map((it, index) => ( <> {it.type === "EXCERPT" ? ( 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 = () => {
- {pathname.split("/")[1] === "extract-archive-detail" && ( - + {pathname.split("/")[1] === "excerpt-archive-detail" && ( + )} {pathname.split("/")[1] === "review-archive-detail" && ( - + )} {pathname.split("/")[1] === "total-archive-detail" && ( <> - - + + )} - +
Date: Thu, 28 Nov 2024 00:05:11 +0900 Subject: [PATCH 5/8] =?UTF-8?q?=E2=9C=A8=20Feat=20:=20=EB=A6=AC=EB=B7=B0?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=B0=EA=B2=BD?= =?UTF-8?q?=EC=83=89=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/RecordingPage/ExtractComponents.jsx | 9 ++++++++- .../src/components/RecordingPage/ReviewComponents.jsx | 3 ++- .../components/RecordingPage/ReviewDetailComponent.jsx | 9 +++++++-- bookduck/src/components/RecordingPage/ReviewView.jsx | 1 + bookduck/src/components/RecordingPage/TotalView.jsx | 3 ++- bookduck/src/pages/RecordingPage/CardDecorationPage.jsx | 8 ++++---- 6 files changed, 24 insertions(+), 9 deletions(-) diff --git a/bookduck/src/components/RecordingPage/ExtractComponents.jsx b/bookduck/src/components/RecordingPage/ExtractComponents.jsx index 2816592b..51292e99 100644 --- a/bookduck/src/components/RecordingPage/ExtractComponents.jsx +++ b/bookduck/src/components/RecordingPage/ExtractComponents.jsx @@ -2,7 +2,14 @@ import { useNavigate } from "react-router-dom"; import { getDetailExtractReview } from "../../api/archive"; import { getUserId } from "../../api/oauth"; -const ExtractComponents = ({ page, content, title, author, excerptId }) => { +const ExtractComponents = ({ + page, + content, + title, + author, + excerptId, + color, +}) => { const navigate = useNavigate(); const handleOnClick = async () => { diff --git a/bookduck/src/components/RecordingPage/ReviewComponents.jsx b/bookduck/src/components/RecordingPage/ReviewComponents.jsx index 5d64d8f9..d99f8bd6 100644 --- a/bookduck/src/components/RecordingPage/ReviewComponents.jsx +++ b/bookduck/src/components/RecordingPage/ReviewComponents.jsx @@ -11,6 +11,7 @@ const ReviewComponents = ({ reviewTitle, title, author, + color, }) => { const navigate = useNavigate(); const { reviewColor } = useReviewColorStore(); @@ -33,7 +34,7 @@ const ReviewComponents = ({ return (
{ const [bottomSheetShow, setBottomSheetShow] = useState(false); @@ -28,10 +30,13 @@ const ReviewDetailComponent = ({ archiveDetailData }) => { return (
-
+
- {formattedDate(archiveDetailData.excerpt.createdTime)} + {formattedDate(archiveDetailData.review.createdTime)} {archiveDetailData.review.visibility === "PRVATE" && "/ 나만보기"}
diff --git a/bookduck/src/components/RecordingPage/ReviewView.jsx b/bookduck/src/components/RecordingPage/ReviewView.jsx index 41b8bf93..04995150 100644 --- a/bookduck/src/components/RecordingPage/ReviewView.jsx +++ b/bookduck/src/components/RecordingPage/ReviewView.jsx @@ -24,6 +24,7 @@ const ReviewView = () => { reviewTitle={it.data.reviewTitle} title={it.title} author={it.author} + color={it.data.color} /> ))}
diff --git a/bookduck/src/components/RecordingPage/TotalView.jsx b/bookduck/src/components/RecordingPage/TotalView.jsx index 1d97a4da..11c189b0 100644 --- a/bookduck/src/components/RecordingPage/TotalView.jsx +++ b/bookduck/src/components/RecordingPage/TotalView.jsx @@ -14,7 +14,7 @@ const TotalView = () => { queryKey: ["archiveData"], queryFn: () => getExtractReview(userId, "ALL", 0, 20), }); - + console.log(archiveData); return (
{archiveData.archiveList.map((it, index) => ( @@ -32,6 +32,7 @@ const TotalView = () => { {
From d3e9367a4e04b0a4982ffa3b0584df3cf066fde4 Mon Sep 17 00:00:00 2001 From: YoungseoChoi23 Date: Thu, 28 Nov 2024 01:41:29 +0900 Subject: [PATCH 6/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20:=20Extract?= =?UTF-8?q?Component=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20prop=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LibraryPage/BookListPage.jsx | 50 ++++++++++++------- .../RecordingPage/ExtractComponents.jsx | 46 +++++++++++------ .../components/RecordingPage/ExtractView.jsx | 9 +--- .../components/RecordingPage/TotalView.jsx | 9 +--- .../src/components/common/BookListView.jsx | 4 -- 5 files changed, 65 insertions(+), 53 deletions(-) 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) => ( 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/ExtractComponents.jsx b/bookduck/src/components/RecordingPage/ExtractComponents.jsx index 51292e99..043bce9c 100644 --- a/bookduck/src/components/RecordingPage/ExtractComponents.jsx +++ b/bookduck/src/components/RecordingPage/ExtractComponents.jsx @@ -2,14 +2,17 @@ import { useNavigate } from "react-router-dom"; import { getDetailExtractReview } from "../../api/archive"; import { getUserId } from "../../api/oauth"; -const ExtractComponents = ({ - page, - content, - title, - author, - excerptId, - color, -}) => { +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 () => { @@ -30,13 +33,26 @@ const ExtractComponents = ({ return (
-
{page}p
-
-
{content}
-
- {title} / {author} -
-
+ {!archive && createdDate ? ( + <> +
+
{createdDate}
+
+ {excerptData?.pageNumber || "54"}p +
+
+ + ) : ( + <> +
{page}p
+
+
{content}
+
+ {title && author && `${title} / ${author}`} +
+
+ + )}
); diff --git a/bookduck/src/components/RecordingPage/ExtractView.jsx b/bookduck/src/components/RecordingPage/ExtractView.jsx index 6bd7d047..88fea550 100644 --- a/bookduck/src/components/RecordingPage/ExtractView.jsx +++ b/bookduck/src/components/RecordingPage/ExtractView.jsx @@ -17,14 +17,7 @@ const ExtractView = () => { return (
{archiveExcerptData.archiveList.map((it, index) => ( - + ))}
); diff --git a/bookduck/src/components/RecordingPage/TotalView.jsx b/bookduck/src/components/RecordingPage/TotalView.jsx index 11c189b0..4377f74a 100644 --- a/bookduck/src/components/RecordingPage/TotalView.jsx +++ b/bookduck/src/components/RecordingPage/TotalView.jsx @@ -20,14 +20,7 @@ const TotalView = () => { {archiveData.archiveList.map((it, index) => ( <> {it.type === "EXCERPT" ? ( - + ) : ( { return (
coverEx From 17e00f7191778bfe24709163b0be9db688947b29 Mon Sep 17 00:00:00 2001 From: YoungseoChoi23 Date: Thu, 28 Nov 2024 01:47:59 +0900 Subject: [PATCH 7/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20:=20?= =?UTF-8?q?=EB=A6=AC=EB=B7=B0=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20prop?= =?UTF-8?q?=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecordingPage/ReviewComponents.jsx | 17 ++++++++--------- .../src/components/RecordingPage/ReviewView.jsx | 11 +---------- .../src/components/RecordingPage/TotalView.jsx | 11 +---------- 3 files changed, 10 insertions(+), 29 deletions(-) diff --git a/bookduck/src/components/RecordingPage/ReviewComponents.jsx b/bookduck/src/components/RecordingPage/ReviewComponents.jsx index d99f8bd6..09604d95 100644 --- a/bookduck/src/components/RecordingPage/ReviewComponents.jsx +++ b/bookduck/src/components/RecordingPage/ReviewComponents.jsx @@ -4,15 +4,14 @@ import { useEffect } from "react"; import { getUserId } from "../../api/oauth"; import { getDetailExtractReview } from "../../api/archive"; -const ReviewComponents = ({ - page, - content, - reviewId, - reviewTitle, - title, - author, - color, -}) => { +const ReviewComponents = ({ reviewData }) => { + 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 navigate = useNavigate(); const { reviewColor } = useReviewColorStore(); diff --git a/bookduck/src/components/RecordingPage/ReviewView.jsx b/bookduck/src/components/RecordingPage/ReviewView.jsx index 04995150..00779a74 100644 --- a/bookduck/src/components/RecordingPage/ReviewView.jsx +++ b/bookduck/src/components/RecordingPage/ReviewView.jsx @@ -16,16 +16,7 @@ const ReviewView = () => { return (
{archiveReviewData.archiveList.map((it, index) => ( - + ))}
); diff --git a/bookduck/src/components/RecordingPage/TotalView.jsx b/bookduck/src/components/RecordingPage/TotalView.jsx index 4377f74a..d1063643 100644 --- a/bookduck/src/components/RecordingPage/TotalView.jsx +++ b/bookduck/src/components/RecordingPage/TotalView.jsx @@ -22,16 +22,7 @@ const TotalView = () => { {it.type === "EXCERPT" ? ( ) : ( - + )} ))} From 9446c5853dc4e008cc1008779306b06bbbc5cf9f Mon Sep 17 00:00:00 2001 From: YoungseoChoi23 Date: Thu, 28 Nov 2024 01:53:15 +0900 Subject: [PATCH 8/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20:=20?= =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20pro?= =?UTF-8?q?p=20=EC=88=98=EC=A0=95,=20createdDate=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/RecordingPage/ReviewComponents.jsx | 11 +++++++++-- bookduck/src/components/RecordingPage/ReviewView.jsx | 2 +- bookduck/src/components/RecordingPage/TotalView.jsx | 2 +- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/bookduck/src/components/RecordingPage/ReviewComponents.jsx b/bookduck/src/components/RecordingPage/ReviewComponents.jsx index 09604d95..b39af752 100644 --- a/bookduck/src/components/RecordingPage/ReviewComponents.jsx +++ b/bookduck/src/components/RecordingPage/ReviewComponents.jsx @@ -4,7 +4,7 @@ import { useEffect } from "react"; import { getUserId } from "../../api/oauth"; import { getDetailExtractReview } from "../../api/archive"; -const ReviewComponents = ({ reviewData }) => { +const ReviewComponents = ({ reviewData, archive = false }) => { console.log(reviewData); const content = reviewData?.data.reviewContent; const reviewId = reviewData?.data.reviewId; @@ -12,6 +12,10 @@ const ReviewComponents = ({ reviewData }) => { 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(); @@ -38,6 +42,9 @@ const ReviewComponents = ({ reviewData }) => { !reviewColor && "bg-gray-400" } shadow-custom`} > + {!archive && createdDate && ( +
{createdDate}
+ )}
{reviewTitle} @@ -45,7 +52,7 @@ const ReviewComponents = ({ reviewData }) => {
{content}
- {title} / {author} + {title && author && `${title} / ${author}`}
diff --git a/bookduck/src/components/RecordingPage/ReviewView.jsx b/bookduck/src/components/RecordingPage/ReviewView.jsx index 00779a74..650e820e 100644 --- a/bookduck/src/components/RecordingPage/ReviewView.jsx +++ b/bookduck/src/components/RecordingPage/ReviewView.jsx @@ -16,7 +16,7 @@ const ReviewView = () => { return (
{archiveReviewData.archiveList.map((it, index) => ( - + ))}
); diff --git a/bookduck/src/components/RecordingPage/TotalView.jsx b/bookduck/src/components/RecordingPage/TotalView.jsx index d1063643..adcecd6f 100644 --- a/bookduck/src/components/RecordingPage/TotalView.jsx +++ b/bookduck/src/components/RecordingPage/TotalView.jsx @@ -22,7 +22,7 @@ const TotalView = () => { {it.type === "EXCERPT" ? ( ) : ( - + )} ))}