[spring boot] spring boot로 카테고리 상세화 만들어보기

처음 카테고리를 나누려할 때 1차원 적으로 의류, 신발, 가방 등... 이렇게만 나누려고 했습니다. 다른 팀원들과 이야기 해보니 2차까지는 분류가 필요하다고 판단했습니다.

번개장터 카테고리화

번개장터의 카테고리를 보면서 이런식으로 만들면 좋겠다고 생각했습니다.

최대한 js를 안쓰로 thyemleaf만 가지고 화면을 만들어봤습니다.

 

이런식으로 카테고리를 나누었습니다.

 

결과화면입니다!

지금 모양이좀 이상하지만 나중에 bootstrap으로 다듬을 예정입니다.

 

 

1차, 2차 카테고리로 나누어서 string을 보내면 안되는가?

하나의 form에다가 모든 카테고리를 th:name으로 value값을 설정해봤습니다.

(html에서 controller로 정보를 넘기고 싶을때)

select문을 넣고 하나 고를 때마다 모든 1차 카테고리가 동시에 들어갔습니다.

이를 어찌해결할까 생각을 해봤는데 생각해보니 Controller에 String을 넘기고 그 String을 split하면 되지않을까라고 생각했습니다.

여기 category를 String으로 받고 ","을 기준으로 split 했습니다.

 

split으로 문자열을 쪼개면 String 배열로 반환이 됩니다. 제가 1차 카테고리를 뒤쪽에 나서 배열의 마지막(1)을 1차 카테고리에 넣었습니다.

여기서 category라는 변수는 제가 만든 category 테이블 entity 입니다. 

외래키로 Product를 받으면서 1차, 2차 카테고리를 정리합니다.

 

이렇게 split으로 카테고리를 쉽게 쪼갤 수 있게 되었습니다.

여기서 고민이 든게 "그냥 html에서 편하게 1차, 2차를 넘겨주면 안될까?" 라는 생각이 들었습니다.

최대한 js를 안쓰려고 생각을 했고 하나의 물품을 등록할 때 split 과정에서 서버 메모리가 많이 사용되지 않을거 같아서 일단 이런식으로 구성해봤습니다.

나중에 사용자가 많이 늘어나면 html에서 1차, 2차를 나누는 처리과정을 생각을 해봐야겠습니다.

 

 

============================================================================

22/04/26 오류를 발견했습니다.

여러가지를 select 하면 첫 번째 select한 것만 DB에 등록이 되는 현상이 있었습니다.

 

해결방안

선택된것을 JavaScript로 따로 때와서 해당 값만 Controller에 보내는 것이였습니다.

기존의 select 문의 field를 제거하고 하나의 input 테그에 id 는 result값으로 설정했습니다.

 

여기에 value를 주입시켜서 그 값을 category로 보낼 생각입니다.

select 문에 onchange를 걸어서 option이 선택될 때마다 동작하는 함수 handleOnChange()를 만들겠습니다.

가져온 데이터의 value를 뽑아서 result태그의 value를 변화시킵니다.

 

그러면 정상적으로 데이터가 주입이 됩니다.