From e1b4a8c256405e23958df82b4fe402abf96f88ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B3=B5=EC=A0=95=EB=AF=BC?=
<102538362+jeongmin59@users.noreply.github.com>
Date: Sun, 21 Apr 2024 14:33:36 +0900
Subject: [PATCH] =?UTF-8?q?[FE][Fix]=20=ED=8C=80=EC=9B=90=20=EC=B4=88?=
=?UTF-8?q?=EB=8C=80=20=EC=88=98=EB=9D=BD=20api=20=ED=98=B8=EC=B6=9C=20?=
=?UTF-8?q?=EB=AC=B8=EC=A0=9C=20(#191)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* :recycle: Refactor: 초대 코드 관련
* :bug: Fix: 쿼리파라미터로 수정
* :lipstick: Design: 초대 버튼 만듦
---
src/App.tsx | 5 +-
src/api/@types/InviteTeam.ts | 1 -
src/api/inviteTeamApi/postInviteTeam.tsx | 4 +-
src/components/inviteTeam/AcceptInvite.tsx | 49 +++++++++++++------
src/components/inviteTeam/InviteTeamModal.tsx | 13 +++--
src/styles/inviteTeam/AcceptInvite.ts | 13 +++++
6 files changed, 62 insertions(+), 23 deletions(-)
create mode 100644 src/styles/inviteTeam/AcceptInvite.ts
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를 통해 팀원을 초대하여 회고를 함께하세요!
-
+
} marginLeft="0.2rem">
Copy
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;
+`;