ux수정 (#issue 272)

src/components/common/ProtectRoute.tsx

@@ -1,16 +1,38 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import useAuthStore from '../../store/authStore';
 import { Navigate } from 'react-router-dom';
+import { useModal } from '../../hooks/useModal';
+import Modal from './modal/Modal';
+import { MODAL_MESSAGE } from '../../constants/modalMessage';
 interface ProtectRouteProps extends PropsWithChildren {
   redirectUrl: string;
 }
 
 const ProtectRoute = ({ children, redirectUrl }: ProtectRouteProps) => {
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
+  const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
+  const [shouldRedirect, setShouldRedirect] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      handleModalOpen(MODAL_MESSAGE.isNotLoggedIn);
+      const timer = setTimeout(() => setShouldRedirect(true), 1000);
+      return () => clearTimeout(timer);
+    } else {
+      setShouldRedirect(false);
+    }
+  }, [isLoggedIn, handleModalOpen]);
 
   if (!isLoggedIn) {
-    alert('로그인이 필요한 서비스입니다.');
-    return <Navigate to={redirectUrl} replace />;
+    if (shouldRedirect) {
+      return <Navigate to={redirectUrl} replace />;
+    }
+
+    return (
+      <Modal isOpen={isOpen} onClose={handleModalClose}>
+        {message}
+      </Modal>
+    );
   }
 
   return <>{children}</>;

src/components/mypage/ContentTab.styled.ts

@@ -72,32 +72,6 @@ export const WrapperButton = styled.div<{ $height: string }>`
   padding: 0.5rem;
 `;
 
-export const ScrollWrapper = styled.div<{ $height: string }>`
-  width: 100%;
-  height: calc(100% - ${({ $height }) => $height});
-  overflow-y: auto;
-  background: ${({ theme }) => theme.color.lightgrey};
-  border-radius: ${({ theme }) => theme.borderRadius.large};
-
-  &::-webkit-scrollbar {
-    width: 10px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #3e5879;
-    border-radius: 10px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-    border-radius: 10px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgb(65, 100, 146);
-  }
-`;
-
 export const FilterContainer = styled.div`
   width: 100%;
   height: 100%;

src/components/mypage/ContentTab.tsx

@@ -3,6 +3,7 @@ import * as S from './ContentTab.styled';
 import { Link, Outlet, useLocation } from 'react-router-dom';
 import { ROUTES } from '../../constants/routes';
 import MovedInquiredLink from '../../pages/customerService/MoveInquiredLink';
+import ScrollWrapper from './ScrollWrapper';
 
 interface Filter {
   title: string;
@@ -60,18 +61,18 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) {
           <S.WrapperButton $height='10%'>
             <MovedInquiredLink />
           </S.WrapperButton>
-          <S.ScrollWrapper $height='10%'>
+          <ScrollWrapper $height='10%'>
             <S.FilterContainer>
               <Outlet />
             </S.FilterContainer>
-          </S.ScrollWrapper>
+          </ScrollWrapper>
         </>
       ) : (
-        <S.ScrollWrapper $height='0%'>
+        <ScrollWrapper>
           <S.FilterContainer>
             <Outlet context={{ filterId }} />
           </S.FilterContainer>
-        </S.ScrollWrapper>
+        </ScrollWrapper>
       )}
     </S.Container>
   );

src/components/mypage/ScrollWrapper.styled.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const ScrollWrapper = styled.div<{ $height: string }>`
+  width: 100%;
+  height: calc(100% - ${({ $height }) => $height});
+  overflow-y: auto;
+  background: ${({ theme }) => theme.color.lightgrey};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #3e5879;
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgb(65, 100, 146);
+  }
+`;

src/components/mypage/ScrollWrapper.tsx

@@ -0,0 +1,19 @@
+import * as S from './ScrollWrapper.styled';
+
+interface ScrollWrapperProps {
+  children: React.ReactNode;
+  $height?: string;
+  scrollRef?: React.RefObject<HTMLDivElement> | null;
+}
+
+export default function ScrollWrapper({
+  children,
+  $height = '0%',
+  scrollRef = null,
+}: ScrollWrapperProps) {
+  return (
+    <S.ScrollWrapper $height={$height} ref={scrollRef}>
+      {children}
+    </S.ScrollWrapper>
+  );
+}

src/components/mypage/activityLog/ActivityLog.tsx

@@ -2,9 +2,5 @@ import { ACTIVITY_FILTER } from '../../../constants/myPageFilter';
 import ContentTab from '../ContentTab';
 
 export default function ActivityLog() {
-  return (
-    <>
-      <ContentTab $justifyContent='space-around' filter={ACTIVITY_FILTER} />
-    </>
-  );
+  return <ContentTab $justifyContent='space-around' filter={ACTIVITY_FILTER} />;
 }

src/components/mypage/activityLog/commentsActivity/CommentsActivity.tsx

@@ -9,7 +9,7 @@ export default function CommentsActivity() {
   const { myCommentsData, isLoading } = useGetMyComments();
 
   if (isLoading) {
-    return <Spinner size='50px' color='#3e5879;' />;
+    return <Spinner size='50px' color='#3e5879' />;
   }
 
   if (!myCommentsData || myCommentsData.length === 0) {

src/components/mypage/activityLog/inquiries/Inquiries.tsx

@@ -8,7 +8,7 @@ export default function Inquiries() {
   const { myInquiriesData, isLoading } = useGetMyInquiries();
 
   if (isLoading) {
-    return <Spinner size='50px' color='#3e5879;' />;
+    return <Spinner size='50px' color='#3e5879' />;
   }
 
   if (!myInquiriesData || myInquiriesData?.length === 0)

src/components/mypage/joinedProject/MyJoinProjects.styled.ts

@@ -50,28 +50,3 @@ export const WrapperProject = styled.div`
     width: 46%;
   }
 `;
-
-export const ScrollWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  max-height: 80vh;
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 10px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #3e5879;
-    border-radius: 10px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-    border-radius: 10px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgb(65, 100, 146);
-  }
-`;

src/components/mypage/joinedProject/MyJoinProjects.tsx

@@ -5,12 +5,13 @@ import Project from './Project';
 import { ROUTES } from '../../../constants/routes';
 import NoContent from '../../common/noContent/NoContent';
 import Spinner from '../Spinner';
+import ScrollWrapper from '../ScrollWrapper';
 
 const MyJoinProjects = () => {
   const { myJoinedProjectListData, isLoading } = useMyJoinedProjectList();
 
   if (isLoading) {
-    return <Spinner size='50px' color='#3e5879;' />;
+    return <Spinner size='50px' color='#3e5879' />;
   }
   if (!myJoinedProjectListData) return;
 
@@ -20,7 +21,7 @@ const MyJoinProjects = () => {
         <S.FilterTitle>참여한 프로젝트 리스트</S.FilterTitle>
       </S.FilterWrapper>
       {myJoinedProjectListData && myJoinedProjectListData?.length > 0 ? (
-        <S.ScrollWrapper>
+        <ScrollWrapper>
           <S.WrapperProject>
             {myJoinedProjectListData?.map((project) => (
               <Link
@@ -31,7 +32,7 @@ const MyJoinProjects = () => {
               </Link>
             ))}
           </S.WrapperProject>
-        </S.ScrollWrapper>
+        </ScrollWrapper>
       ) : (
         <S.NoWrapper>
           <NoContent type='projects' />