[FE] FIX: 라이트하우스 성능 개선 #1687

frontend/index.html

@@ -6,14 +6,34 @@
       src="/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts"
     ></script>
     <meta charset="UTF-8" />
+    <meta
+      name="description"
+      content="여러분의 일상을 가볍게: 42서울 학생들을 위한 캐비닛 대여 서비스"
+    />
+    <meta
+      name="keywords"
+      content="42, 42 Seoul, 42 서울, Cabi, 사물함, 사물함 대여, 동아리 사물함, 수요지식회"
+    />
+
     <link
       rel="icon"
       href="/src/Cabinet/assets/images/logo.ico"
       type="image/x-icon"
     />
-    <link rel="shortcut icon" href="/src/Cabinet/assets/images/logo.png" />
-    <link rel="apple-touch-icon" href="/src/Cabinet/assets/images/logo.png" />
-    <link rel="manifest" href="/manifest.json" />
+    <link
+      rel="shortcut icon"
+      type="image/png"
+      href="/src/Cabinet/assets/images/logo.png"
+    />
+
+    <!-- Apple Touch Icon -->
+    <link
+      rel="apple-touch-icon"
+      type="image/png"
+      href="/src/Cabinet/assets/images/logo.png"
+    />
+
+    <!-- Apple Touch Icons with different sizes -->
     <link
       rel="apple-touch-icon"
       sizes="192x192"
@@ -34,6 +54,8 @@
       sizes="512x512"
       href="/icons/icon-512x512.png"
     />
+
+    <link rel="manifest" href="/manifest.json" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
@@ -42,6 +64,8 @@
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://cabi.42seoul.io" />
     <meta property="og:title" content="Cabi" />
+
+    <!-- Open Graph Image -->
     <meta
       property="og:image"
       content="https://dev.cabi.42seoul.io/src/assets/images/desktopLogo.png"

frontend/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow : /

frontend/src/App.tsx

@@ -2,32 +2,34 @@ import PageTracker from "@/api/analytics/PageTracker";
 import * as Sentry from "@sentry/react";
 import React, { Suspense, lazy } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import AvailablePage from "@/Cabinet/pages/AvailablePage";
-import ClubPage from "@/Cabinet/pages/ClubPage";
-import CoinLogPage from "@/Cabinet/pages/CoinLogPage";
 import HomePage from "@/Cabinet/pages/HomePage";
-import InventoryPage from "@/Cabinet/pages/InventoryPage";
-import ItemUsageLogPage from "@/Cabinet/pages/ItemUsageLogPage";
 import Layout from "@/Cabinet/pages/Layout";
-import LogPage from "@/Cabinet/pages/LogPage";
 import LoginPage from "@/Cabinet/pages/LoginPage";
-import MainPage from "@/Cabinet/pages/MainPage";
 import PostLogin from "@/Cabinet/pages/PostLogin";
-import ProfilePage from "@/Cabinet/pages/ProfilePage";
-import StoreMainPage from "@/Cabinet/pages/StoreMainPage";
-import AdminMainPage from "@/Cabinet/pages/admin/AdminMainPage";
-import AdminSlackAlarmPage from "@/Cabinet/pages/admin/AdminSlackAlarmPage";
-import AdminStorePage from "@/Cabinet/pages/admin/AdminStorePage";
 import LoadingAnimation from "@/Cabinet/components/Common/LoadingAnimation";
-import DetailPage from "@/Presentation/pages/DetailPage";
-import PresentationHomePage from "@/Presentation/pages/HomePage";
-import PresentationLayout from "@/Presentation/pages/Layout";
-import PresentationLogPage from "@/Presentation/pages/LogPage";
-import RegisterPage from "@/Presentation/pages/RegisterPage";
-import AdminPresentationLayout from "@/Presentation/pages/admin/AdminLayout";
 
