[React] React + localStorage로 하루에 한 번만 보이는 팝업 만들기

이번 프로젝트에 설문조사 배너를 제작했는데… 흠… 뭔가 별로라는 의견이 많았다! (팀원들 의견) 🙄

디자인이 문제일까? 해서 래퍼런스를 많이 찾아봤는데 … !

일반 웹사이트는 설문조사 배너 자체를 안 만들어요,,,🤭 충격 그 자체 ( 난 아직 멀었음 )

그리고 알아보니깐.. 설문조사 배너는 사용자 경험을 해치기 쉬워 잘 쓰이지 않는다고 한다! 그래서 나는 모달 팝업 방식으로 전환하기로 결정했고 실무에서 자주 사용하는 패턴으로 구현했다.

방법

1. 직접 제작

2. UI 라이브러리의 Modal 컴포넌트 활용

3. 설문조사 전문 라이브러리 사용

이렇게 세가지가 존재하는데 나는 직접 제작을 선택했다.

👉🏻 참고한 블로그

구현과정

1. 어느 도메인에 넣을지 고민했다.

   • 설문조사가 서비스 흐름과 자연스럽게 연결되어야 했고

   • 로그인 유저를 대상으로 하며

   • 짧고 간단한 문항 위주라서 메인 도메인 내 모달로 구현하는 게 가장 적합하다고 판단했다.

2. 어디에 위치시킬지 고민했다.

   • 페이지별로 모달을 일일이 넣으면 관리가 어려워서

   • 공통 레이아웃 컴포넌트에 모달 컴포넌트를 넣어 전역에서 제어하는 방식을 선택했다.

   • 이렇게 하면 조건에 따라 어느 페이지에서든 자동으로 설문 모달을 띄울 수 있다.

결정

• 메인페이지에만 띄우려고 의도 했기 때문에 도메인/메인/컴포넌트/모달을 만들어주기로 결정했다.!

3. "오늘 하루 동안 이 창 보지 않기" 기능을 구현해주려고 한다.

   • localStorage를 이용해서 구현해주었다.

const handleDoNotShowToday = () => {
    const today = new Date().toDateString()
    localStorage.setItem('hideSurveyPopupUntil', today)
    setIsSurveyOpen(false)
  }

...
<SurveyModal
    isOpen={isSurveyOpen}
    onClose={() => setIsSurveyOpen(false)}
    onDoNotShowToday={handleDoNotShowToday}
/>

localStorage를 확인해줬더니 hideSurveyPopupUntil이 오늘 날짜로 들어있는걸 확인할 수 있었다.

이걸 삭제하면 다시 팝업이 나온다🤭

근데 여기서 고민을 한 부분이 …! 로그인을 하지 않았으면 팝업을 띄우면 안 되는거 아닌가?!라는 생각을 했다.

그래서 로그인을 했을 경우에만 팝업을 띄우기로 결정 !

여기서 요구사항 정의를 다시 살펴보면

• 로그인한 사용자만 모달을 본다.

• 메인페이지에서만 팝업창을 보여준다

• 사용자가 "오늘 하루 보지 않기" 버튼을 누르면, 당일은 다시 보이지 않는다.

로그인 했을 경우에만 팝업 띄우기

  useEffect(() => {
    if (!isAuthenticated) return

    const today = new Date().toDateString() 
    const hideUntil = localStorage.getItem('hideSurveyPopupUntil')

    if (hideUntil !== today) {
      const timer = setTimeout(() => {
        setIsSurveyOpen(true)
      }, 300)
      return () => clearTimeout(timer)
    }
  }, [isAuthenticated])

이 useEffect는 사용자가 로그인한 경우에만 설문조사 모달을 보여주기 위한 조건을 설정했다

1. isAuthenticated 확인

   • 로그인하지 않은 사용자에게는 모달을 띄우지 않기 위해 조기 return 해준다

2. 오늘 날짜 확인

   • new Date().toDateString()을 사용해 오늘 날짜를 문자열로 저장해주기

3. localStorage 값과 비교

   • 로컬 스토리지에서 hideSurveyPopupUntil 값을 가져와, 오늘 날짜와 다를 경우에만 모달을 띄운다

   • "오늘 하루 보지 않기"를 누른 사용자는 당일에 더 이상 모달을 보지 않음.(근데 로컬스토리지 삭제하면 다시 나옴!!!)

4. 0.3초 딜레이 후 모달 오픈

   • 사용자 경험을 위해 setTimeout으로 약간의 지연을 주고 모달을 보여줬다

   • return 문에서는 clearTimeout을 설정하여 컴포넌트 언마운트 시 타이머를 정리했다

작동이 잘 되는 것을 확인했다 !! ☺️

✨ 배운 점 & 느낀 점

설문조사 팝업을 로그인한 사용자에게만 하루에 한 번만 노출시키는 기능을 구현하면서 사용자 경험을 얼마나 섬세하게 설계할 수 있는지 느꼈다..

그리고 useEffect 내부에서 날짜를 비교하고 setTimeout과 clearTimeout을 함께 활용해 리소스 낭비를 줄이는 방식도 익혔는데 이런 디테일들이 모여 작지만 세심한 사용자 경험을 만드는 요소라는 점을 다시금 체감할 수 있었고 앞으로도 이런 작은 UX 요소를 놓치지 않도록 노력해야겠다고 느꼈다.