Merge pull request #188 from Step3-kakao-tech-campus/feat/#171

GNB 개선, map 스켈레톤 삭제, lighthouse 성능개선 추가
Step3-kakao-tech-campus · Nov 10, 2023 · 8f6fff0 · 8f6fff0
2 parents fcd6f80 + f97fc65
commit 8f6fff0
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 39 deletions.
diff --git a/src/commons/components/LogoButton.tsx b/src/commons/components/LogoButton.tsx
@@ -13,6 +13,10 @@ const LogoButton = ({ imageClassName, logoClassName }: LogoButtonProps) => {
           className={`w-8 ${imageClassName}`}
           src="/assets/images/paw.png"
           alt="애니모리 로고"
+          style={{
+            width: '32px',
+            height: '32px',
+          }}
         />
         <h1 className={`text-brand-color font-bold text-2xl ${logoClassName}`}>
           애니모리

diff --git a/src/index.css b/src/index.css
@@ -12,13 +12,15 @@ normal, bold만 적용시켜놨습니다.
   src: url(../public/assets/fonts/Pretendard-Regular.woff) format('woff');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
   src: url(../public/assets/fonts/Pretendard-Bold.woff) format('woff');
   font-weight: bold;
   font-style: normal;
+  font-display: swap;
 }
 
 /* 로더 */

