중간테이블에 값 추가하기, 버튼 클릭 에러 수정하기

개발 도중 만난 에러

# 개발 요약
- 옵션그룹에 옵션들을 추가하는 개념, 옵션그룹과 옵션 엔티티는 다대다 관계
- 중간테이블인 옵션_옵션그룹에서 두 엔티티의 매핑 정보를 관리한다
- 분명 코드 로직은 맞는데 중간테이블에 값이 추가가 되지 않는 문제가 발생.

✅ 알게 된 점

• 처음에 무엇이 잘못되었는지 모르겠어서 몇 시간을 찾아보고, form 형태로 넘기지 않고 @RequestParam 으로도 바꿔보고 등 다양한 방식을 시도했다.
• 그러다, 팀원 중 한 분의 도움으로 debug 하는 방법에 대해서 좀 더 알게 되었고, 설정해 둔 breakpoint 에 아예 들어가지도 않는 것을 확인했다. (controller 단에 breakpoint)
• POST Mapping 으로 되어 있는 controller 에 들어가지도 않는다는 것은, 데이터 전송이 아예 이루어지지 않는다는 뜻이다
  • html 템플릿 코드로 들어가니, form 태그로 감싸져 있지 않아서 보내지지 않았다는, 아주 단순한 이유를 찾게되었다…

    <form th:action th:object="${OptionGroupDetailDto}" method="post">

    • 다음과 같이 form 태그로 감싸주니 정상적으로 데이터를 보내주었다.

버튼과 관련한 코드 개선

🤔 해결 하고 싶은 부분

1. button 클릭 시, onclick 속성을 부여해 정말 ~하시겠습니까? 와 같은 창을 구현하려 하는데,
   이미 th:onclick 속성을 사용하고 있어서 어떻게 해야 할지 고민.
2. 옵션그룹을 선택하면 상세페이지로 이동하고, 우측에 수정, 삭제 버튼을 클릭하면 해당 링크로 이동해야 하는데, 상세페이지로만 이동되는 문제
   (버튼들이 list 태그 안에 들어 있어서… 뭔가 뒤로 빠져서 앞으로 못나오는 것 같았다.)

기존 코드

/* a 태그로 감싼다 */
<a th:href="@{|/${storeSN}/admin/store/optionGroupDetail/${optionGroupId}|}">
    <button type="button" class="btn btn-primary">옵션 추가</button>
</a>

/* button 태그 안에 onclick 속성으로 url 이동 */
<button type="button" class="btn btn-primary" th:onclick="|location.href='@{|/${storeSN}/admin/store/optionGroup/modify/${optionGroup.id}|}'|">수정</button>

• button 태그 밖에 a 태그로 감싸는 방식
• 또는, 버튼 태그 안에 th:onclick 속성 넣어주기.

개선 코드

<input onclick="if ( !confirm('옵션을 추가하시겠습니까?') ) return false;" type="submit" value="옵션 추가" class="btn btn-primary my-2">

<a onclick="if ( !confirm('메뉴를 삭제하시겠습니까?') ) return false;" th:href="@{|/${storeSN}/admin/store/optionGroup/delete/${optionGroup.id}|}" class="btn btn-danger">삭제</a>

• button 태그를 사용하지 않고, a 태그를 사용함으로써 해결.
• locatino.href 가 아니라 그냥 th:href 로 손쉽게 해결할 수 있었다.