fix: animation 세부 수정

src/components/HistorySummary/HistorySummary.animation.tsx

@@ -26,4 +26,15 @@ const HistorySummaryAnimation = ({
   );
 };
 
+export const HistorySummaryListAnimation = ({
+  children,
+  className,
+}: PropsWithChildren<Props>) => {
+  return (
+    <motion.div layout className={className}>
+      {children}
+    </motion.div>
+  );
+};
+
 export default HistorySummaryAnimation;

src/components/HistorySummary/HistorySummary.css.ts

@@ -4,7 +4,7 @@ import { ODSTextTokenVariables } from '@/const/fonts';
 import { colorVariants } from '@/styles/common/color.css';
 import { flexColumn } from '@/styles/common/flex.css';
 import { fontVariants } from '@/styles/common/font.css';
-import { W100 } from '@/styles/common/layout.css';
+import { W100, positionRelative } from '@/styles/common/layout.css';
 
 export const barWidthStyle = style({
   width: 'calc(100% + 0.75rem)',
@@ -63,6 +63,13 @@ export const swiperItemStyle = style({
 });
 
 export const listWrapStyle = style([
+  positionRelative,
+  {
+    transition: 'all 0.3s ease-in-out',
+  },
+]);
+
+export const historyListWrapStyle = style([
   flexColumn,
   {
     transition: 'all 0.3s ease-in-out',

src/components/HistorySummary/HistorySummary.tsx

@@ -1,12 +1,7 @@
 'use client';
 
 import classNames from 'classnames';
-import React, {
-  Fragment,
-  PropsWithChildren,
-  useContext,
-  useState,
-} from 'react';
+import React, { Fragment, PropsWithChildren, useState } from 'react';
 import HistoryCard from '@/components/Card/History/HistoryCard';
 import { HistoryCardContextProps } from '@/components/Card/History/HistoryCard.context';
 import {
@@ -18,7 +13,7 @@ import CommonIcon from '@/composable/Icon/CommonIcon';
 import Pagination from '@/composable/Pagination/Pagination';
 import Spacer from '@/composable/Spacer/Spacer';
 import { useODSBreakPoints } from '@/hook/useODSBreakPoints';
-import { W100, positionRelative } from '@/styles/common/layout.css';
+import { W100 } from '@/styles/common/layout.css';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import OceanSwiper from '../OceanSwiper/OceanSwiper';
 import HistorySummaryAnimation from './HistorySummary.animation';
@@ -38,6 +33,7 @@ import {
   swiperWrapStyleVariants,
   listWrapGradientStyle,
   oceanSwiperWrapperStyle,
+  historyListWrapStyle,
 } from './HistorySummary.css';
 export interface HistoryCardData extends HistoryCardContextProps {
   id: string;
@@ -76,13 +72,12 @@ const List = ({ children }: PropsWithChildren) => {
   const [isOpen, setIsOpen] = useState(isDetailView || false);
   const displayData = !isOpen ? data.slice(0, 2) : data;
   return (
-    <div className={positionRelative}>
+    <div className={listWrapStyle}>
       <div
         className={classNames(
-          listWrapStyle,
+          historyListWrapStyle,
           data.length > 2 && !isOpen && listWrapGradientStyle,
         )}
-        suppressHydrationWarning
       >
         <h2 className={listTitleStyle}>{title}</h2>
         {displayData.map((history, idx) => {

src/components/Welcome/Welcome.animation.tsx

@@ -11,7 +11,7 @@ const WelcomeAnimation = ({ children }: PropsWithChildren) => {
       className={wrapTextStyle}
       initial={{ opacity: 0, y: 150 }}
       whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: ODSAnimation.duration }}
+      transition={{ duration: ODSAnimation.duration, delay: 0.5 }}
       viewport={{ once: true }}
     >
       {children}

src/composable/Mock/Mock.animation.tsx

@@ -12,25 +12,13 @@ const MockAnimation = ({
   className,
   device,
 }: PropsWithChildren<Props>) => {
-  // return (
-  //   <motion.div
-  //     className={className}
-  //     initial={{ opacity: 0, y: 200 }}
-  //     whileInView={{ opacity: 1, y: 0 }}
-  //     transition={{ duration: 0.5 }}
-  //     viewport={{ once: true }}
-  //   >
-  //     {children}
-  //   </motion.div>
-  // );
-
   if (device === 'mobile')
     return (
       <motion.div
         className={className}
-        initial={{ opacity: 0, y: 200 }}
+        initial={{ opacity: 0.01, y: 200 }}
         whileInView={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
+        transition={{ duration: 0.5, delay: 0.1 }}
         viewport={{ once: true }}
       >
         {children}

src/containers/HistorySummaryContainer.tsx

@@ -1,20 +1,31 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { Suspense, useContext } from 'react';
+import { useContext } from 'react';
 import {
   DispatcherContextHistory,
   StaticContextHistory,
   ValueContextHistory,
 } from '@/components/History/History.context';
 import HistorySummary from '@/components/HistorySummary/HistorySummary';
-import StandaloneSkeleton from '@/components/StandaloneSkeleton/StandaloneSkeleton';
+import Skeleton from '@/composable/Skeleton/Skeleton';
 import { getStaticContext } from '@/utils/context/StaticContext';
 
 const HistoryCarouselContainer = dynamic(
   () => import('@/containers/HistoryCarouselContainer'),
   {
     ssr: false,
+    loading: () => {
+      return (
+        <Skeleton
+          style={{
+            width: '100%',
+            height: '18.75rem',
+            marginTop: '1.25rem',
+          }}
+        />
+      );
+    },
   },
 );
 
@@ -77,12 +88,10 @@ const HistorySummaryContainer = ({ isMobile }: SummaryContainerProps) => {
           >
             {isMobile && (
               <HistorySummary.List>
-                <Suspense fallback={<StandaloneSkeleton />}>
-                  {isSelected &&
-                    historySummary.id === state[menuPage].summary_id && (
-                      <HistoryCarouselContainer />
-                    )}
-                </Suspense>
+                {isSelected &&
+                  historySummary.id === state[menuPage].summary_id && (
+                    <HistoryCarouselContainer />
+                  )}
               </HistorySummary.List>
             )}