diff --git a/src/layouts/VGNB.tsx b/src/layouts/VGNB.tsx
@@ -28,7 +28,15 @@ const VGNB = (props: VGNBProps) => {
         <div className="flex w-11/12 justify-between items-center">
           <LogoButton />
           <button className="text-3xl" onClick={handleToggleClick}>
-            <img className="w-8" src="/assets/images/menu.png" alt="메뉴" />
+            <img
+              className="w-8"
+              src="/assets/images/menu.png"
+              alt="메뉴"
+              style={{
+                width: '35px',
+                height: '28px',
+              }}
+            />
           </button>
         </div>
       </div>
@@ -39,27 +47,30 @@ const VGNB = (props: VGNBProps) => {
               <UserToggleBox />
             </div>
             <ol className="flex flex-col justify-center w-full gap-4">
-              <li className="border-b pb-4">
+              <li className="border-b pb-4" onClick={handleToggleClick}>
                 <button onClick={handleCategoryButtonClick}>카테고리</button>
               </li>
               <li
                 className={`${
                   isProfilePage ? 'text-brand-color' : ''
                 } border-b pb-4`}
+                onClick={handleToggleClick}
               >
                 <Link to="/profile">프로필 목록</Link>
               </li>
               <li
                 className={`${
                   isFindShelterPage ? 'text-brand-color' : ''
                 } border-b pb-4`}
+                onClick={handleToggleClick}
               >
                 <Link to="/find-shelter">내 주변 보호소 찾기</Link>
               </li>
               <li
                 className={`${
                   isRegisterPage ? 'text-brand-color' : ''
                 } border-b pb-4`}
+                onClick={handleToggleClick}
               >
                 <Link to="/register">등록하기</Link>
               </li>

diff --git a/src/pages/home/components/Home.tsx b/src/pages/home/components/Home.tsx
@@ -10,7 +10,7 @@ import VideoMuteIcon from './VideoMuteIcon';
 import { HomeVideoSliderProps } from '../homeType';
 
 const Home = () => {
-  const [muted, setMuted] = useState(true);
+  const [muted, setMuted] = useState(false);
   const [opacity, setOpacity] = useState(0);
   const [species, setSpecies] = useRecoilState<SpeciesType>(speciesState);
   const [region, setRegion] = useRecoilState<RegionType>(regionState);

diff --git a/src/pages/home/components/HomeVideo.tsx b/src/pages/home/components/HomeVideo.tsx
@@ -99,7 +99,7 @@ const HomeVideo = (props: HomeVideoProps) => {
         <video
           className="w-full h-full"
           ref={videoPlayerRef}
-          muted={!muted}
+          muted={muted}
           autoPlay={playing}
           loop
           playsInline

diff --git a/src/pages/home/components/VideoMuteIcon.tsx b/src/pages/home/components/VideoMuteIcon.tsx
@@ -8,14 +8,24 @@ const VideoMuteIcon = (props: VideoMuteIconProps) => {
         <img
           src="/assets/images/speaker.svg"
           alt="speaker"
-          style={{ opacity, transition: 'opacity 0.5s' }}
+          style={{
+            opacity,
+            transition: 'opacity 0.5s',
+            width: '100%',
+            height: '100%',
+          }}
         />
       )}
       {muted && (
         <img
           src="/assets/images/mute.svg"
           alt="mute"
-          style={{ opacity, transition: 'opacity 0.5s' }}
+          style={{
+            opacity,
+            transition: 'opacity 0.5s',
+            width: '100%',
+            height: '100%',
+          }}
         />
       )}
     </div>

diff --git a/src/pages/map/components/Map.tsx b/src/pages/map/components/Map.tsx
@@ -7,9 +7,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable no-new */
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import MapList from './MapList';
-import MapSkeleton from './MapSkeleton';
 import useMap from '../useMap';
 
 declare global {
@@ -20,9 +19,8 @@ declare global {
 
 const Map = () => {
   const mapRef = useRef<HTMLDivElement>(null);
-  const [loading, setLoading] = useState(true);
   const { map, displayMarkerByInfo, searchedPlace, mutate, mutateData } =
-    useMap(mapRef, setLoading);
+    useMap(mapRef);
   useEffect(() => {
     mutate(searchedPlace);
   }, [searchedPlace]);
@@ -43,9 +41,8 @@ const Map = () => {
 
   return (
     <div className="Map flex flex-col md:flex-row items-center justify-center gap-8">
-      <div ref={mapRef} className={`w-96 h-96 ${loading ? 'hidden' : ''}`} />
-      {loading && <MapSkeleton listSize={4} />}
-      <MapList searchedPlace={searchedPlace} map={map} loading={loading} />
+      <div ref={mapRef} className={`w-96 h-96`} />
+      <MapList searchedPlace={searchedPlace} map={map} />
     </div>
   );
 };

diff --git a/src/pages/map/components/MapList.tsx b/src/pages/map/components/MapList.tsx
@@ -6,12 +6,10 @@ import { SearchedPlace } from '../mapType';
 const MapList = ({
   searchedPlace,
   map,
-  loading,
 }: {
   searchedPlace: SearchedPlace[];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   map: any;
-  loading: boolean;
 }) => {
   const { kakao } = window;
   const navigate = useNavigate();
@@ -31,10 +29,6 @@ const MapList = ({
     return 0;
   });
 
-  if (loading) {
-    return <></>;
-  }
-
   return (
     <div className="w-96">
       {searchedPlace.map((place) => (

diff --git a/src/pages/map/components/MapSkeleton.tsx b/src/pages/map/components/MapSkeleton.tsx
diff --git a/src/pages/map/components/displayMarker.ts b/src/pages/map/components/displayMarker.ts
@@ -7,7 +7,7 @@ const displayMarker = async (map: any, addressInfo: SearchedPlace) => {
 
   const DEFAULT_SHELTER_SRC = '/assets/images/racoon.png';
   const ANYMORY_SHELTER_SRC = '/assets/images/dog.png';
-  const imageSize = new kakao.maps.Size(64, 69);
+  const imageSize = new kakao.maps.Size(64, 64);
 
   const markerImageDefault = new kakao.maps.MarkerImage(
     DEFAULT_SHELTER_SRC,

diff --git a/src/pages/map/useMap.ts b/src/pages/map/useMap.ts
@@ -6,7 +6,6 @@ import { SearchedPlace } from './mapType';
 
 function useMap<T>(
   containerRef: RefObject<T extends HTMLElement ? T : HTMLElement>,
-  setLoading: React.Dispatch<React.SetStateAction<boolean>>,
 ) {
   const { kakao } = window;
   const [map, setMap] = useState<any>();
@@ -30,7 +29,6 @@ function useMap<T>(
       }).then((res) => res.json()),
     {
       onSuccess: (data) => {
-        setLoading(false);
         if (data.success === false) {
           throw new Error(data.error.message);
         }