Merge pull request #1707 from innovationacademy-kr/dev

DEV TO MAIN

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/package.json

@@ -21,7 +21,7 @@
     "@sentry/react": "^8.18.0",
     "@types/react-color": "^3.0.7",
     "axios": "^1.7.2",
-    "firebase": "^10.4.0",
+    "firebase": "^10.14.1",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",

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 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 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);
@@ -74,7 +86,7 @@ function App(): React.ReactElement {
             <Route path="main" element={<AdminMainPage />} />
             <Route path="search" element={<SearchPage />} />
             <Route path="club" element={<AdminClubPage />} />
-            <Route path="slack-notification" element={<AdminSlackNotiPage />} />
+            <Route path="slack-alarm" element={<AdminSlackAlarmPage />} />
             <Route path="available" element={<AvailablePage />} />
             <Route path="store" element={<AdminStorePage />} />
           </Route>

frontend/src/Cabinet/api/axios/axios.custom.ts

@@ -28,10 +28,15 @@ export const axiosMyInfo = async (): Promise<any> => {
   }
 };
 
-const axiosUpdateAlarmURL = "/v4/users/me/alarms";
-export const axiosUpdateAlarm = async (alarm: AlarmInfo): Promise<any> => {
+const axiosUpdateAlarmReceptionPathURL = "/v4/users/me/alarms";
+export const axiosUpdateAlarmReceptionPath = async (
+  alarm: AlarmInfo
+): Promise<any> => {
   try {
-    const response = await instance.put(axiosUpdateAlarmURL, alarm);
+    const response = await instance.put(
+      axiosUpdateAlarmReceptionPathURL,
+      alarm
+    );
     return response;
   } catch (error) {
     throw error;
@@ -891,13 +896,13 @@ export const axiosGetAvailableCabinets = async (): Promise<any> => {
   }
 };
 
-const axiosSendSlackNotificationToUserURL = "/slack/send";
-export const axiosSendSlackNotificationToUser = async (
+const axiosSendSlackAlarmToUserURL = "/slack/send";
+export const axiosSendSlackAlarmToUser = async (
   receiverName: string,
   message: string
 ): Promise<any> => {
   try {
-    const response = await instance.post(axiosSendSlackNotificationToUserURL, {
+    const response = await instance.post(axiosSendSlackAlarmToUserURL, {
       receiverName: receiverName,
       message: message,
     });
@@ -907,13 +912,13 @@ export const axiosSendSlackNotificationToUser = async (
   }
 };
 
-export const axiosSendSlackNotificationToChannel = async (
+export const axiosSendSlackAlarmToChannel = async (
   receiverName: string,
   message: string,
   channel: string | undefined
 ): Promise<any> => {
   try {
-    await instance.post(axiosSendSlackNotificationToUserURL + `/${channel}`, {
+    await instance.post(axiosSendSlackAlarmToUserURL + `/${channel}`, {
       receiverName: receiverName,
       message: message,
     });

frontend/src/Cabinet/api/axios/axios.log.ts

@@ -1,4 +1,5 @@
 import { captureException } from "@sentry/react";
+import { HttpStatusCode } from "axios";
 import ErrorType from "@/Cabinet/types/enum/error.type.enum";
 import { getCookie } from "@/Cabinet/api/react_cookie/cookies";
 
@@ -12,6 +13,7 @@ export const logAxiosError = (
   errorMsg: string,
   isAdmin = false
 ) => {
+  if (error.response?.status === HttpStatusCode.BadRequest) return;
   error.message = (isAdmin ? "[Admin] " : "") + errorMsg;
   captureException(error, {
     tags: {

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/CabinetInfoArea/CabinetInfoArea.tsx

@@ -51,8 +51,7 @@ const CabinetInfoArea: React.FC<{
   closeModal,
   isSwappable,
 }) => {
-  const isExtensionVisible = isMine && selectedCabinetInfo;
-  // selectedCabinetInfo.status !== "IN_SESSION";
+  const isExtensionVisible = isMine && selectedCabinetInfo && selectedCabinetInfo.status !== "IN_SESSION";
   const isHoverBoxVisible =
     selectedCabinetInfo &&
     selectedCabinetInfo.lentsLength <= 1 &&

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

@@ -1,17 +1,31 @@
 import styled from "styled-components";
+import { ReactComponent as CabiImage } from "@/Cabinet/assets/images/happyCcabi.svg";
 
 const EmptySection = ({ message }: { message: string }): JSX.Element => {
   return (
     <EmptySectionStyled>
-      <CabiImageStyled
-        src="/src/Cabinet/assets/images/happyCcabi.png"
-        alt="happy cabi"
-      />
+      <CabinetTypeIconStyled>
+        <CabiImage />
+      </CabinetTypeIconStyled>
       <ContentStyled>{message}</ContentStyled>
     </EmptySectionStyled>
   );
 };
 
+const CabinetTypeIconStyled = styled.div`
+  width: 200px;
+  height: 200px;
+
+  & g {
+    fill: var(--normal-text-color);
+  }
+
+  & > svg {
+    width: 200px;
+    height: 200px;
+  }
+`;
+
 const EmptySectionStyled = styled.div`
   display: flex;
   justify-content: center;