직접 작성한 게시물에서만 편집, 삭제 버튼 보이게 하기

코드를 작성하기 전 세운 로직은 다음과 같다.

1. 백엔드에서 게시물 정보에 isMe 컬럼 추가(기본값은 false) [x]
2. loggedIn.id와 shop의 user의 id가 같으면 isMe를 true로 반환 [x]
3. 그게 아니라면 false 반환 [x]
4. 프론트에서는 해당 변수를 받아와서 조건부 렌더링[x]

• 백엔드에서 컬럼을 추가하는 것은 어렵지 않게 진행했다.
• 2번 게시물의 id와 로그인한 사용자의 id가 같은지를 확인하는 코드는 다음과 같이 작성했다.

    isMe: async ({ id }, {}, { loggedInUser }) => {
      const shop = await client.coffeeShop.findUnique({
        where: {
          id,
        },
      });
        if (shop.userId === loggedInUser.id) {
          return true;
        } else {
          return false;
        }
      return false;
    },

위와 같이 작성하였을 때, 다른 사용자의 것에서는 버튼이 보이지 않았다. 하지만 loggedInUser가 존재하지 않는 비 로그인 상태일 경우, 게시물이 출력되지 않는 에러가 발생했다. 따라서 아래와 같이 수정했다.

    isMe: async ({ id }, {}, { loggedInUser }) => {
      const shop = await client.coffeeShop.findUnique({
        where: {
          id,
        },
      });
      if (loggedInUser) {
        if (shop.userId === loggedInUser.id) {
          return true;
        } else {
          return false;
        }
      }
      return false;
    },

로그인한 유저가 있을 경우에 게시물의 유저 id와 로그인 id를 비교한다. 만약 존재하지 않는다면 false를 반환하게끔 수정하여 에러를 해결하였다.

• 그리고 프론트에서는 아래와 같이 수정하였다.

           {data?.seeCoffeeShop.shop.isMe ? (
              <Buttons>
                <Link to={`/edit/${id}`} reloadDocument>
                  <span disabled={message !== ''}>편집</span>
                </Link>
                <span onClick={handleDeleteShop} disabled={message !== ''}>
                  삭제
                </span>
              </Buttons>
            ) : (...