[Feature] - login, create, invite API 연결

src/Router.tsx

@@ -18,7 +18,7 @@ const Router: React.FC = () => {
         <Route path="/login" element={<Login />} />
         <Route path="/create" element={<Create />} />
         <Route path="/test/:page" element={<Test />} />
-        <Route path="/invite" element={<Invite />} />
+        <Route path="/invite/:team/:count" element={<Invite />} />
         <Route path="/personal" element={<Personal />} />
         <Route path="/result" element={<Result />} />
         <Route path="/confirm" element={<Confirm />} />

src/components/common/input/DateInput.tsx

@@ -1,4 +1,3 @@
-// DateInput.tsx
 import React from "react";
 import * as S from "./style";
 
@@ -12,13 +11,34 @@ const DateInput: React.FC = () => {
 
       <S.DateInputContainer>
         <S.DateInputWrap>
-          <S.TextInput type="number" maxLength={4} />
+          <S.TextInput
+            type="number"
+            maxLength={4}
+            onChange={(e) => {
+              localStorage.setItem("year", e.target.value);
+            }}
+            placeholder="YYYY"
+          />
         </S.DateInputWrap>
         <S.DateInputWrap>
-          <S.TextInput type="number" maxLength={2} />
+          <S.TextInput
+            type="number"
+            maxLength={2}
+            onChange={(e) => {
+              localStorage.setItem("month", e.target.value);
+            }}
+            placeholder="MM"
+          />
         </S.DateInputWrap>
         <S.DateInputWrap>
-          <S.TextInput type="number" maxLength={2} />
+          <S.TextInput
+            type="number"
+            maxLength={2}
+            onChange={(e) => {
+              localStorage.setItem("day", e.target.value);
+            }}
+            placeholder="DD"
+          />
         </S.DateInputWrap>
       </S.DateInputContainer>
     </S.InputContainer>

src/components/create/TeamButton.tsx

@@ -4,8 +4,14 @@ import * as S from "./style";
 export default function TeamButton() {
   const [count, setCount] = useState(0);
 
-  const increment = () => setCount(count + 1);
-  const decrement = () => setCount(count > 0 ? count - 1 : 0);
+  const increment = () => {
+    localStorage.setItem("member_count", String(count + 1));
+    setCount(count + 1);
+  };
+  const decrement = () => {
+    localStorage.setItem("member_count", String(count - 1));
+    setCount(count > 0 ? count - 1 : 0);
+  };
 
   return (
     <S.Container>

src/components/invite/urlCopy/UrlCopy.tsx

@@ -3,8 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as S from "./style";
 
 export default function UrlCopy() {
-  const url = "https://www.syncup.com/234asdf94al4";
-
+  const url = `https://f4-front.vercel.app/invite/${localStorage.getItem(
+    "team_id"
+  )}/${localStorage.getItem("member_count")}`;
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(url);

src/components/invite/urlCopy/style.ts

@@ -6,7 +6,7 @@ export const Container = styled.div`
   justify-content: space-between;
 
   width: 350px;
-  height: 40px;
+  height: 60px;
   border-radius: 10px;
   border: 1px solid #ced4da;
   background: #e9ecef;

src/pages/create/Create.tsx

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import Button from "@components/common/button/Button";
 import HintText from "@components/common/hintText/HintText1";
 import TeamButton from "@components/create/TeamButton";
+import { instance } from "@apis/instance";
 
 const Container = styled.div`
   height: calc(100vh - 80px);
@@ -18,6 +19,16 @@ const ButtonLayout = styled.div`
 `;
 
 const Create: React.FC = () => {
+  const postData = async () => {
+    try {
+      const response = await instance.post("/teams/", {
+        member_count: localStorage.getItem("member_count"),
+      });
+      localStorage.setItem("team_id", response.data.team_id);
+    } catch (err) {
+      console.log(err);
+    }
+  };
   return (
     <>
       <Container>
@@ -30,7 +41,12 @@ const Create: React.FC = () => {
       </Container>
 
       <ButtonLayout>
-        <Button type="submit" link="/invite" name="팀 동기화 시작하기" />
+        <Button
+          onClick={postData}
+          type="submit"
+          link="/login"
+          name="팀 동기화 시작하기"
+        />
       </ButtonLayout>
     </>
   );

src/pages/invite/Invite.tsx

@@ -1,9 +1,11 @@
 import Button from "@components/common/button/Button";
 import HintText2 from "@components/common/hintText/HintText2";
-import ActivatedProfile from "@components/invite/profile/ActivatedProfile";
 import DeactivatedProfile from "@components/invite/profile/DeactivatedProfile";
 import UrlCopy from "@components/invite/urlCopy/UrlCopy";
 import styled from "styled-components";
+import { useParams } from "react-router-dom";
+import { instance } from "@apis/instance";
+import { useEffect } from "react";
 
 export const Container = styled.div`
   width: 350px;
@@ -32,6 +34,29 @@ export const ProfileList = styled.div`
 `;
 
 const Invite: React.FC = () => {
+  let { team, count } = useParams();
+  if (team === undefined) {
+    team = "";
+  }
+  if (count === undefined) {
+    count = "1";
+  }
+  localStorage.setItem("team_id", team);
+  localStorage.setItem("member_count", count);
+  useEffect(() => {
+    fetchData();
+  }, []);
+  const fetchData = async () => {
+    try {
+      const response = await instance.get(
+        `/teams/${localStorage.getItem("team_id")}/profiles/`
+      );
+      console.log(response);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return (
     <Container>
       <Section>
@@ -49,17 +74,12 @@ const Invite: React.FC = () => {
 프로필 등록을 하지 않으면 다음을 진행할 수 없어요."
         />
         <ProfileList>
-          <ActivatedProfile
-            name="김은혜"
-            position="팀장"
-            part="프론트엔드"
-            imgSrc="https://github.com/gracekim527.png"
-          />
-          <DeactivatedProfile />
-          <DeactivatedProfile />
-          <DeactivatedProfile />
-          <DeactivatedProfile />
-          <DeactivatedProfile />
+          {Array.from(
+            { length: Number(localStorage.getItem("member_count")) },
+            (_, index) => (
+              <DeactivatedProfile key={index} />
+            )
+          )}
         </ProfileList>
       </Section>
       <Button link="/result" name="팀원들과 동기화하기" />

src/pages/login/Login.tsx

@@ -5,6 +5,7 @@ import HintText from "@components/common/hintText/HintText1";
 import React from "react";
 import styled from "styled-components";
 import Button from "@components/common/button/Button";
+import { instance } from "@apis/instance";
 
 const Container = styled.div`
   height: calc(100vh - 80px);
@@ -27,6 +28,27 @@ const ButtonLayout = styled.div`
 `;
 
 const Login: React.FC = () => {
+  const handleNameChange = (data: string) => {
+    localStorage.setItem("name", data);
+  };
+  const postData = async () => {
+    for (let i = 0; i < 2; i++) {
+      try {
+        const response = await instance.post(
+          `/teams/${localStorage.getItem("team_id")}/login/`,
+          {
+            user_name: localStorage.getItem("name"),
+            birth_date: `${localStorage.getItem("year")}-${localStorage.getItem(
+              "month"
+            )}-${localStorage.getItem("day")}`,
+          }
+        );
+        localStorage.setItem("profile_id", response.data.profile_id);
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  };
   return (
     <>
       <Container>
@@ -36,12 +58,25 @@ const Login: React.FC = () => {
           paragraph="팀을 참가할 때 간단한 정보를 입력받아요."
         />
         <InputForm>
-          <Input label="이름" hint="" />
+          <Input
+            label="이름"
+            hint=""
+            onChange={(e) => {
+              handleNameChange(e.target.value);
+            }}
+          />
           <DateInput />
         </InputForm>
       </Container>
       <ButtonLayout>
-        <Button type="submit" link="" name="팀 참가하기" />
+        <Button
+          onClick={postData}
+          type="submit"
+          link={`/invite/${localStorage.getItem(
+            "team_id"
+          )}/${localStorage.getItem("member_count")}`}
+          name="팀 참가하기"
+        />
       </ButtonLayout>
     </>
   );