[#51] api: 통계 api 연결

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);
+    }
+};

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<UserProps | null>(null);
+    const [data, setData] = useState<ReportProps | null>(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 (
+        <div className={styles.container}>
+            <img src="./logo_dreaming.png" className={styles.logoImg} />
+            <div className={styles.reportTitleBox}>
+                <p className={styles.reportTitle}>현재 드리밍에는</p>
+                <p className={styles.reportTitle}>
+                    <span className={styles.important_gray}>총 ****개</span>의
+                    글이 있어요!
+                </p>
+                <div className={styles.chart}></div>
+            </div>
+            <div className={styles.reportBox}>
+                <img src="./report_post.png" className={styles.iconImg} />
+                <div className={styles.textBox}>
+                    <p className={styles.reportText}>
+                        지금까지,{" "}
+                        <span className={styles.important_yellow}>
+                            {user?.name} 님
+                        </span>
+                        은
+                    </p>
+                    <p className={styles.reportText}>
+                        <span className={styles.important_blue}>**</span>개의
+                        글을 작성하셨네요
+                    </p>
+                </div>
+            </div>
+            <div className={styles.reportBox}>
+                <div className={styles.textBox2}>
+                    <p className={styles.reportText}>
+                        <span className={styles.important_yellow}>
+                            {user?.name} 님
+                        </span>
+                        이 받은
+                    </p>
+                    <p className={styles.reportText}>
+                        좋아요는 총{" "}
+                        <span className={styles.important_blue}>**</span>개
+                        입니다!
+                    </p>
+                </div>
+                <img src="./report_like.png" className={styles.iconImg} />
+            </div>
+            <div className={styles.reportBox}>
+                <div className={styles.textBox2}>
+                    <p className={styles.reportText}>
+                        <span className={styles.important_yellow}>
+                            {user?.name} 님
+                        </span>
+                        의 글에 달린
+                    </p>
+                    <p className={styles.reportText}>
+                        댓글은 총{" "}
+                        <span className={styles.important_blue}>**</span>개
+                        입니다!
+                    </p>
+                </div>
+                <img src="./report_comment.png" className={styles.iconImg} />
+            </div>
+        </div>
+    );
+}
+
+export default ReportPage;

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);
+}