2024.03.20 TIL - 좋아요 로직 구상해보기, supabase에 배열의 값과 일치하는 테이블의 값 가져오기

좋아요 로직 구상해보기

아직 이 로직이 맞는지 몰라 일단 구현하는 과정을 담아보기 위해 정리해본다.

1. 화면 렌더링시 좋아요 하트에 색채울지 확인
   ( = 로그인한 유저가 이미 좋아요한 그림인지 먼저 체크해야 한다.)
   1) 로그인한 유저의 email을 가지고 users에서 해당하는 email의 drawings_array에 접근
   2) 배열에 해당 그림의 id가 있는지 확인
   3-1) 있으면 -> 하트 색 채워놓기 setIsLike(true)
   3-2) 없으면 -> 하트 색 비워놓기 (isLike의 기본값은 false)

2. 로그인한 유저가 존재하는지 supabase.auth를 이용한 api로 로그인 유저정보를 가져온다.

3. 로그인한 유저의 유무에 따라 좋아요 클릭시 실행이 달라짐
   1) 로그인한 유저가 있으면 - 좋아요 클릭시 해당 그림id가 유저의 drawings_array(좋아요한 그림의 id를 모아놓은 배열)에 추가된다.
   (users테이블에서 유저 email의 drawings_array에 접근해야 한다.)
   2) 로그인한 유저가 없으면 - 좋아요 클릭시 '로그인이 필요합니다.' alert 생성

좋아요 취소시

1. 유저의 drawings_array에서 해당 그림 id를 삭제한다.

• 아마도 리액트 쿼리 mutation을 써야할듯?
  (삭제하고 바로 하트 색도 setIsLike(false)로 바껴야하는데 array에서 id가 삭제되고 쿼리키가 무효화되고나면 setState도 자동으로 false로 바뀌지않을까?
  대신 useQuery부분에서의 queryFn이 로그인유저의 drawings_array를 가져오는 함수여야 할 것 같다. 그래야 쿼리키가 무효화되고 array가 최신화되지)

supabase에서 배열의 값과 일치하는 테이블의 값 가져오기

// ✅ detail-api.ts - palette ground 프로젝트 중

// painter의 다른 그림들 url 가져오기
export const getDrawingUrls = async (drawingIds: number[]) => {
  const response = await supabase
    .from("posts")
    .select("drawing_url")
    .in("id", drawingIds)
    .then(({ data: postsData, error }) => {
      if (error) throw error;
      const drawingUrls = postsData.map((post) => post.drawing_url);
      return drawingUrls;
    });
  return response;
};

// ✅ DrawingsByPainter.tsx - palette ground 프로젝트 중

// detail1 페이지에서 '유저가 그린 그림' 가져오기 부분

import React from "react";
import { useQuery } from "@tanstack/react-query";

import { getDrawingUrls } from "../detail-api/detail-api";

const DrawingsByPainter = ({ drawingIds }: { drawingIds: number[] }) => {
  // 유저가 그린 그림url 배열
  const {
    data: drawingUrls,
    isLoading,
    isError,
  } = useQuery({
    queryKey: ["drawingUrls"],
    queryFn: () => getDrawingUrls(drawingIds),
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return <div>Error</div>;
  }

  return (
    <>
      {/* 유저가 그린 그림 3 */}
      <div className="flex flex-col gap-2">
        <p className="text-sm font-semibold">🏆 유저가 그린 그림 Top 3</p>
        <div className="w-60 h-16  flex flex-wrap gap-2 items-center">
          <div className="w-[70px] h-full flex gap-2 ">
            {/* 그림 url 배열을 map으로 돌리기 */}
            {drawingUrls?.map((url: string, index): React.ReactNode => {
              return (
                <img
                  key={index}
                  src={url}
                  alt=""
                  className="max-w-full max-h-full rounded-md"
                />
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};

export default DrawingsByPainter;