[GGFE-225] 확성기 개수 제한 없이 작동하게 css 변경

components/Layout/MegaPhone.tsx

@@ -16,17 +16,49 @@ type MegaphoneContainerProps = {
   count: number;
 };
 
+const adminContent: IMegaphoneContent = {
+  megaphoneId: 1,
+  content: '상점에서 아이템을 구매해서 확성기를 등록해보세요!(30자 제한)',
+  intraId: '관리자',
+};
+
+const megaphoneContent: IMegaphoneContent = {
+  megaphoneId: 2,
+  content: '확성기 : 오늘 하루 42GG는 내가 접수한다 📢😎',
+  intraId: '절찬 판매 중!',
+};
+
+const profileContent: IMegaphoneContent = {
+  megaphoneId: 3,
+  content: '이미지 변경권 : 잘 지내? 프사 바꿨네...',
+  intraId: '절찬 판매 중!',
+};
+
+const edgeContent: IMegaphoneContent = {
+  megaphoneId: 4,
+  content: 'Edge 뽑기 : 난 "Edge"로 말해',
+  intraId: '절찬 판매 중!',
+};
+
+const backgroundContent: IMegaphoneContent = {
+  megaphoneId: 5,
+  content: '배경 뽑기 : 난 "Background"부터가 달라',
+  intraId: '절찬 판매 중!',
+};
+
+const idContent: IMegaphoneContent = {
+  megaphoneId: 6,
+  content: 'ID 색깔 변경권 : 남들과는 다르게! ID 색깔을 바꿔보세요!',
+  intraId: '절찬 판매 중!',
+};
+
 const defaultContents: MegaphoneList = [
-  {
-    megaphoneId: 1,
-    content: '상점에서 아이템을 구매해서 확성기를 등록해보세요!(30자 제한)',
-    intraId: '관리자',
-  },
-  {
-    megaphoneId: 2,
-    content: '상점에서 아이템을 구매해서 확성기를 등록해보세요!(30자 제한)',
-    intraId: '관리자',
-  },
+  adminContent,
+  megaphoneContent,
+  profileContent,
+  edgeContent,
+  backgroundContent,
+  idContent,
 ];
 
 export const MegaphoneContainer = ({
@@ -35,17 +67,22 @@ export const MegaphoneContainer = ({
 }: MegaphoneContainerProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
-  const [wrapperStyle, setWrapperStyle] = useState<string>('slideNext0');
 
   useInterval(() => {
     const nextIndex = (selectedIndex + 1) % count;
-    setWrapperStyle('slideNext' + nextIndex.toString());
     setSelectedIndex(nextIndex);
-  }, 4500);
+  }, 4000);
 
   return (
     <div className={styles.rollingBanner}>
-      <div className={`${styles.wrapper} ${styles[wrapperStyle]}`} ref={ref}>
+      <div
+        className={styles.wrapper}
+        style={{
+          transition: 'all 1s ease-in-out',
+          transform: `translateY(${selectedIndex * -100}%)`,
+        }}
+        ref={ref}
+      >
         {children}
       </div>
     </div>

styles/Layout/MegaPhone.module.scss

@@ -1,8 +1,3 @@
-@mixin slide($num) {
-  transition: all 1s ease-in-out;
-  transform: translateY($num);
-}
-
 .rollingBanner {
   position: relative;
   display: flex;
@@ -20,37 +15,6 @@
   width: 100%;
   height: 100%;
   text-align: center;
-
-  &.slideNext0 {
-    @include slide(0%);
-  }
-  &.slideNext1 {
-    @include slide(-100%);
-  }
-  &.slideNext2 {
-    @include slide(-200%);
-  }
-  &.slideNext3 {
-    @include slide(-300%);
-  }
-  &.slideNext4 {
-    @include slide(-400%);
-  }
-  &.slideNext5 {
-    @include slide(-500%);
-  }
-  &.slideNext6 {
-    @include slide(-600%);
-  }
-  &.slideNext7 {
-    @include slide(-700%);
-  }
-  &.slideNext8 {
-    @include slide(-800%);
-  }
-  &.slideNext9 {
-    @include slide(-900%);
-  }
 }
 
 .contentWrapper {