-const NotFoundPage = lazy(() => import("@/Cabinet/pages/NotFoundPage"));
 const LoginFailurePage = lazy(() => import("@/Cabinet/pages/LoginFailurePage"));
+const NotFoundPage = lazy(() => import("@/Cabinet/pages/NotFoundPage"));
+const AvailablePage = lazy(() => import("@/Cabinet/pages/AvailablePage"));
+const ClubPage = lazy(() => import("@/Cabinet/pages/ClubPage"));
+const CoinLogPage = lazy(() => import("@/Cabinet/pages/CoinLogPage"));
+const InventoryPage = lazy(() => import("@/Cabinet/pages/InventoryPage"));
+const ItemUsageLogPage = lazy(() => import("@/Cabinet/pages/ItemUsageLogPage"));
+const LogPage = lazy(() => import("@/Cabinet/pages/LogPage"));
+const MainPage = lazy(() => import("@/Cabinet/pages/MainPage"));
+const ProfilePage = lazy(() => import("@/Cabinet/pages/ProfilePage"));
+const StoreMainPage = lazy(() => import("@/Cabinet/pages/StoreMainPage"));
+
+// NOTE : 수요지식회
+const PresentationHomePage = lazy(
+  () => import("@/Presentation/pages/HomePage")
+);
+const PresentationLayout = lazy(() => import("@/Presentation/pages/Layout"));
+const DetailPage = lazy(() => import("@/Presentation/pages/DetailPage"));
+const PresentationLogPage = lazy(() => import("@/Presentation/pages/LogPage"));
+const RegisterPage = lazy(() => import("@/Presentation/pages/RegisterPage"));
+
+// NOTE : admin
 const AdminLayout = lazy(() => import("@/Cabinet/pages/admin/AdminLayout"));
 const AdminLoginPage = lazy(
   () => import("@/Cabinet/pages/admin/AdminLoginPage")
@@ -38,6 +40,16 @@ const AdminLoginFailurePage = lazy(
   () => import("@/Cabinet/pages/admin/AdminLoginFailurePage")
 );
 const AdminHomePage = lazy(() => import("@/Cabinet/pages/admin/AdminHomePage"));
+const AdminMainPage = lazy(() => import("@/Cabinet/pages/admin/AdminMainPage"));
+const AdminSlackAlarmPage = lazy(
+  () => import("@/Cabinet/pages/admin/AdminSlackAlarmPage")
+);
+const AdminStorePage = lazy(
+  () => import("@/Cabinet/pages/admin/AdminStorePage")
+);
+const AdminPresentationLayout = lazy(
+  () => import("@/Presentation/pages/admin/AdminLayout")
+);
 
 function App(): React.ReactElement {
   const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);

frontend/src/Cabinet/components/Announce/AnnounceTemplate.tsx

@@ -36,9 +36,27 @@ const AnnounceTemplate = (props: Itext) => {
       <TitleStyled>{title}</TitleStyled>
       <CabiImgStyled>
         {type === "ERROR" ? (
-          <img src="/src/Cabinet/assets/images/sadCcabiWhite.png"></img>
+          <picture>
+            <source
+              type="image/webp"
+              srcSet="/src/Cabinet/assets/images/webp/sadCcabiWhite.webp"
+            />
+            <img
+              src="/src/Cabinet/assets/images/sadCcabiWhite.png"
+              alt="sad cabi"
+            />
+          </picture>
         ) : (
-          <img src="/src/Cabinet/assets/images/happyCcabiWhite.png"></img>
+          <picture>
+            <source
+              type="image/webp"
+              srcSet="/src/Cabinet/assets/images/webp/happyCcabiWhite.webp"
+            />
+            <img
+              src="/src/Cabinet/assets/images/happyCcabiWhite.png"
+              alt="happy cabi"
+            />
+          </picture>
         )}
       </CabiImgStyled>
       <SubTitleStyled>{subTitle}</SubTitleStyled>

frontend/src/Cabinet/components/CabinetList/EmptySection/EmptySection.tsx

@@ -3,10 +3,20 @@ import styled from "styled-components";
 const EmptySection = ({ message }: { message: string }): JSX.Element => {
   return (
     <EmptySectionStyled>
-      <CabiImageStyled
+      {/* <CabiImageStyled
         src="/src/Cabinet/assets/images/happyCcabi.png"
         alt="happy cabi"
-      />
+      /> */}
+      <picture>
+        <source
+          type="image/webp"
+          srcSet="/src/Cabinet/assets/images/webp/happyCcabi.webp"
+        />
+        <CabiImageStyled
+          src="/src/Cabinet/assets/images/happyCcabi.png"
+          alt="happy cabi"
+        />
+      </picture>
       <ContentStyled>{message}</ContentStyled>
     </EmptySectionStyled>
   );

frontend/src/Cabinet/components/TopNav/TopNav.container.tsx

@@ -1,32 +1,18 @@
-import React, { SetStateAction, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import {
-  buildingsFloorState,
-  currentBuildingNameState,
-  myCabinetInfoState,
-} from "@/Cabinet/recoil/atoms";
+import { useRecoilState, useRecoilValue } from "recoil";
+import { currentBuildingNameState } from "@/Cabinet/recoil/atoms";
 import { buildingsState } from "@/Cabinet/recoil/selectors";
 import TopNav from "@/Cabinet/components/TopNav/TopNav";
-import { MyCabinetInfoResponseDto } from "@/Cabinet/types/dto/cabinet.dto";
-import {
-  axiosBuildingFloor,
-  axiosMyLentInfo,
-} from "@/Cabinet/api/axios/axios.custom";
+import { staticColNumData } from "@/Cabinet/assets/data/sectionColNumData";
 import useMenu from "@/Cabinet/hooks/useMenu";
 
-const TopNavContainer: React.FC<{
-  setIsLoading: React.Dispatch<SetStateAction<boolean>>;
-}> = (props) => {
+const TopNavContainer: React.FC = () => {
   const [buildingClicked, setBuildingClicked] = useState(false);
   const [currentBuildingName, setCurrentBuildingName] = useRecoilState(
     currentBuildingNameState
   );
-  const setMyLentInfo =
-    useSetRecoilState<MyCabinetInfoResponseDto>(myCabinetInfoState);
-  const setBuildingsFloor = useSetRecoilState(buildingsFloorState);
   const buildingsList = useRecoilValue<Array<string>>(buildingsState);
-  const { setIsLoading } = props;
   const { toggleLeftNav } = useMenu();
   const navigator = useNavigate();
   const isLocation = useLocation();
@@ -35,42 +21,14 @@ const TopNavContainer: React.FC<{
     toggleLeftNav();
   };
 
-  useEffect(() => {
-    function setTimeoutPromise(delay: number) {
-      return new Promise((resolve) => setTimeout(resolve, delay));
-    }
-    const getBuildingsData = async () => {
-      try {
-        await setTimeoutPromise(500);
-        const buildingsFloorData = await axiosBuildingFloor();
-        setBuildingsFloor([...buildingsFloorData.data]);
-      } catch (error) {
-        console.log(error);
-      }
-    };
-    async function getMyLentInfo() {
-      try {
-        const { data: myLentInfo } = await axiosMyLentInfo();
-
-        setMyLentInfo(myLentInfo);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-
-    Promise.all([getBuildingsData(), getMyLentInfo()]).then(() =>
-      setIsLoading(false)
-    );
-  }, []);
-
   useEffect(() => {
     if (buildingsList.length === 0) return;
     setCurrentBuildingName(buildingsList[0]);
   }, [buildingsList]);
 
   useEffect(() => {
     if (currentBuildingName === undefined) return;
-    else if (currentBuildingName === "새롬관") {
+    else if (currentBuildingName === staticColNumData[0].building) {
       navigator(isLocation);
     }
   }, [currentBuildingName]);