[MBTI-Test PJ_Day 3] Visibility, isOwner

티스토리 뷰

Project

[MBTI-Test PJ_Day 3] Visibility, isOwner

채._. 2025. 2. 25. 11:53

하루 종일 걸렸던 visibility.. 꿈에서도 나올 단어

2025.02.24 (월) Works

MBTI 테스트 결과 페이지를 구현해야 한다.

같은 서버를 이용하는 사람들의 테스트 결과를 모아볼 수 있으며 작성자는 자신의 결과만을 공개 / 비공개 / 삭제 처리 할 수 있다.

이는 다른 사람의 브라우저에도 반영되어야 하므로 화면에서만 동작하는 것이 아닌 DB에 변동 사항을 적용해야 한다.

json-server

(클릭) 이전에 작성한 JWT 인증 방법은 토큰을 이용하여 auth API에서 회원 정보를 관리했다면,

테스트 결과는 json API를 이용하여 테스트 결과를 생성하고(C), 가져오고(R), 업데이트하고(U), 삭제(D)해야했다.

따라서 새로운 API 문서를 바탕으로 연결 로직을 작성하고, 해당 내용을 사용했다.

// theResults.js

import axios from "axios";

const jsonApi = "http://localhost:5000/testResults";

export const getTestResults = async () => {
  const response = await axios.get(jsonApi);
  return response.data;
};

export const createTestResult = async (resultData) => {
  const response = await axios.post(jsonApi, resultData);
  return response.data;
};

export const deleteTestResult = async (id) => {
  const response = await axios.delete(`${jsonApi}/${id}`);
  return response.data;
};

export const updateTestResultVisibility = async (id, visibility) => {
  const response = await axios.patch(`${jsonApi}/${id}`, { visibility });
  return response.data;
};

요구 조건과 구현 방법

요구 조건과 구현 방법을 생각해보았다.

두 개의 버튼은 작성자만이 볼 수 있어야 한다. 👉🏻[isOwner] 결과 카드에 저장된 userId와 현재 사용자의 userId를 비교하기
현재 화면과 DB 모두에서 카드를 삭제한다. 👉🏻[visibility] 화면: filter 함수 사용하기. DB: delete API 로직 사용하기
공개/비공개로 전환되어야 한다. 👉🏻[visibility] visibilty로 전환 제어

visibility

🤔 고민

이 모든 것들을 어떻게 해야하나...!! 정말 고민이 많았지만

우선 공개/비공개 여부는 상태가 계속 변동되어야 한다는 것이라는 생각이 들었다.

따라서 isVisibility를 state로 관리했다.

setState를 이용해서 관리하지 않으면 내용이 변할 때마다 새로고침을 해주어야 화면에 적용이 된다.

  const [isVisibility, setIsVisibility] = useState(false);

초기값을 false로 주어 테스트 등록 시 비공개 상태로 두었다.

테스트 페이지에서 카드를 생성할 때에도 (createTestResult) false로 두었다.

const resultsData = await createTestResult({
      nickname: userInfo.nickname,
      result: mbtiResult,
      visibility: false,
      date: formattedDate,
      userId: userInfo.id,
    });

둘의 차이는 state : 화면에서 전환 담당 / create : DB에서 전환 담당 이다.

즉, 화면에서의 변화는 isVisibility를 반대 값으로 주어야 하고, DB에서의 변화는 visibility의 값을 반대로 주어야 한다.

📌 해결

📍 DB에서 결과값 가져오기

공개 여부가 바뀔 때마다 DB에서 변동된 값을 새로 불러와 반영해야 하기 때문에 useEffect 사용

// DB: 결과값 가져오기
  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getTestResults();
        setCards(data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };
    fetchData();
  }, [isVisibility]);

📍 공개 비공개 전환

버튼에 onClick 이벤트를 주어 핸들링했다.

update- API 로직을 사용하여 DB에 반영하고 setState를 이용하여 화면에 반영했다.

  // 공개 비공개 전환
  const handleVisibility = async (card) => {
    await updateTestResultVisibility(card.id, !card.visibility);
    setIsVisibility(!isVisibility);
  };

📍 공개 비공개 리스트

카드 리스트도 state로 관리 중이기 때문에 전체 cards 배열을 filter메서드로 정렬했다.

|| 는 좌측, 우측 둘 중 하나만 만족해도 true를 반환하기 때문에

