[React] Day_54 팀 프로젝트 작업 관련 트러블슈팅 (2)

 

 

오늘 한거 암것도 없는데

... 왜 나는 지친거지?

여튼 오늘도 정리 좀 할게요

레츠고

 

Mypage - 마이페이지 이미지 URL 생성 및 닉네임 업데이트 오류 관련 뜨라블 슈팅

 

문제 상황

 

1. 이미지 URL 생성 오류

- Supabase를 통해 프로필 이미지 업로드 후, Auth 테이블에 업데이트하려고 했지만..

(심지어 Supabase 업로드는 잘된당 ㅇㅅㅇ)

 

  잘못된 테이블 이름을 사용하여 오류가 발생

why!!!

 

기존 코드

// MyPage.jsx 내부 코오드 발췌 
const { error } = await supabase
  .from("images") // 잘못된 테이블 이름
  .update({ img_url: newImageUrl }) 
  .eq("id", userId);

 

 

2. 닉네임 업데이트 핸들러 오류

- 닉네임 업데이트 핸들러에서 data를 제대로 처리하지 못하고 nickname 변수를 중복 선언

   or 데이터가 전달되지 않는 이슈로 인한 업데이트 실패

 

기존 코드

const handleNicknameUpdate = async (nickname) => { // 잘못된 함수 시그니처
  const { nickname } = data; // 오류 발생
  ...
};

 

 

원인 분석

 

1. 이미지 URL 생성 오류 원인

- 데이터베이스 테이블 이름 → images로 지정, 실제 테이블 이름은 users

   잘못된 테이블 이름으로 인해 업데이트 요청이 실패했습니다.

 

2. 닉네임 업데이트 핸들러 오류 원인

- handleNicknameUpdate 함수의 파라미터에서 data를 받아야 하지만,

   nickname을 직접 받아서 처리하려다 data를 참조하는 부분에서 에러 발생

 

 

해결 방법

 

1. 이미지 URL 생성 오류 수정

- 데이터베이스 테이블 이름을 users로 수정 → 올바른 테이블에 데이터를 업데이트하도록 변경

 

수정된 코드

const { error } = await supabase
  .from("users") // 올바른 테이블 이름
  .update({ img_url: newImageUrl }) 
  .eq("id", userId); 
if (error) throw error;

 

 

2. 닉네임 업데이트 핸들러 수정수정된 코드

- handleNicknameUpdate 함수에서 올바르게 data를 받아 처리하도록 수정

 

수정된 코드

const handleNicknameUpdate = async (data) => {
  const { nickname } = data; // 올바르게 data에서 nickname 추출
  try {
    await updateUserNickname(user.id, nickname); // Supabase DB 업데이트
    dispatch(setUser({ ...user, nickname })); // Redux 상태 업데이트
    alert("닉네임이 성공적으로 업데이트되었습니다.");
  } catch (error) {
    console.error(error);
    alert("닉네임 업데이트 중 오류가 발생했습니다.");
  }
};

 

 

결과

 

히히 완료했당

 

1. 이미지 URL 생성 문제 해결

- 테이블 이름을 users로 수정, 데이터베이스의 올바른 테이블에 업데이트 진행

- 프로필 이미지 업로드 후 URL이 제대로 저장 및 RTK에 반영

 

2. 닉네임 업데이트 핸들러 문제 해결

- data를 올바르게 받아 처리하여 닉네임 업데이트가 정상적으로 동작

- UX 측면에서 업데이트 후 성공 메시지가 제대로 표시되도록 수정

 

 

트러블 슈팅 기록

 

1. 문제 발생

- 이미지 URL 업데이트가 실패하고, 닉네임 업데이트 핸들러에서 에러가 발생.

 

원인 : 잘못된 테이블 이름(images 대신 users). 닉네임 업데이트 함수의 잘못된 파라미터 처리.

 

2. 수정 작업

이미지 업데이트 부분에서 테이블 이름 → users로 변경.

닉네임 업데이트 핸들러에서 data를 올바르게 처리하도록 수정.

 

3. 결과

이미지 및 닉네임 업데이트가 정상적으로 작동.

