Merge pull request #6 from FastCampus-Mini5/duty

docs: api 분류
FastCampus-Mini5 · Aug 3, 2023 · 1c979dc · 1c979dc
2 parents 60395e6 + 91dd98d
commit 1c979dc
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 172 deletions.
diff --git a/src/api/Base.ts b/src/api/Base.ts
@@ -0,0 +1 @@
+export const API_URL = import.meta.env.VITE_BASE_URL;
diff --git a/src/api/api.ts b/src/api/api.ts
@@ -0,0 +1,89 @@
+import axios from "axios"
+import { API_URL } from './Base';
+
+interface User {
+  username: string,
+  email: string,
+  hireDate: string
+  reaminVacation: number
+}
+
+export const userListApi = async() => {
+  try {
+    const data = await axios.get(`${API_URL}/api/admin/user/list`)
+    if(data) {
+      return data
+    }
+    else {
+      throw new Error('기록 작성에 실패하셨습니다.')
+    }
+  } catch (error) {
+    throw error
+  }
+}
+
+export const userApproveApi = async() => {
+  try {
+    const data = await axios.get(`${API_URL}/api/admin/signup/list`)
+    if(data) {
+      return data
+    }
+    else {
+      throw new Error('기록 작성에 실패하셨습니다.')
+    }
+  } catch(error) {
+    throw error
+  }
+}
+
+export const vacationApi = async() => {
+  try {
+    const data = await axios.get(`${API_URL}/api/admin/vacation/approve/list`)
+    if(data) {
+      return data
+    } else {
+      throw new Error('기록 작성에 실패하셨습니다')
+    } 
+  } catch(error) {
+    throw(error)
+  }
+}
+
+export const vacationPendingApi = async() => {
+  try {
+    const data = await axios.get(`${API_URL}/api/admin/vacation/pending`)
+    if(data) {
+      return data
+    } else {
+      throw new Error('기록 작성에 실패하셨습니다')
+    } 
+  } catch(error) {
+    throw(error)
+  }
+}
+
+export const DutyListApi = async() => {
+  try {
+    const data = await axios.get(`${API_URL}/api/admin/duty/approve/list`)
+    if(data) {
+      return data
+    } else {
+      throw new Error('기록 작성에 실패하셨습니다.')
+    }
+  } catch(error) {
+    throw(error)
+  }
+}
+
+export const DutyPeindingListsApi = async() => {
+  try {
+    const data = await axios.get(`${API_URL}/api/admin/duty/pending`)
+    if(data) {
+      return data
+    } else {
+      throw new Error('기록 작성에 실패하셨습니다.')
+    }
+  }catch (error) {
+    throw(error)
+  }
+}
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -2,16 +2,30 @@ import {NavLink, Outlet} from 'react-router-dom'
 import Styled  from 'styled-components'
 
 function Nav() {
+  const links = [
+    { path: '/', text: '홈'},
+    { path: '/user', text: '유저 리스트'},
+    { path: '/vacationpending', text: '연차 요청 리스트'},
+    { path: '/vacation', text: '연차 리스트'},
+    { path: '/dutypending', text: '당직 요청 리스트'},
+    { path: '/duty', text: '당직 리스트'},
+  ]
+
+  const searchLinks = links.map((link, index) => (
+    <StyledNavitem 
+      key = {index}
+      to = {link.path}
+    >
+      {link.text}
+    </StyledNavitem>
+  ))
+
+
   return (
     <>
       <StyledDiv>
         <StyledNavContainer>
-          <StyledNavitem to = '/' > 홈 </StyledNavitem>
-          <StyledNavitem to = '/user' >  유저 리스트</StyledNavitem>
-          <StyledNavitem to = '/vacationpending'>연차 요청 리스트</StyledNavitem>
-          <StyledNavitem to = '/vacation'> 연차 리스트</StyledNavitem>
-          <StyledNavitem to = '/dutypending'> 당직 요청 리스트</StyledNavitem>
-          <StyledNavitem to = '/duty'> 당직 리스트</StyledNavitem>
+          {searchLinks}
         </StyledNavContainer>
         <div>
           <Outlet/>
@@ -29,7 +43,7 @@ const StyledDiv = Styled.div`
 `
 
 const StyledNavContainer = Styled.div`
-  width: 200px;
+  min-width: 200px;
   height: 100vh;
   background-color: #66ffff;
   justify-content: center;

diff --git a/src/components/duty/DutyList.tsx b/src/components/duty/DutyList.tsx
@@ -1,7 +1,7 @@
-import axios from "axios"
 import { useState, useEffect } from 'react'
 import { Table } from 'antd'
 import SelectPeriod from "./SelectPeriod"
+import { DutyListApi } from '@/api/api'
 interface DutyList {
   username: string
   email: string
@@ -12,17 +12,17 @@ interface DutyList {
 function DutyList() {
   const [dutyLists, setDutyLists] = useState<DutyList[]>([])
 
-  const DutyListApi = async() => {
+  const DutyList = async() => {
     try {
-      const { data } = await axios.get('http://localhost:8001/api/admin/duty/approve/list')
-      setDutyLists(data.response)
+      const res = await DutyListApi()
+      setDutyLists(res.data.response)
     } catch (error) {
       console.error('error : ' + error)
     }
   }
 
   useEffect(() => {
-    DutyListApi()
+    DutyList()
   }, [])
 
   // table

diff --git a/src/components/duty/DutyPendingList.tsx b/src/components/duty/DutyPendingList.tsx
@@ -1,8 +1,7 @@
-import axios from 'axios'
 import { useState, useEffect } from 'react'
 import { Table } from 'antd'
 import styled from 'styled-components'
-
+import { DutyPeindingListsApi } from '@/api/api'
 interface DutyPending {
   username : string
   email: string
@@ -13,17 +12,17 @@ interface DutyPending {
 function DutyPending() {
   const [dutyPendingLists, setDutyPendingLists] = useState<DutyPending[]>([])
 
-  const dutyPendingListsApi = async () => {
+  const dutyPendingList = async () => {
     try {
-      const { data } = await axios.get('http://localhost:8001/api/admin/duty/pending')
-      setDutyPendingLists(data.response)
+      const res = await DutyPeindingListsApi()
+      setDutyPendingLists(res.data.response)
     } catch (error) {
       console.error('error : ' + error)
     }
   }
 
   useEffect(() => {
-    dutyPendingListsApi()
+    dutyPendingList()
   },[])
 
   //table

diff --git a/src/components/user/UserApprove.tsx b/src/components/user/UserApprove.tsx
@@ -1,6 +1,7 @@
-import axios from 'axios'
 import { useState, useEffect } from 'react'
 import { Table } from 'antd'
+import { userApproveApi } from '@/api/api'
+
 interface UserApprove {
   username: string
   email: string
@@ -10,25 +11,28 @@ interface UserApprove {
 
 
 function UserApprove() {
-  const [userApproveItems, setUserApproveItems] = useState<UserApprove[]>([])
+  const [userApproveLists, setUserApproveLists] = useState<UserApprove[]>([])
 
-  const userApproveApi = async () => {
+  const userApprove = async () => {
     try {
-      const { data } = await axios.get('http://localhost:8001/api/admin/signup/list')
-      setUserApproveItems(data.response)
+      const res = await userApproveApi()
+      if(res) [
+        setUserApproveLists(res.data.response)
+      ]
+
     } catch (error) {
       console.error('error : ' + error)
     }
   }
 
   useEffect(() => {
-    userApproveApi()
+    userApprove()
   }, [])
 
-  console.log(userApproveItems)
+  console.log(userApproveLists)
 
   // table
-  const tableItemSources = userApproveItems.map((item, index) => ({
+  const tableItemSources = userApproveLists.map((item, index) => ({
     key: index,
     username: item.username,
     email: item.email,

diff --git a/src/components/user/UserList.tsx b/src/components/user/UserList.tsx
@@ -1,7 +1,7 @@
-import axios from "axios";
 import styled  from 'styled-components'
 import {useState, useEffect} from 'react'
 import {Table} from 'antd'
+import { userListApi } from "@/api/api";
 
 interface User {
   username: string,
@@ -13,17 +13,19 @@ interface User {
 function UserList() {
   const [userLists, setUserLists] = useState<User[]>([])
 
-  const userListsApi = async () => {
+  const userList = async () => {
     try {
-      const { data } = await axios.get('http://localhost:8001/api/admin/user/list')
-      setUserLists(data.response)
+      const res = await userListApi()
+      if(res) {
+        setUserLists(res.data.response)        
+      }
     } catch (error) {
       console.error('error : ' + error);
     }
   }
 
   useEffect(() => {
-    userListsApi()
+    userList()
   }, [])
 
 
@@ -105,12 +107,6 @@ function UserList() {
   return (
     <>
       <div>UserList</div>
-      {/* <UserListTable 
-        headers = { headers }
-        items = { userLists }
-        selectable = {true}
-        updateSelection={setSelection}
-      /> */}
       <StyleTable
         dataSource={tableItemSource}
         columns={itemColumns}
@@ -132,4 +128,5 @@ const StyleTable = styled(Table)`
   .userListTable {
     text-align: center;
   }
+  min-width: 1000px;
 `