Feat : 팀원 초대하기 테스트 완료 [ close #95]

테스트 하기 위해 초대하기 모달 생성 , api 수정

client/src/Template/InviteModal.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable react/destructuring-assignment */
+/** @jsxImportSource @emotion/react */
+import React, { MouseEventHandler, useRef } from "react";
+import { css } from "@emotion/react";
+import axios from "axios";
+import InputLabel from "../Molecules/InputLabel";
+import { Button } from "../Atom/Button";
+
+const inviteModalStyle = css`
+ position: absolute;
+ z-z-index: 30;
+ left: 300px;
+ top: 300px;
+ width: 400px;
+ height: 400px;
+`;
+
+export default function InviteModal({ teamName }: { teamName: string | undefined }) {
+ const userIdRef = useRef<HTMLInputElement>(null);
+ const clickInvite: MouseEventHandler = () => {
+ if (userIdRef.current === null) return;
+ const inviteUserId = userIdRef.current.value;
+ // eslint-disable-next-line no-console
+ axios.post("http://localhost:4000/api/team/invite", {
+ teamName,
+ userId: inviteUserId,
+ });
+ };
+ return (
+ <div css={inviteModalStyle}>
+ <InputLabel refProps={userIdRef} label="초대할 ID" />
+ <Button onClick={clickInvite} type="Large">
+ 초대하기
+ </Button>
+ </div>
+ );
+}

client/src/Template/TeamSettingTemplate.tsx

@@ -10,6 +10,7 @@ import TeamInfoContainer from "../Organism/TeamInfoContainer";
 import TeamSettingMemberContainer from "../Organism/TeamSettingMemberContainer";
 import { getTeamPeople } from "../util/dummyData";
 import { PersonInfoType, TeamInfoType } from "../util/type";
+import InviteModal from "./InviteModal";
 
 const ProfileStyle = css`
  margin: 30px 0px;
@@ -24,8 +25,10 @@ const TeamSettingTemPlateStyle = css`
 `;
 function TeamSettingTemplate() {
  const [teamInfo, setTeamInfo] = useState<TeamInfoType | null>(null);
+ const [inviteModalState, setInviteModalState] = useState(false);
+
  const getTeamInfo = async () => {
- const data = await getTeamPeople("태홍");
+ const data = await getTeamPeople(1);
  setTeamInfo(data);
  };
  useEffect(() => {
@@ -52,9 +55,17 @@ function TeamSettingTemplate() {
  })}
  </TeamSettingMemberContainer>
  <TeamButtonContainer>
- <Button type="Medium">초대하기</Button>
+ <Button
+ type="Medium"
+ onClick={() => {
+ setInviteModalState((prev) => !prev);
+ }}
+ >
+ 초대하기
+ </Button>
  <Button type="Medium">수정하기</Button>
  </TeamButtonContainer>
+ {inviteModalState && <InviteModal teamName={teamInfo?.id} />}
  </div>
  );
 }

client/src/util/dummyData.tsx

@@ -50,12 +50,12 @@ export async function createTeam(teamID: string, image: string, info: string, lo
 /**
  * 팀 정보 구하기
  */
-export async function getTeamPeople(teamID: string): Promise<TeamInfoType> {
- // const { data } = await axios.get(`localhost:3000?teamID=${teamID}`);
- console.log(teamID);
+export async function getTeamPeople(gid: number): Promise<TeamInfoType> {
+ // const { data } = await axios.get(`localhost:3000?teamID=${gid}`);
+ console.log(gid);
  const data = {
  image: "asfdadsf",
- id: "팀명",
+ id: "ajou",
  info: "asdfsafd",
  location: "우만동",
  age: 23,

server/src/api/team/service.ts

@@ -28,9 +28,9 @@ export const _updateTeam = async ({ teamInfo }) => {
  return await Team.update({ ...teamInfo }, { where: { gid } });
 };
 export const _inviteTeam = async ({ inviteInfo }) => {
- const gid = await _getGroupId({ teamName: inviteInfo.teamName });
+ const { gid } = await _getGroupId({ teamName: inviteInfo.teamName });
  try {
- await Users.update({ gid: Number(gid) }, { where: { uid: inviteInfo.userId } });
+ await Users.update({ gid }, { where: { uid: inviteInfo.userId } });
  return "success";
  } catch (error) {
  return new Error("업데이트 실패");
@@ -40,6 +40,7 @@ export const _inviteTeam = async ({ inviteInfo }) => {
 export const _getGroupId = async ({ teamName }) => {
  const query = {
  raw: true,
+ attributes: ["gid"],
  where: { name: teamName },
  };
  return await Team.findOne(query);