From 0512f9caf6e4a256e61c09db8a9d25425a032fa9 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Mon, 16 Dec 2024 21:34:57 +0900 Subject: [PATCH 01/37] Delete src/main/resources/templates/Calender_MG.html --- src/main/resources/templates/Calender_MG.html | 494 ------------------ 1 file changed, 494 deletions(-) delete mode 100644 src/main/resources/templates/Calender_MG.html diff --git a/src/main/resources/templates/Calender_MG.html b/src/main/resources/templates/Calender_MG.html deleted file mode 100644 index 65c078a..0000000 --- a/src/main/resources/templates/Calender_MG.html +++ /dev/null @@ -1,494 +0,0 @@ - - - - - - - - - My Framer Site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
-
-
-
-
-

- Monthly goals (Dec) -

-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-

- Business Process Mangement Project -

-
-
-

- How to make BPMN files -

-
-
-
-
-
- -
-
-

- Dec 10, 2024 -

-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-

- Business Process Mangement Project -

-
-
-

- How to make BPMN files -

-
-
-
-
-
- -
-
-

- Dec 20, 2024 -

-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-

- Business Process Mangement Project -

-
-
-

- How to make BPMN files -

-
-
-
-
-
- -
-
-

- Dec 5, 2024 -

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

- Develop API Endpoints -

-
-
-
-

- New -

-
-
-
-
-

- Code and test all API endpoints necessary for the front-end and back-end communication -

-
-
-
-
-
-
-
-

- 75% -

-
-
-
-
-
-
- - - - - - - - From 35342604fcfa1a691426e61ff80aec3a17251dcf Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Mon, 16 Dec 2024 21:35:08 +0900 Subject: [PATCH 02/37] Delete src/main/resources/templates/calender.html --- src/main/resources/templates/calender.html | 2183 -------------------- 1 file changed, 2183 deletions(-) delete mode 100644 src/main/resources/templates/calender.html diff --git a/src/main/resources/templates/calender.html b/src/main/resources/templates/calender.html deleted file mode 100644 index b51b7b0..0000000 --- a/src/main/resources/templates/calender.html +++ /dev/null @@ -1,2183 +0,0 @@ - - - - - - - - - My Framer Site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
- -
-
-
- -
-
-
-
-

- Monthly goal (Week 1) -

-
-
-
-
-

- Monthly goal (Week 3) -

-
-
-
-
-

- Monthly goal (Week 4) -

-
-
-
-
-

- Monthly goal (Week 5) -

-
-
-
-
-

- Monthly goal (Week 2) -

-
-
-
-
-
-
-
-
-

- Dec,2024 -

-
-
-
-
-
-

- SUN -

-
-
-
-
-

- MON -

-
-
-
-
-

- TUE -

-
-
-
-
-

- WED -

-
-
-
-
-

- THUR -

-
-
-
-
-

- FRI -

-
-
-
-
-

- SAT -

-
-
-
-
-
-
-

- 1 -

-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-
-

- 2 -

-
-
-
-
- -
-
-
-

- Edit file -

-
-
-
-
-
-
-
-

- 3 -

-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- 4 -

-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-

- Note taking -

-
-
-
-
-
- -
-
-
-

- Edit file -

-
-
-
-
-
-
-
-

- 5 -

-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- 6 -

-
-
-
-
-

- 7 -

-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-
-
-

- 8 -

-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-
-

- 9 -

-
-
-
-
-

- Regular Tag -

-
-
-
-
-
- -
-
-
-

- Edit file -

-
-
-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-
-

- 10 -

-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- 11 -

-
-
-
-
-
-

- 12 -

-
-
-
-
- -
-
-
-

- Edit file -

-
-
-
-
-
-
-
-

- 13 -

-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- 14 -

-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-
-
-

- 15 -

-
-
-
-
- -
-
-
-

- Edit file -

-
-
-
-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-

- Note taking -

-
-
-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-
-

- 16 -

-
-
-
- -
-
-
-

- Edit file -

-
-
-
-
-
- -
-
-
-

- Edit file -

-
-
-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-
-

- 17 -

-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
-
-

- 18 -

-
-
-
-
-

- Note taking -

-
-
-
-
-

- Note taking -

-
-
-
-
-

- Note taking -

-
-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
- -
-
-
-

- Edit file -

-
-
-
-
-
-
-

- 19 -

-
-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- Note taking -

-
-
-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
- -
-
-
-

- Edit file -

-
-
-
-
-
-
-

- 20 -

-
-
-
-
- -
-
-
-

- Green Tag -

-
-
-
-
-
-
- -
-
-
-

- Edit file -

-
-
-
-
-
-

- Note taking -

-
-
-
-
-
-

- 21 -

-
-
-
-

- - -

-
-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- Note taking -

-
-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-
-

- 22 -

-
-
-
-
-
-

- 23 -

-
-
-
-

- Note taking -

-
-
-
-
-
-

- 24 -

-
-
-
-
-

- Note taking -

-
-
-
-
-

- Note taking -

-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- 25 -

-
-
-
-

- Note taking -

-
-
-
-
-
-

- 26 -

-
-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- 27 -

-
-
-
-
-

- Regular Tag -

-
-
-
-
-
-
-

- 28 -

-
-
-
-

- Note taking -

-
-
-
-
-
-
-
-

- 29 -

-
-
-
-

- Note taking -

-
-
-
-
-

- Note taking -

-
-
-
-
-

- Note taking -

-
-
-
-
-
-

- 30 -

-
-
-
-

- Note taking -

-
-
-
-
-
-

- 31 -

-
-
-
-

- Note taking -

-
-
-
-
-
-
-

- Monthly goal -

-

- (Dec) -

-
-
-
-
-
-
-
-
- - - - - - - - From 97989e24b9a865427b2300b05b1518d1bec41558 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Mon, 16 Dec 2024 21:35:19 +0900 Subject: [PATCH 03/37] Delete src/main/resources/templates/Calender_T.html --- src/main/resources/templates/Calender_T.html | 363 ------------------- 1 file changed, 363 deletions(-) delete mode 100644 src/main/resources/templates/Calender_T.html diff --git a/src/main/resources/templates/Calender_T.html b/src/main/resources/templates/Calender_T.html deleted file mode 100644 index 69e3a8b..0000000 --- a/src/main/resources/templates/Calender_T.html +++ /dev/null @@ -1,363 +0,0 @@ - - - - - - - - - My Framer Site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
-
-
-
-
-

- Today 12/20/2024 -

-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-

- Business Process Mangement Project -

-
-
-

- How to make BPMN files -

-
-
-
-
-
-
-
-
-
-
-
-
-
-

- Set Up Development Environment -

-
-
-

- Configure the development environment, including IDE setup, version control, and dependencies. -

-
-
-
-
-
-
-
-
-
-
-
-
-
-

- Create Database Schema -

-
-
-

- Design and implement the database schema for data storage, ensuring scalability and security. -

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

- Develop API Endpoints -

-
-
-
-

- New -

-
-
-
-
-

- Code and test all API endpoints necessary for the front-end and back-end communication -

-
-
-
-
-
-
-
-
-

- 25% -

-
-
-
-
-
- - - - - - - - From dedda74d1877eebfae61be1964b96d7b8d8b631a Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Mon, 16 Dec 2024 21:35:28 +0900 Subject: [PATCH 04/37] Delete src/main/resources/templates/Calender_WG.html --- src/main/resources/templates/Calender_WG.html | 452 ------------------ 1 file changed, 452 deletions(-) delete mode 100644 src/main/resources/templates/Calender_WG.html diff --git a/src/main/resources/templates/Calender_WG.html b/src/main/resources/templates/Calender_WG.html deleted file mode 100644 index 6c04a29..0000000 --- a/src/main/resources/templates/Calender_WG.html +++ /dev/null @@ -1,452 +0,0 @@ - - - - - - - - - My Framer Site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-

- Weekly goals(Week 3) -

-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-

- Business Process Mangement Project -

-
-
-

- How to make BPMN files -

-
-
-
-
-
- -
-
-

- Dec 18, 2024 -

-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-

- Business Process Mangement Project -

-
-
-

- How to make BPMN files -

-
-
-
-
-
- -
-
-

- Dec 19, 2024 -

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

- Create Database Schema -

-
-
-

- Design and implement the database schema for data storage, ensuring scalability and security. -

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

- Develop API Endpoints -

-
-
-
-

- New -

-
-
-
-
-

- Code and test all API endpoints necessary for the front-end and back-end communication -

-
-
-
-
-
-
-
-

- 50% -

