✨feat: 폰트 변경 적용

MoneyMakersClub · Dec 3, 2024 · b4cc026 · b4cc026
1 parent 2b747e6
commit b4cc026
Show file tree

Hide file tree

Showing 13 changed files with 139 additions and 44 deletions.
diff --git a/bookduck/src/components/RecordingPage/ExtractComponents.jsx b/bookduck/src/components/RecordingPage/ExtractComponents.jsx
@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { getDetailExtractReview } from "../../api/archive";
 import { getUserId } from "../../api/oauth";
 
-const ExtractComponents = ({ excerptData, archive = false }) => {
+const ExtractComponents = ({ excerptData, archive = false, font }) => {
   console.log(excerptData);
   const createdDate = excerptData?.data.createdTime
     .split("T")[0]
@@ -37,18 +37,24 @@ const ExtractComponents = ({ excerptData, archive = false }) => {
         {!archive && createdDate ? (
           <>
             <div className="flex justify-between items-center">
-              <div className="text-c2 text-gray-400">{createdDate}</div>
-              <div className="text-right justify-end items-end text-b2 text-gray-400">
+              <div className={`text-c2 text-gray-400 ${font}`}>
+                {createdDate}
+              </div>
+              <div
+                className={`text-right justify-end items-end text-b2 text-gray-400 ${font}`}
+              >
                 {excerptData?.pageNumber || "54"}p
               </div>
             </div>
           </>
         ) : (
           <>
-            <div className="text-right text-b2 text-gray-400">{page}p</div>
+            <div className={`text-right text-b2 text-gray-400 ${font}`}>
+              {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">
+              <div className={`text-b2 text-gray-800 ${font}`}>{content} </div>
+              <div className={`${font} text-c2 text-gray-400`}>
                 {title && author && `${title} / ${author}`}
               </div>
             </div>

diff --git 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 = ({ archiveDetailData }) => {
+const ExtractDetailComponent = ({ archiveDetailData, font }) => {
   const [bottomSheetShow, setBottomSheetShow] = useState(false);
   const [visible, setVisible] = useState(false);
 
@@ -29,16 +29,16 @@ const ExtractDetailComponent = ({ archiveDetailData }) => {
       <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">
+            <div className={`text-c1 text-gray-400 ${font}`}>
               {formattedDate(archiveDetailData.excerpt.createdTime)}
               {archiveDetailData.excerpt.visibility === "PRVATE" &&
                 "/ 나만보기"}
             </div>
-            <div className="text-b2 text-gray-400">
+            <div className={`text-b2 text-gray-400 ${font}`}>
               {archiveDetailData.excerpt.pageNumber}p
             </div>
           </div>
-          <div className="text-b2 text-gray-800  ">
+          <div className={`text-b2 text-gray-800 ${font}`}>
             {archiveDetailData.excerpt.excerptContent}
           </div>
           <div className=" flex gap-4 justify-end">

diff --git a/bookduck/src/components/RecordingPage/ExtractView.jsx b/bookduck/src/components/RecordingPage/ExtractView.jsx
@@ -3,7 +3,7 @@ import { getExtractReview } from "../../api/archive";
 import { getUserId } from "../../api/oauth";
 import ExtractComponents from "./ExtractComponents";
 
-const ExtractView = () => {
+const ExtractView = ({ font }) => {
   const userId = getUserId();
   const {
     data: archiveExcerptData,
@@ -17,7 +17,12 @@ const ExtractView = () => {
   return (
     <div className="flex flex-col gap-[1rem] items-center   mt-[1rem] ">
       {archiveExcerptData.archiveList.map((it, index) => (
-        <ExtractComponents key={index} excerptData={it} archive={true} />
+        <ExtractComponents
+          key={index}
+          excerptData={it}
+          archive={true}
+          font={font}
+        />
       ))}
     </div>
   );

diff --git a/bookduck/src/components/RecordingPage/ExtractWritingComponent.jsx b/bookduck/src/components/RecordingPage/ExtractWritingComponent.jsx
@@ -11,6 +11,7 @@ const ExtractWritingComponent = ({
   pageInputValue,
   setPrivateShow,
   privateShow,
+  font,
 }) => {
   const handleToggle = () => {
     setPrivateShow(!privateShow);
@@ -60,15 +61,15 @@ const ExtractWritingComponent = ({
               <div
                 className={`${
                   pageInputValue ? "text-gray-800" : "text-gray-400"
-                }`}
+                } ${font}`}
               >
                 {pageInputValue ? pageInputValue : "페이지"}
               </div>
-              <div className="text-gray-400">p</div>
+              <div className={`text-gray-400 ${font}`}>p</div>
             </div>
             <textarea
               value={inputValue}
-              className="w-[20.5625rem] h-[6rem] mt-2 bg-transparent text-b2 appearance-none outline-none resize-none"
+              className={`w-[20.5625rem] h-[6rem] mt-2 bg-transparent text-b2 appearance-none outline-none resize-none ${font}`}
               placeholder="책의 구절을 입력하세요"
               readOnly
             />

diff --git 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, archive = false }) => {
+const ReviewComponents = ({ reviewData, archive = false, font }) => {
   console.log(reviewData);
   const archiveId = reviewData.archiveId;
   const content = reviewData?.data.reviewContent;
@@ -45,15 +45,17 @@ const ReviewComponents = ({ reviewData, archive = false }) => {
         } shadow-custom`}
       >
         {!archive && createdDate && (
-          <div className="text-c2 text-[#ffffff99]">{createdDate}</div>
+          <div className={`text-c2 text-[#ffffff99] ${font}`}>
+            {createdDate}
+          </div>
         )}
         <div className="flex flex-col gap-[0.25rem]">
-          <div className="text-st text-[#FFFFFF] font-semibold">
+          <div className={`text-st text-[#FFFFFF] font-semibold ${font}`}>
             {reviewTitle}
           </div>
-          <div className="text-b2 text-[#FFFFFF]">{content}</div>
+          <div className={`text-b2 text-[#FFFFFF] ${font}`}>{content}</div>
         </div>
-        <div className="text-c2 text-[#ffffff99]">
+        <div className={`text-c2 text-[#ffffff99] ${font}`}>
           {title && author && `${title} / ${author}`}
         </div>
       </div>

diff --git a/bookduck/src/components/RecordingPage/ReviewDetailComponent.jsx b/bookduck/src/components/RecordingPage/ReviewDetailComponent.jsx
@@ -11,8 +11,7 @@ import link from "../../assets/recordingPage/link.svg";
 import BottomSheetModal from "../common/BottomSheetModal";
 import BottomSheetMenuComponent from "../common/BottomSheetMenuComponent";
 
-
-const ReviewDetailComponent = ({ archiveDetailData }) => {
+const ReviewDetailComponent = ({ archiveDetailData, font }) => {
   const [bottomSheetShow, setBottomSheetShow] = useState(false);
   const [visible, setVisible] = useState(false);
 
@@ -34,14 +33,14 @@ const ReviewDetailComponent = ({ archiveDetailData }) => {
         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 ">
+          <div className={`text-c1 text-white ${font}`}>
             {formattedDate(archiveDetailData.review.createdTime)}
             {archiveDetailData.review.visibility === "PRVATE" && "/ 나만보기"}
           </div>
-          <div className="text-st font-semibold text-white ">
+          <div className={`text-st font-semibold text-white ${font}`}>
             {archiveDetailData.review.reviewTitle}
           </div>
-          <div className="text-b2 text-white ">
+          <div className={`text-b2 text-white ${font}`}>
             {archiveDetailData.review.reviewContent}
           </div>
           <div className="flex gap-4 justify-end">

diff --git a/bookduck/src/components/RecordingPage/ReviewView.jsx b/bookduck/src/components/RecordingPage/ReviewView.jsx
@@ -3,7 +3,7 @@ import { getExtractReview } from "../../api/archive";
 import { getUserId } from "../../api/oauth";
 import ReviewComponents from "./ReviewComponents";
 
-const ReviewView = () => {
+const ReviewView = ({ font }) => {
   const userId = getUserId();
   const {
     data: archiveReviewData,
@@ -16,7 +16,12 @@ const ReviewView = () => {
   return (
     <div className="flex flex-col gap-[1rem] items-center mt-[1rem]">
       {archiveReviewData.archiveList.map((it, index) => (
-        <ReviewComponents key={index} reviewData={it} archive={true} />
+        <ReviewComponents
+          key={index}
+          reviewData={it}
+          archive={true}
+          font={font}
+        />
       ))}
     </div>
   );

diff --git a/bookduck/src/components/RecordingPage/ReviewWritingComponent.jsx b/bookduck/src/components/RecordingPage/ReviewWritingComponent.jsx
@@ -15,6 +15,7 @@ const ReviewWritingComponent = ({
   reviewPrivateShow,
   setReviewPrivateShow,
   handleDecoration,
+  font,
 }) => {
   const { reviewColor } = useReviewColorStore();
   const navigate = useNavigate();
@@ -55,11 +56,11 @@ const ReviewWritingComponent = ({
               <input
                 value={titleInputValue}
                 placeholder="제목 (25자 이내로 작성하세요)"
-                className="text-b1 font-semibold bg-transparent"
+                className={`text-b1 font-semibold bg-transparent ${font}`}
               />
               <textarea
                 value={inputValue}
-                className="w-[20.5625rem] h-[9rem] mt-2 bg-transparent text-b2 appearance-none outline-none resize-none"
+                className={`w-[20.5625rem] h-[9rem] mt-2 bg-transparent text-b2 appearance-none outline-none resize-none ${font}`}
                 placeholder="책에 대한 자유로운 감상을 기록하세요"
               />
             </div>

diff --git a/bookduck/src/components/RecordingPage/TotalView.jsx b/bookduck/src/components/RecordingPage/TotalView.jsx
@@ -4,7 +4,7 @@ import ReviewComponents from "./ReviewComponents";
 import { getExtractReview } from "../../api/archive";
 import { getUserId } from "../../api/oauth";
 
-const TotalView = () => {
+const TotalView = ({ font }) => {
   const userId = getUserId();
   const {
     data: archiveData,
@@ -20,9 +20,19 @@ const TotalView = () => {
       {archiveData.archiveList.map((it, index) => (
         <>
           {it.type === "EXCERPT" ? (
-            <ExtractComponents key={index} excerptData={it} archive={true} />
+            <ExtractComponents
+              key={index}
+              excerptData={it}
+              archive={true}
+              font={font}
+            />
           ) : (
-            <ReviewComponents key={index} reviewData={it} archive={true} />
+            <ReviewComponents
+              key={index}
+              reviewData={it}
+              archive={true}
+              font={font}
+            />
           )}
         </>
       ))}

diff --git a/bookduck/src/components/RecordingPage/WritingTemplate.jsx b/bookduck/src/components/RecordingPage/WritingTemplate.jsx
@@ -2,7 +2,7 @@ const WritingTemplate = ({ height, children }) => {
   return (
     <div
       style={{ height: height }}
-      className="w-[22.5625rem] px-4 py-5 rounded-[0.5rem] bg-gray-50"
+      className={`w-[22.5625rem] px-4 py-5 rounded-[0.5rem] bg-gray-50 `}
     >
       {children}
     </div>

diff --git a/bookduck/src/pages/RecordingPage/ArchiveDetailPage.jsx b/bookduck/src/pages/RecordingPage/ArchiveDetailPage.jsx
@@ -1,4 +1,6 @@
 import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { get } from "../../api/example";
 import AuthorComponent from "../../components/RecordingPage/AuthorComponent";
 import CloseButton from "../../components/RecordingPage/CloseButton";
 import Header2 from "../../components/RecordingPage/Header2";
@@ -10,6 +12,20 @@ import BottomSheetModal2 from "../../components/BookInfoPage/BottomSheetModal2";
 import { delExtractReview } from "../../api/archive";
 
 const ArchiveDetail = () => {
+  const {
+    data: font,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["fontSettings"],
+    queryFn: async () => {
+      const response = await get(`/settings`);
+      return response.recordFont;
+    },
+    refetchOnMount: true,
+    refetchOnWindowFocus: false,
+  });
+
   const pathname = window.location.pathname;
   const [isHeightExceeded, setIsHeightExceeded] = useState(false);
   const [visibleMenu, setVisibleMenu] = useState(false);
@@ -76,16 +92,28 @@ const ArchiveDetail = () => {
               <ExtractDetailComponent archiveDetailData={archiveDetailData} />
             )}
             {pathname.split("/")[1] === "review-archive-detail" && (
-              <ReviewDetailComponent archiveDetailData={archiveDetailData} />
+              <ReviewDetailComponent
+                archiveDetailData={archiveDetailData}
+                font={font}
+              />
             )}
             {pathname.split("/")[1] === "total-archive-detail" && (
               <>
-                <ExtractDetailComponent archiveDetailData={archiveDetailData} />
-                <ReviewDetailComponent archiveDetailData={archiveDetailData} />
+                <ExtractDetailComponent
+                  archiveDetailData={archiveDetailData}
+                  font={font}
+                />
+                <ReviewDetailComponent
+                  archiveDetailData={archiveDetailData}
+                  font={font}
+                />
               </>
             )}
 
-            <AuthorComponent archiveDetailData={archiveDetailData} />
+            <AuthorComponent
+              archiveDetailData={archiveDetailData}
+              font={font}
+            />
           </div>
           <div
             className={`mt-8 ${

diff --git a/bookduck/src/pages/RecordingPage/ArchivePage.jsx b/bookduck/src/pages/RecordingPage/ArchivePage.jsx
@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { get } from "../../api/example";
 import BottomNavbar from "../../components/common/BottomNavbar";
 import Header from "../../components/RecordingPage/Header";
 import TotalView from "../../components/RecordingPage/TotalView";
@@ -12,6 +14,22 @@ const ArchivePage = () => {
   const [tab, setTab] = useState("전체보기");
   const navigate = useNavigate();
 
+  const {
+    data: font,
+    isLoading,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: ["fontSettings"],
+    queryFn: async () => {
+      const response = await get(`/settings`);
+      console.log(response);
+      return response.recordFont;
+    },
+    refetchOnMount: true,
+    refetchOnWindowFocus: false,
+  });
+
   const handleRecording = () => {
     navigate("/selectBook");
   };
@@ -28,9 +46,9 @@ const ArchivePage = () => {
           borderWidth="3rem"
         />
         <div>
-          {tab === "전체보기" && <TotalView />}
-          {tab === "발췌" && <ExtractView />}
-          {tab === "감상평" && <ReviewView />}
+          {tab === "전체보기" && <TotalView font={font} />}
+          {tab === "발췌" && <ExtractView font={font} />}
+          {tab === "감상평" && <ReviewView font={font} />}
           <div className="h-[6rem] bg-transparent"></div>
         </div>
         <div className="fixed bottom-[6.38rem] flex justify-end w-[24.5625rem] cursor-pointer">