orieasy1 · callmeminji · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,11 +1,9 @@
-HELP.md
-.gradle
-build/
-!gradle/wrapper/gradle-wrapper.jar
-!**/src/main/**/build/
-!**/src/test/**/build/
+### IntelliJ IDEA ###
+out/
+!**/src/main/**/out/
+!**/src/test/**/out/
 
-### STS ###
+### Eclipse ###
 .apt_generated
 .classpath
 .factorypath
@@ -17,15 +15,6 @@ bin/
 !**/src/main/**/bin/
 !**/src/test/**/bin/
 
-### IntelliJ IDEA ###
-.idea
-*.iws
-*.iml
-*.ipr
-out/
-!**/src/main/**/out/
-!**/src/test/**/out/
-
 ### NetBeans ###
 /nbproject/private/
 /nbbuild/
@@ -35,8 +24,6 @@ out/
 
 ### VS Code ###
 .vscode/
-.DS_Store
-*/.DS_Store
 
-application.yml
-application-dev.yml
+### Mac OS ###
+.DS_Store
diff --git a/calendar.css b/calendar.css
@@ -0,0 +1,145 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f8f9fc;
+}
+
+.calendar-container {
+    max-width: 1000px;
+    margin: 40px auto;
+    padding: 10px;
+    background-color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+}
+
+.calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.month-navigation {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+button {
+    cursor: pointer;
+    padding: 5px 10px;
+    background-color: #4a90e2;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #357ABD;
+}
+
+.week-buttons {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 10px;
+}
+
+.week-btn {
+    background-color: #dfe6e9;
+    padding: 5px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    text-align: center;
+    transition: background-color 0.3s ease;
+}
+
+.week-btn:hover {
+    background-color: #b2bec3;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th, td {
+    width: 14%;
+    height: 100px;
+    border: 1px solid #ccc;
+    text-align: center;
+    vertical-align: top;
+}
+
+td {
+    position: relative;
+    background-color: #f9f9f9;
+    transition: background-color 0.3s ease;
+}
+
+td:hover {
+    background-color: #eef;
+    cursor: pointer;
+}
+
+.green-tag, .red-tag {
+    font-size: 12px;
+    margin-top: 5px;
+}
+
+.green-tag {
+    color: green;
+}
+
+.red-tag {
+    color: red;
+}
+
+.title-button {
+    background-color: transparent;
+    border: 2px solid #4a90e2;
+    color: #4a90e2;
+    font-size: 1.5rem;
+    font-weight: bold;
+    padding: 5px 15px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+}
+
+.title-button:hover {
+    background-color: #4a90e2;
+    color: white;
+}
+
+.home-btn {
+    background-color: #4a90e2;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s ease;
+}
+
+.home-btn:hover {
+    background-color: #357ABD;
+}
+
+.arrow-btn {
+    background-color: #4a90e2;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.arrow-btn:hover {
+    background-color: #357ABD;
+}
diff --git a/calendar.html b/calendar.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calendar</title>
+    <link rel="stylesheet" href="calendar.css">
+</head>
+<body>
+<div class="calendar-container">
+    <div class="calendar-header">
+        <!-- 홈 버튼 -->
+        <button id="homeButton" class="home-btn">Home</button>
+        <!-- 월과 년도 표시 -->
+        <div class="month-navigation">
+            <button id="calendarTitle" class="title-button"
+                    th:text="${month} + ', ' + ${year}">Dec, 2024</button>
+            <button id="prevMonth" class="arrow-btn">&lt;</button>
+            <button id="nextMonth" class="arrow-btn">&gt;</button>
+        </div>
+    </div>
+    <!-- 주간 버튼 -->
+    <div class="week-buttons">
+        <div class="week-btn" th:each="week : ${weeks}"
+             th:text="'Week ' + ${week}">Week 1</div>
+    </div>
+    <!-- 달력 테이블 -->
+    <table>
+        <thead>
+        <tr>
+            <th>Sun</th>
+            <th>Mon</th>
+            <th>Tue</th>
+            <th>Wed</th>
+            <th>Thu</th>
+            <th>Fri</th>
+            <th>Sat</th>
+        </tr>
+        </thead>
+        <tbody id="calendarBody">
+        <!-- 타임리프 반복문으로 달력 내용 추가 -->
+        <tr th:each="weekRow : ${calendarRows}">
+            <td th:each="day : ${weekRow}">
+                <div th:text="${day.date}">1</div>
+                <!-- 태그 표시 -->
+                <div class="green-tag" th:if="${day.greenTag > 0}"
+                     th:text="'Green: ' + ${day.greenTag}">Green: 0</div>
+                <div class="red-tag" th:if="${day.redTag > 0}"
+                     th:text="'Red: ' + ${day.redTag}">Red: 0</div>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+<script src="calendar.js"></script>
+</body>
+</html>
diff --git a/calendar.js b/calendar.js
@@ -0,0 +1,87 @@
+const titleElement = document.getElementById('calendarTitle');
+const calendarBody = document.getElementById('calendarBody');
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+let currentMonth = 11; // December (index: 11)
+let currentYear = 2024;
+let dailyProgressData = [];
+
+// API 호출 및 데이터 가져오기
+async function fetchCalendarData(year, month) {
+    try {
+        const response = await fetch(`/api/v1/calendar?year=${year}&month=${month + 1}`);
+        const result = await response.json();
+        if (result.code === "SUCCESS") {
+            dailyProgressData = result.data.daily_progress;
+        } else {
+            console.error("Failed to fetch calendar data");
+        }
+    } catch (error) {
+        console.error("Error fetching calendar data: ", error);
+    }
+}
+
+// 달력 렌더링
+async function renderCalendar() {
+    await fetchCalendarData(currentYear, currentMonth);
+
+    titleElement.textContent = `${months[currentMonth]}, ${currentYear}`;
+    calendarBody.innerHTML = "";
+
+    const firstDay = new Date(currentYear, currentMonth, 1).getDay(); // 시작 요일
+    const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); // 해당 월의 총 일 수
+
+    let row = "<tr>";
+    for (let i = 0; i < firstDay; i++) {
+        row += "<td></td>"; // 첫 주 시작 요일 앞의 빈 칸
+    }
+
+    for (let day = 1; day <= daysInMonth; day++) {
+        if ((firstDay + day - 1) % 7 === 0 && day !== 1) {
+            row += "</tr><tr>"; // 주 단위로 행 변경
+        }
+
+        const date = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+        const progress = dailyProgressData.find(p => p.date === date);
+
+        const greenTag = progress?.tasks?.reduce((sum, t) => sum + t.green_tag, 0) || 0;
+        const redTag = progress?.tasks?.reduce((sum, t) => sum + t.red_tag, 0) || 0;
+
+        row += `
+            <td>
+                <div>${day}</div>
+                ${greenTag > 0 ? `<div class="green-tag">Green: ${greenTag}</div>` : ""}
+                ${redTag > 0 ? `<div class="red-tag">Red: ${redTag}</div>` : ""}
+            </td>`;
+    }
+
+    row += "</tr>";
+    calendarBody.innerHTML = row;
+}
+
+// 이전 달 버튼
+document.getElementById('prevMonth').addEventListener('click', () => {
+    currentMonth--;
+    if (currentMonth < 0) {
+        currentMonth = 11;
+        currentYear--;
+    }
+    renderCalendar();
+});
+
+// 다음 달 버튼
+document.getElementById('nextMonth').addEventListener('click', () => {
+    currentMonth++;
+    if (currentMonth > 11) {
+        currentMonth = 0;
+        currentYear++;
+    }
+    renderCalendar();
+});
+
+// 홈 버튼 클릭 이벤트 추가
+document.getElementById('homeButton').addEventListener('click', () => {
+    window.location.href = '/'; // 홈 페이지 URL로 이동
+});
+
+// 초기 렌더링
+renderCalendar();