앵커 기능 구현하기

✏️ 앵커의 필요성

• 클라이언트가 수정, 삭제 등을 요청할경우
  business 로직을 수행하고 redirect 로 응답하면 사실상 새로운 페이지가 랜더링 되는것이기 때문에
  클라이언트 입장에서 작업의 흐름이 끊기게 된다.
• 앵커 태그를 사용하면 응답과 동시에 개발자가 원하는 위치로 스크롤을 이동시킬 수 있다.

✏️ Web 계층 - 앵커 태그 추가

• 앵커 태그를 추가하면 해당 태그가 위치한 곳으로 스크롤을 이동시킬 수 있다.
• each 문으로 반복이 시작되는 곳에 앵커를 추가한다.
  • loop 의 특정 index 로 스크롤을 이동시킬 수 있다.
  • 앵커에 id 값은 유일한 값이여야 하므로 Entity 객체의 id 값을 사용한다.

<!-- 답변 반복 시작 -->
<div class="card my-3" th:each="answer : ${question.answerList}">

    <!--앵커 추가 시작 -->
    <a th:id="|answer_${answer.id}|"></a>
    <!--앵커 추가 종료 -->

    <div class="card-body">
        <div class="card-text" style="white-space: pre-line;" th:text="${answer.content}"></div>
        <div class="d-flex justify-content-end">

        ...

✏️ Controller 계층 - 앵커 redirect

🔗 format()

• 반환값 뒤에 # + 앵커의 id 값을 추가해주면 된다.
  • web 계층에서 앵커 id 를 answer_{answerId} 로 설정했기 때문에
    반환값에 앵커 id 를 그대로 추가해주면 된다.
  • format 라이브러리를 사용하면 깔끔하게 정리할 수 있다.
    • %s 로 2번째 매개변수 값이 순서대로 들어감

return String.format("redirect:/question/detail/%s#answer_%s"
        , id, answer.getId());
// 답변 Id 가 2 라면 #answer_2 가 더해지게 됨