Merge branch 'article-develop' of https://github.com/woowacourse/prolog…

… into article-develop
woowacourse · Oct 6, 2023 · 2b1ef5a · 2b1ef5a
2 parents cdc76f8 + 4ccc01b
commit 2b1ef5a
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 28 deletions.
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java b/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
@@ -20,15 +20,17 @@ public interface ArticleRepository extends JpaRepository<Article, Long> {
     @Query("SELECT DISTINCT a FROM Article a " +
         "JOIN GroupMember gm ON a.member.id = gm.member.id " +
         "JOIN gm.group mg " +
-        "WHERE mg.name LIKE %:course")
+        "WHERE mg.name LIKE %:course " +
+        "ORDER by a.createdAt desc")
     List<Article> findArticlesByCourse(@Param("course") String course);
 
     @Query("SELECT DISTINCT a FROM Article a " +
         "JOIN GroupMember gm ON a.member.id = gm.member.id " +
         "JOIN gm.group mg " +
         "LEFT JOIN a.articleBookmarks.articleBookmarks ab " +
         "LEFT JOIN a.articleLikes.articleLikes al " +
-        "WHERE mg.name LIKE %:course AND (:onlyBookmarked = false OR (:onlyBookmarked = true and ab.memberId = :memberId))")
+        "WHERE mg.name LIKE %:course AND (:onlyBookmarked = false OR (:onlyBookmarked = true and ab.memberId = :memberId))" +
+        "ORDER by a.createdAt desc")
     List<Article> findArticlesByCourseAndMember(@Param("course") String course,
                                                 @Param("memberId") Long memberId,
                                                 @Param("onlyBookmarked") boolean onlyBookmarked);

diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
@@ -17,19 +17,20 @@ const Article = ({
   url,
   createdAt,
   imageUrl,
-  isBookMarked,
+  isBookmarked,
   isLiked,
 }: ArticleType) => {
-  const bookmarkRef = useRef(false);
-  const likeRef = useRef(false);
-  const [bookmark, setBookmark] = useState(isBookMarked);
+  const bookmarkRef = useRef(isBookmarked);
+  const likeRef = useRef(isLiked);
+  const [bookmark, setBookmark] = useState(isBookmarked);
   const [like, setLike] = useState(isLiked);
   const { mutate: putBookmark } = usePutArticleBookmarkMutation();
   const { mutate: putLike } = usePutArticleLikeMutation();
   const { mutate: postViews } = usePostArticleViewsMutation();
 
   const toggleBookmark: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
+    e.stopPropagation();
 
     bookmarkRef.current = !bookmarkRef.current;
     setBookmark((prev) => !prev);
@@ -41,6 +42,7 @@ const Article = ({
 
   const toggleLike: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
+    e.stopPropagation();
 
     likeRef.current = !likeRef.current;
     setLike((prev) => !prev);

diff --git a/frontend/src/mocks/db/articles-android.json b/frontend/src/mocks/db/articles-android.json
@@ -6,7 +6,7 @@
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
     "isLiked": false,
-    "isBookMarked": false,
+    "isBookmarked": false,
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   },
   {
@@ -16,7 +16,7 @@
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
     "isLiked": false,
-    "isBookMarked": true,
+    "isBookmarked": true,
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   },
   {
@@ -26,7 +26,7 @@
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
     "isLiked": false,
-    "isBookMarked": false,
+    "isBookmarked": false,
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   }
 ]
diff --git a/frontend/src/mocks/db/articles-backend.json b/frontend/src/mocks/db/articles-backend.json
@@ -3,7 +3,7 @@
     "id": 4,
     "userName": "패트릭",
     "title": "CORS",
-    "isBookMarked": false,
+    "isBookmarked": false,
     "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
@@ -13,7 +13,7 @@
     "id": 5,
     "userName": "패트릭",
     "title": "CORS",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
@@ -23,7 +23,7 @@
     "id": 6,
     "userName": "패트릭",
     "title": "CORS",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",

diff --git a/frontend/src/mocks/db/articles-frontend.json b/frontend/src/mocks/db/articles-frontend.json
@@ -3,7 +3,7 @@
     "id": 1,
     "userName": "해온",
     "title": "Axios",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
@@ -13,7 +13,7 @@
     "id": 2,
     "userName": "해온",
     "title": "Axios",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
@@ -23,7 +23,7 @@
     "id": 3,
     "userName": "해온",
     "title": "Axios",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",

diff --git a/frontend/src/mocks/db/articles.json b/frontend/src/mocks/db/articles.json
@@ -3,7 +3,7 @@
     "id": 1,
     "userName": "해온",
     "title": "Axios",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
@@ -13,7 +13,7 @@
     "id": 2,
     "userName": "해온",
     "title": "Axios",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
@@ -23,7 +23,7 @@
     "id": 3,
     "userName": "해온",
     "title": "Axios",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
@@ -33,7 +33,7 @@
     "id": 4,
     "userName": "패트릭",
     "title": "CORS",
-    "isBookMarked": false,
+    "isBookmarked": false,
     "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
@@ -43,7 +43,7 @@
     "id": 5,
     "userName": "패트릭",
     "title": "CORS",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
@@ -53,7 +53,7 @@
     "id": 6,
     "userName": "패트릭",
     "title": "CORS",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
@@ -65,7 +65,7 @@
     "title": "직렬화, 역직렬화는 무엇일까?",
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
-    "isBookMarked": false,
+    "isBookmarked": false,
     "isLiked": false,
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   },
@@ -75,7 +75,7 @@
     "title": "직렬화, 역직렬화는 무엇일까?",
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
-    "isBookMarked": true,
+    "isBookmarked": true,
     "isLiked": false,
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   },
@@ -85,7 +85,7 @@
     "title": "직렬화, 역직렬화는 무엇일까?",
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
-    "isBookMarked": false,
+    "isBookmarked": false,
     "isLiked": false,
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   }

diff --git a/frontend/src/mocks/handlers/articles.ts b/frontend/src/mocks/handlers/articles.ts
@@ -23,7 +23,7 @@ export const articlesHandler = [
       title: '직렬화, 역직렬화는 무엇일까?',
       url: 'https://think0wise.tistory.com/107',
       createdAt: '2023-07-08 16:48',
-      isBookMarked: false,
+      isBookmarked: false,
       isLiked: false,
       imageUrl:
         'https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
@@ -57,7 +57,7 @@ export const articlesHandler = [
     }
 
     const filteredArticle = filteredCourse(course)?.filter((article) => {
-      return onlyBookmarked === String(article.isBookMarked) ? true : false;
+      return onlyBookmarked === String(article.isBookmarked) ? true : false;
     });
 
     return res(ctx.status(200), ctx.json(filteredArticle));

diff --git a/frontend/src/models/Article.ts b/frontend/src/models/Article.ts
@@ -8,7 +8,7 @@ export interface ArticleType {
   id: number;
   userName: string;
   title: string;
-  isBookMarked: boolean;
+  isBookmarked: boolean;
   isLiked: boolean;
   url: string;
   createdAt: string;

diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx
@@ -32,7 +32,7 @@ const ArticleListPage = () => {
   const { user } = useContext(UserContext);
   const { isLoggedIn, role } = user;
 
-  const authorized = role === 'CREW' && isLoggedIn;
+  const authorized = isLoggedIn && role !== 'GUEST';
 
   const { data: filteredArticles = [], refetch: getFilteredArticles } = useGetFilteredArticleQuery(
     selectedCourse.value,