diff --git a/src/api/@types/InviteTeam.ts b/src/api/@types/InviteTeam.ts new file mode 100644 index 0000000..203f777 --- /dev/null +++ b/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; +} diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts index a418c3b..fd2e14f 100644 --- a/src/api/@types/Retrospectives.ts +++ b/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; } diff --git a/src/api/axiosConfig.tsx b/src/api/axiosConfig.tsx index e8d84d7..27b7b2b 100644 --- a/src/api/axiosConfig.tsx +++ b/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); diff --git a/src/api/retrospectivesApi/getInviteTeam.tsx b/src/api/retrospectivesApi/getInviteTeam.tsx new file mode 100644 index 0000000..b041b9e --- /dev/null +++ b/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 => { + try { + const response = await axiosInstance.get(`/teams/${teamId}/invitation-url`); + console.log('팀원 초대 호출 성공', response.data); + return response.data; + } catch (error) { + throw new Error('팀원 초대 호출 실패'); + } +}; + +export default getInviteTeam; diff --git a/src/components/createRetro/modal/CreateModal.tsx b/src/components/createRetro/modal/CreateModal.tsx index 599ab7c..5db3192 100644 --- a/src/components/createRetro/modal/CreateModal.tsx +++ b/src/components/createRetro/modal/CreateModal.tsx @@ -36,7 +36,7 @@ const CreateModal: React.FC = ({ 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 = ({ 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); } }; diff --git a/src/components/createRetro/modal/ImageUpload.tsx b/src/components/createRetro/modal/ImageUpload.tsx index c9c4d5c..a44e08c 100644 --- a/src/components/createRetro/modal/ImageUpload.tsx +++ b/src/components/createRetro/modal/ImageUpload.tsx @@ -30,6 +30,9 @@ const ImageUpload: React.FC = ({ onChange }) => { const handleRemoveImage = () => { setImagePreview(null); setImageUUID(null); + if (onChange) { + onChange('', ''); + } }; return ( diff --git a/src/components/inviteTeam/InviteTeam.tsx b/src/components/inviteTeam/InviteTeam.tsx new file mode 100644 index 0000000..11bc289 --- /dev/null +++ b/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 = ({ teamId }) => { + const [inviteData, setInviteData] = useState(null); + const [error, setError] = useState(''); + + 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
{error}
; + } + + if (!inviteData) { + return
로딩중...
; + } + + return ( +
+

초대 코드: {inviteData.invitationCode}

+

+ 초대 URL:{' '} + + {inviteData.invitationUrl} + +

+

만료 시간: {inviteData.expirationTime}

+ +

{inviteData.qrCodeImage}

+
+ ); +}; + +export default InviteTeamComponent;