알람 버튼 클릭시 버블링을 막고 알럿이 뜨도록 한다

src/App.tsx

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
-import { Route, Switch, useLocation } from 'react-router-dom';
+import { Route, Switch, useLocation, Redirect } from 'react-router-dom';
 import styles from '@src/App.module.scss';
-import LandingPage from '@src/pages/LandingPage';
 import LoginPage from '@src/pages/LoginPage';
 import JoinPage from '@src/pages/JoinPage';
 import IdeaPage from '@src/pages/IdeaPage';
@@ -16,6 +15,8 @@ import SideReadPage from '@src/pages/SideReadPage';
 import AlertModal from '@src/components/modals/AlertModal';
 import { useAppDispatch, useUiState, hideGlobalAlert } from '@src/store';
 
+const PATH_CHECK = ['login', 'join', 'idea', 'side', 'mypage'];
+
 const App = () => {
   const { isGlobalAlertVisible, globalAlertMessage } = useUiState();
   const dispatch = useAppDispatch();
@@ -38,7 +39,6 @@ const App = () => {
           <Sidebar pathname={pathname} />
         </div>
         <div className={styles.content} ref={pageRef}>
-          <Route exact path="/" component={LandingPage} />
           <AuthRoute
             path="/login"
             component={LoginPage}
@@ -72,6 +72,9 @@ const App = () => {
             redirectPath="/login"
             render={(props) => <MyPage {...props} handleToTop={handleToTop} />}
           />
+          {pathname && !PATH_CHECK.some((each) => pathname.includes(each)) && (
+            <Redirect to="/side" />
+          )}
         </div>
         {isGlobalAlertVisible && (
           <AlertModal

src/components/AlarmCard/index.tsx

@@ -44,7 +44,13 @@ const AlarmCard = ({
             {postType}
           </Typography>
         </div>
-        <Close className={cn(styles.closeIconContainer)} onClick={onClose} />
+        <Close
+          className={cn(styles.closeIconContainer)}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose();
+          }}
+        />
       </div>
       <div className={styles.alarmCardContentArea}>
         <Typography

src/components/AlarmCardContainer/index.tsx

@@ -6,14 +6,16 @@ import AlarmCard from '@src/components/AlarmCard';
 import useModalControl from '@src/hooks/useModalControl';
 import IdeaModal from '@src/components/modals/IdeaModal';
 import { Alarm } from '@src/models';
+import { showGlobalAlert, useAppDispatch } from '@src/store';
+import { GuideText } from '@src/constant/enums';
 
 const AlarmCardContainer = (props: Alarm) => {
   const {
     isModalVisible: isIdeaVisible,
     showModal: showIdea,
     hideModal: hideIdea,
   } = useModalControl();
-
+  const dispatch = useAppDispatch();
   const history = useHistory();
 
   const deleteAlarmMutation = useDeleteAlarm();
@@ -33,7 +35,24 @@ const AlarmCardContainer = (props: Alarm) => {
     <div>
       <AlarmCard
         onClick={handleClick}
-        onClose={() => deleteAlarmMutation.mutate(props.id)}
+        onClose={() =>
+          deleteAlarmMutation.mutate(props.id, {
+            onSuccess: () => {
+              dispatch(
+                showGlobalAlert({
+                  globalAlertMessage: '댓글 알림을 삭제하였습니다.',
+                }),
+              );
+            },
+            onError: () => {
+              dispatch(
+                showGlobalAlert({
+                  globalAlertMessage: GuideText.ERROR,
+                }),
+              );
+            },
+          })
+        }
         {...props}
       />
       {isIdeaVisible && props.id && (

src/pages/SidePage/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import cn from 'classnames';
 
 import styles from './SidePage.module.scss';
@@ -23,18 +23,12 @@ import Typography from '@src/components/common/Typography';
 import { setSide, useAppDispatch, useSideState } from '@src/store';
 import Input, { ParentRef } from '@src/components/common/Input';
 import { useAuth } from '@src/hooks/useUserQuery';
-import { useLocation } from 'react-router-dom';
-import { GuideText } from '@src/constant/enums';
 
 interface SidePageProps {
   handleToTop?: () => void;
 }
 
 const SidePage = ({ handleToTop }: SidePageProps) => {
-  const location = useLocation();
-
-  const status = useMemo(() => location.state as string, [location]);
-
   // 첫 화면 렌더링시 애니메이션 실행 안되도록 처리함
   const [init, setInit] = useState(false);
   const [isFilterOpen, setIsFilterOpen] = useState(false);