✨ Feat-세미나 디테일, 오픈 세미나 이동-id에 따른 데이터 값 분리 #41

src/app/seminar/[id]/page.tsx

@@ -1,22 +1,24 @@
 'use client';
 
 import React from 'react';
-import { useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import SeminarDetailHeader from '@/components/seminar/seminarDetail/header/SeminarDetailHeader';
 import SeminarDetailBanner from '@/components/seminar/seminarDetail/banner/SeminarDetailBanner';
 import { SEMINAR_DATA } from '@/constants/seminar/seminarData';
 import SeminarDetailPdf from '@/components/seminar/seminarDetail/pdf/SeminarDetailPdf';
 import NotFoundPage from '@/app/not-found';
 import SeminarDetailReview from '@/components/seminar/seminarDetail/review/SeminarDetailReview';
+import { changePathtoNumber } from '@/hooks/seminar/changePathtoNumber';
 
 const SeminarDetailPage = () => {
-  const router = useRouter();
-  console.log(router);
-
+  const pathname = usePathname();
+  // 숫자 추출
+  var id = changePathtoNumber(pathname);
+
   // 객체 찾기
-  const seminar = SEMINAR_DATA.find(seminar => Number(seminar.id) === 1);
+  const seminar = SEMINAR_DATA.find(seminar => Number(seminar.id) === id);
 
-  if (!seminar) {
+  if (!id || !seminar) {
     // 세미나를 찾지 못한 경우
     return <NotFoundPage />;
   }

src/app/seminar/open/[id]/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import React from 'react';
+import { usePathname } from 'next/navigation';
+import OpenSeminarDetailHeader from '@/components/seminar/openSeminarDetail/header/OpenSeminarDetailHeader';
+import OpenSeminarDetailBanner from '@/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner';
+import OpenSeminarDetailSeminars from '@/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars';
+import OpenSeminarDetailInformation from '@/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation';
+import { OPEN_SEMINAR_DATA } from '@/constants/seminar/openSeminarData';
+import NotFoundPage from '@/app/not-found';
+import { changeOpenPathtoNumber } from '@/hooks/seminar/changePathtoNumber';
+
+const OpenSeminarDetailPage = () => {
+  const pathname = usePathname();
+  // 숫자 추출
+  var id = changeOpenPathtoNumber(pathname);
+
+  // 객체 찾기
+  const seminar = OPEN_SEMINAR_DATA.find(seminar => Number(seminar.id) === id);
+
+  if (!seminar) {
+    // 세미나를 찾지 못한 경우
+    return <NotFoundPage />;
+  }
+
+  return <section className="flex justify-center">
+  <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4">
+     <div className="w-full">
+    {/* header */}
+    <OpenSeminarDetailHeader key={`${seminar.id}_header`} data={seminar}/>
+    {/* banner */}
+    <OpenSeminarDetailBanner key={`${seminar.id}_banner`} data={seminar}/>
+    {/* seminars */}
+    <OpenSeminarDetailSeminars key={`${seminar.id}_seminars`} data={seminar}/>
+     {/* information */}
+     <OpenSeminarDetailInformation key={`${seminar.id}_information`} data={seminar}/>
+  </div>
+  <div className="h-[120px]"></div>
+  </div>
+    </section>;
+};
+
+export default OpenSeminarDetailPage;

src/hooks/seminar/changePathtoNumber.tsx

@@ -0,0 +1,13 @@
+export const changePathtoNumber = (pathname:string) => {
+    const match = pathname.match(/\/seminar\/(\d+)/);
+    const seminar_id = match ? parseInt(match[1], 10) : null;
+
+    return seminar_id;
+}
+
+export const changeOpenPathtoNumber = (pathname:string) => {
+    const match = pathname.match(/\/seminar\/open\/(\d+)/);
+    const seminar_id = match ? parseInt(match[1], 10) : null;
+
+    return seminar_id;
+}