✍ 코드 작성

1. db.json 구성

: 기존에 작성되어 있던 articles 배열 속 구성된 객체내용에 'isBookmarked'라는 내용을 Boolean값으로 주는 것을 추가했다.

// 일부 예시
{
  "articles": [
    {
      "id": 5,
      "category": "뷰좋카",
      "title": "테르트르",
      "content": "이곳은 서울 종로구에 위치한 뷰 좋은 카페입니다.",
      "author_id": 105,
      "date": "2024-09-14",
      "cafe_address": "서울 종로구 낙산5길 46",
      "region": "서울 종로구",
      "thumbnail": "https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20200805_278%2F1596605687948scKLW_JPEG%2FCfoIxraXO40_aCB5f9qSJDL6.jpeg.jpg",
      "isBookmarked": false
    },
    {
      "id": 6,
      "category": "뷰좋카",
      "title": "카캉스",
      "content": "이곳은 경기 안산시에 위치한 뷰 좋은 카페입니다.",
      "author_id": 106,
      "date": "2024-09-13",
      "cafe_address": "경기 안산시 단원구 대부황금로 1501-1",
      "region": "경기 안산",
      "thumbnail": "https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20230908_42%2F1694173332614gLGeu_JPEG%2FIMG_20230830_192113_626.jpg",
      "isBookmarked": true
    }
  ]
}  

2. TanStack Query를 이용하여 북마크한 게시글만 보여주기

• axios.get으로 /articles?isBookmarked=true인 부분만 내용을 불러올 수 있다.
• useQuery 훅을 사용하여 북마크한 게시글만 가져오기
  

3. Tailwind를 이용하여 UI 꾸미기

1) 북마크한 게시글을 카드 형태로!

• 카드 안에 썸네일 이미지와 지역, 카페명(title), 카테고리를 보여주었다.
• 카드는 반응형으로 sm, lg 두 사이즈일 때만 구성하기로 했어서 grid-cols를 sm, lg 사이즈일 때 몇 열씩 보여질지 나타냈다.
• 카드는 테두리는 둥글게(border, rounded-lg), 그림자(shadow-lg), 너비(w-72), overflow-hidden로 지정
  (* overflow-hidden: 카드 안 컨텐츠가 카드의 크기를 넘어설 때 그 넘치는 부분을 숨기는 역할)
• 카드 속 이미지는 기존에 구성된 카드의 너비를 가득채우고(w-full), 이미지 높이 고정(h-64), object-cover로 지정
  (* object-cover: 이미지가 부모 요소의 크기에 맞게 잘리거나 중앙 기준으로 비율을 유지한 채 축소되어 표시)

3) UI 코드 전체보기

👊 Trouble Shooting

1. overflow-hidden vs. object-cover

카드 1개 크기에 컨텐츠 내용이 넘치면 숨기느냐 - overflow-hidden
카드 1개에 이미지가 부모요소 크기보다 넘치면 부모요소 크기에 맞게 중앙을 기준으로 비율을 유지한 채 잘리거나 축소되느냐 - object-cover
=> 두 설명이 비슷하게 느껴져서 언제 사용해야할 지 헷갈렸다.