팀 프로젝트의 방향성이 바뀌었다. 기존에는 사용자가 카페의 정보를 공유하는 커뮤니티라는 목적이 있었다. 그러나 관리자가 카페의 정보를 제공하는 페이지도 추가하기로 했다. 정보제공이 주된 방향이고 그 외 사용자들의 정보 공유는 자유롭게 할 수 있도록 공간을 제공한 프로젝트로 기획의도가 변경되었다.

👊 트러블슈팅

1. 카페정보 제공하는 'cafedb' 데이터 추가됨

1) 원인: 기존에 사용자가 작성하는 게시글인 'articles' 데이터와 별도로 관리자가 제공하는 카페정보 데이터 'cafedb'가 추가됨.

  "cafedb": [
    {
      "id": "cafedb01",
      "date": "2024-09-20",
      "category": "애견동반",
      "title": "진스바바",
      "cafe_address": "서울 중랑구 중랑천로 64 1층",
      "region": "서울",
      "sns": "https://www.instagram.com/jins_barba",
      "phone": "0507-2093-6487",
      "openingHours": {
        "월": "08:30 ~ 19:00",
        "화": "08:30 ~ 19:00",
        "수": "08:30 ~ 19:00",
        "목": "08:30 ~ 22:00",
        "금": "08:30 ~ 22:00",
        "토": "12:00 ~ 19:00",
        "일": "정기휴무 (매주 일요일)"
      },
      "thumbnail": "https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20240113_115%2F17051301576590JLot_JPEG%2FIMG_1369.jpeg"
    }

2) 문제: 각각의 탭('모아보기'탭 - cafedb, '카페로그'탭 - articles)에서 보여지는 게시글을 북마크 했을 때 두 가지 모두 하나의 형태로한 페이지에 보여져야 하는데 데이터배열이 별도라 글의 id를 불러오기 위해서는 데이터 호출의 병합이 필요했다.

3) 해결방법 : 두 게시글의 데이터를 각각 호출 후 병합하는 apiHost라는 함수를 만들었고, 이 함수를 useQuery의 queryFn으로 사용하여 각 게시글의 id값을 불러올 수 있었다.

2. 각 게시글의 상세페이지 연결하기

1) 원인: 게시글의 종류가 ‘articles’의 상세페이지는 ‘detail’, ‘cafedb’의 상세페이지는 ‘cafeinfo’로 다른 페이지를 보여줘야 하며,
글의 작성자가 있으면 ‘detail’페이지를, 없으면 ‘cafeinfo’페이지를 보내줘야 한다.
2) 문제: 삼항연산자를 UI 보여주는 부분에서 사용했더니 Link태그 안 내용이 중복되어 컴포넌트 내용이 너무 길어져서 더 깔끔하게 할 수 있는 방법을 찾으려고 했다.
3) 해결방법: ‘linkTo’라는 함수를 만들어 삼항연산자를 사용하고, Link태그의 이동을 함수를 실행시키면서 나타내는 방법으로 변경했다. 이것도 함수를 UI 보여주는 부분에서 작성하려 했더니 너무 괄호들의 열고 닫힘이 한눈에 보이지 않아 함수를 바깥에 따로 만들었다. Link태그를 함수로 연결할 수 있다는 것을 알게 되었다.