diff --git a/app/api/service/report.tsx b/app/api/service/report.tsx new file mode 100644 index 0000000..cdedaf4 --- /dev/null +++ b/app/api/service/report.tsx @@ -0,0 +1,22 @@ +import axios from "axios"; +import { GET } from "../refresh_token/route"; + +/* +<드리밍 리포트 관련 api> +*/ + +// [get] 통계 +export const getReport = async () => { + try { + const response = await axios({ + method: "GET", + url: "/api/report", + }); + // 응답 결과 : allCount, sharedCount, notSharedCount, likeCount, commentCount + console.log(response.data); + + return response.data; + } catch (error) { + console.log(error); + } +}; diff --git a/app/report/page.tsx b/app/report/page.tsx new file mode 100644 index 0000000..6c5bf6c --- /dev/null +++ b/app/report/page.tsx @@ -0,0 +1,111 @@ +"use client"; + +import React, { useCallback, useEffect, useState } from "react"; +import styles from "./report.module.css"; +import { GrMoney } from "react-icons/gr"; +import { UserProps } from "../diary/page"; +import { getUser } from "../api/service/user"; +import { getLotto } from "../api/service/lotto"; +import { getReport } from "../api/service/report"; + +interface ReportProps { + allCount: number; + sharedCount: number; + notSharedCount: number; + likeCount: number; + commentCount: number; +} + +function ReportPage() { + const [user, setUser] = useState(null); + const [data, setData] = useState(null); + + // [api] 로그인한 유저 정보 get 요청 + useEffect(() => { + (async () => { + try { + const data = await getUser(); + setUser(data.user); + } catch (error) { + console.error("유저 정보를 불러오는 데 실패했습니다.", error); + } + })(); + }, []); + + // [api] 통계 + useEffect(() => { + (async () => { + try { + const data = await getReport(); + console.log(data); + setData(data); + } catch (error) { + console.error("통계 정보를 불러오는 데 실패했습니다.", error); + } + })(); + }, []); + + return ( +
+ +
+

현재 드리밍에는

+

+ 총 ****개의 + 글이 있어요! +

+
+
+
+ +
+

+ 지금까지,{" "} + + {user?.name} 님 + + 은 +

+

+ **개의 + 글을 작성하셨네요 +

+
+
+
+
+

+ + {user?.name} 님 + + 이 받은 +

+

+ 좋아요는 총{" "} + **개 + 입니다! +

+
+ +
+
+
+

+ + {user?.name} 님 + + 의 글에 달린 +

+

+ 댓글은 총{" "} + **개 + 입니다! +

+
+ +
+
+ ); +} + +export default ReportPage; diff --git a/app/report/report.module.css b/app/report/report.module.css new file mode 100644 index 0000000..86a673f --- /dev/null +++ b/app/report/report.module.css @@ -0,0 +1,92 @@ +.container { + width: 100vw; + height: 90vh; + padding-bottom: 10vh; + + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + + background: linear-gradient( + 180deg, + rgba(83, 170, 175, 0.3) 0%, + rgba(255, 220, 98, 0.3) 100% + ); +} + +.reportTitleBox { + width: 80vw; + padding: 2vh 0; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + border-radius: var(--box_radius); + border: 1px solid var(--stroke_color); + background-color: rgba(255, 255, 255, 0.5); + box-shadow: var(--box_shadow2); +} + +.reportBox { + width: 72vw; + padding: 2vh 4vw; + + display: flex; + justify-content: space-between; + align-items: center; + + border-radius: var(--box_radius); + border: 1px solid var(--stroke_color); + background-color: rgba(255, 255, 255, 0.5); + box-shadow: var(--box_shadow2); +} + +.logoImg { + width: 15rem; +} + +.textBox { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.reportTitle { + margin: 0.2rem 0; + font-size: var(--font_size_title); + color: var(--font_color_gray3); +} + +.iconImg { + width: 3.5rem; +} + +.textBox2 { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.reportText { + margin: 0.2rem 0; + font-size: 1rem; + color: var(--font_color_gray3); +} + +/* 색 강조 */ +.important_gray { + font-weight: bold !important; +} + +.important_yellow { + font-weight: bold !important; + color: var(--secondary_color); +} + +.important_blue { + font-weight: bold !important; + color: var(--main_color); +} diff --git a/public/report_comment.png b/public/report_comment.png new file mode 100644 index 0000000..b75fd38 Binary files /dev/null and b/public/report_comment.png differ diff --git a/public/report_like.png b/public/report_like.png new file mode 100644 index 0000000..b6b28db Binary files /dev/null and b/public/report_like.png differ diff --git a/public/report_post.png b/public/report_post.png new file mode 100644 index 0000000..797a7b3 Binary files /dev/null and b/public/report_post.png differ