Style: 공지사항 페이지 슬라이드 애니메이션 추가 및 제목 1줄, 고정과 일반 구분하는 css 추가

src/pages/Announcement/index.tsx

@@ -4,19 +4,35 @@ import AnnounceList from '@components/Card/AnnounceCard/AnnounceList';
 import AnnounceCardSkeleton from '@components/Card/AnnounceCard/Skeleton';
 import AlertModal from '@components/Modal/AlertModal';
 import { MODAL_MESSAGE } from '@constants/modal-messages';
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
 import useMajor from '@hooks/useMajor';
 import useModals from '@hooks/useModals';
 import useRouter from '@hooks/useRouter';
 import { THEME } from '@styles/ThemeProvider/theme';
-import { Suspense } from 'react';
+import { Suspense, useState } from 'react';
+
+type AnimationType = 'bottomBar' | 'announce';
+type GetAnimationType = (type: AnimationType) => string;
 
 const Announcement = () => {
   const { major } = useMajor();
   const { routerTo } = useRouter();
   const { openModal, closeModal } = useModals();
+  const [activeAnimation, setActiveAnimation] = useState<boolean>(false);
+
   const routerToMajorDecision = () => routerTo('/major-decision');
+
   const announceKeyword = decodeURI(window.location.pathname.split('/')[2]);
+  const isKeywordUndefined = () => announceKeyword === 'undefined';
+
+  const getAnimationType: GetAnimationType = (type) => {
+    if (!activeAnimation) return 'none';
+    if (type === 'bottomBar') {
+      return !isKeywordUndefined() ? BottomBarSlideRight : BottomBarSlideLeft;
+    }
+    return !isKeywordUndefined() ? AnnounceSlideRight : AnnounceSlideLeft;
+  };
 
   const handleMajorAnnouncements = () => {
     if (!major) {
@@ -32,23 +48,25 @@ const Announcement = () => {
       });
       return;
     }
+    if (!activeAnimation) {
+      setActiveAnimation((prev) => !prev);
+    }
     routerTo(`${major}`);
   };
 
-  const isKeywordUndefined = () => announceKeyword === 'undefined';
-
   return (
     <>
       <div
         css={css`
+          width: inherit;
           display: flex;
+          position: relative;
+          overflow-x: hidden;
         `}
       >
         <Button
           onClick={() => routerTo('')}
           css={css`
-            border-bottom: ${isKeywordUndefined() &&
-            `3px solid ${THEME.PRIMARY}`};
             border-radius: 0px;
             background-color: ${THEME.TEXT.WHITE};
             color: ${isKeywordUndefined() ? THEME.PRIMARY : THEME.TEXT.BLACK};
@@ -59,24 +77,81 @@ const Announcement = () => {
         <Button
           onClick={() => handleMajorAnnouncements()}
           css={css`
-            border-bottom: ${!isKeywordUndefined() &&
-            `3px solid ${THEME.PRIMARY}`};
             border-radius: 0px;
             background-color: ${THEME.TEXT.WHITE};
             color: ${isKeywordUndefined() ? THEME.TEXT.BLACK : THEME.PRIMARY};
           `}
         >
           학과 공지사항
         </Button>
+        <BottomBar getAnimationType={getAnimationType} />
       </div>
-      <Suspense fallback={<AnnounceCardSkeleton length={30} />}>
-        <AnnounceList
-          resource={fetchAnnounceList(
-            announceKeyword !== 'undefined' ? announceKeyword : '',
-          )}
-        />
-      </Suspense>
+      <AnnounceContainer getAnimationType={getAnimationType}>
+        <Suspense fallback={<AnnounceCardSkeleton length={30} />}>
+          <AnnounceList
+            resource={fetchAnnounceList(
+              announceKeyword !== 'undefined' ? announceKeyword : '',
+            )}
+          />
+        </Suspense>
+      </AnnounceContainer>
     </>
   );
 };
+
 export default Announcement;
+
+const BottomBar = styled.span<{ getAnimationType: GetAnimationType }>`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 50%;
+  height: 3px;
+  background-color: ${THEME.PRIMARY};
+  animation: ${({ getAnimationType }) => getAnimationType('bottomBar')} 0.3s
+    forwards;
+`;
+
+const AnnounceContainer = styled.div<{ getAnimationType: GetAnimationType }>`
+  width: 100%;
+  animation: ${({ getAnimationType }) => getAnimationType('announce')} 0.3s
+    forwards;
+`;
+
+const BottomBarSlideRight = keyframes`
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+`;
+
+const BottomBarSlideLeft = keyframes`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+`;
+
+const AnnounceSlideRight = keyframes`
+  from {
+    transform: translateX(-100%);
+    display: none;
+  }
+  to {
+    transform: translateX(0%);
+  }
+`;
+
+const AnnounceSlideLeft = keyframes`
+  from {
+    transform: translateX(200%);
+    display: none;
+  }
+  to {
+    transform: translateX(0%);
+  }
+`;