$$config title: [SpringBoot] Sbb프로젝트 - 질문 하나에 대한 답변의 좋아요(replyLike) 버튼 추가 keywords: - SpringBoot - replyLike - ... $$ # 단계 1. Answer 테이블에 좋아요(reply_like) 컬럼 추가 : answer 테이블에 varchar 타입의 reply_like 추가하기 ```sql ALTER TABLE answer ADD `reply_like` VARCHAR(10) NOT NULL; ``` # 단계 2. Answer 엔티티에 좋아요(replyLike) 컬럼요소 추가하기 [주의?] question 테이블의 컬럼명과 동일하게 진행하기 (`_소문자` -> `대문자`) ```java private Boolean replyLike; ``` 하지만 sql에서는 boolean 형식을 제대로 인식하지 못해서 converter를 이용해서 (y/n) 즉, 0/1로 바꿔줘야 함. (`@Converter` 어노테이션 이용) ```java @Converter class BooleanToYNConverter implements AttributeConverter{ @Override public String convertToDatabaseColumn(Boolean attribute){ return (attribute != null && attribute) ? "Y" : "N"; } @Override public Boolean convertToEntityAttribute(String dbData){ return "Y".equals(dbData); } } ``` # 단계 3. question_detail.html 에 좋아요 요소 추가하기 - 좋아요와 답변 작성일자 요소를 가로로 정렬하기 (flex-direction-row) : 두 요소의 부모 요소를 flex(연못)로 만들고 두 요소(개구리들)을 flex-direction을 row로 하여 가로 정렬 > 가로로 정렬한 이미지 ![](https://to2.kr/dST) ```html

```
- 좋아요 버튼 스타일링 : 버튼을 담을 부모를 flex(연못)로 만들고 끝으로 보내기 위해서 justify-content 를 end로 설정하고 스타일링. ```html

```
- 좋아요 버튼 추가하기 - 버튼 클릭 행동을 위한 form(버튼 요소의 부모) 생성 : 버튼 클릭을 했을 때 이동할 주로를 action에 설정, 어노테이션은 `@PostMapping` ```html

```
- 버튼 요소 추가하기 : submit타입의 "좋아요"라고 적혀있는 버튼을 생성. ```html ``` ⬆️ 메서드 설명 `th:classappend="${answer.replyLike} ? text-danger : ''"` : 만약 answer.replyLike가 true라면 class에 text-danger를 추가하고 아니면 ""를 추가하기 (삼항연산자) ??? # 단계 4. AnswerController 에서 좋아요 클릭 함수 만들기 : `@PostMapping` 을 이용하여 만들기 (form의 action 참고) ```java @PostMapping("/like/{questionId}/{answerId}") public String clickLike (@PathVariable("questionId") Integer questionId, @PathVariable("answerId") Integer answerId){ this.answerService.setLike(answerId); //answerService에 저장 return String.format("redirect:/question/detail/%s", questionId); //setLike 후에 다시 해당 질문 페이지로 } ``` ⬆️ clickLike함수 설명 : 매개변수로 PostMapping의 주소의 값인 questionId와 answerId를 받음. AnswerService에서 setLike 함수(좋아요 클릭시 값설정 함수) 받아오기 setLike 후에는 해당 질문 상세 페이지로 !! # 단계 5. AnswerService를 이용해서 AnswerRepository에 있는 replyLike에 접근하는 함수 만들기 - 처음에 답변을 생성했을 때는 좋아요 값을 false로 설정 (create함수) : setter로 setReplyLike 처리 후 리포지터리에 저장 (save) ```java answer.setReplyLike(false); this.answerRepository.save(answer); ```
- setLike 함수 구현 : 매개변수로 답변의 고유 번호(answerId)를 받아오기. ReplyLike가 true면 false, flase면 true로 설정 후 리포지터리에 저장 (save) ```java public void setLike(Integer answerId) { Answer answer = answerRepository.findById(answerId).get(); if(answer.getReplyLike()==true){ answer.setReplyLike(false); } else{ answer.setReplyLike(true); } this.answerRepository.save(answer); } ```