feature: v0.1 기초 완성

Author: Nuung

README.md

@@ -1,6 +1,6 @@
 # Velog Dashboard Project
 
-> 가나다라
+> velog dashboard
 
 ## Getting Started
 

backend/src/models/postStats.js

@@ -33,6 +33,17 @@ PostStatsSchema.statics.aggTotalByUserId = async function (userId) {
     // 3. 해당 모델들의 stats 의 오늘 viewCount 값을 모두 더한 값
     // 4. 해당 모델들의 stats 의 마지막 요소의 likeCount 값을 모두 더한 값
 
+    // 오늘 날짜 설정
+    // UTC 기준으로 오늘 날짜 설정
+    const KST_OFFSET = 9 * 60 * 60 * 1000; // 한국 시간대는 UTC+9
+    const now = new Date();
+    let today = new Date(now.getTime() + KST_OFFSET); // UTC 시간에 한국 시간대를 적용
+
+    // 다시 문자열로 년월일 문자열로 바꾸고, 다시 문자열을 date object로 바꾸고
+    // 시 분 초 0으로, UTC 시간대로 만들기
+    const dateString = today.toISOString().split("T")[0];
+    today = new Date(dateString);
+
     try {
         const aggreateResult = await this.aggregate([
             // userId에 맞는 문서를 필터링
@@ -42,17 +53,33 @@ PostStatsSchema.statics.aggTotalByUserId = async function (userId) {
             {
                 $project: {
                     totalViewCount: 1, // totalViewCount 값을 포함
-                    lastViewCount: { $last: "$stats.viewCount" }, // stats 배열의 마지막 viewCount 값
+                    todayViews: {
+                        // 오늘 날짜에 해당하는 stats 요소 필터링
+                        $filter: {
+                            input: "$stats",
+                            as: "stat",
+                            cond: { $eq: ["$$stat.date", today] }
+                        }
+                    },
                     lastLikeCount: { $last: "$stats.likeCount" } // stats 배열의 마지막 likeCount 값
                 }
             },
 
-            // 모든 문서에 대해 totalViewCount와 lastLikeCount를 더함
+            // 오늘 날짜의 viewCount를 합산
+            {
+                $project: {
+                    totalViewCount: 1,
+                    todayViewCount: { $sum: "$todayViews.viewCount" },
+                    lastLikeCount: 1
+                }
+            },
+
+            // 모든 문서에 대해 totalViewCount, todayViewCount, lastLikeCount를 더함
             {
                 $group: {
                     _id: null,
                     totalViewCountSum: { $sum: "$totalViewCount" },
-                    todayViewCountSum: { $sum: "$lastViewCount" },
+                    todayViewCountSum: { $sum: "$todayViewCount" },
                     totalLastLikeCountSum: { $sum: "$lastLikeCount" }
                 }
             }
@@ -83,7 +110,6 @@ PostStatsSchema.statics.allPostsAggByUserId = async function (userId) {
                 };
             }
 
-
             const lastStat = doc.stats[doc.stats.length - 1];
             const secondLastStat = doc.stats[doc.stats.length - 2];
 

backend/src/routes/postStatsRouter.js

@@ -1,10 +1,11 @@
 "use strict";
 import { userAuth } from "../middlewares/auth.js";
-import { totalStats, getAllPostsWithTotal } from "../services/postStatsServices.js";
+import { totalStats, getAllPostsWithTotal, getPostByUUID } from "../services/postStatsServices.js";
 
 // ==================== Routing ==================== //
 
 const postStatsRouter = (app, endpoint) => {
+    app.route(`${endpoint}`).get(userAuth, getPostByUUID);
     app.route(`${endpoint}/:userId`).get(userAuth, getAllPostsWithTotal);
     app.route(`${endpoint}/total/:userId`).get(userAuth, totalStats);
 };

backend/src/services/postStatsServices.js

@@ -7,7 +7,7 @@ export const totalStats = async (req, res) => {
     try {
         const { params: { userId } } = req;
         if (req.user.userId != userId) {
-            return res.status(404).json({ message: "Access Denied" });
+            return res.status(403).json({ message: "Access Denied" });
         }
 
         const result = await PostStats.aggTotalByUserId(userId);
@@ -26,7 +26,7 @@ export const getAllPostsWithTotal = async (req, res) => {
     try {
         const { params: { userId }, query: { sortBy, order } } = req;
         if (req.user.userId != userId) {
-            return res.status(404).json({ message: "Access Denied" });
+            return res.status(403).json({ message: "Access Denied" });
         }
 
         // 정렬 함수를 정의
@@ -57,4 +57,26 @@ export const getAllPostsWithTotal = async (req, res) => {
         console.error(error);
         return res.status(500).json({ message: error.message });
     }
-}
+};
+
+
+export const getPostByUUID = async (req, res) => {
+    try {
+        const { query: { uuid } } = req;
+        if (!uuid) {
+            return res.status(404).json({ message: "UUID cannot be empty." });
+        }
+
+        const post = await PostStats.findOne({ uuid }, { _id: 0, uuid: 0 });
+        if (req.user.userId != post.userId) {
+            return res.status(403).json({ message: "Access Denied" });
+        }
+        return res.status(200).json({
+            message: "User's Total Posts with total",
+            result: post
+        });
+    } catch (error) {
+        console.error(error);
+        return res.status(500).json({ message: error.message });
+    }
+};

nginx/pages/dashboard/index.css

@@ -9,6 +9,10 @@ body {
     color: white;
 }
 
+/* ====================================================== */
+/* 네비게이션바 관련 CSS */
+/* ====================================================== */
+
 .sidebar {
     background-color: #222;
     width: 200px;
@@ -44,6 +48,10 @@ body {
     background: var(--main-velog-color);
 }
 
+/* ====================================================== */
+/* 메인과 메인섹션 & Block 관련 CSS */
+/* ====================================================== */
+
 .main-content {
     transition: margin-left 0.3s ease;
 }
@@ -119,7 +127,7 @@ nav ul li:last-child a {
     color: var(--main-velog-color);
 }
 
-.stats-section-block-detail div {
+.stats-section-block-detail>div {
     display: flex;
     flex-direction: row;
     font-size: 0.85rem;
@@ -163,6 +171,10 @@ nav ul li:last-child a {
     color: var(--main-velog-color);
 }
 
+/* ====================================================== */
+/* 동적으로 랜더링되는 post list 관련 CSS */
+/* ====================================================== */
+
 #posts-list {
     width: 100%;
 }
@@ -178,6 +190,30 @@ nav ul li:last-child a {
     border-radius: 15px;
 }
 
+.posts-list-graph {
+    padding: 10px;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-weight: bolder;
+    color: var(--main-velog-color);
+}
+
+.posts-list-graph:hover {
+    background-color: #444;
+}
+
+.posts-list-graph::after {
+    content: "그래프 ▼";
+}
+
+.graph-active::after {
+    content: "그래프 ▲";
+    padding: 6px;
+    border-radius: 15px;
+    background-color: var(--main-velog-color);
+    color: white;
+}
+
 .posts-list-today-veiw {
     display: flex;
     align-items: center;
@@ -188,6 +224,68 @@ nav ul li:last-child a {
     margin-right: 5px;
 }
 
+/* ====================================================== */
+/* 동적으로 랜더링되는 차트 관련 CSS */
+/* ====================================================== */
+.post-graph-div-date {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+}
+
+/* 모든 버튼과 링크에 대한 스타일링 */
+.post-graph-div-btn {
+    background-color: var(--main-velog-color);
+    color: white;
+    padding: 7px;
+    text-decoration: none;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+/* 버튼과 링크에 대한 호버 효과 */
+.post-graph-div-btn:hover {
+    background-color: #666;
+    color: var(--main-velog-color);
+    transition: background-color 0.3s, color 0.3s;
+}
+
+
+/* 날짜 선택기 스타일링 */
+.post-graph-div-date input[type="date"] {
+    background-color: #333;
+    color: #ccc;
+    border: 1px solid #444;
+    padding: 5px;
+    border-radius: 4px;
+    margin: 5px;
+    font-size: 0.8rem;
+}
+
+/* 입력 필드에 대한 호버 및 포커스 효과 */
+.post-graph-div-date input[type="date"]:hover,
+.post-graph-div-date input[type="date"]:focus {
+    border-color: var(--main-velog-color);
+    /* 호버 및 포커스시 테두리 색상 */
+    outline: none;
+    /* 기본 아웃라인 제거 */
+}
+
+/* 레이블 스타일링 */
+.post-graph-div-date label {
+    font-size: 0.8rem;
+    color: #ccc;
+    margin-bottom: 5px;
+}
+
+
+/* ====================================================== */
+/* 그 외 & footer 관련 CSS */
+/* ====================================================== */
+
+
 hr {
     border: 1px solid #444;
 }
@@ -200,23 +298,34 @@ hr {
 }
 
 
-
-/* ==================================================== */
+/* ====================================================== */
 /* MOBILE */
-/* ==================================================== */
+/* ====================================================== */
 
 @media only screen and (max-width: 600px) {
 
     /* 화면 너비가 600px 이하일 때 적용할 스타일을 여기에 작성합니다. */
     .stats-section {
         flex-direction: column;
     }
+
+    .posts-list-graph::after {
+        content: "▼";
+    }
+
+    .graph-active::after {
+        content: "▲";
+        padding: 6px;
+        border-radius: 15px;
+        background-color: var(--main-velog-color);
+        color: white;
+    }
 }
 
 @media only screen and (max-width: 1200px) {
 
     /* 화면 너비가 1200px 이하일 때 적용할 스타일을 여기에 작성합니다. */
     #posts-list li a {
-        max-width: 740px;
+        max-width: 650px;
     }
 }

nginx/pages/dashboard/index.html

@@ -12,6 +12,11 @@
     />
     <!-- Sweetalert2 -->
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <!-- ChartJS, date adpater -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/luxon@^2.0.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1.0.0"></script>
+
     <!-- CUSTOM -->
     <link rel="stylesheet" href="./index.css" />
   </head>