카드 하나의 visibility가 true이거나, 카드의 userId와 로그인 한 사용자의 id 가 같을 경우를 두었다.

  const [cards, setCards] = useState([]);


// 공개 비공개 리스트 filter -> 카드 그리는 map에 사용
  const viewCards = cards.filter((card) => {
    return card.visibility || card.userId === userInfo.id;
  });

📍 카드 삭제

위와 같은 confirm 창을 띄워 '확인'을 클릭한다면 (true라면)

delete- API 로직을 이용하여 DB에 반영하고 setState로 화면까지 구성한다.

// 카드 삭제
  const deleteCard = (cardId) => {
    const alertResult = window.confirm("정말 삭제하시겠습니까?");
    if (alertResult === true) {
      deleteTestResult(cardId);
      setIsVisibility(!isVisibility);
    }
  };

isOwner

isOwner는 사용자를 감지하여 작성자에게만 두 버튼을 보여주도록 하는 변수로 지정하였다.

처음에는 함수로 따로 빼고 이를 버튼 부분에 적용하려 하였다.

❌잘못된 방법❌ 

// 작성자 글에만 버튼 표시하기
  const isOwner = cards.some((card) => {
    return card.id === userInfo.id;
  });
  console.log("isOwner", isOwner);

  return (
  ...
   {!isOwner ? (
                <></>
              ) : (
                <div className="flex justify-end gap-3 mt-3 mr-5">
                  {card.visibility ? (
                    <button className="px-[20px] py-[8px] text-white bg-blue-500 rounded-full hover:bg-opacity-0 hover:text-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-400 font-semibold hover:bg-primary-dark transition duration-300">
                      비공개로 전환
                    </button>
                  ) : (
                    <button className="px-[20px] py-[8px] text-white bg-blue-500 rounded-full hover:bg-opacity-0 hover:text-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-400 font-semibold hover:bg-primary-dark transition duration-300">
                      공개로 전환
                    </button>
                  )}

하지만 이렇게 하면 사용자가 작성한 모든 카드에서 isOwner ===true가 되어 제대로 작동하지 않았다.
따라서 각 카드(card.id)가 현재 로그인한 유저(userInfo.id)와 일치하는지 개별적으로 확인해야 했다.

아래와 같이 isOwner를 map 내부에서 선언하고

&&를 사용하여 isOwner가 true 일 때 (사용자와 카드의 id가 일치할 때) 버튼을 보이게 했다.

{viewCards.map((card) => {
        const isOwner = card.userId === userInfo.id; // 개별 카드 기준으로 작성자 확인
        return (
        ...
         {/* 카드에 있는 visibility로 작성자에게만 버튼 표시 */}
                {isOwner && (
                  <div className="flex justify-end gap-3 mt-3 mr-5">
                    {card.visibility ? (
                      <button
                        onClick={() => handleVisibility(card)}
                        className="px-[20px] py-[8px] text-white bg-blue-500 rounded-full hover:bg-opacity-0 hover:text-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-400 font-semibold hover:bg-primary-dark transition duration-300"
                      >
                        비공개로 전환
                      </button>
                    ) : (
                      <button
                        onClick={() => handleVisibility(card)}
                        className="px-[20px] py-[8px] text-white bg-blue-500 rounded-full hover:bg-opacity-0 hover:text-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-400 font-semibold hover:bg-primary-dark transition duration-300"
                      >
                        공개로 전환
                      </button>
                    )}
                    <button
                      onClick={() => deleteCard(card.id)}
                      className="px-[20px] py-[8px] text-white bg-red-500 rounded-full hover:bg-opacity-0 hover:text-red-500 focus:outline-2 focus:outline-offset-2 focus:outline-red-400 font-semibold hover:bg-primary-dark transition duration-300"
                    >
                      삭제
                    </button>
                  </div>
                )}

📌 TestResultList.jsx 전체 로직

import { useContext, useEffect, useState } from "react";
import {
  deleteTestResult,
  getTestResults,
  updateTestResultVisibility,
} from "../api/testResults";
import { mbtiDescriptions } from "../utils/mbtiCalculator";
import { AuthContext } from "../context/AuthContext";
import { getUserProfile } from "../api/auth";

const TestResultList = () => {
  const [cards, setCards] = useState([]);
  const [isVisibility, setIsVisibility] = useState(false);
  const { userInfo, setUserInfo, token } = useContext(AuthContext);

  // userInfo 가져오기 : isOwner에 필요
  useEffect(() => {
    const fetchUserInfo = async () => {
      try {
        const data = await getUserProfile(token);

        setUserInfo({
          id: data.id,
          nickname: data.nickname,
        });
      } catch (error) {
        console.log("Faild to fetch user info", error);
      }
    };
    fetchUserInfo();
  }, []);

  // DB: 결과값 가져오기
  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getTestResults();
        setCards(data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };
    fetchData();
  }, [isVisibility]);

  // 공개 비공개 전환
  const handleVisibility = async (card) => {
    await updateTestResultVisibility(card.id, !card.visibility);
    setIsVisibility(!isVisibility);
  };

  // 공개 비공개 리스트 filter -> 카드 그리는 map에 사용
  const viewCards = cards.filter((card) => {
    return card.visibility || card.userId === userInfo.id;
  });

  // 카드 삭제
  const deleteCard = (cardId) => {
    const alertResult = window.confirm("정말 삭제하시겠습니까?");
    if (alertResult === true) {
      deleteTestResult(cardId);
      setIsVisibility(!isVisibility);
    }
  };

  return (
    <div className="flex flex-col items-center justify-center mx-auto md:w-[70%] w-[90%]">
      {cards.length === 0 ? (
        <div className="text-center mt-[80px] mb-[30px]  text-[23px] text-[#475da1]">
          아직 공유된 검사 결과가 없습니다. <br />
          가장 먼저 mbti 검사 결과를 공유하세요 !
        </div>
      ) : (
        <div className="mt-[60px] mb-[30px] text-[27px] font-bold text-[#4b86cd]">
          다른 사람들의 MBTI도 궁금해 !
        </div>
      )}
      {viewCards.map((card) => {
        const isOwner = card.userId === userInfo.id; // 개별 카드 기준으로 작성자 확인
        return (
          <div
            key={card.id}
            className="w-[95%] m-[15px] bg-[#474E93] rounded-lg"
          >
            <div className="p-[20px] shadow-lg">
              <div className="flex flex-col justify-between md:flex-row p-2 border-b-[1px]">
                <div className="text-[20px] font-bold text-violet-200">
                  {card.nickname}
                </div>
                <p className="font-light text-violet-200">{card.date}</p>
              </div>
              <div className="py-2">
                <div className="p-2 text-[30px] text-[#fcff97] font-extrabold">
                  {card.result}
                </div>
                <div className="font-light text-violet-200">
                  {mbtiDescriptions[card.result]}
                </div>

                {/* 카드에 있는 visibility로 작성자에게만 버튼 표시 */}
                {isOwner && (
                  <div className="flex justify-end gap-3 mt-3 mr-5">
                    {card.visibility ? (
                      <button
                        onClick={() => handleVisibility(card)}
                        className="px-[20px] py-[8px] text-white bg-blue-500 rounded-full hover:bg-opacity-0 hover:text-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-400 font-semibold hover:bg-primary-dark transition duration-300"
                      >
                        비공개로 전환
                      </button>
                    ) : (
                      <button
                        onClick={() => handleVisibility(card)}
                        className="px-[20px] py-[8px] text-white bg-blue-500 rounded-full hover:bg-opacity-0 hover:text-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-400 font-semibold hover:bg-primary-dark transition duration-300"
                      >
                        공개로 전환
                      </button>
                    )}
                    <button
                      onClick={() => deleteCard(card.id)}
                      className="px-[20px] py-[8px] text-white bg-red-500 rounded-full hover:bg-opacity-0 hover:text-red-500 focus:outline-2 focus:outline-offset-2 focus:outline-red-400 font-semibold hover:bg-primary-dark transition duration-300"
                    >
                      삭제
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default TestResultList;

'Project' 카테고리의 다른 글

[Outsourcing_Day 1] HotPlace In Seoul 🔥 (0)	2025.02.27
[MBTI-Test PJ_Final] MBTI Test (0)	2025.02.25
[MBTI-Test PJ_Day 2] JWT 인증 API 연결 (0)	2025.02.25
[MBTI-Test PJ_Day 1] Tailwind 공통 컴포넌트 스타일링 (1)	2025.02.21
[NewsFeed-Final] FootPrint👣 (1)	2025.02.18

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/03 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

개발 🐾

티스토리 뷰