[FE] main 페이지 연결

[soi-ha]

issue

• close [FE] main 페이지 연결 #985

구현목적

main 페이지(구, 라운지)가 생성되면서 사용자 flow가 다음과 같이 변경되었습니다.

회원일 경우

• 랜딩페이지 →토큰O/로그인 → 메인 페이지
• 홈&관리 화면 → 흔듯콘 클릭 → 메인 페이지

비회원일 경우

• 랜딩페이지 → 행사 생성
• 홈&관리 화면 → 흔듯콘 클릭 → 랜딩페이지

따라서 변경된 사항에 맞게 페이지 연결을 다시 진행했습니다.

구현 사항

회원일 경우, 랜딩페이지에서 메인 페이지로 연결

LandingPage의 Nav에서 회원일 경우 행사 생성 페이지로 넘어가도록 연결했습니다.
이 부분을 행사 생성이 아닌 메인 페이지로 연결되도록 변경했습니다.

access_token 발급 직후, 메인 페이지로 연결

현재 access_token이 존재하지 않는다면, 카카오 로그인 페이지로 이동됩니다. 회원 가입 혹은 회원 로그인을 진행하면 메인 페이지가 아닌 행사 생성 페이지로 redirect되고 있습니다.

⇒ 해당 문제는 쿠키가 해결해줬습니다! #987

회원 유무에 따른 홈&관리 화면에서 흔듯콘을 클릭하면 이동되는 페이지 다르도록 연결

• 회원일 경우, 홈&관리 화면에서 흔듯콘을 클릭하면 메인 페이지로 연결
• 비회원일 경우, 홈&관리 화면에서 흔듯콘을 클릭하면 랜딩페이지로 연결

기존에는 onClick이 아닌 routePath를 활용하여 이동하고 있었습니다.

routePath를 활용하여 회원 유무에 따른 이동을 진행할 예정이었습니다만, 다음과 같은 에러가 발생했습니다.

A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

해당 에러를 해석하면 다음과 같습니다.

동기적인 이벤트 처리 중 컴포넌트가 suspend되면 UI가 비정상적으로 로딩 화면으로 대체될 수 있으므로 startTransition을 사용하여 비동기 작업으로 처리하면 이러한 문제를 완화할 수 있습니다.

위 에러를 바탕으로 startTransition을 활용하여 해결하려고 했으나 지속적으로 같은 에러가 발생했습니다. 이런 문제가 발생하는 이유로는 추측하기론.. TopNav에서 useNavItem 훅을 사용하는데, 해당 훅 안에서 routePath를 활용하여 getUrl을 진행하거나 navigate를 변경하는 로직이 존재합니다. 그렇기에 routePath가 고정된 값이 아닌 조건에 따라 유동적인 값이 되도록 작성해줬기 때문에 위와 같은 에러가 지속적으로 발생하는 것이 아닐까.. 추측해보았습니다.. (진짜 추측이라.. 확실한 이유는 모릅니댜..)

따라서 TopNav에서 routePath가 아닌 onClick도 사용할 수 있어서, onClick을 활용하여 회원 유무에 따라 path가 달라질 수 있도록 구현했습니다.

 const handleClickNavigateIconByUserStatus = () => {
    navigate(isGuest ? ROUTER_URLS.landing : ROUTER_URLS.main);
  };
 
 <TopNav.Icon onClick={handleClickNavigateIconByUserStatus} component={<IconHeundeut />} />

🫡 참고사항

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-ksepynznox.chromatic.com/

[Todari]

변경된 부분 확인했습니다~!
고생했어용

[jinhokim98]

조스입니다! routePath를 사용하는 것이 통일성이 있지만, 작동하지 않으면 onClick을 써서 작동하게 하는 것이 맞다 봐요. 차후에 원인을 수정해봐도 좋을 듯 합니다.

[pakxe]

useNavItem을 사용하는 TopNa에 onClick 함수를 넘겨주는 식으로 라우팅을 진행하고 있다고 쓰여있는데요!

 const handleClickNavigateIconByUserStatus = () => {
    navigate(isGuest ? ROUTER_URLS.landing : ROUTER_URLS.main);
  };
 
 <TopNav.Icon onClick={handleClickNavigateIconByUserStatus} component={<IconHeundeut />} />

routePath에 삼항연산자 string을 넘겨줘서 해결할 수 있을 것 같아요. TopNavItem에 onClick인자를 둔 이유는 경로 이동이 아닌 다른 동작을 한다면 onClick을 이용할 수 있도록 가능성을 열어둔 것입니다. 그래서 만약 조건에 따라 다른 '경로로 이동시키고 싶다면, routePath=state?'/a':'/b/형태로 이용할 수 있을 것 같아요.

const [is, setIs] = useState(false)

<TopNav.Text routePath={is ? '/a' : '/b'} textSize="subTitle" isEmphasis={true}> ...

---

안되네요...! 😱😭

[soi-ha]

useNavItem을 사용하는 TopNa에 onClick 함수를 넘겨주는 식으로 라우팅을 진행하고 있다고 쓰여있는데요!

 const handleClickNavigateIconByUserStatus = () => {
    navigate(isGuest ? ROUTER_URLS.landing : ROUTER_URLS.main);
  };
 
 <TopNav.Icon onClick={handleClickNavigateIconByUserStatus} component={<IconHeundeut />} />

routePath에 삼항연산자 string을 넘겨줘서 해결할 수 있을 것 같아요. TopNavItem에 onClick인자를 둔 이유는 경로 이동이 아닌 다른 동작을 한다면 onClick을 이용할 수 있도록 가능성을 열어둔 것입니다. 그래서 만약 조건에 따라 다른 '경로로 이동시키고 싶다면, routePath=state?'/a':'/b/형태로 이용할 수 있을 것 같아요.

const [is, setIs] = useState(false)

<TopNav.Text routePath={is ? '/a' : '/b'} textSize="subTitle" isEmphasis={true}> ...

안되네요...! 😱😭

흑흑.. 맞습니다.. 삼항연산자를 활용해서도 해봤지만 안되더라구욧.... 정확한 원인은 찾지 못했지만.. 일단 어찌저찌 해결은 해뒀으니..! 후에 더 명확한 원인을 찾아보겠습니댱

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-swrjyvwivf.chromatic.com/