refactor : Image 최적화

4bujak-4bujak · Jun 27, 2024 · b784180 · b784180
1 parent 6f6360d
commit b784180
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 49 deletions.
diff --git a/src/components/home/AvailableRoom.tsx b/src/components/home/AvailableRoom.tsx
@@ -7,7 +7,7 @@ import { getAllAvailableCount } from './remote/mainReservation';
 import { useRouter } from 'next/router';
 import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice';
 import { useBranchStore2 } from '@/store/reserve.store';
-
+import Image from 'next/image';
 const AvailableRoom = () => {
   const router = useRouter();
   const queryClient = useQueryClient();
@@ -41,7 +41,7 @@ const AvailableRoom = () => {
       if (data.data) {
         setReservedBranch(data?.data, Date.now());
         router.push({
-          pathname: '/reservation',
+          pathname: '/reservation'
         });
       }
     } catch (error) {
@@ -69,7 +69,7 @@ const AvailableRoom = () => {
               ]);
               setCurrentTime(format(new Date(), 'HH:mm'));
             }}>
-            <img src="/home/refresh.svg" alt="" />
+            <Image src="/home/refresh.svg" alt="refresh" width={17} height={17} />
           </div>
         </div>
       </div>
@@ -78,7 +78,7 @@ const AvailableRoom = () => {
       <div className="flex gap-[76px] items-center justify-center mt-6">
         <div className="flex flex-col gap-[13px] items-center justify-center">
           <div>
-            <img src="/home/M_Room.svg" alt="" />
+            <Image src="/home/M_Room.svg" alt="M_Room" width={32} height={37} />
           </div>
           <div className="text-gray-600 text-sm font-normal ">미팅룸</div>
           <div className="flex justify-center items-center gap-1">
@@ -88,7 +88,7 @@ const AvailableRoom = () => {
               </span>
             </div>
             <div>
-              <img src="/home/slash.svg" alt="" />
+              <Image src="/home/slash.svg" alt="slash" width={9} height={19} />
             </div>
             <div className="text-gray-400 font-medium text-base">
               {data?.totalMeetingRoomCount}
@@ -98,7 +98,7 @@ const AvailableRoom = () => {
 
         <div className="flex flex-col gap-[13px] items-center justify-center">
           <div>
-            <img src="/home/R_Room.svg" alt="" />
+            <Image src="/home/R_Room.svg" alt="R_Room" width={37} height={40} />
           </div>
           <div className="text-gray-600 text-sm font-normal ">리차징룸</div>
           <div className="flex justify-center items-center gap-1">
@@ -108,7 +108,7 @@ const AvailableRoom = () => {
               </span>
             </div>
             <div>
-              <img src="/home/slash.svg" alt="" />
+              <Image src="/home/slash.svg" alt="slash" width={9} height={19} />
             </div>
             <div className="text-gray-400 font-medium text-base">
               {data?.totalRechargingRoomCount}
@@ -118,7 +118,7 @@ const AvailableRoom = () => {
 
         <div className="flex flex-col gap-[13px] items-center justify-center">
           <div>
-            <img src="/home/G_Room.svg" alt="" />
+            <Image src="/home/G_Room.svg" alt="G_Room" width={33} height={37} />
           </div>
           <div className="text-gray-600 text-sm font-normal ">포커스존</div>
           <div className="flex justify-center items-center gap-1">
@@ -128,7 +128,7 @@ const AvailableRoom = () => {
               </span>
             </div>
             <div>
-              <img src="/home/slash.svg" alt="" />
+              <Image src="/home/slash.svg" alt="slash" width={9} height={19} />
             </div>
             <div className="text-gray-400 font-medium text-base">
               {data?.totalFocusDeskCount}
@@ -139,7 +139,8 @@ const AvailableRoom = () => {
 
       {/* 하단 */}
       <div
-        className="cursor-pointer mt-8 rounded-lg w-full h-12 border-2 border-space-purple flex justify-center items-center text-space-purple text-[15px] font-semibold" onClick={handleGoToReservation}>
+        className="cursor-pointer mt-8 rounded-lg w-full h-12 border-2 border-space-purple flex justify-center items-center text-space-purple text-[15px] font-semibold"
+        onClick={handleGoToReservation}>
         예약하기
       </div>
     </div>

diff --git a/src/components/home/CurrentOffice.tsx b/src/components/home/CurrentOffice.tsx
@@ -5,7 +5,7 @@ import SelectOfficeMap from './SelectOfficeMap';
 import { Branch } from '@/api/types/branch';
 import { useBranchStore } from '@/store/branch.store';
 import { useIsCurrentBranch } from '@/store/isCurrentBranch.store';
-
+import Image from 'next/image';
 const CurrentOffice = () => {
   const [showSearchModal, setShowSearchModal] = useState(false);
   const [showSelectOfficeMap, setShowSelectOfficeMap] = useState(false);
@@ -54,7 +54,13 @@ const CurrentOffice = () => {
         <div className="text-white text-lg font-extralight">지금 이용중인 곳은</div>
         <div className="flex items-center justify-center gap-1">
           <div>
-            <img src="/home/location.svg" alt="" />
+            <Image
+              src="/home/location.svg"
+              alt="map"
+              width={11}
+              height={15}
+              className="w-full"
+            />
           </div>
           <div
             className="text-white text-lg underline font-medium cursor-pointer"
@@ -66,7 +72,13 @@ const CurrentOffice = () => {
         {!isCurrent ? (
           <div className="absolute z-50 top-6 right-20">
             <div className="ml-[22px] opacity-95 ">
-              <img src="/home/triangle.svg" alt="" />
+              <Image
+                src="/home/triangle.svg"
+                alt="map"
+                width={11}
+                height={15}
+                className="w-full"
+              />
             </div>
             <div className="border-t border-space-purple-dark-active p-2 opacity-95 bg-space-purple-dark-active rounded text-white text-sm font-normal">
               이 지점이 맞나요?

diff --git a/src/components/home/MainHeader.tsx b/src/components/home/MainHeader.tsx
@@ -1,21 +1,32 @@
 'use client';
 import { useRouter } from 'next/router';
 import React from 'react';
-
+import Image from 'next/image';
 const MainHeader = () => {
   const router = useRouter();
   return (
     <header>
       <div className="flex justify-between items-center py-6">
         <div className="w-[116px] h-8 cursor-pointer">
-          <img src="/OffispaceLogo.png" alt="" className="w-full" />
+          <Image
+            src="/OffispaceLogo.png"
+            alt="logo"
+            width={115}
+            height={20}
+            className="w-full"
+          />
         </div>
         <div className="flex justify-center items-center gap-6 ">
           <div className="cursor-pointer" onClick={() => router.push('mypage/question')}>
-            <img src="/home/Inquiry_white.svg" alt="" />
+            <Image src="/home/Inquiry_white.svg" alt="inquiry" width={20} height={20} />
           </div>
           <div className="cursor-pointer" onClick={() => router.push('/notification')}>
-            <img src="/home/Notification_white.svg" alt="" />
+            <Image
+              src="/home/Notification_white.svg"
+              alt="notification"
+              width={20}
+              height={20}
+            />
           </div>
         </div>
       </div>

diff --git a/src/components/home/OfficeNotice.tsx b/src/components/home/OfficeNotice.tsx
@@ -3,7 +3,7 @@ import { useNotices } from '@/hook/useNotices';
 import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice';
 import { useBranchStore } from '@/store/branch.store';
 import { useRouter } from 'next/router';
-
+import Image from 'next/image';
 const OfficeNotice: React.FC = () => {
   const { urgentNoticeTitle, urgentNoticeContent } = useNotices();
   const selectedBranch = useBranchStore((state) => state.selectedBranch);
@@ -44,7 +44,13 @@ const OfficeNotice: React.FC = () => {
         className=" cursor-pointer w-full h-12 mt-7 flex items-center gap-[13px] px-[13px] py-[14px] rounded shadow border border-gray-200"
         style={{ backgroundColor: 'rgb(228, 224, 245)' }}>
         <div>
-          <img src="/home/notice.svg" alt="" />
+          <Image
+            src="/home/notice.svg"
+            alt="map"
+            width={24}
+            height={21}
+            className="w-full"
+          />
         </div>
 
         <div className="flex-1 flex items-center gap-[22px] justify-between">
@@ -53,7 +59,13 @@ const OfficeNotice: React.FC = () => {
           </div>
           {urgentNoticeContent && (
             <div className="">
-              <img src="/home/toNext.svg" alt="" />
+              <Image
+                src="/home/toNext.svg"
+                alt="map"
+                width={7}
+                height={14}
+                className="w-full"
+              />
             </div>
           )}
         </div>

diff --git a/src/components/home/weekSchedule/WeekSchedule.tsx b/src/components/home/weekSchedule/WeekSchedule.tsx
@@ -4,7 +4,7 @@ import { format, startOfWeek, addDays, isSaturday, isSunday, isSameDay } from 'd
 import { ko } from 'date-fns/locale';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
-
+import Image from 'next/image';
 const WeekScheduleItem = dynamic(() => import('./WeekScheduleItem'), {
   loading: () => <div className="w-[361px] h-[121px] " />
 });
@@ -32,7 +32,7 @@ const WeekSchedule = () => {
             className="text-gray-500 text-sm font-normal ">
             전체보기
           </div>
-          <img src="/home/toNext_gray.svg" alt="" />
+          <Image src="/home/toNext_gray.svg" alt="toNext" width={7} height={13} />
         </div>
       </div>
       {/* 주차별 캘린더 */}

diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
@@ -19,7 +19,7 @@ const Footer = () => {
       <nav className=" fixed  mx-[auto] bottom-0 w-[393px]  h-[87.02px] px-[25px] pt-[25px] pb-[35px] bg-white border-t border-stone-50 justify-between items-center inline-flex z-[9999]">
         <Link href="/">
           <div className="  h-[44.84px] flex-col justify-start items-center gap-2.5 inline-flex">
-            <div className="w-[22.06px] h-[21.82px] flex-col justify-center items-center">
+            <div className=" w-[22.06px] h-[21.82px] flex-col justify-center items-center  ml-[3px] mt-[3px]">
               {filteredPathName === '' ? (
                 <Image src="/CheckedHome.svg" alt="home" width={20} height={20} />
               ) : (
@@ -35,9 +35,14 @@ const Footer = () => {
           <div className="h-[44.84px] flex-col justify-start items-center gap-2.5 inline-flex">
             <div className="w-[22.06px] h-[21.82px] flex-col justify-center items-center">
               {filteredPathName.includes('reservation') ? (
-                <img className="w-5 h-5 " src="/CheckedResoulvation.svg" alt="book" />
+                <Image
+                  src="/CheckedResoulvation.svg"
+                  alt="resoulvation"
+                  width={20}
+                  height={20}
+                />
               ) : (
-                <img className="w-5 h-5 " src="/Reservation.svg" alt="book" />
+                <Image src="/Reservation.svg" alt="resoulvation" width={20} height={20} />
               )}
             </div>
             <div className="text-center text-black text-xs font-normal font-['Pretendard']">
@@ -49,9 +54,9 @@ const Footer = () => {
           <div className="h-[43.75px] flex-col justify-start items-center gap-2.5 inline-flex">
             <div className="w-[22.06px] h-[21.82px]  flex-col  justify-center items-center">
               {filteredPathName === 'map' ? (
-                <img className="w-5 h-5  " src="/CheckedNavigation.svg" alt="map" />
+                <Image src="/CheckedNavigation.svg" alt="map" width={20} height={20} />
               ) : (
-                <img className="w-5 h-5 " src="/Navigation.svg" alt="map" />
+                <Image src="/Navigation.svg" alt="map" width={20} height={20} />
               )}
             </div>
             <div className="text-center text-black text-xs font-normal font-['Pretendard']">
@@ -80,9 +85,9 @@ const Footer = () => {
           className="cursor-pointer h-[44.84px] flex-col justify-start items-center gap-2.5 inline-flex">
           <div className="w-[22.06px] h-[21.82px] flex-col justify-center items-center">
             {filteredPathName === 'community' ? (
-              <img className="w-5 h-5 " src="/CheckedCommunity.svg" alt="community" />
+              <Image src="/CheckedCommunity.svg" alt="community" width={20} height={20} />
             ) : (
-              <img className="w-5 h-5 " src="/Community.svg" alt="community" />
+              <Image src="/Community.svg" alt="community" width={20} height={20} />
             )}
           </div>
           <div className="text-center text-black text-xs font-normal font-['Pretendard']">
@@ -93,9 +98,9 @@ const Footer = () => {
           <div className="h-[44.84px] flex-col justify-start items-center gap-2.5 inline-flex">
             <div className="w-[22.06px] h-[21.82px] flex-col justify-center items-center">
               {filteredPathName === 'mypage' ? (
-                <img className="w-5 h-5 " src="/CheckedProfile.svg" alt="mypage" />
+                <Image src="/CheckedProfile.svg" alt="mypage" width={20} height={20} />
               ) : (
-                <img className="w-5 h-5 " src="/Profile.svg" alt="mypage" />
+                <Image src="/Profile.svg" alt="mypage" width={20} height={20} />
               )}
             </div>
             <div className="text-center text-black text-xs font-normal font-['Pretendard']">

diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
@@ -1,20 +1,20 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-
+import Image from 'next/image';
 const Header = () => {
   const router = useRouter();
   return (
     <header className="border-b border-stone-50  bg-white fixed top-0 w-[393px] h-20 px-4 py-6 flex justify-between items-center z-[9999]">
       <div onClick={() => router.push('/')} className="w-[116px] cursor-pointer">
-        <img src="/OffispaceBlack.png" alt="" />
+        <Image src="/OffispaceBlack.png" alt="logo" width={115} height={20} />
       </div>
       <div className="flex items-center justify-center gap-6">
         <div onClick={() => router.push('mypage/question')} className="cursor-pointer">
-          <img src="/Inquiry.svg" alt="" />
+          <Image src="/Inquiry.svg" alt="inquiry" width={20} height={20} />
         </div>
         <Link href={'/notification'}>
           <div className="cursor-pointer">
-            <img src="/Notification.svg" alt="" />
+            <Image src="/Notification.svg" alt="notification" width={20} height={20} />
           </div>
         </Link>
       </div>

diff --git a/src/components/layout/header/ReservationHeader.tsx b/src/components/layout/header/ReservationHeader.tsx
@@ -1,23 +1,29 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
+import Image from 'next/image';
 
 const ReservationHeader = () => {
   const router = useRouter();
   return (
     <header className="border-b border-stone-50  bg-white fixed top-0 w-[393px] h-20 px-4 py-6 flex justify-between items-center z-[9999]">
       <div onClick={() => router.push('/')} className="w-[116px] cursor-pointer">
-        <img src="/OffispaceBlack.png" alt="" />
+        <Image src="/OffispaceBlack.png" alt="logo" width={115} height={20} />
       </div>
       <div className="flex items-center justify-center gap-6">
         <div
           onClick={() => router.push('reservation/myreservationlist')}
           className="cursor-pointer">
-          <img src="/reservation/listicon.svg" alt="" />
+          <Image
+            src="/reservation/listicon.svg"
+            alt="reservation"
+            width={20}
+            height={20}
+          />
         </div>
         <Link href={'/notification'}>
           <div className="cursor-pointer">
-            <img src="/Notification.svg" alt="" />
+            <Image src="/Notification.svg" alt="notification" width={20} height={20} />
           </div>
         </Link>
       </div>

diff --git a/src/pages/sign/index.tsx b/src/pages/sign/index.tsx
@@ -6,20 +6,10 @@ import SignUpButton from '@/components/shared/sign/SignUpButton';
 import Link from 'next/link';
 // import useSendPush from '@/components/pwa/UseSendPush';
 import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { getCookie } from '@/utils/cookies';
+
 import { getTokenHandler } from '@/components/pwa/Fcm';
 
 const SignHomePage = () => {
-  const token = getCookie('token');
-  const router = useRouter();
-  useEffect(() => {
-    if (token) {
-      alert('이미 로그인 되어있습니다.\n 메인페이지로 이동합니다.');
-      router.push('/');
-    }
-  }, [router, token]);
-
   /*eslint-disable */
   const [FcmToken, setFcmToken] = useState('');