반응형

https://www.earthhero.me/139

 

ChatGPT와 함께한 무료 조회 시스템 만들기 – HTML과 구글시트(Google Sheets) + 구글앱스스크립트(Google

이번 글에서는 ChatGPT와 함께 고민하고 만들었던 무료 조회 시스템 구축 방법을 공유해보려고 합니다. 별도의 서버나 데이터베이스 없이, 단지 구글스프레드시트와 Google Apps Script, 그리고 간단한

www.earthhero.me

 

일전에 개시한 글의 html코드를 공개합니다.

중간중간에 앱스크립트 ID가 코드를 넣어야 하는 부분은 별도로 표기했습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <title>관리비 조회 시스템</title>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <style>
    body {
      font-family: 'Segoe UI', 'Noto Sans KR', sans-serif;
      max-width: 800px;
      width: 90%;
      margin: 30px auto;
      padding: 20px;
      background-color: #f8f9fa;
      color: #333;
      line-height: 1.7;
    }
    h1, h2 {
      text-align: center;
      color: #2c3e50;
    }
    form {
      background-color: #ffffff;
      border: 1px solid #ccc;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 30px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }
    label {
      display: block;
      margin-top: 15px;
      font-weight: bold;
    }
    input, select, button {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border-radius: 6px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }
    button {
      margin-top: 20px;
      background-color: #4CAF50;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    .highlight {
      background-color: #fff8dc;
      border: 1px solid #f0c36d;
      padding: 15px;
      margin-top: 25px;
      font-weight: bold;
      color: #c0392b;
      border-radius: 8px;
    }
  </style>
</head>
<body>
 
  <h1>📋 관리비 조회 시스템</h1>
 
  <form action="스크립트 링크"
        method="POST" target="_blank" onsubmit="return validateFormAndCaptcha();">
 
    <label for="year">조회 연도</label>
    <select name="year" id="year" required>
      <option value="">선택</option>
      <option value="25">2025</option>
      <option value="26">2026</option>
      <option value="27">2027</option>
    </select>
 
    <label for="month">조회 월</label>
    <select name="month" id="month" required>
      <option value="">선택</option>
      <option value="01">01월</option>
      <option value="02">02월</option>
      <option value="03">03월</option>
      <option value="04">04월</option>
      <option value="05">05월</option>
      <option value="06">06월</option>
      <option value="07">07월</option>
      <option value="08">08월</option>
      <option value="09">09월</option>
      <option value="10">10월</option>
      <option value="11">11월</option>
      <option value="12">12월</option>
    </select>
 
    <label for="owner">소유자 이름 (한글만)</label>
    <input type="text" name="owner" id="owner" pattern="[가-힣]{2,}" required>
 
    <label for="phone">휴대폰 번호 (숫자만, 예: 01012345678)</label>
    <input type="text" name="phone" id="phone" pattern="\d{10,11}" maxlength="11" required>
 
    <label for="birth">생년월일 (예: 19800101)</label>
    <input type="text" name="birth" id="birth" pattern="\d{8}" maxlength="8" required>
 
    <!-- ✅ reCAPTCHA -->
    <div class="g-recaptcha" data-sitekey="생성한 키값입력"></div>
 
    <button type="submit">📋 조회하기</button>
  </form>
 
  <h2>관리비 시스템 안내</h2>
 
  <p>‘관리비 시스템’은 소유주와 입주민이 편리하게 관리비 내역을 조회하고, 관리사무소와 원활히 소통할 수 있도록 만든 통합 관리 시스템입니다.</p>
 
  <p>본 시스템은 정확한 데이터 기반, 투명한 정보 공개, 실용적인 기술을 바탕으로 집합건물 관리의 새로운 기준을 제시합니다.</p>
 
  <p>누구나 쉽게 사용할 수 있도록 설계된 모바일 반응형 시스템으로, 입주민과 관리사무소 모두에게 편리한 환경을 제공합니다.</p>
 
  <div class="highlight">
    ⚠ 본 시스템은 입주민 및 관계자 전용입니다.<br>
    외부로 공유하거나 무단 전파하는 행위는 금지되어 있으며,<br>
    허가되지 않은 접근은 제한 또는 차단될 수 있습니다.
  </div>
 
  <script>
    function validateFormAndCaptcha() {
      const owner = document.getElementById('owner').value.trim();
      const phone = document.getElementById('phone').value.trim();
      const birth = document.getElementById('birth').value.trim();
      const captcha = grecaptcha.getResponse();
 
      if (!/^[가-힣]{2,}$/.test(owner)) {
        alert("소유자 이름은 한글 2자 이상 입력해주세요.");
        return false;
      }
      if (!/^\d{10,11}$/.test(phone)) {
        alert("휴대폰 번호는 숫자 10~11자리로 입력해주세요.");
        return false;
      }
      if (!/^\d{8}$/.test(birth)) {
        alert("생년월일은 8자리 숫자(예: 19800101)로 입력해주세요.");
        return false;
      }
      if (captcha.length === 0) {
        alert("로봇 인증(reCAPTCHA)을 완료해주세요.");
        return false;
      }
      return true;
    }
  </script>
 
</body>
</html>

 

아래 그림은 chat gpt의 달리를 이용해서 만들어본건데 역시나 단어는 아직까지 잘 못 만드네요.

 

반응형
저작자표시 비영리 변경금지

다른 글

다른 글 더 둘러보기

티스토리툴바