diff --git a/bookduck/src/pages/CharacterPage/CharacterPage.jsx b/bookduck/src/pages/CharacterPage/CharacterPage.jsx
index 84254b76..84246161 100644
--- a/bookduck/src/pages/CharacterPage/CharacterPage.jsx
+++ b/bookduck/src/pages/CharacterPage/CharacterPage.jsx
@@ -87,8 +87,9 @@ const CharacterPage = () => {
diff --git a/bookduck/src/pages/CharacterPage/MyBadgePage.jsx b/bookduck/src/pages/CharacterPage/MyBadgePage.jsx
index 1cba273e..00722e17 100644
--- a/bookduck/src/pages/CharacterPage/MyBadgePage.jsx
+++ b/bookduck/src/pages/CharacterPage/MyBadgePage.jsx
@@ -1,13 +1,44 @@
+import { useState, useEffect } from "react";
import BadgeHeader from "../../components/CharacterPage/BadgeHeader";
import BadgeList from "../../components/CharacterPage/BadgeList";
+import { getBadgeLists } from "../../api/character";
const MyBadgePage = () => {
+ const [badgeData, setBadgeData] = useState(null);
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const res = await getBadgeLists();
+ console.log("조회 성공: ", res);
+ setBadgeData(res);
+ } catch (err) {
+ console.error("오류 발생: ", err);
+ }
+ };
+ fetchData();
+ }, []);
return (
);
};
diff --git a/bookduck/src/pages/StatisticsPage/CharacterExportPage.jsx b/bookduck/src/pages/StatisticsPage/CharacterExportPage.jsx
index ffa53909..b3d671d5 100644
--- a/bookduck/src/pages/StatisticsPage/CharacterExportPage.jsx
+++ b/bookduck/src/pages/StatisticsPage/CharacterExportPage.jsx
@@ -1,10 +1,10 @@
-import Header3 from "../../components/common/Header3";
+import ExportHeader from "../../components/StatisticsPage/ExportHeader";
import ExportCharacter from "../../components/StatisticsPage/ExportCharacter";
const CharacterExportPage = () => {
return (
-
+
diff --git a/bookduck/src/pages/StatisticsPage/StatisticsPage.jsx b/bookduck/src/pages/StatisticsPage/StatisticsPage.jsx
index e86a8e3a..7b749ec6 100644
--- a/bookduck/src/pages/StatisticsPage/StatisticsPage.jsx
+++ b/bookduck/src/pages/StatisticsPage/StatisticsPage.jsx
@@ -1,4 +1,5 @@
import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
import Header3 from "../../components/common/Header3";
import RecordCalender from "../../components/StatisticsPage/RecordCalender";
import Divider2 from "../../components/common/Divider2";
@@ -9,18 +10,16 @@ import PreferredGenre from "../../components/StatisticsPage/PreferredGenre";
import MonthlyReading from "../../components/StatisticsPage/MonthlyReading";
import UserCard from "../../components/StatisticsPage/UserCard";
import { getUserStatisticsInfo } from "../../api/statistics";
-import { getUserId } from "../../api/oauth";
+// import { getUserId } from "../../api/oauth";
const StatisticsPage = () => {
+ const { userId } = useParams();
const [userData, setUserData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
- const userId = getUserId();
- // const userId = 1;
-
const res = await getUserStatisticsInfo(userId);
console.log("조회성공: ", res);
setUserData(res);
@@ -31,7 +30,7 @@ const StatisticsPage = () => {
}
};
fetchData();
- }, []);
+ }, [userId]);
if (loading) {
return
;
}
@@ -43,7 +42,7 @@ const StatisticsPage = () => {
{userData?.isFirstHalf ? "상반기" : "하반기"} 기록은 총{" "}
- {userData.excerptCount + userData.bookRecordCount}
+ {userData?.excerptCount + userData?.bookRecordCount}
개!
@@ -58,12 +57,12 @@ const StatisticsPage = () => {
-
+
{/* 같은 작가의 작품을 최소 2권 이상을 읽어야 ‘선호하는 작가' 카드가 보임 */}
diff --git a/bookduck/src/pages/StatisticsPage/SummaryExportPage.jsx b/bookduck/src/pages/StatisticsPage/SummaryExportPage.jsx
new file mode 100644
index 00000000..755fada7
--- /dev/null
+++ b/bookduck/src/pages/StatisticsPage/SummaryExportPage.jsx
@@ -0,0 +1,45 @@
+import { useRef } from "react";
+import html2canvas from "html2canvas";
+import ExportHeader from "../../components/StatisticsPage/ExportHeader";
+import SummaryExport from "../../components/StatisticsPage/SummaryExport";
+const SummaryExportPage = () => {
+ const exportRef = useRef(null);
+
+ const handleSaveImage = async () => {
+ if (exportRef.current) {
+ try {
+ const canvas = await html2canvas(exportRef.current, {
+ backgroundColor: null, // 배경을 투명하게 설정
+ logging: false, // 디버깅을 위한 로그 비활성화
+ });
+ const dataUrl = canvas.toDataURL("image/png");
+ const link = document.createElement("a");
+ link.href = dataUrl;
+ link.download = "statistics-summary.png";
+ link.click();
+ } catch (error) {
+ console.error("이미지 저장 실패: ", error);
+ }
+ }
+ };
+ return (
+
+ );
+};
+export default SummaryExportPage;
diff --git a/bookduck/src/styles/global.css b/bookduck/src/styles/global.css
index 64eaacc1..275e7d79 100644
--- a/bookduck/src/styles/global.css
+++ b/bookduck/src/styles/global.css
@@ -1,6 +1,7 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Nanum+Gothic&family=Nanum+Myeongjo&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Caprasimo&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
diff --git a/bookduck/tailwind.config.js b/bookduck/tailwind.config.js
index 671cd59e..e1a37a2e 100644
--- a/bookduck/tailwind.config.js
+++ b/bookduck/tailwind.config.js
@@ -48,6 +48,8 @@ export default {
800: "#364390",
},
yellow: {
+ 50: "#FFFAE6",
+ 80: "#FFF0B9",
100: "#FFECA4",
},
red: "#EA4520",
@@ -60,6 +62,8 @@ export default {
"linear-gradient(0deg, var(--Primary-300, #FFBF68) 0%, var(--Primary-300, #FFBF68) 100%), linear-gradient(110deg, #FFE16E 0%, #FFBF68 53.83%)",
"white-gradiation":
"linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFF 35.43%)",
+ "yellow-gradation":
+ "linear-gradient(199deg, #FFF 53.87%, #FFFAE6 87.72%)",
},
fontSize: {
t1: ["1.5rem", { lineHeight: "2.25rem" }], //24px
@@ -72,13 +76,16 @@ export default {
btn3: ["0.875rem", { lineHeight: "1.25rem" }], //14px / 20px
btn4: ["0.75rem", { lineHeight: "1rem" }], //12px / 16px
c1: ["0.75rem", { lineHeight: "1rem" }],
- c2: ["0.6875rem", { lineHeight: "0.8125rem" }],
+ c2: ["0.6875rem", { lineHeight: "0.8125rem" }], //11px /13px
c3: ["2rem", { lineHeight: "2.25rem" }], //32px / 36px
},
fontWeight: {
semibold: 600,
regular: 400,
},
+ fontFamily: {
+ caprasimo: ["Caprasimo", "sans-serif"], // Caprasimo 폰트 추가
+ },
boxShadow: {
custom: "0px 0px 3px 0px rgba(0, 0, 0, 0.10)",
custom2: "0px 0px 10px 0px rgba(0, 0, 0, 0.10)",
diff --git a/bookduck/yarn.lock b/bookduck/yarn.lock
index 9297a190..c20e7d81 100644
--- a/bookduck/yarn.lock
+++ b/bookduck/yarn.lock
@@ -2391,6 +2391,11 @@ balanced-match@^1.0.0:
resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+base64-arraybuffer@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+ integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
base64-js@^1.3.1, base64-js@^1.5.1:
version "1.5.1"
resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
@@ -2631,6 +2636,13 @@ css-box-model@^1.2.0, css-box-model@^1.2.1:
dependencies:
tiny-invariant "^1.0.6"
+css-line-break@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+ integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+ dependencies:
+ utrie "^1.0.2"
+
css-select@^5.1.0:
version "5.1.0"
resolved "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz"
@@ -3481,6 +3493,13 @@ hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
dependencies:
react-is "^16.7.0"
+html2canvas@^1.4.1:
+ version "1.4.1"
+ resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+ integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+ dependencies:
+ css-line-break "^2.1.0"
+ text-segmentation "^1.0.3"
http-parser-js@>=0.5.1:
version "0.5.8"
resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
@@ -4927,6 +4946,13 @@ tailwindcss@^3.4.13:
resolve "^1.22.2"
sucrase "^3.32.0"
+text-segmentation@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+ integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+ dependencies:
+ utrie "^1.0.2"
+
text-table@^0.2.0:
version "0.2.0"
resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
@@ -5156,6 +5182,13 @@ utility-types@^3.10.0:
resolved "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz"
integrity sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==
+utrie@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+ integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+ dependencies:
+ base64-arraybuffer "^1.0.2"
+
uuid@^9.0.1:
version "9.0.1"
resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz"