[URECA] 픽미업: 복잡한 정보를 쉽게 전달하는 정치 참여 플랫폼 #10

📌 오늘의 작업 핵심 요약

• 토스트 바 UI 라이트 모드일때 바탕 색이 흰색으로 안보이는 오류 해결
• 리드미 사진 gif 로 변경
• 무소속 구주와 후보 사퇴로 인한 코드 변경 작업

Toast 알림 라이트 모드 대응 문제 해결기

병합하기 전에는 라이트 모드일때 토스트 알림이 검정색으로 잘 나타났다. 병합 한 후에는 라이트 모드에서 흰색으로 나타나는 오류 발생

react-hot-toast 라이브러리를 사용해 토스트 알림을 띄우고 있었는데, 다크모드에서는 잘 작동하지만 라이트 모드에서는 배경이 흰색으로 나오거나 스타일이 적용되지 않는 문제가 발생했다.

// Toaster 설정 (정상)
<Toaster
  position="bottom-center"
  toastOptions={{
    success: {
      className: 'toast-responsive',
    },
    error: {
      className: 'toast-responsive',
    },
  }}
/>

// toast 호출 예시
toast.success('후보자를 투표하세요!');

 

문제 원인

 

• toastOptions로 className: 'toast-responsive'를 지정해도 라이트 모드에서 스타일이 적용되지 않았다.
• CSS 파일에 @media (prefers-color-scheme: dark)가 남아 있었고, 이게 시스템 다크모드 설정에 따라 라이트 모드에서도 적용될 수 있었다.
• html.dark 클래스를 기준으로 다크모드를 적용했기 때문에, 라이트 모드용 스타일이 아예 없었던 것도 원인이었다.

해결 방법

1. 불필요한 미디어쿼리 삭제

/* 삭제해도 되는 부분 */
@media (prefers-color-scheme: dark) {
  .toast-responsive {
    background-color: rgba(255, 255, 255, 0.85);
    color: #000;
  }
}

 

 

2. html:not(.dark)를 활용한 라이트 모드 스타일 강제 적용

html:not(.dark) .toast-responsive {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
}

 

3. 최종 CSS 코드

.toast-responsive {
  font-size: 14px;
  padding: 12px 16px;
  max-width: 300px;
  width: 100%;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  z-index: 9999;
  position: relative;
}

/* 라이트 모드 */
html:not(.dark) .toast-responsive {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* 다크 모드 */
html.dark .toast-responsive {
  background-color: rgba(255, 255, 255, 0.7);
  color: #000;
}

결과 😮‍💨

• 다크모드에서는 흰 배경 + 검은 글씨
• 라이트모드에서는 검정 배경 + 흰 글씨
• 모든 환경에서 토스트 스타일이 일관되게 잘 적용됨!

📝 멤오

 

• react-hot-toast는 클래스 기반 커스터마이징이 가능하므로, 공통된 스타일을 toastOptions에서 잘 관리하는 것이 중요하다.
• 다크모드는 html.dark 클래스 기반 또는 prefers-color-scheme 중 하나로 통일하는 것이 충돌을 줄일 수 있다.
• 스타일 변경 후에는 개발 서버 재시작 & 브라우저 캐시 초기화 (Ctrl+Shift+R) 필수!

README 개선

• 리드미 내 주요 화면 이미지를 정적 PNG → GIF로 변경하여 더 직관적으로 UX 전달

 데이터/로직 변경

• 무소속 후보(구주와) 사퇴 반영하여 관련 코드 수정 (주석 처리해뒀다.)

🎠 회고

내일이 최종 발표일이다.
프로젝트를 하다 보니 2주가 순식간에 지나가버렸다. 이상하게도 마음은 평온하다.
오늘까지 최선을 다했고, 결과보다는 과정이 더 중요하다는 걸 느꼈다.

팀원들과 함께 달려온 이 여정, 내일 발표가 오류 없이 잘 마무리되길 바란다.
🔥 2주 동안 열심히 달려온 이 프로젝트, 오늘로 모든 준비는 사실상 끝났다.

커몽!