[Front] 게시글 좋아요(Like / Dislike) 기능 만들기 - 1. 뷰 만들기

 

안녕하세요 주갬입니다!

 

오늘은 라라벨 블로그의 좋아요 기능을 구현하면서 여러분들께도 설명드리려고 합니다.

 

 

 

저는 다음과 같이 좋아요와 싫어요가 모두 있는 유튜브의 좋아요 기능을 구현할 예정입니다.

 

좋아요만 있는 단순 기능에서 더 나아가 좋아요와 싫어요를 중복으로 선택할 수 없는 투표 시스템을 구현하고 싶었습니다.

 

---

1. View

 

저는 화면을 먼저 만들고 (어려운 부분부터 먼저,,ㅎ) 백단 코드를 붙이는 스타일이라

기존에 있던 포스팅 뷰 페이지를 열고 Like / Dislike 버튼을 만들었습니다.

 

근데 지금보니까 왜 Dislike가 속 찬 하트지?.?

 

저는 디자인 감각이 없기때문에 Codepen에서 열심히 예쁜 버튼을 찾아다녔습니다. 디자인에 자신 없으시다면 codepen에서 예제를 잘 찾아 적용하면 좋습니다. 제가 참고한 링크를 공유합니다.

https://codepen.io/nirmalyaghosh/pen/KzPYXE

Firebase Like/Dislike

 

 

 

저는 위의 코드를 참고해서 다음과 같이 코드를 작성했습니다.

<!-- test.blade.php -->


		<div class="feeling_div">
			<div class="button-container like-container">
			    <button class="feeling_a">
			      <i class="fa fa-heart-o"> Like</i>    
			    </a>
			  </div>
			  <div class="button-container dislike-container">
			    <button class="feeling_a">
			      <i class="fa fa-heart"> Dislike</i>
			    </a>
			</div>
		</div>

 

<!-- 해당 부분 CSS -->

.feeling_div {
  display: flex;
  justify-content: center;
  align-items: center;
} 
.button-container {
  margin-left: 20px;
}
.feeling_a {
  background-color: #fff;
  border: 2px solid #2199e8;
  padding: 10px 20px;
  border-radius: 2px;
  color: #2199e8;
}     

 

이렇게 작성하시면 위와 같은 버튼의 레이아웃은 완성입니다.

 

---

2. 버튼 한 쪽이 선택되면 한 쪽이 해제되도록 설정 (.active 추가)

 

저는 다음과 같이  유튜브 좋아요 시스템처럼 Like가 눌리면 Dislike의 선택이 해제되고, Dislike가 눌리면 Like의 선택이 해제되도록 구현했습니다.

 

 

 

위의 코드에 다음과 같은 JavaScript 코드를 추가했습니다.

 

	$('.like-container > .feeling_a, .dislike-container  > .feeling_a').on('click', function() {
	    event.preventDefault();
	    $('.active').removeClass('active');
	    $(this).addClass('active');
	});

.active {
  background-color: #2199e8;
  color: #fff;
}

선택된 요소의 class값에 .active가 추가되도록 addClass를 하고 .active가 있다면(선택이 되어있다면) .active를 제거해주는 원리입니다. 그리고 .active가 있다면 배경색과 글씨색이 바뀌도록 CSS를 추가해줍니다.

 

---

 

다음 포스팅에서는 라라벨을 이용해 백엔드 작업을 하고 ajax를 이용해 서버로 값을 넘겨주는 과정을 설명드리겠습니다.

 

감사합니다!