이 문장의 종점

• 초보자가 먼저 제작한 로고는 투고한 하트 부분을 클릭해 붉은 하트로 변할 때까지 표시한다.
・Ajax를 사용하여 비동기 처리를 할 수 없습니다.
• 좋은 수치가 표시됩니다.
어려운 기술을 사용할 수는 없지만, 좋은 기능을 구현하려는 초보자를 위한 기사다.

좋은 기능 제작 준비~ 좋은 가치 유무에 따라 디스플레이 변경

다음 절차에 따라 제작한다.
① Like 모형 제작
②모델의 연관성
③ 컨트롤러, 루트 제작
④ 하트에 링크 추가
⑤ CSS를 사용하여 표시 변경
⑥ 좋은 숫자 표시

① Like 모형 제작

터미널에 모델을 생성합니다.

$ rails g model like user_id:integer topic_id:integer

이후 이동, 모형 제작 완료.

$ rails db:migrate

②모델의 연관성

다음은 모델의 연관입니다.
User에서 볼 때 Like 모델에는 여러 가지가 있습니다.
·User가 보기에 여러 개의 Like
Like가 보기에 User는
이런 연관성은 코드로 떨어진다.
User 모델에는'has many:likes', Like 모델에는'belongs to:user'라고 적는 것이다.
※ 주의사항
has_many는 복수 형식이기 때문에 모델을 복수 형식의':likes', belongs로 만든다.to는 단수 형식이기 때문에 모델을 단수 형식의'user'로 작성합니다.

③ 컨트롤러, 루트 제작

$ rails g controller likes

config/routes.rb

get  'favorites/index'
post '/favorites', to: 'favorites#create'

likes_controller.rb

class LikesController < ApplicationController
  def index
    @like_topics = current_user.like_topics
  end

  def create
    like = Like.new #Likeクラスのインスタンスを作成
    like.user_id = current_user.id #current_userのidを変数に代入
    like.topic_id = params[:topic_id]

    if like.save #likeが保存できているかどうかで条件分岐
      redirect_to topics_path, success: 'いいねしました'
    else
      redirect_to topics_path, danger: 'いいねに失敗しました'
    end
  end

  def destroy
    @like = Like.find_by(user_id: current_user.id, topic_id: params[:topic_id])
    @like.destroy
    redirect_to topics_path, success: 'いいねを取り消しました'
  end
end

④ 하트 표시를 준비하고 링크 추가

하트 표시 추가

이번에는 Fontawesome에서 하트 아이콘을 가져왔습니다.
아이콘은 아래 그림의 왼쪽 상단에 있는 두 번째 하트를 사용합니다.

이번에 사용한 하트 HTML 코드는 다음과 같습니다.

<i class="far fa-heart"></i>

이것을 사용하여 투고 일람 페이지에 다음 코드를 쓰세요.여기에 쓴 다음 CSS를 통해 디스플레이를 변경합니다.
topics/index.html.erb

<% if !topic.like_users.include?(current_user) %>
  <%= link_to likes_path(topic_id: topic.id), method: :post do %>
    <i class="far fa-heart like-btn" ></i>
  <% end %>
<% else %>
  <%= link_to likes_path(topic_id: topic.id), method: :delete do %>
    <i class="fas fa-heart unlike-btn"></i>
  <% end %>
<% end %>

⑤ CSS를 통해 디스플레이 변경

하트에 각각 like-btn과 unlike-btn이라는 카테고리를 지정했기 때문에 각각 CSS에서 색을 바꿉니다.like-btn(잠자기 전 버튼)에는 회색을, unlike-btn(잠자기 전 버튼)에는 빨간색 CS를 적용한다.(세부 사항은 개인 조정)
stylesheets/hogehoge.scss

.like-btn {
 width: 25px;
 height: 30px;
 font-size: 25px;
 color: #808080; 
 margin-left: 20px;
 }

.unlike-btn {
 width: 25px;
 height: 30px;
 font-size: 25px;
 color: #e54747;
 margin-left: 20px;
 }

##⑥いいねの数をビューに表示する
投稿一覧ページに表示する
countメソッドを使いいいねの数を引っ張ってきます。

```/views/topics/index.html.erb
<%= topic.like_users.count %>

완성!

이상은 완성입니다.다음 그림은 완성된 예입니다.나는 네가 하트가 빨갛게 변하는 것을 알고 좋은 수를 나타낼 것이라고 생각한다.


사이트 축소판 그림
https://azusas.com/font-awesome-change-colors-sizes/