orieasy1 · yen2i · Dec 14, 2024 · Dec 14, 2024 · Dec 14, 2024 · Dec 16, 2024
diff --git a/src/main/resources/templates/Challenge_Details_Check.css b/src/main/resources/templates/Challenge_Details_Check.css
@@ -0,0 +1,110 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background-color: #F8FAFD;
+}
+
+header {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+}
+
+#homeButton {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #6FD1C5;
+    color: #FFF;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+#homeButton:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
+}
+
+.main-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1000px;
+    margin: 80px auto 20px;
+    padding: 0 20px;
+}
+
+.left-section {
+    text-align: left;
+    flex: 1;
+}
+
+.left-section h2 {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #333;
+}
+
+.left-section h1 {
+    font-size: 3rem;
+    color: #6FD1C5;
+    margin: 10px 0;
+}
+
+.right-section {
+    text-align: right;
+    flex: 1;
+}
+
+.right-section p {
+    font-size: 1.2rem;
+    color: #555;
+    margin: 5px 0;
+}
+
+.challenge-days {
+    font-size: 1.8rem;
+    font-weight: bold;
+    color: #444;
+}
+
+.challenge-dates {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #555;
+}
+
+.challenge-container {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 15px;
+    padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.challenge-box {
+    background-color: #FFFFFF;
+    border: 2px solid #DDDDDD;
+    border-radius: 10px;
+    padding: 15px;
+    text-align: center;
+    font-weight: bold;
+    color: #333;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.challenge-box:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
+}
+
+.challenge-box.checked {
+    background-color: #6FD1C5;
+    color: #FFFFFF;
+}
diff --git a/src/main/resources/templates/Challenge_Details_Check.html b/src/main/resources/templates/Challenge_Details_Check.html
@@ -0,0 +1,41 @@
+<!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>Challenge Page</title>
+    <link rel="stylesheet" href="Challenge_Details_Check.css">
+</head>
+<body>
+<header>
+    <button id="homeButton" th:onclick="|location.href='@{/home}'|">Home</button>
+</header>
+
+<main class="main-container">
+    <div class="left-section">
+        <h2 id="challengeTitle" th:text="${challengeTitle}">Your Challenge</h2>
+        <h1 id="remainingDays" th:text="'D - ' + ${remainingDays}">D - N/A</h1>
+    </div>
+
+    <div class="right-section">
+        <p>
+            The <span class="challenge-days" id="challengeDays" th:text="${totalDays + ' days'}">50 days</span> challenge
+        </p>
+        <p>
+            from <span class="challenge-dates" id="startDate" th:text="${startDate}">N/A</span>
+        </p>
+        <p>
+            to <span class="challenge-dates" id="endDate" th:text="${endDate}">N/A</span>
+        </p>
+    </div>
+</main>
+
+<div class="challenge-container" id="challenge-container">
+    <div th:each="day, status : ${dayStatuses}" class="challenge-box"
+         th:classappend="${status.isCompleted} ? 'checked' : ''"
+         th:text="'DAY ' + ${day}">
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/src/main/resources/templates/Challenge_Details_Check.js b/src/main/resources/templates/Challenge_Details_Check.js
@@ -0,0 +1,91 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const challengeContainer = document.getElementById("challenge-container");
+
+    const challengeId = localStorage.getItem("challenge_id");
+    if (!challengeId) {
+        alert("You didn't select a challenge.");
+        return;
+    }
+
+    fetch(`/api/v1/challenges/${challengeId}`)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error("Failed to fetch challenge data");
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.success) {
+                const { challengeTitle, totalDays, startDate, endDate, dayStatuses } = data;
+
+                document.getElementById("challengeTitle").textContent = challengeTitle || "Your Challenge";
+                document.getElementById("challengeDays").textContent = `${totalDays} days`;
+                document.getElementById("startDate").textContent = startDate || "N/A";
+                document.getElementById("endDate").textContent = endDate || "N/A";
+
+                const today = new Date();
+                let remainingDays = "N/A";
+                if (endDate) {
+                    const end = new Date(endDate);
+                    if (!isNaN(end.getTime())) {
+                        remainingDays = Math.max(Math.ceil((end - today) / (1000 * 60 * 60 * 24)), 0);
+                    }
+                }
+                document.getElementById("remainingDays").textContent = `D - ${remainingDays}`;
+
+                renderChallengeBoxes(dayStatuses, challengeContainer);
+
+                if (remainingDays === 0) {
+                    calculateAndRedirect(dayStatuses);
+                }
+            } else {
+                alert("Failed to retrieve challenge data.");
+            }
+        })
+        .catch(error => {
+            console.error("Error fetching challenge data:", error);
+            alert("Failed to get data from the server.");
+        });
+});
+
+function renderChallengeBoxes(dayStatuses, container) {
+    container.innerHTML = "";
+    dayStatuses.forEach((status) => {
+        const dayBox = document.createElement("div");
+        dayBox.classList.add("challenge-box");
+        dayBox.textContent = `DAY ${status.day}`;
+        if (status.isCompleted) dayBox.classList.add("checked");
+
+        dayBox.addEventListener("click", () => {
+            status.isCompleted = !status.isCompleted;
+            dayBox.classList.toggle("checked");
+
+            fetch(`/api/v1/challenges/${challengeId}/day/${status.day}`, {
+                method: 'PUT',
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ isCompleted: status.isCompleted })
+            });
+        });
+
+        container.appendChild(dayBox);
+    });
+}
+
+function calculateAndRedirect(dayStatuses) {
+    const completedDays = dayStatuses.filter(status => status.isCompleted).length;
+    const totalDays = dayStatuses.length;
+
+    const successRate = ((completedDays / totalDays) * 100).toFixed(2);
+
+    fetch('/api/v1/challenges/success', {
+        method: 'POST',
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ completedDays, totalDays, successRate })
+    }).then(() => {
+        window.location.href = "success.html";
+    });
+}
diff --git a/src/main/resources/templates/Challenge_End_Page.css b/src/main/resources/templates/Challenge_End_Page.css
@@ -0,0 +1,112 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f1f3f9;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+header {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+
+#homeButton {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #6FD1C5;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#homeButton:hover {
+    background-color: #5BAA9D;
+}
+
+main {
+    text-align: center;
+    width: 100%;
+    max-width: 600px;
+}
+
+.header-container h2 {
+    font-size: 22px;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.header-container h1 {
+    font-size: 48px;
+    color: #555;
+    font-weight: bold;
+    margin: 5px 0;
+}
+
+.dates {
+    font-size: 16px;
+    color: #757575;
+    margin-bottom: 30px;
+}
+
+.success-box {
+    position: relative;
+    background-color: white;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    padding: 30px;
+    margin: 0 auto;
+    text-align: center;
+    max-width: 400px;
+}
+
+.blue-gradient-circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 200px;
+    background: radial-gradient(circle, rgba(181, 214, 249, 0.7), transparent);
+    border-radius: 50%;
+    z-index: 0;
+    filter: blur(15px);
+}
+
+.challenge-text {
+    font-size: 16px;
+    color: #555;
+    margin: 10px 0;
+    position: relative;
+    z-index: 1;
+}
+
+.success-text {
+    position: relative;
+    z-index: 1;
+    font-size: 28px;
+    font-weight: bold;
+    color: #000;
+    margin: 20px 0 10px;
+}
+
+.message {
+    font-size: 14px;
+    color: #888;
+    margin-top: 10px;
+    position: relative;
+    z-index: 1;
+}
+
+.message.success-message {
+    color: #28a745; /* 초록색 */
+    font-size: 26px;
+    font-weight: bold;
+    margin-top: 20px;
+}