[FE] feat: lazy 적용

frontend/src/index.tsx

@@ -42,7 +42,7 @@ root.render(
       <FunEatProvider>
         <SvgSprite />
         <GlobalStyle />
-        <RouterProvider router={router} />
+        <RouterProvider router={router} fallbackElement={<p>...loading</p>} />
       </FunEatProvider>
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>

frontend/src/pages/AuthPage.tsx

@@ -5,7 +5,7 @@ import { loginApi } from '@/apis';
 import { PATH } from '@/constants/path';
 import { useMemberQuery } from '@/hooks/queries/members';
 
-const AuthPage = () => {
+export const AuthPage = () => {
   const { authProvider } = useParams();
   const [searchParams] = useSearchParams();
   const code = searchParams.get('code');
@@ -57,5 +57,3 @@ const AuthPage = () => {
 
   return <></>;
 };
-
-export default AuthPage;

frontend/src/pages/HomePage.tsx

@@ -8,7 +8,7 @@ import { ProductRankingList, ReviewRankingList, RecipeRankingList } from '@/comp
 import { IMAGE_URL } from '@/constants';
 import channelTalk from '@/service/channelTalk';
 
-const HomePage = () => {
+export const HomePage = () => {
   const { reset } = useQueryErrorResetBoundary();
 
   channelTalk.loadScript();
@@ -77,8 +77,6 @@ const HomePage = () => {
   );
 };
 
-export default HomePage;
-
 const Banner = styled.img`
   width: 100%;
 `;

frontend/src/pages/IntegratedSearchPage.tsx

@@ -12,7 +12,7 @@ import { useSearch } from '@/hooks/search';
 const PRODUCT_PLACEHOLDER = '상품 이름을 검색해보세요.';
 const RECIPE_PLACEHOLDER = '꿀조합에 포함된 상품을 입력해보세요.';
 
-const IntegratedSearchPage = () => {
+export const IntegratedSearchPage = () => {
   const {
     inputRef,
     searchQuery,
@@ -103,8 +103,6 @@ const IntegratedSearchPage = () => {
   );
 };
 
-export default IntegratedSearchPage;
-
 const SearchSection = styled.section`
   position: relative;
 `;

frontend/src/pages/LoginPage.tsx

@@ -13,7 +13,7 @@ const KAKAO_LOGIN = '카카오 로그인';
 
 const loginLink = process.env.NODE_ENV === 'development' ? '/login/kakao?code=qwe' : '/api/auth/kakao';
 
-const LoginPage = () => {
+export const LoginPage = () => {
   const { routeBack } = useRoutePage();
   const { data: member } = useMemberQuery();
 
@@ -47,8 +47,6 @@ const LoginPage = () => {
   );
 };
 
-export default LoginPage;
-
 const LoginPageContainer = styled.div`
   display: flex;
   flex-direction: column;

frontend/src/pages/MemberModifyPage.tsx

@@ -11,7 +11,7 @@ import { useFormData, useImageUploader } from '@/hooks/common';
 import { useMemberModifyMutation, useMemberQuery } from '@/hooks/queries/members';
 import type { MemberRequest } from '@/types/member';
 
-const MemberModifyPage = () => {
+export const MemberModifyPage = () => {
   const { data: member } = useMemberQuery();
   const { mutate } = useMemberModifyMutation();
 
@@ -96,8 +96,6 @@ const MemberModifyPage = () => {
   );
 };
 
-export default MemberModifyPage;
-
 const MemberImageUploaderContainer = styled.div`
   display: flex;
   justify-content: center;

frontend/src/pages/MemberPage.tsx

@@ -7,7 +7,7 @@ import { ErrorBoundary, ErrorComponent, Loading, NavigableSectionTitle } from '@
 import { MembersInfo, MemberReviewList, MemberRecipeList } from '@/components/Members';
 import { PATH } from '@/constants/path';
 
-const MemberPage = () => {
+export const MemberPage = () => {
   const { reset } = useQueryErrorResetBoundary();
 
   return (
@@ -35,8 +35,6 @@ const MemberPage = () => {
   );
 };
 
-export default MemberPage;
-
 const MemberPageContainer = styled.div`
   padding: 20px 20px 0;
 `;

frontend/src/pages/MemberRecipePage.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { ErrorBoundary, ErrorComponent, Loading, ScrollButton, SectionTitle } from '@/components/Common';
 import { MemberRecipeList } from '@/components/Members';
 
-const MemberRecipePage = () => {
+export const MemberRecipePage = () => {
   const { reset } = useQueryErrorResetBoundary();
   const memberRecipeRef = useRef<HTMLDivElement>(null);
 
@@ -25,8 +25,6 @@ const MemberRecipePage = () => {
   );
 };
 
-export default MemberRecipePage;
-
 const MemberRecipePageContainer = styled.div`
   height: 100%;
   padding: 20px 20px 0;

frontend/src/pages/MemberReviewPage.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { ErrorBoundary, ErrorComponent, Loading, ScrollButton, SectionTitle } from '@/components/Common';
 import { MemberReviewList } from '@/components/Members';
 
-const MemberReviewPage = () => {
+export const MemberReviewPage = () => {
   const { reset } = useQueryErrorResetBoundary();
   const memberReviewRef = useRef<HTMLDivElement>(null);
 
@@ -25,8 +25,6 @@ const MemberReviewPage = () => {
   );
 };
 
-export default MemberReviewPage;
-
 const MemberReviewPageContainer = styled.div`
   height: 100%;
   padding: 20px 20px 0;

frontend/src/pages/ProductDetailPage.tsx

@@ -30,7 +30,7 @@ const LOGIN_ERROR_MESSAGE_REVIEW =
 const LOGIN_ERROR_MESSAGE_RECIPE =
   '로그인 후 상품 꿀조합을 볼 수 있어요.\n펀잇에 가입하고 편의점 상품 꿀조합을 확인해보세요 😊';
 
-const ProductDetailPage = () => {
+export const ProductDetailPage = () => {
   const { category, productId } = useParams();
   const { data: member } = useMemberQuery();
   const { data: productDetail } = useProductDetailQuery(Number(productId));
@@ -147,8 +147,6 @@ const ProductDetailPage = () => {
   );
 };
 
-export default ProductDetailPage;
-
 const ProductDetailPageContainer = styled.div`
   height: 100%;
   overflow-y: auto;

frontend/src/pages/ProductListPage.tsx

@@ -23,7 +23,7 @@ import { isCategoryVariant } from '@/types/common';
 
 const PAGE_TITLE = { food: '공통 상품', store: 'PB 상품' };
 
-const ProductListPage = () => {
+export const ProductListPage = () => {
   const { category } = useParams();
   const productListRef = useRef<HTMLDivElement>(null);
 
@@ -75,8 +75,6 @@ const ProductListPage = () => {
   );
 };
 
-export default ProductListPage;
-
 const ProductListSection = styled.section`
   height: 100%;
 `;

frontend/src/pages/RecipeDetailPage.tsx

@@ -8,7 +8,7 @@ import { RecipeFavorite } from '@/components/Recipe';
 import { useRecipeDetailQuery } from '@/hooks/queries/recipe';
 import { getFormattedDate } from '@/utils/date';
 
-const RecipeDetailPage = () => {
+export const RecipeDetailPage = () => {
   const { recipeId } = useParams();
 
   const { data: recipeDetail } = useRecipeDetailQuery(Number(recipeId));
@@ -70,8 +70,6 @@ const RecipeDetailPage = () => {
   );
 };
 
-export default RecipeDetailPage;
-
 const RecipeDetailPageContainer = styled.div`
   padding: 20px 20px 0;
 `;

frontend/src/pages/RecipePage.tsx

@@ -24,7 +24,7 @@ const RECIPE_PAGE_TITLE = '🍯 꿀조합';
 const REGISTER_RECIPE = '꿀조합 작성하기';
 const REGISTER_RECIPE_AFTER_LOGIN = '로그인 후 꿀조합을 작성할 수 있어요';
 
-const RecipePage = () => {
+export const RecipePage = () => {
   const [activeSheet, setActiveSheet] = useState<'registerRecipe' | 'sortOption'>('sortOption');
   const { selectedOption, selectSortOption } = useSortOption(RECIPE_SORT_OPTIONS[0]);
   const { ref, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet();
@@ -87,8 +87,6 @@ const RecipePage = () => {
   );
 };
 
-export default RecipePage;
-
 const TitleWrapper = styled.div`
   display: flex;
   justify-content: space-between;

frontend/src/pages/SearchPage.tsx

@@ -15,7 +15,7 @@ const RECIPE_PLACEHOLDER = '꿀조합에 포함된 상품을 입력해보세요.
 
 type SearchPageType = keyof typeof SEARCH_PAGE_VARIANTS;
 
-const SearchPage = () => {
+export const SearchPage = () => {
   const {
     inputRef,
     searchQuery,
@@ -118,8 +118,6 @@ const SearchPage = () => {
   );
 };
 
-export default SearchPage;
-
 const SearchSection = styled.section`
   position: relative;
 `;