일단 커밋

src/App.tsx

@@ -1,11 +1,24 @@
 import { RouterProvider } from 'react-router-dom';
 import { Router } from './router/router';
 import { StyledProvider } from './style/StyledProvider';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      staleTime: 5000,
+      retry: 1,
+    },
+  },
+});
 
 export const App = () => {
   return (
-    <StyledProvider>
-      <RouterProvider router={Router} />
-    </StyledProvider>
+    <QueryClientProvider client={queryClient}>
+      <StyledProvider>
+        <RouterProvider router={Router} />
+      </StyledProvider>
+    </QueryClientProvider>
   );
 };

src/components/Team/TeamContainer.tsx

@@ -1,26 +1,25 @@
 import { theme } from '@/style/theme';
 import styled from '@emotion/styled';
 import { Tag } from './Tag';
-import React from 'react';
 
 type TagType = 'club' | 'team' | 'alone' | 'etc';
 
 type TeamType = {
   name: string;
   admin: string;
-  deploy: string[];
+  deploy?: string[];
   tag: TagType;
 };
 
-export const TeamContainer = ({ name, admin, deploy, tag }: TeamType) => {
+export const TeamContainer = ({ name, admin, tag }: TeamType) => {
   return (
     <Wrapper>
       <div>
         {name}
         <Tag tag={tag} />
       </div>
       <div>관리자: {admin}</div>
-      <div>
+      {/* <div>
         배포:&nbsp;
         {deploy.map((element, index) => {
           switch (index) {
@@ -41,7 +40,7 @@ export const TeamContainer = ({ name, admin, deploy, tag }: TeamType) => {
               return null;
           }
         })}
-      </div>
+      </div> */}
     </Wrapper>
   );
 };

src/components/common/footer/index.tsx

@@ -8,4 +8,6 @@ const Wrapper = styled.div`
   width: 100%;
   height: 544px;
   background-color: #17181a;
+  position: absolute;
+  z-index: 11;
 `;

src/components/common/sidebar/index.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { Icon } from '@iconify/react';
-import { useMatch } from 'react-router-dom';
+import { useMatch, useNavigate } from 'react-router-dom';
 
 type MenuType = {
   icon: string;
@@ -20,22 +20,45 @@ const menu: MenusType[] = [
     path: '/team',
     isBack: false,
     menu: [
-      { icon: 'ph:circles-four-light', name: '팀', link: '' },
+      { icon: 'ph:circles-four-light', name: '팀', link: '/team' },
       { icon: 'icon-park-outline:people', name: '계정', link: '' },
     ],
   },
+  {
+    path: '/team/create',
+    isBack: false,
+    menu: [
+      { icon: 'ph:circles-four-light', name: '팀', link: '/team' },
+      { icon: 'icon-park-outline:people', name: '계정', link: '' },
+    ],
+  },
+  {
+    path: '/team/:id/manage',
+    isBack: false,
+    menu: [
+      { icon: 'ph:circles-four-light', name: '팀2', link: '' },
+      { icon: 'icon-park-outline:people', name: '계정2', link: '' },
+    ],
+  },
 ];
 
 export const Sidebar = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const currentMenu = menu.find((item) => useMatch(item.path));
+  const link = useNavigate();
 
   return (
     <Wrapper isOpen={isOpen}>
       <Container>
         {currentMenu &&
           currentMenu.menu.map((menuItem, index) => (
-            <Menu key={index} isOpen={isOpen}>
+            <Menu
+              key={index}
+              isOpen={isOpen}
+              onClick={() => {
+                link(menuItem.link);
+              }}
+            >
               <div>
                 <div>
                   <Icon icon={menuItem.icon} width={24} height={24} />

src/pages/Login.tsx

@@ -3,8 +3,11 @@ import { Input } from '@/components/common/Input';
 import { XButton } from '@/components/common/XButton';
 import { useState } from 'react';
 import { login, signup } from '@/utils/apis/auth';
+import { Cookie } from '@/utils/cookie';
+import { useNavigate } from 'react-router-dom';
 
 export const Login = () => {
+  const link = useNavigate();
   const [data, setData] = useState<{ account_id: string; password: string }>({ account_id: '', password: '' });
 
   const { account_id, password } = data;
@@ -20,23 +23,20 @@ export const Login = () => {
   const onLogin = () => {
     login(data)
       .then((res) => {
-        console.log(res.data);
+        Cookie.set('accessToken', res.data.access_token);
+        Cookie.set('refreshToken', res.data.refresh_token);
+        link('/team');
       })
       .catch((err) => {
-        console.log(err);
         if (err.response.status === 404) {
           const email: string | null = prompt('회원가입이 되지 않았습니다.\n이메일을 입력해주세요');
-          console.log(123);
-
           if (email == null) return;
-          console.log(456);
-
           signup({ ...data, email: email })
-            .then((res) => {
-              console.log(res.data);
+            .then(() => {
+              alert('회원가입이 완료되었습니다.\n다시 로그인 해주세요.');
             })
-            .catch((err) => {
-              console.log(err);
+            .catch(() => {
+              alert('회원가입이 도중 문제가 발생했습니다.\n다시 시도해주세요.');
             });
         }
       });

src/pages/Team/Create.tsx

@@ -9,9 +9,13 @@ import { XButton } from '@/components/common/XButton';
 import { DropMenu } from '@/components/common/DropMenu';
 import { theme } from '@/style/theme';
 import { Icon } from '@iconify/react';
+import { useNavigate } from 'react-router-dom';
+import { TeamCreateType, TeamType } from '@/utils/types/teamType';
+import { teamCreate } from '@/utils/apis/team';
 
 type ProjectType = '동아리' | '팀 프로젝트' | '개인 프로젝트' | '기타';
 const projectKinds: ProjectType[] = ['동아리', '팀 프로젝트', '개인 프로젝트', '기타'];
+const projectKindToTeamType: TeamType[] = ['CLUB', 'TEAM_PROJECT', 'PRIVATE_PROJECT', 'ETC'];
 
 const dummyStudent: string[] = [
   '2101 김명진',
@@ -29,19 +33,64 @@ const dummyStudent: string[] = [
 ];
 
 export const TeamCreate = () => {
+  const [data, setData] = useState<TeamCreateType>({
+    team_name_ko: '',
+    team_name_en: '',
+    team_type: '',
+    team_member_list: [],
+  });
   const [array, setArray] = useState<string[]>(dummyStudent);
   const [selectedIndex, setSelectIndex] = useState<number>();
   const [studentIndex, setStudentIndex] = useState<number | undefined>(undefined);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [studentAddition, setStudentAddition] = useState<string>('');
   const [selectedStudent, setSelectedStudent] = useState<string[]>();
   const [teamStudent, setTeamStudent] = useState<string[]>([]);
+  const [students, setStudents] = useState();
   const addInputRef = useRef<HTMLInputElement>(null);
+  const link = useNavigate();
+
+  useEffect(() => {}, []);
+
+  useEffect(() => {
+    setData({
+      ...data,
+      team_type: projectKindToTeamType[selectedIndex ?? -1] ?? '',
+    });
+  }, [selectedIndex]);
+
+  useEffect(() => {
+    setData({
+      ...data,
+      team_member_list: [...teamStudent],
+    });
+  }, [teamStudent]);
 
   const ref = useOutsideClick(() => {
     setIsOpen(false);
   });
 
+  const onSubmit = () => {
+    console.log(data);
+
+    // teamCreate(data)
+    //   .then((res) => {
+    //     console.log(res.data);
+    //   })
+    //   .catch((err) => {
+    //     console.log(err);
+    //   });
+  };
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setData({
+      ...data,
+      [name]: value,
+    });
+  };
+
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setStudentAddition(e.target.value);
     setIsOpen(false);
@@ -177,8 +226,20 @@ export const TeamCreate = () => {
         </TitleContainer>
         <Form>
           <InputWrapper>
-            <Input width={400} label="팀 이름(한글)" placeholder="팀 이름(한글)" />
-            <Input width={400} label="팀 이름(영어)" placeholder="팀 이름(영어)" />
+            <Input
+              width={400}
+              label="팀 이름(한글)"
+              placeholder="팀 이름(한글)"
+              name="team_name_ko"
+              onChange={onInputChange}
+            />
+            <Input
+              width={400}
+              label="팀 이름(영어)"
+              placeholder="팀 이름(영어)"
+              name="team_name_en"
+              onChange={onInputChange}
+            />
             <SelectBar selectedIndex={selectedIndex} onSelect={setSelectIndex} values={projectKinds} label="팀 분류" />
             <TeamAddWrapper>
               <div>
@@ -223,10 +284,24 @@ export const TeamCreate = () => {
             </TeamAddWrapper>
           </InputWrapper>
           <ButtonWrapper>
-            <XButton width={58} height={50} buttonStyle="ghost">
+            <XButton
+              width={58}
+              height={50}
+              buttonStyle="ghost"
+              onClick={() => {
+                link('/team');
+              }}
+            >
               취소
             </XButton>
-            <XButton width={84} height={50} buttonStyle="solid">
+            <XButton
+              width={84}
+              height={50}
+              buttonStyle="solid"
+              onClick={() => {
+                onSubmit();
+              }}
+            >
               생성하기
             </XButton>
           </ButtonWrapper>

src/pages/Team/index.tsx

@@ -5,8 +5,11 @@ import { Icon } from '@iconify/react';
 import { theme } from '@/style/theme';
 import { TeamContainer } from '@/components/Team/TeamContainer';
 import { SearchBar } from '@/components/common/SearchBar';
+import { useEffect, useState } from 'react';
+import { teamCheck } from '@/utils/apis/team';
+import { useNavigate } from 'react-router-dom';
 
-type TagType = 'club' | 'team' | 'alone' | 'etc';
+type TagType = 'CLUB' | 'TEAM_PROJECT' | 'PRIVATE_PROJECT' | 'ETC';
 
 type TeamType = {
   name: string;
@@ -15,28 +18,21 @@ type TeamType = {
   tag: TagType;
 };
 
-const dummy: TeamType[] = [
-  {
-    name: '에일리언즈 (Team-aliens)',
-    admin: '김은빈',
-    deploy: ['DMS-Backend', 'DMS', 'DMS-admin', 'DMS-admin-front', 'DMS-auth'],
-    tag: 'club',
-  },
-  {
-    name: '에일리언즈 (Team-aliens)',
-    admin: '김은빈',
-    deploy: ['DMS-Backend', 'DMS', 'DMS-admin', 'DMS-admin-front', 'DMS-auth'],
-    tag: 'alone',
-  },
-  {
-    name: '에일리언즈 (Team-aliens)',
-    admin: '김은빈',
-    deploy: ['DMS-Backend', 'DMS', 'DMS-admin', 'DMS-admin-front', 'DMS-auth'],
-    tag: 'etc',
-  },
-];
-
 export const Team = () => {
+  const [teamArray, setTeamArray] = useState<any>([]);
+  const link = useNavigate();
+
+  useEffect(() => {
+    teamCheck()
+      .then((res) => {
+        console.log(res.data);
+        setTeamArray(res.data.team_list);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+
   return (
     <Wrapper>
       <Sidebar />
@@ -52,22 +48,22 @@ export const Team = () => {
             height={50}
             buttonStyle="solid"
             onClick={() => {
-              console.log('click!!');
+              link('/team/create');
             }}
           >
             <Icon icon={'ic:round-plus'} width={20} height={20} />팀 등록
           </XButton>
         </UtilContainer>
         <ContainerWrapper>
-          {dummy.length > 0 ? (
-            dummy.map((element, index) => {
+          {teamArray.length > 0 ? (
+            teamArray.map((element: any, index: any) => {
               return (
                 <TeamContainer
                   key={index}
-                  name={element.name}
-                  admin={element.admin}
-                  deploy={element.deploy}
-                  tag={element.tag}
+                  name={element.team_name_ko}
+                  admin={element.administrator_name}
+                  // deploy={element.team_type}
+                  tag={element.team_type}
                 />
               );
             })