[PWA]리뷰관리 admin 페이지 연동(2)

리뷰관리 admin 페이지 연동(2)

팀으로 협업을 하다보니, 내가 작업하고 있는것이 며칠씩 걸리면, 다른 사람들이 어디까지 개발했는지 알지 못하는 경우가 있다. 그래서 막상 내 작업분을 모두 완료시키고 git push하고 main의 코드도 pull해오면 그전에 없던 기능이 추가되있거나 기존의 코드가 수정되어있다. 그래서 그것들도 모두 한번씩 확인하다보면 시간이 많이 걸리는 것 같다.

어제까지만 하더라도 회원가입/로그인 기능이 없는채로 개발을 했다. 그래서 "작성자"에는 회원id 대신 리뷰id가 나오도록 했던것이다. 그런데 오늘 로그인이 추가된 코드를 git pull해서 currentUser useState를 추가하고, authorId라는 새로운 변수를 추가했다.

// 1. currentUser 상태와 useEffect로 사용자 정보 가져오기
  useEffect(() => {
    const user = JSON.parse(localStorage.getItem("currentUser") || "{}");
    setCurrentUser(user);
  }, []);


const [currentUser, setCurrentUser] = useState(null); // 로그인 사용자 정보

// 1. currentUser 상태와 useEffect로 사용자 정보 가져오기
  useEffect(() => {
    const user = JSON.parse(localStorage.getItem("currentUser") || "{}");
    setCurrentUser(user);
  }, []);
  
   const newReviewData = {
      id: Date.now(), // 고유 ID 생성
      shopId: shopId, // shopId를 추가하여 업체별로 리뷰를 구분
      shopName: shop?.name, // 업체 이름
      content: newReview, // 입력된 리뷰 내용
      rating: rating, // 평점
      date: new Date().toISOString(), // 현재 날짜와 시간
      authorId: currentUser?.id, // 작성자 ID 추가
    };
    
    ....
    
     {/* 두 번째 줄: userId */}
              <div className="mt-2 text-sm text-gray-700">
                {review.authorId || "알 수 없음"}
              </div>

1. currentUser 상태와 useEffect로 사용자 정보 가져오기

const [currentUser, setCurrentUser] = useState(null); // 로그인 사용자 정보

useEffect(() => {
const user = JSON.parse(localStorage.getItem("currentUser") || "{}");
setCurrentUser(user);
}, []);

⭐동작
: currentUser는 현재 로그인된 사용자의 정보를 관리하며, 리뷰 작성 시 작성자의 id를 기록하는 데 사용된다.
컴포넌트가 처음 렌더링될 때 useEffect가 실행되어 localStorage에서 currentUser 정보를 가져온다.
localStorage에 저장된 currentUser가 없으면 빈 객체({})로 초기화된다.
이후 setCurrentUser를 호출하여 currentUser 상태를 업데이트한다.

⭐결과
: 로그인된 사용자의 정보가 currentUser 상태에 저장된다.
이 정보는 리뷰 작성 시 작성자의 id를 기록하는 데 사용된다.

2. newReviewData 리뷰 데이터 객체 생성

const newReviewData = {
authorId: currentUser?.id, // 작성자 ID 추가
};

⭐동작
: 사용자가 입력한 리뷰 데이터를 기반으로 새로운 리뷰 객체를 생성한다.
authorId: 현재 로그인된 사용자의 id를 저장.

⭐결과
: 새로운 리뷰 데이터가 생성되어 localStorage에 저장되거나 상태로 관리된다.

3. 작성자 ID 표시

로그인기능 추가되기 전에 review.id 즉, 댓글id를 작성자 대신 임시로 출력했었는데, 작성자id로 변경하여 출력하였다.

⭐동작
: 리뷰 데이터에서 authorId를 가져와 작성자의 ID를 표시한다.
만약 authorId가 존재하지 않으면 "알 수 없음"이라는 기본값을 표시한다. 하지만 이는 authorId 작성자id가 등록되기 이전에 등록된 리뷰들에 한하며, id가 없다면 즉, 로그인이 안되어있다면 리뷰 등록이 불가하도록 수정하였다.

⭐결과
: 각 리뷰의 작성자가 누구인지 화면에 표시된다.
작성자가 없는 경우 "알 수 없음"으로 표시된다(앞으로는 안된다).

4. 리뷰 등록시 로그인 여부 확인

if (!currentUser || !currentUser.id) {
  alert("로그인 후 리뷰를 작성할 수 있습니다.");
  return;
}

조건을 추가하여, 리뷰 등록시 로그인이 안되어있다면 리뷰 등록이 안되고, 로그인을 해야만 리뷰를 등록할 수 있다.

5. 수정 및 삭제 버튼 조건

review.authorId === currentUser?.id 조건을 추가하여, 리뷰 작성자와 현재 로그인된 사용자가 동일한 경우에만 수정 및 삭제 버튼이 표시되도록 한다.

⭐⭐⭐전체 동작 흐름⭐⭐⭐

✔️ 로그인 사용자 정보 가져오기

컴포넌트가 렌더링될 때 useEffect를 통해 localStorage에서 로그인된 사용자 정보를 가져온다.
이 정보는 currentUser 상태에 저장된다.

✔️리뷰 작성

사용자가 리뷰를 작성하면 handleAddReview 함수가 호출된다.
새로운 리뷰 데이터가 생성되며, 작성자의 id는 currentUser.id로 설정된다.
생성된 리뷰 데이터는 localStorage에 저장되고, 상태(reviews)가 업데이트된다.

✔️작성자 정보 표시

리뷰 목록을 렌더링할 때, 각 리뷰의 authorId를 화면에 표시한다.
작성자가 없는 경우 "알 수 없음"으로 표시된다. 앞으로는 작성자가 없는 경우 댓글이 달리지 않는다.

마무리

이제 망고가 남긴 댓글은 mango라고 보이고 cherry가 남긴 댓글은 cherry라고 표기가 된다.

이건 홈페이지

이건 admin 페이지