refactor: 번들 사이즈 최적화 (#507)

* style: style import 통일 시키기 (#506)

* refactor: Root 컴포넌트 lazy 적용 (#506)

* fix: 머지과정에서 발생한 ci 오류 해결 (#506)

frontend/src/components/@common/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Link } from 'react-router-dom';
 import Instagram from '~/assets/icons/instagram.svg';
 import Github from '~/assets/icons/github.svg';

frontend/src/components/@common/Header/MobileHeader.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Link, useLocation } from 'react-router-dom';
 import { Wrapper } from '@googlemaps/react-wrapper';
 import { FONT_SIZE } from '~/styles/common';

frontend/src/components/@common/ImageCarousel/ImageCarousel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import { RestaurantImage } from '~/@types/image.type';
 import LeftBracket from '~/assets/icons/left-bracket.svg';
 import RightBracket from '~/assets/icons/right-bracket.svg';

frontend/src/components/@common/InfoButton/InfoButton.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 import Menu from '~/assets/icons/etc/menu.svg';
 import User from '~/assets/icons/etc/user.svg';

frontend/src/components/@common/LoadingDots/LoadingDots.tsx

@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'styled-components';
+import { styled, keyframes } from 'styled-components';
 import Dot from '~/assets/icons/dot.svg';
 
 function LoadingDots() {

frontend/src/components/@common/LoadingIndicator/LoadingIndicator.tsx

@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'styled-components';
+import { styled, keyframes } from 'styled-components';
 import Cel from '~/assets/icons/celuveat_cel.svg';
 import Luv from '~/assets/icons/celuveat_luv.svg';
 import Eat from '~/assets/icons/celuveat_eat.svg';

frontend/src/components/@common/LoginButton/LoginButton.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import React from 'react';
 import { OAUTH_BUTTON_MESSAGE, OAUTH_LINK } from '~/constants/api';
 

frontend/src/components/@common/Map/OverlayMarker.tsx

@@ -1,4 +1,4 @@
-import styled, { css, keyframes } from 'styled-components';
+import { styled, css, keyframes } from 'styled-components';
 import { MouseEvent, memo, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import ProfileImage from '../ProfileImage';

frontend/src/components/@common/Map/OverlayMyLocation.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import Overlay from './Overlay/Overlay';
 import type { Coordinate } from '~/@types/map.types';
 

frontend/src/components/@common/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import { cloneElement, useRef } from 'react';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import useMediaQuery from '~/hooks/useMediaQuery';
 import Exit from '~/assets/icons/exit.svg';
 import Portal from '~/components/@common/Portal';

frontend/src/components/@common/NavItem/NavItem.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 import { FONT_SIZE } from '~/styles/common';
 

frontend/src/components/@common/NavItem/NavItemSkeleton.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { BORDER_RADIUS, paintSkeleton } from '~/styles/common';
 

frontend/src/components/@common/PageNationBar/PageNationBar.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import LeftBracket from '~/assets/icons/left-bracket.svg';
 import RightBracket from '~/assets/icons/right-bracket.svg';
 import { FONT_SIZE } from '~/styles/common';

frontend/src/components/@common/WaterMarkImage/WaterMarkImage.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import { BORDER_RADIUS, FONT_SIZE, paintSkeleton } from '~/styles/common';
 import getImgUrl from '~/utils/image';
 

frontend/src/components/BottomNavBar/BottomNavBar.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import NavItem from '../@common/NavItem';
 import LoveIcon from '~/assets/icons/love.svg';

frontend/src/components/BottomNavBar/FilterButton.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import NavItem from '../@common/NavItem';
 import ProfileImage from '../@common/ProfileImage';
 import CelebIcon from '~/assets/icons/celeb.svg';

frontend/src/components/BottomNavBar/FilterOptionsModal.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { shallow } from 'zustand/shallow';
 import CelebIcon from '~/assets/icons/celeb.svg';
 import TextButton from '../@common/Button';

frontend/src/components/BottomNavBar/UserButton.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import UserIcon from '~/assets/icons/etc/user.svg';
 import ProfileImage from '../@common/ProfileImage';
 import NavItem from '../@common/NavItem';

frontend/src/components/CategoryNavbar/CategoryNavbar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import NavItem from '~/components/@common/NavItem/NavItem';
 import { isEqual } from '~/utils/compare';
 

frontend/src/components/CelebDropDown/CelebDropDown.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import { MouseEvent, useState } from 'react';
 
 import CelebIcon from '~/assets/icons/celeb.svg';

frontend/src/components/FilterSelectBox/FilterSelectBox.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import useRestaurantsQueryStringState from '~/hooks/store/useRestaurantsQueryStringState';
 
 type SortingWay = 'distance' | 'like';

frontend/src/components/InfoDropDown/InfoDropDown.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { useRef } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { ProfileData } from '~/@types/api.types';
 import { getProfile } from '~/api/user';
 

frontend/src/components/InfoDropDown/InfoDropDownOption.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import useBooleanState from '~/hooks/useBooleanState';
 
 interface InfoDropDownOptionProps {

frontend/src/components/LoginModal/LoginModal.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import LoginButton from '~/components/@common/LoginButton';
 import Modal from '../@common/Modal';
 

frontend/src/components/LoginPageUI/LoginPageUI.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 import useMediaQuery from '~/hooks/useMediaQuery';
 

frontend/src/components/MainPageNavBar/MainPageNavBarSkeleton.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { NavItemSkeleton } from '../@common/NavItem';
 
 interface MainPageNavBarSkeletonProps {

frontend/src/components/RestaurantReviewItem/RestaurantReviewItem.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import { useQueryClient } from '@tanstack/react-query';
 import ProfileImage from '~/components/@common/ProfileImage';
 

frontend/src/components/RestaurantReviewList/RestaurantReviewList.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import { RestaurantReview } from '~/@types/api.types';
 
 import RestaurantReviewItem from '~/components/RestaurantReviewItem';

frontend/src/components/RestaurantReviewWrapper/RestaurantReviewWrapper.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import Alert from '~/assets/icons/alert.svg';
 
 import RestaurantReviewList from '~/components/RestaurantReviewList';

frontend/src/components/ReviewForm/ReviewForm.tsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { RestaurantReviewData } from '~/@types/api.types';
 import useRestaurantReview from '~/hooks/server/useRestaurantReview';
 import TextButton from '../@common/Button';

frontend/src/components/WithdrawalModalContent/WithdrawalModalContent.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 import TextButton from '~/components/@common/Button';
 import useDeleteUser from '~/hooks/server/useDeleteUser';

frontend/src/pages/OauthRedirectPage.tsx

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import React, { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { getAccessToken } from '~/api/user';
 import LoadingIndicator from '~/components/@common/LoadingIndicator';
 

frontend/src/pages/PrivacyPolicyPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { FONT_SIZE } from '~/styles/common';
 
 function PrivacyPolicyPage() {

frontend/src/pages/SignUpPage.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import LoginButton from '~/components/@common/LoginButton';
 import LoginPageUI from '~/components/LoginPageUI';
 

frontend/src/pages/WishListPage.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 import RestaurantWishList from '~/components/RestaurantWishList';
 import LoginErrorHandleComponent from '~/components/@common/LoginErrorHandleComponent';

frontend/src/router/Root.tsx

@@ -1,12 +1,13 @@
-import { Suspense } from 'react';
+import { Suspense, lazy } from 'react';
 import { styled } from 'styled-components';
 import { Outlet } from 'react-router-dom';
 import Footer from '~/components/@common/Footer';
 import { Header, MobileHeader } from '~/components/@common/Header';
 import LoadingIndicator from '~/components/@common/LoadingIndicator';
-import Toast from '~/components/@common/Toast';
 import useMediaQuery from '~/hooks/useMediaQuery';
 
+const Toast = lazy(() => import('~/components/@common/Toast'));
+
 function Root() {
   const { isMobile } = useMediaQuery();
 

frontend/src/router/Router.tsx

@@ -1,8 +1,8 @@
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 import { lazy } from 'react';
-import Root from './Root';
 
+const Root = lazy(() => import('./Root'));
 const MainPage = lazy(() => import('~/pages/MainPage'));
 const RestaurantDetail = lazy(() => import('~/pages/RestaurantDetail'));
 const SignUpPage = lazy(() => import('~/pages/SignUpPage'));