[FE] FEAT: webp 정리 #1687

innovationacademy-kr · Oct 8, 2024 · 6342684 · 6342684
2 parents 4790329 + 6993d76
commit 6342684
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 217 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,68 +2,34 @@
 <html lang="ko">
   <head>
     <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" /> -->
-
-    <!-- Favicon (shortcut icon) -->
-    <!-- WebP 형식을 사용하는 Favicon -->
-    <!-- <link
-      rel="shortcut icon"
-      type="image/webp"
-      href="/src/Cabinet/assets/images/webp/logo.webp"
-    /> -->
-    <!-- Fallback for older browsers (PNG/ICO) -->
     <link
       rel="shortcut icon"
       type="image/png"
       href="/src/Cabinet/assets/images/logo.png"
     />
 
     <!-- Apple Touch Icon -->
-    <!-- <link
-      rel="apple-touch-icon"
-      type="image/webp"
-      href="/src/Cabinet/assets/images/webp/logo.webp"
-    /> -->
-    <!-- Fallback for older browsers (PNG/ICO) -->
     <link
       rel="apple-touch-icon"
       type="image/png"
       href="/src/Cabinet/assets/images/logo.png"
     />
 
-    <link rel="manifest" href="/manifest.json" />
-
     <!-- Apple Touch Icons with different sizes -->
-    <!-- WebP 형식의 Apple Touch Icon -->
-    <!-- <link
-      rel="apple-touch-icon"
-      sizes="192x192"
-      href="/icons/icon-192x192.webp"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="256x256"
-      href="/icons/icon-256x256.webp"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="384x384"
-      href="/icons/icon-384x384.webp"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="512x512"
-      href="/icons/icon-512x512.webp"
-    /> -->
-
-    <!-- Fallback for older browsers and devices (PNG) -->
     <link
       rel="apple-touch-icon"
       sizes="192x192"
@@ -85,19 +51,7 @@
       href="/icons/icon-512x512.png"
     />
 
-    <!-- Preconnect to the fonts server -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
-    <!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> -->
-
-    <!-- Preload the actual font files -->
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Noto+Sans+KR:wght@300;400;700&display=swap"
-      as="style"
-      crossorigin
-      onload="this.onload=null;this.rel='stylesheet'"
-    />
-
+    <link rel="manifest" href="/manifest.json" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
@@ -108,17 +62,10 @@
     <meta property="og:title" content="Cabi" />
 
     <!-- Open Graph Image -->
-    <!-- WebP 이미지 -->
-    <!-- <meta
-      property="og:image"
-      content="https://dev.cabi.42seoul.io/src/assets/images/webp/desktopLogo.webp"
-    /> -->
-    <!-- Fallback for older platforms -->
     <meta
       property="og:image"
       content="https://dev.cabi.42seoul.io/src/assets/images/desktopLogo.png"
     />
-
     <meta
       property="og:description"
       content="42서울 캐비닛 서비스: 여러분의 일상을 가볍게"

diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -7,55 +7,28 @@
   "name": "42Cabi",
   "short_name": "Cabi",
   "icons": [
-    {
-      "src": "icons/icon-192x192.webp",
-      "sizes": "192x192",
-      "type": "image/webp",
-      "purpose": "any"
-    },
     {
       "src": "icons/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any"
     },
-    {
-      "src": "icons/icon-192x192.webp",
-      "sizes": "192x192",
-      "type": "image/webp",
-      "purpose": "maskable"
-    },
     {
       "src": "icons/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
-    {
-      "src": "icons/icon-256x256.webp",
-      "sizes": "256x256",
-      "type": "image/webp"
-    },
     {
       "src": "icons/icon-256x256.png",
       "sizes": "256x256",
       "type": "image/png"
     },
-    {
-      "src": "icons/icon-384x384.webp",
-      "sizes": "384x384",
-      "type": "image/webp"
-    },
     {
       "src": "icons/icon-384x384.png",
       "sizes": "384x384",
       "type": "image/png"
     },
-    {
-      "src": "icons/icon-512x512.webp",
-      "sizes": "512x512",
-      "type": "image/webp"
-    },
     {
       "src": "icons/icon-512x512.png",
       "sizes": "512x512",

diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow : /
diff --git a/frontend/src/App.tsx b/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 AdminSlackNotiPage from "@/Cabinet/pages/admin/AdminSlackNotiPage";
-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 AdminSlackNotiPage = lazy(
+  () => import("@/Cabinet/pages/admin/AdminSlackNotiPage")
+);
+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);

diff --git a/frontend/src/Cabinet/assets/images/storeCoin.svg b/frontend/src/Cabinet/assets/images/storeCoin.svg
diff --git a/frontend/src/Cabinet/components/Store/StoreInfo.tsx b/frontend/src/Cabinet/components/Store/StoreInfo.tsx
@@ -87,10 +87,6 @@ const StoreInfo = () => {
         />
       </HeaderStyled>
       <StoreIconContainer>
-        {/* <img
-          src="/src/Cabinet/assets/images/webp/storeCoin.webp"
-          alt="storeIcon"
-        /> */}
         <StoreCoin />
       </StoreIconContainer>
       <StoreCoinCheckBox monthlyCoinCount={monthlyCoinCount} />

diff --git a/frontend/src/Cabinet/components/TopNav/TopNav.container.tsx b/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]);