비인가 처리: 지도 영역만 접근 제한하는 방법

🚨 이슈 내용

AllowedRoute를 사용해 위치 정보를 허용하지 않았을 때 지도 부분에 안내 문구를 표시하려고 했음.
하지만 ProductList 페이지 전체를 AllowedRoute로 감싸면서 검색창과 리스트까지 함께 사라지는 문제가 발생했다.
원래 의도는 지도 부분만 비인가 처리를 적용하는 것이었기 때문에, 해결 방법이 필요했음.

트러블슈팅

AllowedRoute를 활용해 위치 정보를 허용하지 않은 경우 지도 부분에 "위치 서비스에 동의하셔야 합니다."라는 문구를 표시하려고 했다.
처음에는 Router.jsx에서 ProductList 전체를 AllowedRoute로 감싸는 방식으로 구현했는데, 위치 정보를 허용하지 않으면 검색창과 리스트까지 사라지는 문제가 발생했다.
하지만 원래 의도는 검색창과 검색 리스트는 그대로 유지하면서, 지도 부분만 접근 제한을 적용하는 것이었기 때문에 이 방식으로는 해결할 수 없었다.

✅ 해결 방법

AllowedRoute를 Router.jsx에서 ProductList 전체를 감싸는 방식이 아니라,
ProductList 내부에서 지도 부분만 AllowedRoute로 감싸도록 변경.
이렇게 하면 검색창과 검색 리스트는 그대로 유지되면서, 지도 부분만 위치 정보 허용 여부에 따라 안내 문구가 표시됨.

<AllowedRoute>
  {isLoading ? (
    <div>지도를 불러오는 중...</div>
  ) : (
    <KakaoMap
      level={selectedProduct ? 5 : 10}
      mode={'productList'}
      productList={products.data}
      selectedProduct={selectedProduct}
    />
  )}
</AllowedRoute>