[FE][Fix] 팀원 초대 수락 api 호출 문제 (#191)

* ♻️ Refactor: 초대 코드 관련

* 🐛 Fix: 쿼리파라미터로 수정

* 💄 Design: 초대 버튼 만듦

src/App.tsx

@@ -8,6 +8,7 @@ import RetroRevisePage from './pages/RevisePage';
 import RetroTeamPage from './pages/SectionPage';
 import MainLayout from '@/components/layout/MainLayout';
 import ProfileLayout from '@/components/layout/ProfileLayout';
+// import AcceptInvitePage from '@/pages/AccpetInvitePage';
 import AuthPage from '@/pages/AuthPage';
 import CreateRetroPage from '@/pages/CreateRetroPage';
 import HomePage from '@/pages/HomePage';
@@ -131,7 +132,9 @@ const App = () => {
                 </PrivateRoute>
               }
             />
-            <Route path="/invitations/:invitationId" Component={AcceptInvite} />
+            {/* 발급 될 초대 링크 */}
+            <Route path="/invitations" Component={AcceptInvite} />
+            {/* <Route path={`/invitations?invitationId=${invitationId}`} element={<AcceptInvitePage />} /> */}
           </Routes>
         </Router>
       </RecoilRoot>

src/api/@types/InviteTeam.ts

@@ -20,4 +20,3 @@ export interface InviteTeamData {
 export interface PostInviteTeamRequest {
   invitationCode: string;
 }
-export interface PostInviteTeamResponse {}

src/api/inviteTeamApi/postInviteTeam.tsx

@@ -3,8 +3,8 @@ import axiosInstance from '../axiosConfig';
 
 const postInviteTeam = async (invitationId: string) => {
   try {
-    const response = await axiosInstance.post('/team/accept-invitation', {
-      invitationCode: invitationId,
+    const response = await axiosInstance.post('/teams/accept-invitation', {
+      invitationCode: invitationId, // useParams 로 받아온 코드
     });
     console.log('팀원 초대 성공', response.data);
     return response.data;

src/components/inviteTeam/AcceptInvite.tsx

@@ -1,38 +1,55 @@
 import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Button, Text } from '@chakra-ui/react';
 import postInviteTeam from '@/api/inviteTeamApi/postInviteTeam';
+import * as S from '@/styles/inviteTeam/AcceptInvite';
 
 const AcceptInvite: React.FC = () => {
-  const { invitationId } = useParams<{ invitationId?: string }>();
+  const location = useLocation();
   const navigate = useNavigate();
   const [inviteSuccess, setInviteSuccess] = useState(false);
 
-  useEffect(() => {
-    const acceptInvitation = async () => {
-      try {
-        if (invitationId) {
-          await postInviteTeam(invitationId);
+  const searchParams = new URLSearchParams(location.search);
+  const invitationCode = searchParams.get('invitationId');
+
+  const acceptInvitation = async () => {
+    try {
+      if (invitationCode) {
+        const response = await postInviteTeam(invitationCode);
+        // 백엔드에서 204 반환해줌
+        if (response.status === 204) {
           setInviteSuccess(true); // 초대 요청이 성공했을 때 상태를 true로 변경
         } else {
-          console.error('InvitationId 추출 실패');
+          console.error('초대 수락 실패');
         }
-      } catch (error) {
-        console.error('에러', error);
+      } else {
+        console.error('invitationCode 추출 실패');
       }
-    };
-
-    acceptInvitation();
-  }, [invitationId]);
+    } catch (error) {
+      console.error('에러', error);
+    }
+  };
 
   useEffect(() => {
     if (inviteSuccess) {
       // 초대 성공 시 알림을 띄우고 retrolist 페이지로 navigate
-      alert('초대 성공했습니다!');
+      alert('초대를 성공적으로 수락했습니다!');
       navigate('/retrolist');
     }
   }, [inviteSuccess, navigate]);
 
-  return <div>초대를 수락하는 중...</div>;
+  return (
+    <>
+      <S.Container>
+        <S.TextContainer>
+          <Text fontSize="2xl">초대를 수락하시겠습니까?</Text>
+        </S.TextContainer>
+        <Button colorScheme="brand" size="lg" onClick={acceptInvitation}>
+          초대 수락하기
+        </Button>
+      </S.Container>
+    </>
+  );
 };
 
 export default AcceptInvite;

src/components/inviteTeam/InviteTeamModal.tsx

@@ -46,10 +46,17 @@ const InviteTeamModal: React.FC<InviteTeamModalProps> = ({ isOpen, onClose, team
     fetchInviteData();
   }, []);
 
+  const generateInvitationUrl = (invitationCode: string) => {
+    // const domain = 'http://localhost:3000'; // 로컬 테스트용
+    const domain = 'https://www.pastforward.link'; // 배포용
+    return `${domain}/invitations?invitationId=${invitationCode}`;
+  };
+
   const copyToClipboard = () => {
     if (inviteData) {
       // inviteData가 null이 아닐 때만 실행
-      navigator.clipboard.writeText(inviteData.invitationUrl).then(
+      const invitationUrl = generateInvitationUrl(inviteData.invitationCode);
+      navigator.clipboard.writeText(invitationUrl).then(
         () => {
           setShowAlert(true); // 알림 표시
         },
@@ -71,11 +78,11 @@ const InviteTeamModal: React.FC<InviteTeamModalProps> = ({ isOpen, onClose, team
         <ModalBody>
           {inviteData && (
             <S.CustomModalBody>
-              <QRCode value={inviteData.qrCodeImage} />
+              <QRCode value={generateInvitationUrl(inviteData.invitationCode)} />
               <S.LinkContainer>
                 <Text fontSize="sm">QR과 Link를 통해 팀원을 초대하여 회고를 함께하세요!</Text>
                 <S.LinkBox>
-                  <Input value={inviteData.invitationUrl} isReadOnly />
+                  <Input value={generateInvitationUrl(inviteData.invitationCode)} isReadOnly />
                   <Button onClick={copyToClipboard} colorScheme="brand" leftIcon={<FaCopy />} marginLeft="0.2rem">
                     Copy
                   </Button>

src/styles/inviteTeam/AcceptInvite.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+
+export const TextContainer = styled.div`
+  margin-bottom: 2rem;
+`;