-
-
-
-
-
-
- - - - - - - - From 08d69dcbc19a40981553897972cfbbb7ec06bc88 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Mon, 16 Dec 2024 21:38:13 +0900 Subject: [PATCH 05/37] Add calendar.html need to change a html file's name later --- src/main/resources/templates/.gitignore | 29 +++++ src/main/resources/templates/calendar.css | 115 ++++++++++++++++++ src/main/resources/templates/calendar.js | 87 +++++++++++++ .../resources/templates/calendar_html.iml | 11 ++ src/main/resources/templates/index.html | 41 +++++++ 5 files changed, 283 insertions(+) create mode 100644 src/main/resources/templates/.gitignore create mode 100644 src/main/resources/templates/calendar.css create mode 100644 src/main/resources/templates/calendar.js create mode 100644 src/main/resources/templates/calendar_html.iml create mode 100644 src/main/resources/templates/index.html diff --git a/src/main/resources/templates/.gitignore b/src/main/resources/templates/.gitignore new file mode 100644 index 0000000..f68d109 --- /dev/null +++ b/src/main/resources/templates/.gitignore @@ -0,0 +1,29 @@ +### IntelliJ IDEA ### +out/ +!**/src/main/**/out/ +!**/src/test/**/out/ + +### Eclipse ### +.apt_generated +.classpath +.factorypath +.project +.settings +.springBeans +.sts4-cache +bin/ +!**/src/main/**/bin/ +!**/src/test/**/bin/ + +### NetBeans ### +/nbproject/private/ +/nbbuild/ +/dist/ +/nbdist/ +/.nb-gradle/ + +### VS Code ### +.vscode/ + +### Mac OS ### +.DS_Store \ No newline at end of file diff --git a/src/main/resources/templates/calendar.css b/src/main/resources/templates/calendar.css new file mode 100644 index 0000000..f72f48d --- /dev/null +++ b/src/main/resources/templates/calendar.css @@ -0,0 +1,115 @@ +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; +} + +.calendar-header h2 { + margin: 0; + font-size: 1.5rem; +} + +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; +} + +/* Dec, 2024 버튼 스타일 */ +.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; /* 글씨 색상 변경 */ +} diff --git a/src/main/resources/templates/calendar.js b/src/main/resources/templates/calendar.js new file mode 100644 index 0000000..1d4ef0d --- /dev/null +++ b/src/main/resources/templates/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 = ""; + for (let i = 0; i < firstDay; i++) { + row += ""; + } + + for (let day = 1; day <= daysInMonth; day++) { + if ((firstDay + day - 1) % 7 === 0 && day !== 1) { + row += ""; + } + + 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 += ` + +
${day}
+ ${greenTag > 0 ? `
Green: ${greenTag}
` : ""} + ${redTag > 0 ? `
Red: ${redTag}
` : ""} + `; + } + + row += ""; + 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(); +}); + +// Dec, 2024 버튼 클릭 이벤트 추가 +titleElement.addEventListener('click', () => { + alert(`현재 선택된 날짜: ${months[currentMonth]}, ${currentYear}`); +}); + +// 초기 렌더링 +renderCalendar(); + diff --git a/src/main/resources/templates/calendar_html.iml b/src/main/resources/templates/calendar_html.iml new file mode 100644 index 0000000..9465dd8 --- /dev/null +++ b/src/main/resources/templates/calendar_html.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html new file mode 100644 index 0000000..0c1c345 --- /dev/null +++ b/src/main/resources/templates/index.html @@ -0,0 +1,41 @@ + + + + + + Calendar + + + +
+
+ + + + +
+
+
Week 1
+
Week 2
+
Week 3
+
Week 4
+
+ + + + + + + + + + + + + +
SunMonTueWedThuFriSat
+
+ + + + From 9008d2a793e3cc00678246a967129e191f9986be Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Mon, 16 Dec 2024 22:16:27 +0900 Subject: [PATCH 06/37] Add calendar_WG.html --- src/main/resources/templates/calendar_WG.css | 177 ++++++++++++++++++ src/main/resources/templates/calendar_WG.html | 65 +++++++ src/main/resources/templates/calendar_WG.iml | 11 ++ src/main/resources/templates/calendar_WG.js | 43 +++++ 4 files changed, 296 insertions(+) create mode 100644 src/main/resources/templates/calendar_WG.css create mode 100644 src/main/resources/templates/calendar_WG.html create mode 100644 src/main/resources/templates/calendar_WG.iml create mode 100644 src/main/resources/templates/calendar_WG.js diff --git a/src/main/resources/templates/calendar_WG.css b/src/main/resources/templates/calendar_WG.css new file mode 100644 index 0000000..3aa2ed1 --- /dev/null +++ b/src/main/resources/templates/calendar_WG.css @@ -0,0 +1,177 @@ +/* 전체 페이지 스타일 */ +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: #F1F3F9; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; +} + +/* 홈 버튼 스타일 */ +.home { + position: absolute; + top: 20px; + left: 20px; + background-color: #6FD1C5; + color: #FFFFFF; + padding: 10px 15px; + border-radius: 6px; + text-decoration: none; + font-weight: bold; + font-size: 14px; + transition: background-color 0.3s; +} + +.home:hover { + background-color: #5BAA9D; +} + +/* 탭 메뉴 스타일 */ +.tabs { + position: absolute; + top: 20px; + right: 20px; + display: flex; + gap: 10px; +} + +.tabs button { + background-color: #6FD1C5; + border: none; + border-radius: 6px; + padding: 8px 20px; + cursor: pointer; + font-size: 14px; + font-weight: bold; + color: #FFFFFF; + transition: all 0.3s ease; +} + +.tabs button:hover { + background-color: #5BAA9D; +} + +.tabs .active { + background-color: #5BAA9D; +} + +/* 메인 컨텐츠 스타일 */ +.container { + background-color: #FFFFFF; + width: 90%; + max-width: 700px; + padding: 30px; + border-radius: 12px; + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); + margin-top: 80px; + height: calc(100vh - 120px); + overflow-y: auto; +} + +.section h2 { + font-size: 28px; + font-weight: bold; + color: #333333; + margin-bottom: 20px; + text-align: center; +} + +/* 진행률 바 스타일 */ +.progress-container { + background-color: #E0E0E0; + width: 100%; + height: 20px; + border-radius: 10px; + position: relative; + margin: 20px 0; +} + +.progress-bar { + height: 100%; + background-color: #6FD1C5; + border-radius: 10px; + width: 0%; /* 초기값 */ + transition: width 0.5s ease; +} + +.progress-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: bold; + color: #333; +} + +/* 주차 박스 스타일 */ +.week-box { + display: flex; + justify-content: space-around; + margin-bottom: 20px; +} + +.week-day { + background-color: #E3F2FD; + padding: 12px; + text-align: center; + font-size: 16px; + font-weight: bold; + color: #1976D2; + border-radius: 10px; + width: 50px; + border: 1px solid #BBDEFB; +} + +.selected-week { + background-color: #5BAA9D; + color: #FFFFFF; +} + +/* 할 일 아이템 스타일 */ +.todo-item { + background-color: #FAFAFA; + border: 1px solid #EEEEEE; + border-radius: 10px; + padding: 15px; + margin-bottom: 15px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.todo-item h3 { + margin: 0 0 8px; + font-size: 16px; + color: #424242; +} + +.todo-item p { + margin: 0 0 10px; + color: #757575; + font-size: 14px; +} + +.priority { + display: inline-block; + padding: 4px 12px; + border-radius: 12px; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + width: fit-content; +} + +.priority.high { + color: #D32F2F; + background-color: #FFCDD2; +} + +.priority.medium { + color: #F57C00; + background-color: #FFE0B2; +} + +.priority.low { + color: #388E3C; + background-color: #C8E6C9; +} diff --git a/src/main/resources/templates/calendar_WG.html b/src/main/resources/templates/calendar_WG.html new file mode 100644 index 0000000..31e3c12 --- /dev/null +++ b/src/main/resources/templates/calendar_WG.html @@ -0,0 +1,65 @@ + + + + + + Weekly To-Do List + + + + +Home + + +
+ + + +
+ + +
+
+

Weekly

+ + +
+
+ 0% +
+ + +
+
+ Week +
+
+ + +
+
+

Task Title

+

Description of the task goes here.

+ + High + +
+
+
+
+ + + + + diff --git a/src/main/resources/templates/calendar_WG.iml b/src/main/resources/templates/calendar_WG.iml new file mode 100644 index 0000000..9465dd8 --- /dev/null +++ b/src/main/resources/templates/calendar_WG.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/main/resources/templates/calendar_WG.js b/src/main/resources/templates/calendar_WG.js new file mode 100644 index 0000000..0de6385 --- /dev/null +++ b/src/main/resources/templates/calendar_WG.js @@ -0,0 +1,43 @@ +// To-Do 리스트 데이터 예시 +const todoData = [ + { title: "Task Title", description: "Description of the task goes here.", priority: "high" }, + { title: "Another Task", description: "Description of the task goes here.", priority: "medium" }, + { title: "Low Priority Task", description: "Description of the task goes here.", priority: "low" } +]; + +// HTML 요소 가져오기 +const todoList = document.getElementById('todoList'); +const progressBar = document.getElementById('progressBar'); +const progressLabel = document.getElementById('progressLabel'); + +// To-Do 리스트 렌더링 함수 +function renderTodoList() { + todoList.innerHTML = ""; // 기존 내용 초기화 + + todoData.forEach(task => { + const todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + + todoItem.innerHTML = ` +

${task.title}

+

${task.description}

+ + ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} + + `; + + todoList.appendChild(todoItem); + }); +} + +// 진행률 바 업데이트 함수 +function updateProgressBar(rate = 0) { + progressBar.style.width = `${rate}%`; + progressLabel.textContent = `${rate}%`; +} + +// 초기 렌더링 +document.addEventListener('DOMContentLoaded', () => { + renderTodoList(); // 할 일 목록 렌더링 + updateProgressBar(0); // 진행률 초기값 +}); From d09db45c6c1fd81631a240d783e9baabcad063ed Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:01:25 +0900 Subject: [PATCH 07/37] Delete src/main/resources/templates/calendar.css --- src/main/resources/templates/calendar.css | 115 ---------------------- 1 file changed, 115 deletions(-) delete mode 100644 src/main/resources/templates/calendar.css diff --git a/src/main/resources/templates/calendar.css b/src/main/resources/templates/calendar.css deleted file mode 100644 index f72f48d..0000000 --- a/src/main/resources/templates/calendar.css +++ /dev/null @@ -1,115 +0,0 @@ -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; -} - -.calendar-header h2 { - margin: 0; - font-size: 1.5rem; -} - -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; -} - -/* Dec, 2024 버튼 스타일 */ -.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; /* 글씨 색상 변경 */ -} From a23f5ebea25971c018d84a95032c326e8acdf188 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:01:35 +0900 Subject: [PATCH 08/37] Delete src/main/resources/templates/calendar.js --- src/main/resources/templates/calendar.js | 87 ------------------------ 1 file changed, 87 deletions(-) delete mode 100644 src/main/resources/templates/calendar.js diff --git a/src/main/resources/templates/calendar.js b/src/main/resources/templates/calendar.js deleted file mode 100644 index 1d4ef0d..0000000 --- a/src/main/resources/templates/calendar.js +++ /dev/null @@ -1,87 +0,0 @@ -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 = ""; - for (let i = 0; i < firstDay; i++) { - row += ""; - } - - for (let day = 1; day <= daysInMonth; day++) { - if ((firstDay + day - 1) % 7 === 0 && day !== 1) { - row += ""; - } - - 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 += ` - -
${day}
- ${greenTag > 0 ? `
Green: ${greenTag}
` : ""} - ${redTag > 0 ? `
Red: ${redTag}
` : ""} - `; - } - - row += ""; - 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(); -}); - -// Dec, 2024 버튼 클릭 이벤트 추가 -titleElement.addEventListener('click', () => { - alert(`현재 선택된 날짜: ${months[currentMonth]}, ${currentYear}`); -}); - -// 초기 렌더링 -renderCalendar(); - From decb6c1aaf683068f1a8f2dad59f26081c2cd06a Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:01:46 +0900 Subject: [PATCH 09/37] Delete src/main/resources/templates/calendar_html.iml --- src/main/resources/templates/calendar_html.iml | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/main/resources/templates/calendar_html.iml diff --git a/src/main/resources/templates/calendar_html.iml b/src/main/resources/templates/calendar_html.iml deleted file mode 100644 index 9465dd8..0000000 --- a/src/main/resources/templates/calendar_html.iml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file From 8086f4cf52750a1b6f6bc4ae019e2e8d1b166238 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:01:56 +0900 Subject: [PATCH 10/37] Delete src/main/resources/templates/index.html --- src/main/resources/templates/index.html | 41 ------------------------- 1 file changed, 41 deletions(-) delete mode 100644 src/main/resources/templates/index.html diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html deleted file mode 100644 index 0c1c345..0000000 --- a/src/main/resources/templates/index.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - Calendar - - - -
-
- - - - -
-
-
Week 1
-
Week 2
-
Week 3
-
Week 4
-
- - - - - - - - - - - - - -
SunMonTueWedThuFriSat
-
- - - - From 5b5609c62d2b8da2fafe2a373faa495215d76f60 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:02:36 +0900 Subject: [PATCH 11/37] Add calendar ui --- src/main/resources/templates/calendar_DG.css | 168 ++++++++++++++++++ src/main/resources/templates/calendar_DG.html | 39 ++++ src/main/resources/templates/calendar_DG.iml | 11 ++ src/main/resources/templates/calendar_DG.js | 41 +++++ 4 files changed, 259 insertions(+) create mode 100644 src/main/resources/templates/calendar_DG.css create mode 100644 src/main/resources/templates/calendar_DG.html create mode 100644 src/main/resources/templates/calendar_DG.iml create mode 100644 src/main/resources/templates/calendar_DG.js diff --git a/src/main/resources/templates/calendar_DG.css b/src/main/resources/templates/calendar_DG.css new file mode 100644 index 0000000..b4a61b2 --- /dev/null +++ b/src/main/resources/templates/calendar_DG.css @@ -0,0 +1,168 @@ +/* 전체 페이지 스타일 */ +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: #F1F3F9; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; +} + +/* 홈 버튼 스타일 */ +.home { + position: absolute; + top: 20px; + left: 20px; + background-color: #6FD1C5; + color: #FFFFFF; + padding: 10px 15px; + border-radius: 6px; + text-decoration: none; + font-weight: bold; + font-size: 14px; + transition: background-color 0.3s; +} + +.home:hover { + background-color: #5BAA9D; +} + +/* 탭 메뉴 스타일 */ +.tabs { + position: absolute; + top: 20px; + right: 20px; + display: flex; + gap: 10px; +} + +.tabs button { + background-color: #6FD1C5; + border: none; + border-radius: 6px; + padding: 8px 20px; + cursor: pointer; + font-size: 14px; + font-weight: bold; + color: #FFFFFF; + transition: all 0.3s ease; +} + +.tabs button:hover { + background-color: #5BAA9D; +} + +.tabs .active { + background-color: #5BAA9D; +} + +/* 메인 컨테이너 스타일 */ +.container { + background-color: #FFFFFF; + width: 90%; + max-width: 700px; + padding: 30px; + border-radius: 12px; + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); + margin-top: 80px; + height: calc(100vh - 120px); + overflow-y: auto; +} + +.section h2 { + font-size: 28px; + font-weight: bold; + color: #333333; + margin-bottom: 20px; + text-align: center; +} + +.date-box { + background-color: #E3F2FD; + padding: 12px; + margin: 10px auto 20px; + text-align: center; + font-size: 20px; + font-weight: bold; + color: #1976D2; + border-radius: 10px; + width: 80px; + border: 1px solid #BBDEFB; +} + +/* 진행률 바 스타일 */ +.progress-container { + position: relative; + background-color: #E0E0E0; + border-radius: 10px; + height: 20px; + margin: 20px 0; + overflow: hidden; +} + +.progress-bar { + background-color: #6FD1C5; + height: 100%; + width: 0; /* 초기 진행률 */ + transition: width 0.5s ease-in-out; +} + +.progress-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 12px; + font-weight: bold; + color: #424242; +} + +/* 할 일 아이템 스타일 */ +.todo-item { + background-color: #FAFAFA; + border: 1px solid #EEEEEE; + border-radius: 10px; + padding: 15px; + margin-bottom: 15px; + display: flex; + flex-direction: column; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.todo-item h3 { + margin: 0 0 8px; + font-size: 16px; + color: #424242; +} + +.todo-item p { + margin: 0 0 10px; + color: #757575; + font-size: 14px; +} + +.priority { + display: inline-block; + padding: 4px 12px; + border-radius: 12px; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + width: fit-content; +} + +.priority.high { + color: #D32F2F; + background-color: #FFCDD2; +} + +.priority.medium { + color: #F57C00; + background-color: #FFE0B2; +} + +.priority.low { + color: #388E3C; + background-color: #C8E6C9; +} diff --git a/src/main/resources/templates/calendar_DG.html b/src/main/resources/templates/calendar_DG.html new file mode 100644 index 0000000..30994b1 --- /dev/null +++ b/src/main/resources/templates/calendar_DG.html @@ -0,0 +1,39 @@ + + + + + + Daily To-Do List + + + + +Home + + +
+ + + +
+ + +
+
+

Daily

+
16
+ + +
+
+ 0% +
+ +
+
+
+ + + + + diff --git a/src/main/resources/templates/calendar_DG.iml b/src/main/resources/templates/calendar_DG.iml new file mode 100644 index 0000000..9465dd8 --- /dev/null +++ b/src/main/resources/templates/calendar_DG.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/main/resources/templates/calendar_DG.js b/src/main/resources/templates/calendar_DG.js new file mode 100644 index 0000000..30ff4ae --- /dev/null +++ b/src/main/resources/templates/calendar_DG.js @@ -0,0 +1,41 @@ +// To-Do 리스트 데이터 +const todoData = [ + { title: "Task Title", description: "Description of the task goes here.", priority: "high" }, + { title: "Another Task", description: "Description of the task goes here.", priority: "medium" }, + { title: "Low Priority Task", description: "Description of the task goes here.", priority: "low" } +]; + +// HTML 요소 가져오기 +const todoList = document.getElementById('todoList'); +const progressBar = document.getElementById('progressBar'); +const progressLabel = document.getElementById('progressLabel'); + +// 진행률 바 업데이트 함수 +function updateProgressBar(rate = 0) { + progressBar.style.width = `${rate}%`; + progressLabel.textContent = `${rate}%`; +} + +// To-Do 리스트 렌더링 함수 +function renderTodoList() { + todoList.innerHTML = ""; // 기존 내용 초기화 + + todoData.forEach(task => { + const todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + + todoItem.innerHTML = ` +

${task.title}

+

${task.description}

+ ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} + `; + + todoList.appendChild(todoItem); + }); +} + +// 초기 렌더링 +document.addEventListener('DOMContentLoaded', () => { + renderTodoList(); // To-Do 리스트 렌더링 + updateProgressBar(0); // 초기 진행률 0% +}); From f9805c0235437e9a24d6d41c28e56baef35c34d5 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:03:34 +0900 Subject: [PATCH 12/37] Add calendar main ui --- src/main/resources/templates/calendar.css | 145 ++++++++++++++++++ src/main/resources/templates/calendar.html | 44 ++++++ src/main/resources/templates/calendar.js | 87 +++++++++++ .../resources/templates/calendar_html.iml | 11 ++ 4 files changed, 287 insertions(+) create mode 100644 src/main/resources/templates/calendar.css create mode 100644 src/main/resources/templates/calendar.html create mode 100644 src/main/resources/templates/calendar.js create mode 100644 src/main/resources/templates/calendar_html.iml diff --git a/src/main/resources/templates/calendar.css b/src/main/resources/templates/calendar.css new file mode 100644 index 0000000..f187f6f --- /dev/null +++ b/src/main/resources/templates/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/src/main/resources/templates/calendar.html b/src/main/resources/templates/calendar.html new file mode 100644 index 0000000..c647654 --- /dev/null +++ b/src/main/resources/templates/calendar.html @@ -0,0 +1,44 @@ + + + + + + Calendar + + + +
+
+ + + +
+ + + +
+
+
+
Week 1
+
Week 2
+
Week 3
+
Week 4
+
+ + + + + + + + + + + + + +
SunMonTueWedThuFriSat
+
+ + + diff --git a/src/main/resources/templates/calendar.js b/src/main/resources/templates/calendar.js new file mode 100644 index 0000000..4a360a6 --- /dev/null +++ b/src/main/resources/templates/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 = ""; + for (let i = 0; i < firstDay; i++) { + row += ""; // 첫 주 시작 요일 앞의 빈 칸 + } + + for (let day = 1; day <= daysInMonth; day++) { + if ((firstDay + day - 1) % 7 === 0 && day !== 1) { + row += ""; // 주 단위로 행 변경 + } + + 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 += ` + +
${day}
+ ${greenTag > 0 ? `
Green: ${greenTag}
` : ""} + ${redTag > 0 ? `
Red: ${redTag}
` : ""} + `; + } + + row += ""; + 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(); diff --git a/src/main/resources/templates/calendar_html.iml b/src/main/resources/templates/calendar_html.iml new file mode 100644 index 0000000..9465dd8 --- /dev/null +++ b/src/main/resources/templates/calendar_html.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file From 2efcd53dab94bdc5f46ba40c07e842d80df48c5f Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:04:54 +0900 Subject: [PATCH 13/37] Add calendar_MG ui --- src/main/resources/templates/calendar_MG.css | 169 ++++++++++++++++++ src/main/resources/templates/calendar_MG.html | 38 ++++ src/main/resources/templates/calendar_MG.iml | 11 ++ src/main/resources/templates/calendar_MG.js | 41 +++++ 4 files changed, 259 insertions(+) create mode 100644 src/main/resources/templates/calendar_MG.css create mode 100644 src/main/resources/templates/calendar_MG.html create mode 100644 src/main/resources/templates/calendar_MG.iml create mode 100644 src/main/resources/templates/calendar_MG.js diff --git a/src/main/resources/templates/calendar_MG.css b/src/main/resources/templates/calendar_MG.css new file mode 100644 index 0000000..dfdbc22 --- /dev/null +++ b/src/main/resources/templates/calendar_MG.css @@ -0,0 +1,169 @@ +/* 전체 페이지 스타일 */ +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: #F1F3F9; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; +} + +/* 홈 버튼 스타일 */ +.home { + position: absolute; + top: 20px; + left: 20px; + background-color: #6FD1C5; + color: #FFFFFF; + padding: 10px 15px; + border-radius: 6px; + text-decoration: none; + font-weight: bold; + font-size: 14px; + transition: background-color 0.3s; +} + +.home:hover { + background-color: #5BAA9D; +} + +/* 탭 메뉴 스타일 */ +.tabs { + position: absolute; + top: 20px; + right: 20px; + display: flex; + gap: 10px; +} + +.tabs button { + background-color: #6FD1C5; + border: none; + border-radius: 6px; + padding: 8px 20px; + cursor: pointer; + font-size: 14px; + font-weight: bold; + color: #FFFFFF; + transition: all 0.3s ease; +} + +.tabs button:hover { + background-color: #5BAA9D; +} + +.tabs .active { + background-color: #5BAA9D; +} + +/* 메인 컨테이너 스타일 */ +.container { + background-color: #FFFFFF; + width: 90%; + max-width: 700px; + padding: 30px; + border-radius: 12px; + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); + margin-top: 80px; + height: calc(100vh - 120px); + overflow-y: auto; +} + +.section h2 { + font-size: 28px; + font-weight: bold; + color: #333333; + margin-bottom: 20px; + text-align: center; +} + +/* 월 표시 */ +.month-box { + background-color: #E3F2FD; + padding: 12px; + margin: 10px auto 20px; + text-align: center; + font-size: 20px; + font-weight: bold; + color: #1976D2; + border-radius: 10px; + width: 80px; + border: 1px solid #BBDEFB; +} + +/* 진행률 바 스타일 */ +.progress-container { + width: 100%; + background-color: #EEEEEE; + border-radius: 12px; + margin-bottom: 20px; + position: relative; + height: 20px; +} + +.progress-bar { + height: 100%; + background-color: #6FD1C5; + border-radius: 12px; + width: 0%; /* 초기 진행률 0% */ + transition: width 0.5s ease-in-out; +} + +.progress-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: bold; + font-size: 12px; +} + +/* 할 일 아이템 스타일 */ +.todo-item { + background-color: #FAFAFA; + border: 1px solid #EEEEEE; + border-radius: 10px; + padding: 15px; + margin-bottom: 15px; + display: flex; + flex-direction: column; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.todo-item h3 { + margin: 0 0 8px; + font-size: 16px; + color: #424242; +} + +.todo-item p { + margin: 0 0 10px; + color: #757575; + font-size: 14px; +} + +.priority { + display: inline-block; + padding: 4px 12px; + border-radius: 12px; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + width: fit-content; +} + +.priority.high { + color: #D32F2F; + background-color: #FFCDD2; +} + +.priority.medium { + color: #F57C00; + background-color: #FFE0B2; +} + +.priority.low { + color: #388E3C; + background-color: #C8E6C9; +} diff --git a/src/main/resources/templates/calendar_MG.html b/src/main/resources/templates/calendar_MG.html new file mode 100644 index 0000000..2d67252 --- /dev/null +++ b/src/main/resources/templates/calendar_MG.html @@ -0,0 +1,38 @@ + + + + + + Monthly To-Do List + + + + +Home + + +
+ + + +
+ + +
+
+

Monthly

+ +
+
+ 0% +
+
12
+
+
+
+ + + + + + diff --git a/src/main/resources/templates/calendar_MG.iml b/src/main/resources/templates/calendar_MG.iml new file mode 100644 index 0000000..9465dd8 --- /dev/null +++ b/src/main/resources/templates/calendar_MG.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/main/resources/templates/calendar_MG.js b/src/main/resources/templates/calendar_MG.js new file mode 100644 index 0000000..d4891d4 --- /dev/null +++ b/src/main/resources/templates/calendar_MG.js @@ -0,0 +1,41 @@ +// To-Do 리스트 데이터 예시 +const todoData = [ + { title: "Task Title", description: "Description of the task goes here.", priority: "high" }, + { title: "Another Task", description: "Description of the task goes here.", priority: "medium" }, + { title: "Low Priority Task", description: "Description of the task goes here.", priority: "low" } +]; + +// HTML 요소 가져오기 +const todoList = document.getElementById('todoList'); +const progressBar = document.getElementById('progressBar'); +const progressLabel = document.getElementById('progressLabel'); + +// To-Do 리스트 렌더링 함수 +function renderTodoList(tasks = []) { + todoList.innerHTML = ""; // 기존 내용 초기화 + + tasks.forEach(task => { + const todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + + todoItem.innerHTML = ` +

