🔀 폼 api들 연결

src/app/api/application/[trainingPro_id]/route.ts

@@ -0,0 +1,34 @@
+import { AxiosError } from 'axios';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+import { apiClient } from '@/shared/libs/apiClient';
+
+export async function POST(
+  request: Request,
+  { params }: { params: { expo_id: number } },
+) {
+  const body = await request.json();
+  const { expo_id } = params;
+  const cookieStore = cookies();
+  const accessToken = cookieStore.get('accessToken')?.value;
+
+  const config = accessToken
+    ? {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    : {};
+
+  try {
+    const response = await apiClient.post(`/form/${expo_id}`, body, config);
+    return NextResponse.json(response.data);
+  } catch (error) {
+    const axiosError = error as AxiosError<{ message: string }>;
+
+    const status = axiosError.response?.status;
+    const message = axiosError.response?.data?.message;
+
+    return NextResponse.json({ error: message }, { status });
+  }
+}

src/app/api/sms/qr/route.ts

@@ -0,0 +1,31 @@
+import { AxiosError } from 'axios';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+import { apiClient } from '@/shared/libs/apiClient';
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  const cookieStore = cookies();
+  const accessToken = cookieStore.get('accessToken')?.value;
+  const config = accessToken
+    ? {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    : {};
+
+  console.log('QR Route called with body:', body);
+
+  try {
+    const response = await apiClient.post('/sms/qr', body, config);
+    return NextResponse.json(response.data);
+  } catch (error) {
+    const axiosError = error as AxiosError<{ message: string }>;
+
+    const status = axiosError.response?.status;
+    const message = axiosError.response?.data?.message;
+
+    return NextResponse.json({ error: message }, { status });
+  }
+}

src/entities/application/ui/TrainingRadioGroup/index.tsx

@@ -0,0 +1,113 @@
+'use client';
+import axios from 'axios';
+import React, { useState, useEffect, useRef } from 'react';
+
+interface ExpoData {
+  id: number;
+  title: string;
+  startedAt: string;
+  endedAt: string;
+}
+
+interface RadioGroupProps {
+  label: string;
+  name: string;
+  error?: string;
+  params: number;
+  trainingId?: string;
+  setSelectedValue: (value: number) => void;
+  selectedValue: number | null;
+}
+
+const TrainingRadioGroup = ({
+  label,
+  name,
+  error,
+  params,
+  setSelectedValue,
+  selectedValue,
+}: RadioGroupProps) => {
+  const [otherInput] = useState('');
+  const [expoData, setExpoData] = useState<ExpoData[]>([]);
+  const [navigation] = useState<string>('training');
+
+  const otherInputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (otherInputRef.current) {
+      otherInputRef.current.focus();
+    }
+  }, [otherInput]);
+
+  useEffect(() => {
+    const fetchExpoData = async () => {
+      try {
+        const endpoint =
+          navigation === 'training'
+            ? `/api/training/program/${params}`
+            : `/api/standard/program/${params}`;
+
+        const response = await axios.get(endpoint);
+        setExpoData(response.data);
+      } catch (error) {
+        console.error('Error fetching expo data:', error);
+      }
+    };
+    fetchExpoData();
+  }, [navigation, params]);
+
+  const handleRadioChange = (id: number) => {
+    setSelectedValue(id);
+  };
+
+  return (
+    <div>
+      <div className="w-full rounded-sm border-1 border-solid border-gray-200 p-[18px]">
+        <div className="mb-3 text-xl">{label}</div>
+        <div className="flex flex-col space-y-2">
+          {expoData.map((option) => {
+            const optionId = `radio-${name}-${option.id}-${Math.random().toString(36).substr(2, 9)}`;
+            return (
+              <label
+                key={option.id}
+                htmlFor={optionId}
+                className="flex items-center space-x-2"
+              >
+                <input
+                  type="radio"
+                  id={optionId}
+                  name={name}
+                  value={option.id}
+                  checked={selectedValue === option.id}
+                  onChange={() => handleRadioChange(option.id)}
+                  className="form-radio text-gray-500"
+                />
+                <span className="text-gray-800">{option.title}</span>
+              </label>
+            );
+          })}
+        </div>
+      </div>
+      {error && (
+        <div className="float-right mt-2 flex text-sm text-error">{error}</div>
+      )}
+    </div>
+  );
+};
+
+TrainingRadioGroup.handleTrainingSubmit = async (
+  selectedValue: number,
+  trainingId: string,
+) => {
+  try {
+    const response = await axios.post(`/api/application/${selectedValue}`, {
+      trainingId,
+    });
+    return response.data;
+  } catch (error) {
+    console.error('Error submitting training:', error);
+    throw error;
+  }
+};
+
+export default TrainingRadioGroup;

src/widgets/application/types/type.ts

