diff --git a/src/components/History/History.context.ts b/src/components/History/History.context.ts
index 1ffc46f..d98f07a 100644
--- a/src/components/History/History.context.ts
+++ b/src/components/History/History.context.ts
@@ -20,17 +20,17 @@ export const StaticContextHistory =
   });
 
 export interface ValueContextHistoryProps {
-  page: number;
+  menuPage: number;
   isSelected: boolean;
   state: {
-    id: string;
+    historyItemId: string;
     summary_id: string;
-    index: number;
+    historyItemIndex: number;
   }[];
 }
 
 export const ValueContextHistory = createContext<ValueContextHistoryProps>({
-  page: 0,
+  menuPage: 0,
   isSelected: false,
   state: [],
 });
diff --git a/src/components/History/History.css.ts b/src/components/History/History.css.ts
index 19cefd3..bb5e24f 100644
--- a/src/components/History/History.css.ts
+++ b/src/components/History/History.css.ts
@@ -8,15 +8,20 @@ export const wrapStyle = style({
   display: 'grid',
   gridAutoRows: 'auto',
   columnGap: '1rem',
+  rowGap: '5rem',
   width: '100%',
 
   '@media': {
     [ODSBreakpointTokenVariables['breakpoint-xxl']]: {
       columnGap: '2.5rem',
     },
+    [ODSBreakpointTokenVariables['breakpoint-l']]: {
+      rowGap: '0',
+    },
     [ODSBreakpointTokenVariables['breakpoint-s']]: {
       display: 'flex',
       flexDirection: 'column',
+      gap: '1.25rem',
     },
   },
 });
diff --git a/src/components/History/History.tsx b/src/components/History/History.tsx
index 9f5b016..e384c29 100644
--- a/src/components/History/History.tsx
+++ b/src/components/History/History.tsx
@@ -9,7 +9,7 @@ import React, { Suspense, useContext, useState } from 'react';
 import UAParser from 'ua-parser-js';
 import StandaloneSkeleton from '@/components/StandaloneSkeleton/StandaloneSkeleton';
 import Button from '@/composable/Button/Button';
-import HistorySummaryContainer from '@/containers/HistorySummary';
+import HistorySummaryContainer from '@/containers/HistorySummaryContainer';
 import { useReactiveLayout } from '@/hook/useReactiveLayout';
 import UserInfoProvider from '@/Provider/UserInfoProvider';
 import { getStaticContext } from '@/utils/context/StaticContext';
