}>
-
+
diff --git a/src/pages/tour/geotrip/index.ts b/src/pages/tour/geotrip/index.ts
index 0797c0b2..20640dc7 100644
--- a/src/pages/tour/geotrip/index.ts
+++ b/src/pages/tour/geotrip/index.ts
@@ -1,2 +1,2 @@
export { default as GeoTrip } from './GeoTrip';
-export { default as SingleTrip } from './SingleTrip';
+export { default as SingleTrip } from './Share';
diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts
index c3eb0799..156ada1f 100644
--- a/src/shared/hooks/index.ts
+++ b/src/shared/hooks/index.ts
@@ -1,5 +1,6 @@
export * from './useSyncedState';
export * from './useDebouncedCallback';
export * from './useLocalStorage';
+export * from './useSessionStorage';
export * from './useFunnel';
export * from './useToggleState';
diff --git a/src/shared/hooks/useSessionStorage.ts b/src/shared/hooks/useSessionStorage.ts
new file mode 100644
index 00000000..bd777721
--- /dev/null
+++ b/src/shared/hooks/useSessionStorage.ts
@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * sessionStorage 값을 저장하고 불러오는 커스텀 훅입니다.
+ * dispatchEvent를 사용하여 다른 컴포넌트에서 sessionStorage의 변경을 감지할 수 있습니다.
+ *
+ * @param {string} key - sessionStorage에서 사용할 키
+ * @param {T} initialValue - 초기값
+ * @returns {[T, (value: T | ((val: T) => T)) => void]} - 저장된 값과 업데이트 함수를 반환합니다.
+ *
+ * @example
+ * //초기값에 의해, 스토리지에 저장된 정보가 없다면 자동으로 값을 저장합니다.
+ * const [value, setValue] = useLocalStorage('myKey', 'defaultValue');
+ */
+export const useSessionStorage =
(key: string, initialValue: T) => {
+ const readValue = useCallback((): T => {
+ try {
+ const item = window.sessionStorage.getItem(key);
+ return item ? JSON.parse(item) : initialValue;
+ } catch (error) {
+ throw new Error(`스토리지를 불러오는데 실패했습니다: ${error}`);
+ }
+ }, [key, initialValue]);
+
+ const [storedValue, setStoredValue] = useState(readValue);
+ const sessionStorageEventRef = useRef(new Event('session-storage'));
+
+ const setValue = (value: T | ((val: T) => T)) => {
+ try {
+ const valueToStore =
+ value instanceof Function ? value(storedValue) : value;
+ setStoredValue(valueToStore);
+ window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+
+ window.dispatchEvent(sessionStorageEventRef.current);
+ } catch (error) {
+ console.error(`Error setting sessionStorage key "${key}":`, error);
+ }
+ };
+
+ useEffect(() => {
+ const handleStorageChange = () => {
+ setStoredValue(readValue());
+ };
+
+ window.addEventListener('session-storage', handleStorageChange);
+ window.addEventListener('storage', handleStorageChange);
+
+ return () => {
+ window.removeEventListener('session-storage', handleStorageChange);
+ window.removeEventListener('storage', handleStorageChange);
+ };
+ }, [readValue]);
+
+ return [storedValue, setValue] as const;
+};
diff --git a/src/widgets/bottomNavigationBar/BottomNavigationBar.test.tsx b/src/widgets/bottomNavigationBar/BottomNavigationBar.test.tsx
index 191669d0..39601d12 100644
--- a/src/widgets/bottomNavigationBar/BottomNavigationBar.test.tsx
+++ b/src/widgets/bottomNavigationBar/BottomNavigationBar.test.tsx
@@ -48,7 +48,7 @@ describe('BottomNavigationBar 컴포넌트', () => {
await user.click(homeButton);
expect(mockNavigate).toHaveBeenCalledWith(
- expect.stringContaining('/tour/geo-trip'),
+ expect.stringContaining('/tour/geo'),
{ replace: true },
);
});
diff --git a/src/widgets/bottomNavigationBar/utils.ts b/src/widgets/bottomNavigationBar/utils.ts
index fd4332e5..b48607a4 100644
--- a/src/widgets/bottomNavigationBar/utils.ts
+++ b/src/widgets/bottomNavigationBar/utils.ts
@@ -19,9 +19,9 @@ export const createNavItems = ({ navigate }: createNavItemsParams) => {
{
id: 'home-navigation-tutorial',
icon: HomeIcon,
- path: '/tour/geo-trip',
+ path: '/tour/geo',
label: 'home Icon',
- onClick: () => navigateTo('/tour/geo-trip'),
+ onClick: () => navigateTo('/tour/geo'),
},
{
id: 'list-navigation-tutorial',