@@ -15,4 +15,5 @@ export type StandardForms = {
   affiliation: string;
   position: string;
   informationStatus: boolean;
+  test?: string;
 };

src/widgets/application/ui/form/ApplicationForm/standard/index.tsx

@@ -1,9 +1,11 @@
 'use client';
+import axios from 'axios';
 import { useForm } from 'react-hook-form';
 import { Input, RadioGroup } from '@/entities/application';
 import { Button } from '@/shared/ui';
 import { handleStandardFormsSubmit } from '@/widgets/application/model/applicationFormHandler';
 import { StandardForms } from '../../../../types/type';
+// import TrainingRadioGroup from '@/entities/application/ui/TrainingRadioGroup';
 
 const StandardForm = ({ params }: { params: number }) => {
   const {
@@ -26,8 +28,30 @@ const StandardForm = ({ params }: { params: number }) => {
     { value: 'no', label: '아니요' },
   ];
 
-  const onSubmit = (data: StandardForms) => {
-    handleStandardFormsSubmit(data, params);
+  const onSubmit = async (data: StandardForms) => {
+    try {
+      await handleStandardFormsSubmit(data, params);
+
+      const qrBody = {
+        phoneNumber: data.phoneNumber,
+        authority: 'ROLE_STANDARD',
+      };
+
+      const response = await axios.post('/api/sms/qr', qrBody);
+
+      console.log('QR SMS API Response:', response.data);
+      alert('QR SMS 요청이 성공적으로 처리되었습니다.');
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        const errorMessage =
+          error.response?.data?.message || '알 수 없는 오류가 발생했습니다.';
+        console.error('QR SMS API Error:', errorMessage);
+        alert(`QR SMS API 호출에 실패했습니다: ${errorMessage}`);
+      } else {
+        console.error('폼 제출 중 에러 발생:', error);
+        alert('폼 제출에 실패했습니다. 다시 시도해주세요.');
+      }
+    }
   };
 
   return (
@@ -63,6 +87,7 @@ const StandardForm = ({ params }: { params: number }) => {
         options={yesNoOptions}
         error={errors.informationStatus?.message}
       />
+      {/* <TrainingRadioGroup label="연수 선택" name="test" params={params} trainingId={}/> */}
 
       <Button text="신청하기" type="submit" />
     </form>

src/widgets/application/ui/form/ApplicationForm/trainee/index.tsx

@@ -1,11 +1,16 @@
 'use client';
+import axios from 'axios';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Input, RadioGroup } from '@/entities/application';
+import TrainingRadioGroup from '@/entities/application/ui/TrainingRadioGroup';
 import { Button } from '@/shared/ui';
 import { handleTraineeFormsSubmit } from '@/widgets/application/model/applicationFormHandler';
 import { TraineeForms } from '../../../../types/type';
 
 const TraineeForm = ({ params }: { params: number }) => {
+  const [trainingId, setTrainingId] = useState('');
+
   const {
     control,
     handleSubmit,
@@ -37,10 +42,34 @@ const TraineeForm = ({ params }: { params: number }) => {
     { value: 'no', label: '아니요' },
   ];
 
-  const onSubmit = (data: TraineeForms) => {
-    handleTraineeFormsSubmit(data, params);
+  const onSubmit = async (data: TraineeForms) => {
+    await handleTraineeFormsSubmit(data, params);
+    if (trainingId && selectedValue) {
+      const result = await TrainingRadioGroup.handleTrainingSubmit(
+        selectedValue,
+        trainingId,
+      );
+      console.log('Training Submit Result:', result);
+    }
+
+    const qrBody = {
+      phoneNumber: data.phoneNumber,
+      authority: 'ROLE_TRAINEE',
+    };
+
+    const response = await axios.post('/api/sms/qr', qrBody);
+
+    console.log('QR SMS API Response:', response.data);
+    alert('QR SMS 요청이 성공적으로 처리되었습니다.');
   };
 
+  const handleTrainingIdChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setTrainingId(event.target.value);
+  };
+  const [selectedValue, setSelectedValue] = useState<number | null>(null);
+
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
@@ -52,6 +81,7 @@ const TraineeForm = ({ params }: { params: number }) => {
         label="연수 아이디"
         placeholder="연수 아이디"
         error={errors.trainingId?.message}
+        onChange={handleTrainingIdChange}
       />
       <RadioGroup
         control={control}
@@ -103,7 +133,14 @@ const TraineeForm = ({ params }: { params: number }) => {
         options={yesNoOptions}
         error={errors.informationStatus?.message}
       />
-
+      <TrainingRadioGroup
+        label="연수 선택"
+        name="test"
+        params={params}
+        trainingId={trainingId}
+        selectedValue={selectedValue}
+        setSelectedValue={setSelectedValue}
+      />
       <Button text="신청하기" type="submit" />
     </form>
   );