${task.title}

+

${task.description}

+ ${task.priority.toUpperCase()} + `; + + todoList.appendChild(todoItem); + }); +} + +// 진행률 바 업데이트 함수 +function updateProgressBar(rate = 0) { + progressBar.style.width = `${rate}%`; + progressLabel.textContent = `${rate}%`; +} + +// API 호출 시뮬레이션 (테스트용) +document.addEventListener('DOMContentLoaded', () => { + renderTodoList(todoData); // 더미 데이터 렌더링 + updateProgressBar(0); // 초기 진행률은 0% +}); From 41067f9c7c0cc76a5897a3025174df2812b5a693 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:15:56 +0900 Subject: [PATCH 14/37] Delete src/main/resources/templates/calendar.css --- src/main/resources/templates/calendar.css | 145 ---------------------- 1 file changed, 145 deletions(-) delete mode 100644 src/main/resources/templates/calendar.css diff --git a/src/main/resources/templates/calendar.css b/src/main/resources/templates/calendar.css deleted file mode 100644 index f187f6f..0000000 --- a/src/main/resources/templates/calendar.css +++ /dev/null @@ -1,145 +0,0 @@ -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; -} From 01619695fecfbdc8538999db2a8f672513e90d10 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:16:05 +0900 Subject: [PATCH 15/37] Delete src/main/resources/templates/calendar.html --- src/main/resources/templates/calendar.html | 44 ---------------------- 1 file changed, 44 deletions(-) delete mode 100644 src/main/resources/templates/calendar.html diff --git a/src/main/resources/templates/calendar.html b/src/main/resources/templates/calendar.html deleted file mode 100644 index c647654..0000000 --- a/src/main/resources/templates/calendar.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - Calendar - - - -
-
- - - -
- - - -
-
-
-
Week 1
-
Week 2
-
Week 3
-
Week 4
-
- - - - - - - - - - - - - -
SunMonTueWedThuFriSat
-
- - - From 53411315f8897515f1ed02f4b5bfc68573cba468 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:16:14 +0900 Subject: [PATCH 16/37] Delete src/main/resources/templates/calendar.js --- src/main/resources/templates/calendar.js | 87 ------------------------ 1 file changed, 87 deletions(-) delete mode 100644 src/main/resources/templates/calendar.js diff --git a/src/main/resources/templates/calendar.js b/src/main/resources/templates/calendar.js deleted file mode 100644 index 4a360a6..0000000 --- a/src/main/resources/templates/calendar.js +++ /dev/null @@ -1,87 +0,0 @@ -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 = ""; - for (let i = 0; i < firstDay; i++) { - row += ""; // 첫 주 시작 요일 앞의 빈 칸 - } - - for (let day = 1; day <= daysInMonth; day++) { - if ((firstDay + day - 1) % 7 === 0 && day !== 1) { - row += ""; // 주 단위로 행 변경 - } - - 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 += ` - -
${day}
- ${greenTag > 0 ? `
Green: ${greenTag}
` : ""} - ${redTag > 0 ? `
Red: ${redTag}
` : ""} - `; - } - - row += ""; - 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(); From ac3103e2b743deb7bffff2f33f944a84641d3b24 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:16:23 +0900 Subject: [PATCH 17/37] Delete src/main/resources/templates/calendar_DG.css --- src/main/resources/templates/calendar_DG.css | 168 ------------------- 1 file changed, 168 deletions(-) delete mode 100644 src/main/resources/templates/calendar_DG.css diff --git a/src/main/resources/templates/calendar_DG.css b/src/main/resources/templates/calendar_DG.css deleted file mode 100644 index b4a61b2..0000000 --- a/src/main/resources/templates/calendar_DG.css +++ /dev/null @@ -1,168 +0,0 @@ -/* 전체 페이지 스타일 */ -body { - margin: 0; - font-family: Arial, sans-serif; - background-color: #F1F3F9; - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; -} - -/* 홈 버튼 스타일 */ -.home { - position: absolute; - top: 20px; - left: 20px; - background-color: #6FD1C5; - color: #FFFFFF; - padding: 10px 15px; - border-radius: 6px; - text-decoration: none; - font-weight: bold; - font-size: 14px; - transition: background-color 0.3s; -} - -.home:hover { - background-color: #5BAA9D; -} - -/* 탭 메뉴 스타일 */ -.tabs { - position: absolute; - top: 20px; - right: 20px; - display: flex; - gap: 10px; -} - -.tabs button { - background-color: #6FD1C5; - border: none; - border-radius: 6px; - padding: 8px 20px; - cursor: pointer; - font-size: 14px; - font-weight: bold; - color: #FFFFFF; - transition: all 0.3s ease; -} - -.tabs button:hover { - background-color: #5BAA9D; -} - -.tabs .active { - background-color: #5BAA9D; -} - -/* 메인 컨테이너 스타일 */ -.container { - background-color: #FFFFFF; - width: 90%; - max-width: 700px; - padding: 30px; - border-radius: 12px; - box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); - margin-top: 80px; - height: calc(100vh - 120px); - overflow-y: auto; -} - -.section h2 { - font-size: 28px; - font-weight: bold; - color: #333333; - margin-bottom: 20px; - text-align: center; -} - -.date-box { - background-color: #E3F2FD; - padding: 12px; - margin: 10px auto 20px; - text-align: center; - font-size: 20px; - font-weight: bold; - color: #1976D2; - border-radius: 10px; - width: 80px; - border: 1px solid #BBDEFB; -} - -/* 진행률 바 스타일 */ -.progress-container { - position: relative; - background-color: #E0E0E0; - border-radius: 10px; - height: 20px; - margin: 20px 0; - overflow: hidden; -} - -.progress-bar { - background-color: #6FD1C5; - height: 100%; - width: 0; /* 초기 진행률 */ - transition: width 0.5s ease-in-out; -} - -.progress-label { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 12px; - font-weight: bold; - color: #424242; -} - -/* 할 일 아이템 스타일 */ -.todo-item { - background-color: #FAFAFA; - border: 1px solid #EEEEEE; - border-radius: 10px; - padding: 15px; - margin-bottom: 15px; - display: flex; - flex-direction: column; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); -} - -.todo-item h3 { - margin: 0 0 8px; - font-size: 16px; - color: #424242; -} - -.todo-item p { - margin: 0 0 10px; - color: #757575; - font-size: 14px; -} - -.priority { - display: inline-block; - padding: 4px 12px; - border-radius: 12px; - font-size: 12px; - font-weight: bold; - text-transform: uppercase; - width: fit-content; -} - -.priority.high { - color: #D32F2F; - background-color: #FFCDD2; -} - -.priority.medium { - color: #F57C00; - background-color: #FFE0B2; -} - -.priority.low { - color: #388E3C; - background-color: #C8E6C9; -} From c62a5e1b3f6b85e8e0489dd36e67b555de9019a2 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:16:33 +0900 Subject: [PATCH 18/37] Delete src/main/resources/templates/calendar_DG.html --- src/main/resources/templates/calendar_DG.html | 39 ------------------- 1 file changed, 39 deletions(-) delete mode 100644 src/main/resources/templates/calendar_DG.html diff --git a/src/main/resources/templates/calendar_DG.html b/src/main/resources/templates/calendar_DG.html deleted file mode 100644 index 30994b1..0000000 --- a/src/main/resources/templates/calendar_DG.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - Daily To-Do List - - - - -Home - - -
- - - -
- - -
-
-

Daily

-
16
- - -
-
- 0% -
- -
-
-
- - - - - From 2d817b5f4f12189b6d10a0d7642b1c80a8b8e7d7 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:16:40 +0900 Subject: [PATCH 19/37] Delete src/main/resources/templates/calendar_DG.iml --- src/main/resources/templates/calendar_DG.iml | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/main/resources/templates/calendar_DG.iml diff --git a/src/main/resources/templates/calendar_DG.iml b/src/main/resources/templates/calendar_DG.iml deleted file mode 100644 index 9465dd8..0000000 --- a/src/main/resources/templates/calendar_DG.iml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file From 7505ba6b4f51878fd349cf29a38c3a1b1c9ee7a4 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:16:50 +0900 Subject: [PATCH 20/37] Delete src/main/resources/templates/calendar_DG.js --- src/main/resources/templates/calendar_DG.js | 41 --------------------- 1 file changed, 41 deletions(-) delete mode 100644 src/main/resources/templates/calendar_DG.js diff --git a/src/main/resources/templates/calendar_DG.js b/src/main/resources/templates/calendar_DG.js deleted file mode 100644 index 30ff4ae..0000000 --- a/src/main/resources/templates/calendar_DG.js +++ /dev/null @@ -1,41 +0,0 @@ -// To-Do 리스트 데이터 -const todoData = [ - { title: "Task Title", description: "Description of the task goes here.", priority: "high" }, - { title: "Another Task", description: "Description of the task goes here.", priority: "medium" }, - { title: "Low Priority Task", description: "Description of the task goes here.", priority: "low" } -]; - -// HTML 요소 가져오기 -const todoList = document.getElementById('todoList'); -const progressBar = document.getElementById('progressBar'); -const progressLabel = document.getElementById('progressLabel'); - -// 진행률 바 업데이트 함수 -function updateProgressBar(rate = 0) { - progressBar.style.width = `${rate}%`; - progressLabel.textContent = `${rate}%`; -} - -// To-Do 리스트 렌더링 함수 -function renderTodoList() { - todoList.innerHTML = ""; // 기존 내용 초기화 - - todoData.forEach(task => { - const todoItem = document.createElement('div'); - todoItem.classList.add('todo-item'); - - todoItem.innerHTML = ` -

