diff --git a/src/components/History/History.tsx b/src/components/History/History.tsx
index 5555eb7..232a50e 100644
--- a/src/components/History/History.tsx
+++ b/src/components/History/History.tsx
@@ -1,10 +1,10 @@
import React from 'react';
-import OceanSwiper from '../OceanSwiper/OceanSwiper';
+import HistorySwiper from '../HistorySwiper/HistorySwiper';
const History = () => {
return (
);
};
diff --git a/src/components/HistorySlideButton/HistorySlideButton.css.ts b/src/components/HistorySlideButton/HistorySlideButton.css.ts
new file mode 100644
index 0000000..7a579b8
--- /dev/null
+++ b/src/components/HistorySlideButton/HistorySlideButton.css.ts
@@ -0,0 +1,12 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+
+export const buttonStyle = style({});
+
+export const iconVariants = styleVariants({
+ PREV: [{}],
+ NEXT: [
+ {
+ transform: 'rotate(180deg)',
+ },
+ ],
+});
diff --git a/src/components/HistorySlideButton/HistorySlideButton.tsx b/src/components/HistorySlideButton/HistorySlideButton.tsx
new file mode 100644
index 0000000..3376f3b
--- /dev/null
+++ b/src/components/HistorySlideButton/HistorySlideButton.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import React from 'react';
+import CommonIcon from '@/composable/Icon/CommonIcon';
+import useOceanSwiperButton from '../../hook/useOceanSwiperButton';
+import { iconVariants } from './HistorySlideButton.css';
+
+interface Props {
+ direction: ButtonDirection;
+}
+
+const HistorySlideButton = ({ direction }: Props) => {
+ const { handleClick } = useOceanSwiperButton(direction);
+ return (
+
+ );
+};
+
+export default HistorySlideButton;
diff --git a/src/components/HistorySwiper/HistorySwiper.tsx b/src/components/HistorySwiper/HistorySwiper.tsx
new file mode 100644
index 0000000..3d6ceb4
--- /dev/null
+++ b/src/components/HistorySwiper/HistorySwiper.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import 'swiper/css';
+
+import React from 'react';
+import HistoryCard from '../Card/History/HistoryCard';
+import HistorySlideButton from '../HistorySlideButton/HistorySlideButton';
+import HistoryTab from '../HistoryTab/HistoryTab';
+import OceanSwiper from '../OceanSwiper/OceanSwiper';
+
+const HistorySwiper = () => {
+ const mock1 = ['a', 'b', 'c'];
+ const mock2 = ['d', 'e', 'f'];
+ const mock3 = ['g', 'h', 'i'];
+
+ return (
+
+
+
+
+
+
+
+
+ {mock1.map((id) => {
+ return (
+
+
+
+
+
+ );
+ })}
+
+
+ {mock2.map((id) => {
+ return (
+
+
+
+
+
+ );
+ })}
+
+
+ {mock3.map((id) => {
+ return (
+
+
+
+
+
+ );
+ })}
+
+
+
+ );
+};
+
+export default HistorySwiper;
diff --git a/src/components/HistoryTab/HistoryTab.tsx b/src/components/HistoryTab/HistoryTab.tsx
new file mode 100644
index 0000000..f150e7e
--- /dev/null
+++ b/src/components/HistoryTab/HistoryTab.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { useOceanSwiperIndex } from '@/hook/useOceanSwiperIndex';
+
+const HistoryTab = () => {
+ const { readIndex } = useOceanSwiperIndex();
+
+ return
{readIndex}
;
+};
+
+export default HistoryTab;
diff --git a/src/components/OceanSwiper/OceanSwiper.context.ts b/src/components/OceanSwiper/OceanSwiper.context.ts
new file mode 100644
index 0000000..0aac068
--- /dev/null
+++ b/src/components/OceanSwiper/OceanSwiper.context.ts
@@ -0,0 +1,20 @@
+import { createStaticContext } from '@/utils/context/StaticContext';
+
+export interface ContextDispatchOceanSwiperProps {}
+
+interface ContextOceanSwiper {
+ buttonRefs: {
+ prev: HTMLButtonElement | null;
+ next: HTMLButtonElement | null;
+ };
+}
+
+export const ContextDispatchOceanSwiper =
+ createStaticContext({});
+
+export const ContextValueOceanSwiper = createStaticContext({
+ buttonRefs: {
+ prev: null,
+ next: null,
+ },
+});
diff --git a/src/components/OceanSwiper/OceanSwiper.tsx b/src/components/OceanSwiper/OceanSwiper.tsx
index d48c160..643aeb0 100644
--- a/src/components/OceanSwiper/OceanSwiper.tsx
+++ b/src/components/OceanSwiper/OceanSwiper.tsx
@@ -1,45 +1,73 @@
'use client';
-import 'swiper/css';
-
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
import { A11y } from 'swiper/modules';
-import { Swiper, SwiperSlide, useSwiper } from 'swiper/react';
+import { Swiper, SwiperRef, SwiperSlide, useSwiper } from 'swiper/react';
import { SwiperOptions } from 'swiper/types';
+import Tag from '@/composable/Tag/Tag';
+import { customEvents } from '@/const/customEvents';
+import { getStaticContext } from '@/utils/context/StaticContext';
+import {
+ ContextDispatchOceanSwiper,
+ ContextValueOceanSwiper,
+} from './OceanSwiper.context';
// TODO : 이벤트 위임 구현과 UI 컨트롤 로직을 위한 컨텍스트 API 사용
-interface Props {}
-
-const OceanSwiper = ({ children }: PropsWithChildren) => {
- return {children}
;
-};
-const Top = ({ children }: PropsWithChildren) => {
- return { children };
+const OceanSwiper = ({ children }: PropsWithChildren) => {
+ return (
+
+
+ {children}
+
+
+ );
};
interface MainProps extends SwiperOptions {
- eventDelegation?: boolean;
- prevButton: React.ReactNode;
- nextButton: React.ReactNode;
+ hiddenNavigation?: boolean;
+ prevButton?: React.ReactNode;
+ nextButton?: React.ReactNode;
}
const Main = ({
children,
- eventDelegation,
+ hiddenNavigation,
prevButton,
nextButton,
...rest
}: PropsWithChildren) => {
+ const swiperRef = useRef(null);
+
return (
-
- {eventDelegation === true ? (
+ {
+ typeof window !== 'undefined' &&
+ window.dispatchEvent(
+ new CustomEvent(customEvents.SWIPER_REAL_INDEX_CHANGE, {
+ detail: e,
+ }),
+ );
+ }}
+ >
+ {hiddenNavigation === true ? (
) : (
prevButton
)}
{children}
- {eventDelegation === true ? (
+ {hiddenNavigation === true ? (
) : (
nextButton
@@ -48,21 +76,6 @@ const Main = ({
);
};
-interface SlideProps {
- ids: string[];
- childs: React.ReactNode[];
-}
-
-const Slide = ({ ids, childs }: SlideProps) => {
- return (
-
- {childs.map((child, index) => (
- {child}
- ))}
-
- );
-};
-
interface ButtonProps {
className?: string;
style?: React.CSSProperties;
@@ -72,7 +85,6 @@ interface ButtonProps {
const Button = ({ className, style, direction, hidden }: ButtonProps) => {
const swiper = useSwiper();
-
const handleClick = () => {
if (direction === 'PREV') {
swiper.slidePrev();
@@ -80,9 +92,22 @@ const Button = ({ className, style, direction, hidden }: ButtonProps) => {
swiper.slideNext();
}
};
+
+ const { buttonRefs } = getStaticContext(ContextValueOceanSwiper);
+ const buttonRef = useRef(null);
+
+ useEffect(() => {
+ if (direction === 'PREV') {
+ buttonRefs.prev = buttonRef.current;
+ } else {
+ buttonRefs.next = buttonRef.current;
+ }
+ }, []);
+
return (