class 3-5 initial
This commit is contained in:
+175
@@ -0,0 +1,175 @@
|
|||||||
|
# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
|
||||||
|
logs
|
||||||
|
_.log
|
||||||
|
npm-debug.log_
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# Caches
|
||||||
|
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
|
||||||
|
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
|
||||||
|
pids
|
||||||
|
_.pid
|
||||||
|
_.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
|
||||||
|
.temp
|
||||||
|
|
||||||
|
# Docusaurus cache and generated files
|
||||||
|
|
||||||
|
.docusaurus
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
|
|
||||||
|
# IntelliJ based IDEs
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Finder (MacOS) folder config
|
||||||
|
.DS_Store
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"tabWidth": 4,
|
||||||
|
"useTabs": false
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
# twofive
|
||||||
|
|
||||||
|
To install dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
To run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun run server.js
|
||||||
|
```
|
||||||
|
|
||||||
|
This project was created using `bun init` in bun v1.0.26. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"web": {
|
||||||
|
"client_id": "769538006975-q773s454k2l1r4q35vat4psbjfgg59pk.apps.googleusercontent.com",
|
||||||
|
"project_id": "g-cal-task-management25",
|
||||||
|
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
|
||||||
|
"token_uri": "https://oauth2.googleapis.com/token",
|
||||||
|
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
|
||||||
|
"client_secret": "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",
|
||||||
|
"redirect_uris": ["http://localhost:4000/callback"],
|
||||||
|
"javascript_origins": ["http://localhost"]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["ESNext", "DOM"],
|
||||||
|
"target": "ESNext",
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"allowJs": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"forceConsistentCasingInFileNames": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "twofive",
|
||||||
|
"module": "server.js",
|
||||||
|
"type": "module",
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/bun": "latest",
|
||||||
|
"sass": "^1.85.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"typescript": "^5.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"express": "^4.21.2",
|
||||||
|
"open": "^10.1.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"sass-watch": "sass --watch ./public/style.scss ./public/style.css"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 305 B |
@@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Class 3-5</title>
|
||||||
|
|
||||||
|
<script src="public/script.js"></script>
|
||||||
|
<link rel="stylesheet" href="public/style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header id="header">
|
||||||
|
<h1>Class 3-5</h1>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">학습자료 공유</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="https://docs.google.com/spreadsheets/d/1300PFLLgnXmlk94RF5o4OqpoF_dK4XymdAHU7rsrr7c/edit?usp=sharing" target="_blank">학급비 사용</a></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main">
|
||||||
|
<div class="box" 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"
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
<nav id="side">
|
||||||
|
<div class="box" id="info">
|
||||||
|
<meal-list></meal-list>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
class meal_list extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const hours = now.getHours();
|
||||||
|
|
||||||
|
this.date = new Date()
|
||||||
|
.toISOString()
|
||||||
|
.slice(0, 10)
|
||||||
|
.replace(/-/g, "");
|
||||||
|
|
||||||
|
switch (true) {
|
||||||
|
case hours < 8:
|
||||||
|
this.selectedType = 1;
|
||||||
|
break;
|
||||||
|
case hours < 14:
|
||||||
|
this.selectedType = 2;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
this.selectedType = 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
async get_meal(date, type) {
|
||||||
|
try {
|
||||||
|
console.log(`/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");
|
||||||
|
|
||||||
|
let data = await response.json();
|
||||||
|
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("❌ API Error:", error);
|
||||||
|
return ["식단 정보를 불러올 수 없습니다."];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async render() {
|
||||||
|
const header = document.createElement("header");
|
||||||
|
|
||||||
|
const select = document.createElement("select");
|
||||||
|
const types = ["아침", "점심", "저녁"];
|
||||||
|
types.forEach((type, index) => {
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.textContent = types[index];
|
||||||
|
option.value = index + 1;
|
||||||
|
if (index + 1 === this.selectedType) option.selected = true;
|
||||||
|
select.appendChild(option);
|
||||||
|
});
|
||||||
|
select.addEventListener("change", async () => {
|
||||||
|
this.selectedType = Number(select.value);
|
||||||
|
await this.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await this.get_meal(this.date, this.selectedType);
|
||||||
|
|
||||||
|
const ul = document.createElement("ul");
|
||||||
|
res.meal_list.forEach((meal) => {
|
||||||
|
const li = document.createElement("li");
|
||||||
|
li.textContent = meal;
|
||||||
|
ul.appendChild(li);
|
||||||
|
});
|
||||||
|
|
||||||
|
const kcal = document.createElement("p");
|
||||||
|
kcal.textContent = res.kcal;
|
||||||
|
|
||||||
|
header.appendChild(select);
|
||||||
|
header.appendChild(kcal);
|
||||||
|
|
||||||
|
this.innerHTML = "";
|
||||||
|
this.append(header);
|
||||||
|
this.appendChild(ul);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("meal-list", meal_list);
|
||||||
@@ -0,0 +1,270 @@
|
|||||||
|
@font-face {
|
||||||
|
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;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
font-family: "GMarketSans", serif;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
background-color: #F0F0F0;
|
||||||
|
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 {
|
||||||
|
border-radius: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
height: 32px;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #C8C8C8;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #888888;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.title::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 3px;
|
||||||
|
height: 14px;
|
||||||
|
background-color: #FF4B00;
|
||||||
|
margin-right: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-bottom: 1px solid #C8C8C8;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 24px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#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 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #0A0A0A;
|
||||||
|
}
|
||||||
|
#header h1 span {
|
||||||
|
color: #FF4B00;
|
||||||
|
}
|
||||||
|
#header ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
#header ul li {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
#header ul li a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #4A4A4A;
|
||||||
|
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 {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 60px - 10px);
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#side {
|
||||||
|
width: 400px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: 1px solid #C8C8C8;
|
||||||
|
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 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
#info meal-list header {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#info meal-list header select {
|
||||||
|
border: 1px solid #C8C8C8;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: "GMarketSans", serif;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
color: #0A0A0A;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.15s, box-shadow 0.15s;
|
||||||
|
}
|
||||||
|
#info meal-list header select:hover {
|
||||||
|
border-color: #0A0A0A;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
#info meal-list header select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #FF4B00;
|
||||||
|
}
|
||||||
|
#info meal-list ul {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
cursor: ns-resize;
|
||||||
|
}
|
||||||
|
#info meal-list ul::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#info meal-list ul li {
|
||||||
|
width: 100%;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 1px solid #C8C8C8;
|
||||||
|
border-left: 3px solid transparent;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
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 {
|
||||||
|
border: 1px solid #C8C8C8;
|
||||||
|
border-top: 3px solid #FF4B00;
|
||||||
|
width: calc(100% - 400px - 25px);
|
||||||
|
height: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#calendar iframe {
|
||||||
|
border-radius: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
#main {
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
#side {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
#task {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
#info {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
#calendar {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=style.css.map */
|
||||||
@@ -0,0 +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"}
|
||||||
@@ -0,0 +1,341 @@
|
|||||||
|
@font-face {
|
||||||
|
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;
|
||||||
|
$big_margin: 25px;
|
||||||
|
$nav_width: 400px;
|
||||||
|
$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;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Body ─────────────────────────────────────────────────────────────────────
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
font-family: "GMarketSans", serif;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: $small_margin;
|
||||||
|
background-color: $gray-1;
|
||||||
|
@include grid-bg(28px, rgba(0,0,0,0.06));
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Box ──────────────────────────────────────────────────────────────────────
|
||||||
|
.box {
|
||||||
|
border-radius: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Title ────────────────────────────────────────────────────────────────────
|
||||||
|
.title {
|
||||||
|
height: 32px;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid $gray-3;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: $gray-5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
// 포인트 컬러 왼쪽 태그
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 3px;
|
||||||
|
height: 14px;
|
||||||
|
background-color: $accent;
|
||||||
|
margin-right: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Header ───────────────────────────────────────────────────────────────────
|
||||||
|
#header {
|
||||||
|
width: 100%;
|
||||||
|
height: $header_height;
|
||||||
|
background-color: $white;
|
||||||
|
border-bottom: 1px solid $gray-3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 24px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// 헤더 하단 그리드 강조선
|
||||||
|
&::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 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: $black;
|
||||||
|
|
||||||
|
// 포인트 컬러 강조
|
||||||
|
span {
|
||||||
|
color: $accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $gray-7;
|
||||||
|
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 {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - #{$header_height} - #{$small_margin});
|
||||||
|
padding: $small_margin;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: $big_margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Side ─────────────────────────────────────────────────────────────────────
|
||||||
|
#side {
|
||||||
|
width: $nav_width;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: $big_margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Info ─────────────────────────────────────────────────────────────────────
|
||||||
|
#info {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: $white;
|
||||||
|
border: 1px solid $gray-3;
|
||||||
|
padding: $small_margin;
|
||||||
|
|
||||||
|
// 내부 그리드 배경
|
||||||
|
@include grid-bg(20px, rgba(0,0,0,0.03));
|
||||||
|
|
||||||
|
meal-list {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: $small_margin;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
header {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
select {
|
||||||
|
border: 1px solid $gray-3;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: "GMarketSans", serif;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
background-color: $white;
|
||||||
|
color: $black;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.15s, box-shadow 0.15s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $black;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: $accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: $small_margin;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
cursor: ns-resize;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 1px solid $gray-3;
|
||||||
|
border-left: 3px solid transparent; // 기본 상태
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: $small_margin;
|
||||||
|
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 {
|
||||||
|
border: 1px solid $gray-3;
|
||||||
|
border-top: 3px solid $accent; // 포인트 컬러 상단 강조선
|
||||||
|
width: calc(100% - #{$nav_width} - #{$big_margin});
|
||||||
|
height: 100%;
|
||||||
|
background-color: $white;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border-radius: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Responsive ───────────────────────────────────────────────────────────────
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#side {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#task {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import express from "express";
|
||||||
|
import path from "path";
|
||||||
|
import open from "open";
|
||||||
|
import fs from "fs";
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
|
||||||
|
app.use("/public", express.static(path.join(__dirname, "public")));
|
||||||
|
// app.use(express.urlencoded({ extends: true }));
|
||||||
|
app.use(express.json());
|
||||||
|
|
||||||
|
app.listen(4000, () => {
|
||||||
|
console.log("✅Pass: Server running at http://127.0.0.1:4000");
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get("/", (req, res) => {
|
||||||
|
res.sendFile(__dirname + "/public/index.html");
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get("/api/meal", async (req, res) => {
|
||||||
|
const item = req.query;
|
||||||
|
const date = item.date;
|
||||||
|
const type = item.type;
|
||||||
|
|
||||||
|
const base_url = new URL("https://open.neis.go.kr/hub/mealServiceDietInfo");
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
key: "6b442e68fabb4bee943947613b31eeee",
|
||||||
|
Type: "json",
|
||||||
|
ATPT_OFCDC_SC_CODE: "D10",
|
||||||
|
SD_SCHUL_CODE: "7240450",
|
||||||
|
MLSV_YMD: date,
|
||||||
|
MMEAL_SC_CODE: type,
|
||||||
|
});
|
||||||
|
const url = `${base_url}?${params.toString()}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
let data = await fetch(url);
|
||||||
|
|
||||||
|
if (!data.ok) {
|
||||||
|
res.send("No Information");
|
||||||
|
}
|
||||||
|
|
||||||
|
data = await data.json();
|
||||||
|
|
||||||
|
if (!data.mealServiceDietInfo[1].row[0]) {
|
||||||
|
res.send("No Information");
|
||||||
|
}
|
||||||
|
|
||||||
|
let meal_list = data.mealServiceDietInfo[1].row[0].DDISH_NM;
|
||||||
|
meal_list = meal_list.replace(/\([^)]+\)/g, "").split("<br/>");
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
meal_list: meal_list,
|
||||||
|
kcal: data.mealServiceDietInfo[1].row[0].CAL_INFO,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
res.send("No Information");
|
||||||
|
}
|
||||||
|
});
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"access_token": "ya29.a0AeXRPp6dQRljlR_5KWE8DgcWu4lkKXDAgErjVzNGkgIZwiCKXqk5MtqKfB2Wp_DG58SzfM2UmPJJpeIbflU-D0_xxCnD0u0En_OccmeRsSEE56KY5q_NtQtnpwUekEvtvEjhIiGfU0M5NdgljLvnAN7JkPvv-Kjd2liy59j17QaCgYKAWkSARASFQHGX2MiA14X1b8pOFBNNRtkZ3xKug0177",
|
||||||
|
"expires_in": 3599,
|
||||||
|
"scope": "https://www.googleapis.com/auth/calendar",
|
||||||
|
"token_type": "Bearer",
|
||||||
|
"refresh_token_expires_in": 571598,
|
||||||
|
"refresh_token": "1//0erCBDblHqeswCgYIARAAGA4SNwF-L9IrKNzH7uKvucIavo21bciIQe04jXA3w-aHCLvrUmUNoaIVNn1wx4fapAmpifxS-kjcPyk"
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user