240830

FACTS(사실, 객관) : 내가 한 일

스파르타 오버플로우 팀플3일차. .

1.

어제 막혔던 부분을 드디어 고쳤다! 메인에서 게시글 리스트를 클릭했을 때, 게시글 페이지가 아닌 게시글 수정페이지로 바로 갔던 문제!!

<StBtn onClick={handleEditPostMove(posts.id)}>수정</StBtn>

 

바로 이 부분이었는데 

이 코드 때문에 디테일페이지에서 클릭했을 때 페이지로 이동하는 것이 아니라 StBtn이 단순 렌더링되어도 함수가 바로 호출되어 페이지가 이동한 것.. 즉, 디테일 페이지를 들어가면 페이지가 렌더링되며 저 핸들에딧포스트무브 함수가 바로 호출되어 디테일 페이지를 확인할 새도 없이 수정페이지로 넘어갔던 것..

<StBtn onClick={() => handleEditPostMove(posts.id)}>수정</StBtn>

 

해결방법은 억울할 정도로 간단했다 onClick안에 화살표 함수를 넣어주면 됐다 !!!!

 

2.

처음으로 supabase의 정보를 가져오는걸 했다. 감사하게도 처음에 팀원분들이 먼저 다 세팅을 해주셔서 여태까지 사용할 일 없었는데 작성자 정보를 가져오는 과정에서 필요하게 됐다. 방법이 이해가 안가서 이미 있던 게시글 정보 가져오기에서 복사해 사용했는데 이걸 userinfo에 맞게 수정해야 했다.

//작성자 정보
    const fetchAuthor = async (userId) => {
      const { data, error } = await supabase
        .from("userinfo")
        .select("id, created_at, email, username, profileImage")
        .eq("id", userId)
        .single();
      if (error) {
        console.log("error =>", error);
      } else {
        console.log("post data =>", data);
        setUserInfo(data);
      }
    };

    fetchAuthor();
    }, [id]);

 

useEffect안에 넣은 작성자정보만 가져오면 이렇다. 처음엔 setUserInfo(data)부분을 복사해온 그대로 setPost(data)를 사용하고 있어서 오류가 나고 이유를 찾지 못했는데 위에 이 작성자 정보들을 관리해줄 state가 없어서 그런것이었다. (물론 usePost를 그대로 쓴것도 잘못됐지만.)

const [userInfo, setUserInfo] = useState([]);

 

상단에 이렇게 선언해주고 사용하니 오류없이 잘됐다! 고 생각했는데 아니었고 undefined가 뜨고있었다. 이유는 작성자 정보를 가져오기만 하고 게시글 정보에 함께 로드해 주지 않아서..

//게시글 정보
    const fetchPosts = async () => {
      const { data, error } = await supabase
        .from("Post")
        .select("*")
        .eq("id", id)
        .single();
      if (error) {
        console.log("error =>", error);
      } else {
        console.log("post data =>", data);
        setPosts(data);

        // 작성자 정보 로드
        if (data.userId) {
          fetchAuthor(data.userId);
        }
      }
    };

 

이렇게 작성자 정보 로드를 추가해주고 나서야 정상적으로 표시됐다!

그리고 메인페이지에도 동일하게 각 글의 작성자 정보(작성자명과 프로필이미지)를 가져와야 해서 그대로 긁어다가..

useEffect(() => {
    //게시글 리스트 정보
    const fetchPosts = async () => {
      const { data, error } = await supabase.from("Post").select("*");
      if (error) {
        console.log("error =>", error);
      } else {
        console.log("post data =>", data);
        setPosts(data);

        // 작성자 정보 로드
        if (data.userId) {
          fetchAuthor(data.userId);
        }
      }
    };
    fetchPosts();

    //작성자 정보
    const fetchAuthor = async (userId) => {
      const { data, error } = await supabase
        .from("userinfo")
        .select("id, created_at, email, username, profileImage")
        .eq("id", userId)
        .single();
      if (error) {
        console.log("error =>", error);
      } else {
        console.log("post data =>", data);
        setUserInfo(data);
      }
      console.log(userInfo);
    };
  }, []);

 

가져왔는데 오류가 뜬다.. 인자를 리스트로 보내줘도 안돼고 undefined가 뜬다.,

 

3.

삭제기능 구현도 마쳤다.

https://velog.io/@leeboa2003/Supabase%EB%A1%9C-CRUD-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

Supabase로 CRUD 구현하기

이 분의 글을 아주 많이 참고해 수정했다. 

const handleDeletePost = async (postId) => {
    const { error } = await supabase.from("Post").delete().eq("id", postId);
	if (error) {
      console.error("게시글 삭제 오류:", error);
    } else {
      alert("게시글이 삭제되었습니다.");
      navigate("/");
    }
  };

 

이렇게 삭제 함수를 완성했다

수정한 부분은 삭제하고 나서. 참고한 투두리스트와는 다르게 여기선 사용자가 보고있는 게시글이 삭제되면 더이상 해당 게시글 페이지에 머물 수 없어 사용자를 다른페이지로 이동시켜줘야했는데 일단 리스트가 뿌려지는 메인페이지로 이동할 수 있게 해놨다. 

그리고 여기에 삭제하기 전, 확인받는 alert를 추가했다.

const handleDeletePost = async (postId) => {
    let reallyDelete = confirm("정말 삭제하시겠습니까?");
    if (reallyDelete === true) {
      const { error } = await supabase.from("Post").delete().eq("id", postId);

      if (error) {
        console.error("게시글 삭제 오류:", error);
      } else {
        alert("게시글이 삭제되었습니다.");
        navigate("/");
      }
    } else {
      return;
    }
  };

 

잘 된다!

 

이제 해야할 것

- css(레이아웃 맞추기)

- 메인페이지 게시글 리스트에 작성자 정보 가져오기

 

---

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

 

---

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

supabase로 crud 구현하기 > 삭제부분

supabase에서 정보 가져오기

---

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지