release: 프론트엔드 v3.3 (#515)

* refactor: 지도 마커 및 음식점 카드 렌더링 시 깜빡임 현상 개선 (#497) * feat: Portal 컴포넌트 제작 * refactor: Modal 컴포넌트 Content와 합친 후 변경사항 대응 (#490) * Squashed commit of the following: commit 32a34b6 Author: 황준승 <[email protected]> Date: Wed Sep 20 14:40:45 2023 +0900 feat: 이미지 최적화 (#485) * feat: 사용하지 않는 .png 파일 제거 (#478) * refactor: Webpack 파일 리팩토링 (#478) * refactor: 불필요한 코드 구문 제거 (#478) 타입스크립트 컴파일은 ts loader로만으로도 충분 * refactor: devDependency vs Dependency 라이브러리 분리 (#478) * refactor: 불필요한 코드 삭제 (#478) Changed: 불필요한 optimize 구문 삭제' * feat: picture 태그를 활용한 이미지 최적화 (#478) * refactor: 불필요한 react.memo 제거 (#478) * feat: 이미지 url 관련 유틸함수 구현 (#478) * feat: 폰트 리로드 적용 (#478) * feat: video lazy로딩 적용 (#478) * fix: restaurants mock 데이터 수정(#478) Changed: .jpeg 삭제 * refactor: 불필요한 폰트 리로딩, lazy loading 제거 (#478) * fix: react-query-devtools 디펜던시 오류 해결 (#478) * fix: 빌드 시 lint 오류 해결 (#478) Changed: eslint 설정에 dependency 설정 끔 commit 276eec9 Author: Minjae Kim <[email protected]> Date: Wed Sep 20 14:38:43 2023 +0900 feat: loading 상태에 필요한 skeleton 제작 (#488) * feat: 데이터 추가 mock api 연결 * refactor: 인증 필요 없는 기능 client 변경 * feat: mse 동영상, 리뷰 기능 구현 (#472) * refactor: api 훅 함수로 분리, 적용 (#472) * refactor: 쓰지 않는 파일 삭제 (#472) * fix: console log 삭제 (#472) * Squashed commit of the following: commit 6e00687 Author: Jeremy <[email protected]> Date: Fri Sep 15 17:18:33 2023 +0900 bug: 옵션관련 ux 개선 (#474) * fix: 검색창 옵션 수정 (#473) * fix: 지도 줌 limit 설정 (#473) * fix: 모바일 환경에서 거리순으로 설정 (#473) * design: 오버레이 마커 디자인 개선 (#473) * fix: 오류 수정 (#476) * refactor: useScrollBlock 보강 (#476) * refactor: 모바일 페이지 컴포넌트 분리 (#476) * refactor: 라우터 재설정 (#476) * fix: 잘못된 import 수정 (#476) * refactor: router 및 outlet 새로 설정 (#476) * feat: NavBar 관련 Skeleton 제작 (#480) * feat: NavBar 관련 Skeleton 제작 (#480) * refactor: navBarSkeleton의 NavItem 개수를 props로 받도록 설정 (#480) * refactor: Login 관련 Modal 자체 모달로 분리 (#490) * refactor: 리뷰 관련 모달 로직 수정 (#490) * Squashed commit of the following: commit ac40d18 Author: 황준승 <[email protected]> Date: Wed Sep 20 16:01:35 2023 +0900 [✨feat] 폰트 + 이미지 최적화 (#491) * feat: 사용하지 않는 .png 파일 제거 (#478) * refactor: Webpack 파일 리팩토링 (#478) * refactor: 불필요한 코드 구문 제거 (#478) 타입스크립트 컴파일은 ts loader로만으로도 충분 * refactor: devDependency vs Dependency 라이브러리 분리 (#478) * refactor: 불필요한 코드 삭제 (#478) Changed: 불필요한 optimize 구문 삭제' * feat: picture 태그를 활용한 이미지 최적화 (#478) * refactor: 불필요한 react.memo 제거 (#478) * feat: 이미지 url 관련 유틸함수 구현 (#478) * feat: 폰트 리로드 적용 (#478) * feat: video lazy로딩 적용 (#478) * fix: restaurants mock 데이터 수정(#478) Changed: .jpeg 삭제 * refactor: 불필요한 폰트 리로딩, lazy loading 제거 (#478) * feat: 폰트 preload 최적화 (#487) * refactor: devDependency 허용하는 eslint 설정 추가 (#487) * fix: webp이미지 불러오지 못하는 오류 해결 (#487) * refactor: 불필요한 코드 삭제 (#478) Changed: ${} 삭제 * refactor: url 전역 변수 선언 (#487) * refactor: React.MouseEvent 코드 컨벤션 수정 (#487) * fix: 이미지 .. 붙여지는 오류 해결 (#487) * fix: react-query devtools 디펜던시 lint 에러 해결 (#487) commit 32a34b6 Author: 황준승 <[email protected]> Date: Wed Sep 20 14:40:45 2023 +0900 feat: 이미지 최적화 (#485) * feat: 사용하지 않는 .png 파일 제거 (#478) * refactor: Webpack 파일 리팩토링 (#478) * refactor: 불필요한 코드 구문 제거 (#478) 타입스크립트 컴파일은 ts loader로만으로도 충분 * refactor: devDependency vs Dependency 라이브러리 분리 (#478) * refactor: 불필요한 코드 삭제 (#478) Changed: 불필요한 optimize 구문 삭제' * feat: picture 태그를 활용한 이미지 최적화 (#478) * refactor: 불필요한 react.memo 제거 (#478) * feat: 이미지 url 관련 유틸함수 구현 (#478) * feat: 폰트 리로드 적용 (#478) * feat: video lazy로딩 적용 (#478) * fix: restaurants mock 데이터 수정(#478) Changed: .jpeg 삭제 * refactor: 불필요한 폰트 리로딩, lazy loading 제거 (#478) * fix: react-query-devtools 디펜던시 오류 해결 (#478) * fix: 빌드 시 lint 오류 해결 (#478) Changed: eslint 설정에 dependency 설정 끔 commit 276eec9 Author: Minjae Kim <[email protected]> Date: Wed Sep 20 14:38:43 2023 +0900 feat: loading 상태에 필요한 skeleton 제작 (#488) * feat: 데이터 추가 mock api 연결 * refactor: 인증 필요 없는 기능 client 변경 * feat: mse 동영상, 리뷰 기능 구현 (#472) * refactor: api 훅 함수로 분리, 적용 (#472) * refactor: 쓰지 않는 파일 삭제 (#472) * fix: console log 삭제 (#472) * Squashed commit of the following: commit 6e00687 Author: Jeremy <[email protected]> Date: Fri Sep 15 17:18:33 2023 +0900 bug: 옵션관련 ux 개선 (#474) * fix: 검색창 옵션 수정 (#473) * fix: 지도 줌 limit 설정 (#473) * fix: 모바일 환경에서 거리순으로 설정 (#473) * design: 오버레이 마커 디자인 개선 (#473) * fix: 오류 수정 (#476) * refactor: useScrollBlock 보강 (#476) * refactor: 모바일 페이지 컴포넌트 분리 (#476) * refactor: 라우터 재설정 (#476) * fix: 잘못된 import 수정 (#476) * refactor: router 및 outlet 새로 설정 (#476) * feat: NavBar 관련 Skeleton 제작 (#480) * feat: NavBar 관련 Skeleton 제작 (#480) * refactor: navBarSkeleton의 NavItem 개수를 props로 받도록 설정 (#480) * chore: lock 파일 변경 (#490) * fix: lint 에러 수정 (#490) * refactor: 낌빡임 문제 개선 (#493) * Merge commit '57d8e0a921e135ab059264663078c21bd8b6403f' * fix: 웹 폰트 로드 전 대체제 넣기 (#500) * fix: 웹 폰트 로드 전 대체제 넣기 (#499) * fix: loadingIndicator, header 겹침 현상 오류 해결(#498) * fix: webpack analyzer 적용(#499) * fix: 잘못된 api 인스턴스 수정 (#499) --------- Co-authored-by: Jeremy <[email protected]> * fix: 잘못된 api 명세로 인한 코드 수정 (#504) * fix: 웹 폰트 로드 전 대체제 넣기 (#499) * fix: loadingIndicator, header 겹침 현상 오류 해결(#498) * fix: webpack analyzer 적용(#499) * fix: 잘못된 api 인스턴스 수정 (#499) * fix: api 명세 오류로 인한 코드 수정 (#503) * refactor: 불필요한 주석 제거 (#503) * refactor: root파일 트리 쉐이킹 적용(#503) * refactor: 번들 사이즈 최적화 (#507) * style: style import 통일 시키기 (#506) * refactor: Root 컴포넌트 lazy 적용 (#506) * fix: 머지과정에서 발생한 ci 오류 해결 (#506) * fix: conflict 충돌로 인한 코드 오류 수정 (#514) --------- Co-authored-by: Minjae Kim <[email protected]> Co-authored-by: 황준승 <[email protected]> Co-authored-by: Jeremy <[email protected]>
woowacourse-teams · Sep 25, 2023 · 054c669 · 054c669
1 parent 151dd15
commit 054c669
Show file tree

Hide file tree

Showing 47 changed files with 157 additions and 77 deletions.
diff --git a/frontend/.webpack/webpack.config.js b/frontend/.webpack/webpack.config.js
@@ -4,6 +4,7 @@ const commonConfig = require('./webpack.common.js');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const commonPlugins = [
   new HtmlWebpackPlugin({
@@ -14,6 +15,9 @@ const commonPlugins = [
   new MiniCssExtractPlugin({
     filename: 'fonts/font.css',
   }),
+  // new BundleAnalyzerPlugin({
+  //   analyzerMode: 'static',
+  // }),
 ];
 
 const commonRules = [

diff --git a/frontend/src/api/restaurant.ts b/frontend/src/api/restaurant.ts
@@ -1,22 +1,25 @@
 import getQueryString from '~/utils/getQueryString';
-import { apiClient } from './apiClient';
+import { apiClient, apiUserClient } from './apiClient';
 import type { RestaurantListData } from '~/@types/api.types';
 import type { RestaurantsQueryParams } from '~/@types/restaurant.types';
 
 export const getRestaurants = async (queryParams: RestaurantsQueryParams) => {
-  const queryString = getQueryString(queryParams);
-  const response = await apiClient.get<RestaurantListData>(`/restaurants?${queryString}`);
+  if (queryParams.boundary) {
+    const queryString = getQueryString(queryParams);
+    const response = await apiUserClient.get<RestaurantListData>(`/restaurants?${queryString}`);
 
-  return response.data;
+    return response.data;
+  }
+  return null;
 };
 
 export const getRestaurantDetail = async (restaurantId: string, celebId: string) => {
-  const response = await apiClient.get(`/restaurants/${restaurantId}?celebId=${celebId}`);
+  const response = await apiUserClient.get(`/restaurants/${restaurantId}?celebId=${celebId}`);
   return response.data;
 };
 
 export const getNearByRestaurant = async (restaurantId: string) => {
-  const response = await apiClient.get(`/restaurants/${restaurantId}/nearby`);
+  const response = await apiUserClient.get(`/restaurants/${restaurantId}/nearby`);
   return response.data;
 };
 

diff --git a/frontend/src/assets/fonts/font.css b/frontend/src/assets/fonts/font.css
@@ -3,18 +3,21 @@
   font-weight: normal;
   font-style: normal;
   src: url('./SUIT-Regular.woff2') format('woff2');
+  font-display: swap;
 }
 
 @font-face {
   font-family: SUIT-Medium;
   font-weight: normal;
   font-style: normal;
   src: url('./SUIT-Medium.woff2') format('woff2');
+  font-display: swap;
 }
 
 @font-face {
   font-family: SUIT-Bold;
   font-weight: normal;
   font-style: normal;
   src: url('./SUIT-Bold.woff2') format('woff2');
+  font-display: swap;
 }
diff --git a/frontend/src/components/@common/Footer/Footer.tsx b/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';

diff --git a/frontend/src/components/@common/Header/MobileHeader.tsx b/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';

diff --git a/frontend/src/components/@common/ImageCarousel/ImageCarousel.tsx b/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';

diff --git a/frontend/src/components/@common/InfoButton/InfoButton.tsx b/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';

diff --git a/frontend/src/components/@common/LoadingDots/LoadingDots.tsx b/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() {

diff --git a/frontend/src/components/@common/LoadingIndicator/LoadingIndicator.tsx b/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';

diff --git a/frontend/src/components/@common/LoginButton/LoginButton.tsx b/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';
 

diff --git a/frontend/src/components/@common/Map/Map.tsx b/frontend/src/components/@common/Map/Map.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Wrapper, Status } from '@googlemaps/react-wrapper';
-import { styled } from 'styled-components';
+import { styled, keyframes } from 'styled-components';
 import { shallow } from 'zustand/shallow';
 import MapContent from './MapContent';
 import OverlayMyLocation from './OverlayMyLocation';
@@ -101,6 +101,8 @@ function Map({ toggleMapExpand }: MapProps) {
     toggleMapExpand();
   };
 
+  const setMapLoadingState = (state: boolean) => setLoading(state);
+
   return (
     <Wrapper apiKey={process.env.GOOGLE_MAP_API_KEY} render={render} language="ko" libraries={['places']}>
       <MapContent
@@ -110,7 +112,7 @@ function Map({ toggleMapExpand }: MapProps) {
         zoom={zoom}
         center={center}
       >
-        <OverlayMarkerList center={currentCenter} />
+        <OverlayMarkerList center={currentCenter} setMapLoadingState={setMapLoadingState} />
         {myPosition && <OverlayMyLocation position={myPosition} />}
         {loading && (
           <StyledLoadingUI>
@@ -141,6 +143,17 @@ function Map({ toggleMapExpand }: MapProps) {
 
 export default Map;
 
+const fadeIn = keyframes`
+  from {
+    scale: 0.8;
+    opacity: 0;
+  }
+  to {
+    scale:1;
+    opacity: 1;
+  }
+`;
+
 const StyledLoadingUI = styled.div`
   ${mapUIBase}
   position: absolute;
@@ -149,6 +162,8 @@ const StyledLoadingUI = styled.div`
 
   width: 82px;
   height: 40px;
+
+  animation: ${fadeIn} 0.4s ease-in;
 `;
 
 const StyledMyPositionButtonUI = styled.button`

diff --git a/frontend/src/components/@common/Map/OverlayMarker.tsx b/frontend/src/components/@common/Map/OverlayMarker.tsx
@@ -1,5 +1,5 @@
-import styled, { css, keyframes } from 'styled-components';
-import { MouseEvent, useRef, useState } from 'react';
+import { styled, css, keyframes } from 'styled-components';
+import { MouseEvent, memo, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import ProfileImage from '../ProfileImage';
 import Overlay from './Overlay/Overlay';
@@ -86,7 +86,14 @@ function OverlayMarker({ celeb, restaurant, map, quadrant }: OverlayMarkerProps)
   );
 }
 
-export default OverlayMarker;
+function areEqual(prevProps: OverlayMarkerProps, nextProps: OverlayMarkerProps) {
+  const { restaurant: prevRestaurant, celeb: prevCeleb } = prevProps;
+  const { restaurant: nextRestaurant, celeb: nextCeleb } = nextProps;
+
+  return prevRestaurant.id === nextRestaurant.id && prevCeleb.id === nextCeleb.id;
+}
+
+export default memo(OverlayMarker, areEqual);
 
 const StyledMarkerContainer = styled.div`
   position: relative;

diff --git a/frontend/src/components/@common/Map/OverlayMarkerList.tsx b/frontend/src/components/@common/Map/OverlayMarkerList.tsx
@@ -1,5 +1,6 @@
 import { shallow } from 'zustand/shallow';
 import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import getQuadrant from '~/utils/getQuadrant';
 import OverlayMarker from './OverlayMarker';
 import useRestaurantsQueryStringState from '~/hooks/store/useRestaurantsQueryStringState';
@@ -10,25 +11,34 @@ import type { Coordinate } from '~/@types/map.types';
 interface OverlayMarkerListProps {
   center: Coordinate;
   map?: google.maps.Map;
+  setMapLoadingState: (state: boolean) => void;
 }
 
-function OverlayMarkerList({ center, map }: OverlayMarkerListProps) {
+function OverlayMarkerList({ center, map, setMapLoadingState }: OverlayMarkerListProps) {
   const [boundary, celebId, currentPage, restaurantCategory, sort] = useRestaurantsQueryStringState(
     state => [state.boundary, state.celebId, state.currentPage, state.restaurantCategory, state.sort],
     shallow,
   );
 
-  const { data, isLoading } = useQuery<RestaurantListData>({
+  const { data, isFetching } = useQuery<RestaurantListData>({
     queryKey: ['restaurants', boundary, celebId, restaurantCategory, currentPage, sort],
     queryFn: () => getRestaurants({ boundary, celebId, category: restaurantCategory, page: currentPage, sort }),
+    keepPreviousData: true,
   });
 
-  if (isLoading) return <div>로딩중입니다...</div>;
+  useEffect(() => {
+    if (isFetching) {
+      setMapLoadingState(true);
+      return;
+    }
+    setMapLoadingState(false);
+  }, [isFetching]);
 
   return (
     map &&
-    data.content?.map(({ celebs, ...restaurant }) => (
+    data?.content?.map(({ celebs, ...restaurant }) => (
       <OverlayMarker
+        key={restaurant.id}
         map={map}
         restaurant={restaurant}
         celeb={celebs[0]}

diff --git a/frontend/src/components/@common/Map/OverlayMyLocation.tsx b/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';
 

diff --git a/frontend/src/components/@common/Modal/Modal.tsx b/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';

diff --git a/frontend/src/components/@common/NavItem/NavItem.tsx b/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';
 

diff --git a/frontend/src/components/@common/NavItem/NavItemSkeleton.tsx b/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';
 

diff --git a/frontend/src/components/@common/PageNationBar/PageNationBar.tsx b/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';

diff --git a/frontend/src/components/@common/ProfileImage/ProfileImage.tsx b/frontend/src/components/@common/ProfileImage/ProfileImage.tsx
@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+import { paintSkeleton } from '~/styles/common';
 
 interface ProfileImageProps extends React.HTMLAttributes<HTMLImageElement> {
   name: string;
@@ -13,6 +14,7 @@ function ProfileImage({ name = '셀럽', imageUrl, size, ...props }: ProfileImag
 export default ProfileImage;
 
 const StyledProfile = styled.img<{ size: string }>`
+  ${paintSkeleton}
   width: ${({ size }) => size || 'auto'};
   height: ${({ size }) => size || 'auto'};
 

diff --git a/frontend/src/components/@common/WaterMarkImage/WaterMarkImage.tsx b/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';
 

diff --git a/frontend/src/components/BottomNavBar/BottomNavBar.tsx b/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';

diff --git a/frontend/src/components/BottomNavBar/FilterButton.tsx b/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';

diff --git a/frontend/src/components/BottomNavBar/FilterOptionsModal.tsx b/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';

diff --git a/frontend/src/components/BottomNavBar/UserButton.tsx b/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';

diff --git a/frontend/src/components/CategoryNavbar/CategoryNavbar.tsx b/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';
 

diff --git a/frontend/src/components/CelebDropDown/CelebDropDown.tsx b/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';

diff --git a/frontend/src/components/FilterSelectBox/FilterSelectBox.tsx b/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';

diff --git a/frontend/src/components/InfoDropDown/InfoDropDown.tsx b/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';
 

diff --git a/frontend/src/components/InfoDropDown/InfoDropDownOption.tsx b/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 {

diff --git a/frontend/src/components/LoginModal/LoginModal.tsx b/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';
 

diff --git a/frontend/src/components/LoginPageUI/LoginPageUI.tsx b/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';
 

diff --git a/frontend/src/components/MainPageNavBar/MainPageNavBarSkeleton.tsx b/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 {