feat: Node.js + Express 백엔드 추가

- server.js: Express 서버, 정적파일 서빙 + API 3개 - GET /api/greeting (랜덤 한국어 인사말) - POST /api/echo (에코 테스트) - GET /api/stats (서버 업타임/버전 정보) - 정적 파일을 public/ 디렉토리로 이동 - index.html에서 fetch로 API 호출하는 버튼 추가 - .gitignore, package.json 추가
2026-06-12 06:21:19 +00:00
parent 54850b79b1
commit 051c830039
9 changed files with 1037 additions and 44 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>안녕하세요!</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <nav>
+    <span class="logo">🌸 테스트 사이트</span>
+    <a href="/" class="btn active">홈</a>
+    <a href="/about.html" class="btn">소개</a>
+    <a href="/contact.html" class="btn">연락처</a>
+  </nav>
+
+  <main>
+    <h1>안녕하세요! 👋</h1>
+    <p class="subtitle">Coolify 배포 테스트용 샘플 사이트입니다.</p>
+
+    <div class="card">
+      <span class="badge">API 테스트</span>
+      <h2>랜덤 인사말</h2>
+      <p id="greeting-text">버튼을 누르면 서버에서 인사말을 가져옵니다.</p>
+      <div class="button-group">
+        <button class="btn primary" onclick="fetchGreeting()">인사말 가져오기</button>
+      </div>
+    </div>
+
+    <div class="card">
+      <span class="badge">API 테스트</span>
+      <h2>에코 테스트</h2>
+      <p>텍스트를 입력하면 서버가 그대로 돌려줍니다.</p>
+      <div class="input-row">
+        <input type="text" id="echo-input" placeholder="텍스트를 입력하세요..." />
+        <button class="btn secondary" onclick="fetchEcho()">전송</button>
+      </div>
+      <p id="echo-result" class="result-text"></p>
+    </div>
+
+    <div class="card">
+      <span class="badge">API 테스트</span>
+      <h2>서버 상태</h2>
+      <div id="stats-area" class="stats-grid"></div>
+      <div class="button-group" style="margin-top:1rem">
+        <button class="btn outline" onclick="fetchStats()">상태 조회</button>
+      </div>
+    </div>
+  </main>
+
+  <footer>배포 테스트 사이트 &mdash; Coolify + Gitea + Node.js</footer>
+
+  <script>
+    async function fetchGreeting() {
+      const el = document.getElementById('greeting-text');
+      el.textContent = '불러오는 중...';
+      try {
+        const res = await fetch('/api/greeting');
+        const data = await res.json();
+        el.textContent = data.message;
+      } catch {
+        el.textContent = '오류가 발생했습니다.';
+      }
+    }
+
+    async function fetchEcho() {
+      const input = document.getElementById('echo-input').value;
+      const result = document.getElementById('echo-result');
+      if (!input) { result.textContent = '텍스트를 입력해주세요.'; return; }
+      try {
+        const res = await fetch('/api/echo', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text: input }),
+        });
+        const data = await res.json();
+        result.textContent = `서버 응답: "${data.echo}" (${data.length}자)`;
+      } catch {
+        result.textContent = '오류가 발생했습니다.';
+      }
+    }
+
+    async function fetchStats() {
+      const area = document.getElementById('stats-area');
+      area.innerHTML = '<span style="color:#718096">불러오는 중...</span>';
+      try {
+        const res = await fetch('/api/stats');
+        const d = await res.json();
+        area.innerHTML = `
+          <div class="stat-item"><span class="stat-label">업타임</span><span>${d.uptime}초</span></div>
+          <div class="stat-item"><span class="stat-label">Node 버전</span><span>${d.nodeVersion}</span></div>
+          <div class="stat-item"><span class="stat-label">플랫폼</span><span>${d.platform}</span></div>
+          <div class="stat-item"><span class="stat-label">배포 시각</span><span>${new Date(d.deployedAt).toLocaleString('ko-KR')}</span></div>
+        `;
+      } catch {
+        area.innerHTML = '<span style="color:#e53e3e">오류가 발생했습니다.</span>';
+      }
+    }
+  </script>
+</body>
+</html>