[Spring] HTML을 이용한 상품 등록 페이지 중복 제거

김상현·2022년 11월 29일

Spring

목록 보기

10/13

📒 [실전! 스프링 부트와 JPA 활용 - 김영한] 프로젝트를 완성한 후 부족한 기능을 개선한 후 정리하는 글입니다.

📍 개선한 기능

이전에 기존의 책(Book) 유형에 해당하는 상품 유형 1개만 등록이 가능한 상태에서 앨범(Album)과 영화(Movie) 상품 유형을 추가로 등록할 수 있도록 수정한 시도가 있었습니다. 🧷 참고
기능 구현 및 동작에는 오류가 없었지만, 3개 유형의 상품을 등록하기 위해 상품 유형에 해당하는 페이지를 각각 제작하였습니다.
- 책(Book) 유형에 해당하는 상품을 등록하기 위한 createBookForm.html
- 앨범(Album) 유형에 해당하는 상품을 등록하기 위한 createAlbumForm.html
- 영화(Movie) 유형에 해당하는 상품을 등록하기 위한 createMovieForm.html
비슷한 Form 3개를 복사 붙여넣기를 통해 주먹구구식으로 해결했지만, 이것은 분명 좋지 않은 개발 상태임을 개발 호소인으로서 직감하였지만 해결 방법이 떠오르지 않아서 일단 남겨두기로 하였습니다.
이후 상품 목록 기능을 개선하기 위해 BootStrap의 Docs에서 컴포넌트를 확인하던 중 아코디언 을 발견하였습니다.
3개의 상품 유형을 1개의 페이지 안에 다 담게 되면 페이지가 너무 길어져 사용자가 기능을 한번에 파악하기 어려워져서 UX(사용자 경험) 측면에서 좋지 못하다고 생각했습니다.
하지만 3개의 상품등록 페이지에 해당하는 HTML을 1개의 아코디언 컴포넌트를 사용하여 구성하면 화면상에서는 축약되어 표현되기 때문에 사용자 경험 측면에서도 나쁘지 않고, 개발적인 측면에서도 중복을 제거할 수 있기 때문에 진행하고 있던 상품 목록 기능 개선을 잠시 접어두고 다시 상품 등록 기능을 재구성 하였습니다.

📌 수정 전 상품 등록 페이지

📌 수정 후 상품 등록 페이지

📍 기능 개선 과정

📒 BootStrap Docs의 Accordion을 참고하여 작성하였습니다.

📌 상품 등록 페이지 통합

BootStrap Docs Accordion 컴포넌트를 활용하여 <div class="accordion-body"> 의 CONTENT 부분에 각 상품의 createForm 을 작성하였습니다.

🧷 BootStrap Accordion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        CONTET
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        CONTET
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        CONTET
      </div>
    </div>
  </div>
</div>

📌 중복으로 작성되었던 코드 제거

각 상품 별로 작성되었던 createOOOOForm.html 파일을 모두 제거하였습니다.
Controller 에서도 각 상품 별로 존재하던 GetMapping 코드 모두 제거하였습니다.
1개의 GetMapping으로 모든 모든 상품을 등록할 수 있도록 수정하였습니다.

@GetMapping("/items/new")
public String createBookForm(Model model){
    model.addAttribute("albumForm", new AlbumForm());
    model.addAttribute("bookForm", new BookForm());
    model.addAttribute("movieForm", new MovieForm());
    return "items/createItemForm";
}