메인화면 좋아요 기능 추가

realworld/src/main/java/com/dbs/realworld/dto/ArticleDTO.java

@@ -26,5 +26,5 @@ public class ArticleDTO {
     private List<CommentDTO> comments;
 
     private int favoriteNum;
-    private boolean isFavorite;
+    private boolean favorite;
 }

realworld/src/main/java/com/dbs/realworld/mapper/ArticleMapper.java

@@ -19,6 +19,7 @@ public interface ArticleMapper {
     void deleteByArticleId(int articleId);
     int updateArticle(ArticleDTO dto);
     void insertFavorite(int userId, int articleId);
+    // boolean checkExistFavorite()    
     void deleteFavorite(int userId, int articleId);
     void updateFavoriteNum(int articleId);
 }

realworld/src/main/resources/mybatis/mapper/user/ArticleMapper.xml

@@ -58,7 +58,7 @@
               SELECT COUNT(*) FROM article_like AL 
               WHERE AL.user_id     = #{userId}
               AND   AL.article_id  = AR.id
-          )                   AS isFavorite,
+          )                   AS favorite,
         ]]>
       </if>
       <![CDATA[
@@ -150,7 +150,7 @@
 
     <insert id="insertFavorite" parameterType="hashmap">
         <![CDATA[
-            INSERT INTO article_mst 
+            INSERT IGNORE INTO article_like 
               ( user_id, article_id	)
             VALUES 
               ( #{userId}, #{articleId} )
@@ -159,10 +159,9 @@
 
     <delete id="deleteFavorite" parameterType="hashmap">
         <![CDATA[
-            DELETE FROM article_mst 
-            WHERE 
-              user_id    = #{userId},
-              article_id = #{articleId}
+            DELETE FROM article_like
+            WHERE user_id    = #{userId}
+            AND   article_id = #{articleId}
         ]]>
     </delete>
 

realworld/src/main/webapp/WEB-INF/jsp/main.jsp

@@ -130,13 +130,43 @@
 
     
     function favoriteBtn(indexNumber) {
+        const favoriteNum = event.target.querySelector('.count').textContent;
+        let counts = parseInt(favoriteNum);
+        let newCounts = counts + 1;
+        
         const favBtn = document.querySelectorAll('.favorite-btn');
         if ("${ssIsLogin}" === "true") {
             favBtn.forEach(value => {
                 if (value.classList.contains(indexNumber)) {
-                    value.classList.toggle('active');
+                    if(event.target.classList.contains('active')){
+                        event.target.querySelector('.count').textContent = counts - 1;
+                        fetch('/article/' + indexNumber + '/favorite', { method: 'DELETE' })
+                            .then(response => {
+                                if(response.status === 200) {
+                                return value.classList.remove('active');
+                                }
+                            });
+                    } else {
+                        event.target.querySelector('.count').textContent = newCounts;
+                        fetch('/article/'+ indexNumber + '/favorite', {
+                            body: JSON.stringify({
+                                articleId: indexNumber,
+                                userId: "${ssId}",
+                                created: new Date()
+                            }),
+                            method: 'POST',
+                            headers: {
+                                "Content-Type": "application/json"
+                            }
+                        })
+                        .then(response => {
+                            if(response.status === 201){
+                                return value.classList.add('active');
+                                }
+                            })
+                    }
                 }
-            })
+            });
         } else {
             location.href = "/user/signin"
         }
@@ -184,42 +214,45 @@
 
             const domStrArticleMeta =
                 `
-                        <div class="article-meta">
-                            <div class="metadata">
-                                <a href="#" class="profile-link">
-                                    <img src="/resources/images/avatar.png" alt="avatar">
-                                </a>
-                                <div class="article-info">
-                                    <a href="#" class="name"></a>
-                                    <span class="date"></span>
-                                </div>
-                            </div>
-                            <div>
-                                <button class="favorite-btn \${article.id}" onclick="favoriteBtn(\${article.id})">
-                                    <i class="fas fa-heart"></i>
-                                    <span class="count">564</span>
-                                </button>
-                            </div>
+                <div class="article-meta">
+                    <div class="metadata">
+                        <a href="#" class="profile-link">
+                            <img src="/resources/images/avatar.png" alt="avatar">
+                        </a>
+                        <div class="article-info">
+                            <a href="#" class="name"></a>
+                            <span class="date"></span>
                         </div>
-                        `;
+                    </div>
+                    <div>
+                        <button class="favorite-btn \${article.id}" onclick="favoriteBtn(\${article.id})">
+                            <i class="fas fa-heart"></i>
+                            <span class="count">\${article.favoriteNum}</span>
+                        </button>
+                    </div>
+                </div>
+                `;
             const divArticleMeta = domParser.parseFromString(domStrArticleMeta, 'text/html').body.firstChild;
             divArticleMeta.querySelector('.name').textContent = article.writerName;
             divArticleMeta.querySelector('.date').textContent = new Date(article.created).toLocaleString();
-
+            console.log(article.favorite)
+            if(article.favorite) {
+                divArticleMeta.querySelector('.favorite-btn').classList.add('active');
+            }
 
             const domStrPreviewLink =
                 `
-                        <a href="/article/\${article.id}" class="preview-link">
-                            <h1 class="preview-title"></h1>
-                            <p></p>
-                            <div class="tag-data">
-                                <span>Read more...</span>
-                                <ul class = "tag-list">
-
-                                </ul>
-                            </div>
-                        </a>
-                        `;
+                <a href="/article/\${article.id}" class="preview-link">
+                    <h1 class="preview-title"></h1>
+                    <p></p>
+                    <div class="tag-data">
+                        <span>Read more...</span>
+                        <ul class = "tag-list">
+
+                        </ul>
+                    </div>
+                </a>
+                `;
             const aPreviewLink = domParser.parseFromString(domStrPreviewLink, 'text/html').body.firstChild;
             aPreviewLink.querySelector('.preview-title').textContent = article.title;
             aPreviewLink.querySelector('p').textContent = article.subtitle;
@@ -359,6 +392,7 @@
                 // hide loadings
                 setLoading('off');
 
+                
                 // loadingTag.style.display = 'none';
                 // loadingArticle.style.display = 'none';
 

realworld/src/main/webapp/resources/css/style.css

@@ -308,6 +308,7 @@ img {
 
 .favorite-btn i {
     font-size: 0.725rem;
+    pointer-events: none;
 }
 
 .favorite-btn.active,
@@ -316,6 +317,10 @@ img {
     background-color: var(--green-color);
 }
 
+.favorite-btn span {
+    pointer-events: none;
+}
+
 .preview-link h1{
     color: var(--black-color);
     line-height: 1.1;