데이터 입력

controller

	@PostMapping("/api/v1/main")
    // json데이터를 dto 형식으로 알아서 바꿔줌
    public ResponseDTO<Object> postMainData(@RequestBody ReqInsertMainDTO ReqInsertMainDTO) {
        mainService.postMainData(ReqInsertMainDTO);
    }

ReqInsertMainDTO.java

package com.example.hr1.domain.main.dto;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.ToString;

@NoArgsConstructor
@AllArgsConstructor
@Getter
@ToString
public class ReqInsertMainDTO {
    private String regionsName;
}

mainService

public void postMainData(ReqInsertMainDTO reqInsertMainDTO){
        // 행 갯수
        long count = regionsRepository.count();

        // id에 +1해서 빌드
        RegionsEntity regionsEntity = RegionsEntity.builder()
        .regionId((int)count + 1)
        .regionName(reqInsertMainDTO.getRegionsName())
        .build();

        // 데이터 db에 저장
        regionsRepository.save(regionsEntity);
    }

+ json 형식으로 리턴

ResponseDTO.java

package com.example.hr1.common.dto;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;

@NoArgsConstructor
@AllArgsConstructor
@Builder
@Getter
public class ResponseDTO<T> {
    private Integer code;
    private String message;
    private T data;
}

controller

	@PostMapping("/api/v1/main")
    // json데이터를 dto 형식으로 알아서 바꿔줌
    public ResponseDTO<Object> postMainData(@RequestBody ReqInsertMainDTO ReqInsertMainDTO) {
        mainService.postMainData(ReqInsertMainDTO);

        return ResponseDTO
                .builder()
                .code(0)
                .message("region 등록에 성공했습니다")
                .build();
    }

추가 버튼 구현

html

<div>
  <input id="newRegion" type="text" placeholder="새 지역" />
  <button id="addButton">추가</button>
</div>

script

document.querySelector("#addButton").addEventListener("click", () => {

  const reqInsertMainDTO = {
    regionsName: document.querySelector("#newRegion").value
  };

  fetch("/api/v1/main", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(reqInsertMainDTO),
  })
    .then((response) => response.json())
  // 받은 응답을 JSON으로 파싱 (코드, 메세지, 데이터)
    .then((data) => {
    alert(data.message);
    // 받은 데이터의 코드가 0(OK 상태)이면 새로고침
    if(data.code === 0){
      location.reload();
    }
    // 서버에서 보낸 JSON 데이터를 사용
    console.log(data);
  })
    .catch((error) => {
    // 오류 처리
    console.error("Error:", error);
  });
});