[Feat] chrome 브라우저 권장 alert

[lydiacho]

Related Issue : Closes #309

---

🧑‍🎤 Summary

크롬이 아닌 브라우저로 접속 시 크롬 브라우저 접속을 권장하는 alert을 띄웁니다.

🧑‍🎤 Screenshot

🧑‍🎤 Comment

1️⃣ 라이팅은 우선 원활한 지원을 위해 크롬(Chrome) 브라우저 사용을 권장드려요.로 제가 임의로 정했습니다!

2️⃣ 모바일/PC 검사는 페이지와 무관하게 1) 모든 페이지에서 2) 반드시 3) 유저를 쫓아내야 하기 때문에 App.tsx에서 실행해주었는데요, 브라우저 권장 alert과 같은 경우, 사용자를 쫓아내지 않고 계속 지원은 가능하게 만들 것이기 때문에 모든 렌더링 혹은 모든 페이지에서 매번 alert을 띄우면 UX가 너무 안좋아질거라고 생각했어요.
따라서 각 페이지 내에서 useEffect를 통해 마운트 시 alert을 한번만 띄우는 커스텀 훅을 만들어놨고,

const useCheckBrowser = () => {
  useEffect(() => {
    const isChrome = /Chrome/i.test(window.navigator.userAgent);
    if (!isChrome) {
      alert('원활한 지원을 위해 크롬(Chrome) 브라우저 사용을 권장드려요.');
    }
  }, []);
};

커스텀 훅을 SignedInPage 와 SignInPage 내에서 호출시켜주었습니다.
그 외의 페이지들에서는 사실 사파리로 접속해도 문제 될 부분들이 없어서,

• 사용자가 처음 접속했을 때 만나는 페이지와
• 브라우저로 인한 이슈가 발생하면 안되는 가장 위험한 페이지

이렇게 두 곳에서만 호출해주었습니다!

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[eonseok-jeon]

SignedInPage와 SignInPage가 모여있는 곳이 MainPage 입니다!
여기서 한 번에 처리해도 될 거 같아요~

근데 디자인 에러들이 실제 배포 환경에선 잘 작동을 한다면
safari를 권장하지 않는 곳은 apply page 한 곳만 되게 되는데요 (사진 엑박 이슈 등)

위와 같이 signIn, signedin에 해버리면
로그인 할 때 alert가 한 번 뜨고, my 페이지 접속할 때 또 한 번 뜨게 되어 불편해 할 거 같아요~
이후 결과 확인하려 들어올 때도 매번 뜨게 되고요

그래서 apply page에만 적용하는 건 어떤가요?? 혹시 제가 미쳐 놓친 부분이 있을까요?

[lydiacho]

@eonseok-jeon 놓치신 부분 없고
그정도의 반복적인 알럿은 보여줘도 된다 + 위험한 페이지 외에도 사용자가 최초 접속할 땐 무조건 보여준다 -> 이거였어요!
특히 최초 접속 시에 보여주고자 한 거는,
회원가입 -> 로그인 하고나서 지원서 작성페이지 도착 했을 때 알럿 보고 다시 크롬으로 재접속해서 재로그인하게 만들기보다
처음부터 알려줘서 일 두번하게 만들지 말기 위함이었는데요,

반복되는 알럿이 피로한 것도 완전 동의하는 부분이라 지원서작성 페이지에만 띄우는 것으로 수정해놓았습니다 ~~