사용자 경험 개선 및 오류 로그 확인 가능.

 

 

최종 코드 요약

 

- 이미지 URL 업데이트

const { error } = await supabase
  .from("users") // 테이블 이름 수정
  .update({ img_url: newImageUrl }) 
  .eq("id", userId);
if (error) throw error;

 

- 닉네임 업데이트 핸들러

const handleNicknameUpdate = async (data) => {
  const { nickname } = data;
  try {
    await updateUserNickname(user.id, nickname); // Supabase DB 업데이트
    dispatch(setUser({ ...user, nickname })); // Redux 상태 업데이트
    alert("닉네임이 성공적으로 업데이트되었습니다.");
  } catch (error) {
    console.error(error);
    alert("닉네임 업데이트 중 오류가 발생했습니다.");
  }
};

 

 

 

약관 모달 - 약관 모달(TosModal)과 Map 컴포넌트 겹침 현상 관련 뜨라블 슈팅

 

문제 상황

 

약관 모달(TosModal)을 열었을 때, 지도(Map)가 모달보다 위에 렌더링되어 약관 모달 내용을 가리는 현상 발생.

이로 인해 약관의 내용이 제대로 보이지 않는 문제가 있었습니다.

 

 

원인 분석

 

이슈의 원인은 지도(Map) 컴포넌트가 약관 모달보다 높은 z-index 값을 가지고 렌더링되었기 때문

ReactDOM.createPortal로 모달을 DOM 계층 외부로 렌더링했으나,

지도(Map) 컴포넌트와 동일한 DOM 컨텍스트 내에 있는 경우 z-index 우선순위에 따라 겹침 현상이 발생할 수 있음

 

 

해결 방법

 

약관 모달의 z-index 값 지도(Map)보다 높게 설정 → 겹침 현상 방지

모달의 배경 오버레이와 콘텐츠 모두에 z-index를 추가로 설정 → 레이아웃 우선순위를 명확하게 정의

 

수정된 코드

 

1 . 모달의 z-index 설정:

- 모달 배경 오버레이에 { z-index: 1050 }을 추가, 지도의 z-index를 덮도록 설정.

- 모달 콘텐츠에도 명시적으로 { z-index: 1051 }을 설정, 배경보다 위에 렌더링되도록 함.

return ReactDOM.createPortal(
  <div
    className="fixed top-0 left-0 w-full h-screen bg-black bg-opacity-50 flex items-center justify-center"
    style={{ zIndex: 1050 }} // 지도보다 높은 z-index 설정
    onClick={onClose}
  >
    <div
      className="bg-white rounded-[20px] w-3/4 max-w-lg p-9 relative overflow-y-auto max-h-[80vh]"
      style={{ zIndex: 1051 }} // 배경보다 높은 z-index 설정
      onClick={(e) => e.stopPropagation()}
    >
      <h2 className="text-[28px] text-[#333] mb-8">위치기반서비스 이용약관</h2>
      <p className="text-[16px] text-[#666] font-medium leading-7">
        {/* 약관 내용 */}
      </p>
      <button
        className="absolute top-10 right-4 text-[#666] hover:text-[#333] text-[32px]"
        onClick={onClose}
      >
        <IoClose />
      </button>
    </div>
  </div>,
  document.getElementById("portal-root")
);

 

2. CSS 업데이트

- 지도 컴포넌트의 z-index 값이 낮다 → 추가 작업 없이 모달이 제대로 표시

- 지도 컴포넌트의 z-index 값이 높다 → 약관 모달보다 낮은 값으로 조정 필요

 

결과

 

 

약관 모달(TosModal)이 지도(Map) 컴포넌트보다 위에 올바르게 표시

지도 컴포넌트와 약관 모달 간의 z-index 우선순위가 명확하게 설정 → 겹침 현상 해결

 

 

결론

 

이슈 = 모달과 지도 간의 z-index 충돌로 인해 발생한 문제

문제 해결 = 모달 배경과 콘텐츠에 z-index를 명시적으로 추가

ReactDOM.createPortal로 DOM 계층을 분리 + 시각적 우선순위를 올바르게 설정하기