From 203cc2a2ed273cb264d6bb7bfc48f40745b91798 Mon Sep 17 00:00:00 2001
From: splitCoding <voicesplit@daum.net>
Date: Fri, 11 Aug 2023 16:33:21 +0900
Subject: [PATCH 01/71] =?UTF-8?q?refactor:=20=EC=95=84=ED=8B=B0=ED=81=B4?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1=EC=8B=9C=20CREW=20=EA=B6=8C=ED=95=9C=20?=
 =?UTF-8?q?=ED=99=95=EC=9D=B8=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/application/ArticleService.java       |  3 +++
 .../prolog/common/exception/BadRequestCode.java   |  5 +++--
 .../article/application/ArticleServiceTest.java   | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
index b3b2d3054..8e25d4ae2 100644
--- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
+++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
@@ -27,6 +27,9 @@ public class ArticleService {
     @Transactional
     public Long create(final ArticleRequest articleRequest, final LoginMember loginMember) {
         final Member member = memberService.findById(loginMember.getId());
+        if (member.isAnonymous()) {
+            throw new BadRequestException(BadRequestCode.UNVALIDATED_MEMBER_EXCEPTION);
+        }
         final Article article = articleRequest.toArticle(member);
         return articleRepository.save(article).getId();
     }
diff --git a/backend/src/main/java/wooteco/prolog/common/exception/BadRequestCode.java b/backend/src/main/java/wooteco/prolog/common/exception/BadRequestCode.java
index e5ff32781..d263b0792 100644
--- a/backend/src/main/java/wooteco/prolog/common/exception/BadRequestCode.java
+++ b/backend/src/main/java/wooteco/prolog/common/exception/BadRequestCode.java
@@ -88,8 +88,9 @@ public enum BadRequestCode {
     INVALID_ARTICLE_AUTHOR_EXCEPTION(12005, "INVALID_ARTICLE_AUTHOR_EXCEPTION"),
     ARTICLE_IMAGE_URL_NULL_OR_EMPTY_EXCEPTION(12006, "ARTICLE_IMAGE_URL_NULL_OR_EMPTY_EXCEPTION"),
     ARTICLE_IMAGE_URL_OVER_LENGTH_EXCEPTION(12007, "ARTICLE_IMAGE_URL_OVER_LENGTH_EXCEPTION"),
-    ARTICLE_INVALID_URL_EXCEPTION(12008, "ARTICLE_INVALID_URL_EXCEPTION");
-
+    ARTICLE_INVALID_URL_EXCEPTION(12008, "ARTICLE_INVALID_URL_EXCEPTION"),
+    UNVALIDATED_MEMBER_EXCEPTION(12009, "UNVALIDATED_MEMBER_EXCEPTION");
+    
     private int code;
     private String message;
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
index 9c67907f1..b324068f3 100644
--- a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
@@ -59,6 +59,21 @@ void create_success() {
         verify(articleRepository).save(any());
     }
 
+    @DisplayName("아티클 생성시 UNVALIDATED 권한일 경우 예외를 발생한다.")
+    @Test
+    void create_success_unAuthorized() {
+        //given
+        final ArticleRequest judyRequest = new ArticleRequest("title", "url", "imageUrl");
+        final Member member = new Member(1L, "username", "nickname", Role.UNVALIDATED, 1L, "url");
+        final LoginMember judyLogin = new LoginMember(1L, MEMBER);
+
+        when(memberService.findById(any())).thenReturn(member);
+
+        //when
+        assertThatThrownBy(() -> articleService.create(judyRequest, judyLogin))
+            .isInstanceOf(BadRequestException.class);
+    }
+
     @DisplayName("아티클을 수정한다.")
     @Test
     void update_success() {

From 047159ac6418892afe6a7d6148e8296545ecbc7f Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Wed, 13 Sep 2023 17:14:35 +0900
Subject: [PATCH 02/71] =?UTF-8?q?test:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC=20restdocs=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/documentation/adoc/article.adoc   | 12 ++++++
 .../prolog/docu/ArticleDocumentation.java     | 40 +++++++++++++++++++
 .../article/ui/ArticleBookmarkRequest.java    | 15 +++++++
 3 files changed, 67 insertions(+)
 create mode 100644 backend/src/documentation/adoc/article.adoc
 create mode 100644 backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
 create mode 100644 backend/src/main/java/wooteco/prolog/article/ui/ArticleBookmarkRequest.java

diff --git a/backend/src/documentation/adoc/article.adoc b/backend/src/documentation/adoc/article.adoc
new file mode 100644
index 000000000..4c913ca77
--- /dev/null
+++ b/backend/src/documentation/adoc/article.adoc
@@ -0,0 +1,12 @@
+[[article]]
+== 아티클
+
+=== 아티클 북마크 추가
+
+==== Request
+
+include::{snippets}/article/bookmark/http-request.adoc[]
+
+==== Response
+
+include::{snippets}/article/bookmark/http-response.adoc[]
diff --git a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
new file mode 100644
index 000000000..e872f5074
--- /dev/null
+++ b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
@@ -0,0 +1,40 @@
+package wooteco.prolog.docu;
+
+import static io.netty.handler.codec.http.HttpHeaders.Values.APPLICATION_JSON;
+import static org.springframework.restdocs.mockmvc.MockMvcRestDocumentation.document;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+import io.restassured.module.mockmvc.response.ValidatableMockMvcResponse;
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest;
+import org.springframework.boot.test.mock.mockito.MockBean;
+import wooteco.prolog.NewDocumentation;
+import wooteco.prolog.article.application.ArticleService;
+import wooteco.prolog.article.ui.ArticleBookmarkRequest;
+import wooteco.prolog.article.ui.ArticleController;
+
+@WebMvcTest(controllers = ArticleController.class)
+public class ArticleDocumentation extends NewDocumentation {
+
+    @MockBean
+    private ArticleService articleService;
+
+    @Test
+    void 아티클에_북마크를_변경한다() {
+        //given, when
+        final ArticleBookmarkRequest bookmarkRequest = new ArticleBookmarkRequest(true);
+
+        final ValidatableMockMvcResponse response = given
+            .header("Authorization", "Bearer " + accessToken)
+            .contentType(APPLICATION_JSON)
+            .body(bookmarkRequest)
+            .when().put("/articles/{bookmark-id}/bookmark", 1L)
+            .then().log().all();
+
+        //then
+        response.expect(status().isOk());
+
+        //docs
+        response.apply(document("article/bookmark"));
+    }
+}
diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleBookmarkRequest.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleBookmarkRequest.java
new file mode 100644
index 000000000..f55f74a35
--- /dev/null
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleBookmarkRequest.java
@@ -0,0 +1,15 @@
+package wooteco.prolog.article.ui;
+
+import lombok.Getter;
+import lombok.RequiredArgsConstructor;
+
+@Getter
+@RequiredArgsConstructor
+public class ArticleBookmarkRequest {
+
+    private final Boolean bookmark;
+
+    public ArticleBookmarkRequest() {
+        this(null);
+    }
+}

From ff26beea608ce1e01c8ec405ca279b8ca97965f2 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 13 Sep 2023 18:04:30 +0900
Subject: [PATCH 03/71] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20=ED=95=84=ED=84=B0=20ui=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 .../src/components/Controls/SelectBox.tsx     |  4 +-
 frontend/src/pages/ArticleListPage/index.tsx  | 55 +++++++++++++++++--
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Controls/SelectBox.tsx b/frontend/src/components/Controls/SelectBox.tsx
index 7a0fa1edb..4e73a86c2 100644
--- a/frontend/src/components/Controls/SelectBox.tsx
+++ b/frontend/src/components/Controls/SelectBox.tsx
@@ -46,6 +46,7 @@ interface SelectBoxProps {
 }
 
 const SelectBox: React.VFC<SelectBoxProps> = ({
+  isClearable = true,
   isMulti = false,
   options,
   placeholder,
@@ -75,7 +76,7 @@ const SelectBox: React.VFC<SelectBoxProps> = ({
     `}
   >
     <Select
-      isClearable={true}
+      isClearable={isClearable}
       isMulti={isMulti}
       options={options}
       placeholder={placeholder}
@@ -83,7 +84,6 @@ const SelectBox: React.VFC<SelectBoxProps> = ({
       styles={selectStyles}
       defaultValue={defaultOption}
       value={value}
-      // theme={(theme) => ({ ...theme, colors: { ...theme.colors, primary: 'transparent' } })}
     />
   </div>
 );
diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx
index 4c4f8cc2c..d1db4802b 100644
--- a/frontend/src/pages/ArticleListPage/index.tsx
+++ b/frontend/src/pages/ArticleListPage/index.tsx
@@ -4,23 +4,50 @@ import ArticleList from '../../components/Article/ArticleList';
 import { Button } from '../../components';
 import PencilIcon from '../../assets/images/pencil_icon.svg';
 import { useHistory } from 'react-router-dom';
-import { PATH } from '../../constants';
+import { COLOR, PATH } from '../../constants';
 import styled from '@emotion/styled';
 import { MainContentStyle } from '../../PageRouter';
+import SelectBox from '../../components/Controls/SelectBox';
+import { useState } from 'react';
+import { css } from '@emotion/react';
+
+const CATEGORY_OPTIONS = [
+  { value: '전체보기', label: '전체보기' },
+  { value: '프론트엔드', label: '프론트엔드' },
+  { value: '백엔드', label: '백엔드' },
+  { value: '안드로이드', label: '안드로이드' },
+];
+
+type CategoryOptions = typeof CATEGORY_OPTIONS[number];
 
 const ArticleListPage = () => {
   const history = useHistory();
   const goNewArticlePage = () => history.push(PATH.NEW_ARTICLE);
+  const [selectedOption, setSelectedOption] = useState<CategoryOptions>(CATEGORY_OPTIONS[0]);
+
+  const changeFilterOption: (option: { value: string; label: string }) => void = (option) => {
+    setSelectedOption(option);
+  };
 
   return (
     <div css={[MainContentStyle]}>
       <Container>
+        <SelectBoxWrapper>
+          <SelectBox
+            isClearable={false}
+            value={selectedOption}
+            defaultOption={selectedOption}
+            options={CATEGORY_OPTIONS}
+            onChange={changeFilterOption}
+          />
+        </SelectBoxWrapper>
         <Button
           type="button"
-          size="SMALL"
+          size="X_SMALL"
           icon={PencilIcon}
           alt="새 아티클 쓰기 아이콘"
           onClick={goNewArticlePage}
+          cssProps={WriteButtonStyle}
         >
           글쓰기
         </Button>
@@ -34,7 +61,27 @@ export default ArticleListPage;
 
 export const Container = styled.div`
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+  flex-direction: row;
+  justify-content: space-between;
   margin-bottom: 20px;
+  gap: 15px;
+`;
+
+const SelectBoxWrapper = styled.div`
+  width: 200px;
+`;
+
+export const WriteButtonStyle = css`
+  width: 100px;
+  height: 42px;
+  padding: 0.2rem 0.8rem;
+
+  border-radius: 0.6rem;
+  font-size: 1.6rem;
+
+  color: ${COLOR.WHITE};
+
+  :hover {
+    background-color: ${COLOR.DARK_BLUE_600};
+  }
 `;

From 55a378ba3231b6b9623ea197fad41a4e9afb2e89 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 16:10:14 +0900
Subject: [PATCH 04/71] =?UTF-8?q?test:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC=20=EC=9D=B8=EC=88=98=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../acceptanceTest/resources/wooteco/prolog/article.feature  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature b/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
index 31ae63bc2..631295ce9 100644
--- a/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
+++ b/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
@@ -26,3 +26,8 @@ Feature: 아티클 관련 기능
     Scenario: Url og태그 파싱하기
         When Url을 입력하면
         Then og태그를 파싱해서 반환한다.
+
+    Scenario: 아티클을 북마크로 등록하기
+        Given 아티클이 작성되어 있고
+        When 1번 아티클에 북마크 요청을 보내면
+        Then 아티클에 북마크가 등록된다

From c086c145228617b1af657f4c449ee2b739eb045c Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 16:28:00 +0900
Subject: [PATCH 05/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC=EC=97=90=EC=84=9C=20=EB=A9=A4?=
 =?UTF-8?q?=EB=B2=84=EB=A5=BC=20=EC=B2=B4=ED=81=AC=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/domain/ArticleBookmark.java       | 36 +++++++++++++++++++
 .../article/domain/ArticleBookmarkTest.java   | 25 +++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
 create mode 100644 backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarkTest.java

diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
new file mode 100644
index 000000000..dac9ed3fe
--- /dev/null
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
@@ -0,0 +1,36 @@
+package wooteco.prolog.article.domain;
+
+import java.util.Objects;
+import javax.persistence.Entity;
+import javax.persistence.GeneratedValue;
+import javax.persistence.GenerationType;
+import javax.persistence.Id;
+import lombok.AccessLevel;
+import lombok.NoArgsConstructor;
+
+@Entity
+@NoArgsConstructor(access = AccessLevel.PROTECTED)
+public class ArticleBookmark {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    private Long articleId;
+
+    private Long memberId;
+
+    private ArticleBookmark(final Long id, final Long articleId, final Long memberId) {
+        this.id = id;
+        this.articleId = articleId;
+        this.memberId = memberId;
+    }
+
+    public ArticleBookmark(final Long articleId, final Long memberId) {
+        this(null, articleId, memberId);
+    }
+
+    public boolean isOwner(final Long memberId) {
+        return Objects.equals(this.memberId, memberId);
+    }
+}
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarkTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarkTest.java
new file mode 100644
index 000000000..cff4a2e5f
--- /dev/null
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarkTest.java
@@ -0,0 +1,25 @@
+package wooteco.prolog.article.domain;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+
+class ArticleBookmarkTest {
+
+    @DisplayName("memberId가 동일한지 확인")
+    @Test
+    void isOwner() {
+        //given
+        final Long memberId = 2L;
+        final ArticleBookmark articleBookmark = new ArticleBookmark(1L, memberId);
+
+        //when
+        final Boolean actual = articleBookmark.isOwner(memberId);
+
+        //then
+        assertThat(actual)
+            .isTrue();
+    }
+
+}

From 0cddf202f8be65eb50eb937e3e00742efebc91e6 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 16:40:33 +0900
Subject: [PATCH 06/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC=20=EC=B6=94=EA=B0=80,=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C,=20=EC=B2=B4=ED=81=AC=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/domain/ArticleBookmarks.java      | 37 ++++++++++++
 .../article/domain/ArticleBookmarksTest.java  | 58 +++++++++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
 create mode 100644 backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java

diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
new file mode 100644
index 000000000..fc9d2a3c0
--- /dev/null
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
@@ -0,0 +1,37 @@
+package wooteco.prolog.article.domain;
+
+import java.util.ArrayList;
+import java.util.List;
+import javax.persistence.Embeddable;
+import javax.persistence.FetchType;
+import javax.persistence.OneToMany;
+import org.hibernate.annotations.Cascade;
+import org.hibernate.annotations.CascadeType;
+
+@Embeddable
+public class ArticleBookmarks {
+
+    @OneToMany(mappedBy = "article", fetch = FetchType.LAZY)
+    @Cascade(value = {CascadeType.PERSIST, CascadeType.DELETE})
+    private List<ArticleBookmark> articleBookmarks;
+
+    public ArticleBookmarks() {
+        articleBookmarks = new ArrayList<>();
+    }
+
+    public void addBookmark(final ArticleBookmark bookmark) {
+        articleBookmarks.add(bookmark);
+    }
+
+    public void removeBookmark(final Long memberId) {
+        articleBookmarks.stream()
+            .filter(bookmark -> bookmark.isOwner(memberId))
+            .findAny()
+            .ifPresent(bookmark -> articleBookmarks.remove(bookmark));
+    }
+
+    public boolean containBookmark(final Long memberId) {
+        return articleBookmarks.stream()
+            .anyMatch(bookmark -> bookmark.isOwner(memberId));
+    }
+}
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java
new file mode 100644
index 000000000..a88e8e05e
--- /dev/null
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java
@@ -0,0 +1,58 @@
+package wooteco.prolog.article.domain;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+
+class ArticleBookmarksTest {
+
+    @Test
+    @DisplayName("ArticleBookmark를 추가할 수 있다.")
+    void addArticleBookmark() {
+        //given
+        final ArticleBookmarks articleBookmarks = new ArticleBookmarks();
+        final ArticleBookmark articleBookmark = new ArticleBookmark(1L, 2L);
+
+        //when
+        articleBookmarks.addBookmark(articleBookmark);
+
+        //then
+        assertThat(articleBookmarks.containBookmark(2L))
+            .isTrue();
+    }
+
+    @Test
+    @DisplayName("ArticleBookmark를 삭제할 수 있다,")
+    void removeArticleBookmark() {
+        //given
+        final ArticleBookmarks articleBookmarks = new ArticleBookmarks();
+        final Long memberId = 2L;
+        final ArticleBookmark articleBookmark = new ArticleBookmark(1L, memberId);
+        articleBookmarks.addBookmark(articleBookmark);
+
+        //when
+        articleBookmarks.removeBookmark(memberId);
+
+        //then
+        assertThat(articleBookmarks.containBookmark(memberId))
+            .isFalse();
+    }
+
+    @Test
+    @DisplayName("ArticleBookmarks에 memberId를 넘겨서 해당 member가 아티클을 북마크했는지 확인한다.")
+    void containBookmark() {
+        //given
+        final ArticleBookmarks articleBookmarks = new ArticleBookmarks();
+        final Long memberId = 2L;
+        final ArticleBookmark articleBookmark = new ArticleBookmark(1L, memberId);
+        articleBookmarks.addBookmark(articleBookmark);
+
+        //when
+        final Boolean actual = articleBookmarks.containBookmark(memberId);
+
+        //then
+        assertThat(actual)
+            .isTrue();
+    }
+}

From 5df854919f8739a37df108409720933fc99a187a Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 16:43:59 +0900
Subject: [PATCH 07/71] =?UTF-8?q?feat:=20Article=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC=20=EC=B6=94=EA=B0=80=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/domain/Article.java        | 26 ++++++++--
 .../prolog/article/domain/ArticleTest.java    | 47 ++++++++++++++++---
 2 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/domain/Article.java b/backend/src/main/java/wooteco/prolog/article/domain/Article.java
index a27dc4351..cca3e0575 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/Article.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/Article.java
@@ -1,5 +1,15 @@
 package wooteco.prolog.article.domain;
 
+import java.time.LocalDateTime;
+import javax.persistence.Embedded;
+import javax.persistence.Entity;
+import javax.persistence.EntityListeners;
+import javax.persistence.FetchType;
+import javax.persistence.GeneratedValue;
+import javax.persistence.GenerationType;
+import javax.persistence.Id;
+import javax.persistence.JoinColumn;
+import javax.persistence.ManyToOne;
 import lombok.AccessLevel;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
@@ -9,9 +19,6 @@
 import wooteco.prolog.common.exception.BadRequestException;
 import wooteco.prolog.member.domain.Member;
 
-import javax.persistence.*;
-import java.time.LocalDateTime;
-
 @Entity
 @Getter
 @NoArgsConstructor(access = AccessLevel.PROTECTED)
@@ -35,6 +42,9 @@ public class Article {
     @Embedded
     private ImageUrl imageUrl;
 
+    @Embedded
+    private ArticleBookmarks articleBookmarks;
+
     @CreatedDate
     private LocalDateTime createdAt;
 
@@ -43,6 +53,7 @@ public Article(final Member member, final Title title, final Url url, final Imag
         this.title = title;
         this.url = url;
         this.imageUrl = imageUrl;
+        this.articleBookmarks = new ArticleBookmarks();
     }
 
     public void validateOwner(final Member member) {
@@ -55,4 +66,13 @@ public void update(final String title, final String url) {
         this.title = new Title(title);
         this.url = new Url(url);
     }
+
+    public void addBookmark(final Member member) {
+        final ArticleBookmark articleBookmark = new ArticleBookmark(id, member.getId());
+        articleBookmarks.addBookmark(articleBookmark);
+    }
+
+    public void removeBookmark(final Member member) {
+        articleBookmarks.removeBookmark(member.getId());
+    }
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
index 324a0ad14..44f9c8cd8 100644
--- a/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
@@ -1,7 +1,10 @@
 package wooteco.prolog.article.domain;
 
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+import static org.junit.jupiter.api.Assertions.assertDoesNotThrow;
+
 import joptsimple.internal.Strings;
-import org.assertj.core.api.Assertions;
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.DisplayName;
 import org.junit.jupiter.api.Test;
@@ -9,9 +12,6 @@
 import wooteco.prolog.member.domain.Member;
 import wooteco.prolog.member.domain.Role;
 
-import static org.assertj.core.api.Assertions.assertThatThrownBy;
-import static org.junit.jupiter.api.Assertions.assertDoesNotThrow;
-
 class ArticleTest {
 
     private Member member;
@@ -70,8 +70,8 @@ void update_success() {
         article.update("newTitle", "newUrl");
 
         //then
-        Assertions.assertThat(article.getTitle()).isEqualTo(new Title("newTitle"));
-        Assertions.assertThat(article.getUrl()).isEqualTo(new Url("newUrl"));
+        assertThat(article.getTitle()).isEqualTo(new Title("newTitle"));
+        assertThat(article.getUrl()).isEqualTo(new Url("newUrl"));
     }
 
     @DisplayName("유효하지 않은 제목으로 업데이트시 예외를 발생한다.")
@@ -97,4 +97,39 @@ void update_invalidUrl() {
         assertThatThrownBy(() -> article.update("newTitle", Strings.repeat('.', 1025)))
             .isInstanceOf(BadRequestException.class);
     }
+
+    @DisplayName("멤버가 아티클을 북마크로 등록한다.")
+    @Test
+    void addBookmark() {
+        //given
+        final Article article = new Article(member, title, url, imageUrl);
+
+        //when
+        article.addBookmark(member);
+
+        //then
+        final ArticleBookmarks articleBookmarks = article.getArticleBookmarks();
+        final boolean contains = articleBookmarks.containBookmark(member.getId());
+
+        assertThat(contains)
+            .isTrue();
+    }
+
+    @DisplayName("멤버가 아티클을 북마크로 등록한다.")
+    @Test
+    void removeBookmark() {
+        //given
+        final Article article = new Article(member, title, url, imageUrl);
+        article.addBookmark(member);
+
+        //when
+        article.removeBookmark(member);
+
+        //then
+        final ArticleBookmarks articleBookmarks = article.getArticleBookmarks();
+        final boolean contains = articleBookmarks.containBookmark(member.getId());
+
+        assertThat(contains)
+            .isFalse();
+    }
 }

From c4e1f9885f9516608f63e959be55e0a1df383648 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Fri, 15 Sep 2023 16:50:31 +0900
Subject: [PATCH 08/71] =?UTF-8?q?feat:=20=EC=8A=A4=ED=81=AC=EB=9E=A9=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80=EC=99=80=20=EB=AF=B8?=
 =?UTF-8?q?=EC=84=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A1=B0=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 .../src/components/Article/Article.style.tsx  | 61 +++++++++++++------
 frontend/src/components/Article/Article.tsx   | 20 +++++-
 .../components/Article/ArticleList.style.tsx  | 12 ++--
 .../src/components/Reaction/Scrap.styles.ts   |  2 +-
 frontend/src/components/Reaction/Scrap.tsx    |  8 ++-
 frontend/src/hooks/queries/article.ts         |  1 -
 frontend/src/pages/ArticleListPage/index.tsx  |  2 +-
 7 files changed, 74 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/Article/Article.style.tsx b/frontend/src/components/Article/Article.style.tsx
index 049d4cba4..a7ffa518b 100644
--- a/frontend/src/components/Article/Article.style.tsx
+++ b/frontend/src/components/Article/Article.style.tsx
@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import { COLOR } from '../../constants';
 
 export const Container = styled.li`
   width: 100%;
-  height: 340px;
-  padding: 20px;
-  border-radius: 15px;
+  height: 100%;
+  padding: 10px;
+  border-radius: 8px;
   background-color: #ffffff;
   list-style: none;
 
@@ -20,16 +21,16 @@ export const ThumbnailWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  aspect-ratio: 16/9;
   width: 100%;
-  height: 154px;
   border-radius: 15px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 `;
 
 export const Thumbnail = styled.img`
   width: 100%;
-  height: 154px;
-  border-radius: 15px;
+  height: 100%;
+  border-radius: 8px;
   object-fit: cover;
 `;
 
@@ -41,34 +42,58 @@ export const ArticleInfoContainer = styled.div`
   padding: 10px;
 `;
 
-export const UserName = styled.p`
-  width: 250px;
-  margin: 0;
-  color: ${COLOR.DARK_GRAY_400};
-  font-size: 14px;
+export const ArticleInfoWrapper = styled.div`
+  display: flex;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-break: break-all;
+  font-size: 14px;
+`;
+
+export const UserName = styled.p`
+  margin: 0;
+  color: ${COLOR.DARK_GRAY_400};
 `;
 
 export const Title = styled.p`
-  width: 250px;
+  width: 100%;
+  height: 50px;
   margin: 0;
   color: ${COLOR.BLACK_900};
   font-size: 16px;
   font-weight: 700;
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  word-break: break-all;
+  overflow: hidden;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+`;
+
+export const ScrapButtonWrapper = styled.div``;
+
+export const ArticleScrapButtonStyle = css`
+  flex-direction: column;
+  padding: 0;
+  width: fit-content;
+  font-size: 1.4rem;
+
+  background-color: transparent;
+  color: ${COLOR.BLACK_800};
+
+  & > img {
+    margin-right: 0;
+    width: 1.8rem;
+    height: 1.8rem;
+  }
 `;
 
 export const CreatedAt = styled.span`
   width: 100%;
-  margin-top: 16px;
   color: ${COLOR.DARK_GRAY_400};
   text-align: right;
-  font-size: 16px;
+  font-size: 12px;
   font-weight: 700;
 `;
diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
index c610c38af..eccc0722d 100644
--- a/frontend/src/components/Article/Article.tsx
+++ b/frontend/src/components/Article/Article.tsx
@@ -1,7 +1,18 @@
 import * as Styled from './Article.style';
 import type { ArticleType } from '../../models/Article';
+import Scrap from '../Reaction/Scrap';
+import { useState } from 'react';
 
 const Article = ({ title, userName, url, createdAt, imageUrl }: ArticleType) => {
+  const [scrap, setScrap] = useState(false);
+
+  const toggleScrap: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+    setScrap((prev) => !prev);
+
+    // api
+  };
+
   return (
     <Styled.Container>
       <Styled.Anchor href={url} target="_blank" rel="noopener noreferrer">
@@ -9,9 +20,14 @@ const Article = ({ title, userName, url, createdAt, imageUrl }: ArticleType) =>
           <Styled.Thumbnail src={imageUrl} />
         </Styled.ThumbnailWrapper>
         <Styled.ArticleInfoContainer>
-          <Styled.UserName>{userName}</Styled.UserName>
+          <Styled.ArticleInfoWrapper>
+            <Styled.UserName>{userName}</Styled.UserName>
+            <Styled.CreatedAt>{createdAt.split(' ')[0]}</Styled.CreatedAt>
+          </Styled.ArticleInfoWrapper>
           <Styled.Title>{title}</Styled.Title>
-          <Styled.CreatedAt>{createdAt}</Styled.CreatedAt>
+          <Styled.ScrapButtonWrapper>
+            <Scrap scrap={scrap} onClick={toggleScrap} cssProps={Styled.ArticleScrapButtonStyle} />
+          </Styled.ScrapButtonWrapper>
         </Styled.ArticleInfoContainer>
       </Styled.Anchor>
     </Styled.Container>
diff --git a/frontend/src/components/Article/ArticleList.style.tsx b/frontend/src/components/Article/ArticleList.style.tsx
index b7d21cadd..e941cfc56 100644
--- a/frontend/src/components/Article/ArticleList.style.tsx
+++ b/frontend/src/components/Article/ArticleList.style.tsx
@@ -3,19 +3,19 @@ import MEDIA_QUERY from '../../constants/mediaQuery';
 
 export const Container = styled.ul`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 1fr;
-  gap: 30px 64px;
+  gap: 10px;
 
-  ${MEDIA_QUERY.xl} {
-    gap: 30px 40px;
+  ${MEDIA_QUERY.lg} {
+    grid-template-columns: repeat(3, 1fr);
   }
 
-  ${MEDIA_QUERY.lg} {
+  ${MEDIA_QUERY.md} {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  ${MEDIA_QUERY.md} {
+  ${MEDIA_QUERY.sm} {
     grid-template-columns: repeat(1, 1fr);
   }
 `;
diff --git a/frontend/src/components/Reaction/Scrap.styles.ts b/frontend/src/components/Reaction/Scrap.styles.ts
index 2335d252a..976533905 100644
--- a/frontend/src/components/Reaction/Scrap.styles.ts
+++ b/frontend/src/components/Reaction/Scrap.styles.ts
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { COLOR } from '../../enumerations/color';
 
-export const ScrapButtonStyle = css`
+export const DefaultScrapButtonStyle = css`
   flex-direction: column;
   padding: 0;
   width: fit-content;
diff --git a/frontend/src/components/Reaction/Scrap.tsx b/frontend/src/components/Reaction/Scrap.tsx
index 08bfad860..9a30aa9ec 100644
--- a/frontend/src/components/Reaction/Scrap.tsx
+++ b/frontend/src/components/Reaction/Scrap.tsx
@@ -3,14 +3,16 @@ import { Button, BUTTON_SIZE } from '..';
 
 import scrappedIcon from '../../assets/images/scrap_filled.svg';
 import unScrapIcon from '../../assets/images/scrap.svg';
-import { ScrapButtonStyle } from './Scrap.styles';
+import { DefaultScrapButtonStyle } from './Scrap.styles';
+import { SerializedStyles } from '@emotion/react';
 
 interface Props {
   scrap: boolean;
   onClick: MouseEventHandler<HTMLButtonElement>;
+  cssProps?: SerializedStyles;
 }
 
-const Scrap = ({ scrap, onClick }: Props) => {
+const Scrap = ({ scrap, onClick, cssProps }: Props) => {
   const scrapIcon = scrap ? scrappedIcon : unScrapIcon;
   const scrapIconAlt = scrap ? '스크랩 취소' : '스크랩';
 
@@ -20,7 +22,7 @@ const Scrap = ({ scrap, onClick }: Props) => {
       size={BUTTON_SIZE.X_SMALL}
       icon={scrapIcon}
       alt={scrapIconAlt}
-      cssProps={ScrapButtonStyle}
+      cssProps={cssProps ?? DefaultScrapButtonStyle}
       onClick={onClick}
     />
   );
diff --git a/frontend/src/hooks/queries/article.ts b/frontend/src/hooks/queries/article.ts
index 4e6780cbf..54fd5f804 100644
--- a/frontend/src/hooks/queries/article.ts
+++ b/frontend/src/hooks/queries/article.ts
@@ -1,5 +1,4 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import { UserContext } from '../../contexts/UserProvider';
 import { requestGetArticles, requestPostArticles } from '../../apis/articles';
 import { ArticleType } from '../../models/Article';
 import { ERROR_MESSAGE } from '../../constants';
diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx
index d1db4802b..e4f55745c 100644
--- a/frontend/src/pages/ArticleListPage/index.tsx
+++ b/frontend/src/pages/ArticleListPage/index.tsx
@@ -68,7 +68,7 @@ export const Container = styled.div`
 `;
 
 const SelectBoxWrapper = styled.div`
-  width: 200px;
+  width: 150px;
 `;
 
 export const WriteButtonStyle = css`

From 6dea07ac3799fc104e74cb7a31879652487812c9 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 17:01:28 +0900
Subject: [PATCH 09/71] =?UTF-8?q?refactor:=20=EC=95=84=ED=8B=B0=ED=81=B4?=
 =?UTF-8?q?=20=EB=B6=81=EB=A7=88=ED=81=AC=EC=9D=98=20=ED=85=8C=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=94=20=EC=9D=B4=EB=A6=84=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/wooteco/prolog/article/domain/ArticleBookmark.java     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
index dac9ed3fe..2b24b519e 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
@@ -5,11 +5,13 @@
 import javax.persistence.GeneratedValue;
 import javax.persistence.GenerationType;
 import javax.persistence.Id;
+import javax.persistence.Table;
 import lombok.AccessLevel;
 import lombok.NoArgsConstructor;
 
 @Entity
 @NoArgsConstructor(access = AccessLevel.PROTECTED)
+@Table(name = "article_bookmark")
 public class ArticleBookmark {
 
     @Id

From 6a0a7311f3d2828149b78c8851d6730f0e27fed5 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 17:01:57 +0900
Subject: [PATCH 10/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC=EC=9D=98=20=EA=B0=92=EC=9D=84=20?=
 =?UTF-8?q?=EC=84=B8=ED=8C=85=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/application/ArticleService.java   | 20 +++++-
 .../application/ArticleServiceTest.java       | 68 +++++++++++++++++--
 2 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
index 8e25d4ae2..bddc36e9e 100644
--- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
+++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
@@ -1,6 +1,8 @@
 package wooteco.prolog.article.application;
 
+import static java.lang.Boolean.TRUE;
 import static java.util.stream.Collectors.toList;
+import static wooteco.prolog.common.exception.BadRequestCode.ARTICLE_NOT_FOUND_EXCEPTION;
 
 import java.util.List;
 import lombok.RequiredArgsConstructor;
@@ -45,7 +47,7 @@ public List<ArticleResponse> getAll() {
     public void update(final Long id, final ArticleRequest articleRequest,
                        final LoginMember loginMember) {
         final Article article = articleRepository.findById(id)
-            .orElseThrow(() -> new BadRequestException(BadRequestCode.ARTICLE_NOT_FOUND_EXCEPTION));
+            .orElseThrow(() -> new BadRequestException(ARTICLE_NOT_FOUND_EXCEPTION));
 
         final Member member = memberService.findById(loginMember.getId());
         article.validateOwner(member);
@@ -56,11 +58,25 @@ public void update(final Long id, final ArticleRequest articleRequest,
     @Transactional
     public void delete(final Long id, final LoginMember loginMember) {
         final Article article = articleRepository.findById(id)
-            .orElseThrow(() -> new BadRequestException(BadRequestCode.ARTICLE_NOT_FOUND_EXCEPTION));
+            .orElseThrow(() -> new BadRequestException(ARTICLE_NOT_FOUND_EXCEPTION));
 
         final Member member = memberService.findById(loginMember.getId());
         article.validateOwner(member);
 
         articleRepository.delete(article);
     }
+
+    @Transactional
+    public void bookmarkArticle(final Long id, final LoginMember loginMember,
+                                final Boolean checked) {
+        final Article article = articleRepository.findById(id)
+            .orElseThrow(() -> new BadRequestException(ARTICLE_NOT_FOUND_EXCEPTION));
+        final Member member = memberService.findById(loginMember.getId());
+
+        if (TRUE.equals(checked)) {
+            article.addBookmark(member);
+        } else {
+            article.removeBookmark(member);
+        }
+    }
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
index b324068f3..12b4712c8 100644
--- a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
@@ -7,15 +7,18 @@
 import static org.mockito.Mockito.verify;
 import static org.mockito.Mockito.when;
 import static wooteco.prolog.login.ui.LoginMember.Authority.MEMBER;
+import static wooteco.prolog.member.domain.Role.CREW;
 
 import java.util.Optional;
 import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Nested;
 import org.junit.jupiter.api.Test;
 import org.junit.jupiter.api.extension.ExtendWith;
 import org.mockito.InjectMocks;
 import org.mockito.Mock;
 import org.mockito.junit.jupiter.MockitoExtension;
 import wooteco.prolog.article.domain.Article;
+import wooteco.prolog.article.domain.ArticleBookmarks;
 import wooteco.prolog.article.domain.ImageUrl;
 import wooteco.prolog.article.domain.Title;
 import wooteco.prolog.article.domain.Url;
@@ -44,7 +47,7 @@ class ArticleServiceTest {
     void create_success() {
         //given
         final ArticleRequest judyRequest = new ArticleRequest("title", "url", "imageUrl");
-        final Member member = new Member(1L, "username", "nickname", Role.CREW, 1L, "url");
+        final Member member = new Member(1L, "username", "nickname", CREW, 1L, "url");
         when(memberService.findById(any())).thenReturn(member);
 
         final Article article = new Article(member, new Title("title"), new Url("url"),
@@ -78,7 +81,7 @@ void create_success_unAuthorized() {
     @Test
     void update_success() {
         //given
-        final Member judy = new Member(1L, "username", "nickname", Role.CREW, 1L, "url");
+        final Member judy = new Member(1L, "username", "nickname", CREW, 1L, "url");
         final Article judyArticle = new Article(judy, new Title("judyTitle"), new Url("judyUrl"),
             new ImageUrl("imageUrl"));
         when(articleRepository.findById(any())).thenReturn(Optional.of(judyArticle));
@@ -114,8 +117,8 @@ void update_fail_ArticleNotFoundException() {
     @Test
     void update_fail_InvalidArticleAuthorException() {
         //given
-        final Member judy = new Member(1L, "judith", "judy", Role.CREW, 1L, "judyUrl");
-        final Member brown = new Member(2L, "brown", "brownie", Role.CREW, 2L, "brownUrl");
+        final Member judy = new Member(1L, "judith", "judy", CREW, 1L, "judyUrl");
+        final Member brown = new Member(2L, "brown", "brownie", CREW, 2L, "brownUrl");
         final Article brownArticle = new Article(brown, new Title("brownTitle"),
             new Url("brownUrl"), new ImageUrl("imageUrl"));
         when(articleRepository.findById(any())).thenReturn(Optional.of(brownArticle));
@@ -134,7 +137,7 @@ void update_fail_InvalidArticleAuthorException() {
     @Test
     void delete_success() {
         //given
-        final Member judy = new Member(1L, "judith", "judy", Role.CREW, 1L, "judyUrl");
+        final Member judy = new Member(1L, "judith", "judy", CREW, 1L, "judyUrl");
         final Article judyArticle = new Article(judy, new Title("judyTitle"), new Url("judyUrl"),
             new ImageUrl("imageUrl"));
         when(articleRepository.findById(any())).thenReturn(Optional.of(judyArticle));
@@ -165,8 +168,8 @@ void delete_fail_ArticleNotFoundException() {
     @Test
     void delete_fail_InvalidArticleAuthorException() {
         //given
-        final Member judy = new Member(1L, "judith", "judy", Role.CREW, 1L, "judyUrl");
-        final Member brown = new Member(2L, "brown", "brownie", Role.CREW, 2L, "brownUrl");
+        final Member judy = new Member(1L, "judith", "judy", CREW, 1L, "judyUrl");
+        final Member brown = new Member(2L, "brown", "brownie", CREW, 2L, "brownUrl");
         final Article brownArticle = new Article(brown, new Title("brownTitle"),
             new Url("brownUrl"), new ImageUrl("imageUrl"));
         when(articleRepository.findById(any())).thenReturn(Optional.of(brownArticle));
@@ -178,4 +181,55 @@ void delete_fail_InvalidArticleAuthorException() {
         assertThatThrownBy(() -> articleService.delete(1L, judyLogin))
             .isInstanceOf(BadRequestException.class);
     }
+
+    @Nested
+    @DisplayName("아티클의 북마크 상태를 바굴 수 있다.")
+    class bookmarkArticle {
+
+        @DisplayName("아티클의 북마크를 추가한다.")
+        @Test
+        void add() {
+            //given
+            final Member member = new Member(1L, "userName", "nickName",
+                CREW, 1L, "imageUrl");
+            final Article article = new Article(member, new Title("brownTitle"),
+                new Url("brownUrl"), new ImageUrl("imageUrl"));
+            final Long articleId = 3L;
+            final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
+
+            when(articleRepository.findById(articleId)).thenReturn(Optional.of(article));
+            when(memberService.findById(member.getId())).thenReturn(member);
+
+            //when
+            articleService.bookmarkArticle(articleId, loginMember, true);
+
+            //then
+            final ArticleBookmarks articleBookmarks = article.getArticleBookmarks();
+            assertThat(articleBookmarks.containBookmark(member.getId()))
+                .isTrue();
+        }
+
+        @DisplayName("아티클의 북마크를 삭제한다.")
+        @Test
+        void remove() {
+            //given
+            final Member member = new Member(1L, "userName", "nickName",
+                CREW, 1L, "imageUrl");
+            final Article article = new Article(member, new Title("brownTitle"),
+                new Url("brownUrl"), new ImageUrl("imageUrl"));
+            final Long articleId = 3L;
+            final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
+
+            when(articleRepository.findById(articleId)).thenReturn(Optional.of(article));
+            when(memberService.findById(member.getId())).thenReturn(member);
+
+            //when
+            articleService.bookmarkArticle(articleId, loginMember, true);
+
+            //then
+            final ArticleBookmarks articleBookmarks = article.getArticleBookmarks();
+            assertThat(articleBookmarks.containBookmark(member.getId()))
+                .isTrue();
+        }
+    }
 }

From af831690cf2edb352300a0c9e2d7c7e21fda6c4f Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Fri, 15 Sep 2023 17:22:51 +0900
Subject: [PATCH 11/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/articles.ts                 | 11 +++++++-
 .../src/components/Article/Article.style.tsx  |  4 +--
 frontend/src/components/Article/Article.tsx   | 28 +++++++++++++------
 frontend/src/hooks/queries/article.ts         | 13 ++++++++-
 frontend/src/mocks/db/articles.json           | 16 +++++++++++
 frontend/src/mocks/handlers/articles.ts       |  4 +++
 frontend/src/models/Article.ts                |  5 ++++
 7 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/frontend/src/apis/articles.ts b/frontend/src/apis/articles.ts
index f45c3bd81..6982ceddb 100644
--- a/frontend/src/apis/articles.ts
+++ b/frontend/src/apis/articles.ts
@@ -1,5 +1,10 @@
 import { client } from '.';
-import { ArticleRequest, MetaOgRequest, MetaOgResponse } from '../models/Article';
+import {
+  ArticleBookmarkPutRequest,
+  ArticleRequest,
+  MetaOgRequest,
+  MetaOgResponse,
+} from '../models/Article';
 
 export const requestGetArticles = () => client.get(`/articles`);
 
@@ -8,3 +13,7 @@ export const requestPostArticles = (body: ArticleRequest) => client.post('/artic
 export const requestGetMetaOg = ({ url }: MetaOgRequest) => {
   return client.get<MetaOgResponse>(`/meta-og?url=${url}`);
 };
+
+export const requestPutArticleBookmark = ({ articleId, bookmark }: ArticleBookmarkPutRequest) => {
+  return client.put(`/articles/${articleId}/bookmark`, { checked: bookmark });
+};
diff --git a/frontend/src/components/Article/Article.style.tsx b/frontend/src/components/Article/Article.style.tsx
index a7ffa518b..14e03d311 100644
--- a/frontend/src/components/Article/Article.style.tsx
+++ b/frontend/src/components/Article/Article.style.tsx
@@ -72,9 +72,7 @@ export const Title = styled.p`
   -webkit-box-orient: vertical;
 `;
 
-export const ScrapButtonWrapper = styled.div``;
-
-export const ArticleScrapButtonStyle = css`
+export const ArticleBookmarkButtonStyle = css`
   flex-direction: column;
   padding: 0;
   width: fit-content;
diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
index eccc0722d..4211117b4 100644
--- a/frontend/src/components/Article/Article.tsx
+++ b/frontend/src/components/Article/Article.tsx
@@ -1,16 +1,24 @@
 import * as Styled from './Article.style';
 import type { ArticleType } from '../../models/Article';
 import Scrap from '../Reaction/Scrap';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import { usePutArticleBookmarkMutation } from '../../hooks/queries/article';
+import debounce from '../../utils/debounce';
 
-const Article = ({ title, userName, url, createdAt, imageUrl }: ArticleType) => {
-  const [scrap, setScrap] = useState(false);
+const Article = ({ id, title, userName, url, createdAt, imageUrl }: ArticleType) => {
+  const bookmarkRef = useRef(false);
+  const [bookmark, setBookmark] = useState(false);
+  const { mutate: putBookmark } = usePutArticleBookmarkMutation();
 
-  const toggleScrap: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+  const toggleBookmark: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
-    setScrap((prev) => !prev);
 
-    // api
+    bookmarkRef.current = !bookmarkRef.current;
+    setBookmark((prev) => !prev);
+
+    debounce(() => {
+      putBookmark({ articleId: id, bookmark: bookmarkRef.current });
+    }, 300);
   };
 
   return (
@@ -25,9 +33,11 @@ const Article = ({ title, userName, url, createdAt, imageUrl }: ArticleType) =>
             <Styled.CreatedAt>{createdAt.split(' ')[0]}</Styled.CreatedAt>
           </Styled.ArticleInfoWrapper>
           <Styled.Title>{title}</Styled.Title>
-          <Styled.ScrapButtonWrapper>
-            <Scrap scrap={scrap} onClick={toggleScrap} cssProps={Styled.ArticleScrapButtonStyle} />
-          </Styled.ScrapButtonWrapper>
+          <Scrap
+            scrap={bookmark}
+            onClick={toggleBookmark}
+            cssProps={Styled.ArticleBookmarkButtonStyle}
+          />
         </Styled.ArticleInfoContainer>
       </Styled.Anchor>
     </Styled.Container>
diff --git a/frontend/src/hooks/queries/article.ts b/frontend/src/hooks/queries/article.ts
index 54fd5f804..cc4eded62 100644
--- a/frontend/src/hooks/queries/article.ts
+++ b/frontend/src/hooks/queries/article.ts
@@ -1,5 +1,9 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import { requestGetArticles, requestPostArticles } from '../../apis/articles';
+import {
+  requestGetArticles,
+  requestPostArticles,
+  requestPutArticleBookmark,
+} from '../../apis/articles';
 import { ArticleType } from '../../models/Article';
 import { ERROR_MESSAGE } from '../../constants';
 import { SUCCESS_MESSAGE } from '../../constants/message';
@@ -29,3 +33,10 @@ export const usePostArticlesMutation = () => {
     },
   });
 };
+
+export const usePutArticleBookmarkMutation = () => {
+  return useMutation(requestPutArticleBookmark, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+};
diff --git a/frontend/src/mocks/db/articles.json b/frontend/src/mocks/db/articles.json
index 9105fbb0a..cac0d4f16 100644
--- a/frontend/src/mocks/db/articles.json
+++ b/frontend/src/mocks/db/articles.json
@@ -14,5 +14,21 @@
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 3,
+    "userName": "패트릭",
+    "title": "CORS",
+    "url": "https://pgccoding.tistory.com/66",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 4,
+    "userName": "패트릭",
+    "title": "CORS",
+    "url": "https://pgccoding.tistory.com/66",
+    "createdAt": "2023-07-24 18:18",
+    "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
index c9b74676e..9419615fb 100644
--- a/frontend/src/mocks/handlers/articles.ts
+++ b/frontend/src/mocks/handlers/articles.ts
@@ -31,4 +31,8 @@ export const articlesHandler = [
     articles.push(newArticle);
     return res(ctx.status(200), ctx.json(newArticle));
   }),
+
+  rest.put(`${BASE_URL}/articles/:articleId/bookmark`, (req, res, ctx) => {
+    return res(ctx.status(200));
+  }),
 ];
diff --git a/frontend/src/models/Article.ts b/frontend/src/models/Article.ts
index 742bcfd9b..1f194f7a5 100644
--- a/frontend/src/models/Article.ts
+++ b/frontend/src/models/Article.ts
@@ -21,3 +21,8 @@ export interface MetaOgResponse {
   imageUrl: string;
   title: string;
 }
+
+export interface ArticleBookmarkPutRequest {
+  articleId: number;
+  bookmark: boolean;
+}

From 144006655214c5a133cdf765455cfe420def1c7d Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Fri, 15 Sep 2023 18:08:48 +0900
Subject: [PATCH 12/71] =?UTF-8?q?feat:=20=ED=95=84=ED=84=B0=EB=A7=81?=
 =?UTF-8?q?=EA=B3=BC=20=EC=97=B0=EA=B4=80=EB=90=9C=20=EB=B6=81=EB=A7=88?=
 =?UTF-8?q?=ED=81=AC=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/articles.ts                 |  5 ++++
 .../Article/ArticleBookmarkFIlter.tsx         | 28 +++++++++++++++++++
 .../src/components/Article/ArticleList.tsx    | 11 ++++----
 frontend/src/hooks/queries/article.ts         | 14 +++++-----
 frontend/src/mocks/db/articles.json           |  4 +++
 frontend/src/mocks/handlers/articles.ts       | 10 +++++++
 frontend/src/models/Article.ts                |  5 ++++
 frontend/src/pages/ArticleListPage/index.tsx  | 27 ++++++++++++++----
 8 files changed, 85 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/Article/ArticleBookmarkFIlter.tsx

diff --git a/frontend/src/apis/articles.ts b/frontend/src/apis/articles.ts
index 6982ceddb..4f4f8bd46 100644
--- a/frontend/src/apis/articles.ts
+++ b/frontend/src/apis/articles.ts
@@ -2,6 +2,7 @@ import { client } from '.';
 import {
   ArticleBookmarkPutRequest,
   ArticleRequest,
+  CourseFilter,
   MetaOgRequest,
   MetaOgResponse,
 } from '../models/Article';
@@ -17,3 +18,7 @@ export const requestGetMetaOg = ({ url }: MetaOgRequest) => {
 export const requestPutArticleBookmark = ({ articleId, bookmark }: ArticleBookmarkPutRequest) => {
   return client.put(`/articles/${articleId}/bookmark`, { checked: bookmark });
 };
+
+export const requestGetFilteredArticle = (course: string, bookmark: boolean) => {
+  return client.get(`/articles/filter?course=${course}&bookmark=${bookmark}`);
+};
diff --git a/frontend/src/components/Article/ArticleBookmarkFIlter.tsx b/frontend/src/components/Article/ArticleBookmarkFIlter.tsx
new file mode 100644
index 000000000..82a451f71
--- /dev/null
+++ b/frontend/src/components/Article/ArticleBookmarkFIlter.tsx
@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+
+interface ArticleBookmarkFilterProps {
+  checked: boolean;
+  handleCheckBookmark: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const ArticleBookmarkFilter = ({ checked, handleCheckBookmark }: ArticleBookmarkFilterProps) => {
+  return (
+    <ArticleBookmarkFilterContainer>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={handleCheckBookmark}
+        value="북마크한 아티클"
+      />
+    </ArticleBookmarkFilterContainer>
+  );
+};
+
+export default ArticleBookmarkFilter;
+
+const ArticleBookmarkFilterContainer = styled.div`
+  width: 100px;
+  border: 1px solid black;
+  border-radius: 5px;
+  font-size: 1.5rem;
+`;
diff --git a/frontend/src/components/Article/ArticleList.tsx b/frontend/src/components/Article/ArticleList.tsx
index 5aebbfe49..59fd386ce 100644
--- a/frontend/src/components/Article/ArticleList.tsx
+++ b/frontend/src/components/Article/ArticleList.tsx
@@ -1,13 +1,12 @@
 import * as Styled from './ArticleList.style';
 import Article from './Article';
-import { useGetRequestArticleQuery } from '../../hooks/queries/article';
+import { ArticleType } from '../../models/Article';
 
-const ArticleList = () => {
-  const { data: articles, isLoading, isError } = useGetRequestArticleQuery();
-
-  if (isLoading) return <div>loading...</div>;
-  if (isError) return <div>error...</div>;
+interface ArticleListProps {
+  articles: ArticleType[];
+}
 
+const ArticleList = ({ articles }: ArticleListProps) => {
   return (
     <Styled.Container>
       {articles?.map((article) => (
diff --git a/frontend/src/hooks/queries/article.ts b/frontend/src/hooks/queries/article.ts
index cc4eded62..f62cd49f8 100644
--- a/frontend/src/hooks/queries/article.ts
+++ b/frontend/src/hooks/queries/article.ts
@@ -1,20 +1,20 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import {
-  requestGetArticles,
+  requestGetFilteredArticle,
   requestPostArticles,
   requestPutArticleBookmark,
 } from '../../apis/articles';
-import { ArticleType } from '../../models/Article';
+import { ArticleType, CourseFilter } from '../../models/Article';
 import { ERROR_MESSAGE } from '../../constants';
 import { SUCCESS_MESSAGE } from '../../constants/message';
 
 const QUERY_KEY = {
-  articles: 'articles',
+  filteredArticles: 'filteredArticles',
 };
 
-export const useGetRequestArticleQuery = () => {
-  return useQuery<ArticleType[]>([QUERY_KEY.articles], async () => {
-    const response = await requestGetArticles();
+export const useGetFilteredArticleQuery = (course: string, bookmark: boolean) => {
+  return useQuery<ArticleType[]>([QUERY_KEY.filteredArticles], async () => {
+    const response = await requestGetFilteredArticle(course, bookmark);
 
     return response.data;
   });
@@ -25,7 +25,7 @@ export const usePostArticlesMutation = () => {
 
   return useMutation(requestPostArticles, {
     onSuccess: () => {
-      queryClient.invalidateQueries([QUERY_KEY.articles]);
+      queryClient.invalidateQueries([QUERY_KEY.filteredArticles]);
       alert(SUCCESS_MESSAGE.CREATE_ARTICLE);
     },
     onError: () => {
diff --git a/frontend/src/mocks/db/articles.json b/frontend/src/mocks/db/articles.json
index cac0d4f16..182d5e558 100644
--- a/frontend/src/mocks/db/articles.json
+++ b/frontend/src/mocks/db/articles.json
@@ -3,6 +3,7 @@
     "id": 1,
     "userName": "해온",
     "title": "Axios",
+    "isBookMarked": true,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -11,6 +12,7 @@
     "id": 2,
     "userName": "패트릭",
     "title": "CORS",
+    "isBookMarked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -19,6 +21,7 @@
     "id": 3,
     "userName": "패트릭",
     "title": "CORS",
+    "isBookMarked": true,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -27,6 +30,7 @@
     "id": 4,
     "userName": "패트릭",
     "title": "CORS",
+    "isBookMarked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "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
index 9419615fb..4ea38b898 100644
--- a/frontend/src/mocks/handlers/articles.ts
+++ b/frontend/src/mocks/handlers/articles.ts
@@ -24,6 +24,7 @@ export const articlesHandler = [
       title: '직렬화, 역직렬화는 무엇일까?',
       url: 'https://think0wise.tistory.com/107',
       createdAt: '2023-07-08 16:48',
+      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',
     };
@@ -35,4 +36,13 @@ export const articlesHandler = [
   rest.put(`${BASE_URL}/articles/:articleId/bookmark`, (req, res, ctx) => {
     return res(ctx.status(200));
   }),
+
+  rest.get(`${BASE_URL}/articles/filter`, (req, res, ctx) => {
+    const course = req.url.searchParams.get('course');
+    const bookmark = req.url.searchParams.get('bookmark');
+
+    const filteredArticle = articles.filter((article) => bookmark === String(article.isBookMarked));
+
+    return res(ctx.status(200), ctx.json(filteredArticle));
+  }),
 ];
diff --git a/frontend/src/models/Article.ts b/frontend/src/models/Article.ts
index 1f194f7a5..4bce9855f 100644
--- a/frontend/src/models/Article.ts
+++ b/frontend/src/models/Article.ts
@@ -8,6 +8,7 @@ export interface ArticleType {
   id: number;
   userName: string;
   title: string;
+  isBookMarked: false;
   url: string;
   createdAt: string;
   imageUrl: string;
@@ -26,3 +27,7 @@ export interface ArticleBookmarkPutRequest {
   articleId: number;
   bookmark: boolean;
 }
+
+export type Course = '프론트엔드' | '백엔드' | '안드로이드';
+
+export type CourseFilter = Course | '전체보기';
diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx
index e4f55745c..2987f7870 100644
--- a/frontend/src/pages/ArticleListPage/index.tsx
+++ b/frontend/src/pages/ArticleListPage/index.tsx
@@ -8,8 +8,10 @@ import { COLOR, PATH } from '../../constants';
 import styled from '@emotion/styled';
 import { MainContentStyle } from '../../PageRouter';
 import SelectBox from '../../components/Controls/SelectBox';
-import { useState } from 'react';
+import { ChangeEventHandler, useState } from 'react';
 import { css } from '@emotion/react';
+import ArticleBookmarkFilter from '../../components/Article/ArticleBookmarkFIlter';
+import { useGetFilteredArticleQuery } from '../../hooks/queries/article';
 
 const CATEGORY_OPTIONS = [
   { value: '전체보기', label: '전체보기' },
@@ -23,10 +25,22 @@ type CategoryOptions = typeof CATEGORY_OPTIONS[number];
 const ArticleListPage = () => {
   const history = useHistory();
   const goNewArticlePage = () => history.push(PATH.NEW_ARTICLE);
-  const [selectedOption, setSelectedOption] = useState<CategoryOptions>(CATEGORY_OPTIONS[0]);
+  const [selectedCourse, setSelectedCourse] = useState<CategoryOptions>(CATEGORY_OPTIONS[0]);
+  const [checked, setChecked] = useState(false);
+
+  const { data: filteredArticles = [], refetch: getFilteredArticles } = useGetFilteredArticleQuery(
+    selectedCourse.value,
+    checked
+  );
 
   const changeFilterOption: (option: { value: string; label: string }) => void = (option) => {
-    setSelectedOption(option);
+    setSelectedCourse(option);
+    // getFilteredArticles();
+  };
+
+  const handleCheckBookmark: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setChecked(e.currentTarget.checked);
+    // getFilteredArticles();
   };
 
   return (
@@ -35,12 +49,13 @@ const ArticleListPage = () => {
         <SelectBoxWrapper>
           <SelectBox
             isClearable={false}
-            value={selectedOption}
-            defaultOption={selectedOption}
+            value={selectedCourse}
+            defaultOption={selectedCourse}
             options={CATEGORY_OPTIONS}
             onChange={changeFilterOption}
           />
         </SelectBoxWrapper>
+        <ArticleBookmarkFilter checked={checked} handleCheckBookmark={handleCheckBookmark} />
         <Button
           type="button"
           size="X_SMALL"
@@ -52,7 +67,7 @@ const ArticleListPage = () => {
           글쓰기
         </Button>
       </Container>
-      <ArticleList />
+      <ArticleList articles={filteredArticles} />
     </div>
   );
 };

From 5e09e9933f5c7d04f98704347bfec980bbdd55c1 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 17:56:00 +0900
Subject: [PATCH 13/71] =?UTF-8?q?refactor:=20=EC=95=84=ED=8B=B0=ED=81=B4?=
 =?UTF-8?q?=EA=B3=BC=20=EB=B6=81=EB=A7=88=ED=81=AC=20=EC=9D=BC=EB=8C=80?=
 =?UTF-8?q?=EB=8B=A4=20=EB=8B=A8=EB=B0=A9=ED=96=A5=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EB=8B=A4=EB=8C=80=EC=9D=BC=20=EC=96=91=EB=B0=A9=ED=96=A5?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/domain/Article.java        |  2 +-
 .../article/domain/ArticleBookmark.java       | 15 +++++---
 .../article/domain/ArticleBookmarks.java      |  3 +-
 .../domain/repository/ArticleRepository.java  |  9 +++--
 .../article/domain/ArticleBookmarkTest.java   | 12 +++++--
 .../article/domain/ArticleBookmarksTest.java  | 35 ++++++++++++++-----
 6 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/domain/Article.java b/backend/src/main/java/wooteco/prolog/article/domain/Article.java
index cca3e0575..e115c85f0 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/Article.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/Article.java
@@ -68,7 +68,7 @@ public void update(final String title, final String url) {
     }
 
     public void addBookmark(final Member member) {
-        final ArticleBookmark articleBookmark = new ArticleBookmark(id, member.getId());
+        final ArticleBookmark articleBookmark = new ArticleBookmark(this, member.getId());
         articleBookmarks.addBookmark(articleBookmark);
     }
 
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
index 2b24b519e..c08e91e92 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
@@ -2,9 +2,12 @@
 
 import java.util.Objects;
 import javax.persistence.Entity;
+import javax.persistence.FetchType;
 import javax.persistence.GeneratedValue;
 import javax.persistence.GenerationType;
 import javax.persistence.Id;
+import javax.persistence.JoinColumn;
+import javax.persistence.ManyToOne;
 import javax.persistence.Table;
 import lombok.AccessLevel;
 import lombok.NoArgsConstructor;
@@ -18,18 +21,20 @@ public class ArticleBookmark {
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
 
-    private Long articleId;
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "article_id")
+    private Article article;
 
     private Long memberId;
 
-    private ArticleBookmark(final Long id, final Long articleId, final Long memberId) {
+    private ArticleBookmark(final Long id, final Article article, final Long memberId) {
         this.id = id;
-        this.articleId = articleId;
+        this.article = article;
         this.memberId = memberId;
     }
 
-    public ArticleBookmark(final Long articleId, final Long memberId) {
-        this(null, articleId, memberId);
+    public ArticleBookmark(final Article article, final Long memberId) {
+        this(null, article, memberId);
     }
 
     public boolean isOwner(final Long memberId) {
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
index fc9d2a3c0..7d332d319 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
@@ -3,7 +3,6 @@
 import java.util.ArrayList;
 import java.util.List;
 import javax.persistence.Embeddable;
-import javax.persistence.FetchType;
 import javax.persistence.OneToMany;
 import org.hibernate.annotations.Cascade;
 import org.hibernate.annotations.CascadeType;
@@ -11,7 +10,7 @@
 @Embeddable
 public class ArticleBookmarks {
 
-    @OneToMany(mappedBy = "article", fetch = FetchType.LAZY)
+    @OneToMany(mappedBy = "article")
     @Cascade(value = {CascadeType.PERSIST, CascadeType.DELETE})
     private List<ArticleBookmark> articleBookmarks;
 
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
index b79ca8d1a..257c008b7 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
@@ -1,11 +1,16 @@
 package wooteco.prolog.article.domain.repository;
 
+import java.util.List;
+import java.util.Optional;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 import wooteco.prolog.article.domain.Article;
 
-import java.util.List;
-
 public interface ArticleRepository extends JpaRepository<Article, Long> {
 
     List<Article> findAllByOrderByCreatedAtDesc();
+
+    @Query("select a from Article a join fetch ArticleBookmark where a.id = :id")
+    Optional<Article> findById(@Param("id") final Long id);
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarkTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarkTest.java
index cff4a2e5f..8f9914730 100644
--- a/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarkTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarkTest.java
@@ -4,6 +4,8 @@
 
 import org.junit.jupiter.api.DisplayName;
 import org.junit.jupiter.api.Test;
+import wooteco.prolog.member.domain.Member;
+import wooteco.prolog.member.domain.Role;
 
 class ArticleBookmarkTest {
 
@@ -11,11 +13,15 @@ class ArticleBookmarkTest {
     @Test
     void isOwner() {
         //given
-        final Long memberId = 2L;
-        final ArticleBookmark articleBookmark = new ArticleBookmark(1L, memberId);
+        final Member member = new Member(11L, "username", "nickname", Role.CREW, 101L, "https://");
+        final Title title = new Title("title");
+        final Url url = new Url("url");
+        final ImageUrl imageUrl = new ImageUrl("imageUrl");
+        final Article article = new Article(member, title, url, imageUrl);
+        final ArticleBookmark articleBookmark = new ArticleBookmark(article, member.getId());
 
         //when
-        final Boolean actual = articleBookmark.isOwner(memberId);
+        final Boolean actual = articleBookmark.isOwner(member.getId());
 
         //then
         assertThat(actual)
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java
index a88e8e05e..9fa73c30e 100644
--- a/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java
@@ -2,23 +2,40 @@
 
 import static org.assertj.core.api.Assertions.assertThat;
 
+import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.DisplayName;
 import org.junit.jupiter.api.Test;
+import wooteco.prolog.member.domain.Member;
+import wooteco.prolog.member.domain.Role;
 
 class ArticleBookmarksTest {
 
+    private Member member;
+    private Title title;
+    private Url url;
+    private ImageUrl imageUrl;
+
+    @BeforeEach
+    void setUp() {
+        member = new Member(11L, "username", "nickname", Role.CREW, 101L, "https://");
+        title = new Title("title");
+        url = new Url("url");
+        imageUrl = new ImageUrl("imageUrl");
+    }
+
     @Test
     @DisplayName("ArticleBookmark를 추가할 수 있다.")
     void addArticleBookmark() {
         //given
         final ArticleBookmarks articleBookmarks = new ArticleBookmarks();
-        final ArticleBookmark articleBookmark = new ArticleBookmark(1L, 2L);
+        final Article article = new Article(member, title, url, imageUrl);
+        final ArticleBookmark articleBookmark = new ArticleBookmark(article, member.getId());
 
         //when
         articleBookmarks.addBookmark(articleBookmark);
 
         //then
-        assertThat(articleBookmarks.containBookmark(2L))
+        assertThat(articleBookmarks.containBookmark(member.getId()))
             .isTrue();
     }
 
@@ -27,15 +44,15 @@ void addArticleBookmark() {
     void removeArticleBookmark() {
         //given
         final ArticleBookmarks articleBookmarks = new ArticleBookmarks();
-        final Long memberId = 2L;
-        final ArticleBookmark articleBookmark = new ArticleBookmark(1L, memberId);
+        final Article article = new Article(member, title, url, imageUrl);
+        final ArticleBookmark articleBookmark = new ArticleBookmark(article, member.getId());
         articleBookmarks.addBookmark(articleBookmark);
 
         //when
-        articleBookmarks.removeBookmark(memberId);
+        articleBookmarks.removeBookmark(member.getId());
 
         //then
-        assertThat(articleBookmarks.containBookmark(memberId))
+        assertThat(articleBookmarks.containBookmark(member.getId()))
             .isFalse();
     }
 
@@ -44,12 +61,12 @@ void removeArticleBookmark() {
     void containBookmark() {
         //given
         final ArticleBookmarks articleBookmarks = new ArticleBookmarks();
-        final Long memberId = 2L;
-        final ArticleBookmark articleBookmark = new ArticleBookmark(1L, memberId);
+        final Article article = new Article(member, title, url, imageUrl);
+        final ArticleBookmark articleBookmark = new ArticleBookmark(article, member.getId());
         articleBookmarks.addBookmark(articleBookmark);
 
         //when
-        final Boolean actual = articleBookmarks.containBookmark(memberId);
+        final Boolean actual = articleBookmarks.containBookmark(member.getId());
 
         //then
         assertThat(actual)

From 2a6cadcb1c38fba55496229b2f25ff1284c6af1a Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 22:03:50 +0900
Subject: [PATCH 14/71] =?UTF-8?q?feat:=20article=5Fbookmark=20flyway?=
 =?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=9C=20sql=EB=AC=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../migration/prod/V6_create_table_article_bookmark.sql   | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 backend/src/main/resources/db/migration/prod/V6_create_table_article_bookmark.sql

diff --git a/backend/src/main/resources/db/migration/prod/V6_create_table_article_bookmark.sql b/backend/src/main/resources/db/migration/prod/V6_create_table_article_bookmark.sql
new file mode 100644
index 000000000..fc5b4f786
--- /dev/null
+++ b/backend/src/main/resources/db/migration/prod/V6_create_table_article_bookmark.sql
@@ -0,0 +1,8 @@
+create table if not exists prolog.article_bookmark
+(
+    id         bigint auto_increment primary key,
+    article_id bigint not null,
+    member_id  bigint not null
+) ENGINE = InnoDB
+  DEFAULT CHARSET = utf8mb4
+  COLLATE = utf8mb4_0900_ai_ci;

From 8b705cb287a74b5237af5b3af5d6655be7026c42 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 22:04:16 +0900
Subject: [PATCH 15/71] =?UTF-8?q?refactor:=20fetch=20join=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8A=94=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=20=EB=A9=94=EC=84=9C=EB=93=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/application/ArticleService.java       | 2 +-
 .../article/domain/repository/ArticleRepository.java     | 4 ++--
 .../wooteco/prolog/article/ui/ArticleController.java     | 9 +++++++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
index bddc36e9e..ede45aa67 100644
--- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
+++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
@@ -69,7 +69,7 @@ public void delete(final Long id, final LoginMember loginMember) {
     @Transactional
     public void bookmarkArticle(final Long id, final LoginMember loginMember,
                                 final Boolean checked) {
-        final Article article = articleRepository.findById(id)
+        final Article article = articleRepository.findFetchById(id)
             .orElseThrow(() -> new BadRequestException(ARTICLE_NOT_FOUND_EXCEPTION));
         final Member member = memberService.findById(loginMember.getId());
 
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
index 257c008b7..df5efe865 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
@@ -11,6 +11,6 @@ public interface ArticleRepository extends JpaRepository<Article, Long> {
 
     List<Article> findAllByOrderByCreatedAtDesc();
 
-    @Query("select a from Article a join fetch ArticleBookmark where a.id = :id")
-    Optional<Article> findById(@Param("id") final Long id);
+    @Query("select a from Article a join fetch a.articleBookmarks where a.id = :id")
+    Optional<Article> findFetchById(@Param("id") final Long id);
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
index f88058c12..1cacde254 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
@@ -13,6 +13,7 @@
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 import wooteco.prolog.article.application.ArticleService;
+import wooteco.prolog.article.domain.ArticleBookmark;
 import wooteco.prolog.login.domain.AuthMemberPrincipal;
 import wooteco.prolog.login.ui.LoginMember;
 
@@ -50,4 +51,12 @@ public ResponseEntity<Void> deleteArticle(@PathVariable final Long id,
         articleService.delete(id, member);
         return ResponseEntity.noContent().build();
     }
+
+    @PutMapping("/{id}/bookmark")
+    public ResponseEntity<Void> bookmarkArticle(@PathVariable final Long id,
+                                                @AuthMemberPrincipal final LoginMember member,
+                                                @RequestBody final ArticleBookmarkRequest request) {
+        articleService.bookmarkArticle(id, member, request.getBookmark());
+        return ResponseEntity.ok().build();
+    }
 }

From d340847a7e23a6cd0223f7ca3bf9abc6c0a80d63 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 22:04:44 +0900
Subject: [PATCH 16/71] =?UTF-8?q?test:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=9E=A9=20=EB=93=B1=EB=A1=9D=20=EC=9D=B8?=
 =?UTF-8?q?=EC=88=98=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/steps/ArticleStepDefinitions.java  | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java b/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
index afd170630..cbbb977c7 100644
--- a/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
+++ b/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
@@ -1,6 +1,7 @@
 package wooteco.prolog.steps;
 
 import static org.assertj.core.api.Assertions.assertThat;
+import static org.junit.jupiter.api.Assertions.assertAll;
 import static wooteco.prolog.fixtures.ArticleFixture.ARTICLE_REQUEST1;
 import static wooteco.prolog.fixtures.ArticleFixture.ARTICLE_REQUEST2;
 
@@ -10,6 +11,7 @@
 import java.util.List;
 import org.springframework.http.HttpStatus;
 import wooteco.prolog.AcceptanceSteps;
+import wooteco.prolog.article.ui.ArticleBookmarkRequest;
 import wooteco.prolog.article.ui.ArticleResponse;
 import wooteco.prolog.article.ui.ArticleUrlResponse;
 
@@ -22,7 +24,7 @@ public class ArticleStepDefinitions extends AcceptanceSteps {
         context.invokeHttpPostWithToken("/articles", ARTICLE_REQUEST2);
     }
 
-    @Given("아티클을 작성하고")
+    @Given("아티클이 작성되어 있고")
     @When("아티클을 작성하면")
     public void 아티클을_작성하면() {
         context.invokeHttpPostWithToken("/articles", ARTICLE_REQUEST1);
@@ -96,4 +98,23 @@ public class ArticleStepDefinitions extends AcceptanceSteps {
             .usingRecursiveComparison()
             .isEqualTo(expected);
     }
+
+    @When("{long}번 아티클에 북마크 요청을 보내면")
+    public void 아티클에_북마크_요청을_보내면(final Long articleId) {
+        //final String articleUrl = context.response.header("Location");
+        final ArticleBookmarkRequest request = new ArticleBookmarkRequest(true);
+        context.invokeHttpPutWithToken(
+            String.format("/articles/%d/bookmark", articleId),
+            request
+        );
+    }
+
+    @Then("아티클에 북마크가 등록된다")
+    public void 아티클에_북마크가_등록된다() {
+        final int statusCode = context.response.statusCode();
+        assertAll(
+            () -> assertThat(statusCode).isEqualTo(HttpStatus.OK.value())
+        );
+        //아티클 단건 조회 변경 시, 단건 조회로 bookmark 여부까지 검증해보기
+    }
 }

From df1670c18e0b1c048ecce2b9b667805feab5e093 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 22:26:26 +0900
Subject: [PATCH 17/71] =?UTF-8?q?fix:=20flyway=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...article_bookmark.sql => V6__create_table_article_bookmark.sql} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename backend/src/main/resources/db/migration/prod/{V6_create_table_article_bookmark.sql => V6__create_table_article_bookmark.sql} (100%)

diff --git a/backend/src/main/resources/db/migration/prod/V6_create_table_article_bookmark.sql b/backend/src/main/resources/db/migration/prod/V6__create_table_article_bookmark.sql
similarity index 100%
rename from backend/src/main/resources/db/migration/prod/V6_create_table_article_bookmark.sql
rename to backend/src/main/resources/db/migration/prod/V6__create_table_article_bookmark.sql

From e93e72e65ea13463181da32cab861870c0bf95b3 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 15 Sep 2023 22:33:24 +0900
Subject: [PATCH 18/71] =?UTF-8?q?test:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/application/ArticleServiceTest.java      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
index 12b4712c8..a93382d44 100644
--- a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
@@ -183,7 +183,7 @@ void delete_fail_InvalidArticleAuthorException() {
     }
 
     @Nested
-    @DisplayName("아티클의 북마크 상태를 바굴 수 있다.")
+    @DisplayName("아티클의 북마크 상태를 바꿀 수 있다.")
     class bookmarkArticle {
 
         @DisplayName("아티클의 북마크를 추가한다.")
@@ -197,7 +197,7 @@ void add() {
             final Long articleId = 3L;
             final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
 
-            when(articleRepository.findById(articleId)).thenReturn(Optional.of(article));
+            when(articleRepository.findFetchById(articleId)).thenReturn(Optional.of(article));
             when(memberService.findById(member.getId())).thenReturn(member);
 
             //when
@@ -220,7 +220,7 @@ void remove() {
             final Long articleId = 3L;
             final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
 
-            when(articleRepository.findById(articleId)).thenReturn(Optional.of(article));
+            when(articleRepository.findFetchById(articleId)).thenReturn(Optional.of(article));
             when(memberService.findById(member.getId())).thenReturn(member);
 
             //when

From 7579d21970e4a434d49caaa523e3c90de8d8f688 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Mon, 18 Sep 2023 15:29:03 +0900
Subject: [PATCH 19/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94=20=EB=93=B1=EB=A1=9D=20=EC=9D=B8?=
 =?UTF-8?q?=EC=88=98=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/steps/ArticleStepDefinitions.java  | 21 ++++++++++++++++++-
 .../resources/wooteco/prolog/article.feature  |  5 +++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java b/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
index cbbb977c7..4b53ca4c3 100644
--- a/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
+++ b/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
@@ -115,6 +115,25 @@ public class ArticleStepDefinitions extends AcceptanceSteps {
         assertAll(
             () -> assertThat(statusCode).isEqualTo(HttpStatus.OK.value())
         );
-        //아티클 단건 조회 변경 시, 단건 조회로 bookmark 여부까지 검증해보기
+        //아티클 단건 조회에 북마크 여부가 추가되면 단건 조회로 bookmark 여부까지 검증해보기
+    }
+
+    @When("{long}번 아티클에 좋아요 요청을 보내면")
+    public void 아티클에_좋아요_요청을_보내면(final Long articleId) {
+        //final String articleUrl = context.response.header("Location");
+        final ArticleBookmarkRequest request = new ArticleBookmarkRequest(true);
+        context.invokeHttpPutWithToken(
+            String.format("/articles/%d/likes", articleId),
+            request
+        );
+    }
+
+    @Then("아티클에 좋아요가 등록된다")
+    public void 아티클에_좋아요가_등록된다() {
+        final int statusCode = context.response.statusCode();
+        assertAll(
+            () -> assertThat(statusCode).isEqualTo(HttpStatus.OK.value())
+        );
+        //아티클 단건 조회에 좋아요 여부가 추가되면 단건 조회로 likes 여부까지 검증해보기
     }
 }
diff --git a/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature b/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
index 631295ce9..0c21cddc5 100644
--- a/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
+++ b/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
@@ -31,3 +31,8 @@ Feature: 아티클 관련 기능
         Given 아티클이 작성되어 있고
         When 1번 아티클에 북마크 요청을 보내면
         Then 아티클에 북마크가 등록된다
+
+    Scenario: 아티클에 좋아요를 등록하기
+        Given 아티클이 작성되어 있고
+        When 1번 아티클에 좋아요 요청을 보내면
+        Then 아티클에 좋아요가 등록된다

From 294cf4932ef594b2c8dac194ab5e90082fa12b6b Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Mon, 18 Sep 2023 15:36:57 +0900
Subject: [PATCH 20/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EB=AC=B8=EC=84=9C=ED=99=94=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/documentation/adoc/article.adoc   | 10 ++++++++++
 .../prolog/docu/ArticleDocumentation.java     | 20 +++++++++++++++++++
 .../article/application/ArticleService.java   |  4 ++++
 .../prolog/article/ui/ArticleController.java  |  9 ++++++++-
 .../article/ui/ArticleLikesRequest.java       | 15 ++++++++++++++
 5 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 backend/src/main/java/wooteco/prolog/article/ui/ArticleLikesRequest.java

diff --git a/backend/src/documentation/adoc/article.adoc b/backend/src/documentation/adoc/article.adoc
index 4c913ca77..052ed0ea2 100644
--- a/backend/src/documentation/adoc/article.adoc
+++ b/backend/src/documentation/adoc/article.adoc
@@ -10,3 +10,13 @@ include::{snippets}/article/bookmark/http-request.adoc[]
 ==== Response
 
 include::{snippets}/article/bookmark/http-response.adoc[]
+
+=== 아티클 좋아요 추가
+
+==== Request
+
+include::{snippets}/article/likes/http-request.adoc[]
+
+==== Response
+
+include::{snippets}/article/likes/http-response.adoc[]
diff --git a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
index e872f5074..fdc2f2b61 100644
--- a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
+++ b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
@@ -12,6 +12,7 @@
 import wooteco.prolog.article.application.ArticleService;
 import wooteco.prolog.article.ui.ArticleBookmarkRequest;
 import wooteco.prolog.article.ui.ArticleController;
+import wooteco.prolog.article.ui.ArticleLikesRequest;
 
 @WebMvcTest(controllers = ArticleController.class)
 public class ArticleDocumentation extends NewDocumentation {
@@ -37,4 +38,23 @@ public class ArticleDocumentation extends NewDocumentation {
         //docs
         response.apply(document("article/bookmark"));
     }
+
+    @Test
+    void 아티클에_좋아요를_변경한다() {
+        //given, when
+        final ArticleLikesRequest articleLikesRequest = new ArticleLikesRequest(true);
+
+        final ValidatableMockMvcResponse response = given
+            .header("Authorization", "Bearer " + accessToken)
+            .contentType(APPLICATION_JSON)
+            .body(articleLikesRequest)
+            .when().put("/articles/{bookmark-id}/likes", 1L)
+            .then().log().all();
+
+        //then
+        response.expect(status().isOk());
+
+        //docs
+        response.apply(document("article/likes"));
+    }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
index ede45aa67..f63f21a32 100644
--- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
+++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
@@ -79,4 +79,8 @@ public void bookmarkArticle(final Long id, final LoginMember loginMember,
             article.removeBookmark(member);
         }
     }
+
+    public void likeArticle(final Long id, final LoginMember member, final Boolean likes) {
+
+    }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
index 1cacde254..9bf7d2171 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
@@ -13,7 +13,6 @@
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 import wooteco.prolog.article.application.ArticleService;
-import wooteco.prolog.article.domain.ArticleBookmark;
 import wooteco.prolog.login.domain.AuthMemberPrincipal;
 import wooteco.prolog.login.ui.LoginMember;
 
@@ -59,4 +58,12 @@ public ResponseEntity<Void> bookmarkArticle(@PathVariable final Long id,
         articleService.bookmarkArticle(id, member, request.getBookmark());
         return ResponseEntity.ok().build();
     }
+
+    @PutMapping("/{id}/likes")
+    public ResponseEntity<Void> likeArticle(@PathVariable final Long id,
+                                            @AuthMemberPrincipal final LoginMember member,
+                                            @RequestBody final ArticleLikesRequest request) {
+        articleService.likeArticle(id, member, request.getLikes());
+        return ResponseEntity.ok().build();
+    }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleLikesRequest.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleLikesRequest.java
new file mode 100644
index 000000000..e1e4a9b89
--- /dev/null
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleLikesRequest.java
@@ -0,0 +1,15 @@
+package wooteco.prolog.article.ui;
+
+import lombok.Getter;
+import lombok.RequiredArgsConstructor;
+
+@Getter
+@RequiredArgsConstructor
+public class ArticleLikesRequest {
+
+    private final Boolean likes;
+
+    public ArticleLikesRequest() {
+        this(null);
+    }
+}

From 8415eb899b54484febe13740b36f6f0529649f4e Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Mon, 18 Sep 2023 15:17:36 +0900
Subject: [PATCH 21/71] =?UTF-8?q?refactor:=20=EC=95=84=ED=8B=B0=ED=81=B4?=
 =?UTF-8?q?=20=EC=84=9C=EB=B9=84=EC=8A=A4=EC=97=90=20=EC=9E=88=EB=8A=94=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=EC=9D=84=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EB=8F=84=EB=A9=94=EC=9D=B8=EC=9C=BC=EB=A1=9C=20=EC=88=A8?=
 =?UTF-8?q?=EA=B8=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/application/ArticleService.java   |  9 +--
 .../prolog/article/domain/Article.java        | 14 ++++-
 .../prolog/article/domain/ArticleTest.java    | 58 ++++++++++---------
 3 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
index f63f21a32..fdce26866 100644
--- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
+++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
@@ -68,16 +68,11 @@ public void delete(final Long id, final LoginMember loginMember) {
 
     @Transactional
     public void bookmarkArticle(final Long id, final LoginMember loginMember,
-                                final Boolean checked) {
+                                final Boolean isBookmark) {
         final Article article = articleRepository.findFetchById(id)
             .orElseThrow(() -> new BadRequestException(ARTICLE_NOT_FOUND_EXCEPTION));
         final Member member = memberService.findById(loginMember.getId());
-
-        if (TRUE.equals(checked)) {
-            article.addBookmark(member);
-        } else {
-            article.removeBookmark(member);
-        }
+        article.setBookmark(member, isBookmark);
     }
 
     public void likeArticle(final Long id, final LoginMember member, final Boolean likes) {
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/Article.java b/backend/src/main/java/wooteco/prolog/article/domain/Article.java
index e115c85f0..2b2584723 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/Article.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/Article.java
@@ -1,5 +1,7 @@
 package wooteco.prolog.article.domain;
 
+import static java.lang.Boolean.TRUE;
+
 import java.time.LocalDateTime;
 import javax.persistence.Embedded;
 import javax.persistence.Entity;
@@ -67,12 +69,20 @@ public void update(final String title, final String url) {
         this.url = new Url(url);
     }
 
-    public void addBookmark(final Member member) {
+    public void setBookmark(final Member member, final Boolean isBookmark) {
+        if (TRUE.equals(isBookmark)) {
+            addBookmark(member);
+        } else {
+            removeBookmark(member);
+        }
+    }
+
+    private void addBookmark(final Member member) {
         final ArticleBookmark articleBookmark = new ArticleBookmark(this, member.getId());
         articleBookmarks.addBookmark(articleBookmark);
     }
 
-    public void removeBookmark(final Member member) {
+    private void removeBookmark(final Member member) {
         articleBookmarks.removeBookmark(member.getId());
     }
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
index 44f9c8cd8..576546c06 100644
--- a/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
@@ -7,6 +7,7 @@
 import joptsimple.internal.Strings;
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Nested;
 import org.junit.jupiter.api.Test;
 import wooteco.prolog.common.exception.BadRequestException;
 import wooteco.prolog.member.domain.Member;
@@ -98,38 +99,43 @@ void update_invalidUrl() {
             .isInstanceOf(BadRequestException.class);
     }
 
-    @DisplayName("멤버가 아티클을 북마크로 등록한다.")
-    @Test
-    void addBookmark() {
-        //given
-        final Article article = new Article(member, title, url, imageUrl);
+    @Nested
+    @DisplayName("멤버가 아티클의 북마크값을 세팅한다.")
+    class setBookmark {
 
-        //when
-        article.addBookmark(member);
+        @DisplayName("멤버가 아티클을 북마크로 등록한다.")
+        @Test
+        void addBookmark() {
+            //given
+            final Article article = new Article(member, title, url, imageUrl);
 
-        //then
-        final ArticleBookmarks articleBookmarks = article.getArticleBookmarks();
-        final boolean contains = articleBookmarks.containBookmark(member.getId());
+            //when
+            article.setBookmark(member, true);
 
-        assertThat(contains)
-            .isTrue();
-    }
+            //then
+            final ArticleBookmarks articleBookmarks = article.getArticleBookmarks();
+            final boolean contains = articleBookmarks.containBookmark(member.getId());
 
-    @DisplayName("멤버가 아티클을 북마크로 등록한다.")
-    @Test
-    void removeBookmark() {
-        //given
-        final Article article = new Article(member, title, url, imageUrl);
-        article.addBookmark(member);
+            assertThat(contains)
+                .isTrue();
+        }
 
-        //when
-        article.removeBookmark(member);
+        @DisplayName("멤버가 아티클의 북마크를 해제한다.")
+        @Test
+        void removeBookmark() {
+            //given
+            final Article article = new Article(member, title, url, imageUrl);
+            article.setBookmark(member, true);
 
-        //then
-        final ArticleBookmarks articleBookmarks = article.getArticleBookmarks();
-        final boolean contains = articleBookmarks.containBookmark(member.getId());
+            //when
+            article.setBookmark(member, false);
+
+            //then
+            final ArticleBookmarks articleBookmarks = article.getArticleBookmarks();
+            final boolean contains = articleBookmarks.containBookmark(member.getId());
 
-        assertThat(contains)
-            .isFalse();
+            assertThat(contains)
+                .isFalse();
+        }
     }
 }

From 6688b9cab78b75a8e999a60a907dd65e5ba69bf7 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Mon, 18 Sep 2023 15:37:49 +0900
Subject: [PATCH 22/71] =?UTF-8?q?test:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20?=
 =?UTF-8?q?=EB=B3=80=EC=88=98=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/wooteco/prolog/docu/ArticleDocumentation.java        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
index fdc2f2b61..43832e60e 100644
--- a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
+++ b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
@@ -29,7 +29,7 @@ public class ArticleDocumentation extends NewDocumentation {
             .header("Authorization", "Bearer " + accessToken)
             .contentType(APPLICATION_JSON)
             .body(bookmarkRequest)
-            .when().put("/articles/{bookmark-id}/bookmark", 1L)
+            .when().put("/articles/{article-id}/bookmark", 1L)
             .then().log().all();
 
         //then
@@ -48,7 +48,7 @@ public class ArticleDocumentation extends NewDocumentation {
             .header("Authorization", "Bearer " + accessToken)
             .contentType(APPLICATION_JSON)
             .body(articleLikesRequest)
-            .when().put("/articles/{bookmark-id}/likes", 1L)
+            .when().put("/articles/{article-id}/likes", 1L)
             .then().log().all();
 
         //then

From c8137f8d34229ad0e6f48598f2ba747941a880c6 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Mon, 18 Sep 2023 15:50:18 +0900
Subject: [PATCH 23/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94=20=EC=97=94=ED=8B=B0=ED=8B=B0=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/domain/ArticleLike.java    | 43 +++++++++++++++++++
 .../prod/V7__create_table_article_like.sql    |  8 ++++
 .../article/domain/ArticleLikeTest.java       | 30 +++++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 backend/src/main/java/wooteco/prolog/article/domain/ArticleLike.java
 create mode 100644 backend/src/main/resources/db/migration/prod/V7__create_table_article_like.sql
 create mode 100644 backend/src/test/java/wooteco/prolog/article/domain/ArticleLikeTest.java

diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleLike.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleLike.java
new file mode 100644
index 000000000..6748ff43c
--- /dev/null
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleLike.java
@@ -0,0 +1,43 @@
+package wooteco.prolog.article.domain;
+
+import java.util.Objects;
+import javax.persistence.Entity;
+import javax.persistence.FetchType;
+import javax.persistence.GeneratedValue;
+import javax.persistence.GenerationType;
+import javax.persistence.Id;
+import javax.persistence.JoinColumn;
+import javax.persistence.ManyToOne;
+import javax.persistence.Table;
+import lombok.AccessLevel;
+import lombok.NoArgsConstructor;
+
+@Entity
+@NoArgsConstructor(access = AccessLevel.PROTECTED)
+@Table(name = "article_like")
+public class ArticleLike {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "article_id")
+    private Article article;
+
+    private Long memberId;
+
+    private ArticleLike(final Long id, final Article article, final Long memberId) {
+        this.id = id;
+        this.article = article;
+        this.memberId = memberId;
+    }
+
+    public ArticleLike(final Article article, final Long memberId) {
+        this(null, article, memberId);
+    }
+
+    public boolean isOwner(final Long memberId) {
+        return Objects.equals(this.memberId, memberId);
+    }
+}
diff --git a/backend/src/main/resources/db/migration/prod/V7__create_table_article_like.sql b/backend/src/main/resources/db/migration/prod/V7__create_table_article_like.sql
new file mode 100644
index 000000000..4fbe72b0e
--- /dev/null
+++ b/backend/src/main/resources/db/migration/prod/V7__create_table_article_like.sql
@@ -0,0 +1,8 @@
+create table if not exists prolog.article_like
+(
+    id         bigint auto_increment primary key,
+    article_id bigint not null,
+    member_id  bigint not null
+) ENGINE = InnoDB
+  DEFAULT CHARSET = utf8mb4
+  COLLATE = utf8mb4_0900_ai_ci;
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleLikeTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleLikeTest.java
new file mode 100644
index 000000000..c0527dda4
--- /dev/null
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleLikeTest.java
@@ -0,0 +1,30 @@
+package wooteco.prolog.article.domain;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import wooteco.prolog.member.domain.Member;
+import wooteco.prolog.member.domain.Role;
+
+class ArticleLikeTest {
+
+    @DisplayName("memberId가 동일한지 확인")
+    @Test
+    void isOwner() {
+        //given
+        final Member member = new Member(11L, "username", "nickname", Role.CREW, 101L, "https://");
+        final Title title = new Title("title");
+        final Url url = new Url("url");
+        final ImageUrl imageUrl = new ImageUrl("imageUrl");
+        final Article article = new Article(member, title, url, imageUrl);
+        final ArticleLike articleLike = new ArticleLike(article, member.getId());
+
+        //when
+        final Boolean actual = articleLike.isOwner(member.getId());
+
+        //then
+        assertThat(actual)
+            .isTrue();
+    }
+}

From 694c7b1e669c7cca70642a7543d0aa5e6aaafc78 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Mon, 18 Sep 2023 15:53:38 +0900
Subject: [PATCH 24/71] =?UTF-8?q?refactor:=20=EB=B6=81=EB=A7=88=ED=81=AC?=
 =?UTF-8?q?=20=EB=AA=85=EC=84=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 frontend/src/apis/articles.ts           | 3 +--
 frontend/src/mocks/handlers/articles.ts | 6 ++++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/apis/articles.ts b/frontend/src/apis/articles.ts
index 4f4f8bd46..b2f1bace5 100644
--- a/frontend/src/apis/articles.ts
+++ b/frontend/src/apis/articles.ts
@@ -2,7 +2,6 @@ import { client } from '.';
 import {
   ArticleBookmarkPutRequest,
   ArticleRequest,
-  CourseFilter,
   MetaOgRequest,
   MetaOgResponse,
 } from '../models/Article';
@@ -20,5 +19,5 @@ export const requestPutArticleBookmark = ({ articleId, bookmark }: ArticleBookma
 };
 
 export const requestGetFilteredArticle = (course: string, bookmark: boolean) => {
-  return client.get(`/articles/filter?course=${course}&bookmark=${bookmark}`);
+  return client.get(`/articles/filter?course=${course}&onlyBookmarked=${bookmark}`);
 };
diff --git a/frontend/src/mocks/handlers/articles.ts b/frontend/src/mocks/handlers/articles.ts
index 4ea38b898..441dae3e9 100644
--- a/frontend/src/mocks/handlers/articles.ts
+++ b/frontend/src/mocks/handlers/articles.ts
@@ -39,9 +39,11 @@ export const articlesHandler = [
 
   rest.get(`${BASE_URL}/articles/filter`, (req, res, ctx) => {
     const course = req.url.searchParams.get('course');
-    const bookmark = req.url.searchParams.get('bookmark');
+    const onlyBookmarked = req.url.searchParams.get('onlyBookmarked');
 
-    const filteredArticle = articles.filter((article) => bookmark === String(article.isBookMarked));
+    const filteredArticle = articles.filter(
+      (article) => onlyBookmarked === String(article.isBookMarked)
+    );
 
     return res(ctx.status(200), ctx.json(filteredArticle));
   }),

From 443bfcf8f2ed990a724c7814ef7a79daeaf4aac0 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Mon, 18 Sep 2023 15:54:43 +0900
Subject: [PATCH 25/71] =?UTF-8?q?refactor:=20useEffect=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC,=20=ED=95=84=ED=84=B0=20=EC=98=B5?=
 =?UTF-8?q?=EC=85=98=20api=20=EB=B0=9B=EC=95=84=EC=98=A4=EB=8F=84=EB=A1=9D?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 frontend/src/pages/ArticleListPage/index.tsx | 34 ++++++++++++--------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx
index 2987f7870..bc0ec7f49 100644
--- a/frontend/src/pages/ArticleListPage/index.tsx
+++ b/frontend/src/pages/ArticleListPage/index.tsx
@@ -8,7 +8,7 @@ import { COLOR, PATH } from '../../constants';
 import styled from '@emotion/styled';
 import { MainContentStyle } from '../../PageRouter';
 import SelectBox from '../../components/Controls/SelectBox';
-import { ChangeEventHandler, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { css } from '@emotion/react';
 import ArticleBookmarkFilter from '../../components/Article/ArticleBookmarkFIlter';
 import { useGetFilteredArticleQuery } from '../../hooks/queries/article';
@@ -35,27 +35,31 @@ const ArticleListPage = () => {
 
   const changeFilterOption: (option: { value: string; label: string }) => void = (option) => {
     setSelectedCourse(option);
-    // getFilteredArticles();
   };
 
   const handleCheckBookmark: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     setChecked(e.currentTarget.checked);
-    // getFilteredArticles();
   };
 
+  useEffect(() => {
+    getFilteredArticles();
+  }, [checked, selectedCourse]);
+
   return (
     <div css={[MainContentStyle]}>
       <Container>
-        <SelectBoxWrapper>
-          <SelectBox
-            isClearable={false}
-            value={selectedCourse}
-            defaultOption={selectedCourse}
-            options={CATEGORY_OPTIONS}
-            onChange={changeFilterOption}
-          />
-        </SelectBoxWrapper>
-        <ArticleBookmarkFilter checked={checked} handleCheckBookmark={handleCheckBookmark} />
+        <FilteringWrapper>
+          <SelectBoxWrapper>
+            <SelectBox
+              isClearable={false}
+              value={selectedCourse}
+              defaultOption={selectedCourse}
+              options={CATEGORY_OPTIONS}
+              onChange={changeFilterOption}
+            />
+          </SelectBoxWrapper>
+          <ArticleBookmarkFilter checked={checked} handleCheckBookmark={handleCheckBookmark} />
+        </FilteringWrapper>
         <Button
           type="button"
           size="X_SMALL"
@@ -82,6 +86,10 @@ export const Container = styled.div`
   gap: 15px;
 `;
 
+const FilteringWrapper = styled.div`
+  display: flex;
+`;
+
 const SelectBoxWrapper = styled.div`
   width: 150px;
 `;

From 4cdd4fb081d9b50d36cb3778e0eeb059cddb11ea Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Mon, 18 Sep 2023 15:54:57 +0900
Subject: [PATCH 26/71] =?UTF-8?q?refactor:=20=EB=B6=81=EB=A7=88=ED=81=AC?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 .../src/components/Article/Article.style.tsx  | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Article/Article.style.tsx b/frontend/src/components/Article/Article.style.tsx
index 14e03d311..13980b9b4 100644
--- a/frontend/src/components/Article/Article.style.tsx
+++ b/frontend/src/components/Article/Article.style.tsx
@@ -72,19 +72,20 @@ export const Title = styled.p`
   -webkit-box-orient: vertical;
 `;
 
-export const ArticleBookmarkButtonStyle = css`
-  flex-direction: column;
-  padding: 0;
-  width: fit-content;
-  font-size: 1.4rem;
+export const BookmarkWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+`;
 
+export const ArticleBookmarkButtonStyle = css`
+  width: initial;
   background-color: transparent;
-  color: ${COLOR.BLACK_800};
+  text-align: right;
 
   & > img {
-    margin-right: 0;
-    width: 1.8rem;
-    height: 1.8rem;
+    width: 2.3rem;
+    height: 2.3rem;
   }
 `;
 

From 1744871d5c1a0cc57cc06f9cf2f6da9eea93b0b4 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Mon, 18 Sep 2023 15:55:15 +0900
Subject: [PATCH 27/71] =?UTF-8?q?refactor:=20=EB=B6=81=EB=A7=88=ED=81=AC?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20wrapper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 frontend/src/components/Article/Article.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
index 4211117b4..7b9069414 100644
--- a/frontend/src/components/Article/Article.tsx
+++ b/frontend/src/components/Article/Article.tsx
@@ -33,11 +33,13 @@ const Article = ({ id, title, userName, url, createdAt, imageUrl }: ArticleType)
             <Styled.CreatedAt>{createdAt.split(' ')[0]}</Styled.CreatedAt>
           </Styled.ArticleInfoWrapper>
           <Styled.Title>{title}</Styled.Title>
-          <Scrap
-            scrap={bookmark}
-            onClick={toggleBookmark}
-            cssProps={Styled.ArticleBookmarkButtonStyle}
-          />
+          <Styled.BookmarkWrapper>
+            <Scrap
+              scrap={bookmark}
+              onClick={toggleBookmark}
+              cssProps={Styled.ArticleBookmarkButtonStyle}
+            />
+          </Styled.BookmarkWrapper>
         </Styled.ArticleInfoContainer>
       </Styled.Anchor>
     </Styled.Container>

From 3291400c4b4475bc767300feef087886e5a7d2b2 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Mon, 18 Sep 2023 15:55:30 +0900
Subject: [PATCH 28/71] =?UTF-8?q?refactor:=20=EB=B6=81=EB=A7=88=ED=81=AC?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20label=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 .../Article/ArticleBookmarkFIlter.tsx          | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Article/ArticleBookmarkFIlter.tsx b/frontend/src/components/Article/ArticleBookmarkFIlter.tsx
index 82a451f71..9fb48f7d9 100644
--- a/frontend/src/components/Article/ArticleBookmarkFIlter.tsx
+++ b/frontend/src/components/Article/ArticleBookmarkFIlter.tsx
@@ -8,12 +8,10 @@ interface ArticleBookmarkFilterProps {
 const ArticleBookmarkFilter = ({ checked, handleCheckBookmark }: ArticleBookmarkFilterProps) => {
   return (
     <ArticleBookmarkFilterContainer>
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={handleCheckBookmark}
-        value="북마크한 아티클"
-      />
+      <label>
+        <input type="checkbox" checked={checked} onChange={handleCheckBookmark} />
+        북마크한 아티클
+      </label>
     </ArticleBookmarkFilterContainer>
   );
 };
@@ -21,8 +19,10 @@ const ArticleBookmarkFilter = ({ checked, handleCheckBookmark }: ArticleBookmark
 export default ArticleBookmarkFilter;
 
 const ArticleBookmarkFilterContainer = styled.div`
-  width: 100px;
-  border: 1px solid black;
-  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  width: 150px;
+  height: 100%;
   font-size: 1.5rem;
 `;

From f4d5ad4c1fef7567b88171aa07d5265a6aef30df Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Wed, 20 Sep 2023 16:09:01 +0900
Subject: [PATCH 29/71] =?UTF-8?q?feat:=20article=20filter=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/application/ArticleService.java   | 24 +++++++++++++++----
 .../domain/repository/ArticleRepository.java  | 18 ++++++++++++--
 .../prolog/article/ui/ArticleController.java  | 17 ++++++++++---
 .../prolog/common/WebConverterConfig.java     | 12 +++++++---
 4 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
index ede45aa67..3f7ce7cfe 100644
--- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
+++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
@@ -1,10 +1,5 @@
 package wooteco.prolog.article.application;
 
-import static java.lang.Boolean.TRUE;
-import static java.util.stream.Collectors.toList;
-import static wooteco.prolog.common.exception.BadRequestCode.ARTICLE_NOT_FOUND_EXCEPTION;
-
-import java.util.List;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
@@ -17,6 +12,13 @@
 import wooteco.prolog.login.ui.LoginMember;
 import wooteco.prolog.member.application.MemberService;
 import wooteco.prolog.member.domain.Member;
+import wooteco.prolog.member.domain.MemberGroupType;
+
+import java.util.List;
+
+import static java.lang.Boolean.TRUE;
+import static java.util.stream.Collectors.toList;
+import static wooteco.prolog.common.exception.BadRequestCode.ARTICLE_NOT_FOUND_EXCEPTION;
 
 @RequiredArgsConstructor
 @Service
@@ -79,4 +81,16 @@ public void bookmarkArticle(final Long id, final LoginMember loginMember,
             article.removeBookmark(member);
         }
     }
+
+    public List<ArticleResponse> filter(final LoginMember member, final MemberGroupType course, final boolean onlyBookmarked) {
+        if (member.isMember() && onlyBookmarked) {
+            return articleRepository.findArticlesByCourseAndMember(course.getGroupName(), member.getId()).stream()
+                .map(ArticleResponse::from)
+                .collect(toList());
+        }
+
+        return articleRepository.findArticlesByCourse(course.getGroupName()).stream()
+            .map(ArticleResponse::from)
+            .collect(toList());
+    }
 }
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
index df5efe865..4681d5a1f 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
@@ -1,16 +1,30 @@
 package wooteco.prolog.article.domain.repository;
 
-import java.util.List;
-import java.util.Optional;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.Query;
 import org.springframework.data.repository.query.Param;
 import wooteco.prolog.article.domain.Article;
 
+import java.util.List;
+import java.util.Optional;
+
 public interface ArticleRepository extends JpaRepository<Article, Long> {
 
     List<Article> findAllByOrderByCreatedAtDesc();
 
     @Query("select a from Article a join fetch a.articleBookmarks where a.id = :id")
     Optional<Article> findFetchById(@Param("id") final Long id);
+
+    @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")
+    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 " +
+        "JOIN a.articleBookmarks.articleBookmarks ab " +
+        "WHERE mg.name LIKE %:course AND ab.memberId = :memberId")
+    List<Article> findArticlesByCourseAndMember(@Param("course") String course, @Param("memberId") Long memberId);
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
index 1cacde254..8c5fa5e26 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
@@ -1,7 +1,5 @@
 package wooteco.prolog.article.ui;
 
-import java.net.URI;
-import java.util.List;
 import lombok.RequiredArgsConstructor;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.DeleteMapping;
@@ -11,11 +9,15 @@
 import org.springframework.web.bind.annotation.PutMapping;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 import wooteco.prolog.article.application.ArticleService;
-import wooteco.prolog.article.domain.ArticleBookmark;
 import wooteco.prolog.login.domain.AuthMemberPrincipal;
 import wooteco.prolog.login.ui.LoginMember;
+import wooteco.prolog.member.domain.MemberGroupType;
+
+import java.net.URI;
+import java.util.List;
 
 @RequiredArgsConstructor
 @RestController
@@ -59,4 +61,13 @@ public ResponseEntity<Void> bookmarkArticle(@PathVariable final Long id,
         articleService.bookmarkArticle(id, member, request.getBookmark());
         return ResponseEntity.ok().build();
     }
+
+    @GetMapping("/filter")
+    public ResponseEntity<List<ArticleResponse>> filterArticles(@AuthMemberPrincipal final LoginMember member,
+                                                                @RequestParam("course") final MemberGroupType course,
+                                                                @RequestParam("onlyBookmarked") boolean onlyBookmarked) {
+        final List<ArticleResponse> articleResponses = articleService.filter(member, course, onlyBookmarked);
+
+        return ResponseEntity.ok(articleResponses);
+    }
 }
diff --git a/backend/src/main/java/wooteco/prolog/common/WebConverterConfig.java b/backend/src/main/java/wooteco/prolog/common/WebConverterConfig.java
index 932f74c6e..d7d157281 100644
--- a/backend/src/main/java/wooteco/prolog/common/WebConverterConfig.java
+++ b/backend/src/main/java/wooteco/prolog/common/WebConverterConfig.java
@@ -1,11 +1,13 @@
 package wooteco.prolog.common;
 
-import java.time.LocalDate;
-import java.time.Month;
-import java.time.format.DateTimeFormatter;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.format.FormatterRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+import wooteco.prolog.member.domain.MemberGroupType;
+
+import java.time.LocalDate;
+import java.time.Month;
+import java.time.format.DateTimeFormatter;
 
 @Configuration
 public class WebConverterConfig implements WebMvcConfigurer {
@@ -18,5 +20,9 @@ public void addFormatters(FormatterRegistry registry) {
         registry.addConverter(String.class, LocalDate.class,
             source -> LocalDate.parse(source, DateTimeFormatter.BASIC_ISO_DATE)
         );
+
+        registry.addConverter(String.class, MemberGroupType.class,
+            source -> MemberGroupType.valueOf(source.toUpperCase())
+        );
     }
 }

From 262d41446c40f206281566398a6d11ad3da733a1 Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Wed, 20 Sep 2023 16:09:12 +0900
Subject: [PATCH 30/71] =?UTF-8?q?test:=20article=20filter=20test=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../application/ArticleServiceTest.java       | 63 ++++++++++++++++---
 1 file changed, 53 insertions(+), 10 deletions(-)

diff --git a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
index a93382d44..00b94cb45 100644
--- a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
@@ -1,15 +1,6 @@
 package wooteco.prolog.article.application;
 
-import static org.assertj.core.api.Assertions.assertThat;
-import static org.assertj.core.api.Assertions.assertThatThrownBy;
-import static org.mockito.ArgumentMatchers.any;
-import static org.mockito.Mockito.atLeastOnce;
-import static org.mockito.Mockito.verify;
-import static org.mockito.Mockito.when;
-import static wooteco.prolog.login.ui.LoginMember.Authority.MEMBER;
-import static wooteco.prolog.member.domain.Role.CREW;
-
-import java.util.Optional;
+import org.assertj.core.api.Assertions;
 import org.junit.jupiter.api.DisplayName;
 import org.junit.jupiter.api.Nested;
 import org.junit.jupiter.api.Test;
@@ -24,12 +15,28 @@
 import wooteco.prolog.article.domain.Url;
 import wooteco.prolog.article.domain.repository.ArticleRepository;
 import wooteco.prolog.article.ui.ArticleRequest;
+import wooteco.prolog.article.ui.ArticleResponse;
 import wooteco.prolog.common.exception.BadRequestException;
 import wooteco.prolog.login.ui.LoginMember;
 import wooteco.prolog.member.application.MemberService;
 import wooteco.prolog.member.domain.Member;
+import wooteco.prolog.member.domain.MemberGroupType;
 import wooteco.prolog.member.domain.Role;
 
+import java.util.Arrays;
+import java.util.List;
+import java.util.Optional;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.Mockito.atLeastOnce;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+import static wooteco.prolog.login.ui.LoginMember.Authority.ANONYMOUS;
+import static wooteco.prolog.login.ui.LoginMember.Authority.MEMBER;
+import static wooteco.prolog.member.domain.Role.CREW;
+
 @ExtendWith(MockitoExtension.class)
 class ArticleServiceTest {
 
@@ -232,4 +239,40 @@ void remove() {
                 .isTrue();
         }
     }
+
+    @DisplayName("비로그인 사용자가 백엔드 아티클을 필터링 한다.")
+    @Test
+    void filter() {
+        //given
+        final Member member = new Member(1L, "username", "nickname", CREW, 1L, "url");
+        final Article article = new Article(member, new Title("title"), new Url("url"), new ImageUrl("imageUrl"));
+        final LoginMember unLoginMember = new LoginMember(1L, ANONYMOUS);
+
+        when(articleRepository.findArticlesByCourse(any())).thenReturn(Arrays.asList(article));
+
+        //when
+        final List<ArticleResponse> articleResponses = articleService.filter(unLoginMember, MemberGroupType.BACKEND, false);
+
+        //then
+        verify(articleRepository).findArticlesByCourse(any());
+        Assertions.assertThat(articleResponses.get(0).getTitle()).isEqualTo(article.getTitle().getTitle());
+    }
+
+    @DisplayName("로그인 유저가 북마크 백엔드 아티클을 필터링 한다.")
+    @Test
+    void filter_isBookmarked() {
+        //given
+        final Member member = new Member(1L, "username", "nickname", CREW, 1L, "url");
+        final Article article = new Article(member, new Title("title"), new Url("url"), new ImageUrl("imageUrl"));
+        final LoginMember loginMember = new LoginMember(1L, MEMBER);
+
+        when(articleRepository.findArticlesByCourseAndMember(any(), any())).thenReturn(Arrays.asList(article));
+
+        //when
+        final List<ArticleResponse> articleResponses = articleService.filter(loginMember, MemberGroupType.BACKEND, true);
+
+        //then
+        verify(articleRepository).findArticlesByCourseAndMember(any(), any());
+        Assertions.assertThat(articleResponses.get(0).getTitle()).isEqualTo(article.getTitle().getTitle());
+    }
 }

From 57349a9a381fee95f2ece86bc9c39213332e77f1 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Wed, 20 Sep 2023 16:21:10 +0900
Subject: [PATCH 31/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94=20=EC=9D=BC=EA=B8=89=20=EC=BB=AC?=
 =?UTF-8?q?=EB=A0=89=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/domain/ArticleLikes.java   | 36 +++++++++
 .../article/domain/ArticleLikesTest.java      | 76 +++++++++++++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java
 create mode 100644 backend/src/test/java/wooteco/prolog/article/domain/ArticleLikesTest.java

diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java
new file mode 100644
index 000000000..5a919ebb0
--- /dev/null
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java
@@ -0,0 +1,36 @@
+package wooteco.prolog.article.domain;
+
+import java.util.ArrayList;
+import java.util.List;
+import javax.persistence.Embeddable;
+import javax.persistence.OneToMany;
+import org.hibernate.annotations.Cascade;
+import org.hibernate.annotations.CascadeType;
+
+@Embeddable
+public class ArticleLikes {
+
+    @OneToMany(mappedBy = "article")
+    @Cascade(value = {CascadeType.PERSIST, CascadeType.DELETE})
+    private List<ArticleLike> articleLikes;
+
+    public ArticleLikes() {
+        this.articleLikes = new ArrayList<>();
+    }
+
+    public void addLike(final ArticleLike articleLike) {
+        articleLikes.add(articleLike);
+    }
+
+    public void removeLike(final Long memberId) {
+        articleLikes.stream()
+            .filter(like -> like.isOwner(memberId))
+            .findAny()
+            .ifPresent(like -> articleLikes.remove(like));
+    }
+
+    public boolean isAlreadyLike(final Long memberId) {
+        return articleLikes.stream()
+            .anyMatch(like -> like.isOwner(memberId));
+    }
+}
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleLikesTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleLikesTest.java
new file mode 100644
index 000000000..d65d79811
--- /dev/null
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleLikesTest.java
@@ -0,0 +1,76 @@
+package wooteco.prolog.article.domain;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import wooteco.prolog.member.domain.Member;
+import wooteco.prolog.member.domain.Role;
+
+class ArticleLikesTest {
+
+    private Member member;
+    private Title title;
+    private Url url;
+    private ImageUrl imageUrl;
+
+    @BeforeEach
+    void setUp() {
+        member = new Member(11L, "username", "nickname", Role.CREW, 101L, "https://");
+        title = new Title("title");
+        url = new Url("url");
+        imageUrl = new ImageUrl("imageUrl");
+    }
+
+    @Test
+    @DisplayName("ArticleBookmark를 추가할 수 있다.")
+    void addArticleLike() {
+        //given
+        final ArticleLikes articleLikes = new ArticleLikes();
+        final Article article = new Article(member, title, url, imageUrl);
+        final ArticleLike articleLike = new ArticleLike(article, member.getId());
+
+        //when
+        articleLikes.addLike(articleLike);
+
+        //then
+        assertThat(articleLikes.isAlreadyLike(member.getId()))
+            .isTrue();
+    }
+
+    @Test
+    @DisplayName("ArticleBookmark를 삭제할 수 있다,")
+    void removeArticleLike() {
+        //given
+        final ArticleLikes articleLikes = new ArticleLikes();
+        final Article article = new Article(member, title, url, imageUrl);
+        final ArticleLike articleLike = new ArticleLike(article, member.getId());
+        articleLikes.addLike(articleLike);
+
+        //when
+        articleLikes.removeLike(member.getId());
+
+        //then
+        assertThat(articleLikes.isAlreadyLike(member.getId()))
+            .isFalse();
+    }
+
+    @Test
+    @DisplayName("ArticleBookmarks에 memberId를 넘겨서 해당 member가 아티클을 북마크했는지 확인한다.")
+    void isAlreadyLike() {
+        //given
+        final ArticleLikes articleLikes = new ArticleLikes();
+        final Article article = new Article(member, title, url, imageUrl);
+        final ArticleLike articleLike = new ArticleLike(article, member.getId());
+        articleLikes.addLike(articleLike);
+
+        //when
+        final Boolean actual = articleLikes.isAlreadyLike(member.getId());
+
+        //then
+        assertThat(actual)
+            .isTrue();
+    }
+
+}

From 018bb8125488d0e408202b21d5ff605628f27bfa Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Wed, 20 Sep 2023 16:31:29 +0900
Subject: [PATCH 32/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4?=
 =?UTF-8?q?=EC=97=90=20=EC=A2=8B=EC=95=84=EC=9A=94=20=EA=B0=92=EC=9D=84=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/domain/Article.java        | 21 ++++++++++
 .../prolog/article/domain/ArticleTest.java    | 40 +++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/backend/src/main/java/wooteco/prolog/article/domain/Article.java b/backend/src/main/java/wooteco/prolog/article/domain/Article.java
index 2b2584723..be1c9ac0d 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/Article.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/Article.java
@@ -47,6 +47,9 @@ public class Article {
     @Embedded
     private ArticleBookmarks articleBookmarks;
 
+    @Embedded
+    private ArticleLikes articleLikes;
+
     @CreatedDate
     private LocalDateTime createdAt;
 
@@ -56,6 +59,7 @@ public Article(final Member member, final Title title, final Url url, final Imag
         this.url = url;
         this.imageUrl = imageUrl;
         this.articleBookmarks = new ArticleBookmarks();
+        this.articleLikes = new ArticleLikes();
     }
 
     public void validateOwner(final Member member) {
@@ -85,4 +89,21 @@ private void addBookmark(final Member member) {
     private void removeBookmark(final Member member) {
         articleBookmarks.removeBookmark(member.getId());
     }
+
+    public void setLike(final Member member, final Boolean isLike) {
+        if (TRUE.equals(isLike)) {
+            addLike(member);
+        } else {
+            removeLike(member);
+        }
+    }
+
+    private void addLike(final Member member) {
+        final ArticleLike articleLike = new ArticleLike(this, member.getId());
+        articleLikes.addLike(articleLike);
+    }
+
+    private void removeLike(final Member member) {
+        articleLikes.removeLike(member.getId());
+    }
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
index 576546c06..5f6bbedca 100644
--- a/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
@@ -138,4 +138,44 @@ void removeBookmark() {
                 .isFalse();
         }
     }
+
+    @Nested
+    @DisplayName("멤버가 아티클의 좋아요 값을 세팅한다.")
+    class setLike {
+
+        @DisplayName("멤버가 아티클 좋아요를 추가한다.")
+        @Test
+        void addLike() {
+            //given
+            final Article article = new Article(member, title, url, imageUrl);
+
+            //when
+            article.setLike(member, true);
+
+            //then
+            final ArticleLikes articleLike = article.getArticleLikes();
+            final boolean alreadyLike = articleLike.isAlreadyLike(member.getId());
+
+            assertThat(alreadyLike)
+                .isTrue();
+        }
+
+        @DisplayName("멤버가 아티클 좋아요를 해제한다.")
+        @Test
+        void removeLike() {
+            //given
+            final Article article = new Article(member, title, url, imageUrl);
+            article.setLike(member, true);
+
+            //when
+            article.setLike(member, false);
+
+            //then
+            final ArticleLikes articleLike = article.getArticleLikes();
+            final boolean alreadyLike = articleLike.isAlreadyLike(member.getId());
+
+            assertThat(alreadyLike)
+                .isFalse();
+        }
+    }
 }

From d064bb075bf2fe5a39e5e1f706449929469c24f2 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Wed, 20 Sep 2023 16:41:05 +0900
Subject: [PATCH 33/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4?=
 =?UTF-8?q?=EC=97=90=20=EC=A2=8B=EC=95=84=EC=9A=94=20=EA=B0=92=EC=9D=84=20?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95=ED=95=9C=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/application/ArticleService.java   | 11 ++--
 .../application/ArticleServiceTest.java       | 58 ++++++++++++++++++-
 2 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
index fdce26866..c7e0e8a4f 100644
--- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
+++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
@@ -1,6 +1,5 @@
 package wooteco.prolog.article.application;
 
-import static java.lang.Boolean.TRUE;
 import static java.util.stream.Collectors.toList;
 import static wooteco.prolog.common.exception.BadRequestCode.ARTICLE_NOT_FOUND_EXCEPTION;
 
@@ -69,13 +68,17 @@ public void delete(final Long id, final LoginMember loginMember) {
     @Transactional
     public void bookmarkArticle(final Long id, final LoginMember loginMember,
                                 final Boolean isBookmark) {
-        final Article article = articleRepository.findFetchById(id)
+        final Article article = articleRepository.findFetchBookmarkById(id)
             .orElseThrow(() -> new BadRequestException(ARTICLE_NOT_FOUND_EXCEPTION));
         final Member member = memberService.findById(loginMember.getId());
         article.setBookmark(member, isBookmark);
     }
 
-    public void likeArticle(final Long id, final LoginMember member, final Boolean likes) {
-
+    @Transactional
+    public void likeArticle(final Long id, final LoginMember loginMember, final Boolean isLike) {
+        final Article article = articleRepository.findFetchLikeById(id)
+            .orElseThrow(() -> new BadRequestException(ARTICLE_NOT_FOUND_EXCEPTION));
+        final Member member = memberService.findById(loginMember.getId());
+        article.setLike(member, isLike);
     }
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
index a93382d44..fcca7f0b2 100644
--- a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
@@ -19,6 +19,7 @@
 import org.mockito.junit.jupiter.MockitoExtension;
 import wooteco.prolog.article.domain.Article;
 import wooteco.prolog.article.domain.ArticleBookmarks;
+import wooteco.prolog.article.domain.ArticleLikes;
 import wooteco.prolog.article.domain.ImageUrl;
 import wooteco.prolog.article.domain.Title;
 import wooteco.prolog.article.domain.Url;
@@ -197,7 +198,8 @@ void add() {
             final Long articleId = 3L;
             final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
 
-            when(articleRepository.findFetchById(articleId)).thenReturn(Optional.of(article));
+            when(articleRepository.findFetchBookmarkById(articleId)).thenReturn(
+                Optional.of(article));
             when(memberService.findById(member.getId())).thenReturn(member);
 
             //when
@@ -220,7 +222,8 @@ void remove() {
             final Long articleId = 3L;
             final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
 
-            when(articleRepository.findFetchById(articleId)).thenReturn(Optional.of(article));
+            when(articleRepository.findFetchBookmarkById(articleId)).thenReturn(
+                Optional.of(article));
             when(memberService.findById(member.getId())).thenReturn(member);
 
             //when
@@ -232,4 +235,55 @@ void remove() {
                 .isTrue();
         }
     }
+
+    @Nested
+    @DisplayName("아티클의 좋아요 상태를 바꿀 수 있다.")
+    class likeArticle {
+
+        @DisplayName("아티클에 좋아요를 추가한다.")
+        @Test
+        void add() {
+            //given
+            final Member member = new Member(1L, "userName", "nickName",
+                CREW, 1L, "imageUrl");
+            final Article article = new Article(member, new Title("brownTitle"),
+                new Url("brownUrl"), new ImageUrl("imageUrl"));
+            final Long articleId = 3L;
+            final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
+
+            when(articleRepository.findFetchLikeById(articleId)).thenReturn(Optional.of(article));
+            when(memberService.findById(member.getId())).thenReturn(member);
+
+            //when
+            articleService.likeArticle(articleId, loginMember, true);
+
+            //then
+            final ArticleLikes articleBookmarks = article.getArticleLikes();
+            assertThat(articleBookmarks.isAlreadyLike(member.getId()))
+                .isTrue();
+        }
+
+        @DisplayName("아티클의 좋아요를 삭제한다.")
+        @Test
+        void remove() {
+            //given
+            final Member member = new Member(1L, "userName", "nickName",
+                CREW, 1L, "imageUrl");
+            final Article article = new Article(member, new Title("brownTitle"),
+                new Url("brownUrl"), new ImageUrl("imageUrl"));
+            final Long articleId = 3L;
+            final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
+
+            when(articleRepository.findFetchLikeById(articleId)).thenReturn(Optional.of(article));
+            when(memberService.findById(member.getId())).thenReturn(member);
+
+            //when
+            articleService.likeArticle(articleId, loginMember, false);
+
+            //then
+            final ArticleLikes articleBookmarks = article.getArticleLikes();
+            assertThat(articleBookmarks.isAlreadyLike(member.getId()))
+                .isFalse();
+        }
+    }
 }

From fce77c66cd3f8aa8dc909fc50fa32d903263bc2b Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 20 Sep 2023 16:49:59 +0900
Subject: [PATCH 34/71] =?UTF-8?q?docs:=20=EA=B8=B0=EC=A1=B4=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=AC=B8=EC=A0=9C=EC=97=90=20=EA=B4=80=ED=95=9C=20?=
 =?UTF-8?q?=EC=A3=BC=EC=84=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Controls/SelectBox.tsx     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/src/components/Controls/SelectBox.tsx b/frontend/src/components/Controls/SelectBox.tsx
index 4e73a86c2..168875962 100644
--- a/frontend/src/components/Controls/SelectBox.tsx
+++ b/frontend/src/components/Controls/SelectBox.tsx
@@ -34,6 +34,25 @@ interface SelectOption {
   label: string;
 }
 
+/**
+  FIXME: value props type SelectOption['value'] 로 변경되어야 함.
+  아래 예시처럼 type을 좁힐 수 없는 문제가 있음.
+
+  const CATEGORY_OPTIONS = [
+    { value: '', label: '전체보기' },
+    { value: 'frontend', label: '프론트엔드' },
+    { value: 'backend', label: '백엔드' },
+    { value: 'android', label: '안드로이드' },
+  ];
+
+  type CategoryOptions = typeof CATEGORY_OPTIONS[number]; 
+
+  ->type CategoryOptions = {
+      value: string;
+      label: string;
+    }
+  위 처럼 value type을 좁힐 수 없음.
+ */
 interface SelectBoxProps {
   isMulti?: boolean;
   options: SelectOption[];

From 7a9584883e90ec37cdfb696742a866091a93f8f7 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 20 Sep 2023 16:50:32 +0900
Subject: [PATCH 35/71] =?UTF-8?q?refactor:=20bookmark=20=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=EA=B0=92=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Article/Article.tsx | 4 ++--
 frontend/src/models/Article.ts              | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
index 7b9069414..0d55d5f71 100644
--- a/frontend/src/components/Article/Article.tsx
+++ b/frontend/src/components/Article/Article.tsx
@@ -5,9 +5,9 @@ import { useRef, useState } from 'react';
 import { usePutArticleBookmarkMutation } from '../../hooks/queries/article';
 import debounce from '../../utils/debounce';
 
-const Article = ({ id, title, userName, url, createdAt, imageUrl }: ArticleType) => {
+const Article = ({ id, title, userName, url, createdAt, imageUrl, isBookMarked }: ArticleType) => {
   const bookmarkRef = useRef(false);
-  const [bookmark, setBookmark] = useState(false);
+  const [bookmark, setBookmark] = useState(isBookMarked);
   const { mutate: putBookmark } = usePutArticleBookmarkMutation();
 
   const toggleBookmark: React.MouseEventHandler<HTMLButtonElement> = (e) => {
diff --git a/frontend/src/models/Article.ts b/frontend/src/models/Article.ts
index 4bce9855f..dc7540160 100644
--- 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: false;
+  isBookMarked: boolean;
   url: string;
   createdAt: string;
   imageUrl: string;

From f566aaa389fe48f0bc9e1876b336815e527b6791 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 20 Sep 2023 16:50:59 +0900
Subject: [PATCH 36/71] =?UTF-8?q?chore:=20url=EC=97=90=20filter=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/handlers/articles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/mocks/handlers/articles.ts b/frontend/src/mocks/handlers/articles.ts
index 441dae3e9..2302996cc 100644
--- a/frontend/src/mocks/handlers/articles.ts
+++ b/frontend/src/mocks/handlers/articles.ts
@@ -37,7 +37,7 @@ export const articlesHandler = [
     return res(ctx.status(200));
   }),
 
-  rest.get(`${BASE_URL}/articles/filter`, (req, res, ctx) => {
+  rest.get(`${BASE_URL}/articles/`, (req, res, ctx) => {
     const course = req.url.searchParams.get('course');
     const onlyBookmarked = req.url.searchParams.get('onlyBookmarked');
 

From 974c165ec4c9fed4667f4d144c254af8a5628054 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 20 Sep 2023 16:53:22 +0900
Subject: [PATCH 37/71] =?UTF-8?q?refactor:=20url=20filter=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/articles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/apis/articles.ts b/frontend/src/apis/articles.ts
index b2f1bace5..e3f223ea0 100644
--- a/frontend/src/apis/articles.ts
+++ b/frontend/src/apis/articles.ts
@@ -19,5 +19,5 @@ export const requestPutArticleBookmark = ({ articleId, bookmark }: ArticleBookma
 };
 
 export const requestGetFilteredArticle = (course: string, bookmark: boolean) => {
-  return client.get(`/articles/filter?course=${course}&onlyBookmarked=${bookmark}`);
+  return client.get(`/articles?course=${course}&onlyBookmarked=${bookmark}`);
 };

From cd493ba09205d00866c567aadb3ce471f18d81fe Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 20 Sep 2023 16:53:41 +0900
Subject: [PATCH 38/71] =?UTF-8?q?refactor:=20select=20value=20=EC=98=81?=
 =?UTF-8?q?=EC=96=B4=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ArticleListPage/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx
index bc0ec7f49..91bd8aacf 100644
--- a/frontend/src/pages/ArticleListPage/index.tsx
+++ b/frontend/src/pages/ArticleListPage/index.tsx
@@ -14,10 +14,10 @@ import ArticleBookmarkFilter from '../../components/Article/ArticleBookmarkFIlte
 import { useGetFilteredArticleQuery } from '../../hooks/queries/article';
 
 const CATEGORY_OPTIONS = [
-  { value: '전체보기', label: '전체보기' },
-  { value: '프론트엔드', label: '프론트엔드' },
-  { value: '백엔드', label: '백엔드' },
-  { value: '안드로이드', label: '안드로이드' },
+  { value: 'all', label: '전체보기' },
+  { value: 'frontend', label: '프론트엔드' },
+  { value: 'backend', label: '백엔드' },
+  { value: 'android', label: '안드로이드' },
 ];
 
 type CategoryOptions = typeof CATEGORY_OPTIONS[number];

From 19dcb2fb23f31fdba035329abf6ddac27c1ad8d6 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 20 Sep 2023 16:58:06 +0900
Subject: [PATCH 39/71] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=ED=95=9C=20=EC=9C=A0=EC=A0=80=EC=97=90=EA=B2=8C=EB=A7=8C=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=EA=B3=BC=20=EB=B6=81=EB=A7=88=ED=81=AC=20?=
 =?UTF-8?q?=ED=95=84=ED=84=B0=20=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ArticleListPage/index.tsx | 32 ++++++++++++--------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx
index 91bd8aacf..9f6882c0e 100644
--- a/frontend/src/pages/ArticleListPage/index.tsx
+++ b/frontend/src/pages/ArticleListPage/index.tsx
@@ -8,10 +8,11 @@ import { COLOR, PATH } from '../../constants';
 import styled from '@emotion/styled';
 import { MainContentStyle } from '../../PageRouter';
 import SelectBox from '../../components/Controls/SelectBox';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { css } from '@emotion/react';
 import ArticleBookmarkFilter from '../../components/Article/ArticleBookmarkFIlter';
 import { useGetFilteredArticleQuery } from '../../hooks/queries/article';
+import { UserContext } from '../../contexts/UserProvider';
 
 const CATEGORY_OPTIONS = [
   { value: 'all', label: '전체보기' },
@@ -28,6 +29,9 @@ const ArticleListPage = () => {
   const [selectedCourse, setSelectedCourse] = useState<CategoryOptions>(CATEGORY_OPTIONS[0]);
   const [checked, setChecked] = useState(false);
 
+  const { user } = useContext(UserContext);
+  const { isLoggedIn } = user;
+
   const { data: filteredArticles = [], refetch: getFilteredArticles } = useGetFilteredArticleQuery(
     selectedCourse.value,
     checked
@@ -58,18 +62,22 @@ const ArticleListPage = () => {
               onChange={changeFilterOption}
             />
           </SelectBoxWrapper>
-          <ArticleBookmarkFilter checked={checked} handleCheckBookmark={handleCheckBookmark} />
+          {isLoggedIn && (
+            <ArticleBookmarkFilter checked={checked} handleCheckBookmark={handleCheckBookmark} />
+          )}
         </FilteringWrapper>
-        <Button
-          type="button"
-          size="X_SMALL"
-          icon={PencilIcon}
-          alt="새 아티클 쓰기 아이콘"
-          onClick={goNewArticlePage}
-          cssProps={WriteButtonStyle}
-        >
-          글쓰기
-        </Button>
+        {isLoggedIn && (
+          <Button
+            type="button"
+            size="X_SMALL"
+            icon={PencilIcon}
+            alt="새 아티클 쓰기 아이콘"
+            onClick={goNewArticlePage}
+            cssProps={WriteButtonStyle}
+          >
+            글쓰기
+          </Button>
+        )}
       </Container>
       <ArticleList articles={filteredArticles} />
     </div>

From b1a13d1270aeb2d90bfaffa6a46b2b670739a304 Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Wed, 20 Sep 2023 17:41:17 +0900
Subject: [PATCH 40/71] =?UTF-8?q?refactor:=20=EC=95=84=ED=8B=B0=ED=81=B4?=
 =?UTF-8?q?=20=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20respon?=
 =?UTF-8?q?se=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/application/ArticleService.java     | 15 ++++-----------
 .../article/domain/ArticleFilterType.java       | 17 +++++++++++++++++
 .../prolog/article/ui/ArticleController.java    | 16 +++++-----------
 .../prolog/article/ui/ArticleResponse.java      |  8 +++++---
 .../prolog/common/WebConverterConfig.java       |  6 +++---
 .../article/application/ArticleServiceTest.java |  6 +++---
 6 files changed, 37 insertions(+), 31 deletions(-)
 create mode 100644 backend/src/main/java/wooteco/prolog/article/domain/ArticleFilterType.java

diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
index 3f7ce7cfe..55ec503ce 100644
--- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
+++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
@@ -4,6 +4,7 @@
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import wooteco.prolog.article.domain.Article;
+import wooteco.prolog.article.domain.ArticleFilterType;
 import wooteco.prolog.article.domain.repository.ArticleRepository;
 import wooteco.prolog.article.ui.ArticleRequest;
 import wooteco.prolog.article.ui.ArticleResponse;
@@ -12,7 +13,6 @@
 import wooteco.prolog.login.ui.LoginMember;
 import wooteco.prolog.member.application.MemberService;
 import wooteco.prolog.member.domain.Member;
-import wooteco.prolog.member.domain.MemberGroupType;
 
 import java.util.List;
 
@@ -38,13 +38,6 @@ public Long create(final ArticleRequest articleRequest, final LoginMember loginM
         return articleRepository.save(article).getId();
     }
 
-    public List<ArticleResponse> getAll() {
-        return articleRepository.findAllByOrderByCreatedAtDesc()
-            .stream()
-            .map(ArticleResponse::from)
-            .collect(toList());
-    }
-
     @Transactional
     public void update(final Long id, final ArticleRequest articleRequest,
                        final LoginMember loginMember) {
@@ -82,15 +75,15 @@ public void bookmarkArticle(final Long id, final LoginMember loginMember,
         }
     }
 
-    public List<ArticleResponse> filter(final LoginMember member, final MemberGroupType course, final boolean onlyBookmarked) {
+    public List<ArticleResponse> getFilteredArticles(final LoginMember member, final ArticleFilterType course, final boolean onlyBookmarked) {
         if (member.isMember() && onlyBookmarked) {
             return articleRepository.findArticlesByCourseAndMember(course.getGroupName(), member.getId()).stream()
-                .map(ArticleResponse::from)
+                .map(article -> ArticleResponse.of(article,member.getId()))
                 .collect(toList());
         }
 
         return articleRepository.findArticlesByCourse(course.getGroupName()).stream()
-            .map(ArticleResponse::from)
+            .map(article -> ArticleResponse.of(article,member.getId()))
             .collect(toList());
     }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleFilterType.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleFilterType.java
new file mode 100644
index 000000000..8eddb65f6
--- /dev/null
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleFilterType.java
@@ -0,0 +1,17 @@
+package wooteco.prolog.article.domain;
+
+import lombok.Getter;
+
+@Getter
+public enum ArticleFilterType {
+    ALL(""),
+    ANDROID("안드로이드"),
+    BACKEND("백엔드"),
+    FRONTEND("프론트엔드");
+
+    private final String groupName;
+
+    ArticleFilterType(String groupName) {
+        this.groupName = groupName;
+    }
+}
diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
index 8c5fa5e26..2ac381fd9 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
@@ -12,9 +12,9 @@
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 import wooteco.prolog.article.application.ArticleService;
+import wooteco.prolog.article.domain.ArticleFilterType;
 import wooteco.prolog.login.domain.AuthMemberPrincipal;
 import wooteco.prolog.login.ui.LoginMember;
-import wooteco.prolog.member.domain.MemberGroupType;
 
 import java.net.URI;
 import java.util.List;
@@ -33,12 +33,6 @@ public ResponseEntity<Void> createArticles(@RequestBody final ArticleRequest art
         return ResponseEntity.created(URI.create("/articles/" + id)).build();
     }
 
-    @GetMapping
-    public ResponseEntity<List<ArticleResponse>> getArticles() {
-        final List<ArticleResponse> allArticles = articleService.getAll();
-        return ResponseEntity.ok(allArticles);
-    }
-
     @PutMapping("/{id}")
     public ResponseEntity<Void> updateArticle(@RequestBody final ArticleRequest articleRequest,
                                               @AuthMemberPrincipal final LoginMember member,
@@ -62,11 +56,11 @@ public ResponseEntity<Void> bookmarkArticle(@PathVariable final Long id,
         return ResponseEntity.ok().build();
     }
 
-    @GetMapping("/filter")
-    public ResponseEntity<List<ArticleResponse>> filterArticles(@AuthMemberPrincipal final LoginMember member,
-                                                                @RequestParam("course") final MemberGroupType course,
+    @GetMapping
+    public ResponseEntity<List<ArticleResponse>> getFilteredArticles(@AuthMemberPrincipal final LoginMember member,
+                                                                @RequestParam("course") final ArticleFilterType course,
                                                                 @RequestParam("onlyBookmarked") boolean onlyBookmarked) {
-        final List<ArticleResponse> articleResponses = articleService.filter(member, course, onlyBookmarked);
+        final List<ArticleResponse> articleResponses = articleService.getFilteredArticles(member, course, onlyBookmarked);
 
         return ResponseEntity.ok(articleResponses);
     }
diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
index 6d79c7943..19d398ca5 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
@@ -16,20 +16,22 @@ public class ArticleResponse {
     private final String title;
     private final String url;
     private final String imageUrl;
+    private final boolean isBookmarked;
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm")
     private final LocalDateTime createdAt;
 
     private ArticleResponse() {
-        this(null, null, null, null, null, null);
+        this(null, null, null, null, null, false, null);
     }
 
-    public static ArticleResponse from(final Article article) {
+    public static ArticleResponse of(final Article article, final Long memberId) {
         final Long id = article.getId();
         final String nickName = article.getMember().getNickname();
         final String title = article.getTitle().getTitle();
         final String url = article.getUrl().getUrl();
         final String imageUrl = article.getImageUrl().getUrl();
+        final boolean isBookmarked = article.getArticleBookmarks().containBookmark(memberId);
         final LocalDateTime createdAt = article.getCreatedAt();
-        return new ArticleResponse(id, nickName, title, url, imageUrl, createdAt);
+        return new ArticleResponse(id, nickName, title, url, imageUrl, isBookmarked, createdAt);
     }
 }
diff --git a/backend/src/main/java/wooteco/prolog/common/WebConverterConfig.java b/backend/src/main/java/wooteco/prolog/common/WebConverterConfig.java
index d7d157281..c0277be27 100644
--- a/backend/src/main/java/wooteco/prolog/common/WebConverterConfig.java
+++ b/backend/src/main/java/wooteco/prolog/common/WebConverterConfig.java
@@ -3,7 +3,7 @@
 import org.springframework.context.annotation.Configuration;
 import org.springframework.format.FormatterRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
-import wooteco.prolog.member.domain.MemberGroupType;
+import wooteco.prolog.article.domain.ArticleFilterType;
 
 import java.time.LocalDate;
 import java.time.Month;
@@ -21,8 +21,8 @@ public void addFormatters(FormatterRegistry registry) {
             source -> LocalDate.parse(source, DateTimeFormatter.BASIC_ISO_DATE)
         );
 
-        registry.addConverter(String.class, MemberGroupType.class,
-            source -> MemberGroupType.valueOf(source.toUpperCase())
+        registry.addConverter(String.class, ArticleFilterType.class,
+            source -> ArticleFilterType.valueOf(source.toUpperCase())
         );
     }
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
index 00b94cb45..1d5c4a366 100644
--- a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
@@ -10,6 +10,7 @@
 import org.mockito.junit.jupiter.MockitoExtension;
 import wooteco.prolog.article.domain.Article;
 import wooteco.prolog.article.domain.ArticleBookmarks;
+import wooteco.prolog.article.domain.ArticleFilterType;
 import wooteco.prolog.article.domain.ImageUrl;
 import wooteco.prolog.article.domain.Title;
 import wooteco.prolog.article.domain.Url;
@@ -20,7 +21,6 @@
 import wooteco.prolog.login.ui.LoginMember;
 import wooteco.prolog.member.application.MemberService;
 import wooteco.prolog.member.domain.Member;
-import wooteco.prolog.member.domain.MemberGroupType;
 import wooteco.prolog.member.domain.Role;
 
 import java.util.Arrays;
@@ -251,7 +251,7 @@ void filter() {
         when(articleRepository.findArticlesByCourse(any())).thenReturn(Arrays.asList(article));
 
         //when
-        final List<ArticleResponse> articleResponses = articleService.filter(unLoginMember, MemberGroupType.BACKEND, false);
+        final List<ArticleResponse> articleResponses = articleService.getFilteredArticles(unLoginMember, ArticleFilterType.BACKEND, false);
 
         //then
         verify(articleRepository).findArticlesByCourse(any());
@@ -269,7 +269,7 @@ void filter_isBookmarked() {
         when(articleRepository.findArticlesByCourseAndMember(any(), any())).thenReturn(Arrays.asList(article));
 
         //when
-        final List<ArticleResponse> articleResponses = articleService.filter(loginMember, MemberGroupType.BACKEND, true);
+        final List<ArticleResponse> articleResponses = articleService.getFilteredArticles(loginMember, ArticleFilterType.BACKEND, true);
 
         //then
         verify(articleRepository).findArticlesByCourseAndMember(any(), any());

From d9501c1c4b430581cfc514aea0552043f449523b Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 20 Sep 2023 17:43:19 +0900
Subject: [PATCH 41/71] =?UTF-8?q?refactor:=20msw=20filtering=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/db/articles-android.json  | 29 +++++++++++
 frontend/src/mocks/db/articles-backend.json  | 29 +++++++++++
 frontend/src/mocks/db/articles-frontend.json | 29 +++++++++++
 frontend/src/mocks/db/articles.json          | 51 ++++++++++++++++++--
 frontend/src/mocks/handlers/articles.ts      | 32 ++++++++----
 5 files changed, 158 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/mocks/db/articles-android.json
 create mode 100644 frontend/src/mocks/db/articles-backend.json
 create mode 100644 frontend/src/mocks/db/articles-frontend.json

diff --git a/frontend/src/mocks/db/articles-android.json b/frontend/src/mocks/db/articles-android.json
new file mode 100644
index 000000000..865954a4c
--- /dev/null
+++ b/frontend/src/mocks/db/articles-android.json
@@ -0,0 +1,29 @@
+[
+  {
+    "id": 7,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "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"
+  },
+  {
+    "id": 8,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "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"
+  },
+  {
+    "id": 9,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "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
new file mode 100644
index 000000000..f3fdaae4c
--- /dev/null
+++ b/frontend/src/mocks/db/articles-backend.json
@@ -0,0 +1,29 @@
+[
+  {
+    "id": 4,
+    "userName": "패트릭",
+    "title": "CORS",
+    "isBookMarked": false,
+    "url": "https://pgccoding.tistory.com/66",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 5,
+    "userName": "패트릭",
+    "title": "CORS",
+    "isBookMarked": true,
+    "url": "https://pgccoding.tistory.com/66",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 6,
+    "userName": "패트릭",
+    "title": "CORS",
+    "isBookMarked": true,
+    "url": "https://pgccoding.tistory.com/66",
+    "createdAt": "2023-07-24 18:18",
+    "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-frontend.json b/frontend/src/mocks/db/articles-frontend.json
new file mode 100644
index 000000000..d7da0c5e8
--- /dev/null
+++ b/frontend/src/mocks/db/articles-frontend.json
@@ -0,0 +1,29 @@
+[
+  {
+    "id": 1,
+    "userName": "해온",
+    "title": "Axios",
+    "isBookMarked": true,
+    "url": "https://hae-on.tistory.com/104",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 2,
+    "userName": "해온",
+    "title": "Axios",
+    "isBookMarked": true,
+    "url": "https://hae-on.tistory.com/104",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 3,
+    "userName": "해온",
+    "title": "Axios",
+    "isBookMarked": true,
+    "url": "https://hae-on.tistory.com/104",
+    "createdAt": "2023-07-24 18:18",
+    "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.json b/frontend/src/mocks/db/articles.json
index 182d5e558..35b46c204 100644
--- a/frontend/src/mocks/db/articles.json
+++ b/frontend/src/mocks/db/articles.json
@@ -10,6 +10,24 @@
   },
   {
     "id": 2,
+    "userName": "해온",
+    "title": "Axios",
+    "isBookMarked": true,
+    "url": "https://hae-on.tistory.com/104",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 3,
+    "userName": "해온",
+    "title": "Axios",
+    "isBookMarked": true,
+    "url": "https://hae-on.tistory.com/104",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 4,
     "userName": "패트릭",
     "title": "CORS",
     "isBookMarked": false,
@@ -18,7 +36,7 @@
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   },
   {
-    "id": 3,
+    "id": 5,
     "userName": "패트릭",
     "title": "CORS",
     "isBookMarked": true,
@@ -27,12 +45,39 @@
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   },
   {
-    "id": 4,
+    "id": 6,
     "userName": "패트릭",
     "title": "CORS",
-    "isBookMarked": false,
+    "isBookMarked": true,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 7,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "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"
+  },
+  {
+    "id": 8,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "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"
+  },
+  {
+    "id": 9,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "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/handlers/articles.ts b/frontend/src/mocks/handlers/articles.ts
index 2302996cc..6571fa4fa 100644
--- a/frontend/src/mocks/handlers/articles.ts
+++ b/frontend/src/mocks/handlers/articles.ts
@@ -1,15 +1,18 @@
 import { rest } from 'msw';
 import { BASE_URL } from '../../configs/environment';
 import articles from '../db/articles.json';
+import articlesFrontend from '../db/articles-frontend.json';
+import articlesBackend from '../db/articles-backend.json';
+import articlesAndroid from '../db/articles-android.json';
 import metaOg from '../db/metaog.json';
 import { ArticleType } from '../../models/Article';
 
 const articleUrl = 'https://think0wise.tistory.com/107';
 
 export const articlesHandler = [
-  rest.get(`${BASE_URL}/articles`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(articles));
-  }),
+  // rest.get(`${BASE_URL}/articles`, (req, res, ctx) => {
+  //   return res(ctx.status(200), ctx.json(articles));
+  // }),
 
   rest.get(`${BASE_URL}/meta-og?url=${articleUrl}`, async (req, res, ctx) => {
     const data = metaOg;
@@ -37,13 +40,24 @@ export const articlesHandler = [
     return res(ctx.status(200));
   }),
 
-  rest.get(`${BASE_URL}/articles/`, (req, res, ctx) => {
-    const course = req.url.searchParams.get('course');
-    const onlyBookmarked = req.url.searchParams.get('onlyBookmarked');
+  rest.get(`${BASE_URL}/articles`, (req, res, ctx) => {
+    const course = req.url.searchParams.get('course') ?? 'all';
+    const onlyBookmarked = req.url.searchParams.get('onlyBookmarked') as string;
+
+    const filteredCourse = (course: string) => {
+      if (course === 'all') return articles;
+      if (course === 'frontend') return articlesFrontend;
+      if (course === 'backend') return articlesBackend;
+      if (course === 'android') return articlesAndroid;
+    };
+
+    if (onlyBookmarked === 'false') {
+      return res(ctx.status(200), ctx.json(filteredCourse(course)));
+    }
 
-    const filteredArticle = articles.filter(
-      (article) => onlyBookmarked === String(article.isBookMarked)
-    );
+    const filteredArticle = filteredCourse(course)?.filter((article) => {
+      return onlyBookmarked === String(article.isBookMarked) ? true : false;
+    });
 
     return res(ctx.status(200), ctx.json(filteredArticle));
   }),

From 3e563aa991d471a973a01bc2f6be080cd37d862e Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Mon, 25 Sep 2023 15:43:45 +0900
Subject: [PATCH 42/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4?=
 =?UTF-8?q?=EC=9D=84=20=EC=A1=B0=ED=9A=8C=ED=95=A0=20=EB=95=8C=20like?=
 =?UTF-8?q?=EB=A5=BC=20fetch=EB=A1=9C=20=EC=A1=B0=ED=9A=8C=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/domain/repository/ArticleRepository.java  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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
index df5efe865..0a6780b1b 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
@@ -12,5 +12,8 @@ public interface ArticleRepository extends JpaRepository<Article, Long> {
     List<Article> findAllByOrderByCreatedAtDesc();
 
     @Query("select a from Article a join fetch a.articleBookmarks where a.id = :id")
-    Optional<Article> findFetchById(@Param("id") final Long id);
+    Optional<Article> findFetchBookmarkById(@Param("id") final Long id);
+
+    @Query("select a from Article a join fetch a.articleLikes where a.id = :id")
+    Optional<Article> findFetchLikeById(@Param("id") final Long id);
 }

From 41d5a504c6c3e4f974a2e23f0b65805115d8997b Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Mon, 25 Sep 2023 15:44:20 +0900
Subject: [PATCH 43/71] =?UTF-8?q?feat:=20flyway=20schema=20foreign=20key?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../db/migration/prod/V6__create_table_article_bookmark.sql   | 4 +++-
 .../db/migration/prod/V7__create_table_article_like.sql       | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/backend/src/main/resources/db/migration/prod/V6__create_table_article_bookmark.sql b/backend/src/main/resources/db/migration/prod/V6__create_table_article_bookmark.sql
index fc5b4f786..20062f012 100644
--- a/backend/src/main/resources/db/migration/prod/V6__create_table_article_bookmark.sql
+++ b/backend/src/main/resources/db/migration/prod/V6__create_table_article_bookmark.sql
@@ -2,7 +2,9 @@ create table if not exists prolog.article_bookmark
 (
     id         bigint auto_increment primary key,
     article_id bigint not null,
-    member_id  bigint not null
+    member_id  bigint not null,
+    foreign key (member_id) references prolog.member (id),
+    foreign key (article_id) references prolog.article (id)
 ) ENGINE = InnoDB
   DEFAULT CHARSET = utf8mb4
   COLLATE = utf8mb4_0900_ai_ci;
diff --git a/backend/src/main/resources/db/migration/prod/V7__create_table_article_like.sql b/backend/src/main/resources/db/migration/prod/V7__create_table_article_like.sql
index 4fbe72b0e..59700e066 100644
--- a/backend/src/main/resources/db/migration/prod/V7__create_table_article_like.sql
+++ b/backend/src/main/resources/db/migration/prod/V7__create_table_article_like.sql
@@ -2,7 +2,9 @@ create table if not exists prolog.article_like
 (
     id         bigint auto_increment primary key,
     article_id bigint not null,
-    member_id  bigint not null
+    member_id  bigint not null,
+    foreign key (member_id) references prolog.member (id),
+    foreign key (article_id) references prolog.article (id)
 ) ENGINE = InnoDB
   DEFAULT CHARSET = utf8mb4
   COLLATE = utf8mb4_0900_ai_ci;

From 0eab097d05a3e19a7d0df75483b780407e334f52 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Mon, 25 Sep 2023 15:44:58 +0900
Subject: [PATCH 44/71] =?UTF-8?q?refactor:=20=ED=94=84=EB=A1=A0=ED=8A=B8?=
 =?UTF-8?q?=EC=99=80=20=EB=85=BC=EC=9D=98=20=ED=9B=84=20API=20=EB=AA=85?=
 =?UTF-8?q?=EC=84=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/wooteco/prolog/docu/ArticleDocumentation.java        | 2 +-
 .../java/wooteco/prolog/article/ui/ArticleController.java     | 4 ++--
 .../java/wooteco/prolog/article/ui/ArticleLikesRequest.java   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
index 43832e60e..2bab040a4 100644
--- a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
+++ b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
@@ -55,6 +55,6 @@ public class ArticleDocumentation extends NewDocumentation {
         response.expect(status().isOk());
 
         //docs
-        response.apply(document("article/likes"));
+        response.apply(document("article/like"));
     }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
index 9bf7d2171..661fc312f 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
@@ -59,11 +59,11 @@ public ResponseEntity<Void> bookmarkArticle(@PathVariable final Long id,
         return ResponseEntity.ok().build();
     }
 
-    @PutMapping("/{id}/likes")
+    @PutMapping("/{id}/like")
     public ResponseEntity<Void> likeArticle(@PathVariable final Long id,
                                             @AuthMemberPrincipal final LoginMember member,
                                             @RequestBody final ArticleLikesRequest request) {
-        articleService.likeArticle(id, member, request.getLikes());
+        articleService.likeArticle(id, member, request.getLike());
         return ResponseEntity.ok().build();
     }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleLikesRequest.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleLikesRequest.java
index e1e4a9b89..9dce50790 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleLikesRequest.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleLikesRequest.java
@@ -7,7 +7,7 @@
 @RequiredArgsConstructor
 public class ArticleLikesRequest {
 
-    private final Boolean likes;
+    private final Boolean like;
 
     public ArticleLikesRequest() {
         this(null);

From fc90474e140993d4d189d7a09099e60c047edcf7 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Mon, 25 Sep 2023 15:56:00 +0900
Subject: [PATCH 45/71] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 frontend/src/apis/articles.ts                 |  7 +++-
 .../src/components/Article/Article.style.tsx  |  3 +-
 frontend/src/components/Article/Article.tsx   | 36 ++++++++++++++++---
 frontend/src/components/Reaction/Like.tsx     |  4 +--
 frontend/src/hooks/queries/article.ts         | 10 +++++-
 frontend/src/mocks/db/articles-android.json   |  3 ++
 frontend/src/mocks/db/articles-backend.json   |  3 ++
 frontend/src/mocks/db/articles-frontend.json  |  3 ++
 frontend/src/mocks/db/articles.json           |  9 +++++
 frontend/src/mocks/handlers/articles.ts       |  9 ++---
 frontend/src/models/Article.ts                |  6 ++++
 11 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/frontend/src/apis/articles.ts b/frontend/src/apis/articles.ts
index e3f223ea0..720fc2fbc 100644
--- a/frontend/src/apis/articles.ts
+++ b/frontend/src/apis/articles.ts
@@ -1,6 +1,7 @@
 import { client } from '.';
 import {
   ArticleBookmarkPutRequest,
+  ArticleLikePutRequest,
   ArticleRequest,
   MetaOgRequest,
   MetaOgResponse,
@@ -15,9 +16,13 @@ export const requestGetMetaOg = ({ url }: MetaOgRequest) => {
 };
 
 export const requestPutArticleBookmark = ({ articleId, bookmark }: ArticleBookmarkPutRequest) => {
-  return client.put(`/articles/${articleId}/bookmark`, { checked: bookmark });
+  return client.put(`/articles/${articleId}/bookmark`, { bookmark });
 };
 
 export const requestGetFilteredArticle = (course: string, bookmark: boolean) => {
   return client.get(`/articles?course=${course}&onlyBookmarked=${bookmark}`);
 };
+
+export const requestPutArticleLike = ({ articleId, like }: ArticleLikePutRequest) => {
+  return client.put(`/articles/${articleId}/like`, { like });
+};
diff --git a/frontend/src/components/Article/Article.style.tsx b/frontend/src/components/Article/Article.style.tsx
index 13980b9b4..e4a68ba44 100644
--- a/frontend/src/components/Article/Article.style.tsx
+++ b/frontend/src/components/Article/Article.style.tsx
@@ -72,10 +72,11 @@ export const Title = styled.p`
   -webkit-box-orient: vertical;
 `;
 
-export const BookmarkWrapper = styled.div`
+export const ButtonContainer = styled.div`
   width: 100%;
   display: flex;
   justify-content: flex-end;
+  gap: 10px;
 `;
 
 export const ArticleBookmarkButtonStyle = css`
diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
index 0d55d5f71..5632e91fa 100644
--- a/frontend/src/components/Article/Article.tsx
+++ b/frontend/src/components/Article/Article.tsx
@@ -2,13 +2,29 @@ import * as Styled from './Article.style';
 import type { ArticleType } from '../../models/Article';
 import Scrap from '../Reaction/Scrap';
 import { useRef, useState } from 'react';
-import { usePutArticleBookmarkMutation } from '../../hooks/queries/article';
+import {
+  usePutArticleBookmarkMutation,
+  usePutArticleLikeMutation,
+} from '../../hooks/queries/article';
 import debounce from '../../utils/debounce';
+import Like from '../Reaction/Like';
 
-const Article = ({ id, title, userName, url, createdAt, imageUrl, isBookMarked }: ArticleType) => {
+const Article = ({
+  id,
+  title,
+  userName,
+  url,
+  createdAt,
+  imageUrl,
+  isBookMarked,
+  isLiked,
+}: ArticleType) => {
   const bookmarkRef = useRef(false);
+  const likeRef = useRef(false);
   const [bookmark, setBookmark] = useState(isBookMarked);
+  const [like, setLike] = useState(isLiked);
   const { mutate: putBookmark } = usePutArticleBookmarkMutation();
+  const { mutate: putLike } = usePutArticleLikeMutation();
 
   const toggleBookmark: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
@@ -21,6 +37,17 @@ const Article = ({ id, title, userName, url, createdAt, imageUrl, isBookMarked }
     }, 300);
   };
 
+  const toggleLike: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+
+    likeRef.current = !likeRef.current;
+    setLike((prev) => !prev);
+
+    debounce(() => {
+      putLike({ articleId: id, like: likeRef.current });
+    }, 300);
+  };
+
   return (
     <Styled.Container>
       <Styled.Anchor href={url} target="_blank" rel="noopener noreferrer">
@@ -33,13 +60,14 @@ const Article = ({ id, title, userName, url, createdAt, imageUrl, isBookMarked }
             <Styled.CreatedAt>{createdAt.split(' ')[0]}</Styled.CreatedAt>
           </Styled.ArticleInfoWrapper>
           <Styled.Title>{title}</Styled.Title>
-          <Styled.BookmarkWrapper>
+          <Styled.ButtonContainer>
+            <Like liked={like} onClick={toggleLike} />
             <Scrap
               scrap={bookmark}
               onClick={toggleBookmark}
               cssProps={Styled.ArticleBookmarkButtonStyle}
             />
-          </Styled.BookmarkWrapper>
+          </Styled.ButtonContainer>
         </Styled.ArticleInfoContainer>
       </Styled.Anchor>
     </Styled.Container>
diff --git a/frontend/src/components/Reaction/Like.tsx b/frontend/src/components/Reaction/Like.tsx
index 555bbbd4f..8674733eb 100644
--- a/frontend/src/components/Reaction/Like.tsx
+++ b/frontend/src/components/Reaction/Like.tsx
@@ -7,7 +7,7 @@ import { LikeIconStyle } from './Like.styles';
 
 interface Props {
   liked: boolean;
-  likesCount: number;
+  likesCount?: number;
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
@@ -24,7 +24,7 @@ const Like = ({ liked, likesCount, onClick }: Props) => {
       cssProps={LikeIconStyle}
       onClick={onClick}
     >
-      {likesCount ?? 0}
+      {likesCount}
     </Button>
   );
 };
diff --git a/frontend/src/hooks/queries/article.ts b/frontend/src/hooks/queries/article.ts
index f62cd49f8..59caec13a 100644
--- a/frontend/src/hooks/queries/article.ts
+++ b/frontend/src/hooks/queries/article.ts
@@ -3,8 +3,9 @@ import {
   requestGetFilteredArticle,
   requestPostArticles,
   requestPutArticleBookmark,
+  requestPutArticleLike,
 } from '../../apis/articles';
-import { ArticleType, CourseFilter } from '../../models/Article';
+import { ArticleType } from '../../models/Article';
 import { ERROR_MESSAGE } from '../../constants';
 import { SUCCESS_MESSAGE } from '../../constants/message';
 
@@ -40,3 +41,10 @@ export const usePutArticleBookmarkMutation = () => {
     onError: () => {},
   });
 };
+
+export const usePutArticleLikeMutation = () => {
+  return useMutation(requestPutArticleLike, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+};
diff --git a/frontend/src/mocks/db/articles-android.json b/frontend/src/mocks/db/articles-android.json
index 865954a4c..0405b7a1e 100644
--- a/frontend/src/mocks/db/articles-android.json
+++ b/frontend/src/mocks/db/articles-android.json
@@ -5,6 +5,7 @@
     "title": "직렬화, 역직렬화는 무엇일까?",
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
+    "isLiked": 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"
   },
@@ -14,6 +15,7 @@
     "title": "직렬화, 역직렬화는 무엇일까?",
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
+    "isLiked": false,
     "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"
   },
@@ -23,6 +25,7 @@
     "title": "직렬화, 역직렬화는 무엇일까?",
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
+    "isLiked": 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
index f3fdaae4c..9f5051d5a 100644
--- a/frontend/src/mocks/db/articles-backend.json
+++ b/frontend/src/mocks/db/articles-backend.json
@@ -4,6 +4,7 @@
     "userName": "패트릭",
     "title": "CORS",
     "isBookMarked": false,
+    "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -13,6 +14,7 @@
     "userName": "패트릭",
     "title": "CORS",
     "isBookMarked": true,
+    "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -22,6 +24,7 @@
     "userName": "패트릭",
     "title": "CORS",
     "isBookMarked": true,
+    "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "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-frontend.json b/frontend/src/mocks/db/articles-frontend.json
index d7da0c5e8..bf065cdbf 100644
--- a/frontend/src/mocks/db/articles-frontend.json
+++ b/frontend/src/mocks/db/articles-frontend.json
@@ -4,6 +4,7 @@
     "userName": "해온",
     "title": "Axios",
     "isBookMarked": true,
+    "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -13,6 +14,7 @@
     "userName": "해온",
     "title": "Axios",
     "isBookMarked": true,
+    "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -22,6 +24,7 @@
     "userName": "해온",
     "title": "Axios",
     "isBookMarked": true,
+    "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
     "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.json b/frontend/src/mocks/db/articles.json
index 35b46c204..246762fb4 100644
--- a/frontend/src/mocks/db/articles.json
+++ b/frontend/src/mocks/db/articles.json
@@ -4,6 +4,7 @@
     "userName": "해온",
     "title": "Axios",
     "isBookMarked": true,
+    "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -13,6 +14,7 @@
     "userName": "해온",
     "title": "Axios",
     "isBookMarked": true,
+    "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -22,6 +24,7 @@
     "userName": "해온",
     "title": "Axios",
     "isBookMarked": true,
+    "isLiked": false,
     "url": "https://hae-on.tistory.com/104",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -31,6 +34,7 @@
     "userName": "패트릭",
     "title": "CORS",
     "isBookMarked": false,
+    "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -40,6 +44,7 @@
     "userName": "패트릭",
     "title": "CORS",
     "isBookMarked": true,
+    "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -49,6 +54,7 @@
     "userName": "패트릭",
     "title": "CORS",
     "isBookMarked": true,
+    "isLiked": false,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
@@ -60,6 +66,7 @@
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
     "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"
   },
   {
@@ -69,6 +76,7 @@
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
     "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"
   },
   {
@@ -78,6 +86,7 @@
     "url": "https://think0wise.tistory.com/107",
     "createdAt": "2023-07-08 16:48",
     "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
index 6571fa4fa..489b47c22 100644
--- a/frontend/src/mocks/handlers/articles.ts
+++ b/frontend/src/mocks/handlers/articles.ts
@@ -10,10 +10,6 @@ import { ArticleType } from '../../models/Article';
 const articleUrl = 'https://think0wise.tistory.com/107';
 
 export const articlesHandler = [
-  // rest.get(`${BASE_URL}/articles`, (req, res, ctx) => {
-  //   return res(ctx.status(200), ctx.json(articles));
-  // }),
-
   rest.get(`${BASE_URL}/meta-og?url=${articleUrl}`, async (req, res, ctx) => {
     const data = metaOg;
 
@@ -28,6 +24,7 @@ export const articlesHandler = [
       url: 'https://think0wise.tistory.com/107',
       createdAt: '2023-07-08 16:48',
       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',
     };
@@ -40,6 +37,10 @@ export const articlesHandler = [
     return res(ctx.status(200));
   }),
 
+  rest.put(`${BASE_URL}/articles/:articleId/like`, (req, res, ctx) => {
+    return res(ctx.status(200));
+  }),
+
   rest.get(`${BASE_URL}/articles`, (req, res, ctx) => {
     const course = req.url.searchParams.get('course') ?? 'all';
     const onlyBookmarked = req.url.searchParams.get('onlyBookmarked') as string;
diff --git a/frontend/src/models/Article.ts b/frontend/src/models/Article.ts
index dc7540160..67b99fba9 100644
--- a/frontend/src/models/Article.ts
+++ b/frontend/src/models/Article.ts
@@ -9,6 +9,7 @@ export interface ArticleType {
   userName: string;
   title: string;
   isBookMarked: boolean;
+  isLiked: boolean;
   url: string;
   createdAt: string;
   imageUrl: string;
@@ -28,6 +29,11 @@ export interface ArticleBookmarkPutRequest {
   bookmark: boolean;
 }
 
+export interface ArticleLikePutRequest {
+  articleId: number;
+  like: boolean;
+}
+
 export type Course = '프론트엔드' | '백엔드' | '안드로이드';
 
 export type CourseFilter = Course | '전체보기';

From 496eeec28ee9b92f9ed4aa9d262b4edfc5e30e8e Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Wed, 27 Sep 2023 11:00:47 +0900
Subject: [PATCH 46/71] =?UTF-8?q?test:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20api?=
 =?UTF-8?q?=20=EB=AA=85=EC=84=B8=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/wooteco/prolog/docu/ArticleDocumentation.java          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
index 2bab040a4..6aaac171b 100644
--- a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
+++ b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
@@ -48,7 +48,7 @@ public class ArticleDocumentation extends NewDocumentation {
             .header("Authorization", "Bearer " + accessToken)
             .contentType(APPLICATION_JSON)
             .body(articleLikesRequest)
-            .when().put("/articles/{article-id}/likes", 1L)
+            .when().put("/articles/{article-id}/like", 1L)
             .then().log().all();
 
         //then

From c024a7fc52f2af30345f824627cbc386dbff5ed3 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Wed, 27 Sep 2023 16:11:06 +0900
Subject: [PATCH 47/71] =?UTF-8?q?fix:=20=EC=9D=B8=EC=88=98=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/wooteco/prolog/steps/ArticleStepDefinitions.java       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java b/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
index 4b53ca4c3..2691c3d26 100644
--- a/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
+++ b/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
@@ -123,7 +123,7 @@ public class ArticleStepDefinitions extends AcceptanceSteps {
         //final String articleUrl = context.response.header("Location");
         final ArticleBookmarkRequest request = new ArticleBookmarkRequest(true);
         context.invokeHttpPutWithToken(
-            String.format("/articles/%d/likes", articleId),
+            String.format("/articles/%d/like", articleId),
             request
         );
     }

From 2811fc42ef8436f74ad6405b54160fd7ad587fc2 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 27 Sep 2023 16:28:15 +0900
Subject: [PATCH 48/71] =?UTF-8?q?refactor:=20authorization=20null=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/index.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/apis/index.ts b/frontend/src/apis/index.ts
index b02cb209f..d7908c2b8 100644
--- a/frontend/src/apis/index.ts
+++ b/frontend/src/apis/index.ts
@@ -2,9 +2,13 @@ import axios from 'axios';
 import { BASE_URL } from '../configs/environment';
 import LOCAL_STORAGE_KEY from '../constants/localStorage';
 
+const accessToken = localStorage.getItem(LOCAL_STORAGE_KEY.ACCESS_TOKEN);
+
+const headers = {
+  Authorization: `Bearer ${accessToken}`,
+};
+
 export const client = axios.create({
   baseURL: BASE_URL,
-  headers: {
-    Authorization: `Bearer ${localStorage.getItem(LOCAL_STORAGE_KEY.ACCESS_TOKEN)}`,
-  },
+  headers: accessToken ? headers : {},
 });

From 123c9bfde773dad1f68974103309d5983a284424 Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Wed, 4 Oct 2023 17:32:18 +0900
Subject: [PATCH 49/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=EC=88=98=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/application/ArticleService.java   |  7 +++++
 .../prolog/article/domain/Article.java        | 29 ++++++++++++-------
 .../prolog/article/domain/ViewCount.java      | 23 +++++++++++++++
 .../prolog/article/ui/ArticleController.java  |  6 ++++
 .../prod/V8__alter_table_article.sql          |  2 ++
 5 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 backend/src/main/java/wooteco/prolog/article/domain/ViewCount.java
 create mode 100644 backend/src/main/resources/db/migration/prod/V8__alter_table_article.sql

diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
index abefe800c..afcc1aaca 100644
--- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
+++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
@@ -90,4 +90,11 @@ public List<ArticleResponse> getFilteredArticles(final LoginMember member,
             .map(article -> ArticleResponse.of(article, member.getId()))
             .collect(toList());
     }
+
+    @Transactional
+    public void updateViewCount(final Long id) {
+        final Article article = articleRepository.findById(id)
+                .orElseThrow(() -> new BadRequestException(ARTICLE_NOT_FOUND_EXCEPTION));
+        article.updateViewCount();
+    }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/Article.java b/backend/src/main/java/wooteco/prolog/article/domain/Article.java
index be1c9ac0d..36cca7134 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/Article.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/Article.java
@@ -1,8 +1,14 @@
 package wooteco.prolog.article.domain;
 
-import static java.lang.Boolean.TRUE;
+import lombok.AccessLevel;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.jpa.domain.support.AuditingEntityListener;
+import wooteco.prolog.common.exception.BadRequestCode;
+import wooteco.prolog.common.exception.BadRequestException;
+import wooteco.prolog.member.domain.Member;
 
-import java.time.LocalDateTime;
 import javax.persistence.Embedded;
 import javax.persistence.Entity;
 import javax.persistence.EntityListeners;
@@ -12,14 +18,9 @@
 import javax.persistence.Id;
 import javax.persistence.JoinColumn;
 import javax.persistence.ManyToOne;
-import lombok.AccessLevel;
-import lombok.Getter;
-import lombok.NoArgsConstructor;
-import org.springframework.data.annotation.CreatedDate;
-import org.springframework.data.jpa.domain.support.AuditingEntityListener;
-import wooteco.prolog.common.exception.BadRequestCode;
-import wooteco.prolog.common.exception.BadRequestException;
-import wooteco.prolog.member.domain.Member;
+import java.time.LocalDateTime;
+
+import static java.lang.Boolean.TRUE;
 
 @Entity
 @Getter
@@ -53,6 +54,9 @@ public class Article {
     @CreatedDate
     private LocalDateTime createdAt;
 
+    @Embedded
+    private ViewCount views;
+
     public Article(final Member member, final Title title, final Url url, final ImageUrl imageUrl) {
         this.member = member;
         this.title = title;
@@ -60,6 +64,7 @@ public Article(final Member member, final Title title, final Url url, final Imag
         this.imageUrl = imageUrl;
         this.articleBookmarks = new ArticleBookmarks();
         this.articleLikes = new ArticleLikes();
+        this.views = new ViewCount();
     }
 
     public void validateOwner(final Member member) {
@@ -106,4 +111,8 @@ private void addLike(final Member member) {
     private void removeLike(final Member member) {
         articleLikes.removeLike(member.getId());
     }
+
+    public void updateViewCount() {
+        this.views.increase();
+    }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ViewCount.java b/backend/src/main/java/wooteco/prolog/article/domain/ViewCount.java
new file mode 100644
index 000000000..9a815e2bf
--- /dev/null
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ViewCount.java
@@ -0,0 +1,23 @@
+package wooteco.prolog.article.domain;
+
+import lombok.AccessLevel;
+import lombok.EqualsAndHashCode;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.ToString;
+
+import javax.persistence.Embeddable;
+
+@Getter
+@NoArgsConstructor(access = AccessLevel.PROTECTED)
+@EqualsAndHashCode
+@ToString
+@Embeddable
+public class ViewCount {
+
+    private int views;
+
+    public void increase() {
+        this.views++;
+    }
+}
diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
index 91ade747e..0de2d2592 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleController.java
@@ -72,4 +72,10 @@ public ResponseEntity<List<ArticleResponse>> getFilteredArticles(@AuthMemberPrin
 
         return ResponseEntity.ok(articleResponses);
     }
+
+    @PostMapping("/{id}/views")
+    public ResponseEntity<Void> updateViewCount(@PathVariable final Long id) {
+        articleService.updateViewCount(id);
+        return ResponseEntity.ok().build();
+    }
 }
diff --git a/backend/src/main/resources/db/migration/prod/V8__alter_table_article.sql b/backend/src/main/resources/db/migration/prod/V8__alter_table_article.sql
new file mode 100644
index 000000000..286616e9f
--- /dev/null
+++ b/backend/src/main/resources/db/migration/prod/V8__alter_table_article.sql
@@ -0,0 +1,2 @@
+ALTER TABLE prolog.article
+    ADD COLUMN views int default 0;

From 888ba0e0e03b70c94dd8f73808f109211767110d Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Wed, 4 Oct 2023 17:32:40 +0900
Subject: [PATCH 50/71] =?UTF-8?q?test:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=EC=88=98=20=EB=8B=A8=EC=9C=84=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/application/ArticleServiceTest.java  | 16 ++++++++++++++++
 .../prolog/article/domain/ArticleTest.java       | 13 +++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
index 0512583d5..bc867ea1d 100644
--- a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
@@ -329,4 +329,20 @@ void filter_isBookmarked() {
         verify(articleRepository).findArticlesByCourseAndMember(any(), any());
         Assertions.assertThat(articleResponses.get(0).getTitle()).isEqualTo(article.getTitle().getTitle());
     }
+
+    @DisplayName("아티클 조회시 조회수가 증가한다.")
+    @Test
+    void updateViews() {
+        //given
+        final Member member = new Member(1L, "username", "nickname", CREW, 1L, "url");
+        final Article article = new Article(member, new Title("title"), new Url("url"), new ImageUrl("imageUrl"));
+        final Long articleId = 1L;
+        when(articleRepository.findById(articleId)).thenReturn(Optional.of(article));
+
+        //when
+        articleService.updateViewCount(articleId);
+
+        //then
+        Assertions.assertThat(article.getViews().getViews()).isEqualTo(1);
+    }
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
index 5f6bbedca..8c180e95b 100644
--- a/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleTest.java
@@ -178,4 +178,17 @@ void removeLike() {
                 .isFalse();
         }
     }
+
+    @DisplayName("아티클 조회시 조회수가 증가한다.")
+    @Test
+    void updateViewCount() {
+        //given
+        final Article article = new Article(member, title, url, imageUrl);
+
+        //when
+        article.updateViewCount();
+
+        //then
+        assertThat(article.getViews().getViews()).isEqualTo(1);
+    }
 }

From a84319631beff29b9cc0befd651e81345c633870 Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Wed, 4 Oct 2023 17:32:58 +0900
Subject: [PATCH 51/71] =?UTF-8?q?test:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=EC=88=98=20=EC=9D=B8=EC=88=98=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/steps/ArticleStepDefinitions.java      | 15 +++++++++++++++
 .../resources/wooteco/prolog/article.feature      |  5 +++++
 2 files changed, 20 insertions(+)

diff --git a/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java b/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
index 2691c3d26..6f4ca13b2 100644
--- a/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
+++ b/backend/src/acceptanceTest/java/wooteco/prolog/steps/ArticleStepDefinitions.java
@@ -136,4 +136,19 @@ public class ArticleStepDefinitions extends AcceptanceSteps {
         );
         //아티클 단건 조회에 좋아요 여부가 추가되면 단건 조회로 likes 여부까지 검증해보기
     }
+
+    @When("{long}번 아티클에 조회수 추가요청을 보내면")
+    public void 아티클에_조회수_추가요청을_보내면(final Long articleId) {
+        context.invokeHttpPost(
+            String.format("/articles/%d/views", articleId),""
+        );
+    }
+
+    @Then("아티클의 조회수가 증가한다")
+    public void 아티클의_조회수가_증가한다() {
+        final int statusCode = context.response.statusCode();
+        assertAll(
+            () -> assertThat(statusCode).isEqualTo(HttpStatus.OK.value())
+        );
+    }
 }
diff --git a/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature b/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
index 0c21cddc5..74cc26e49 100644
--- a/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
+++ b/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
@@ -36,3 +36,8 @@ Feature: 아티클 관련 기능
         Given 아티클이 작성되어 있고
         When 1번 아티클에 좋아요 요청을 보내면
         Then 아티클에 좋아요가 등록된다
+
+    Scenario: 아티클 조회수 추가하기
+        Given 아티클이 작성되어 있고
+        When 1번 아티클에 조회수 추가요청을 보내면
+        Then 아티클의 조회수가 증가한다

From 8b5029c042d6573fda7cc1778fe896582f0ee2e8 Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Wed, 4 Oct 2023 17:33:03 +0900
Subject: [PATCH 52/71] =?UTF-8?q?test:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=EC=88=98=20=EB=AC=B8=EC=84=9C=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/documentation/adoc/article.adoc        | 10 ++++++++++
 .../wooteco/prolog/docu/ArticleDocumentation.java  | 14 ++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/backend/src/documentation/adoc/article.adoc b/backend/src/documentation/adoc/article.adoc
index 052ed0ea2..0aabfe86b 100644
--- a/backend/src/documentation/adoc/article.adoc
+++ b/backend/src/documentation/adoc/article.adoc
@@ -20,3 +20,13 @@ include::{snippets}/article/likes/http-request.adoc[]
 ==== Response
 
 include::{snippets}/article/likes/http-response.adoc[]
+
+=== 아티클 조회수 추가
+
+==== Request
+
+include::{snippets}/article/views/http-request.adoc[]
+
+==== Response
+
+include::{snippets}/article/views/http-response.adoc[]
diff --git a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
index 6aaac171b..1237ef2ba 100644
--- a/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
+++ b/backend/src/documentation/java/wooteco/prolog/docu/ArticleDocumentation.java
@@ -57,4 +57,18 @@ public class ArticleDocumentation extends NewDocumentation {
         //docs
         response.apply(document("article/like"));
     }
+
+    @Test
+    void 아티클의_조회수를_증가시킨다() {
+        //given, when
+        final ValidatableMockMvcResponse response = given
+            .when().post("/articles/{article-id}/views", 1L)
+            .then().log().all();
+
+        //then
+        response.expect(status().isOk());
+
+        //docs
+        response.apply(document("article/views"));
+    }
 }

From 426afe0b8a21fbfa1fa89d5ea7d5cbef3e53313f Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 4 Oct 2023 18:07:08 +0900
Subject: [PATCH 53/71] =?UTF-8?q?feat:=20=EB=B9=84=ED=81=AC=EB=A3=A8=20?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=20=EC=95=84=ED=8B=B0=ED=81=B4=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EB=AA=BB=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 frontend/src/contexts/UserProvider.js        | 2 +-
 frontend/src/pages/ArticleListPage/index.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/contexts/UserProvider.js b/frontend/src/contexts/UserProvider.js
index edf55604c..84ad18af8 100644
--- a/frontend/src/contexts/UserProvider.js
+++ b/frontend/src/contexts/UserProvider.js
@@ -10,7 +10,7 @@ const DEFAULT_USER = {
   userId: null,
   username: null,
   nickname: null,
-  role: null,
+  role: '',
   imageUrl: null,
   accessToken: null,
   isLoggedIn: false,
diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx
index 9f6882c0e..7efff3ba7 100644
--- a/frontend/src/pages/ArticleListPage/index.tsx
+++ b/frontend/src/pages/ArticleListPage/index.tsx
@@ -30,7 +30,9 @@ const ArticleListPage = () => {
   const [checked, setChecked] = useState(false);
 
   const { user } = useContext(UserContext);
-  const { isLoggedIn } = user;
+  const { isLoggedIn, role } = user;
+
+  const authorized = role === 'CREW' && isLoggedIn;
 
   const { data: filteredArticles = [], refetch: getFilteredArticles } = useGetFilteredArticleQuery(
     selectedCourse.value,
@@ -66,7 +68,7 @@ const ArticleListPage = () => {
             <ArticleBookmarkFilter checked={checked} handleCheckBookmark={handleCheckBookmark} />
           )}
         </FilteringWrapper>
-        {isLoggedIn && (
+        {authorized && (
           <Button
             type="button"
             size="X_SMALL"

From b58f75a29aca66458e6260adf7536fc87b3ceb1c Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Wed, 4 Oct 2023 18:36:00 +0900
Subject: [PATCH 54/71] =?UTF-8?q?test:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=EC=A1=B0=ED=9A=8C=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/wooteco/prolog/article.feature              | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature b/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
index 0c21cddc5..7a507af9b 100644
--- a/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
+++ b/backend/src/acceptanceTest/resources/wooteco/prolog/article.feature
@@ -8,10 +8,10 @@ Feature: 아티클 관련 기능
         When 아티클을 작성하면
         Then 아티클이 작성된다
 
-    Scenario: 아티클을 전체 조회하기
-        Given 아티클을 여러개 작성하고
-        When 아티클을 전체 조회 하면
-        Then 아티클이 전체 조회 된다
+#    Scenario: 아티클을 전체 조회하기
+#        Given 아티클을 여러개 작성하고
+#        When 아티클을 전체 조회 하면
+#        Then 아티클이 전체 조회 된다
 
     Scenario: 아티클을 수정하기
         Given 아티클을 여러개 작성하고

From c5ba5b3e198e63f17ea2bac56b0058131b5f5d8e Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 4 Oct 2023 19:52:03 +0900
Subject: [PATCH 55/71] =?UTF-8?q?feat:=20=EC=A1=B0=ED=9A=8C=EC=88=98=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 frontend/src/apis/articles.ts               |  4 ++++
 frontend/src/components/Article/Article.tsx |  4 +++-
 frontend/src/hooks/queries/article.ts       | 12 ++++++++++++
 frontend/src/mocks/handlers/articles.ts     |  4 ++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend/src/apis/articles.ts b/frontend/src/apis/articles.ts
index 720fc2fbc..d744a2861 100644
--- a/frontend/src/apis/articles.ts
+++ b/frontend/src/apis/articles.ts
@@ -26,3 +26,7 @@ export const requestGetFilteredArticle = (course: string, bookmark: boolean) =>
 export const requestPutArticleLike = ({ articleId, like }: ArticleLikePutRequest) => {
   return client.put(`/articles/${articleId}/like`, { like });
 };
+
+export const requestPostArticleView = (articleId: number) => {
+  return client.post(`/articles/${articleId}/views`);
+};
diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
index 5632e91fa..814165c50 100644
--- a/frontend/src/components/Article/Article.tsx
+++ b/frontend/src/components/Article/Article.tsx
@@ -3,6 +3,7 @@ import type { ArticleType } from '../../models/Article';
 import Scrap from '../Reaction/Scrap';
 import { useRef, useState } from 'react';
 import {
+  usePostArticleViewsMutation,
   usePutArticleBookmarkMutation,
   usePutArticleLikeMutation,
 } from '../../hooks/queries/article';
@@ -25,6 +26,7 @@ const Article = ({
   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();
@@ -49,7 +51,7 @@ const Article = ({
   };
 
   return (
-    <Styled.Container>
+    <Styled.Container onClick={() => postViews(id)}>
       <Styled.Anchor href={url} target="_blank" rel="noopener noreferrer">
         <Styled.ThumbnailWrapper>
           <Styled.Thumbnail src={imageUrl} />
diff --git a/frontend/src/hooks/queries/article.ts b/frontend/src/hooks/queries/article.ts
index 59caec13a..8ac401690 100644
--- a/frontend/src/hooks/queries/article.ts
+++ b/frontend/src/hooks/queries/article.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import {
   requestGetFilteredArticle,
+  requestPostArticleView,
   requestPostArticles,
   requestPutArticleBookmark,
   requestPutArticleLike,
@@ -48,3 +49,14 @@ export const usePutArticleLikeMutation = () => {
     onError: () => {},
   });
 };
+
+export const usePostArticleViewsMutation = () => {
+  return useMutation(requestPostArticleView, {
+    onSuccess: () => {
+      alert(SUCCESS_MESSAGE.CREATE_ARTICLE);
+    },
+    onError: () => {
+      alert(ERROR_MESSAGE.DEFAULT);
+    },
+  });
+};
diff --git a/frontend/src/mocks/handlers/articles.ts b/frontend/src/mocks/handlers/articles.ts
index 489b47c22..0de68dd0a 100644
--- a/frontend/src/mocks/handlers/articles.ts
+++ b/frontend/src/mocks/handlers/articles.ts
@@ -62,4 +62,8 @@ export const articlesHandler = [
 
     return res(ctx.status(200), ctx.json(filteredArticle));
   }),
+
+  rest.post(`${BASE_URL}/articles/:articleId/views`, (req, res, ctx) => {
+    return res(ctx.status(200));
+  }),
 ];

From eea195bcfc56f4e7d3bfb4e88ad262eea19537af Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 4 Oct 2023 19:59:59 +0900
Subject: [PATCH 56/71] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20alert=20=EB=A9=94=EC=84=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이도현 <Creative-Lee@users.noreply.github.com>
---
 frontend/src/hooks/queries/article.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/frontend/src/hooks/queries/article.ts b/frontend/src/hooks/queries/article.ts
index 8ac401690..2c9a8cd3b 100644
--- a/frontend/src/hooks/queries/article.ts
+++ b/frontend/src/hooks/queries/article.ts
@@ -51,12 +51,5 @@ export const usePutArticleLikeMutation = () => {
 };
 
 export const usePostArticleViewsMutation = () => {
-  return useMutation(requestPostArticleView, {
-    onSuccess: () => {
-      alert(SUCCESS_MESSAGE.CREATE_ARTICLE);
-    },
-    onError: () => {
-      alert(ERROR_MESSAGE.DEFAULT);
-    },
-  });
+  return useMutation(requestPostArticleView);
 };

From 3860931f1992c24128d59c4c2e74f6f28e17500e Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Thu, 5 Oct 2023 17:05:58 +0900
Subject: [PATCH 57/71] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EC=8B=9C=20=EB=B6=81=EB=A7=88=ED=81=AC=20?=
 =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94=20=EB=B0=98=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wooteco/prolog/article/ui/ArticleResponse.java    | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
index 19d398ca5..eb8b6601f 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
@@ -1,12 +1,11 @@
 package wooteco.prolog.article.ui;
 
 import com.fasterxml.jackson.annotation.JsonFormat;
+import java.time.LocalDateTime;
 import lombok.AllArgsConstructor;
 import lombok.Getter;
 import wooteco.prolog.article.domain.Article;
 
-import java.time.LocalDateTime;
-
 @AllArgsConstructor
 @Getter
 public class ArticleResponse {
@@ -17,11 +16,13 @@ public class ArticleResponse {
     private final String url;
     private final String imageUrl;
     private final boolean isBookmarked;
+    private final boolean isLiked;
+
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm")
     private final LocalDateTime createdAt;
 
     private ArticleResponse() {
-        this(null, null, null, null, null, false, null);
+        this(null, null, null, null, null, false, false, null);
     }
 
     public static ArticleResponse of(final Article article, final Long memberId) {
@@ -31,7 +32,9 @@ public static ArticleResponse of(final Article article, final Long memberId) {
         final String url = article.getUrl().getUrl();
         final String imageUrl = article.getImageUrl().getUrl();
         final boolean isBookmarked = article.getArticleBookmarks().containBookmark(memberId);
+        final boolean isLiked = article.getArticleLikes().isAlreadyLike(memberId);
         final LocalDateTime createdAt = article.getCreatedAt();
-        return new ArticleResponse(id, nickName, title, url, imageUrl, isBookmarked, createdAt);
+        return new ArticleResponse(id, nickName, title, url, imageUrl, isBookmarked, isLiked,
+            createdAt);
     }
 }

From 121cecbabce0faf9d1a2913590cd8d51b37727e6 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 6 Oct 2023 10:00:36 +0900
Subject: [PATCH 58/71] =?UTF-8?q?feat:=20Repository=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=ED=95=A0=20=EB=95=8C=20articleLike=EB=A5=BC?=
 =?UTF-8?q?=20=EB=B0=98=ED=99=98=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/domain/repository/ArticleRepository.java     | 9 +++++----
 1 file changed, 5 insertions(+), 4 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
index 1f4adc33d..2c6c4517d 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
@@ -1,13 +1,12 @@
 package wooteco.prolog.article.domain.repository;
 
+import java.util.List;
+import java.util.Optional;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.Query;
 import org.springframework.data.repository.query.Param;
 import wooteco.prolog.article.domain.Article;
 
-import java.util.List;
-import java.util.Optional;
-
 public interface ArticleRepository extends JpaRepository<Article, Long> {
 
     List<Article> findAllByOrderByCreatedAtDesc();
@@ -28,6 +27,8 @@ public interface ArticleRepository extends JpaRepository<Article, Long> {
         "JOIN GroupMember gm ON a.member.id = gm.member.id " +
         "JOIN gm.group mg " +
         "JOIN a.articleBookmarks.articleBookmarks ab " +
+        "JOIN a.articleLikes.articleLikes al " +
         "WHERE mg.name LIKE %:course AND ab.memberId = :memberId")
-    List<Article> findArticlesByCourseAndMember(@Param("course") String course, @Param("memberId") Long memberId);
+    List<Article> findArticlesByCourseAndMember(@Param("course") String course,
+                                                @Param("memberId") Long memberId);
 }

From 7650bd11e59513402bb1ea6104826b6b76aa5b8b Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 6 Oct 2023 11:49:16 +0900
Subject: [PATCH 59/71] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=20=EC=A2=8B?=
 =?UTF-8?q?=EC=95=84=EC=9A=94,=20=EB=B6=81=EB=A7=88=ED=81=AC=EA=B0=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=EB=90=9C=20=EA=B2=BD=EC=9A=B0=20=EB=8B=A4?=
 =?UTF-8?q?=EC=8B=9C=20=EC=B6=94=EA=B0=80=ED=95=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=A6=AC=ED=8C=A9=ED=84=B0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/domain/ArticleBookmark.java       |  4 ++++
 .../article/domain/ArticleBookmarks.java      | 13 ++++++++++-
 .../prolog/article/domain/ArticleLike.java    | 19 ++++++++++++++++
 .../prolog/article/domain/ArticleLikes.java   | 13 ++++++++++-
 .../article/domain/ArticleBookmarksTest.java  | 16 ++++++++++++++
 .../article/domain/ArticleLikesTest.java      | 22 +++++++++++++++++--
 6 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
index c08e91e92..8c1686b3c 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmark.java
@@ -40,4 +40,8 @@ public ArticleBookmark(final Article article, final Long memberId) {
     public boolean isOwner(final Long memberId) {
         return Objects.equals(this.memberId, memberId);
     }
+
+    public Long getMemberId() {
+        return memberId;
+    }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
index 7d332d319..e43b7dee6 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
@@ -19,7 +19,14 @@ public ArticleBookmarks() {
     }
 
     public void addBookmark(final ArticleBookmark bookmark) {
-        articleBookmarks.add(bookmark);
+        if (isNotAlreadyAdded(bookmark)) {
+            articleBookmarks.add(bookmark);
+        }
+    }
+
+    private boolean isNotAlreadyAdded(final ArticleBookmark newBookmark) {
+        return articleBookmarks.stream()
+            .noneMatch(bookmark -> bookmark.isOwner(newBookmark.getMemberId()));
     }
 
     public void removeBookmark(final Long memberId) {
@@ -33,4 +40,8 @@ public boolean containBookmark(final Long memberId) {
         return articleBookmarks.stream()
             .anyMatch(bookmark -> bookmark.isOwner(memberId));
     }
+
+    public List<ArticleBookmark> getArticleBookmarks() {
+        return articleBookmarks;
+    }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleLike.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleLike.java
index 6748ff43c..5ecd7cacc 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/ArticleLike.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleLike.java
@@ -40,4 +40,23 @@ public ArticleLike(final Article article, final Long memberId) {
     public boolean isOwner(final Long memberId) {
         return Objects.equals(this.memberId, memberId);
     }
+
+    @Override
+    public boolean equals(final Object o) {
+        if (this == o) {
+            return true;
+        }
+        if (o == null || getClass() != o.getClass()) {
+            return false;
+        }
+        final ArticleLike that = (ArticleLike) o;
+        return Objects.equals(id, that.id) ||
+            (Objects.equals(article, that.article)
+                && Objects.equals(memberId, that.memberId));
+    }
+
+    @Override
+    public int hashCode() {
+        return Objects.hash(id, article, memberId);
+    }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java
index 5a919ebb0..0b89eea08 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java
@@ -19,7 +19,14 @@ public ArticleLikes() {
     }
 
     public void addLike(final ArticleLike articleLike) {
-        articleLikes.add(articleLike);
+        if (isNotAlreadyAdded(articleLike)) {
+            articleLikes.add(articleLike);
+        }
+    }
+
+    private boolean isNotAlreadyAdded(final ArticleLike articleLike) {
+        return articleLikes.stream()
+            .noneMatch(like -> like.equals(articleLike));
     }
 
     public void removeLike(final Long memberId) {
@@ -33,4 +40,8 @@ public boolean isAlreadyLike(final Long memberId) {
         return articleLikes.stream()
             .anyMatch(like -> like.isOwner(memberId));
     }
+
+    public List<ArticleLike> getArticleLikes() {
+        return articleLikes;
+    }
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java
index 9fa73c30e..dd945cd9a 100644
--- a/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleBookmarksTest.java
@@ -39,6 +39,22 @@ void addArticleBookmark() {
             .isTrue();
     }
 
+    @Test
+    @DisplayName("이미 추가되어 있으면 ArticleBookmark를 추가하지 않는다.")
+    void addArticleBookmarkIfAlreadyAdded() {
+        //given
+        final ArticleBookmarks articleLikes = new ArticleBookmarks();
+        final Article article = new Article(member, title, url, imageUrl);
+        final ArticleBookmark articleLike = new ArticleBookmark(article, member.getId());
+        articleLikes.addBookmark(articleLike);
+
+        //when
+        articleLikes.addBookmark(articleLike);
+
+        //then
+        assertThat(articleLikes.getArticleBookmarks()).hasSize(1);
+    }
+
     @Test
     @DisplayName("ArticleBookmark를 삭제할 수 있다,")
     void removeArticleBookmark() {
diff --git a/backend/src/test/java/wooteco/prolog/article/domain/ArticleLikesTest.java b/backend/src/test/java/wooteco/prolog/article/domain/ArticleLikesTest.java
index d65d79811..c824a717d 100644
--- a/backend/src/test/java/wooteco/prolog/article/domain/ArticleLikesTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/domain/ArticleLikesTest.java
@@ -2,9 +2,11 @@
 
 import static org.assertj.core.api.Assertions.assertThat;
 
+import java.util.List;
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.DisplayName;
 import org.junit.jupiter.api.Test;
+import org.mockito.Mockito;
 import wooteco.prolog.member.domain.Member;
 import wooteco.prolog.member.domain.Role;
 
@@ -24,7 +26,7 @@ void setUp() {
     }
 
     @Test
-    @DisplayName("ArticleBookmark를 추가할 수 있다.")
+    @DisplayName("ArticleLike를 추가할 수 있다.")
     void addArticleLike() {
         //given
         final ArticleLikes articleLikes = new ArticleLikes();
@@ -40,7 +42,23 @@ void addArticleLike() {
     }
 
     @Test
-    @DisplayName("ArticleBookmark를 삭제할 수 있다,")
+    @DisplayName("이미 추가되어 있으면 ArticleLike를 추가하지 않는다.")
+    void addArticleLikeIfAlreadyAdded() {
+        //given
+        final ArticleLikes articleLikes = new ArticleLikes();
+        final Article article = new Article(member, title, url, imageUrl);
+        final ArticleLike articleLike = new ArticleLike(article, member.getId());
+        articleLikes.addLike(articleLike);
+
+        //when
+        articleLikes.addLike(articleLike);
+
+        //then
+        assertThat(articleLikes.getArticleLikes()).hasSize(1);
+    }
+
+    @Test
+    @DisplayName("ArticleLike를 삭제할 수 있다,")
     void removeArticleLike() {
         //given
         final ArticleLikes articleLikes = new ArticleLikes();

From 510a8ee14568637791b449ba60ca2021a98a147d Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 6 Oct 2023 13:28:33 +0900
Subject: [PATCH 60/71] =?UTF-8?q?hotfix:=20jackson=20=EB=AC=B8=EC=A0=9C?=
 =?UTF-8?q?=EB=A1=9C,=20getter=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/ui/ArticleResponse.java    | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
index eb8b6601f..618348f8a 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
@@ -3,11 +3,9 @@
 import com.fasterxml.jackson.annotation.JsonFormat;
 import java.time.LocalDateTime;
 import lombok.AllArgsConstructor;
-import lombok.Getter;
 import wooteco.prolog.article.domain.Article;
 
 @AllArgsConstructor
-@Getter
 public class ArticleResponse {
 
     private final Long id;
@@ -37,4 +35,36 @@ public static ArticleResponse of(final Article article, final Long memberId) {
         return new ArticleResponse(id, nickName, title, url, imageUrl, isBookmarked, isLiked,
             createdAt);
     }
+
+    public Long getId() {
+        return id;
+    }
+
+    public String getUserName() {
+        return userName;
+    }
+
+    public String getTitle() {
+        return title;
+    }
+
+    public String getUrl() {
+        return url;
+    }
+
+    public String getImageUrl() {
+        return imageUrl;
+    }
+
+    public boolean isBookmarked() {
+        return isBookmarked;
+    }
+
+    public boolean isLiked() {
+        return isLiked;
+    }
+
+    public LocalDateTime getCreatedAt() {
+        return createdAt;
+    }
 }

From 48f2405f2e221ec7740429c704da9a9cb1aa522f Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 6 Oct 2023 13:29:09 +0900
Subject: [PATCH 61/71] =?UTF-8?q?hotfix:=20jackson=20=EB=AC=B8=EC=A0=9C?=
 =?UTF-8?q?=EB=A1=9C,=20getter=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/java/wooteco/prolog/article/ui/ArticleResponse.java  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java b/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
index 618348f8a..6177d5440 100644
--- a/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
+++ b/backend/src/main/java/wooteco/prolog/article/ui/ArticleResponse.java
@@ -56,11 +56,11 @@ public String getImageUrl() {
         return imageUrl;
     }
 
-    public boolean isBookmarked() {
+    public boolean getIsBookmarked() {
         return isBookmarked;
     }
 
-    public boolean isLiked() {
+    public boolean getIsLiked() {
         return isLiked;
     }
 

From 0b2717e067a92d627b5c3f04c8a28a091b40a887 Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Fri, 6 Oct 2023 14:10:36 +0900
Subject: [PATCH 62/71] =?UTF-8?q?refactor:=20findArticlesByCourseAndMember?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/application/ArticleService.java   |  4 +-
 .../domain/repository/ArticleRepository.java  |  9 +--
 .../AuthMemberPrincipalArgumentResolver.java  | 31 +++++-----
 .../application/ArticleServiceTest.java       | 58 +++++++++----------
 4 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
index afcc1aaca..af39e991c 100644
--- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
+++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java
@@ -79,9 +79,9 @@ public void likeArticle(final Long id, final LoginMember loginMember, final Bool
     public List<ArticleResponse> getFilteredArticles(final LoginMember member,
                                                      final ArticleFilterType course,
                                                      final boolean onlyBookmarked) {
-        if (member.isMember() && onlyBookmarked) {
+        if (member.isMember()) {
             return articleRepository.findArticlesByCourseAndMember(course.getGroupName(),
-                    member.getId()).stream()
+                    member.getId(), onlyBookmarked).stream()
                 .map(article -> ArticleResponse.of(article, member.getId()))
                 .collect(toList());
         }
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
index 2c6c4517d..64e69d1e8 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
@@ -26,9 +26,10 @@ 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 " +
-        "JOIN a.articleBookmarks.articleBookmarks ab " +
-        "JOIN a.articleLikes.articleLikes al " +
-        "WHERE mg.name LIKE %:course AND ab.memberId = :memberId")
+        "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))")
     List<Article> findArticlesByCourseAndMember(@Param("course") String course,
-                                                @Param("memberId") Long memberId);
+                                                @Param("memberId") Long memberId,
+                                                @Param("onlyBookmarked") boolean onlyBookmarked);
 }
diff --git a/backend/src/main/java/wooteco/prolog/login/ui/AuthMemberPrincipalArgumentResolver.java b/backend/src/main/java/wooteco/prolog/login/ui/AuthMemberPrincipalArgumentResolver.java
index c2e50a8b0..0cd8261bd 100644
--- a/backend/src/main/java/wooteco/prolog/login/ui/AuthMemberPrincipalArgumentResolver.java
+++ b/backend/src/main/java/wooteco/prolog/login/ui/AuthMemberPrincipalArgumentResolver.java
@@ -32,21 +32,22 @@ public LoginMember resolveArgument(MethodParameter parameter,
                                        ModelAndViewContainer mavContainer,
                                        NativeWebRequest webRequest,
                                        WebDataBinderFactory binderFactory) {
-        String credentials = AuthorizationExtractor
-            .extract(webRequest.getNativeRequest(HttpServletRequest.class));
-
-        if (credentials == null || credentials.isEmpty()) {
-            memberAuthorityCache.setAuthority(Authority.ANONYMOUS);
-            return new LoginMember(Authority.ANONYMOUS);
-        }
-
-        try {
-            Long id = Long.parseLong(jwtTokenProvider.extractSubject(credentials));
-            memberAuthorityCache.setAuthority(Authority.MEMBER);
-            return new LoginMember(id, Authority.MEMBER);
-        } catch (NumberFormatException e) {
-            throw new BadRequestException(TOKEN_NOT_VALID);
-        }
+        return new LoginMember(1L, Authority.MEMBER);
+//        String credentials = AuthorizationExtractor
+//            .extract(webRequest.getNativeRequest(HttpServletRequest.class));
+//
+//        if (credentials == null || credentials.isEmpty()) {
+//            memberAuthorityCache.setAuthority(Authority.ANONYMOUS);
+//            return new LoginMember(Authority.ANONYMOUS);
+//        }
+//
+//        try {
+//            Long id = Long.parseLong(jwtTokenProvider.extractSubject(credentials));
+//            memberAuthorityCache.setAuthority(Authority.MEMBER);
+//            return new LoginMember(id, Authority.MEMBER);
+//        } catch (NumberFormatException e) {
+//            throw new BadRequestException(TOKEN_NOT_VALID);
+//        }
     }
 
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
index bc867ea1d..b4381dcfa 100644
--- a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
@@ -59,7 +59,7 @@ void create_success() {
         when(memberService.findById(any())).thenReturn(member);
 
         final Article article = new Article(member, new Title("title"), new Url("url"),
-            new ImageUrl("imageUrl"));
+                new ImageUrl("imageUrl"));
         when(articleRepository.save(any())).thenReturn(article);
         final LoginMember judyLogin = new LoginMember(1L, MEMBER);
 
@@ -82,7 +82,7 @@ void create_success_unAuthorized() {
 
         //when
         assertThatThrownBy(() -> articleService.create(judyRequest, judyLogin))
-            .isInstanceOf(BadRequestException.class);
+                .isInstanceOf(BadRequestException.class);
     }
 
     @DisplayName("아티클을 수정한다.")
@@ -91,13 +91,13 @@ void update_success() {
         //given
         final Member judy = new Member(1L, "username", "nickname", CREW, 1L, "url");
         final Article judyArticle = new Article(judy, new Title("judyTitle"), new Url("judyUrl"),
-            new ImageUrl("imageUrl"));
+                new ImageUrl("imageUrl"));
         when(articleRepository.findById(any())).thenReturn(Optional.of(judyArticle));
         when(memberService.findById(any())).thenReturn(judy);
 
         final LoginMember judyLogin = new LoginMember(1L, MEMBER);
         final ArticleRequest judyChangedRequest = new ArticleRequest("title", "changedUrl",
-            "imageUrl");
+                "imageUrl");
 
         //when
         articleService.update(1L, judyChangedRequest, judyLogin);
@@ -114,11 +114,11 @@ void update_fail_ArticleNotFoundException() {
 
         final LoginMember judyLogin = new LoginMember(1L, MEMBER);
         final ArticleRequest judyChangedRequest = new ArticleRequest("title", "changedUrl",
-            "imageUrl");
+                "imageUrl");
 
         //when, then
         assertThatThrownBy(() -> articleService.update(1L, judyChangedRequest, judyLogin))
-            .isInstanceOf(BadRequestException.class);
+                .isInstanceOf(BadRequestException.class);
     }
 
     @DisplayName("수정시 아티클 작성자가 아니라면 예외를 발생시킨다.")
@@ -128,17 +128,17 @@ void update_fail_InvalidArticleAuthorException() {
         final Member judy = new Member(1L, "judith", "judy", CREW, 1L, "judyUrl");
         final Member brown = new Member(2L, "brown", "brownie", CREW, 2L, "brownUrl");
         final Article brownArticle = new Article(brown, new Title("brownTitle"),
-            new Url("brownUrl"), new ImageUrl("imageUrl"));
+                new Url("brownUrl"), new ImageUrl("imageUrl"));
         when(articleRepository.findById(any())).thenReturn(Optional.of(brownArticle));
 
         final LoginMember judyLogin = new LoginMember(1L, MEMBER);
         when(memberService.findById(any())).thenReturn(judy);
         final ArticleRequest judyChangedRequest = new ArticleRequest("title", "changedUrl",
-            "imageUrl");
+                "imageUrl");
 
         //when, then
         assertThatThrownBy(() -> articleService.update(1L, judyChangedRequest, judyLogin))
-            .isInstanceOf(BadRequestException.class);
+                .isInstanceOf(BadRequestException.class);
     }
 
     @DisplayName("아티클을 삭제한다.")
@@ -147,7 +147,7 @@ void delete_success() {
         //given
         final Member judy = new Member(1L, "judith", "judy", CREW, 1L, "judyUrl");
         final Article judyArticle = new Article(judy, new Title("judyTitle"), new Url("judyUrl"),
-            new ImageUrl("imageUrl"));
+                new ImageUrl("imageUrl"));
         when(articleRepository.findById(any())).thenReturn(Optional.of(judyArticle));
         when(memberService.findById(any())).thenReturn(judy);
         final LoginMember judyLogin = new LoginMember(1L, MEMBER);
@@ -169,7 +169,7 @@ void delete_fail_ArticleNotFoundException() {
 
         //when, then
         assertThatThrownBy(() -> articleService.delete(1L, judyLogin))
-            .isInstanceOf(BadRequestException.class);
+                .isInstanceOf(BadRequestException.class);
     }
 
     @DisplayName("삭제시 아티클 작성자가 아니라면 예외를 발생시킨다.")
@@ -179,7 +179,7 @@ void delete_fail_InvalidArticleAuthorException() {
         final Member judy = new Member(1L, "judith", "judy", CREW, 1L, "judyUrl");
         final Member brown = new Member(2L, "brown", "brownie", CREW, 2L, "brownUrl");
         final Article brownArticle = new Article(brown, new Title("brownTitle"),
-            new Url("brownUrl"), new ImageUrl("imageUrl"));
+                new Url("brownUrl"), new ImageUrl("imageUrl"));
         when(articleRepository.findById(any())).thenReturn(Optional.of(brownArticle));
 
         final LoginMember judyLogin = new LoginMember(1L, MEMBER);
@@ -187,7 +187,7 @@ void delete_fail_InvalidArticleAuthorException() {
 
         //when, then
         assertThatThrownBy(() -> articleService.delete(1L, judyLogin))
-            .isInstanceOf(BadRequestException.class);
+                .isInstanceOf(BadRequestException.class);
     }
 
     @Nested
@@ -199,14 +199,14 @@ class bookmarkArticle {
         void add() {
             //given
             final Member member = new Member(1L, "userName", "nickName",
-                CREW, 1L, "imageUrl");
+                    CREW, 1L, "imageUrl");
             final Article article = new Article(member, new Title("brownTitle"),
-                new Url("brownUrl"), new ImageUrl("imageUrl"));
+                    new Url("brownUrl"), new ImageUrl("imageUrl"));
             final Long articleId = 3L;
             final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
 
             when(articleRepository.findFetchBookmarkById(articleId)).thenReturn(
-                Optional.of(article));
+                    Optional.of(article));
             when(memberService.findById(member.getId())).thenReturn(member);
 
             //when
@@ -215,7 +215,7 @@ void add() {
             //then
             final ArticleBookmarks articleBookmarks = article.getArticleBookmarks();
             assertThat(articleBookmarks.containBookmark(member.getId()))
-                .isTrue();
+                    .isTrue();
         }
 
         @DisplayName("아티클의 북마크를 삭제한다.")
@@ -223,14 +223,14 @@ void add() {
         void remove() {
             //given
             final Member member = new Member(1L, "userName", "nickName",
-                CREW, 1L, "imageUrl");
+                    CREW, 1L, "imageUrl");
             final Article article = new Article(member, new Title("brownTitle"),
-                new Url("brownUrl"), new ImageUrl("imageUrl"));
+                    new Url("brownUrl"), new ImageUrl("imageUrl"));
             final Long articleId = 3L;
             final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
 
             when(articleRepository.findFetchBookmarkById(articleId)).thenReturn(
-                Optional.of(article));
+                    Optional.of(article));
             when(memberService.findById(member.getId())).thenReturn(member);
 
             //when
@@ -239,7 +239,7 @@ void remove() {
             //then
             final ArticleBookmarks articleBookmarks = article.getArticleBookmarks();
             assertThat(articleBookmarks.containBookmark(member.getId()))
-                .isTrue();
+                    .isTrue();
         }
     }
 
@@ -252,9 +252,9 @@ class likeArticle {
         void add() {
             //given
             final Member member = new Member(1L, "userName", "nickName",
-                CREW, 1L, "imageUrl");
+                    CREW, 1L, "imageUrl");
             final Article article = new Article(member, new Title("brownTitle"),
-                new Url("brownUrl"), new ImageUrl("imageUrl"));
+                    new Url("brownUrl"), new ImageUrl("imageUrl"));
             final Long articleId = 3L;
             final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
 
@@ -267,7 +267,7 @@ void add() {
             //then
             final ArticleLikes articleBookmarks = article.getArticleLikes();
             assertThat(articleBookmarks.isAlreadyLike(member.getId()))
-                .isTrue();
+                    .isTrue();
         }
 
         @DisplayName("아티클의 좋아요를 삭제한다.")
@@ -275,9 +275,9 @@ void add() {
         void remove() {
             //given
             final Member member = new Member(1L, "userName", "nickName",
-                CREW, 1L, "imageUrl");
+                    CREW, 1L, "imageUrl");
             final Article article = new Article(member, new Title("brownTitle"),
-                new Url("brownUrl"), new ImageUrl("imageUrl"));
+                    new Url("brownUrl"), new ImageUrl("imageUrl"));
             final Long articleId = 3L;
             final LoginMember loginMember = new LoginMember(member.getId(), MEMBER);
 
@@ -290,7 +290,7 @@ void remove() {
             //then
             final ArticleLikes articleBookmarks = article.getArticleLikes();
             assertThat(articleBookmarks.isAlreadyLike(member.getId()))
-                .isFalse();
+                    .isFalse();
         }
     }
 
@@ -320,13 +320,13 @@ void filter_isBookmarked() {
         final Article article = new Article(member, new Title("title"), new Url("url"), new ImageUrl("imageUrl"));
         final LoginMember loginMember = new LoginMember(1L, MEMBER);
 
-        when(articleRepository.findArticlesByCourseAndMember(any(), any())).thenReturn(Arrays.asList(article));
+        when(articleRepository.findArticlesByCourseAndMember(any(), any(), any())).thenReturn(Arrays.asList(article));
 
         //when
         final List<ArticleResponse> articleResponses = articleService.getFilteredArticles(loginMember, ArticleFilterType.BACKEND, true);
 
         //then
-        verify(articleRepository).findArticlesByCourseAndMember(any(), any());
+        verify(articleRepository).findArticlesByCourseAndMember(any(), any(), any());
         Assertions.assertThat(articleResponses.get(0).getTitle()).isEqualTo(article.getTitle().getTitle());
     }
 

From 2fb80d19b15afa5f3f718a84a1dd8bcb7ca37f81 Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Fri, 6 Oct 2023 14:12:18 +0900
Subject: [PATCH 63/71] =?UTF-8?q?refactor:=20jpql=20=EB=8C=80=EB=AC=B8?=
 =?UTF-8?q?=EC=9E=90=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/domain/repository/ArticleRepository.java   | 4 ++--
 1 file changed, 2 insertions(+), 2 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
index 64e69d1e8..ebd36bbb2 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/repository/ArticleRepository.java
@@ -26,8 +26,8 @@ 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 " +
-        "left JOIN a.articleBookmarks.articleBookmarks ab " +
-        "left JOIN a.articleLikes.articleLikes al " +
+        "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))")
     List<Article> findArticlesByCourseAndMember(@Param("course") String course,
                                                 @Param("memberId") Long memberId,

From 1cdfb23bfab46fce422c3dd495386976794223fb Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Fri, 6 Oct 2023 15:17:05 +0900
Subject: [PATCH 64/71] =?UTF-8?q?hotfix:=20=EC=BD=94=EB=93=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AuthMemberPrincipalArgumentResolver.java  | 31 +++++++++----------
 .../application/ArticleServiceTest.java       |  7 +++--
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/login/ui/AuthMemberPrincipalArgumentResolver.java b/backend/src/main/java/wooteco/prolog/login/ui/AuthMemberPrincipalArgumentResolver.java
index 0cd8261bd..c2e50a8b0 100644
--- a/backend/src/main/java/wooteco/prolog/login/ui/AuthMemberPrincipalArgumentResolver.java
+++ b/backend/src/main/java/wooteco/prolog/login/ui/AuthMemberPrincipalArgumentResolver.java
@@ -32,22 +32,21 @@ public LoginMember resolveArgument(MethodParameter parameter,
                                        ModelAndViewContainer mavContainer,
                                        NativeWebRequest webRequest,
                                        WebDataBinderFactory binderFactory) {
-        return new LoginMember(1L, Authority.MEMBER);
-//        String credentials = AuthorizationExtractor
-//            .extract(webRequest.getNativeRequest(HttpServletRequest.class));
-//
-//        if (credentials == null || credentials.isEmpty()) {
-//            memberAuthorityCache.setAuthority(Authority.ANONYMOUS);
-//            return new LoginMember(Authority.ANONYMOUS);
-//        }
-//
-//        try {
-//            Long id = Long.parseLong(jwtTokenProvider.extractSubject(credentials));
-//            memberAuthorityCache.setAuthority(Authority.MEMBER);
-//            return new LoginMember(id, Authority.MEMBER);
-//        } catch (NumberFormatException e) {
-//            throw new BadRequestException(TOKEN_NOT_VALID);
-//        }
+        String credentials = AuthorizationExtractor
+            .extract(webRequest.getNativeRequest(HttpServletRequest.class));
+
+        if (credentials == null || credentials.isEmpty()) {
+            memberAuthorityCache.setAuthority(Authority.ANONYMOUS);
+            return new LoginMember(Authority.ANONYMOUS);
+        }
+
+        try {
+            Long id = Long.parseLong(jwtTokenProvider.extractSubject(credentials));
+            memberAuthorityCache.setAuthority(Authority.MEMBER);
+            return new LoginMember(id, Authority.MEMBER);
+        } catch (NumberFormatException e) {
+            throw new BadRequestException(TOKEN_NOT_VALID);
+        }
     }
 
 }
diff --git a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
index b4381dcfa..897bb537e 100644
--- a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
+++ b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java
@@ -31,6 +31,9 @@
 import static org.assertj.core.api.Assertions.assertThat;
 import static org.assertj.core.api.Assertions.assertThatThrownBy;
 import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.anyBoolean;
+import static org.mockito.ArgumentMatchers.anyLong;
+import static org.mockito.ArgumentMatchers.anyString;
 import static org.mockito.Mockito.atLeastOnce;
 import static org.mockito.Mockito.verify;
 import static org.mockito.Mockito.when;
@@ -320,13 +323,13 @@ void filter_isBookmarked() {
         final Article article = new Article(member, new Title("title"), new Url("url"), new ImageUrl("imageUrl"));
         final LoginMember loginMember = new LoginMember(1L, MEMBER);
 
-        when(articleRepository.findArticlesByCourseAndMember(any(), any(), any())).thenReturn(Arrays.asList(article));
+        when(articleRepository.findArticlesByCourseAndMember(anyString(), anyLong(), anyBoolean())).thenReturn(Arrays.asList(article));
 
         //when
         final List<ArticleResponse> articleResponses = articleService.getFilteredArticles(loginMember, ArticleFilterType.BACKEND, true);
 
         //then
-        verify(articleRepository).findArticlesByCourseAndMember(any(), any(), any());
+        verify(articleRepository).findArticlesByCourseAndMember(anyString(), anyLong(), anyBoolean());
         Assertions.assertThat(articleResponses.get(0).getTitle()).isEqualTo(article.getTitle().getTitle());
     }
 

From 003dca25092574cfe0bf08445aade0d6f1886589 Mon Sep 17 00:00:00 2001
From: donghae-kim <donghae1999@gmail.com>
Date: Fri, 6 Oct 2023 15:38:15 +0900
Subject: [PATCH 65/71] =?UTF-8?q?hotfix:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=B5=9C=EC=8B=A0=20=EC=88=9C=EC=9C=BC=EB=A1=9C=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prolog/article/domain/repository/ArticleRepository.java | 6 ++++--
 1 file changed, 4 insertions(+), 2 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
index ebd36bbb2..2e02f23ea 100644
--- 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,7 +20,8 @@ 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 " +
@@ -28,7 +29,8 @@ public interface ArticleRepository extends JpaRepository<Article, Long> {
         "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);

From afdb43688806fdb51bbc42235fe80d45b6327ecf Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Fri, 6 Oct 2023 15:44:22 +0900
Subject: [PATCH 66/71] =?UTF-8?q?refactor:=20isBookMarked=EB=A5=BC=20isBoo?=
 =?UTF-8?q?kmarked=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Article/Article.tsx  |  4 ++--
 frontend/src/mocks/db/articles-android.json  |  6 +++---
 frontend/src/mocks/db/articles-backend.json  |  6 +++---
 frontend/src/mocks/db/articles-frontend.json |  6 +++---
 frontend/src/mocks/db/articles.json          | 18 +++++++++---------
 frontend/src/mocks/handlers/articles.ts      |  4 ++--
 frontend/src/models/Article.ts               |  2 +-
 7 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
index 814165c50..11f9c049f 100644
--- a/frontend/src/components/Article/Article.tsx
+++ b/frontend/src/components/Article/Article.tsx
@@ -17,12 +17,12 @@ const Article = ({
   url,
   createdAt,
   imageUrl,
-  isBookMarked,
+  isBookmarked,
   isLiked,
 }: ArticleType) => {
   const bookmarkRef = useRef(false);
   const likeRef = useRef(false);
-  const [bookmark, setBookmark] = useState(isBookMarked);
+  const [bookmark, setBookmark] = useState(isBookmarked);
   const [like, setLike] = useState(isLiked);
   const { mutate: putBookmark } = usePutArticleBookmarkMutation();
   const { mutate: putLike } = usePutArticleLikeMutation();
diff --git a/frontend/src/mocks/db/articles-android.json b/frontend/src/mocks/db/articles-android.json
index 0405b7a1e..a7be1d15c 100644
--- 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
index 9f5051d5a..842822d11 100644
--- 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
index bf065cdbf..5fca00e85 100644
--- 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
index 246762fb4..26d0b894d 100644
--- 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
index 0de68dd0a..eaf5813c6 100644
--- 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
index 67b99fba9..2a0a5709b 100644
--- 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;

From 8cce838ecfca6fe5367f0a8feb07f5a34627043e Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Fri, 6 Oct 2023 16:29:52 +0900
Subject: [PATCH 67/71] =?UTF-8?q?fix:=20=EC=B2=B4=ED=81=AC=EB=90=9C=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=B4=88=EA=B8=B0=EA=B0=92=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Article/Article.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
index 11f9c049f..a5d8e34bd 100644
--- a/frontend/src/components/Article/Article.tsx
+++ b/frontend/src/components/Article/Article.tsx
@@ -20,8 +20,8 @@ const Article = ({
   isBookmarked,
   isLiked,
 }: ArticleType) => {
-  const bookmarkRef = useRef(false);
-  const likeRef = useRef(false);
+  const bookmarkRef = useRef(isBookmarked);
+  const likeRef = useRef(isLiked);
   const [bookmark, setBookmark] = useState(isBookmarked);
   const [like, setLike] = useState(isLiked);
   const { mutate: putBookmark } = usePutArticleBookmarkMutation();

From c46969c0d99eb083bf90c95b349f0963bfd59020 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Fri, 6 Oct 2023 16:44:34 +0900
Subject: [PATCH 68/71] =?UTF-8?q?refactor:=20=EC=95=84=ED=8B=B0=ED=81=B4?=
 =?UTF-8?q?=20=EA=B8=80=EC=93=B0=EA=B8=B0=20=EA=B6=8C=ED=95=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ArticleListPage/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx
index 7efff3ba7..63093f9d0 100644
--- 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,

From cdc76f838fe8d7537b6cea47d629ced0f2d6a380 Mon Sep 17 00:00:00 2001
From: hong-sile <gurwns9325@naver.com>
Date: Fri, 6 Oct 2023 16:58:30 +0900
Subject: [PATCH 69/71] =?UTF-8?q?fix:=20=EC=82=AD=EC=A0=9C=EA=B0=80=20?=
 =?UTF-8?q?=EC=A0=95=EC=83=81=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EB=90=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/wooteco/prolog/article/domain/ArticleBookmarks.java  | 4 ++--
 .../main/java/wooteco/prolog/article/domain/ArticleLikes.java | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
index e43b7dee6..cb1d4f795 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleBookmarks.java
@@ -10,8 +10,8 @@
 @Embeddable
 public class ArticleBookmarks {
 
-    @OneToMany(mappedBy = "article")
-    @Cascade(value = {CascadeType.PERSIST, CascadeType.DELETE})
+    @OneToMany(mappedBy = "article", orphanRemoval = true)
+    @Cascade(value = CascadeType.PERSIST)
     private List<ArticleBookmark> articleBookmarks;
 
     public ArticleBookmarks() {
diff --git a/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java b/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java
index 0b89eea08..3b0c65d23 100644
--- a/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java
+++ b/backend/src/main/java/wooteco/prolog/article/domain/ArticleLikes.java
@@ -10,8 +10,8 @@
 @Embeddable
 public class ArticleLikes {
 
-    @OneToMany(mappedBy = "article")
-    @Cascade(value = {CascadeType.PERSIST, CascadeType.DELETE})
+    @OneToMany(mappedBy = "article", orphanRemoval = true)
+    @Cascade(value = CascadeType.PERSIST)
     private List<ArticleLike> articleLikes;
 
     public ArticleLikes() {

From 534801af2ca4d83a6cc23b1aa0d148cd80e378d8 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Fri, 6 Oct 2023 16:59:14 +0900
Subject: [PATCH 70/71] =?UTF-8?q?refactor:=20=EC=A2=8B=EC=95=84=EC=9A=94,?=
 =?UTF-8?q?=20=EB=B6=81=EB=A7=88=ED=81=AC=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EC=A1=B0=ED=9A=8C=EC=88=98=20=EC=9A=94?=
 =?UTF-8?q?=EC=B2=AD=20=EC=95=88=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Article/Article.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
index a5d8e34bd..64a9c7457 100644
--- a/frontend/src/components/Article/Article.tsx
+++ b/frontend/src/components/Article/Article.tsx
@@ -30,6 +30,7 @@ const Article = ({
 
   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);

From 0754422d8b49e2647f767c761ddacb62128e376b Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Fri, 6 Oct 2023 17:22:11 +0900
Subject: [PATCH 71/71] =?UTF-8?q?refactor:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=20=EB=B2=84=EC=A0=84=EC=9D=BC=20=EB=95=8C=20=EA=B8=80=EC=93=B0?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ArticleListPage/index.tsx | 21 +++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx
index 63093f9d0..6c5e25cc9 100644
--- a/frontend/src/pages/ArticleListPage/index.tsx
+++ b/frontend/src/pages/ArticleListPage/index.tsx
@@ -13,6 +13,7 @@ import { css } from '@emotion/react';
 import ArticleBookmarkFilter from '../../components/Article/ArticleBookmarkFIlter';
 import { useGetFilteredArticleQuery } from '../../hooks/queries/article';
 import { UserContext } from '../../contexts/UserProvider';
+import MEDIA_QUERY from '../../constants/mediaQuery';
 
 const CATEGORY_OPTIONS = [
   { value: 'all', label: '전체보기' },
@@ -77,7 +78,7 @@ const ArticleListPage = () => {
             onClick={goNewArticlePage}
             cssProps={WriteButtonStyle}
           >
-            글쓰기
+            <ButtonText>글쓰기</ButtonText>
           </Button>
         )}
       </Container>
@@ -102,6 +103,10 @@ const FilteringWrapper = styled.div`
 
 const SelectBoxWrapper = styled.div`
   width: 150px;
+
+  ${MEDIA_QUERY.sm} {
+    width: 130px;
+  }
 `;
 
 export const WriteButtonStyle = css`
@@ -117,4 +122,18 @@ export const WriteButtonStyle = css`
   :hover {
     background-color: ${COLOR.DARK_BLUE_600};
   }
+
+  ${MEDIA_QUERY.sm} {
+    width: 42px;
+
+    & > img {
+      margin: 0;
+    }
+  }
+`;
+
+const ButtonText = styled.span`
+  ${MEDIA_QUERY.sm} {
+    display: none;
+  }
 `;