release: 프론트엔드 v3.3

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 = [

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;
 };
 

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;
 }

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/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`

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;

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]}

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/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'};
 

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 {