[FE][Feature] 팀원 초대 api 연결

src/api/@types/InviteTeam.ts

@@ -0,0 +1,16 @@
+export interface GetInviteTeamRequest {
+  // teamId: number;
+}
+
+export interface GetInviteTeamResponse {
+  code: number;
+  message: string;
+  data: InviteTeamData;
+}
+
+export interface InviteTeamData {
+  invitationCode: string;
+  invitationUrl: string;
+  expirationTime: string;
+  qrCodeImage: string;
+}

src/api/@types/Retrospectives.ts

@@ -48,7 +48,7 @@ export interface PostRetrospectivesRequest {
   userId: number;
   templateId: number;
   status: keyof TStatus;
-  thumbnail: string;
+  thumbnail: string | null;
   startDate: string;
   description: string;
 }

src/api/axiosConfig.tsx

@@ -65,7 +65,7 @@ axiosInstance.interceptors.request.use(
 
       // 헤더에 토큰 추가
       config.headers.Authorization = `Bearer ${authToken}`;
-      console.log('헤더에 토큰 추가 확인', config.headers.Authorization);
+      // console.log('헤더에 토큰 추가 확인', config.headers.Authorization);
       return config;
     } catch (err) {
       console.error('에러', err);

src/api/retrospectivesApi/getInviteTeam.tsx

@@ -0,0 +1,14 @@
+import { GetInviteTeamRequest, GetInviteTeamResponse } from '../@types/InviteTeam';
+import axiosInstance from '../axiosConfig';
+
+const getInviteTeam = async (teamId: GetInviteTeamRequest): Promise<GetInviteTeamResponse> => {
+  try {
+    const response = await axiosInstance.get<GetInviteTeamResponse>(`/teams/${teamId}/invitation-url`);
+    console.log('팀원 초대 호출 성공', response.data);
+    return response.data;
+  } catch (error) {
+    throw new Error('팀원 초대 호출 실패');
+  }
+};
+
+export default getInviteTeam;

src/components/createRetro/modal/CreateModal.tsx

@@ -36,7 +36,7 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
     userId: 1,
     templateId: templateId || 1,
     status: Status.NOT_STARTED,
-    thumbnail: '',
+    thumbnail: null,
     startDate: '',
     description: '',
   });
@@ -51,25 +51,27 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
 
   const handleCreateClick = async () => {
     try {
-      // 회고 먼저 생성
+      // 회고 생성 요청 전송
       const retrospectiveResponse = await postRetrospective({
         ...requestData,
         status: Status.NOT_STARTED,
+        thumbnail: requestData.thumbnail || null, // thumbnail이 없으면 null을 전송
       });
 
-      // 이미지를 S3에 업로드
-      const imageResponse = await postImageToS3({
-        filename: requestData.thumbnail, // imageUUID를 filename으로 설정
-        method: 'PUT',
-      });
+      // thumbnail이 있는 경우에만 S3에 이미지 업로드
+      if (requestData.thumbnail) {
+        const imageResponse = await postImageToS3({
+          filename: requestData.thumbnail, // imageUUID를 filename으로 설정
+          method: 'PUT',
+        });
+        console.log('사진 S3 업로드 성공', imageResponse);
+      }
 
       console.log('회고 생성 성공', retrospectiveResponse);
-      console.log('사진 S3 업로드 성공', imageResponse);
-
-      onClose();
-      navigate('/invite');
+      onClose(); // 모달 닫기
+      navigate('/retrolist'); // 회고 목록 페이지로 이동
     } catch (error) {
-      console.error('실패', error);
+      console.error('회고 생성 실패', error);
     }
   };
 

src/components/createRetro/modal/ImageUpload.tsx

@@ -30,6 +30,9 @@ const ImageUpload: React.FC<ImageUploadProps> = ({ onChange }) => {
   const handleRemoveImage = () => {
     setImagePreview(null);
     setImageUUID(null);
+    if (onChange) {
+      onChange('', '');
+    }
   };
 
   return (

src/components/inviteTeam/InviteTeam.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import QRCode from 'qrcode.react';
+import { GetInviteTeamResponse, InviteTeamData } from '@/api/@types/InviteTeam';
+import getInviteTeam from '@/api/retrospectivesApi/getInviteTeam';
+
+interface InviteTeamComponentProps {
+  teamId: number;
+}
+
+const InviteTeamComponent: React.FC<InviteTeamComponentProps> = ({ teamId }) => {
+  const [inviteData, setInviteData] = useState<InviteTeamData | null>(null);
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    const fetchInviteData = async () => {
+      try {
+        const response: GetInviteTeamResponse = await getInviteTeam(teamId);
+        setInviteData(response.data);
+      } catch (error) {
+        console.error(error);
+        setError('팀원 초대 get 실패');
+      }
+    };
+
+    fetchInviteData();
+  }, [teamId]); // teamId가 변경될 때마다 호출
+
+  if (error) {
+    return <div>{error}</div>;
+  }
+
+  if (!inviteData) {
+    return <div>로딩중...</div>;
+  }
+
+  return (
+    <div>
+      <p>초대 코드: {inviteData.invitationCode}</p>
+      <p>
+        초대 URL:{' '}
+        <a href={inviteData.invitationUrl} target="_blank" rel="noopener noreferrer">
+          {inviteData.invitationUrl}
+        </a>
+      </p>
+      <p>만료 시간: {inviteData.expirationTime}</p>
+      <QRCode value={inviteData.qrCodeImage} />
+      <p>{inviteData.qrCodeImage}</p>
+    </div>
+  );
+};
+
+export default InviteTeamComponent;