TIL_0601

리액트로 mbti게임을 만들었다 (하이브리드 웹/앱)
기획&설계팀의 부족함으로 브라우저 back버튼 설계와 개발할 때 back버튼의 history가 다른 이슈가 발생하여 꽤나 번거로운 수정작업을 진행했었다.

그 와중에 mbti게임 부분의 back 관련 이슈를 내가 수정하게되었다.
어느정도 담당하고 있기도 했었으니!

params로 url도 분리하고 시작화면, 실제 게임 진행화면, 결과 화면 등등 문제없이 되는 듯 하였으나 back관련하여 해결되지 않는 문제가 있었고 끝끝내 해결할 방안으로

document.referrer를 선택!

간단했다.

1. 직전주소를 가져와서 state에 보관

• 꼭 document.referrer이 있을 경우 조건을 추가해줘야 한다. 직전 주소가 없을 경우 URL error가 나타날 수 있기 때문

// 직전 주소 가져오기
  const [prevUrl, setPrevUrl] = useState('')
  useEffect(()=>{
    if(document.referrer){
      const referrerURL = new URL(document.referrer);
      setPrevUrl(referrerURL.pathname.replace('/',''));
    }
  },[id, navigate])

2. 내가 만든 CHeader컴포넌트의 back이동 시 함수에 조건을 넣어주었다.

• handleMainIcon의 함수에 넣어주었다
• header만다 들어가는 타이틀, 아이콘, 함수들이 제각각이라서 컴포넌트로 만들어서 팀에 공유했는데 굊아히 뿌듯..^^(나의 첫 컴포넌트 생성과 배포 과정이였다 가이드만드는 법도 나중에 기록해둬야지!)

 const options: any = {
    showMainIcon: 'back',
    handleMainIcon: ()=>{
      // console.log(prevUrl);
      if(prevUrl === `${PATH_ROOT.contents.mbti + '/' + mbtiStore.mbti.mbtiSid + '/start'}` || `${PATH_ROOT.contents}`){        
        navigate(-3)
      } else {
        navigate(-1)}
    },
    showHomeIcon: true,
    showCartIcon: true,
  };

끄읏..! 앞으로도 화이팅..! TIL이 많고 뿌듯해서 기록!