feat: 초대 페이지와 프로젝트 정보 연결

boostcampwm2023 · Oct 5, 2024 · a39ae7c · a39ae7c
1 parent 4b3922c
commit a39ae7c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 6 deletions.
diff --git a/frontend/src/apis/api/inviteAPI.ts b/frontend/src/apis/api/inviteAPI.ts
@@ -0,0 +1,10 @@
+import { API_URL } from "../../constants/path";
+import { authAPI } from "../utils/authAPI";
+
+export const getInvitePreview = async (inviteLinkId: string) => {
+  const response = await authAPI.get(
+    `${API_URL.INVITE_PREVIEW}/${inviteLinkId}`
+  );
+
+  return response;
+};
diff --git a/frontend/src/constants/path.ts b/frontend/src/constants/path.ts
@@ -10,6 +10,7 @@ export const API_URL = {
   GITHUB_USERNAME: "/auth/github/username",
   PROJECT: "/project",
   PROJECT_JOIN: "/project/join-request",
+  INVITE_PREVIEW: "/project/invite-preview",
 };
 
 export const ROUTER_URL = {

diff --git a/frontend/src/pages/invite/InvitePage.tsx b/frontend/src/pages/invite/InvitePage.tsx
@@ -1,13 +1,21 @@
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { checkAccessToken } from "../../apis/utils/authAPI";
 import { ROUTER_URL } from "../../constants/path";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { STORAGE_KEY } from "../../constants/storageKey";
 import { postJoinProject } from "../../apis/api/projectAPI";
+import { InvitePreview } from "../../types/DTO/inviteDTO";
+import { getInvitePreview } from "../../apis/api/inviteAPI";
 
 const InvitePage = () => {
   const { projectTitle, projectId: projectUUID } = useParams();
   const { pathname } = useLocation();
+  const [projectInfo, setProjectInfo] = useState<InvitePreview>({
+    id: -1,
+    title: "",
+    subject: "",
+    leaderUsername: "",
+  });
   const navigate = useNavigate();
 
   const handleJoinButtonClick = async () => {
@@ -35,6 +43,10 @@ const InvitePage = () => {
       navigate(ROUTER_URL.LOGIN, { replace: true });
     }
 
+    getInvitePreview(projectUUID!).then((response) => {
+      setProjectInfo(response.data);
+    });
+
     return () => {
       if (checkAccessToken()) {
         sessionStorage.removeItem(STORAGE_KEY.REDIRECT);
@@ -48,16 +60,20 @@ const InvitePage = () => {
         <main className="bg-white w-[42.5rem] h-[27.5rem] flex justify-center items-center">
           <div className="w-[40rem] h-[25rem] border-middle-green border px-10 py-8">
             <p className="self-start font-bold break-words text-xxl">
-              Leader<span className="font-light">님의</span>
+              {projectInfo.leaderUsername}
+              <span className="font-light">님의</span>
             </p>
             <p className="self-start font-bold break-words text-xxl">
               {projectTitle}
             </p>
-            <p className="self-start mt-8">
-              leader님의 {projectTitle} 프로젝트에 참여하고 싶다면 요청을
-              보내세요.
+            <p className="mt-1">{projectInfo.subject}</p>
+            <p className="self-start mt-3 text-xs truncate">
+              {projectInfo.leaderUsername}님의 {projectInfo.title}
+            </p>
+            <p className="text-xs">
+              프로젝트에 참여하고 싶다면 요청을 보내세요.
             </p>
-            <div className="flex flex-col w-[35rem] gap-5 mt-14">
+            <div className="flex flex-col w-[35rem] gap-5 mt-8">
               <button
                 className="w-full h-[2.5rem] rounded-lg text-white bg-middle-green"
                 type="button"

diff --git a/frontend/src/types/DTO/inviteDTO.ts b/frontend/src/types/DTO/inviteDTO.ts
@@ -0,0 +1,6 @@
+export interface InvitePreview {
+  id: number;
+  title: string;
+  subject: string;
+  leaderUsername: string;
+}