${task.title}

-

${task.description}

- ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} - `; - - todoList.appendChild(todoItem); - }); -} - -// 초기 렌더링 -document.addEventListener('DOMContentLoaded', () => { - renderTodoList(); // To-Do 리스트 렌더링 - updateProgressBar(0); // 초기 진행률 0% -}); From b146e076fe3a2bea2ecd661be5a00e0371bfb052 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:17:00 +0900 Subject: [PATCH 21/37] Delete src/main/resources/templates/calendar_MG.css --- src/main/resources/templates/calendar_MG.css | 169 ------------------- 1 file changed, 169 deletions(-) delete mode 100644 src/main/resources/templates/calendar_MG.css diff --git a/src/main/resources/templates/calendar_MG.css b/src/main/resources/templates/calendar_MG.css deleted file mode 100644 index dfdbc22..0000000 --- a/src/main/resources/templates/calendar_MG.css +++ /dev/null @@ -1,169 +0,0 @@ -/* 전체 페이지 스타일 */ -body { - margin: 0; - font-family: Arial, sans-serif; - background-color: #F1F3F9; - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; -} - -/* 홈 버튼 스타일 */ -.home { - position: absolute; - top: 20px; - left: 20px; - background-color: #6FD1C5; - color: #FFFFFF; - padding: 10px 15px; - border-radius: 6px; - text-decoration: none; - font-weight: bold; - font-size: 14px; - transition: background-color 0.3s; -} - -.home:hover { - background-color: #5BAA9D; -} - -/* 탭 메뉴 스타일 */ -.tabs { - position: absolute; - top: 20px; - right: 20px; - display: flex; - gap: 10px; -} - -.tabs button { - background-color: #6FD1C5; - border: none; - border-radius: 6px; - padding: 8px 20px; - cursor: pointer; - font-size: 14px; - font-weight: bold; - color: #FFFFFF; - transition: all 0.3s ease; -} - -.tabs button:hover { - background-color: #5BAA9D; -} - -.tabs .active { - background-color: #5BAA9D; -} - -/* 메인 컨테이너 스타일 */ -.container { - background-color: #FFFFFF; - width: 90%; - max-width: 700px; - padding: 30px; - border-radius: 12px; - box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); - margin-top: 80px; - height: calc(100vh - 120px); - overflow-y: auto; -} - -.section h2 { - font-size: 28px; - font-weight: bold; - color: #333333; - margin-bottom: 20px; - text-align: center; -} - -/* 월 표시 */ -.month-box { - background-color: #E3F2FD; - padding: 12px; - margin: 10px auto 20px; - text-align: center; - font-size: 20px; - font-weight: bold; - color: #1976D2; - border-radius: 10px; - width: 80px; - border: 1px solid #BBDEFB; -} - -/* 진행률 바 스타일 */ -.progress-container { - width: 100%; - background-color: #EEEEEE; - border-radius: 12px; - margin-bottom: 20px; - position: relative; - height: 20px; -} - -.progress-bar { - height: 100%; - background-color: #6FD1C5; - border-radius: 12px; - width: 0%; /* 초기 진행률 0% */ - transition: width 0.5s ease-in-out; -} - -.progress-label { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-weight: bold; - font-size: 12px; -} - -/* 할 일 아이템 스타일 */ -.todo-item { - background-color: #FAFAFA; - border: 1px solid #EEEEEE; - border-radius: 10px; - padding: 15px; - margin-bottom: 15px; - display: flex; - flex-direction: column; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); -} - -.todo-item h3 { - margin: 0 0 8px; - font-size: 16px; - color: #424242; -} - -.todo-item p { - margin: 0 0 10px; - color: #757575; - font-size: 14px; -} - -.priority { - display: inline-block; - padding: 4px 12px; - border-radius: 12px; - font-size: 12px; - font-weight: bold; - text-transform: uppercase; - width: fit-content; -} - -.priority.high { - color: #D32F2F; - background-color: #FFCDD2; -} - -.priority.medium { - color: #F57C00; - background-color: #FFE0B2; -} - -.priority.low { - color: #388E3C; - background-color: #C8E6C9; -} From 3c3a7230c3426b816de7078a2c65e35aa3f9e6f5 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:17:09 +0900 Subject: [PATCH 22/37] Delete src/main/resources/templates/calendar_MG.html --- src/main/resources/templates/calendar_MG.html | 38 ------------------- 1 file changed, 38 deletions(-) delete mode 100644 src/main/resources/templates/calendar_MG.html diff --git a/src/main/resources/templates/calendar_MG.html b/src/main/resources/templates/calendar_MG.html deleted file mode 100644 index 2d67252..0000000 --- a/src/main/resources/templates/calendar_MG.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - Monthly To-Do List - - - - -Home - - -
- - - -
- - -
-
-

Monthly

- -
-
- 0% -
-
12
-
-
-
- - - - - - From 86cebd7b136e44ae40d5963ad2b5aaae8c3533cf Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:17:17 +0900 Subject: [PATCH 23/37] Delete src/main/resources/templates/calendar_MG.iml --- src/main/resources/templates/calendar_MG.iml | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/main/resources/templates/calendar_MG.iml diff --git a/src/main/resources/templates/calendar_MG.iml b/src/main/resources/templates/calendar_MG.iml deleted file mode 100644 index 9465dd8..0000000 --- a/src/main/resources/templates/calendar_MG.iml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file From 8b3a469744fe20e7c2177378519891cb8c9247cb Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:17:25 +0900 Subject: [PATCH 24/37] Delete src/main/resources/templates/calendar_MG.js --- src/main/resources/templates/calendar_MG.js | 41 --------------------- 1 file changed, 41 deletions(-) delete mode 100644 src/main/resources/templates/calendar_MG.js diff --git a/src/main/resources/templates/calendar_MG.js b/src/main/resources/templates/calendar_MG.js deleted file mode 100644 index d4891d4..0000000 --- a/src/main/resources/templates/calendar_MG.js +++ /dev/null @@ -1,41 +0,0 @@ -// To-Do 리스트 데이터 예시 -const todoData = [ - { title: "Task Title", description: "Description of the task goes here.", priority: "high" }, - { title: "Another Task", description: "Description of the task goes here.", priority: "medium" }, - { title: "Low Priority Task", description: "Description of the task goes here.", priority: "low" } -]; - -// HTML 요소 가져오기 -const todoList = document.getElementById('todoList'); -const progressBar = document.getElementById('progressBar'); -const progressLabel = document.getElementById('progressLabel'); - -// To-Do 리스트 렌더링 함수 -function renderTodoList(tasks = []) { - todoList.innerHTML = ""; // 기존 내용 초기화 - - tasks.forEach(task => { - const todoItem = document.createElement('div'); - todoItem.classList.add('todo-item'); - - todoItem.innerHTML = ` -

${task.title}

-

${task.description}

