Cha's Record

9월19일연습

—

제공

min gyung Cha
안

웹앱반응없는 상태까지 완료한 것(시트에 반영은 됨)

code.gs 

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index");
}

function submitForm(name, date, time, note) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");

  // 날짜 -> 열 매핑
  var dateMap = {
    "9.15.(월)": "B",
    "9.16.(화)": "C",
    "9.17.(수)": "D",
    "9.18.(목)": "E",
    "9.19.(금)": "F"
  };

  // 시간 -> 행 매핑
  var timeMap = {
    "19:00-20:00": { nameRow: 3, noteRow: 4 },
    "20:00-21:00": { nameRow: 5, noteRow: 6 }
  };

  var col = dateMap[date];        // 선택한 날짜의 열
  var rows = timeMap[time];       // 선택한 시간의 행들

  if (col && rows) {
    // 학생 이름 기록
    sheet.getRange(col + rows.nameRow).setValue(name);
    // 참고사항 기록
    sheet.getRange(col + rows.noteRow).setValue(note || "");
    return "저장 완료";
  } else {
    return "잘못된 입력값";
  }
}

index.html 
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="UTF-8">
    <title>아이좋아고등학교 3학년 1반 학부모 상담 예약</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
      }
      h2 {
        text-align: center;
        margin-bottom: 20px;
      }
      .greeting-box {
        border: 1px solid #ccc;
        padding: 15px;
        border-radius: 8px;
        background-color: #f9f9f9;
        margin-bottom: 25px;
        line-height: 1.6;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        margin-bottom: 30px;
      }
      th, td {
        border: 1px solid #ccc;
        padding: 10px;
      }
      th {
        background-color: #f1f1f1;
      }
      td:first-child {
        background-color: #fdfdfd;
        font-weight: bold;
        width: 120px;
      }
      /* 상담 신청 섹션 */
      .form-section {
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 8px;
        background-color: #fefefe;
      }
      .form-section h3 {
        margin-top: 0;
        margin-bottom: 15px;
      }
      .form-group {
        margin-bottom: 15px;
      }
      label {
        display: block;
        margin-bottom: 6px;
        font-weight: bold;
      }
      input[type="text"], select, textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 14px;
      }
      textarea {
        resize: vertical;
        min-height: 80px;
      }
      .radio-group {
        display: flex;
        gap: 20px;
      }
      .submit-btn {
        background-color: #007BFF;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        font-size: 15px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }
      .submit-btn:hover {
        background-color: #0056b3;
      }
    </style>
    <script>
      function handleSubmit() {
        const name = document.getElementById("studentName").value.trim();
        const date = document.getElementById("dateSelect").value;
        const time = document.querySelector('input[name="time"]:checked')?.value;
        const note = document.getElementById("note").value.trim();
        const btn = document.getElementById("submitBtn");

        if (!name || !date || !time) {
          alert("학생 이름, 날짜, 시간을 모두 입력해 주세요.");
          return;
        }

        // 서버로 데이터 전송
        google.script.run.withSuccessHandler(function(msg) {
          alert(msg);
          btn.textContent = "전송 완료";
          btn.disabled = true;
        }).submitForm(name, date, time, note);
      }
    </script>
  </head>
  <body>
    <!-- 제목 -->
    <h2>아이좋아고등학교 3학년 1반 학부모 상담 예약</h2>

    <!-- 인삿말 박스 -->
    <div class="greeting-box">
      안녕하십니까. 3학년 1반 학부모님.<br>
      학기초 상담주간을 맞이하여 학부모 상담을 실시하고자 합니다.<br>
      바쁘시겠지만, 시간을 내시어 자녀의 학교 생활 및 진로 진학 설계와 관련하여 
      알찬 시간이 될 수 있도록 많은 참석 부탁드립니다.<br>
      원하는 날짜와 시간을 선택하셔서 상담 예약을 부탁드립니다.
    </div>

    <!-- 표 -->
    <table>
      <tr>
        <th></th>
        <th>월</th>
        <th>화</th>
        <th>수</th>
        <th>목</th>
        <th>금</th>
      </tr>
      <tr>
        <td></td>
        <td>9.15.</td>
        <td>9.16.</td>
        <td>9.17.</td>
        <td>9.18.</td>
        <td>9.19.</td>
      </tr>
      <tr>
        <td>19:00-20:00</td>
        <td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr>
        <td>20:00-21:00</td>
        <td></td><td></td><td></td><td></td><td></td>
      </tr>
    </table>

    <!-- 상담 신청 섹션 -->
    <div class="form-section">
      <h3>상담 신청</h3>

      <div class="form-group">
        <label for="studentName">1. 학생의 이름을 적어주세요.</label>
        <input type="text" id="studentName" placeholder="학생 이름 입력">
      </div>

      <div class="form-group">
        <label for="dateSelect">2. 원하시는 날짜를 택해주세요.</label>
        <select id="dateSelect">
          <option value="9.15.(월)">9.15.(월)</option>
          <option value="9.16.(화)">9.16.(화)</option>
          <option value="9.17.(수)">9.17.(수)</option>
          <option value="9.18.(목)">9.18.(목)</option>
          <option value="9.19.(금)">9.19.(금)</option>
        </select>
      </div>

      <div class="form-group">
        <label>3. 원하시는 시간을 택해주세요.</label>
        <div class="radio-group">
          <label><input type="radio" name="time" value="19:00-20:00"> 19:00-20:00</label>
          <label><input type="radio" name="time" value="20:00-21:00"> 20:00-21:00</label>
        </div>
      </div>

      <div class="form-group">
        <label for="note">4. 참고사항이 있다면 적어주세요.</label>
        <textarea id="note" placeholder="참고사항 입력"></textarea>
      </div>

      <button id="submitBtn" class="submit-btn" onclick="handleSubmit()">전송</button>
    </div>
  </body>
</html>

웹앱 바로가기

시트 바로가기

코멘트

댓글 남기기

Cha's Record에서 더 알아보기

지금 구독하여 계속 읽고 전체 아카이브에 액세스하세요.

계속 읽기