seung6lee/dhi-class-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: seung6lee/dhi-class-website:3-5
Branches Tags
seung6lee/dhi-class-website:3-5 seung6lee/dhi-class-website:2-5
..
pull from: seung6lee/dhi-class-website:2-5
Branches Tags
seung6lee/dhi-class-website:3-5 seung6lee/dhi-class-website:2-5
1 Commits
3-5 .. 2-5
Author SHA1 Message Date
seung6lee 7b11ba0a8d class 2-5 2026-03-04 21:41:09 +09:00
6 changed files with 1089 additions and 325 deletions
Expand all files Collapse all files
public/index.html
+18 -7
View File
@@ -3,31 +3,42 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Class 3-5</title> <title>Class 2-5</title>
<script src="public/script.js"></script> <script src="public/script.js"></script>
<link rel="stylesheet" href="public/style.css" /> <link rel="stylesheet" href="public/style.css" />
</head> </head>
<body> <body>
<header id="header"> <header id="header">
<h1>Class 3-5</h1> <h1>Class 2-5</h1>
<ul> <ul>
<li><a href="https://cloud.seung6lee.com/s/snLfTgafAKPlibE" target="_blank">학습자료 공유</a></li> <li><a href="https://classtwofive.notion.site/">Study</a></li>
<li><a href="https://docs.google.com/spreadsheets/d/15WY3VpHrIYxwMOgRdskD6craRO0jGHz6Gn3oPyip0Mk/edit?usp=sharing" target="_blank">공동구매</a></li> <li><a href="#">Portfolio</a></li>
<li><a href="https://docs.google.com/spreadsheets/d/1IXVW0ynmBXuWZjJg-0-BcLfKzoo8YcAu-gI_Ou6sZwg/edit?usp=sharing" target="_blank">선생님 정보</a></li> <li><a href="#">Info</a></li>
<li><a href="https://docs.google.com/spreadsheets/d/1300PFLLgnXmlk94RF5o4OqpoF_dK4XymdAHU7rsrr7c/edit?usp=sharing" target="_blank">학급비 사용</a></li>
</ul> </ul>
</header> </header>
<main id="main"> <main id="main">
<div class="box" id="calendar"> <div class="box" id="calendar">
<!-- <h2 class="title">Calendar</h2> -->
<iframe <iframe
id="calendar_iframe" id="calendar_iframe"
src="https://calendar.google.com/calendar/embed?height=600&wkst=1&ctz=Asia%2FSeoul&showPrint=0&showTitle=0&showTz=0&showCalendars=0&src=YjMxZGFmYmIzODE0ZTM0MTA1NGMxZWE4MDE0MTI3ZTk3OGVmNjdmN2Q3MjhmMmFmNjYyZDI5OTkzODU2ZDFlMkBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%23e67c73" src="https://calendar.google.com/calendar/embed?height=600&wkst=1&ctz=Asia%2FSeoul&showPrint=0&showTitle=0&showTz=0&src=OGVjZWRkYjQ2NTM1NWE1NWEyMDdhZjgwNDM5MzhiMTQ1MWYwY2ViZmM0ODU4ZDAxMTA2NmFlMGRiZjFkZTUwZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=NzI5ZjViZWE5YmE4M2ZmOWI4MmRkNzk3ZjE1MDg5YTA1MWZlODUwYTRkYTY2ZmNjMzkzNjgzNWU4OWUzZGU4OUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=YWI3ZjBlYWE4NmYwZDE5MWE3Y2RhYWIzMTcxMmQzZGMxN2Y4OGY1YzdhMmU1ZGY3NGVhNjFjNWIwMzNlZmJlN0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=a28uc291dGhfa29yZWEjaG9saWRheUBncm91cC52LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23A79B8E&color=%23E4C441&color=%23D50000&color=%234285F4"
></iframe> ></iframe>
</div> </div>
<nav id="side"> <nav id="side">
<div class="box" id="task">
<h2 class="title">Task List</h2>
<task-list></task-list>
<span
id="add_task"
onclick="document.body.appendChild(document.createElement('create-task'))"
>+</span
>
</div>
<div class="box" id="info"> <div class="box" id="info">
<!-- <h2 class="title">급식</h2> -->
<meal-list></meal-list> <meal-list></meal-list>
</div> </div>
</nav> </nav>
public/script.js
+352 -2
View File
@@ -5,7 +5,7 @@ class meal_list extends HTMLElement {
const now = new Date(); const now = new Date();
const hours = now.getHours(); const hours = now.getHours();
this.date = new Date() this.date = new Date("2025-03-10")
.toISOString() .toISOString()
.slice(0, 10) .slice(0, 10)
.replace(/-/g, ""); .replace(/-/g, "");
@@ -28,7 +28,6 @@ class meal_list extends HTMLElement {
async get_meal(date, type) { async get_meal(date, type) {
try { try {
console.log(`/api/meal?date=${date}&type=${type}`)
let response = await fetch(`/api/meal?date=${date}&type=${type}`); let response = await fetch(`/api/meal?date=${date}&type=${type}`);
if (!response.ok) throw new Error("Failed to fetch meal data"); if (!response.ok) throw new Error("Failed to fetch meal data");
@@ -81,3 +80,354 @@ class meal_list extends HTMLElement {
} }
customElements.define("meal-list", meal_list); customElements.define("meal-list", meal_list);
class task_list extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.render();
}
async render() {
const ul = document.createElement("ul");
let data = await fetch("/api/tasklist");
data = await data.json();
for (let i of data) {
const date = new Date(i.end.date);
date.setDate(date.getDate() - 1);
const li = document.createElement("li");
const name = document.createElement("h2");
name.textContent = i.summary;
const box = document.createElement("div");
const cal = document.createElement("img");
cal.src = "/public/images/calendar.png";
const deadline = document.createElement("p");
deadline.textContent = date.toISOString().slice(0, 10);
box.append(cal, deadline);
li.append(name, box);
li.addEventListener("click", () => {
const modal = document.createElement("task-edit");
modal.setAttribute("event_id", i.id);
document.body.appendChild(modal);
});
ul.appendChild(li);
}
this.innerHTML = "";
this.appendChild(ul);
}
}
customElements.define("task-list", task_list);
class edit_task extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.render();
}
async getData() {
const response = await fetch(
`/api/gettask?event_id=${this.getAttribute("event_id")}`
);
let data = response.json();
return data;
}
async render() {
this.className = "task_modal";
const data = await this.getData();
// 📌 닫기 버튼
const closeBtn = document.createElement("span");
closeBtn.classList.add("close");
closeBtn.innerHTML = "✖";
closeBtn.addEventListener("click", () => this.remove());
// 📌 제목
const title = document.createElement("div");
title.classList.add("title");
title.textContent = "Edit Task";
// 📌 Name 입력란
const nameGroup = this.createInputGroup(
"Name",
"text",
"name",
data.summary
);
// 📌 Date 입력란 (시작~종료)
const dateGroup = document.createElement("div");
dateGroup.classList.add("input-group");
const dateLabel = document.createElement("label");
dateLabel.textContent = "Date";
const dateContainer = document.createElement("div");
dateContainer.classList.add("date-group");
const startDate = this.createInput(
"date",
"start-date",
data.start.date
);
const tilde = document.createElement("span");
tilde.textContent = "~";
const endDate = this.createInput("date", "end-date", data.end.date);
dateContainer.append(startDate, tilde, endDate);
dateGroup.append(dateLabel, dateContainer);
// 📌 Description 입력란
const descGroup = this.createInputGroup(
"Desc",
"textarea",
"desc",
data.description
);
// 📌 버튼 컨테이너
const buttonContainer = document.createElement("div");
buttonContainer.classList.add("buttons");
const cancelBtn = document.createElement("button");
cancelBtn.classList.add("cancel");
cancelBtn.textContent = "Cancel";
cancelBtn.addEventListener("click", () => this.remove());
const saveBtn = document.createElement("button");
saveBtn.classList.add("save");
saveBtn.textContent = "Save";
saveBtn.addEventListener("click", async () => await this.saveTask());
buttonContainer.append(cancelBtn, saveBtn);
this.innerHTML = "";
this.append(
closeBtn,
title,
nameGroup,
dateGroup,
descGroup,
buttonContainer
);
}
createInputGroup(labelText, inputType, id, default_value) {
const group = document.createElement("div");
group.classList.add("input-group");
const label = document.createElement("label");
label.textContent = labelText;
let input;
if (inputType === "textarea") {
input = document.createElement("textarea");
input.rows = "4";
} else {
input = document.createElement("input");
input.type = inputType;
}
input.value = default_value;
input.placeholder = default_value;
input.id = id;
group.append(label, input);
return group;
}
createInput(type, id, default_value) {
const input = document.createElement("input");
input.type = type;
input.id = id;
input.value = default_value;
input.placeholder = default_value;
return input;
}
async saveTask() {
const name = document.getElementById("name").value;
const startDate = document.getElementById("start-date").value;
const endDate = document.getElementById("end-date").value;
const desc = document.getElementById("desc").value;
let response = await fetch("/api/edittask", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
event_id: this.getAttribute("event_id"),
data: {
end: { date: endDate },
start: { date: startDate },
summary: name,
description: desc,
},
}),
});
response = await response.json();
console.log(response);
const taskListComponent = document.querySelector("task-list");
if (taskListComponent) {
taskListComponent.render();
}
const targetIframe = document.getElementById("calendar_iframe");
if (targetIframe) {
targetIframe.src = targetIframe.src; // ✅ iframe 새로고침
}
this.remove();
}
}
customElements.define("task-edit", edit_task);
class create_task extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.render();
}
async render() {
this.className = "task_modal";
// 📌 닫기 버튼
const closeBtn = document.createElement("span");
closeBtn.classList.add("close");
closeBtn.innerHTML = "✖";
closeBtn.addEventListener("click", () => this.remove());
// 📌 제목
const title = document.createElement("div");
title.classList.add("title");
title.textContent = "Create Task";
// 📌 Name 입력란
const nameGroup = this.createInputGroup("Name", "text", "name");
// 📌 Date 입력란 (시작~종료)
const dateGroup = document.createElement("div");
dateGroup.classList.add("input-group");
const dateLabel = document.createElement("label");
dateLabel.textContent = "Date";
const dateContainer = document.createElement("div");
dateContainer.classList.add("date-group");
const startDate = this.createInput("date", "start-date");
const tilde = document.createElement("span");
tilde.textContent = "~";
const endDate = this.createInput("date", "end-date");
dateContainer.append(startDate, tilde, endDate);
dateGroup.append(dateLabel, dateContainer);
// 📌 Description 입력란
const descGroup = this.createInputGroup("Desc", "textarea", "desc");
// 📌 버튼 컨테이너
const buttonContainer = document.createElement("div");
buttonContainer.classList.add("buttons");
const cancelBtn = document.createElement("button");
cancelBtn.classList.add("cancel");
cancelBtn.textContent = "Cancel";
cancelBtn.addEventListener("click", () => this.remove());
const saveBtn = document.createElement("button");
saveBtn.classList.add("save");
saveBtn.textContent = "Save";
saveBtn.addEventListener("click", async () => await this.saveTask());
buttonContainer.append(cancelBtn, saveBtn);
this.innerHTML = "";
this.append(
closeBtn,
title,
nameGroup,
dateGroup,
descGroup,
buttonContainer
);
}
createInputGroup(labelText, inputType, id) {
const group = document.createElement("div");
group.classList.add("input-group");
const label = document.createElement("label");
label.textContent = labelText;
let input;
if (inputType === "textarea") {
input = document.createElement("textarea");
input.rows = "4";
} else {
input = document.createElement("input");
input.type = inputType;
}
input.id = id;
group.append(label, input);
return group;
}
createInput(type, id) {
const input = document.createElement("input");
input.type = type;
input.id = id;
return input;
}
async saveTask() {
const name = document.getElementById("name").value;
const startDate = document.getElementById("start-date").value;
const endDate = document.getElementById("end-date").value;
const desc = document.getElementById("desc").value;
let response = await fetch("/api/createtask", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
event_id: this.getAttribute("event_id"),
data: {
end: { date: endDate },
start: { date: startDate },
summary: name,
description: desc,
},
}),
});
response = await response.json();
console.log(response);
const taskListComponent = document.querySelector("task-list");
if (taskListComponent) {
taskListComponent.render();
}
const targetIframe = document.getElementById("calendar_iframe");
if (targetIframe) {
targetIframe.src = targetIframe.src; // ✅ iframe 새로고침
}
this.remove();
}
}
customElements.define("create-task", create_task);
public/style.css
+161 -127
View File
@@ -1,9 +1,4 @@
@font-face { @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
font-family: "GMarketSans";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
font-weight: 500;
font-display: swap;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -13,74 +8,43 @@
body { body {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
font-family: "GMarketSans", serif; font-family: "Fira Code", serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
background-color: #F0F0F0; background-color: rgb(246, 242, 237);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
background-size: 28px 28px;
color: #0A0A0A;
} }
.box { .box {
border-radius: 0; border-radius: 10px;
position: relative; position: relative;
} }
.title { .title {
height: 32px; height: 30px;
width: 100%; width: 100%;
border-bottom: 1px solid #C8C8C8; border-bottom: 2px solid black;
margin-bottom: 12px; margin-bottom: 10px;
font-size: 12px; font-size: 20px;
font-weight: 500; font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #888888;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.title::before {
content: "";
display: inline-block;
width: 3px;
height: 14px;
background-color: #FF4B00;
margin-right: 8px;
flex-shrink: 0;
}
#header { #header {
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: #FFFFFF; background-color: white;
border-bottom: 1px solid #C8C8C8; box-shadow: 0 1px 1px white;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 24px; padding-left: 20px;
position: relative; padding-right: 20px;
}
#header::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: repeating-linear-gradient(to right, #FF4B00 0px, #FF4B00 4px, transparent 4px, transparent 12px);
} }
#header h1 { #header h1 {
font-size: 16px; font-size: 20px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #0A0A0A;
}
#header h1 span {
color: #FF4B00;
} }
#header ul { #header ul {
display: flex; display: flex;
@@ -88,40 +52,13 @@ body {
} }
#header ul li { #header ul li {
display: inline-block; display: inline-block;
padding: 0 1.5rem; padding: 0 2rem;
font-size: 13px; font-size: 20px;
font-weight: 500; font-weight: 700;
letter-spacing: 0.06em;
} }
#header ul li a { #header ul li a {
text-decoration: none; text-decoration: none;
color: #4A4A4A; color: black;
text-transform: uppercase;
transition: color 0.15s ease;
position: relative;
padding-bottom: 4px;
}
#header ul li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: #FF4B00;
transition: width 0.2s ease;
}
#header ul li a:hover {
color: #0A0A0A;
}
#header ul li a:hover::after {
width: 100%;
}
#header ul li a.active {
color: #FF4B00;
}
#header ul li a.active::after {
width: 100%;
} }
#main { #main {
@@ -141,14 +78,76 @@ body {
gap: 25px; gap: 25px;
} }
#task {
width: 100%;
height: calc(100% - 515px - 25px);
background-color: white;
border: none;
box-shadow: 0 5px 10px #d4d4d4;
padding: 10px;
display: flex;
flex-direction: column;
}
#task task-list {
width: 100%;
flex-grow: 1;
}
#task task-list ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
#task task-list ul li {
width: 100%;
height: 65px;
border-radius: 10px;
border: 2px solid #b4b4b4;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding-left: 10px;
cursor: pointer;
}
#task task-list ul li:hover {
border: 2px solid black;
}
#task task-list ul li h2 {
font-size: 18px;
font-size: 700;
}
#task task-list ul li div {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
#task task-list ul li div img {
width: 15px;
height: 15px;
}
#task task-list ul li div p {
font-size: 15px;
font-weight: 700;
color: #fbb40e;
}
#task #add_task {
cursor: pointer;
font-size: 25px;
padding-right: 10px;
display: flex;
flex-direction: row-reverse;
}
#info { #info {
width: 100%; width: 100%;
height: 100%; height: 515px;
background-color: #FFFFFF; background-color: white;
border: 1px solid #C8C8C8; border: none;
box-shadow: 0 5px 10px #d4d4d4;
padding: 10px; padding: 10px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
background-size: 20px 20px;
} }
#info meal-list { #info meal-list {
width: 100%; width: 100%;
@@ -156,7 +155,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
overflow-y: hidden; overflow-y: none;
} }
#info meal-list header { #info meal-list header {
width: 100%; width: 100%;
@@ -167,24 +166,14 @@ body {
align-items: center; align-items: center;
} }
#info meal-list header select { #info meal-list header select {
border: 1px solid #C8C8C8; border: none;
border-radius: 0; border-radius: 5px;
padding: 4px 8px; padding: 4px 4px;
font-size: 12px; font-size: 15px;
font-family: "GMarketSans", serif;
letter-spacing: 0.04em;
background-color: #FFFFFF;
color: #0A0A0A;
cursor: pointer; cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
} }
#info meal-list header select:hover { #info meal-list header select:hover {
border-color: #0A0A0A; box-shadow: 0 0 0 1px black;
box-shadow: none;
}
#info meal-list header select:focus {
outline: none;
border-color: #FF4B00;
} }
#info meal-list ul { #info meal-list ul {
width: 100%; width: 100%;
@@ -201,50 +190,95 @@ body {
} }
#info meal-list ul li { #info meal-list ul li {
width: 100%; width: 100%;
height: 56px; height: 60px;
border-radius: 0; border-radius: 10px;
border: 1px solid #C8C8C8; border: 2px solid #b4b4b4;
border-left: 3px solid transparent;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
flex-shrink: 0; flex-shrink: 0;
background-color: #FFFFFF;
font-size: 13px;
color: #4A4A4A;
transition: border-left-color 0.15s, background-color 0.15s, color 0.15s;
}
#info meal-list ul li:hover {
border-left-color: #FF4B00;
background-color: rgba(255, 75, 0, 0.08);
color: #0A0A0A;
}
#info meal-list ul li.active {
border-left-color: #FF4B00;
background-color: rgba(255, 75, 0, 0.08);
color: #0A0A0A;
font-weight: 500;
} }
#calendar { #calendar {
border: 1px solid #C8C8C8; border: 2px solid orange;
border-top: 3px solid #FF4B00;
width: calc(100% - 400px - 25px); width: calc(100% - 400px - 25px);
height: 100%; height: 100%;
background-color: #FFFFFF;
position: relative;
} }
#calendar iframe { #calendar iframe {
border-radius: 0; border-radius: 8px;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
} }
.task_modal {
width: 400px;
height: auto;
border: 2px solid black;
border-radius: 10px;
background: white;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.task_modal label {
font-weight: 700;
display: block;
margin-bottom: 5px;
}
.task_modal input,
.task_modal textarea {
width: 100%;
padding: 8px;
border: 1px solid black;
border-radius: 4px;
}
.task_modal textarea {
height: 100px;
resize: none;
}
.task_modal .date-group {
display: flex;
align-items: center;
gap: 10px;
}
.task_modal .buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.task_modal button {
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
}
.task_modal .cancel {
border: 1px solid black;
background: white;
}
.task_modal .save {
background: #d1d1d1;
border: none;
}
.task_modal .close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 18px;
}
@media (max-width: 800px) { @media (max-width: 800px) {
h1 { h1 {
font-size: 16px; font-size: 20px;
} }
#main { #main {
width: 100%; width: 100%;
public/style.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;AA+BJ;EACI;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA,KA3BY;EA4BZ,kBAjCK;EAYL,kBACI;EAEJ;EAoBA,OAxCK;;;AA4CT;EACI;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAxDK;EAyDL;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA,kBAxEO;EAyEP;EACA;;;AAKR;EACI;EACA,QAjEY;EAkEZ,kBAzEK;EA0EL;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACI;EACA;EACA;EACA;EACA,OA5GC;;AA+GD;EACI,OAnHG;;AAuHX;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA,OA/HP;EAgIO;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBAjJL;EAkJK;;AAGJ;EACI,OAnJX;;AAqJW;EACI;;AAIR;EACI,OA9JL;;AAgKK;EACI;;;AASxB;EACI;EACA;EACA,SAhKY;EAiKZ;EACA;EACA,KAlKY;;;AAsKhB;EACI,OAtKY;EAuKZ;EACA;EACA;EACA,KA3KY;;;AA+KhB;EACI;EACA;EACA,kBAvLK;EAwLL;EACA,SArLY;EAOZ,kBACI;EAEJ;;AAgLA;EACI;EACA;EACA;EACA;EACA,KA/LQ;EAgMR;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBArNP;EAsNO,OA5NP;EA6NO;EACA;;AAEA;EACI,cAjOX;EAkOW;;AAGJ;EACI;EACA,cA1OL;;AA+OP;EACI;EACA;EACA;EACA;EACA,KAvOI;EAwOJ;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAzPA;EA0PA;EACA,kBA/PP;EAgQO;EACA,OArQP;EAsQO;;AAEA;EACI,mBA9QL;EA+QK,kBA9QL;EA+QK,OA7QX;;AAgRO;EACI,mBApRL;EAqRK,kBApRL;EAqRK,OAnRX;EAoRW;;;AAQpB;EACI;EACA;EACA;EACA;EACA,kBA3RK;EA4RL;;AAEA;EACI;EACA;EACA;EACA;;;AAKR;EACI;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;;EAGJ;IACI;;EAGJ;IACI;;EAGJ;IACI;IACA;IACA","file":"style.css"} {"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAQ;AAQR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EACA,KAnBW;EAqBX;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EAOA;EACA;EAEA;EAEA;EACA;EAEA;EACA;;;AAGJ;EACI;EACA,QA/CY;EAgDZ;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;;AAMhB;EACI;EACA;EAEA,SAxFW;EA0FX;EACA;EAEA,KA5FS;;;AA+Fb;EACI,OA/FQ;EAgGR;EAEA;EACA;EAEA,KAtGS;;;AAyGb;EACI;EACA;EAEA;EACA;EACA;EAEA,SAlHW;EAoHX;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EACA,KAjIG;;AAmIH;EACI;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA,cA7ID;EA+IC;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAOpB;EACI;EACA;EAEA;EAEA;EACA;;;AAIR;EACI;EACA,QAzLU;EA2LV;EACA;EACA;EAEA,SAlMW;;AAoMX;EACI;EACA;EAEA;EACA;EACA,KA1MO;EA4MP;;AAEA;EACI;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EACA;;AAEA;EACI;;AAKZ;EACI;EAEA;EACA;EACA;EACA,KA3OG;EA6OH;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,cA/PD;EAiQC;;;AAMhB;EACI;EAEA;EACA;;AAEA;EACI;EACA;EACA;EACA;;;AAIR;EACI;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA,SAlSW;EAoSX;EACA;EACA,KAtSW;;AAwSX;EACI;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA","file":"style.css"}
public/style.scss
+223 -181
View File
@@ -1,128 +1,69 @@
@font-face { @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
font-family: 'GMarketSans';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: 500;
font-display: swap;
}
// ─── Design Tokens ────────────────────────────────────────────────────────────
$accent: #FF4B00;
$accent-light: rgba(255, 75, 0, 0.08);
$black: #0A0A0A;
$gray-9: #1A1A1A;
$gray-7: #4A4A4A;
$gray-5: #888888;
$gray-3: #C8C8C8;
$gray-1: #F0F0F0;
$white: #FFFFFF;
$grid-line: rgba(0, 0, 0, 0.08);
$small_margin: 10px; $small_margin: 10px;
$big_margin: 25px; $big_margin: 25px;
$nav_width: 400px; $nav_width: 400px;
$info_height: calc(60px * 7 + $small_margin * 7 + $big_margin);
$header_height: 60px; $header_height: 60px;
// ─── Grid Background Mixin ────────────────────────────────────────────────────
@mixin grid-bg($size: 28px, $color: $grid-line) {
background-image:
linear-gradient(to right, $color 1px, transparent 1px),
linear-gradient(to bottom, $color 1px, transparent 1px);
background-size: $size $size;
}
// ─── Reset ────────────────────────────────────────────────────────────────────
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
// ─── Body ─────────────────────────────────────────────────────────────────────
body { body {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
font-family: "GMarketSans", serif; font-family: "Fira Code", serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $small_margin; gap: $small_margin;
background-color: $gray-1;
@include grid-bg(28px, rgba(0,0,0,0.06)); background-color: rgb(246, 242, 237);
color: $black;
} }
// ─── Box ──────────────────────────────────────────────────────────────────────
.box { .box {
border-radius: 0; border-radius: 10px;
position: relative; position: relative;
} }
// ─── Title ────────────────────────────────────────────────────────────────────
.title { .title {
height: 32px; height: 30px;
// background-color: white;
// position: absolute;
// top: -2px;
// left: 15px;
width: 100%; width: 100%;
border-bottom: 1px solid $gray-3; border-bottom: 2px solid black;
margin-bottom: 12px;
font-size: 12px; margin-bottom: 10px;
font-weight: 500;
letter-spacing: 0.12em; font-size: 20px;
text-transform: uppercase; font-weight: 700;
color: $gray-5;
display: flex; display: flex;
align-items: center; align-items: center;
// 포인트 컬러 왼쪽 태그
&::before {
content: '';
display: inline-block;
width: 3px;
height: 14px;
background-color: $accent;
margin-right: 8px;
flex-shrink: 0;
}
} }
// ─── Header ───────────────────────────────────────────────────────────────────
#header { #header {
width: 100%; width: 100%;
height: $header_height; height: $header_height;
background-color: $white; background-color: white;
border-bottom: 1px solid $gray-3; box-shadow: 0 1px 1px white;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 24px; padding-left: 20px;
position: relative; padding-right: 20px;
// 헤더 하단 그리드 강조선
&::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: repeating-linear-gradient(
to right,
$accent 0px, $accent 4px,
transparent 4px, transparent 12px
);
}
h1 { h1 {
font-size: 16px; font-size: 20px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: $black;
// 포인트 컬러 강조
span {
color: $accent;
}
} }
ul { ul {
@@ -131,128 +72,174 @@ body {
li { li {
display: inline-block; display: inline-block;
padding: 0 1.5rem; padding: 0 2rem;
font-size: 13px; font-size: 20px;
font-weight: 500; font-weight: 700;
letter-spacing: 0.06em;
a { a {
text-decoration: none; text-decoration: none;
color: $gray-7; color: black;
text-transform: uppercase;
transition: color 0.15s ease;
position: relative;
padding-bottom: 4px;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: $accent;
transition: width 0.2s ease;
}
&:hover {
color: $black;
&::after {
width: 100%;
}
}
&.active {
color: $accent;
&::after {
width: 100%;
}
}
} }
} }
} }
} }
// ─── Main ─────────────────────────────────────────────────────────────────────
#main { #main {
width: 100%; width: 100%;
height: calc(100% - #{$header_height} - #{$small_margin}); height: calc(100% - $header_height - $small_margin);
padding: $small_margin; padding: $small_margin;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $big_margin; gap: $big_margin;
} }
// ─── Side ─────────────────────────────────────────────────────────────────────
#side { #side {
width: $nav_width; width: $nav_width;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $big_margin; gap: $big_margin;
} }
// ─── Info ───────────────────────────────────────────────────────────────────── #task {
#info {
width: 100%; width: 100%;
height: 100%; height: calc(100% - $info_height - $big_margin);
background-color: $white;
border: 1px solid $gray-3; background-color: white;
border: none;
box-shadow: 0 5px 10px #d4d4d4;
padding: $small_margin; padding: $small_margin;
// 내부 그리드 배경 display: flex;
@include grid-bg(20px, rgba(0,0,0,0.03)); flex-direction: column;
task-list {
width: 100%;
flex-grow: 1;
ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: $small_margin;
li {
width: 100%;
height: 65px;
border-radius: 10px;
border: 2px solid #b4b4b4;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding-left: $small_margin;
cursor: pointer;
&:hover {
border: 2px solid black;
}
h2 {
font-size: 18px;
font-size: 700;
}
div {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
img {
width: 15px;
height: 15px;
}
p {
font-size: 15px;
font-weight: 700;
color: #fbb40e;
}
}
}
}
}
#add_task {
cursor: pointer;
font-size: 25px;
padding-right: 10px;
display: flex;
flex-direction: row-reverse;
}
}
#info {
width: 100%;
height: $info_height;
background-color: white;
border: none;
box-shadow: 0 5px 10px #d4d4d4;
padding: $small_margin;
meal-list { meal-list {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $small_margin; gap: $small_margin;
overflow-y: hidden;
overflow-y: none;
header { header {
width: 100%; width: 100%;
height: 40px; height: 40px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
select { select {
border: 1px solid $gray-3; border: none;
border-radius: 0; border-radius: 5px;
padding: 4px 8px; padding: 4px 4px;
font-size: 12px;
font-family: "GMarketSans", serif; font-size: 15px;
letter-spacing: 0.04em;
background-color: $white;
color: $black;
cursor: pointer; cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
&:hover { &:hover {
border-color: $black; box-shadow: 0 0 0 1px black;
box-shadow: none;
}
&:focus {
outline: none;
border-color: $accent;
} }
} }
} }
ul { ul {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: $small_margin; gap: $small_margin;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
cursor: ns-resize; cursor: ns-resize;
&::-webkit-scrollbar { &::-webkit-scrollbar {
@@ -261,58 +248,115 @@ body {
li { li {
width: 100%; width: 100%;
height: 56px; height: 60px;
border-radius: 0; border-radius: 10px;
border: 1px solid $gray-3; border: 2px solid #b4b4b4;
border-left: 3px solid transparent; // 기본 상태
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding-left: $small_margin; padding-left: $small_margin;
flex-shrink: 0; flex-shrink: 0;
background-color: $white;
font-size: 13px;
color: $gray-7;
transition: border-left-color 0.15s, background-color 0.15s, color 0.15s;
&:hover {
border-left-color: $accent;
background-color: $accent-light;
color: $black;
}
&.active {
border-left-color: $accent;
background-color: $accent-light;
color: $black;
font-weight: 500;
}
} }
} }
} }
} }
// ─── Calendar ─────────────────────────────────────────────────────────────────
#calendar { #calendar {
border: 1px solid $gray-3; border: 2px solid orange;
border-top: 3px solid $accent; // 포인트 컬러 상단 강조선
width: calc(100% - #{$nav_width} - #{$big_margin}); width: calc(100% - $nav_width - $big_margin);
height: 100%; height: 100%;
background-color: $white;
position: relative;
iframe { iframe {
border-radius: 0; border-radius: 8px;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
} }
} }
// ─── Responsive ─────────────────────────────────────────────────────────────── .task_modal {
width: 400px;
height: auto;
border: 2px solid black;
border-radius: 10px;
background: white;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: $small_margin;
display: flex;
flex-direction: column;
gap: $small_margin;
label {
font-weight: 700;
display: block;
margin-bottom: 5px;
}
input,
textarea {
width: 100%;
padding: 8px;
border: 1px solid black;
border-radius: 4px;
}
textarea {
height: 100px;
resize: none;
}
.date-group {
display: flex;
align-items: center;
gap: 10px;
}
.buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
}
button {
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
}
.cancel {
border: 1px solid black;
background: white;
}
.save {
background: #d1d1d1;
border: none;
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 18px;
}
}
@media (max-width: 800px) { @media (max-width: 800px) {
h1 { h1 {
font-size: 16px; font-size: 20px;
} }
#main { #main {
@@ -324,11 +368,9 @@ body {
width: 100%; width: 100%;
height: auto; height: auto;
} }
#task { #task {
height: auto; height: auto;
} }
#info { #info {
height: auto; height: auto;
} }
server.js
+329 -2
View File
@@ -6,7 +6,7 @@ import fs from "fs";
const app = express(); const app = express();
app.use("/public", express.static(path.join(__dirname, "public"))); app.use("/public", express.static(path.join(__dirname, "public")));
// app.use(express.urlencoded({ extends: true })); app.use(express.urlencoded({ extends: true }));
app.use(express.json()); app.use(express.json());
app.listen(4000, () => { app.listen(4000, () => {
@@ -24,7 +24,7 @@ app.get("/api/meal", async (req, res) => {
const base_url = new URL("https://open.neis.go.kr/hub/mealServiceDietInfo"); const base_url = new URL("https://open.neis.go.kr/hub/mealServiceDietInfo");
const params = new URLSearchParams({ const params = new URLSearchParams({
key: "6b442e68fabb4bee943947613b31eeee", key: "504b37988adb4251b9fae916ae8c360a",
Type: "json", Type: "json",
ATPT_OFCDC_SC_CODE: "D10", ATPT_OFCDC_SC_CODE: "D10",
SD_SCHUL_CODE: "7240450", SD_SCHUL_CODE: "7240450",
@@ -57,3 +57,330 @@ app.get("/api/meal", async (req, res) => {
res.send("No Information"); res.send("No Information");
} }
}); });
// G-Cal api ------------------------------------------------------------
const checkClientSecret = () => {
if (!fs.existsSync("client_secret.json")) {
throw new Error("No client_secret.json");
}
console.log("✅Pass: client_secret.json exists");
};
const checkToken = () => {
if (!fs.existsSync("token.json")) {
console.error("❌Error: No token.json");
console.warn("📣Notice: Trying to get token");
getToken();
} else {
console.log("✅Pass: token.json exists");
}
};
const getToken = () => {
const base_url = new URL("https://accounts.google.com/o/oauth2/auth");
const params = new URLSearchParams({
client_id: client().client_id,
redirect_uri: "http://localhost:4000/callback",
response_type: "code",
scope: "https://www.googleapis.com/auth/calendar",
access_type: "offline",
prompt: "consent",
});
const url = `${base_url}?${params.toString()}`;
open(url);
};
const client = () => {
const fileContent = fs.readFileSync("client_secret.json", "utf8");
return JSON.parse(fileContent).web;
};
const token = (type) => {
const fileContent = fs.readFileSync("token.json", "utf8");
if (type) {
return JSON.parse(fileContent)[type];
}
return JSON.parse(fileContent).access_token;
};
app.get("/callback", async (req, res) => {
try {
const response = await fetch("https://oauth2.googleapis.com/token", {
method: "POST",
headers: {},
body: JSON.stringify({
client_id: client().client_id,
client_secret: client().client_secret,
code: req.query.code,
grant_type: "authorization_code",
redirect_uri: "http://localhost:4000/callback",
}),
});
const data = await response.json();
if (data.error) {
console.error(`❌Error: ${data.error}, ${data.error_description}`);
res.send(
"Error occured. Automatically reopen new Oauth page if token is not saved."
);
checkToken();
return;
}
console.log("✅Pass: Successfully load token");
saveToken(data);
res.json(data);
} catch (err) {
console.error(`❌Error: ${err.message}`);
res.status(500).json({ error: err.message });
}
});
const saveToken = (data) => {
fs.writeFileSync("token.json", JSON.stringify(data, null, 2));
console.log("✅Pass: Successfully sace token.json");
};
const refreshToken = async () => {
try {
const response = await fetch("https://oauth2.googleapis.com/token", {
method: "POST",
headers: {},
body: JSON.stringify({
client_id: client().client_id,
client_secret: client().client_secret,
grant_type: "refresh_token",
refresh_token: token("refresh_token"),
}),
});
const data = await response.json();
if (data.error) {
return data;
}
data.refresh_token = token("refresh_token");
saveToken(data);
return "success";
} catch (err) {
return err;
}
};
checkClientSecret();
checkToken();
app.get("/api/tasklist", async (req, res) => {
const process = async () => {
const task_calender_id =
"729f5bea9ba83ff9b82dd797f15089a051fe850a4da66fcc3936835e89e3de89@group.calendar.google.com";
const base_url = new URL(
`https://www.googleapis.com/calendar/v3/calendars/${task_calender_id}/events`
);
const params = new URLSearchParams({
singleEvents: true,
orderBy: "startTime",
timeMin: new Date().toISOString(),
});
const url = `${base_url}?${params.toString()}`;
try {
let data = await fetch(url, {
method: "GET",
headers: {
Authorization: `Bearer ${token()}`,
},
});
data = await data.json();
if (data.error) {
if (data.error.code === 401) {
console.warn("📣Notice: Token expired, refreshing...");
const refreshStatus = await refreshToken();
if (refreshStatus === "success") {
console.warn("📣Notice: Token refresh success");
return await process();
} else {
console.error("❌Error: Can't refresh token");
return refreshStatus;
}
}
console.error(
`❌Error: ${data.error.code}, ${data.error.message}`
);
return data;
}
const li = data.items;
res.json(li);
} catch (err) {
console.error(`❌Error: ${err}`);
return err;
}
};
return await process();
});
app.get("/api/gettask", async (req, res) => {
const process = async () => {
const task_calender_id =
"729f5bea9ba83ff9b82dd797f15089a051fe850a4da66fcc3936835e89e3de89@group.calendar.google.com";
const base_url = new URL(
`https://www.googleapis.com/calendar/v3/calendars/${task_calender_id}/events/${req.query.event_id}`
);
const params = new URLSearchParams({
singleEvents: true,
orderBy: "startTime",
timeMin: new Date().toISOString(),
});
const url = `${base_url}?${params.toString()}`;
try {
let data = await fetch(url, {
method: "GET",
headers: {
Authorization: `Bearer ${token()}`,
},
});
data = await data.json();
if (data.error) {
if (data.error.code === 401) {
console.warn("📣Notice: Token expired, refreshing...");
const refreshStatus = await refreshToken();
if (refreshStatus === "success") {
console.warn("📣Notice: Token refresh success");
return await process();
} else {
console.error("❌Error: Can't refresh token");
return refreshStatus;
}
}
console.error(
`❌Error: ${data.error.code}, ${data.error.message}`
);
return data;
}
res.json(data);
} catch (err) {
console.error(`❌Error: ${err}`);
return err;
}
};
return await process();
});
app.post("/api/edittask", async (req, res) => {
const process = async () => {
const task_calender_id =
"729f5bea9ba83ff9b82dd797f15089a051fe850a4da66fcc3936835e89e3de89@group.calendar.google.com";
const url = new URL(
`https://www.googleapis.com/calendar/v3/calendars/${task_calender_id}/events/${req.body.event_id}`
);
try {
let data = await fetch(url, {
method: "PUT",
headers: {
Authorization: `Bearer ${token()}`,
},
body: JSON.stringify(req.body.data),
});
data = await data.json();
if (data.error) {
if (data.error.code === 401) {
console.warn("📣Notice: Token expired, refreshing...");
const refreshStatus = await refreshToken();
if (refreshStatus === "success") {
console.warn("📣Notice: Token refresh success");
return await process();
} else {
console.error("❌Error: Can't refresh token");
return refreshStatus;
}
}
console.error(
`❌Error: ${data.error.code}, ${data.error.message}`
);
return data;
}
res.json(data);
} catch (err) {
console.error(`❌Error: ${err}`);
return err;
}
};
return await process();
});
app.post("/api/createtask", async (req, res) => {
const process = async () => {
const task_calender_id =
"729f5bea9ba83ff9b82dd797f15089a051fe850a4da66fcc3936835e89e3de89@group.calendar.google.com";
const url = new URL(
`https://www.googleapis.com/calendar/v3/calendars/${task_calender_id}/events`
);
try {
let data = await fetch(url, {
method: "POST",
headers: {
Authorization: `Bearer ${token()}`,
},
body: JSON.stringify(req.body.data),
});
data = await data.json();
if (data.error) {
if (data.error.code === 401) {
console.warn("📣Notice: Token expired, refreshing...");
const refreshStatus = await refreshToken();
if (refreshStatus === "success") {
console.warn("📣Notice: Token refresh success");
return await process();
} else {
console.error("❌Error: Can't refresh token");
return refreshStatus;
}
}
console.error(
`❌Error: ${data.error.code}, ${data.error.message}`
);
return data;
}
res.json(data);
} catch (err) {
console.error(`❌Error: ${err}`);
return err;
}
};
return await process();
});