feat: add user profile

[inkyu0103]

설명

FE

• [x] 유저 프로필 기본 틀 퍼블리싱
• [x] 유저 프로필 스켈레톤 퍼블리싱
• [x] 유저 정보 api 연동

BE

• [x] 로그인 시 반환하는 유저 정보 추가

관련 이슈

Fix #105

변경사항

코드적으로 변경되는 부분을 작성해주세요

스크린샷

모바일

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
badminton-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2023 7:46am

[inkyu0103]

뭔가 이상하다

components_users_Profile_tsx.js 파일을 로드하는데 8밀리초가 걸리는데, 갑자기 5초로 늘어남

[inkyu0103]

그동안 시도했던 것

일반적으로 csr을 사용하게 되면, 조건부 렌더링을 할 때 화면이 갑자기 변하는 문제가 있습니다. 이는 사소한 부분일 수도 있으나, 사용자 경험에 좋지 않은 영향을 줍니다.

서버 사이드에서 일부 데이터를 먼저 가져온 뒤 렌더링 한 결과를 전달해주면, 이런 문제를 해결할 수 있어서 시도해봤습니다. 그러나 지금 방식으로는 해결할 방법이 마땅히 생각나지 않습니다.

해결 할 수 없는 이유

1. _app에서 data fetch 메소드를 사용할 수 없는 이슈

서버 사이드에서 데이터를 fetch 하는 방법으로는 getServerSideProps 및 getInitialProps를 통해 받아올 수 있습니다. 그러나 _app 및 _document 에서는 해당 메소드를 지원하지 않습니다. (app directory로 마이그레이션을 하면 사용할 수 있는 것으로 보입니다.)

2. 현재 로그인을 판단하는 방식

위의 gif 에서 나온 Header 컴포넌트의 코드입니다. (어... 코드 의미 전달이 전혀 안된다)

const Header = () => {
  const loginUser = useRecoilValue(accessTokenState);
  const { mutate: handleLogout } = useLogoutMutation();

  const isLogin =
    loginUser !== LoginState.NO_LOGIN && loginUser !== LoginState.PENDING;

  return <HeaderView handleLogout={handleLogout} isLogin={isLogin} />;
};
export default Header;

코드에서 볼 수 있듯이, 로그인의 판단 여부를 atom의 상태에 따라 구분하고 있습니다. csr을 사용하게 되면 초기에는 로그인 여부를 판단하는 atom에는 값이 존재하지 않기 때문에, 무조건 한 번은 로그인 되지 않은 화면을 렌더링하게 됩니다. (위에서 볼 수 있듯이)

이 문제를 해결하려면, 서버에서 data fetch를 한 이후에 RecoilRoot에 초기 상태를 정해주는 것으로 가능한데, 1번 문제 때문에 이것도 마땅치 않습니다.

3. context 정보 부재

브라우저에서 사용하는 cookie 같은 정보는, 서버에서 데이터를 호출할 때 context인자로 넘어옵니다. 근데 데이터 호출할 수 있는 메소드를 사용할 수 없어서 해당 context또한 사용하지 못합니다.

[inkyu0103]

56151b1

유저 검증

• 로그인되지 않은 유저를 redirect 시키도록 변경

  • 모든 페이지가 권한이 필요한 것이 아니므로 특정 페이지마다 getServerSideProps 설정
  • context를 통해 refresh token의 존재 여부로 redirect 결정

• accessTokenState 을 loginState로 변경

  • 기존 accessTokenState는 다음 구조를 가지고 있었음
    • PENDING
    • NO_LOGIN
    • accessToken string
  • 하나의 atom에 로그인 상태와 accessToken을 같이 사용하는 것은 적합하지 않다고 판단.
  • 로그인에 성공하면 반환되는 accessToken은 atom state에 담긴 이후에, 따로 사용되는 곳이 없음. 따라서 accessToken을 담을 필요가 없다고 판단.
  • 따라서 accessToken string 대신 LOGGED_IN 이라는 상태를 추가

헤더 UI 처리

기존에는 _app에 Header가 직접 사용되고 있었음. 따라서 _app에서 getInitialProps를 통해 로그인 여부를 전달할 수 있었음. 그러나, Next 공식문서에서는 Layout Pattern을 권장하고 있어서, 해당 패턴으로 교체.

그리고 문제도 있는 것이, 서버사이드에서 refresh token을 검증한 이후에 받아오는 accessToken을 axios의 header에 넣는 과정이 필요한데, 해당 부분 수행이 어려움.

따라서 loginState의 상태에 따라 다른 UI를 보여주는 것으로 변경.

기존

변경