[feat] ProtectedRoute 컴포넌트 구현, 내 프로필/공고 상세 (사장님, 알바생) 페이지 적용

[cozy-ito]

#️⃣연관된 이슈

ex) #이슈번호, #이슈번호

Closes #137

📝 PR 유형

해당하는 유형에 'x'로 체크해주세요.

• 기능 추가 (Feature)
• 버그 수정 (Bug Fix)
• 코드 개선 (Refactoring)
• 스타일 변경 (UI/UX)
• 문서 작업 (Documentation)
• 환경 설정 (Configuration)
• 기타 (Other)

📝작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

• ProtectedRoute 컴포넌트 구현
• 내 프로필 페이지, 공고 상세 (사장님, 알바생) 페이지 적용

ProtectedRoute 사용 예시

// src/Router.tsx
const noticeRoutes: RouteObject[] = [
  ...
  {
    path: ROUTES.NOTICE.NOTICE_ID.EMPLOYEE,
    element: (
      <ProtectedRoute
        // 필요한 조건의 개수에 따라 객체 배열 형태로 전달
        // 배열에 정의된 순서대로 isPass 조건 검증
        conditions={({ isLoggedIn, user }) => [
          loginProtectCondition(isLoggedIn), // 로그인 여부 확인: 로그인 X -> /signin
          {
            isPass: user?.type === "employee", // 페이지 진입 가능 조건: 알바생 X -> /shop
            redirectPath: ROUTES.SHOP.ROOT, // 진입 가능 조건 실패 시, 리다이렉트 할 경로
            message: "알바생 계정으로만 이용 가능한 기능입니다.", // 모달에 표시할 메시지
          },
        ]}
      >
        <NoticeEmployeePage />
      </ProtectedRoute>
    ),
    ...
  },
];

// src/constants/router.ts
// 아래와 같이 헬퍼 함수를 만들면, 자주 사용되는 조건들은 재사용 가능
export const loginProtectCondition = (isLoggedIn: boolean) =>
  ({
    isPass: isLoggedIn,
    redirectPath: ROUTES.AUTH.SIGNIN,
    message: "로그인 후에 이용 가능한 기능입니다.",
  }) as const;

제가 생각하는 이 방식의 장점은

1. 매 페이지마다 페이지 접근 제어를 위한 로직을 재작성하지 않아도 됨
   a. 페이지 마다 페이지 접근 제어 로직을 작성하면, 해당 페이지가 어떤 권한을 가지고 있는지 매번 각각의 페이지를 들여다 봐야 함
2. 각 페이지에 접근하려면 어떤 조건이 필요한 지 src/Router.tsx 파일 하나만 보면 알 수 있음

단점은

1. Router.tsx 파일이 길어져서 가독성이 좋지 못함
   a. 이 부분은 각 도메인 별로 파일을 분리하면 어느정도 해결할 수 있을 것 같아요. 🤔

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

[netlify]

✅ Deploy Preview for thejulge1 ready!

Name	Link
🔨 Latest commit	ed7c8ae
🔍 Latest deploy log	https://app.netlify.com/sites/thejulge1/deploys/681b97e6e0bf620008a0fd94
😎 Deploy Preview	https://deploy-preview-141--thejulge1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[almighty55555]

수고하셨습니다!