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

class 3-5 initial

Browse Source
This commit is contained in:
seung6lee
2026-03-04 21:39:44 +09:00
commit 1873180948
15 changed files with 1044 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/calendar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 305 B

public/index.html
+35
View File
@@ -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>
public/script.js
+83
View File
@@ -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);
public/style.css
+270
View File
@@ -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 */
public/style.css.map
+1
View File
@@ -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"}
public/style.scss
+341
View File
@@ -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;
}
}