🔀 박람회 연수 불러오기

src/app/api/standard/program/[expo_id]/route.ts

@@ -0,0 +1,26 @@
+import { AxiosError } from 'axios';
+import { cookies } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+import { apiClient } from '@/shared/libs/apiClient';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { expo_id: number } },
+) {
+  const { expo_id } = params;
+  const cookieStore = cookies();
+  const accessToken = cookieStore.get('accessToken')?.value;
+  try {
+    const response = await apiClient.get(`/standard/program/${expo_id}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return NextResponse.json(response.data);
+  } catch (error) {
+    const axiosError = error as AxiosError<{ message: string }>;
+    const status = axiosError.response?.status || 500;
+    const message = axiosError.response?.data?.message || 'expoDetail failed';
+    return NextResponse.json({ error: message }, { status });
+  }
+}

src/app/api/training/program/[expo_id]/route.ts

@@ -0,0 +1,26 @@
+import { AxiosError } from 'axios';
+import { cookies } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+import { apiClient } from '@/shared/libs/apiClient';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { expo_id: number } },
+) {
+  const { expo_id } = params;
+  const cookieStore = cookies();
+  const accessToken = cookieStore.get('accessToken')?.value;
+  try {
+    const response = await apiClient.get(`/training/program/${expo_id}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return NextResponse.json(response.data);
+  } catch (error) {
+    const axiosError = error as AxiosError<{ message: string }>;
+    const status = axiosError.response?.status || 500;
+    const message = axiosError.response?.data?.message || 'expoDetail failed';
+    return NextResponse.json({ error: message }, { status });
+  }
+}

src/entities/expo-detail/ui/ContentListText/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface ExpoStandard {
+  title: string;
+  startedAt: string;
+  endedAt: string;
+}
+
+interface Props {
+  data: ExpoStandard[];
+  title: string;
+}
+
+const ContentListText = ({ data, title }: Props) => {
+  // data가 없으면 빈 배열로 처리
+  const validData = data || [];
+
+  return (
+    <div className="space-y-4">
+      <p className="text-body1 font-bold text-gray-600">{title}</p>
+      {validData.map((item, index) => (
+        <div key={index} className="flex items-center gap-3">
+          <p className="text-body1 text-gray-400">- {item.title}</p>
+          <p className="text-body2 text-gray-400">
+            ({item.startedAt} ~ {item.endedAt})
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ContentListText;

src/entities/expo-detail/ui/ContentText/index.tsx

@@ -9,14 +9,7 @@ const ContentText = ({ title, content }: Props) => {
   return (
     <div className="space-y-4">
       <p className="text-body1 text-gray-600">{title}</p>
-      <p className="text-body2 text-gray-400">
-        {content.split('\n').map((line, index) => (
-          <React.Fragment key={index}>
-            {line}
-            <br />
-          </React.Fragment>
-        ))}
-      </p>
+      <p className="text-body2 text-gray-400">{content}</p>
     </div>
   );
 };

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

@@ -3,6 +3,7 @@
 import axios from 'axios';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
+import ContentListText from '@/entities/expo-detail/ui/ContentListText';
 import ContentText from '@/entities/expo-detail/ui/ContentText';
 import DetailHeader from '@/entities/expo-detail/ui/DetailHeader';
 import KakaoMap from '@/entities/expo-detail/ui/KaKaoMap';
@@ -14,11 +15,28 @@ interface ExpoDetail {
   finishedDay: string;
   location: string;
   coverImage: string;
-
   x: number;
   y: number;
 }
 
+interface ExpoTrainingDetail {
+  title: string;
+  startedAt: string;
+  endedAt: string;
+  category: 'ESSENTIAL' | 'CHOICE';
+}
+
+interface ExpoTraining {
+  essential: ExpoTrainingDetail[];
+  choice: ExpoTrainingDetail[];
+}
+
+interface ExpoStandard {
+  title: string;
+  startedAt: string;
+  endedAt: string;
+}
+
 const ExpoDetailLayout = ({ params }: { params: number }) => {
   const [expoDetail, setExpoDetail] = useState<ExpoDetail>({
     title: '',
@@ -31,13 +49,34 @@ const ExpoDetailLayout = ({ params }: { params: number }) => {
     y: 0,
   });
 
+  const [expoStandard, setExpoStandard] = useState<ExpoStandard[]>([]);
+  const [expoTraining, setExpoTraining] = useState<ExpoTraining>({
+    essential: [],
+    choice: [],
+  });
+
   useEffect(() => {
-    axios.get(`/api/expo/${params}`).then((res) => {
+    axios.get<ExpoDetail>(`/api/expo/${params}`).then((res) => {
       setExpoDetail(res.data);
     });
+
+    axios.get<ExpoStandard[]>(`/api/standard/program/${params}`).then((res) => {
+      setExpoStandard(res.data);
+    });
+
+    axios
+      .get<ExpoTrainingDetail[]>(`/api/training/program/${params}`)
+      .then((res) => {
+        const essential = res.data.filter(
+          (item) => item.category === 'ESSENTIAL',
+        );
+        const choice = res.data.filter((item) => item.category === 'CHOICE');
+        setExpoTraining({ essential, choice });
+      });
   }, [params]);
 
   const date = `${expoDetail.startedDay} ~ ${expoDetail.finishedDay}`;
+
   return (
     <div>
       <DetailHeader headerTitle={expoDetail.title} />
@@ -53,7 +92,17 @@ const ExpoDetailLayout = ({ params }: { params: number }) => {
           />
           <ContentText title="소개 글" content={expoDetail.description} />
           <ContentText title="모집 기간" content={date} />
-          {/* <ContentText title="연수" content={expoDetail.training.content} /> */}
+          {expoStandard.length > 0 && (
+            <ContentListText data={expoStandard} title="참여자 연수" />
+          )}
+
+          {expoTraining.essential.length > 0 && (
+            <ContentListText data={expoTraining.essential} title="필수 연수" />
+          )}
+          {expoTraining.choice.length > 0 && (
+            <ContentListText data={expoTraining.choice} title="선택 연수" />
+          )}
+
           <div className="space-y-4">
             <ContentText title="장소 지도" content={expoDetail.location} />
             <KakaoMap latitude={expoDetail.x} longitude={expoDetail.y} />
@@ -63,5 +112,4 @@ const ExpoDetailLayout = ({ params }: { params: number }) => {
     </div>
   );
 };
-
 export default ExpoDetailLayout;