♻️ 통신을 URL 쿼리 파라미터 형식으로 변경

src/entities/program/ui/ProgramNavigation/index.tsx

@@ -1,24 +1,38 @@
-import React from 'react';
-import { useNavigationStore } from '@/shared/stores/useNavigationStore';
+'use client';
+
+import { useSearchParams, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
 
 const ProgramNavigation: React.FC = () => {
-  const { navigation, setNavigation } = useNavigationStore();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const [navigation, setNavigation] = useState<string>('standard');
+
+  useEffect(() => {
+    const currentNavigation = searchParams.get('navigation') || 'standard';
+    setNavigation(currentNavigation);
+  }, [searchParams]);
+
+  const handleNavigationChange = (newNavigation: string) => {
+    router.push(`${window.location.pathname}?navigation=${newNavigation}`);
+    setNavigation(newNavigation);
+  };
 
   return (
     <div className="flex justify-center gap-[18px]">
       <button
         className={`text-h2 ${
           navigation === 'standard' ? 'text-black' : 'text-gray-500'
         }`}
-        onClick={() => setNavigation('standard')}
+        onClick={() => handleNavigationChange('standard')}
       >
         일반 프로그램
       </button>
       <button
         className={`text-h2 ${
           navigation === 'training' ? 'text-black' : 'text-gray-500'
         }`}
-        onClick={() => setNavigation('training')}
+        onClick={() => handleNavigationChange('training')}
       >
         연수 프로그램
       </button>

src/shared/model/footerActions.ts

@@ -46,8 +46,11 @@ export const deleteActions = (fetchExpoList: () => Promise<void>) => ({
     }
   },
 });
-export const routeActions = (router: ReturnType<typeof useRouter>) => ({
+export const routeActions = (
+  router: ReturnType<typeof useRouter>,
+  navigation: string,
+) => ({
   RouteActions: (id: number) => {
-    router.push(`/program/detail/${id}`);
+    router.push(`/program/detail/${id}?navigation=${navigation}`);
   },
 });

src/widgets/expo-detail/ui/ExpoActionPanel/index.tsx

@@ -44,11 +44,12 @@ const ExpoActionPanel = ({ params }: ExpoActionPanelProps) => {
           </div>
           <Button
             onClick={() => {
-              router.push(`/program/${params}`);
+              router.push(`/program/${params}?navigation=standard`);
             }}
             text="프로그램"
             style="main100"
           />
+
           <Button
             onClick={() => {
               router.push(`/expo-manage/${params}`);

src/widgets/program-detail/ui/ProgramDetailForm/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import axios from 'axios';
+import { useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { useNavigationStore } from '@/shared/stores/useNavigationStore';
 import { TableForm } from '@/shared/ui/Table';
 
 interface TrainingProgram {
@@ -28,7 +28,8 @@ interface StandardProgram {
 }
 
 const ProgramDetailForm = ({ id }: { id: number }) => {
-  const { navigation } = useNavigationStore();
+  const searchParams = useSearchParams();
+  const navigation = searchParams.get('navigation') || 'standard'; // URL 쿼리 파라미터에서 navigation 값 가져오기
   const [data, setData] = useState<TrainingProgram[] | StandardProgram[]>([]);
 
   useEffect(() => {

src/widgets/program/ui/ProgramForm/index.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import axios from 'axios';
-import { useRouter } from 'next/navigation';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import React, { useEffect, useState, useMemo } from 'react';
 import { ProgramNavigation } from '@/entities/program';
 import { routeActions } from '@/shared/model/footerActions';
-import { useNavigationStore } from '@/shared/stores/useNavigationStore';
 import { TableForm } from '@/shared/ui/Table';
 
 interface Program {
@@ -17,15 +16,15 @@ interface Program {
 }
 
 const ProgramForm = ({ id }: { id: string }) => {
+  const searchParams = useSearchParams();
+  const navigation = searchParams.get('navigation') || 'standard';
   const [expoData, setExpoData] = useState<Program[]>([]);
-  const { navigation } = useNavigationStore();
   const router = useRouter();
 
   const requestPrintCategories = useMemo(() => {
-    if (navigation === 'training') {
-      return ['번호', '프로그램', '시작시간', '종료시간', '상태'];
-    }
-    return ['번호', '프로그램', '시작시간', '종료시간'];
+    return navigation === 'training'
+      ? ['번호', '프로그램', '시작시간', '종료시간', '상태']
+      : ['번호', '프로그램', '시작시간', '종료시간'];
   }, [navigation]);
 
   useEffect(() => {
@@ -42,6 +41,7 @@ const ProgramForm = ({ id }: { id: string }) => {
         console.error('Error fetching expo data:', error);
       }
     };
+
     fetchExpoData();
   }, [id, navigation]);
 
@@ -54,7 +54,7 @@ const ProgramForm = ({ id }: { id: string }) => {
         maxHeight="414px"
         footerType="route"
         text="프로그램 수"
-        actions={routeActions(router)}
+        actions={routeActions(router, navigation)}
       />
     </div>
   );