Merge pull request #23 from School-of-Company/api/expo-detail

🔀 박람회 디테일 페이지 통시 진행
School-of-Company · Nov 16, 2024 · 4d37edb · 4d37edb
2 parents 6bed4d2 + 2e45197
commit 4d37edb
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 25 deletions.
diff --git a/src/app/(pages)/expo-detail/[id]/page.tsx b/src/app/(pages)/expo-detail/[id]/page.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import ExpoDetail from '@/views/expo-detail/ui/expo-detail';
 
-const page = () => {
+const page = ({ params }: { params: { id: number } }) => {
   return (
     <div>
-      <ExpoDetail />
+      <ExpoDetail params={params.id} />
     </div>
   );
 };

diff --git a/src/views/expo-detail/ui/expo-detail/index.tsx b/src/views/expo-detail/ui/expo-detail/index.tsx
@@ -3,13 +3,13 @@ import ExpoActionPanel from '@/widgets/expo-detail/ui/ExpoActionPanel';
 import ExpoDetailLayout from '@/widgets/expo-detail/ui/ExpoDetailLayout';
 import { Header } from '@/widgets/layout';
 
-const ExpoDetail = () => {
+const ExpoDetail = ({ params }: { params: number }) => {
   return (
     <div className="flex h-screen flex-col mobile:gap-0">
       <Header />
       <div className="flex justify-center gap-[20px] px-5 py-[30px] mobile:flex-col">
         <div className="w-full max-w-[842px]">
-          <ExpoDetailLayout />
+          <ExpoDetailLayout params={params} />
         </div>
         <ExpoActionPanel />
       </div>

diff --git a/src/widgets/expo-detail/ui/ExpoDetailLayout/index.tsx b/src/widgets/expo-detail/ui/ExpoDetailLayout/index.tsx
@@ -1,39 +1,68 @@
+'use client';
+
 import Image from 'next/image';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ContentText from '@/entities/expo-detail/ui/ContentText';
 import DetailHeader from '@/entities/expo-detail/ui/DetailHeader';
 import KakaoMap from '@/entities/expo-detail/ui/KaKaoMap';
-import TestExpo from '@/shared/assets/png/TestExpo.png';
-import { useMockExpoDetail } from '../../model/useMockExpoDetail';
+import { apiClient } from '@/shared/libs/apiClient';
+
+interface ExpoDetail {
+  title: string;
+  description: string;
+  startedDay: string;
+  finishedDay: string;
+  location: string;
+  coverImage: string;
 
-const ExpoDetailLayout = () => {
-  const { expoDetail } = useMockExpoDetail();
+  x: number;
+  y: number;
+}
 
+const ExpoDetailLayout = ({ params }: { params: number }) => {
+  const [expoDetail, setExpoDetail] = useState<ExpoDetail>({
+    title: '',
+    description: '',
+    startedDay: '',
+    finishedDay: '',
+    location: '',
+    coverImage: '',
+    x: 0,
+    y: 0,
+  });
+
+  useEffect(() => {
+    const accessToken = localStorage.getItem('accessToken');
+    apiClient
+      .get(`/expo/${params}`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      })
+      .then((res) => {
+        setExpoDetail(res.data);
+      });
+  }, []);
+  const date = `${expoDetail.startedDay} ~ ${expoDetail.finishedDay}`;
   return (
     <div>
-      <DetailHeader headerTitle={expoDetail.headerTitle} />
-      <div className="mt-[48px] flex justify-end space-y-9">
+      <DetailHeader headerTitle={expoDetail.title} />
+      <div className="ml-[20px] mt-[48px] flex space-y-9">
         <div className="space-y-[36px]">
           <Image
-            src={TestExpo}
+            src={expoDetail.coverImage}
             alt="TestClubImg"
             objectFit="cover"
             className="rounded-md"
+            width={752}
+            height={360}
           />
-          <ContentText
-            title="소개 글"
-            content={expoDetail.introduction.content}
-          />
-          <ContentText title="연수" content={expoDetail.training.content} />
+          <ContentText title="소개 글" content={expoDetail.description} />
+          <ContentText title="모집 기간" content={date} />
+          {/* <ContentText title="연수" content={expoDetail.training.content} /> */}
           <div className="space-y-4">
-            <ContentText
-              title="장소 지도"
-              content={expoDetail.location.address}
-            />
-            <KakaoMap
-              latitude={expoDetail.location.coordinates.latitude}
-              longitude={expoDetail.location.coordinates.longitude}
-            />
+            <ContentText title="장소 지도" content={expoDetail.location} />
+            <KakaoMap latitude={expoDetail.x} longitude={expoDetail.y} />
           </div>
         </div>
       </div>