From 00faf9d335368f665ff147cedbec42adc67afc17 Mon Sep 17 00:00:00 2001
From: jeongmingong <jmgong59@gmail.com>
Date: Wed, 17 Apr 2024 22:39:06 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20Feat:=20invite=20team=20GET=20api?=
 =?UTF-8?q?=20=EC=97=B0=EA=B2=B0=20=EC=84=B1=EA=B3=B5,=20createRetro=20?=
 =?UTF-8?q?=EC=82=AC=EC=A7=84=20=EA=B4=80=EB=A0=A8=20api=20=EC=9A=94?=
 =?UTF-8?q?=EC=B2=AD=20=EC=88=98=EC=A0=95=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/@types/InviteTeam.ts                  | 16 ++++++
 src/api/@types/Retrospectives.ts              |  2 +-
 src/api/axiosConfig.tsx                       |  2 +-
 src/api/retrospectivesApi/getInviteTeam.tsx   | 14 +++++
 .../createRetro/modal/CreateModal.tsx         | 26 +++++-----
 .../createRetro/modal/ImageUpload.tsx         |  3 ++
 src/components/inviteTeam/InviteTeam.tsx      | 52 +++++++++++++++++++
 7 files changed, 101 insertions(+), 14 deletions(-)
 create mode 100644 src/api/@types/InviteTeam.ts
 create mode 100644 src/api/retrospectivesApi/getInviteTeam.tsx
 create mode 100644 src/components/inviteTeam/InviteTeam.tsx

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<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;
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<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);
     }
   };
 
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<ImageUploadProps> = ({ 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<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;