diff --git a/build.gradle b/build.gradle
index 3c16da85f..1c227ed6b 100644
--- a/build.gradle
+++ b/build.gradle
@@ -21,6 +21,8 @@ dependencies {
     implementation 'org.springframework.boot:spring-boot-starter-validation'
     implementation 'org.springframework.boot:spring-boot-starter-jdbc'
     runtimeOnly 'com.h2database:h2'
+    compileOnly 'org.projectlombok:lombok:1.18.30'
+    annotationProcessor 'org.projectlombok:lombok:1.18.30'
 }
 
 test {
diff --git a/src/main/java/roomescape/controller/ReservationController.java b/src/main/java/roomescape/controller/ReservationController.java
index 649c9458e..1d228aca9 100644
--- a/src/main/java/roomescape/controller/ReservationController.java
+++ b/src/main/java/roomescape/controller/ReservationController.java
@@ -5,7 +5,7 @@
 
 @Controller
 public class ReservationController {
-    private static final String VIEW_RESERVATION = "reservation";
+    private static final String VIEW_RESERVATION = "new-reservation";
 
     @GetMapping("/reservation")
     public String reservation() {
diff --git a/src/main/java/roomescape/controller/TimeApiController.java b/src/main/java/roomescape/controller/TimeApiController.java
new file mode 100644
index 000000000..3d39b3fd2
--- /dev/null
+++ b/src/main/java/roomescape/controller/TimeApiController.java
@@ -0,0 +1,37 @@
+package roomescape.controller;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import roomescape.dto.TimeRequest;
+import roomescape.dto.TimeResponse;
+import roomescape.service.TimeService;
+
+import java.net.URI;
+import java.util.List;
+
+@RestController
+@RequestMapping("/times")
+@RequiredArgsConstructor
+public class TimeApiController {
+
+    private final TimeService timeService;
+
+    @PostMapping
+    public ResponseEntity<TimeResponse> create(@RequestBody TimeRequest request) {
+        TimeResponse response = timeService.create(request);
+        return ResponseEntity.created(URI.create("/times/" + response.getId()))
+                .body(response);
+    }
+
+    @GetMapping
+    public List<TimeResponse> findAll() {
+        return timeService.findAll();
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<Void> delete(@PathVariable Long id) {
+        timeService.delete(id);
+        return ResponseEntity.noContent().build();
+    }
+}
diff --git a/src/main/java/roomescape/controller/TimeController.java b/src/main/java/roomescape/controller/TimeController.java
new file mode 100644
index 000000000..1934146c1
--- /dev/null
+++ b/src/main/java/roomescape/controller/TimeController.java
@@ -0,0 +1,14 @@
+package roomescape.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class TimeController {
+    private static final String VIEW_TIME = "time";
+
+    @GetMapping("/time")
+    public String home() {
+        return VIEW_TIME;
+    }
+}
diff --git a/src/main/java/roomescape/domain/Reservation.java b/src/main/java/roomescape/domain/Reservation.java
index 8cbf434b3..839986df0 100644
--- a/src/main/java/roomescape/domain/Reservation.java
+++ b/src/main/java/roomescape/domain/Reservation.java
@@ -10,9 +10,9 @@ public class Reservation {
     private final Long id;
     private final String name;
     private final LocalDate date;
-    private final LocalTime time;
+    private final Time time;
 
-    private Reservation(Long id, String name, LocalDate date, LocalTime time) {
+    private Reservation(Long id, String name, LocalDate date, Time time) {
         validate(name, date, time);
         this.id = id;
         this.name = name;
@@ -20,11 +20,11 @@ private Reservation(Long id, String name, LocalDate date, LocalTime time) {
         this.time = time;
     }
 
-    public static Reservation of(Long id, String name, LocalDate date, LocalTime time) {
+    public static Reservation of(Long id, String name, LocalDate date, Time time) {
         return new Reservation(id, name, date, time);
     }
 
-    private void validate(String name, LocalDate date, LocalTime time) {
+    private void validate(String name, LocalDate date, Time time) {
         List<String> errors = new ArrayList<>();
 
         if (name == null || name.isBlank()) {
@@ -54,7 +54,7 @@ public LocalDate getDate() {
         return date;
     }
 
-    public LocalTime getTime() {
+    public Time getTime() {
         return time;
     }
 }
diff --git a/src/main/java/roomescape/domain/Time.java b/src/main/java/roomescape/domain/Time.java
new file mode 100644
index 000000000..ff626db93
--- /dev/null
+++ b/src/main/java/roomescape/domain/Time.java
@@ -0,0 +1,38 @@
+package roomescape.domain;
+
+public class Time {
+    private final Long id;
+    private final String time;
+
+    private Time(Long id, String time) {
+        validate(time);
+        this.id = id;
+        this.time = time;
+    }
+
+    private void validate(String time) {
+        if (time == null) {
+            throw new IllegalArgumentException("시간 값은 null일 수 없습니다.");
+        }
+        if (time.isBlank()) {
+            throw new IllegalArgumentException("시간 값은 빈 문자열일 수 없습니다.");
+        }
+    }
+
+    public static Time of(Long id, String time) {
+        return new Time(id, time);
+    }
+
+    public static Time of(String time) {
+        return of(null, time);
+    }
+
+    public Long getId() {
+        return id;
+    }
+
+    public String getTime() {
+        return time;
+    }
+}
+
diff --git a/src/main/java/roomescape/dto/ReservationRequest.java b/src/main/java/roomescape/dto/ReservationRequest.java
index 8e4259418..144e739c4 100644
--- a/src/main/java/roomescape/dto/ReservationRequest.java
+++ b/src/main/java/roomescape/dto/ReservationRequest.java
@@ -16,9 +16,7 @@ public class ReservationRequest {
     @JsonFormat(pattern = "yyyy-MM-dd")
     private LocalDate date;
 
-    @NotNull
-    @JsonFormat(pattern = "HH:mm")
-    private LocalTime time;
+    private Long timeId;
 
     protected ReservationRequest() {
     }
@@ -31,8 +29,7 @@ public LocalDate getDate() {
         return date;
     }
 
-    public LocalTime getTime() {
-        return time;
+    public Long getTimeId() {
+        return timeId;
     }
 }
-
diff --git a/src/main/java/roomescape/dto/ReservationResponse.java b/src/main/java/roomescape/dto/ReservationResponse.java
index b5af322e2..bc5e7b671 100644
--- a/src/main/java/roomescape/dto/ReservationResponse.java
+++ b/src/main/java/roomescape/dto/ReservationResponse.java
@@ -14,13 +14,13 @@ public class ReservationResponse {
     private LocalDate date;
 
     @JsonFormat(pattern = "HH:mm")
-    private LocalTime time;
+    private TimeResponse time;
 
     public ReservationResponse(Reservation reservation) {
         this.id = reservation.getId();
         this.name = reservation.getName();
         this.date = reservation.getDate();
-        this.time = reservation.getTime();
+        this.time = new TimeResponse(reservation.getTime());
     }
 
     public Long getId() {
@@ -35,7 +35,7 @@ public LocalDate getDate() {
         return date;
     }
 
-    public LocalTime getTime() {
+    public TimeResponse getTime() {
         return time;
     }
 }
\ No newline at end of file
diff --git a/src/main/java/roomescape/dto/TimeRequest.java b/src/main/java/roomescape/dto/TimeRequest.java
new file mode 100644
index 000000000..2067e2d52
--- /dev/null
+++ b/src/main/java/roomescape/dto/TimeRequest.java
@@ -0,0 +1,14 @@
+package roomescape.dto;
+
+import jakarta.validation.constraints.NotBlank;
+
+public class TimeRequest {
+    @NotBlank
+    private String time;
+
+    protected TimeRequest() {};
+
+    public String getTime() {
+        return time;
+    }
+}
diff --git a/src/main/java/roomescape/dto/TimeResponse.java b/src/main/java/roomescape/dto/TimeResponse.java
new file mode 100644
index 000000000..4db3a6343
--- /dev/null
+++ b/src/main/java/roomescape/dto/TimeResponse.java
@@ -0,0 +1,21 @@
+package roomescape.dto;
+
+import roomescape.domain.Time;
+
+public class TimeResponse {
+    private Long id;
+    private String time;
+
+    public TimeResponse(Time time) {
+        this.id = time.getId();
+        this.time = time.getTime();
+    }
+
+    public Long getId() {
+        return id;
+    }
+
+    public String getTime() {
+        return time;
+    }
+}
diff --git a/src/main/java/roomescape/repository/JdbcReservationRepository.java b/src/main/java/roomescape/repository/JdbcReservationRepository.java
index 5d950e1e8..49d069ebf 100644
--- a/src/main/java/roomescape/repository/JdbcReservationRepository.java
+++ b/src/main/java/roomescape/repository/JdbcReservationRepository.java
@@ -1,5 +1,7 @@
 package roomescape.repository;
 
+import java.sql.PreparedStatement;
+import java.time.LocalDate;
 import java.util.List;
 import java.util.Map;
 import java.util.Optional;
@@ -7,8 +9,11 @@
 import org.springframework.jdbc.core.JdbcTemplate;
 import org.springframework.jdbc.core.RowMapper;
 import org.springframework.jdbc.core.simple.SimpleJdbcInsert;
+import org.springframework.jdbc.support.GeneratedKeyHolder;
+import org.springframework.jdbc.support.KeyHolder;
 import org.springframework.stereotype.Repository;
 import roomescape.domain.Reservation;
+import roomescape.domain.Time;
 import roomescape.dto.ReservationResponse;
 
 @Repository
@@ -24,34 +29,60 @@ public JdbcReservationRepository(DataSource dataSource) {
                 .usingGeneratedKeyColumns("id");
     }
 
-    private final RowMapper<Reservation> rowMapper = (rs, rowNum) -> Reservation.of(
-            rs.getLong("id"),
-            rs.getString("name"),
-            rs.getDate("date").toLocalDate(),
-            rs.getTime("time").toLocalTime()
-    );
+    private final RowMapper<Reservation> rowMapper = (rs, rowNum) -> {
+        Long reservationId = rs.getLong("reservation_id");
+        String name = rs.getString("name");
+        LocalDate date = LocalDate.parse(rs.getString("date"));
+
+        Long timeId = rs.getLong("time_id");
+        String timeValue = rs.getString("time_value");
+        Time time = Time.of(timeId, timeValue);
+
+        return Reservation.of(reservationId, name, date, time);
+    };
 
     @Override
     public List<ReservationResponse> findAll() {
-        List<Reservation> reservations = jdbcTemplate.query("SELECT * FROM reservation ORDER BY id", rowMapper);
+        String sql = """
+                SELECT 
+                    r.id AS reservation_id,
+                    r.name,
+                    r.date,
+                    t.id AS time_id,
+                    t.time AS time_value
+                FROM reservation r
+                INNER JOIN time t ON r.time_id = t.id
+                ORDER BY r.id
+                """;
+
+        List<Reservation> reservations = jdbcTemplate.query(sql, rowMapper);
         return reservations.stream()
                 .map(ReservationResponse::new)
                 .toList();
     }
 
+
     @Override
     public ReservationResponse save(Reservation reservation) {
-        Number key = insert.executeAndReturnKey(Map.of(
-                "name", reservation.getName(),
-                "date", reservation.getDate(),
-                "time", reservation.getTime()
-        ));
+        String sql = "INSERT INTO reservation (name, date, time_id) VALUES (?, ?, ?)";
+        KeyHolder keyHolder = new GeneratedKeyHolder();
+
+        jdbcTemplate.update(con -> {
+            PreparedStatement ps = con.prepareStatement(sql, new String[]{"id"});
+            ps.setString(1, reservation.getName());
+            ps.setString(2, reservation.getDate().toString());
+            ps.setLong(3, reservation.getTime().getId());
+            return ps;
+        }, keyHolder);
+
+        Long generatedId = keyHolder.getKey().longValue();
         Reservation saved = Reservation.of(
-                key.longValue(),
+                generatedId,
                 reservation.getName(),
                 reservation.getDate(),
                 reservation.getTime()
         );
+
         return new ReservationResponse(saved);
     }
 
diff --git a/src/main/java/roomescape/repository/JdbcTimeRepository.java b/src/main/java/roomescape/repository/JdbcTimeRepository.java
new file mode 100644
index 000000000..9910a5a88
--- /dev/null
+++ b/src/main/java/roomescape/repository/JdbcTimeRepository.java
@@ -0,0 +1,54 @@
+package roomescape.repository;
+
+import java.sql.PreparedStatement;
+import java.util.List;
+import java.util.Optional;
+import lombok.RequiredArgsConstructor;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.RowMapper;
+import org.springframework.jdbc.support.GeneratedKeyHolder;
+import org.springframework.jdbc.support.KeyHolder;
+import org.springframework.stereotype.Repository;
+import roomescape.domain.Time;
+
+@Repository
+@RequiredArgsConstructor
+public class JdbcTimeRepository implements TimeRepository {
+
+    private final JdbcTemplate jdbcTemplate;
+
+    private final RowMapper<Time> rowMapper = (rs, rowNum) ->
+            Time.of(rs.getLong("id"), rs.getString("time"));
+
+    @Override
+    public Time save(Time time) {
+        String sql = "INSERT INTO time (time) VALUES (?)";
+        KeyHolder keyHolder = new GeneratedKeyHolder();
+
+        jdbcTemplate.update(con -> {
+            PreparedStatement ps = con.prepareStatement(sql, new String[]{"id"});
+            ps.setString(1, time.getTime());
+            return ps;
+        }, keyHolder);
+
+        Long generatedId = keyHolder.getKey().longValue();
+        return Time.of(generatedId, time.getTime());
+    }
+
+    @Override
+    public List<Time> findAll() {
+        return jdbcTemplate.query("SELECT * FROM time", rowMapper);
+    }
+
+    @Override
+    public void deleteById(Long id) {
+        jdbcTemplate.update("DELETE FROM time WHERE id = ?", id);
+    }
+
+    @Override
+    public Optional<Time> findById(Long id) {
+        List<Time> times = jdbcTemplate.query("SELECT * FROM time WHERE id = ?", rowMapper, id);
+        return times.stream().findFirst();
+    }
+}
+
diff --git a/src/main/java/roomescape/repository/TimeRepository.java b/src/main/java/roomescape/repository/TimeRepository.java
new file mode 100644
index 000000000..b693c6e75
--- /dev/null
+++ b/src/main/java/roomescape/repository/TimeRepository.java
@@ -0,0 +1,16 @@
+package roomescape.repository;
+
+import java.util.List;
+import java.util.Optional;
+import roomescape.domain.Time;
+
+public interface TimeRepository {
+    Time save(Time time);
+
+    List<Time> findAll();
+
+    void deleteById(Long id);
+
+    Optional<Time> findById(Long id);
+
+}
\ No newline at end of file
diff --git a/src/main/java/roomescape/service/ReservationService.java b/src/main/java/roomescape/service/ReservationService.java
index 97630f7d3..418b99e2e 100644
--- a/src/main/java/roomescape/service/ReservationService.java
+++ b/src/main/java/roomescape/service/ReservationService.java
@@ -1,38 +1,37 @@
 package roomescape.service;
 
 
-import java.util.HashMap;
+import java.time.LocalDate;
 import java.util.List;
-import java.util.Map;
-import org.springframework.jdbc.core.JdbcTemplate;
-import org.springframework.jdbc.core.namedparam.MapSqlParameterSource;
-import org.springframework.jdbc.core.simple.SimpleJdbcInsert;
+import lombok.AllArgsConstructor;
+import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
 import roomescape.domain.Reservation;
+import roomescape.domain.Time;
 import roomescape.dto.ReservationRequest;
 import roomescape.dto.ReservationResponse;
 import roomescape.exception.status.ReservationNotFoundException;
 import roomescape.repository.ReservationRepository;
+import roomescape.repository.TimeRepository;
 
 @Service
+@RequiredArgsConstructor
 public class ReservationService {
     private final ReservationRepository reservationRepository;
-
-    public ReservationService(ReservationRepository reservationRepository) {
-        this.reservationRepository = reservationRepository;
-    }
+    private final TimeRepository timeRepository;
 
     public List<ReservationResponse> findAll() {
         return reservationRepository.findAll();
     }
 
     public ReservationResponse create(ReservationRequest request) {
-        Reservation reservation = Reservation.of(
-                null,
-                request.getName(),
-                request.getDate(),
-                request.getTime()
-        );
+        LocalDate date = request.getDate();
+
+        Time time = timeRepository.findById(request.getTimeId())
+                .orElseThrow(() -> new IllegalArgumentException("존재하지 않는 시간입니다."));
+
+        Reservation reservation = Reservation.of(null, request.getName(), date, time);
+
         return reservationRepository.save(reservation);
     }
 
diff --git a/src/main/java/roomescape/service/TimeService.java b/src/main/java/roomescape/service/TimeService.java
new file mode 100644
index 000000000..a354892fc
--- /dev/null
+++ b/src/main/java/roomescape/service/TimeService.java
@@ -0,0 +1,32 @@
+package roomescape.service;
+
+import java.util.List;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+import roomescape.domain.Time;
+import roomescape.dto.TimeRequest;
+import roomescape.dto.TimeResponse;
+import roomescape.repository.TimeRepository;
+
+@Service
+@RequiredArgsConstructor
+public class TimeService {
+
+    private final TimeRepository timeRepository;
+
+    public TimeResponse create(TimeRequest request) {
+        Time time = Time.of(request.getTime());
+        Time saved = timeRepository.save(time);
+        return new TimeResponse(saved);
+    }
+
+    public List<TimeResponse> findAll() {
+        return timeRepository.findAll().stream()
+                .map(TimeResponse::new)
+                .toList();
+    }
+
+    public void delete(Long id) {
+        timeRepository.deleteById(id);
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/schema.sql b/src/main/resources/schema.sql
index 8d9ab2754..303fa1f89 100644
--- a/src/main/resources/schema.sql
+++ b/src/main/resources/schema.sql
@@ -1,8 +1,14 @@
-CREATE TABLE reservation
-(
-    id      BIGINT       NOT NULL AUTO_INCREMENT,
-    name    VARCHAR(255) NOT NULL,
-    date    VARCHAR(255) NOT NULL,
-    time    VARCHAR(255) NOT NULL,
-    PRIMARY KEY (id)
+CREATE TABLE time (
+                      id BIGINT NOT NULL AUTO_INCREMENT,
+                      time VARCHAR(255) NOT NULL,
+                      PRIMARY KEY (id)
+);
+
+CREATE TABLE reservation (
+                             id BIGINT NOT NULL AUTO_INCREMENT,
+                             name VARCHAR(255) NOT NULL,
+                             date VARCHAR(255) NOT NULL,
+                             time_id BIGINT,
+                             PRIMARY KEY (id),
+                             FOREIGN KEY (time_id) REFERENCES time(id)
 );
diff --git a/src/main/resources/static/js/new-reservation.js b/src/main/resources/static/js/new-reservation.js
index 520d0cf42..8101dc422 100644
--- a/src/main/resources/static/js/new-reservation.js
+++ b/src/main/resources/static/js/new-reservation.js
@@ -3,210 +3,210 @@ const RESERVATION_API_ENDPOINT = '/reservations';
 const TIME_API_ENDPOINT = '/times';
 
 document.addEventListener('DOMContentLoaded', () => {
-  document.getElementById('add-reservation').addEventListener('click', addEditableRow);
-  fetchReservations();
-  fetchTimes();
+    document.getElementById('add-reservation').addEventListener('click', addEditableRow);
+    fetchReservations();
+    fetchTimes();
 });
 
 function fetchTimes() {
-  requestReadTimes()
-      .then(data => {
-        const timeSelectControl = createFormControl(data);
-        appendFormControlToDocument(timeSelectControl);
-      })
-      .catch(error => console.error('Error fetching time:', error));
+    requestReadTimes()
+        .then(data => {
+            const timeSelectControl = createFormControl(data);
+            appendFormControlToDocument(timeSelectControl);
+        })
+        .catch(error => console.error('Error fetching time:', error));
 }
 
 function createFormControl(timeData) {
-  const select = document.createElement('select');
-  select.className = 'form-control';
-  select.id = 'time-select';
+    const select = document.createElement('select');
+    select.className = 'form-control';
+    select.id = 'time-select';
 
-  const defaultOption = document.createElement('option');
-  defaultOption.textContent = "시간 선택";
-  select.appendChild(defaultOption);
+    const defaultOption = document.createElement('option');
+    defaultOption.textContent = "시간 선택";
+    select.appendChild(defaultOption);
 
-  timeData.forEach(time => {
-    const option = document.createElement('option');
-    option.value = time.id;
-    option.textContent = time.time;
-    select.appendChild(option);
-  });
+    timeData.forEach(time => {
+        const option = document.createElement('option');
+        option.value = time.id;
+        option.textContent = time.time;
+        select.appendChild(option);
+    });
 
-  return select;
+    return select;
 }
 
 function appendFormControlToDocument(control) {
-  document.body.appendChild(control);
+    document.body.appendChild(control);
 }
 
 function fetchReservations() {
-  requestRead()
-      .then(renderReservations)
-      .catch(error => console.error('Error fetching reservations:', error));
+    requestRead()
+        .then(renderReservations)
+        .catch(error => console.error('Error fetching reservations:', error));
 }
 
 function renderReservations(data) {
-  const tableBody = document.getElementById('reservation-table-body');
-  tableBody.innerHTML = '';
+    const tableBody = document.getElementById('reservation-table-body');
+    tableBody.innerHTML = '';
 
-  data.forEach(reservation => {
-    const row = tableBody.insertRow();
-    insertReservationRow(row, reservation);
-  });
+    data.forEach(reservation => {
+        const row = tableBody.insertRow();
+        insertReservationRow(row, reservation);
+    });
 }
 
 function insertReservationRow(row, reservation) {
-  ['id', 'name', 'date'].forEach((field, index) => {
-    row.insertCell(index).textContent = reservation[field];
-  });
+    ['id', 'name', 'date'].forEach((field, index) => {
+        row.insertCell(index).textContent = reservation[field];
+    });
 
-  row.insertCell(3).textContent = reservation.time.time;
+    row.insertCell(3).textContent = reservation.time.time;
 
-  const actionCell = row.insertCell(4);
-  actionCell.appendChild(createActionButton('삭제', 'btn-danger', deleteRow));
+    const actionCell = row.insertCell(4);
+    actionCell.appendChild(createActionButton('삭제', 'btn-danger', deleteRow));
 }
 
 function createActionButton(label, className, eventListener) {
-  const button = document.createElement('button');
-  button.textContent = label;
-  button.classList.add('btn', className, 'mr-2');
-  button.addEventListener('click', eventListener);
-  return button;
+    const button = document.createElement('button');
+    button.textContent = label;
+    button.classList.add('btn', className, 'mr-2');
+    button.addEventListener('click', eventListener);
+    return button;
 }
 
 function addEditableRow() {
 
-  if (isEditing) return;  // 이미 편집 중인 경우 추가하지 않음
+    if (isEditing) return;  // 이미 편집 중인 경우 추가하지 않음
 
-  const tableBody = document.getElementById('reservation-table-body');
-  const row = tableBody.insertRow();
-  isEditing = true;
+    const tableBody = document.getElementById('reservation-table-body');
+    const row = tableBody.insertRow();
+    isEditing = true;
 
-  createEditableFieldsFor(row);
-  addSaveAndCancelButtonsToRow(row);
+    createEditableFieldsFor(row);
+    addSaveAndCancelButtonsToRow(row);
 }
 
 function createEditableFieldsFor(row) {
-  const nameInput = createInput('text');
-  const dateInput = createInput('date');
-  const timeDropdown = document.getElementById('time-select').cloneNode(true);
-
-  const fields = ['', nameInput, dateInput, timeDropdown];
-
-  fields.forEach((field, index) => {
-    const cell = row.insertCell(index);
-    if (typeof field === 'string') {
-      cell.textContent = field;
-    } else {
-      cell.appendChild(field);
-    }
-  });
+    const nameInput = createInput('text');
+    const dateInput = createInput('date');
+    const timeDropdown = document.getElementById('time-select').cloneNode(true);
+
+    const fields = ['', nameInput, dateInput, timeDropdown];
+
+    fields.forEach((field, index) => {
+        const cell = row.insertCell(index);
+        if (typeof field === 'string') {
+            cell.textContent = field;
+        } else {
+            cell.appendChild(field);
+        }
+    });
 }
 
 function addSaveAndCancelButtonsToRow(row) {
-  const actionCell = row.insertCell(4);
-  actionCell.appendChild(createActionButton('확인', 'btn-primary', saveRow));
-  actionCell.appendChild(createActionButton('취소', 'btn-secondary', () => {
-    row.remove();
-    isEditing = false;
-  }));
+    const actionCell = row.insertCell(4);
+    actionCell.appendChild(createActionButton('확인', 'btn-primary', saveRow));
+    actionCell.appendChild(createActionButton('취소', 'btn-secondary', () => {
+        row.remove();
+        isEditing = false;
+    }));
 }
 
 function createInput(type) {
-  const input = document.createElement('input');
-  input.type = type;
-  input.className = 'form-control';
-  return input;
+    const input = document.createElement('input');
+    input.type = type;
+    input.className = 'form-control';
+    return input;
 }
 
 function saveRow(event) {
-  const row = event.target.parentNode.parentNode;
-  const nameInput = row.querySelector('input[type="text"]');
-  const dateInput = row.querySelector('input[type="date"]');
-  const timeSelect = row.querySelector('select');
+    const row = event.target.parentNode.parentNode;
+    const nameInput = row.querySelector('input[type="text"]');
+    const dateInput = row.querySelector('input[type="date"]');
+    const timeSelect = row.querySelector('select');
 
-  const reservation = {
-    name: nameInput.value,
-    date: dateInput.value,
-    time: timeSelect.value
-  };
+    const reservation = {
+        name: nameInput.value,
+        date: dateInput.value,
+        timeId: parseInt(timeSelect.value)
+    };
 
-  requestCreate(reservation)
-      .then(data => updateRowWithReservationData(row, data))
-      .catch(error => console.error('Error:', error));
+    requestCreate(reservation)
+        .then(data => updateRowWithReservationData(row, data))
+        .catch(error => console.error('Error:', error));
 
-  isEditing = false;  // isEditing 값을 false로 설정
+    isEditing = false;  // isEditing 값을 false로 설정
 }
 
 function updateRowWithReservationData(row, data) {
-  const cells = row.cells;
-  cells[0].textContent = data.id;
-  cells[1].textContent = data.name;
-  cells[2].textContent = data.date;
-  cells[3].textContent = data.time.time;
-
-  // 버튼 변경: 삭제 버튼으로 변경
-  cells[4].innerHTML = '';
-  cells[4].appendChild(createActionButton('삭제', 'btn-danger', deleteRow));
-
-  isEditing = false;
-
-  // Remove the editable input fields and just show the saved data
-  for (let i = 1; i <= 3; i++) {
-    const inputElement = cells[i].querySelector('input');
-    if (inputElement) {
-      inputElement.remove();
+    const cells = row.cells;
+    cells[0].textContent = data.id;
+    cells[1].textContent = data.name;
+    cells[2].textContent = data.date;
+    cells[3].textContent = data.time.time;
+
+    // 버튼 변경: 삭제 버튼으로 변경
+    cells[4].innerHTML = '';
+    cells[4].appendChild(createActionButton('삭제', 'btn-danger', deleteRow));
+
+    isEditing = false;
+
+    // Remove the editable input fields and just show the saved data
+    for (let i = 1; i <= 3; i++) {
+        const inputElement = cells[i].querySelector('input');
+        if (inputElement) {
+            inputElement.remove();
+        }
     }
-  }
 }
 
 function deleteRow(event) {
-  const row = event.target.closest('tr');
-  const reservationId = row.cells[0].textContent;
+    const row = event.target.closest('tr');
+    const reservationId = row.cells[0].textContent;
 
-  requestDelete(reservationId)
-      .then(() => row.remove())
-      .catch(error => console.error('Error:', error));
+    requestDelete(reservationId)
+        .then(() => row.remove())
+        .catch(error => console.error('Error:', error));
 }
 
 function requestCreate(reservation) {
-  const requestOptions = {
-    method: 'POST',
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify(reservation)
-  };
+    const requestOptions = {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(reservation)
+    };
 
-  return fetch(RESERVATION_API_ENDPOINT, requestOptions)
-      .then(response => {
-        if (response.status === 201) return response.json();
-        throw new Error('Create failed');
-      });
+    return fetch(RESERVATION_API_ENDPOINT, requestOptions)
+        .then(response => {
+            if (response.status === 201) return response.json();
+            throw new Error('Create failed');
+        });
 }
 
 function requestRead() {
-  return fetch(RESERVATION_API_ENDPOINT)
-      .then(response => {
-        if (response.status === 200) return response.json();
-        throw new Error('Read failed');
-      });
+    return fetch(RESERVATION_API_ENDPOINT)
+        .then(response => {
+            if (response.status === 200) return response.json();
+            throw new Error('Read failed');
+        });
 }
 
 function requestDelete(id) {
-  const requestOptions = {
-    method: 'DELETE',
-  };
+    const requestOptions = {
+        method: 'DELETE',
+    };
 
-  return fetch(`${RESERVATION_API_ENDPOINT}/${id}`, requestOptions)
-      .then(response => {
-        if (response.status !== 204) throw new Error('Delete failed');
-      });
+    return fetch(`${RESERVATION_API_ENDPOINT}/${id}`, requestOptions)
+        .then(response => {
+            if (response.status !== 204) throw new Error('Delete failed');
+        });
 }
 
 function requestReadTimes() {
-  return fetch(TIME_API_ENDPOINT)
-      .then(response => {
-        if (response.status === 200) return response.json();
-        throw new Error('Read failed');
-      });
+    return fetch(TIME_API_ENDPOINT)
+        .then(response => {
+            if (response.status === 200) return response.json();
+            throw new Error('Read failed');
+        });
 }
diff --git a/src/test/java/roomescape/MissionStepTest.java b/src/test/java/roomescape/MissionStepTest.java
index e9919f4b9..c3975042c 100644
--- a/src/test/java/roomescape/MissionStepTest.java
+++ b/src/test/java/roomescape/MissionStepTest.java
@@ -155,5 +155,44 @@ public class MissionStepTest {
         assertThat(countAfterDelete).isEqualTo(0);
     }
 
+    @Test
+    void 팔단계() {
+        Map<String, String> params = new HashMap<>();
+        params.put("time", "10:00");
+
+        RestAssured.given().log().all()
+                .contentType(ContentType.JSON)
+                .body(params)
+                .when().post("/times")
+                .then().log().all()
+                .statusCode(201)
+                .header("Location", "/times/1");
+
+        RestAssured.given().log().all()
+                .when().get("/times")
+                .then().log().all()
+                .statusCode(200)
+                .body("size()", is(1));
+
+        RestAssured.given().log().all()
+                .when().delete("/times/1")
+                .then().log().all()
+                .statusCode(204);
+    }
+
+    @Test
+    void 구단계() {
+        Map<String, String> reservation = new HashMap<>();
+        reservation.put("name", "브라운");
+        reservation.put("date", "2023-08-05");
+        reservation.put("time", "10:00");
+
+        RestAssured.given().log().all()
+                .contentType(ContentType.JSON)
+                .body(reservation)
+                .when().post("/reservations")
+                .then().log().all()
+                .statusCode(400);
+    }
 
 }