- ${task.priority.toUpperCase()} - `; - - todoList.appendChild(todoItem); - }); -} - -// 진행률 바 업데이트 함수 -function updateProgressBar(rate = 0) { - progressBar.style.width = `${rate}%`; - progressLabel.textContent = `${rate}%`; -} - -// API 호출 시뮬레이션 (테스트용) -document.addEventListener('DOMContentLoaded', () => { - renderTodoList(todoData); // 더미 데이터 렌더링 - updateProgressBar(0); // 초기 진행률은 0% -}); From 3b7535ef8340193904b3a623bc332c17456ea82c Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:17:57 +0900 Subject: [PATCH 25/37] Add calendar_DG ui --- src/main/resources/templates/calendar_DG.css | 168 ++++++++++++++++++ src/main/resources/templates/calendar_DG.html | 48 +++++ src/main/resources/templates/calendar_DG.iml | 11 ++ src/main/resources/templates/calendar_DG.js | 41 +++++ 4 files changed, 268 insertions(+) create mode 100644 src/main/resources/templates/calendar_DG.css create mode 100644 src/main/resources/templates/calendar_DG.html create mode 100644 src/main/resources/templates/calendar_DG.iml create mode 100644 src/main/resources/templates/calendar_DG.js diff --git a/src/main/resources/templates/calendar_DG.css b/src/main/resources/templates/calendar_DG.css new file mode 100644 index 0000000..b4a61b2 --- /dev/null +++ b/src/main/resources/templates/calendar_DG.css @@ -0,0 +1,168 @@ +/* 전체 페이지 스타일 */ +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: #F1F3F9; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; +} + +/* 홈 버튼 스타일 */ +.home { + position: absolute; + top: 20px; + left: 20px; + background-color: #6FD1C5; + color: #FFFFFF; + padding: 10px 15px; + border-radius: 6px; + text-decoration: none; + font-weight: bold; + font-size: 14px; + transition: background-color 0.3s; +} + +.home:hover { + background-color: #5BAA9D; +} + +/* 탭 메뉴 스타일 */ +.tabs { + position: absolute; + top: 20px; + right: 20px; + display: flex; + gap: 10px; +} + +.tabs button { + background-color: #6FD1C5; + border: none; + border-radius: 6px; + padding: 8px 20px; + cursor: pointer; + font-size: 14px; + font-weight: bold; + color: #FFFFFF; + transition: all 0.3s ease; +} + +.tabs button:hover { + background-color: #5BAA9D; +} + +.tabs .active { + background-color: #5BAA9D; +} + +/* 메인 컨테이너 스타일 */ +.container { + background-color: #FFFFFF; + width: 90%; + max-width: 700px; + padding: 30px; + border-radius: 12px; + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); + margin-top: 80px; + height: calc(100vh - 120px); + overflow-y: auto; +} + +.section h2 { + font-size: 28px; + font-weight: bold; + color: #333333; + margin-bottom: 20px; + text-align: center; +} + +.date-box { + background-color: #E3F2FD; + padding: 12px; + margin: 10px auto 20px; + text-align: center; + font-size: 20px; + font-weight: bold; + color: #1976D2; + border-radius: 10px; + width: 80px; + border: 1px solid #BBDEFB; +} + +/* 진행률 바 스타일 */ +.progress-container { + position: relative; + background-color: #E0E0E0; + border-radius: 10px; + height: 20px; + margin: 20px 0; + overflow: hidden; +} + +.progress-bar { + background-color: #6FD1C5; + height: 100%; + width: 0; /* 초기 진행률 */ + transition: width 0.5s ease-in-out; +} + +.progress-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 12px; + font-weight: bold; + color: #424242; +} + +/* 할 일 아이템 스타일 */ +.todo-item { + background-color: #FAFAFA; + border: 1px solid #EEEEEE; + border-radius: 10px; + padding: 15px; + margin-bottom: 15px; + display: flex; + flex-direction: column; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.todo-item h3 { + margin: 0 0 8px; + font-size: 16px; + color: #424242; +} + +.todo-item p { + margin: 0 0 10px; + color: #757575; + font-size: 14px; +} + +.priority { + display: inline-block; + padding: 4px 12px; + border-radius: 12px; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + width: fit-content; +} + +.priority.high { + color: #D32F2F; + background-color: #FFCDD2; +} + +.priority.medium { + color: #F57C00; + background-color: #FFE0B2; +} + +.priority.low { + color: #388E3C; + background-color: #C8E6C9; +} diff --git a/src/main/resources/templates/calendar_DG.html b/src/main/resources/templates/calendar_DG.html new file mode 100644 index 0000000..4fabbc8 --- /dev/null +++ b/src/main/resources/templates/calendar_DG.html @@ -0,0 +1,48 @@ + + + + + + Daily To-Do List + + + + +Home + + +
+ + + +
+ + +
+
+

Daily

+ +
16
+ + +
+
+ 0% +
+ + +
+
+

Task Title

+

Description of the task goes here.

+ High +
+
+
+
+ + + + diff --git a/src/main/resources/templates/calendar_DG.iml b/src/main/resources/templates/calendar_DG.iml new file mode 100644 index 0000000..9465dd8 --- /dev/null +++ b/src/main/resources/templates/calendar_DG.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/main/resources/templates/calendar_DG.js b/src/main/resources/templates/calendar_DG.js new file mode 100644 index 0000000..30ff4ae --- /dev/null +++ b/src/main/resources/templates/calendar_DG.js @@ -0,0 +1,41 @@ +// To-Do 리스트 데이터 +const todoData = [ + { title: "Task Title", description: "Description of the task goes here.", priority: "high" }, + { title: "Another Task", description: "Description of the task goes here.", priority: "medium" }, + { title: "Low Priority Task", description: "Description of the task goes here.", priority: "low" } +]; + +// HTML 요소 가져오기 +const todoList = document.getElementById('todoList'); +const progressBar = document.getElementById('progressBar'); +const progressLabel = document.getElementById('progressLabel'); + +// 진행률 바 업데이트 함수 +function updateProgressBar(rate = 0) { + progressBar.style.width = `${rate}%`; + progressLabel.textContent = `${rate}%`; +} + +// To-Do 리스트 렌더링 함수 +function renderTodoList() { + todoList.innerHTML = ""; // 기존 내용 초기화 + + todoData.forEach(task => { + const todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + + todoItem.innerHTML = ` +

${task.title}

+

${task.description}

+ ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} + `; + + todoList.appendChild(todoItem); + }); +} + +// 초기 렌더링 +document.addEventListener('DOMContentLoaded', () => { + renderTodoList(); // To-Do 리스트 렌더링 + updateProgressBar(0); // 초기 진행률 0% +}); From 2ab1f0dfe4ea7085f8db524bd0223785d740b5da Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:18:39 +0900 Subject: [PATCH 26/37] Add calendar --- .gitignore | 27 +++------ calendar.css | 145 ++++++++++++++++++++++++++++++++++++++++++++++ calendar.html | 57 ++++++++++++++++++ calendar.js | 87 ++++++++++++++++++++++++++++ calendar_html.iml | 11 ++++ 5 files changed, 307 insertions(+), 20 deletions(-) create mode 100644 calendar.css create mode 100644 calendar.html create mode 100644 calendar.js create mode 100644 calendar_html.iml diff --git a/.gitignore b/.gitignore index 67fb678..f68d109 100644 --- 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 \ No newline at end of file diff --git a/calendar.css b/calendar.css new file mode 100644 index 0000000..f187f6f --- /dev/null +++ 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 new file mode 100644 index 0000000..7f4ec30 --- /dev/null +++ b/calendar.html @@ -0,0 +1,57 @@ + + + + + + Calendar + + + +
+
+ + + +
+ + + +
+
+ +
+
Week 1
+
+ + + + + + + + + + + + + + + + + + + +
SunMonTueWedThuFriSat
+
1
+ +
Green: 0
+
Red: 0
+
+
+ + + diff --git a/calendar.js b/calendar.js new file mode 100644 index 0000000..4a360a6 --- /dev/null +++ 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 = ""; + for (let i = 0; i < firstDay; i++) { + row += ""; // 첫 주 시작 요일 앞의 빈 칸 + } + + for (let day = 1; day <= daysInMonth; day++) { + if ((firstDay + day - 1) % 7 === 0 && day !== 1) { + row += ""; // 주 단위로 행 변경 + } + + 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 += ` + +
${day}
+ ${greenTag > 0 ? `
Green: ${greenTag}
` : ""} + ${redTag > 0 ? `
Red: ${redTag}
` : ""} + `; + } + + row += ""; + 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(); diff --git a/calendar_html.iml b/calendar_html.iml new file mode 100644 index 0000000..9465dd8 --- /dev/null +++ b/calendar_html.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file From 1b8c16b0b5801f5416cdb3625bd2d14593e25517 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:19:08 +0900 Subject: [PATCH 27/37] Add calendar_MG --- calendar_MG.css | 169 +++++++++++++++++++++++++++++++++++++++++++++++ calendar_MG.html | 38 +++++++++++ calendar_MG.iml | 11 +++ calendar_MG.js | 41 ++++++++++++ 4 files changed, 259 insertions(+) create mode 100644 calendar_MG.css create mode 100644 calendar_MG.html create mode 100644 calendar_MG.iml create mode 100644 calendar_MG.js diff --git a/calendar_MG.css b/calendar_MG.css new file mode 100644 index 0000000..dfdbc22 --- /dev/null +++ b/calendar_MG.css @@ -0,0 +1,169 @@ +/* 전체 페이지 스타일 */ +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: #F1F3F9; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; +} + +/* 홈 버튼 스타일 */ +.home { + position: absolute; + top: 20px; + left: 20px; + background-color: #6FD1C5; + color: #FFFFFF; + padding: 10px 15px; + border-radius: 6px; + text-decoration: none; + font-weight: bold; + font-size: 14px; + transition: background-color 0.3s; +} + +.home:hover { + background-color: #5BAA9D; +} + +/* 탭 메뉴 스타일 */ +.tabs { + position: absolute; + top: 20px; + right: 20px; + display: flex; + gap: 10px; +} + +.tabs button { + background-color: #6FD1C5; + border: none; + border-radius: 6px; + padding: 8px 20px; + cursor: pointer; + font-size: 14px; + font-weight: bold; + color: #FFFFFF; + transition: all 0.3s ease; +} + +.tabs button:hover { + background-color: #5BAA9D; +} + +.tabs .active { + background-color: #5BAA9D; +} + +/* 메인 컨테이너 스타일 */ +.container { + background-color: #FFFFFF; + width: 90%; + max-width: 700px; + padding: 30px; + border-radius: 12px; + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); + margin-top: 80px; + height: calc(100vh - 120px); + overflow-y: auto; +} + +.section h2 { + font-size: 28px; + font-weight: bold; + color: #333333; + margin-bottom: 20px; + text-align: center; +} + +/* 월 표시 */ +.month-box { + background-color: #E3F2FD; + padding: 12px; + margin: 10px auto 20px; + text-align: center; + font-size: 20px; + font-weight: bold; + color: #1976D2; + border-radius: 10px; + width: 80px; + border: 1px solid #BBDEFB; +} + +/* 진행률 바 스타일 */ +.progress-container { + width: 100%; + background-color: #EEEEEE; + border-radius: 12px; + margin-bottom: 20px; + position: relative; + height: 20px; +} + +.progress-bar { + height: 100%; + background-color: #6FD1C5; + border-radius: 12px; + width: 0%; /* 초기 진행률 0% */ + transition: width 0.5s ease-in-out; +} + +.progress-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: bold; + font-size: 12px; +} + +/* 할 일 아이템 스타일 */ +.todo-item { + background-color: #FAFAFA; + border: 1px solid #EEEEEE; + border-radius: 10px; + padding: 15px; + margin-bottom: 15px; + display: flex; + flex-direction: column; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.todo-item h3 { + margin: 0 0 8px; + font-size: 16px; + color: #424242; +} + +.todo-item p { + margin: 0 0 10px; + color: #757575; + font-size: 14px; +} + +.priority { + display: inline-block; + padding: 4px 12px; + border-radius: 12px; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + width: fit-content; +} + +.priority.high { + color: #D32F2F; + background-color: #FFCDD2; +} + +.priority.medium { + color: #F57C00; + background-color: #FFE0B2; +} + +.priority.low { + color: #388E3C; + background-color: #C8E6C9; +} diff --git a/calendar_MG.html b/calendar_MG.html new file mode 100644 index 0000000..2d67252 --- /dev/null +++ b/calendar_MG.html @@ -0,0 +1,38 @@ + + + + + + Monthly To-Do List + + + + +Home + + +
+ + + +
+ + +
+
+

Monthly

+ +
+
+ 0% +
+
12
+
+
+
+ + + + + + diff --git a/calendar_MG.iml b/calendar_MG.iml new file mode 100644 index 0000000..9465dd8 --- /dev/null +++ b/calendar_MG.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/calendar_MG.js b/calendar_MG.js new file mode 100644 index 0000000..d4891d4 --- /dev/null +++ b/calendar_MG.js @@ -0,0 +1,41 @@ +// To-Do 리스트 데이터 예시 +const todoData = [ + { title: "Task Title", description: "Description of the task goes here.", priority: "high" }, + { title: "Another Task", description: "Description of the task goes here.", priority: "medium" }, + { title: "Low Priority Task", description: "Description of the task goes here.", priority: "low" } +]; + +// HTML 요소 가져오기 +const todoList = document.getElementById('todoList'); +const progressBar = document.getElementById('progressBar'); +const progressLabel = document.getElementById('progressLabel'); + +// To-Do 리스트 렌더링 함수 +function renderTodoList(tasks = []) { + todoList.innerHTML = ""; // 기존 내용 초기화 + + tasks.forEach(task => { + const todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + + todoItem.innerHTML = ` +