@@ -35,12 +35,12 @@ interface Props extends HistorySectionContextProps {
 const History = ({ summary, userAgent }: Props) => {
   const { isMobile } = useReactiveLayout(userAgent);
   const [value, setValue] = useState<ValueContextHistoryProps>({
-    page: 0,
+    menuPage: 0,
     isSelected: false,
-    state: Array.from({ length: summary.length }, () => ({
-      id: '',
-      summary_id: '',
-      index: -1,
+    state: summary.map((summaryItem) => ({
+      historyItemId: '',
+      summary_id: summaryItem.id,
+      historyItemIndex: -1,
     })),
   });
 
@@ -66,7 +66,7 @@ const History = ({ summary, userAgent }: Props) => {
                 suppressHydrationWarning
               >
                 {!isMobile && value.isSelected && <History.Menu />}
-                <History.SummaryContainer isMobile={isMobile} />
+                {<History.SummaryContainer isMobile={isMobile} />}
                 {!isMobile && value.isSelected && (
                   <Suspense fallback={<StandaloneSkeleton />}>
                     <History.CarouselContainer />
@@ -83,14 +83,14 @@ const History = ({ summary, userAgent }: Props) => {
 
 const Menu = () => {
   const { summary } = getStaticContext(StaticContextHistory);
-  const { page } = useContext(ValueContextHistory);
+  const { menuPage } = useContext(ValueContextHistory);
   const { dispatcher } = useContext(DispatcherContextHistory);
 
   const handleClick = (pageIndex: number) => {
     dispatcher((prev) => {
       return {
         ...prev,
-        page: pageIndex,
+        menuPage: pageIndex,
         isSelected: true,
       };
     });
@@ -99,11 +99,12 @@ const Menu = () => {
   return (
     <div className={menuStyle}>
       {summary.map((historySummary, index) => {
+        if (!historySummary.histories.length) return null;
         return (
           <Button
             className={classNames(
               menuButtonStyle,
-              page === index ? menuButtonSelectedStyle : null,
+              menuPage === index ? menuButtonSelectedStyle : null,
             )}
             key={historySummary.id}
             as="button"
@@ -121,7 +122,7 @@ const Menu = () => {
 
 History.SummaryContainer = HistorySummaryContainer;
 History.CarouselContainer = dynamic(
-  () => import('@/containers/HistoryCarousel'),
+  () => import('@/containers/HistoryCarouselContainer'),
   {
     ssr: false,
   },
diff --git a/src/components/HistorySummary/HistorySummary.css.ts b/src/components/HistorySummary/HistorySummary.css.ts
index 37645d7..6358f13 100644
--- a/src/components/HistorySummary/HistorySummary.css.ts
+++ b/src/components/HistorySummary/HistorySummary.css.ts
@@ -1,4 +1,4 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
 import { ODSBreakpointTokenVariables } from '@/const/breakpoints';
 import { ODSTextTokenVariables } from '@/const/fonts';
 import { colorVariants } from '@/styles/common/color.css';
@@ -29,21 +29,31 @@ export const swiperTitleStyle = style([
   colorVariants['gray-scale-06'],
   {
     ...ODSTextTokenVariables['title-m-bold'],
-    paddingBottom: '1rem',
     '@media': {
-      [ODSBreakpointTokenVariables['breakpoint-xxl']]: {
-        paddingBottom: '1.5rem',
-      },
+      [ODSBreakpointTokenVariables['breakpoint-xxl']]: {},
       [ODSBreakpointTokenVariables['breakpoint-l']]:
         ODSTextTokenVariables['title-s-medium'],
       [ODSBreakpointTokenVariables['breakpoint-m']]: {
-        paddingBottom: '0.75rem',
         ...ODSTextTokenVariables['title-s-semibold'],
       },
     },
   },
 ]);
-// transition: 'all 0.3s ease-in-out',
+
+export const oceanSwiperWrapperStyle = style({});
+
+globalStyle(`${oceanSwiperWrapperStyle} > .swiper-wrapper`, {
+  paddingTop: '1rem',
+
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-xxl']]: {
+      paddingTop: '1.5rem',
+    },
+    [ODSBreakpointTokenVariables['breakpoint-m']]: {
+      paddingTop: '0.75rem',
+    },
+  },
+});
 
 export const swiperItemStyle = style({
   display: 'inline-flex !important',
@@ -62,7 +72,7 @@ export const listWrapStyle = style([
 
 export const listWrapGradientStyle = style({
   WebkitMaskImage:
-    'linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%)',
+    'linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%)',
 });
 
 export const listTitleStyle = style([
diff --git a/src/components/HistorySummary/HistorySummary.tsx b/src/components/HistorySummary/HistorySummary.tsx
index 35c306e..1c74d5a 100644
--- a/src/components/HistorySummary/HistorySummary.tsx
+++ b/src/components/HistorySummary/HistorySummary.tsx
@@ -18,12 +18,10 @@ 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 } from '@/styles/common/layout.css';
+import { W100, positionRelative } from '@/styles/common/layout.css';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import OceanSwiper from '../OceanSwiper/OceanSwiper';
 import {
-  ContextDispatcherHistorySummary,
-  ContextValueHistorySummary,
   HistorySummaryContextProps,
   StaticContextHistorySummary,
 } from './HistorySummary.context';
@@ -38,6 +36,7 @@ import {
   barWidthStyle,
   swiperWrapStyleVariants,
   listWrapGradientStyle,
+  oceanSwiperWrapperStyle,
 } from './HistorySummary.css';
 export interface HistoryCardData extends HistoryCardContextProps {
   id: string;
@@ -54,7 +53,6 @@ const HistorySummary = ({
   selectIndex,
   handleClick,
 }: PropsWithChildren<HistorySummaryProps>) => {
-  const [isOpen, setIsOpen] = useState(isDetailView || false);
   return (
     <StaticContextHistorySummary.Provider
       value={{
@@ -66,86 +64,67 @@ const HistorySummary = ({
         handleClick,
       }}
     >
-      <ContextDispatcherHistorySummary.Provider
-        value={{
-          setIsOpen,
-        }}
-      >
-        <ContextValueHistorySummary.Provider
-          value={{
-            isOpen,
-          }}
-        >
-          {children}
-        </ContextValueHistorySummary.Provider>
-      </ContextDispatcherHistorySummary.Provider>
+      {children}
     </StaticContextHistorySummary.Provider>
   );
 };
 
 const List = ({ children }: PropsWithChildren) => {
-  const { title, data, selectIndex, summary_id, handleClick } =
+  const { title, data, selectIndex, summary_id, isDetailView, handleClick } =
     getStaticContext(StaticContextHistorySummary);
-  const { isOpen } = useContext(ContextValueHistorySummary);
+  const [isOpen, setIsOpen] = useState(isDetailView || false);
   const displayData = !isOpen ? data.slice(0, 2) : data;
   return (
-    <div
-      className={classNames(
-        listWrapStyle,
-        data.length > 2 && !isOpen && listWrapGradientStyle,
-      )}
-      suppressHydrationWarning
-    >
-      <h2 className={listTitleStyle}>{title}</h2>
-      {displayData.map((history, idx) => {
-        return (
-          <Fragment key={history.id}>
-            <HistoryCard
-              companyName={history.companyName}
-              period={history.period}
-              onClick={() => {
-                if (handleClick) handleClick(history.id, summary_id, idx);
-              }}
-            >
-              <HistoryCard.Company />
-              <HistoryCard.Period />
-            </HistoryCard>
-            {selectIndex === idx && children}
-          </Fragment>
-        );
-      })}
-      {isOpen && <Spacer direction="horizontal" spacing="spacer-075" />}
-      {isOpen && <Spacer direction="horizontal" spacing="spacer-15" />}
-    </div>
-  );
-};
-
-const OpenButton = () => {
-  const { data } = getStaticContext(StaticContextHistorySummary);
-  const { isOpen } = useContext(ContextValueHistorySummary);
-  const { setIsOpen } = useContext(ContextDispatcherHistorySummary);
-
-  if (data.length <= 2) return null;
-
-  return (
-    <Button
-      className={buttonStyle}
-      as="button"
-      type="button"
-      onClick={() => {
-        setIsOpen(!isOpen);
-      }}
-    >
-      <CommonIcon
+    <div className={positionRelative}>
+      <div
         className={classNames(
-          iconStyle,
-          iconStyleVariants[isOpen ? 'OPEN' : 'CLOSE'],
+          listWrapStyle,
+          data.length > 2 && !isOpen && listWrapGradientStyle,
         )}
-        variant="LEFT_ARROW_SECONDARY_VARIANT"
-        width={21.33333}
-        height={24}
-      />
-    </Button>
+        suppressHydrationWarning
+      >
+        <h2 className={listTitleStyle}>{title}</h2>
+        {displayData.map((history, idx) => {
+          return (
+            <Fragment key={history.id}>
+              <HistoryCard
+                companyName={history.companyName}
+                period={history.period}
+                onClick={() => {
+                  if (handleClick) handleClick(history.id, summary_id, idx);
+                }}
+              >
+                <HistoryCard.Company />
+                <HistoryCard.Period />
+              </HistoryCard>
+              {selectIndex === idx && children}
+            </Fragment>
+          );
+        })}
+        {isOpen && <Spacer direction="horizontal" spacing="spacer-075" />}
+        {isOpen && <Spacer direction="horizontal" spacing="spacer-15" />}
+      </div>
+      {data.length > 2 && (
+        <Button
+          className={buttonStyle}
+          as="button"
+          type="button"
+          onClick={() => {
+            setIsOpen(!isOpen);
+          }}
+        >
+          <CommonIcon
+            className={classNames(
+              iconStyle,
+              iconStyleVariants[isOpen ? 'OPEN' : 'CLOSE'],
+            )}
+            variant="LEFT_ARROW_SECONDARY_VARIANT"
+            width={21.33333}
+            height={24}
+          />
+        </Button>
+      )}
+    </div>
   );
 };
 
@@ -168,7 +147,11 @@ const Swipe = () => {
         )}
       </OceanSwiper.Top>
 
-      <OceanSwiper.Main className={W100} perView={'auto'}>
+      <OceanSwiper.Main
+        className={W100}
+        wrapperClassName={isDetailView ? '' : oceanSwiperWrapperStyle}
+        blur
+      >
         {data.map((history, idx) => {
           return (
             <OceanSwiper.Slide key={history.id} className={swiperItemStyle}>
@@ -216,6 +199,5 @@ const Swipe = () => {
 
 HistorySummary.List = List;
 HistorySummary.Swipe = Swipe;
-HistorySummary.OpenButton = OpenButton;
 
 export default HistorySummary;
diff --git a/src/components/OceanSwiper/OceanSwiper.css.ts b/src/components/OceanSwiper/OceanSwiper.css.ts
index e153140..9de2dea 100644
--- a/src/components/OceanSwiper/OceanSwiper.css.ts
+++ b/src/components/OceanSwiper/OceanSwiper.css.ts
@@ -31,6 +31,24 @@ export const oceanSwiperGradient = style({
   },
 });
 
+export const oceanSwiperWrapperGradient = style({
+  WebkitMaskImage:
+    'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) calc(0.25rem + 1.5rem + 1rem)), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%)',
+
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-xxl']]: {
+      WebkitMaskImage:
+        'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) calc(0.25rem + 1.5rem + 1.5rem)), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%)',
+    },
+    [ODSBreakpointTokenVariables['breakpoint-m']]: {
+      WebkitMaskImage:
+        'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) calc(0.25rem + 0.75rem + 0.75rem)), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%)',
+    },
+  },
+});
+
+globalStyle(`${oceanSwiperWrapperGradient} > .swiper-wrapper`, {});
+
 export const swiperVisibleSelector = style({});
 
 globalStyle(`${swiperVisibleSelector} > .swiper`, {
diff --git a/src/components/OceanSwiper/OceanSwiper.tsx b/src/components/OceanSwiper/OceanSwiper.tsx
index be2f0c4..e13a8b0 100644
--- a/src/components/OceanSwiper/OceanSwiper.tsx
+++ b/src/components/OceanSwiper/OceanSwiper.tsx
@@ -13,6 +13,7 @@ import { ContextValueOceanSwiper } from './OceanSwiper.context';
 import {
   oceanSwiperGradient,
   oceanSwiperWrap,
+  oceanSwiperWrapperGradient,
   swiperVisibleSelector,
 } from './OceanSwiper.css';
 
@@ -91,6 +92,7 @@ const Wrap = ({
 
 interface MainProps extends SwiperOptions {
   className?: string;
+  wrapperClassName?: string;
   hiddenNavigation?: boolean;
   prevButton?: React.ReactNode;
   nextButton?: React.ReactNode;
@@ -98,11 +100,13 @@ interface MainProps extends SwiperOptions {
   overflowVisible?: boolean;
   perView?: number | 'auto';
   gap?: number;
+  blur?: boolean;
 }
 
 const Main = ({
   children,
   className,
+  wrapperClassName,
   hiddenNavigation,
   prevButton,
   nextButton,
@@ -110,6 +114,7 @@ const Main = ({
   overflowVisible = true,
   perView,
   gap,
+  blur,
   ...rest
 }: PropsWithChildren<MainProps>) => {
   const { swiperWrapperRef } = getStaticContext(ContextValueOceanSwiper);
@@ -124,6 +129,10 @@ const Main = ({
     >
       <Swiper
         {...rest}
+        className={classNames(
+          wrapperClassName,
+          blur && oceanSwiperWrapperGradient,
+        )}
         ref={swiperRef}
         modules={[A11y, Pagination]}
         slidesPerView={perView || 'auto'}
diff --git a/src/components/SkillList/SkillList.css.ts b/src/components/SkillList/SkillList.css.ts
index 00a2008..e81fb9a 100644
--- a/src/components/SkillList/SkillList.css.ts
+++ b/src/components/SkillList/SkillList.css.ts
@@ -8,12 +8,14 @@ export const wrapStyle = style([
   {
     justifyContent: 'center',
     gap: '1.5rem',
-
-    WebkitMaskImage:
-      'linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%)',
   },
 ]);
 
+export const wrapGradientStyle = style({
+  WebkitMaskImage:
+    'linear-gradient(to top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,1) 80%)',
+});
+
 export const bundleStyle = style([
   flexColumn,
   {
diff --git a/src/components/SkillList/SkillList.tsx b/src/components/SkillList/SkillList.tsx
index d655898..ef89f59 100644
--- a/src/components/SkillList/SkillList.tsx
+++ b/src/components/SkillList/SkillList.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import classNames from 'classnames';
 import React from 'react';
 import Button from '@/composable/Button/Button';
 import CommonIcon from '@/composable/Icon/CommonIcon';
@@ -15,22 +16,29 @@ import {
   overlayBackgroundStyle,
   overlayWrapStyle,
   titleStyle,
+  wrapGradientStyle,
   wrapStyle,
 } from './SkillList.css';
 
 const SkillList = () => {
   const { data } = getStaticContext(StaticContextSkill);
   const displayData = data.slice(0, 3);
+  const flattenData = data.flatMap((category) => category.skills);
 
   return (
     <>
       <Spacer spacing="spacer-25" />
-      <div className={wrapStyle}>
+      <div
+        className={classNames(
+          wrapStyle,
+          (data.length > 3 || flattenData.length > 4) && wrapGradientStyle,
+        )}
+      >
         {displayData.map((category, index) => {
           return <SkillList.Bundle key={category.id} index={index} />;
         })}
       </div>
-      <SkillList.Overlay />
+      {(data.length > 3 || flattenData.length > 4) && <SkillList.Overlay />}
     </>
   );
 };
diff --git a/src/containers/Contents.tsx b/src/containers/Contents.tsx
index 6235730..abe4b75 100644
--- a/src/containers/Contents.tsx
+++ b/src/containers/Contents.tsx
@@ -3,7 +3,7 @@ import { StaticContextPageInfo } from '@/app/context';
 import StandaloneSkeleton from '@/components/StandaloneSkeleton/StandaloneSkeleton';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import ContactContainer from './Contact';
-import HistoryContainer from './History';
+import HistoryContainer from './HistoryContainer';
 import IntroduceContainer from './Introduce';
 import KeywordContainer from './Keyword';
 import ProjectContainer from './Project';
diff --git a/src/containers/HistoryCarousel.tsx b/src/containers/HistoryCarouselContainer.tsx
similarity index 92%
rename from src/containers/HistoryCarousel.tsx
rename to src/containers/HistoryCarouselContainer.tsx
index 7efe37e..3892c6a 100644
--- a/src/containers/HistoryCarousel.tsx
+++ b/src/containers/HistoryCarouselContainer.tsx
@@ -12,14 +12,14 @@ import {
 import { getPeriod } from '@/utils/date/getPeriod';
 
 const HistoryCarouselContainer = () => {
-  const { page, state } = useContext(ValueContextHistory);
+  const { menuPage, state } = useContext(ValueContextHistory);
 
   const historyItemQuery = useSuspenseQuery<
     GetHistoryItemByHistoryIdQuery,
     GetHistoryItemByHistoryIdQueryVariables
   >(GET_HISTORY_ITEM_BY_HISTORY_ID, {
     variables: {
-      history_id: Number(state[page].id),
+      history_id: Number(state[menuPage].historyItemId),
     },
   });
 
diff --git a/src/containers/History.tsx b/src/containers/HistoryContainer.tsx
similarity index 100%
rename from src/containers/History.tsx
rename to src/containers/HistoryContainer.tsx
diff --git a/src/containers/HistorySummary.tsx b/src/containers/HistorySummaryContainer.tsx
similarity index 63%
rename from src/containers/HistorySummary.tsx
rename to src/containers/HistorySummaryContainer.tsx
index 62dbbbd..8098857 100644
--- a/src/containers/HistorySummary.tsx
+++ b/src/containers/HistorySummaryContainer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import dynamic from 'next/dynamic';
 import { Suspense, useContext } from 'react';
 import {
@@ -10,7 +12,7 @@ import StandaloneSkeleton from '@/components/StandaloneSkeleton/StandaloneSkelet
 import { getStaticContext } from '@/utils/context/StaticContext';
 
 const HistoryCarouselContainer = dynamic(
-  () => import('@/containers/HistoryCarousel'),
+  () => import('@/containers/HistoryCarouselContainer'),
   {
     ssr: false,
   },
@@ -22,19 +24,28 @@ interface SummaryContainerProps {
 
 const HistorySummaryContainer = ({ isMobile }: SummaryContainerProps) => {
   const { summary } = getStaticContext(StaticContextHistory);
-  const { isSelected, page, state } = useContext(ValueContextHistory);
+  const { isSelected, menuPage, state } = useContext(ValueContextHistory);
   const { dispatcher } = useContext(DispatcherContextHistory);
 
-  const handleClick = (id: string, summary_id: string, index: number) => {
+  const handleClick = (
+    historyItemId: string,
+    summary_id: string,
+    historyItemIndex: number,
+  ) => {
+    const selectedMenuPage = state.findIndex(
+      (history) => history.summary_id === summary_id,
+    );
+
     dispatcher((prev) => {
       const newState = [...prev.state];
-      newState[page] = {
-        id,
+      newState[selectedMenuPage] = {
+        historyItemId,
         summary_id,
-        index,
+        historyItemIndex,
       };
       return {
         ...prev,
+        menuPage: selectedMenuPage,
         isSelected: true,
         state: newState,
       };
@@ -44,7 +55,7 @@ const HistorySummaryContainer = ({ isMobile }: SummaryContainerProps) => {
   const summaryDisplayList =
     isSelected && !isMobile
       ? summary.filter(
-          (historySummary) => historySummary.id === state[page].summary_id,
+          (historySummary) => historySummary.id === state[menuPage].summary_id,
         )
       : summary;
 
@@ -60,18 +71,18 @@ const HistorySummaryContainer = ({ isMobile }: SummaryContainerProps) => {
             title={historySummary.name}
             data={historySummary.histories}
             isDetailView={isSelected}
-            selectIndex={state[page].index}
+            selectIndex={state[menuPage].historyItemIndex}
             handleClick={handleClick}
           >
             {isMobile && (
-              <>
-                <HistorySummary.List>
-                  <Suspense fallback={<StandaloneSkeleton />}>
-                    {isSelected && <HistoryCarouselContainer />}
-                  </Suspense>
-                </HistorySummary.List>
-                <HistorySummary.OpenButton />
-              </>
+              <HistorySummary.List>
+                <Suspense fallback={<StandaloneSkeleton />}>
+                  {isSelected &&
+                    historySummary.id === state[menuPage].summary_id && (
+                      <HistoryCarouselContainer />
+                    )}
+                </Suspense>
+              </HistorySummary.List>
             )}
 
             {!isMobile && <HistorySummary.Swipe />}
diff --git a/src/hook/useOceanSwiperButton.ts b/src/hook/useOceanSwiperButton.ts
index 74f465e..9d087d0 100644
--- a/src/hook/useOceanSwiperButton.ts
+++ b/src/hook/useOceanSwiperButton.ts
@@ -6,10 +6,8 @@ const useOceanSwiperButton = (direction: ButtonDirection) => {
 
   const handleClick = () => {
     if (direction === 'PREV') {
-      console.log(buttonRefs, 'buttonRefs');
       buttonRefs.prev?.click();
     } else {
-      console.log(buttonRefs, 'buttonRefs');
       buttonRefs.next?.click();
     }
   };
diff --git a/src/styles/common/layout.css.ts b/src/styles/common/layout.css.ts
index 171a5dd..f0a8b9b 100644
--- a/src/styles/common/layout.css.ts
+++ b/src/styles/common/layout.css.ts
@@ -7,3 +7,7 @@ export const W100 = style({
 export const H100 = style({
   height: '100%',
 });
+
+export const positionRelative = style({
+  position: 'relative',
+});