diff --git a/src/App.tsx b/src/App.tsx index da4f346..d3c73d8 100644 --- a/src/App.tsx +++ b/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 = () => { } /> - + {/* 발급 될 초대 링크 */} + + {/* } /> */} diff --git a/src/api/@types/InviteTeam.ts b/src/api/@types/InviteTeam.ts index 670852e..7102972 100644 --- a/src/api/@types/InviteTeam.ts +++ b/src/api/@types/InviteTeam.ts @@ -20,4 +20,3 @@ export interface InviteTeamData { export interface PostInviteTeamRequest { invitationCode: string; } -export interface PostInviteTeamResponse {} diff --git a/src/api/inviteTeamApi/postInviteTeam.tsx b/src/api/inviteTeamApi/postInviteTeam.tsx index 394bb16..10867c1 100644 --- a/src/api/inviteTeamApi/postInviteTeam.tsx +++ b/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; diff --git a/src/components/inviteTeam/AcceptInvite.tsx b/src/components/inviteTeam/AcceptInvite.tsx index bf8812b..e60f205 100644 --- a/src/components/inviteTeam/AcceptInvite.tsx +++ b/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
초대를 수락하는 중...
; + return ( + <> + + + 초대를 수락하시겠습니까? + + + + + ); }; export default AcceptInvite; diff --git a/src/components/inviteTeam/InviteTeamModal.tsx b/src/components/inviteTeam/InviteTeamModal.tsx index ad48fa7..f440270 100644 --- a/src/components/inviteTeam/InviteTeamModal.tsx +++ b/src/components/inviteTeam/InviteTeamModal.tsx @@ -46,10 +46,17 @@ const InviteTeamModal: React.FC = ({ 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 = ({ isOpen, onClose, team {inviteData && ( - + QR과 Link를 통해 팀원을 초대하여 회고를 함께하세요! - + diff --git a/src/styles/inviteTeam/AcceptInvite.ts b/src/styles/inviteTeam/AcceptInvite.ts new file mode 100644 index 0000000..dac61b5 --- /dev/null +++ b/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; +`;