User의 Role에 따른 page 접근 제한 기능 개발

[AyoungWon]

관련 이슈

• 이슈 번호: #7

변경 사항

• path에 User와 Store, Profile 등 빼고는 기본적으로 상점id가 선행하도록 했습니다.
• WithAuth라는 고차원 컴포넌트(HOC)를 사용하여 route의 element를 렌더링 하는 방식으로 진행했습니다.
• (custom Routes를 만들려고했으나 v6부터는 Routes 밑에만 Route를 사용할수있는 함정카드 발동)
• requiredRoles에 이 페이지에 접근할 수 있는 role들을 적어주시면 됩니다(Array).
• role 접근권한이 맞지 않을 경우 기본적으로 /sign-in으로 이동하지만, redirectPath를 설정해줄수도 있습니다.

• 현재 user의 role은 authAtom에서 관리합니다(일단은 owner로 스태틱)

  //example
  const ProtectedUser = withAuth(User, { requiredRoles: ["admin"] });
  const ProtectedSignIn = withAuth(SignIn, {
  requiredRoles: ["guest"],
  redirectPath: "/",
  });
  
  <Route path={ROUTES.USER} element={<ProtectedUser />} />
  <Route path={ROUTES.SIGN_IN} element={<ProtectedSignIn />} />

코드 리뷰 시 주의 사항

• UserRole 부분은 추후 API연동하여 타입 or Enum으로 변경예정입니다
• 테스트하고 싶으시다면 authAtom의 기본 역할을 수정하시면 됩니다
• 참고로 사이드메뉴 눌렀을때 to 링크는 아직 핸들링하는 방법을 안정해서 임시입니다

기타 사항

• 이전 route관련 풀리퀘에서 말한것과 달리 route관련 코드가 길어져서 바로 src/routes를 만들게 되었습니다😅(머쓱타드) Close #7