${task.title}

+

${task.description}

+ ${task.priority.toUpperCase()} + `; + + todoList.appendChild(todoItem); + }); +} + +// 진행률 바 업데이트 함수 +function updateProgressBar(rate = 0) { + progressBar.style.width = `${rate}%`; + progressLabel.textContent = `${rate}%`; +} + +// API 호출 시뮬레이션 (테스트용) +document.addEventListener('DOMContentLoaded', () => { + renderTodoList(todoData); // 더미 데이터 렌더링 + updateProgressBar(0); // 초기 진행률은 0% +}); From 9a6f6850c964c9e472ec8cb6646b711e4199e02e Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:18:34 +0900 Subject: [PATCH 28/37] Delete src/main/resources/templates/calendar_DG.css --- src/main/resources/templates/calendar_DG.css | 168 ------------------- 1 file changed, 168 deletions(-) delete mode 100644 src/main/resources/templates/calendar_DG.css diff --git a/src/main/resources/templates/calendar_DG.css b/src/main/resources/templates/calendar_DG.css deleted file mode 100644 index b4a61b2..0000000 --- a/src/main/resources/templates/calendar_DG.css +++ /dev/null @@ -1,168 +0,0 @@ -/* 전체 페이지 스타일 */ -body { - margin: 0; - font-family: Arial, sans-serif; - background-color: #F1F3F9; - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; -} - -/* 홈 버튼 스타일 */ -.home { - position: absolute; - top: 20px; - left: 20px; - background-color: #6FD1C5; - color: #FFFFFF; - padding: 10px 15px; - border-radius: 6px; - text-decoration: none; - font-weight: bold; - font-size: 14px; - transition: background-color 0.3s; -} - -.home:hover { - background-color: #5BAA9D; -} - -/* 탭 메뉴 스타일 */ -.tabs { - position: absolute; - top: 20px; - right: 20px; - display: flex; - gap: 10px; -} - -.tabs button { - background-color: #6FD1C5; - border: none; - border-radius: 6px; - padding: 8px 20px; - cursor: pointer; - font-size: 14px; - font-weight: bold; - color: #FFFFFF; - transition: all 0.3s ease; -} - -.tabs button:hover { - background-color: #5BAA9D; -} - -.tabs .active { - background-color: #5BAA9D; -} - -/* 메인 컨테이너 스타일 */ -.container { - background-color: #FFFFFF; - width: 90%; - max-width: 700px; - padding: 30px; - border-radius: 12px; - box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); - margin-top: 80px; - height: calc(100vh - 120px); - overflow-y: auto; -} - -.section h2 { - font-size: 28px; - font-weight: bold; - color: #333333; - margin-bottom: 20px; - text-align: center; -} - -.date-box { - background-color: #E3F2FD; - padding: 12px; - margin: 10px auto 20px; - text-align: center; - font-size: 20px; - font-weight: bold; - color: #1976D2; - border-radius: 10px; - width: 80px; - border: 1px solid #BBDEFB; -} - -/* 진행률 바 스타일 */ -.progress-container { - position: relative; - background-color: #E0E0E0; - border-radius: 10px; - height: 20px; - margin: 20px 0; - overflow: hidden; -} - -.progress-bar { - background-color: #6FD1C5; - height: 100%; - width: 0; /* 초기 진행률 */ - transition: width 0.5s ease-in-out; -} - -.progress-label { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 12px; - font-weight: bold; - color: #424242; -} - -/* 할 일 아이템 스타일 */ -.todo-item { - background-color: #FAFAFA; - border: 1px solid #EEEEEE; - border-radius: 10px; - padding: 15px; - margin-bottom: 15px; - display: flex; - flex-direction: column; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); -} - -.todo-item h3 { - margin: 0 0 8px; - font-size: 16px; - color: #424242; -} - -.todo-item p { - margin: 0 0 10px; - color: #757575; - font-size: 14px; -} - -.priority { - display: inline-block; - padding: 4px 12px; - border-radius: 12px; - font-size: 12px; - font-weight: bold; - text-transform: uppercase; - width: fit-content; -} - -.priority.high { - color: #D32F2F; - background-color: #FFCDD2; -} - -.priority.medium { - color: #F57C00; - background-color: #FFE0B2; -} - -.priority.low { - color: #388E3C; - background-color: #C8E6C9; -} From 9bdf403ffce4c9157866ed5fc34ba19c8a150062 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:18:43 +0900 Subject: [PATCH 29/37] Delete src/main/resources/templates/calendar_DG.html --- src/main/resources/templates/calendar_DG.html | 48 ------------------- 1 file changed, 48 deletions(-) delete mode 100644 src/main/resources/templates/calendar_DG.html diff --git a/src/main/resources/templates/calendar_DG.html b/src/main/resources/templates/calendar_DG.html deleted file mode 100644 index 4fabbc8..0000000 --- a/src/main/resources/templates/calendar_DG.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - Daily To-Do List - - - - -Home - - -
- - - -
- - -
-
-

Daily

- -
16
- - -
-
- 0% -
- - -
-
-

Task Title

-

Description of the task goes here.

- High -
-
-
-
- - - - From 288645b2c1407c86f10ed93198fc8c829c5c02c6 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:18:51 +0900 Subject: [PATCH 30/37] Delete src/main/resources/templates/calendar_DG.iml --- src/main/resources/templates/calendar_DG.iml | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/main/resources/templates/calendar_DG.iml diff --git a/src/main/resources/templates/calendar_DG.iml b/src/main/resources/templates/calendar_DG.iml deleted file mode 100644 index 9465dd8..0000000 --- a/src/main/resources/templates/calendar_DG.iml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file From aec6726c62f924884d85d656fc17a0a81ea0c41a Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:18:59 +0900 Subject: [PATCH 31/37] Delete src/main/resources/templates/calendar_DG.js --- src/main/resources/templates/calendar_DG.js | 41 --------------------- 1 file changed, 41 deletions(-) delete mode 100644 src/main/resources/templates/calendar_DG.js diff --git a/src/main/resources/templates/calendar_DG.js b/src/main/resources/templates/calendar_DG.js deleted file mode 100644 index 30ff4ae..0000000 --- a/src/main/resources/templates/calendar_DG.js +++ /dev/null @@ -1,41 +0,0 @@ -// To-Do 리스트 데이터 -const todoData = [ - { title: "Task Title", description: "Description of the task goes here.", priority: "high" }, - { title: "Another Task", description: "Description of the task goes here.", priority: "medium" }, - { title: "Low Priority Task", description: "Description of the task goes here.", priority: "low" } -]; - -// HTML 요소 가져오기 -const todoList = document.getElementById('todoList'); -const progressBar = document.getElementById('progressBar'); -const progressLabel = document.getElementById('progressLabel'); - -// 진행률 바 업데이트 함수 -function updateProgressBar(rate = 0) { - progressBar.style.width = `${rate}%`; - progressLabel.textContent = `${rate}%`; -} - -// To-Do 리스트 렌더링 함수 -function renderTodoList() { - todoList.innerHTML = ""; // 기존 내용 초기화 - - todoData.forEach(task => { - const todoItem = document.createElement('div'); - todoItem.classList.add('todo-item'); - - todoItem.innerHTML = ` -

${task.title}

-

${task.description}

- ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} - `; - - todoList.appendChild(todoItem); - }); -} - -// 초기 렌더링 -document.addEventListener('DOMContentLoaded', () => { - renderTodoList(); // To-Do 리스트 렌더링 - updateProgressBar(0); // 초기 진행률 0% -}); From 2b7e426477ff60ad32416267275fd593d2373e48 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:19:07 +0900 Subject: [PATCH 32/37] Delete src/main/resources/templates/calendar_WG.css --- src/main/resources/templates/calendar_WG.css | 177 ------------------- 1 file changed, 177 deletions(-) delete mode 100644 src/main/resources/templates/calendar_WG.css diff --git a/src/main/resources/templates/calendar_WG.css b/src/main/resources/templates/calendar_WG.css deleted file mode 100644 index 3aa2ed1..0000000 --- a/src/main/resources/templates/calendar_WG.css +++ /dev/null @@ -1,177 +0,0 @@ -/* 전체 페이지 스타일 */ -body { - margin: 0; - font-family: Arial, sans-serif; - background-color: #F1F3F9; - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; -} - -/* 홈 버튼 스타일 */ -.home { - position: absolute; - top: 20px; - left: 20px; - background-color: #6FD1C5; - color: #FFFFFF; - padding: 10px 15px; - border-radius: 6px; - text-decoration: none; - font-weight: bold; - font-size: 14px; - transition: background-color 0.3s; -} - -.home:hover { - background-color: #5BAA9D; -} - -/* 탭 메뉴 스타일 */ -.tabs { - position: absolute; - top: 20px; - right: 20px; - display: flex; - gap: 10px; -} - -.tabs button { - background-color: #6FD1C5; - border: none; - border-radius: 6px; - padding: 8px 20px; - cursor: pointer; - font-size: 14px; - font-weight: bold; - color: #FFFFFF; - transition: all 0.3s ease; -} - -.tabs button:hover { - background-color: #5BAA9D; -} - -.tabs .active { - background-color: #5BAA9D; -} - -/* 메인 컨텐츠 스타일 */ -.container { - background-color: #FFFFFF; - width: 90%; - max-width: 700px; - padding: 30px; - border-radius: 12px; - box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); - margin-top: 80px; - height: calc(100vh - 120px); - overflow-y: auto; -} - -.section h2 { - font-size: 28px; - font-weight: bold; - color: #333333; - margin-bottom: 20px; - text-align: center; -} - -/* 진행률 바 스타일 */ -.progress-container { - background-color: #E0E0E0; - width: 100%; - height: 20px; - border-radius: 10px; - position: relative; - margin: 20px 0; -} - -.progress-bar { - height: 100%; - background-color: #6FD1C5; - border-radius: 10px; - width: 0%; /* 초기값 */ - transition: width 0.5s ease; -} - -.progress-label { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-weight: bold; - color: #333; -} - -/* 주차 박스 스타일 */ -.week-box { - display: flex; - justify-content: space-around; - margin-bottom: 20px; -} - -.week-day { - background-color: #E3F2FD; - padding: 12px; - text-align: center; - font-size: 16px; - font-weight: bold; - color: #1976D2; - border-radius: 10px; - width: 50px; - border: 1px solid #BBDEFB; -} - -.selected-week { - background-color: #5BAA9D; - color: #FFFFFF; -} - -/* 할 일 아이템 스타일 */ -.todo-item { - background-color: #FAFAFA; - border: 1px solid #EEEEEE; - border-radius: 10px; - padding: 15px; - margin-bottom: 15px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); -} - -.todo-item h3 { - margin: 0 0 8px; - font-size: 16px; - color: #424242; -} - -.todo-item p { - margin: 0 0 10px; - color: #757575; - font-size: 14px; -} - -.priority { - display: inline-block; - padding: 4px 12px; - border-radius: 12px; - font-size: 12px; - font-weight: bold; - text-transform: uppercase; - width: fit-content; -} - -.priority.high { - color: #D32F2F; - background-color: #FFCDD2; -} - -.priority.medium { - color: #F57C00; - background-color: #FFE0B2; -} - -.priority.low { - color: #388E3C; - background-color: #C8E6C9; -} From d9f6dc901481aaa772055b2fce768ed5dc09be19 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:19:15 +0900 Subject: [PATCH 33/37] Delete src/main/resources/templates/calendar_WG.html --- src/main/resources/templates/calendar_WG.html | 65 ------------------- 1 file changed, 65 deletions(-) delete mode 100644 src/main/resources/templates/calendar_WG.html diff --git a/src/main/resources/templates/calendar_WG.html b/src/main/resources/templates/calendar_WG.html deleted file mode 100644 index 31e3c12..0000000 --- a/src/main/resources/templates/calendar_WG.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - Weekly To-Do List - - - - -Home - - -
- - - -
- - -
-
-

Weekly

- - -
-
- 0% -
- - -
-
- Week -
-
- - -
-
-

Task Title

-

Description of the task goes here.

- - High - -
-
-
-
- - - - - From 628c6131e4baba651ca9dd4f764143de3f8431e9 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:19:24 +0900 Subject: [PATCH 34/37] Delete src/main/resources/templates/calendar_WG.iml --- src/main/resources/templates/calendar_WG.iml | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/main/resources/templates/calendar_WG.iml diff --git a/src/main/resources/templates/calendar_WG.iml b/src/main/resources/templates/calendar_WG.iml deleted file mode 100644 index 9465dd8..0000000 --- a/src/main/resources/templates/calendar_WG.iml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file From 0373720f2767075b057f7b40c86d34db30aa0bab Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:19:38 +0900 Subject: [PATCH 35/37] Delete src/main/resources/templates/calendar_html.iml --- src/main/resources/templates/calendar_html.iml | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/main/resources/templates/calendar_html.iml diff --git a/src/main/resources/templates/calendar_html.iml b/src/main/resources/templates/calendar_html.iml deleted file mode 100644 index 9465dd8..0000000 --- a/src/main/resources/templates/calendar_html.iml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file From e4f8fb73401acaabdba4c78bb0fcf5fbf7d18bc8 Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:19:45 +0900 Subject: [PATCH 36/37] Delete src/main/resources/templates/calendar_WG.js --- src/main/resources/templates/calendar_WG.js | 43 --------------------- 1 file changed, 43 deletions(-) delete mode 100644 src/main/resources/templates/calendar_WG.js diff --git a/src/main/resources/templates/calendar_WG.js b/src/main/resources/templates/calendar_WG.js deleted file mode 100644 index 0de6385..0000000 --- a/src/main/resources/templates/calendar_WG.js +++ /dev/null @@ -1,43 +0,0 @@ -// To-Do 리스트 데이터 예시 -const todoData = [ - { title: "Task Title", description: "Description of the task goes here.", priority: "high" }, - { title: "Another Task", description: "Description of the task goes here.", priority: "medium" }, - { title: "Low Priority Task", description: "Description of the task goes here.", priority: "low" } -]; - -// HTML 요소 가져오기 -const todoList = document.getElementById('todoList'); -const progressBar = document.getElementById('progressBar'); -const progressLabel = document.getElementById('progressLabel'); - -// To-Do 리스트 렌더링 함수 -function renderTodoList() { - todoList.innerHTML = ""; // 기존 내용 초기화 - - todoData.forEach(task => { - const todoItem = document.createElement('div'); - todoItem.classList.add('todo-item'); - - todoItem.innerHTML = ` -

${task.title}

-

${task.description}

- - ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} - - `; - - todoList.appendChild(todoItem); - }); -} - -// 진행률 바 업데이트 함수 -function updateProgressBar(rate = 0) { - progressBar.style.width = `${rate}%`; - progressLabel.textContent = `${rate}%`; -} - -// 초기 렌더링 -document.addEventListener('DOMContentLoaded', () => { - renderTodoList(); // 할 일 목록 렌더링 - updateProgressBar(0); // 진행률 초기값 -}); From 585967cb72fda90c53056a32f2c6bc643035a82e Mon Sep 17 00:00:00 2001 From: Hong Minji <128972768+callmeminji@users.noreply.github.com> Date: Tue, 17 Dec 2024 09:12:24 +0900 Subject: [PATCH 37/37] Add calendar_DG_final --- src/main/resources/templates/calendar_DG.css | 168 ++++++++++++++++++ src/main/resources/templates/calendar_DG.html | 48 +++++ src/main/resources/templates/calendar_DG.iml | 11 ++ src/main/resources/templates/calendar_DG.js | 41 +++++ 4 files changed, 268 insertions(+) create mode 100644 src/main/resources/templates/calendar_DG.css create mode 100644 src/main/resources/templates/calendar_DG.html create mode 100644 src/main/resources/templates/calendar_DG.iml create mode 100644 src/main/resources/templates/calendar_DG.js diff --git a/src/main/resources/templates/calendar_DG.css b/src/main/resources/templates/calendar_DG.css new file mode 100644 index 0000000..b4a61b2 --- /dev/null +++ b/src/main/resources/templates/calendar_DG.css @@ -0,0 +1,168 @@ +/* 전체 페이지 스타일 */ +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: #F1F3F9; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; +} + +/* 홈 버튼 스타일 */ +.home { + position: absolute; + top: 20px; + left: 20px; + background-color: #6FD1C5; + color: #FFFFFF; + padding: 10px 15px; + border-radius: 6px; + text-decoration: none; + font-weight: bold; + font-size: 14px; + transition: background-color 0.3s; +} + +.home:hover { + background-color: #5BAA9D; +} + +/* 탭 메뉴 스타일 */ +.tabs { + position: absolute; + top: 20px; + right: 20px; + display: flex; + gap: 10px; +} + +.tabs button { + background-color: #6FD1C5; + border: none; + border-radius: 6px; + padding: 8px 20px; + cursor: pointer; + font-size: 14px; + font-weight: bold; + color: #FFFFFF; + transition: all 0.3s ease; +} + +.tabs button:hover { + background-color: #5BAA9D; +} + +.tabs .active { + background-color: #5BAA9D; +} + +/* 메인 컨테이너 스타일 */ +.container { + background-color: #FFFFFF; + width: 90%; + max-width: 700px; + padding: 30px; + border-radius: 12px; + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); + margin-top: 80px; + height: calc(100vh - 120px); + overflow-y: auto; +} + +.section h2 { + font-size: 28px; + font-weight: bold; + color: #333333; + margin-bottom: 20px; + text-align: center; +} + +.date-box { + background-color: #E3F2FD; + padding: 12px; + margin: 10px auto 20px; + text-align: center; + font-size: 20px; + font-weight: bold; + color: #1976D2; + border-radius: 10px; + width: 80px; + border: 1px solid #BBDEFB; +} + +/* 진행률 바 스타일 */ +.progress-container { + position: relative; + background-color: #E0E0E0; + border-radius: 10px; + height: 20px; + margin: 20px 0; + overflow: hidden; +} + +.progress-bar { + background-color: #6FD1C5; + height: 100%; + width: 0; /* 초기 진행률 */ + transition: width 0.5s ease-in-out; +} + +.progress-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 12px; + font-weight: bold; + color: #424242; +} + +/* 할 일 아이템 스타일 */ +.todo-item { + background-color: #FAFAFA; + border: 1px solid #EEEEEE; + border-radius: 10px; + padding: 15px; + margin-bottom: 15px; + display: flex; + flex-direction: column; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.todo-item h3 { + margin: 0 0 8px; + font-size: 16px; + color: #424242; +} + +.todo-item p { + margin: 0 0 10px; + color: #757575; + font-size: 14px; +} + +.priority { + display: inline-block; + padding: 4px 12px; + border-radius: 12px; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + width: fit-content; +} + +.priority.high { + color: #D32F2F; + background-color: #FFCDD2; +} + +.priority.medium { + color: #F57C00; + background-color: #FFE0B2; +} + +.priority.low { + color: #388E3C; + background-color: #C8E6C9; +} diff --git a/src/main/resources/templates/calendar_DG.html b/src/main/resources/templates/calendar_DG.html new file mode 100644 index 0000000..4fabbc8 --- /dev/null +++ b/src/main/resources/templates/calendar_DG.html @@ -0,0 +1,48 @@ + + + + + + Daily To-Do List + + + + +Home + + +
+ + + +
+ + +
+
+

Daily

+ +
16
+ + +
+
+ 0% +
+ + +
+
+

Task Title

+

Description of the task goes here.

+ High +
+
+
+
+ + + + diff --git a/src/main/resources/templates/calendar_DG.iml b/src/main/resources/templates/calendar_DG.iml new file mode 100644 index 0000000..9465dd8 --- /dev/null +++ b/src/main/resources/templates/calendar_DG.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/main/resources/templates/calendar_DG.js b/src/main/resources/templates/calendar_DG.js new file mode 100644 index 0000000..30ff4ae --- /dev/null +++ b/src/main/resources/templates/calendar_DG.js @@ -0,0 +1,41 @@ +// To-Do 리스트 데이터 +const todoData = [ + { title: "Task Title", description: "Description of the task goes here.", priority: "high" }, + { title: "Another Task", description: "Description of the task goes here.", priority: "medium" }, + { title: "Low Priority Task", description: "Description of the task goes here.", priority: "low" } +]; + +// HTML 요소 가져오기 +const todoList = document.getElementById('todoList'); +const progressBar = document.getElementById('progressBar'); +const progressLabel = document.getElementById('progressLabel'); + +// 진행률 바 업데이트 함수 +function updateProgressBar(rate = 0) { + progressBar.style.width = `${rate}%`; + progressLabel.textContent = `${rate}%`; +} + +// To-Do 리스트 렌더링 함수 +function renderTodoList() { + todoList.innerHTML = ""; // 기존 내용 초기화 + + todoData.forEach(task => { + const todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + + todoItem.innerHTML = ` +

${task.title}

+

${task.description}

+ ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} + `; + + todoList.appendChild(todoItem); + }); +} + +// 초기 렌더링 +document.addEventListener('DOMContentLoaded', () => { + renderTodoList(); // To-Do 리스트 렌더링 + updateProgressBar(0); // 초기 진행률 0% +});