임시저장

임시저장 기능은 한번도 저장한 적이 없으면 해당 테이블에 새로운 레코드를 추가해서 저장하게 된다.
이후 임시저장 기능을 이용하면 이미 기록한 레코드가 존재하므로 해당 레코드를 update해야 한다.

만약 한 화면에서 해당 버튼을 이용해서 insert / update를 구현하기 위해서는 처음 insert 버튼을 클릭했을때 해당 레코드의 id를 반환받아서 해당 기능의 버튼에 넣어줘야 한다.

먼저 간단하게 insert 하는 상황부터 보자

<button type="button" class="btn btn-success "
  	onclick="saveTemp(`${compSession.compId}`,`${jDto.jobsId}`)">임시저장</button>

saveTemp() 함수는 insert기능을 수행한다.
지금은 ${jDto.jobsId} 의 값이 없으므로 아무런 값도 파라미터에 전달 되지 않는다

	function saveTemp(id, jobs) {
            if (jobs > 0) {
			// id가 있으면 update 비동기 통신
            } else {
			$.ajax({
                    type: "post",
                    url: "/comp/jobs/write",
                    data: JSON.stringify(data),
                    headers: {
                        "content-type": "application/json; charset=utf-8"
                    },
                    dataType: "json"
                }).done((res) => {
                    jobsId = res.data;
                    changeBtn();
                    alert(res.msg);
                }).fail((err) => {
                    alert(err.responseJSON.msg);
                });
     }

해당 요청을 받는 컨트롤러는

    @PostMapping("/comp/jobs/write")
    public ResponseEntity<?> writeJobs(@RequestBody JobsWriteReqDto jDto) {
        Comp compSession = (Comp) session.getAttribute("compSession");
		// 유효성 검사
        Integer jobsId = jobsService.공고작성(jDto, compSession.getCompId());
        return new ResponseEntity<>(new ResponseDto<>(1, "저장 완료", jobsId), HttpStatus.CREATED);
    }

insert 를 수행하는 서비스는

    @Transactional
    public Integer 공고작성(JobsWriteReqDto jDto, Integer compId) {
        Integer jobsId = 0;
		// 권한 검사 
        try {
            jobsRepository.insert(jDto);
            jobsId = jDto.getJobsId();
        } catch (Exception e) {
            throw new CustomApiException("서버에 일시적인 오류가 발생했습니다22.", HttpStatus.INTERNAL_SERVER_ERROR);
        }
        return jobsId;
    }

insert를 수행하고 해당 id 를 리턴해줘야 한다.

insert를 수행하는 쿼리는

    <insert id="insert" useGeneratedKeys="true" keyProperty="jDto.jobsId">
      insert into jobs_tb <!-- insert 내용 -->
    </insert>

useGeneratedKeys="true" 옵션을 사용해서 insert된 레코드의 id를 리턴해야 한다.
keyProperty="jDto.jobsId" 는 리턴받을 id를 저장할 위치를 입력해주면 된다.

서비스에서 insert이후 id를 리턴하게 되고 컨트롤러에서 해당 id를 오브젝트에 저장한다.
비동기 통신이 성공하면 해당 id를 전역변수에 저장하고 changeBtn() 함수가 실행된다.

        function changeBtn() {
            $('#jobs-remove').remove();
            renderBtn();
        }

        function renderBtn() {
            let el = `
                    <div class="rButton ms-5 view-right2" id="jobs-remove">
                        <div class="row mb-2">
                            <button type="button" class="btn btn-success" 
							onclick="saveTemp(`+ compId + `,` + jobsId + `)">임시저장</button>
                        </div>
                        <div class="row mb-2">
                            <button type="button" class="btn btn-success" 
							onclick="saveJobs(`+ compId + `,` + jobsId + `)">공고등록</button>
                        </div>
                    </div>
        `;
            $('#jobs-render').append(el);
        }

saveJobs() 함수에 id 가 등록된 버튼을 다시 그린다.
이제 임시저장 버튼을 클릭하면 id가 존재하므로 update 요청을 하면 된다.

        function saveTemp(id, jobs) {
            compId = id;
            let data = {
				// 데이터 가져옴
            };
            if (jobs > 0) {
                $.ajax({
                    type: "put",
                    url: "/comp/jobs/update",
                    data: JSON.stringify(data),
                    headers: {
                        "content-type": "application/json; charset=utf-8"
                    },
                    dataType: "json"
                }).done((res) => {
                    jobsId = res.data;
                    alert(res.msg);
                }).fail((err) => {
                    alert(err.responseJSON.msg);
                });
            } else {
			// insert 하는 비동기 통신
            }
        }