ㅌㅌㅌ
This commit is contained in:
328
public/index.html
Normal file
328
public/index.html
Normal file
@@ -0,0 +1,328 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>계산기 & 메모장</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a; --panel: #1e293b; --panel2: #334155;
|
||||
--txt: #e2e8f0; --muted: #94a3b8; --accent: #38bdf8; --accent2: #f59e0b;
|
||||
--danger: #ef4444; --border: #334155;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
background: var(--bg); color: var(--txt); line-height: 1.5;
|
||||
}
|
||||
header { padding: 18px 24px; border-bottom: 1px solid var(--border); }
|
||||
header h1 { margin: 0; font-size: 20px; }
|
||||
header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
|
||||
.grid {
|
||||
display: grid; gap: 18px; padding: 24px; max-width: 1100px; margin: 0 auto;
|
||||
grid-template-columns: 320px 1fr;
|
||||
}
|
||||
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }
|
||||
.card {
|
||||
background: var(--panel); border: 1px solid var(--border);
|
||||
border-radius: 12px; padding: 16px;
|
||||
}
|
||||
.card h2 { margin: 0 0 12px; font-size: 15px; color: var(--accent); }
|
||||
|
||||
/* 계산기 */
|
||||
.calc-display {
|
||||
background: #0b1220; border: 1px solid var(--border); border-radius: 8px;
|
||||
padding: 12px 14px; text-align: right; font-size: 28px; min-height: 48px;
|
||||
overflow-x: auto; white-space: nowrap; margin-bottom: 12px;
|
||||
}
|
||||
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
|
||||
.calc-keys button {
|
||||
padding: 14px 0; font-size: 18px; border: none; border-radius: 8px;
|
||||
background: var(--panel2); color: var(--txt); cursor: pointer;
|
||||
}
|
||||
.calc-keys button:hover { filter: brightness(1.2); }
|
||||
.calc-keys .op { background: #1d4ed8; }
|
||||
.calc-keys .eq { background: var(--accent); color: #06283d; font-weight: 700; }
|
||||
.calc-keys .fn { background: #475569; color: var(--muted); }
|
||||
.calc-keys .span2 { grid-column: span 2; }
|
||||
|
||||
/* 메모장 */
|
||||
.row { display: flex; gap: 8px; margin-bottom: 8px; }
|
||||
input[type=text], textarea {
|
||||
width: 100%; background: #0b1220; color: var(--txt);
|
||||
border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
|
||||
font-size: 14px; font-family: inherit;
|
||||
}
|
||||
textarea { min-height: 140px; resize: vertical; }
|
||||
button.btn {
|
||||
border: none; border-radius: 8px; padding: 9px 14px; font-size: 14px;
|
||||
cursor: pointer; background: var(--accent); color: #06283d; font-weight: 600;
|
||||
}
|
||||
button.btn.ghost { background: var(--panel2); color: var(--txt); font-weight: 500; }
|
||||
button.btn.danger { background: var(--danger); color: #fff; }
|
||||
button.btn:hover { filter: brightness(1.1); }
|
||||
|
||||
.list { list-style: none; margin: 12px 0 0; padding: 0; }
|
||||
.list li {
|
||||
border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
|
||||
margin-bottom: 8px; cursor: pointer; background: #0b1220;
|
||||
}
|
||||
.list li:hover { border-color: var(--accent); }
|
||||
.list li.active { border-color: var(--accent); background: #102132; }
|
||||
.list .t { font-weight: 600; }
|
||||
.list .m { color: var(--muted); font-size: 12px; margin-top: 2px;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.file-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 8px; border: 1px solid var(--border); border-radius: 8px;
|
||||
padding: 8px 12px; margin-bottom: 8px; background: #0b1220;
|
||||
}
|
||||
.file-row .meta { color: var(--muted); font-size: 12px; }
|
||||
.file-row a { color: var(--accent); text-decoration: none; }
|
||||
.toast {
|
||||
position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
|
||||
background: var(--panel2); border: 1px solid var(--border); color: var(--txt);
|
||||
padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s;
|
||||
pointer-events: none; font-size: 14px;
|
||||
}
|
||||
.toast.show { opacity: 1; }
|
||||
.muted { color: var(--muted); font-size: 12px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>🧮 계산기 & 📝 메모장</h1>
|
||||
<p>계산기 · 메모는 DB · 파일은 오브젝트 스토리지에 저장됩니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid">
|
||||
<!-- 계산기 -->
|
||||
<section class="card" aria-label="계산기">
|
||||
<h2>계산기</h2>
|
||||
<div id="display" class="calc-display">0</div>
|
||||
<div class="calc-keys" id="keys">
|
||||
<button class="fn" data-act="clear">C</button>
|
||||
<button class="fn" data-act="back">⌫</button>
|
||||
<button class="fn" data-val="%">%</button>
|
||||
<button class="op" data-val="/">÷</button>
|
||||
|
||||
<button data-val="7">7</button>
|
||||
<button data-val="8">8</button>
|
||||
<button data-val="9">9</button>
|
||||
<button class="op" data-val="*">×</button>
|
||||
|
||||
<button data-val="4">4</button>
|
||||
<button data-val="5">5</button>
|
||||
<button data-val="6">6</button>
|
||||
<button class="op" data-val="-">−</button>
|
||||
|
||||
<button data-val="1">1</button>
|
||||
<button data-val="2">2</button>
|
||||
<button data-val="3">3</button>
|
||||
<button class="op" data-val="+">+</button>
|
||||
|
||||
<button class="span2" data-val="0">0</button>
|
||||
<button data-val=".">.</button>
|
||||
<button class="eq" data-act="eq">=</button>
|
||||
</div>
|
||||
<p class="muted" style="margin-top:10px">키보드 입력도 가능합니다 (Enter = , Esc = C).</p>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<!-- 메모장 -->
|
||||
<section class="card" aria-label="메모장" style="margin-bottom:18px">
|
||||
<h2>메모장</h2>
|
||||
<div class="row">
|
||||
<input type="text" id="noteTitle" placeholder="제목" />
|
||||
</div>
|
||||
<textarea id="noteBody" placeholder="메모 내용을 입력하세요…"></textarea>
|
||||
<div class="row" style="margin-top:8px">
|
||||
<button class="btn" id="saveNote">저장</button>
|
||||
<button class="btn ghost" id="newNote">새 메모</button>
|
||||
<button class="btn danger" id="delNote" style="margin-left:auto">삭제</button>
|
||||
</div>
|
||||
<ul class="list" id="noteList"></ul>
|
||||
</section>
|
||||
|
||||
<!-- 파일 저장 -->
|
||||
<section class="card" aria-label="파일">
|
||||
<h2>파일 저장 (오브젝트 스토리지)</h2>
|
||||
<div class="row">
|
||||
<input type="file" id="fileInput" />
|
||||
<button class="btn" id="uploadBtn">업로드</button>
|
||||
</div>
|
||||
<div id="fileList"></div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const toast = (msg) => {
|
||||
const t = $("toast"); t.textContent = msg; t.classList.add("show");
|
||||
clearTimeout(toast._t); toast._t = setTimeout(() => t.classList.remove("show"), 2200);
|
||||
};
|
||||
|
||||
/* ---------------- 계산기 ---------------- */
|
||||
const display = $("display");
|
||||
let expr = "";
|
||||
const render = () => (display.textContent = expr || "0");
|
||||
|
||||
function inputVal(v) {
|
||||
// 연산자 중복 방지
|
||||
if (/[+\-*/%]/.test(v) && /[+\-*/%]$/.test(expr)) expr = expr.slice(0, -1);
|
||||
expr += v; render();
|
||||
}
|
||||
function evaluate() {
|
||||
if (!expr) return;
|
||||
try {
|
||||
// 숫자/연산자/소수점/괄호만 허용 후 평가
|
||||
if (!/^[0-9+\-*/%.() ]+$/.test(expr)) throw new Error("invalid");
|
||||
const result = Function('"use strict"; return (' + expr + ")")();
|
||||
if (result === undefined || Number.isNaN(result) || !Number.isFinite(result))
|
||||
throw new Error("invalid");
|
||||
expr = String(result); render();
|
||||
} catch {
|
||||
toast("계산할 수 없는 식입니다");
|
||||
}
|
||||
}
|
||||
$("keys").addEventListener("click", (e) => {
|
||||
const b = e.target.closest("button"); if (!b) return;
|
||||
if (b.dataset.val != null) inputVal(b.dataset.val);
|
||||
else if (b.dataset.act === "clear") { expr = ""; render(); }
|
||||
else if (b.dataset.act === "back") { expr = expr.slice(0, -1); render(); }
|
||||
else if (b.dataset.act === "eq") evaluate();
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (document.activeElement && /INPUT|TEXTAREA/.test(document.activeElement.tagName)) return;
|
||||
if (/[0-9+\-*/%.]/.test(e.key)) inputVal(e.key);
|
||||
else if (e.key === "Enter" || e.key === "=") { e.preventDefault(); evaluate(); }
|
||||
else if (e.key === "Escape") { expr = ""; render(); }
|
||||
else if (e.key === "Backspace") { expr = expr.slice(0, -1); render(); }
|
||||
});
|
||||
render();
|
||||
|
||||
/* ---------------- 메모장 ---------------- */
|
||||
let notes = [];
|
||||
let activeId = null;
|
||||
|
||||
async function api(path, opts) {
|
||||
const res = await fetch(path, opts);
|
||||
const ct = res.headers.get("content-type") || "";
|
||||
const data = ct.includes("json") ? await res.json() : null;
|
||||
if (!res.ok) throw new Error((data && data.error) || res.statusText);
|
||||
return data;
|
||||
}
|
||||
|
||||
async function loadNotes() {
|
||||
try {
|
||||
notes = await api("/api/notes");
|
||||
renderNotes();
|
||||
} catch (e) { toast("메모 불러오기 실패: " + e.message); }
|
||||
}
|
||||
function renderNotes() {
|
||||
const ul = $("noteList"); ul.innerHTML = "";
|
||||
for (const n of notes) {
|
||||
const li = document.createElement("li");
|
||||
if (n.id === activeId) li.classList.add("active");
|
||||
li.innerHTML = `<div class="t"></div><div class="m"></div>`;
|
||||
li.querySelector(".t").textContent = n.title || "(제목 없음)";
|
||||
li.querySelector(".m").textContent = (n.body || "").slice(0, 60) || " ";
|
||||
li.onclick = () => selectNote(n.id);
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
function selectNote(id) {
|
||||
const n = notes.find((x) => x.id === id); if (!n) return;
|
||||
activeId = id; $("noteTitle").value = n.title || ""; $("noteBody").value = n.body || "";
|
||||
renderNotes();
|
||||
}
|
||||
$("newNote").onclick = () => {
|
||||
activeId = null; $("noteTitle").value = ""; $("noteBody").value = "";
|
||||
renderNotes(); $("noteTitle").focus();
|
||||
};
|
||||
$("saveNote").onclick = async () => {
|
||||
const title = $("noteTitle").value, body = $("noteBody").value;
|
||||
try {
|
||||
if (activeId == null) {
|
||||
const n = await api("/api/notes", {
|
||||
method: "POST", headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ title, body }),
|
||||
});
|
||||
activeId = n.id;
|
||||
} else {
|
||||
await api("/api/notes/" + activeId, {
|
||||
method: "PUT", headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ title, body }),
|
||||
});
|
||||
}
|
||||
await loadNotes(); toast("메모를 저장했습니다");
|
||||
} catch (e) { toast("저장 실패: " + e.message); }
|
||||
};
|
||||
$("delNote").onclick = async () => {
|
||||
if (activeId == null) { $("newNote").click(); return; }
|
||||
try {
|
||||
await api("/api/notes/" + activeId, { method: "DELETE" });
|
||||
activeId = null; $("noteTitle").value = ""; $("noteBody").value = "";
|
||||
await loadNotes(); toast("메모를 삭제했습니다");
|
||||
} catch (e) { toast("삭제 실패: " + e.message); }
|
||||
};
|
||||
|
||||
/* ---------------- 파일 ---------------- */
|
||||
async function loadFiles() {
|
||||
try {
|
||||
const files = await api("/api/files");
|
||||
const box = $("fileList"); box.innerHTML = "";
|
||||
if (!files.length) { box.innerHTML = '<p class="muted">저장된 파일이 없습니다.</p>'; return; }
|
||||
for (const f of files) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "file-row";
|
||||
const left = document.createElement("div");
|
||||
const a = document.createElement("a");
|
||||
a.href = "/api/files/" + encodeURIComponent(f.name);
|
||||
a.textContent = f.name; a.download = f.name;
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "meta";
|
||||
meta.textContent = humanSize(f.size) + " · " + new Date(f.lastModified).toLocaleString();
|
||||
left.appendChild(a); left.appendChild(meta);
|
||||
const del = document.createElement("button");
|
||||
del.className = "btn danger"; del.textContent = "삭제";
|
||||
del.onclick = () => deleteFile(f.name);
|
||||
row.appendChild(left); row.appendChild(del);
|
||||
box.appendChild(row);
|
||||
}
|
||||
} catch (e) { toast("파일 목록 실패: " + e.message); }
|
||||
}
|
||||
function humanSize(n) {
|
||||
if (n == null) return "";
|
||||
const u = ["B", "KB", "MB", "GB"]; let i = 0;
|
||||
while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
|
||||
return (i ? n.toFixed(1) : n) + u[i];
|
||||
}
|
||||
$("uploadBtn").onclick = async () => {
|
||||
const input = $("fileInput");
|
||||
const file = input.files && input.files[0];
|
||||
if (!file) { toast("업로드할 파일을 선택하세요"); return; }
|
||||
try {
|
||||
await api("/api/files/" + encodeURIComponent(file.name), {
|
||||
method: "PUT",
|
||||
headers: { "content-type": file.type || "application/octet-stream" },
|
||||
body: file,
|
||||
});
|
||||
input.value = ""; await loadFiles(); toast("파일을 업로드했습니다");
|
||||
} catch (e) { toast("업로드 실패: " + e.message); }
|
||||
};
|
||||
async function deleteFile(name) {
|
||||
try {
|
||||
await api("/api/files/" + encodeURIComponent(name), { method: "DELETE" });
|
||||
await loadFiles(); toast("파일을 삭제했습니다");
|
||||
} catch (e) { toast("삭제 실패: " + e.message); }
|
||||
}
|
||||
|
||||
loadNotes();
|
||||
loadFiles();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user