Merge pull request #40 from School-of-Company/feature/program

🔀 프로그램 폼 테이블 제작

src/app/(pages)/program/[expo_id]/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Program } from '@/views/program';
+
+const Page = ({ params }: { params: { expo_id: string } }) => {
+  return (
+    <div>
+      <Program params={params} />
+    </div>
+  );
+};
+
+export default Page;

src/entities/expo-detail/model/useKakaoMap.ts

@@ -30,7 +30,9 @@ export const useKakaoMap = ({ latitude, longitude }: KakaoMapOptions) => {
   useEffect(() => {
     const initializeMap = () => {
       if (typeof window.kakao !== 'undefined') {
-        loadKakaoMap();
+        window.kakao.maps.load(() => {
+          loadKakaoMap();
+        });
       } else {
         console.error('Kakao Maps API가 로드되지 않았습니다.');
       }

src/entities/program/index.tsx

@@ -0,0 +1 @@
+export { default as ProgramNavigation } from './ui/ProgramNavigation';

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface ProgramNavigationProps {
+  state: string;
+  setState: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const ProgramNavigation: React.FC<ProgramNavigationProps> = ({
+  state,
+  setState,
+}) => {
+  return (
+    <div className="flex justify-center gap-[18px]">
+      <button
+        className={`text-h2 ${state === 'standard' ? 'text-black' : 'text-gray-500'}`}
+        onClick={() => {
+          setState('standard');
+        }}
+      >
+        일반 프로그램
+      </button>
+      <button
+        className={`text-h2 ${state === 'training' ? 'text-black' : 'text-gray-500'}`}
+        onClick={() => {
+          setState('training');
+        }}
+      >
+        연수 프로그램
+      </button>
+    </div>
+  );
+};
+
+export default ProgramNavigation;

src/shared/ui/Table/TableFooter/index.tsx

@@ -54,7 +54,7 @@ const TableFooter = ({
     <div className={tableFooterStyles({ type })}>
       <div className="flex gap-6">
         <p className="text-body2 text-gray-500">{text}</p>
-        <p className="text-body2 text-main-600">{num}명</p>
+        <p className="text-body2 text-main-600">{num}</p>
       </div>
 
       {type === 'file' && (

src/shared/ui/Table/TableForm/index.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import React, { useState } from 'react';
 import { TableFooter, TableHeader, TableItem } from '@/shared/ui/Table';
 
-interface Props<T extends { id: number }> {
+interface Props<T> {
   data: T[];
   footerType: 'default' | 'file' | 'print' | 'check' | 'delete';
   maxHeight?: string;

src/views/program/index.tsx

@@ -0,0 +1 @@
+export { default as Program } from './ui/Program';

src/views/program/ui/Program/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Header } from '@/widgets/layout';
+import { ProgramForm } from '@/widgets/program';
+
+const Program = ({ params }: { params: { expo_id: string } }) => {
+  return (
+    <div className="flex h-screen flex-col gap-[30px] mobile:gap-5">
+      <Header />
+      <ProgramForm params={params} />
+    </div>
+  );
+};
+
+export default Program;

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

@@ -42,7 +42,13 @@ const ExpoActionPanel = ({ params }: ExpoActionPanelProps) => {
               text="문자 보내기"
             />
           </div>
-          <Button text="프로그램" style="main100" />
+          <Button
+            onClick={() => {
+              router.push(`/program/${params}`);
+            }}
+            text="프로그램"
+            style="main100"
+          />
           <Button text="조회하기" style="main100" />
           <Button text="수정하기" style="white" />
         </div>

src/widgets/program/index.tsx

@@ -0,0 +1 @@
+export { default as ProgramForm } from './ui/ProgramForm';

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

@@ -0,0 +1,60 @@
+'use client';
+
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import { ProgramNavigation } from '@/entities/program';
+import { fileActions } from '@/shared/model/footerActions';
+import { TableForm } from '@/shared/ui/Table';
+
+interface Program {
+  id: number;
+  title: string;
+  startedAt: string;
+  endedAt: string;
+  category: string;
+}
+
+const ProgramForm = ({ params }: { params: { expo_id: string } }) => {
+  const requestPrintCategories = [
+    '번호',
+    '프로그램',
+    '시작시간',
+    '종료시간',
+    '상태',
+  ];
+  const [expoData, setExpoData] = useState<Program[]>([]);
+  const [navigation, setnavigation] = useState<string>('standard');
+
+  useEffect(() => {
+    const fetchExpoData = async () => {
+      try {
+        const endpoint =
+          navigation === 'training'
+            ? `/api/training/program/${params.expo_id}`
+            : `/api/standard/program/${params.expo_id}`;
+
+        const response = await axios.get(endpoint);
+        setExpoData(response.data);
+      } catch (error) {
+        console.error('Error fetching expo data:', error);
+      }
+    };
+    fetchExpoData();
+  }, [params.expo_id, navigation]);
+
+  return (
+    <div className="mx-auto w-full max-w-[1200px] space-y-[46px] px-5">
+      <ProgramNavigation state={navigation} setState={setnavigation} />
+      <TableForm
+        categories={requestPrintCategories}
+        data={expoData}
+        maxHeight="414px"
+        footerType="default"
+        text="프로그램 수"
+        actions={fileActions}
+      />
+    </div>
+  );
+};
+
+export default ProgramForm;