From 2365f85c9f65105de0c20d5ffe2d441446e89820 Mon Sep 17 00:00:00 2001 From: dutexion Date: Tue, 7 May 2024 22:11:46 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9D=BC=EB=8B=A8=20=EC=BB=A4=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 19 +++++- src/components/Team/TeamContainer.tsx | 9 ++- src/components/common/footer/index.tsx | 2 + src/components/common/sidebar/index.tsx | 29 ++++++++- src/pages/Login.tsx | 20 +++--- src/pages/Team/Create.tsx | 83 +++++++++++++++++++++++-- src/pages/Team/index.tsx | 54 ++++++++-------- src/utils/apis/auth.ts | 5 +- src/utils/apis/axios.ts | 42 +++++++++++++ src/utils/apis/team.ts | 12 ++++ src/utils/types/teamType.ts | 8 +++ 11 files changed, 227 insertions(+), 56 deletions(-) create mode 100644 src/utils/apis/team.ts create mode 100644 src/utils/types/teamType.ts diff --git a/src/App.tsx b/src/App.tsx index 1ea1b8a..e249f79 100644 --- a/src/App.tsx +++ b/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 ( - - - + + + + + ); }; diff --git a/src/components/Team/TeamContainer.tsx b/src/components/Team/TeamContainer.tsx index b7b7722..9662ebb 100644 --- a/src/components/Team/TeamContainer.tsx +++ b/src/components/Team/TeamContainer.tsx @@ -1,18 +1,17 @@ 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 (
@@ -20,7 +19,7 @@ export const TeamContainer = ({ name, admin, deploy, tag }: TeamType) => {
관리자: {admin}
-
+ {/*
배포:  {deploy.map((element, index) => { switch (index) { @@ -41,7 +40,7 @@ export const TeamContainer = ({ name, admin, deploy, tag }: TeamType) => { return null; } })} -
+
*/} ); }; diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx index 5253af6..1756e34 100644 --- a/src/components/common/footer/index.tsx +++ b/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; `; diff --git a/src/components/common/sidebar/index.tsx b/src/components/common/sidebar/index.tsx index 174d0ac..9b4dc82 100644 --- a/src/components/common/sidebar/index.tsx +++ b/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(false); const currentMenu = menu.find((item) => useMatch(item.path)); + const link = useNavigate(); return ( {currentMenu && currentMenu.menu.map((menuItem, index) => ( - + { + link(menuItem.link); + }} + >
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 0d1ceb6..04cb079 100644 --- a/src/pages/Login.tsx +++ b/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다시 시도해주세요.'); }); } }); diff --git a/src/pages/Team/Create.tsx b/src/pages/Team/Create.tsx index c86b916..457a2af 100644 --- a/src/pages/Team/Create.tsx +++ b/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,6 +33,12 @@ const dummyStudent: string[] = [ ]; export const TeamCreate = () => { + const [data, setData] = useState({ + team_name_ko: '', + team_name_en: '', + team_type: '', + team_member_list: [], + }); const [array, setArray] = useState(dummyStudent); const [selectedIndex, setSelectIndex] = useState(); const [studentIndex, setStudentIndex] = useState(undefined); @@ -36,12 +46,51 @@ export const TeamCreate = () => { const [studentAddition, setStudentAddition] = useState(''); const [selectedStudent, setSelectedStudent] = useState(); const [teamStudent, setTeamStudent] = useState([]); + const [students, setStudents] = useState(); const addInputRef = useRef(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) => { + const { name, value } = e.target; + + setData({ + ...data, + [name]: value, + }); + }; + const onChange = (e: React.ChangeEvent) => { setStudentAddition(e.target.value); setIsOpen(false); @@ -177,8 +226,20 @@ export const TeamCreate = () => {
- - + +
@@ -223,10 +284,24 @@ export const TeamCreate = () => { - + { + link('/team'); + }} + > 취소 - + { + onSubmit(); + }} + > 생성하기 diff --git a/src/pages/Team/index.tsx b/src/pages/Team/index.tsx index 49948fd..94f264d 100644 --- a/src/pages/Team/index.tsx +++ b/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([]); + const link = useNavigate(); + + useEffect(() => { + teamCheck() + .then((res) => { + console.log(res.data); + setTeamArray(res.data.team_list); + }) + .catch((err) => { + console.log(err); + }); + }, []); + return ( @@ -52,22 +48,22 @@ export const Team = () => { height={50} buttonStyle="solid" onClick={() => { - console.log('click!!'); + link('/team/create'); }} > 팀 등록 - {dummy.length > 0 ? ( - dummy.map((element, index) => { + {teamArray.length > 0 ? ( + teamArray.map((element: any, index: any) => { return ( ); }) diff --git a/src/utils/apis/auth.ts b/src/utils/apis/auth.ts index dbaa0cc..ba15ca9 100644 --- a/src/utils/apis/auth.ts +++ b/src/utils/apis/auth.ts @@ -1,12 +1,13 @@ import { instance } from './axios'; import { SignInType, SignUpType } from '../types/authType'; +import axios from 'axios'; const router = 'auth'; export const login = async (data: SignInType) => { - return await instance.post(`${router}/login`, data); + return await axios.post(`${import.meta.env.VITE_SERVER_BASE_URL}/${router}/login`, data); }; export const signup = async (data: SignUpType) => { - return await instance.post(`${router}/signup`, data); + return await axios.post(`${import.meta.env.VITE_SERVER_BASE_URL}/${router}/signup`, data); }; diff --git a/src/utils/apis/axios.ts b/src/utils/apis/axios.ts index 9749d91..47dbced 100644 --- a/src/utils/apis/axios.ts +++ b/src/utils/apis/axios.ts @@ -1,6 +1,48 @@ import axios from 'axios'; +import { Cookie } from '../cookie'; export const instance = axios.create({ baseURL: import.meta.env.VITE_SERVER_BASE_URL, timeout: 30000, }); + +instance.interceptors.request.use( + (res) => { + const token = Cookie.get('accessToken'); + if (token) res.headers.Authorization = `Bearer ${token}`; + return res; + }, + (err) => { + // toast.error('오류가 발생헀습니다'); + return Promise.reject(err); + }, +); + +instance.interceptors.response.use( + (res) => { + return res; + }, + // (err) => { + // const { + // response: { status }, + // } = err; + // if (status === 403 || status === 401) { + // alert('다시 로그인 ㄱㄱ'); + // // const token = Cookie.get('refreshToken'); + // // reissue(token) + // // .then((res) => { + // // Cookie.set('accessToken', res.data.access_token); + // // Cookie.set('refreshToken', res.data.refresh_token); + // // window.location.reload(); + // // }) + // // .catch(() => { + // // Cookie.remove('accessToken'); + // // Cookie.remove('refreshToken'); + // // window.location.href = '/signin'; + // // }); + // } else { + // // toast.error('오류가 발생헀습니다'); + // return Promise.reject(err); + // } + // }, +); diff --git a/src/utils/apis/team.ts b/src/utils/apis/team.ts new file mode 100644 index 0000000..4f11dd7 --- /dev/null +++ b/src/utils/apis/team.ts @@ -0,0 +1,12 @@ +import { TeamCreateType } from '../types/teamType'; +import { instance } from './axios'; + +const router = 'team'; + +export const teamCheck = async () => { + return await instance.get(`${router}/my-team`); +}; + +export const teamCreate = async (data: TeamCreateType) => { + return await instance.post(`${router}`, data); +}; diff --git a/src/utils/types/teamType.ts b/src/utils/types/teamType.ts new file mode 100644 index 0000000..1a0a075 --- /dev/null +++ b/src/utils/types/teamType.ts @@ -0,0 +1,8 @@ +export type TeamType = 'CLUB' | 'TEAM_PROJECT' | 'PRIVATE_PROJECT' | 'ETC' | string; + +export type TeamCreateType = { + team_name_ko: string; + team_name_en: string; + team_type: TeamType; + team_member_list: string[]; +};