WORK FAIRY(근태 요정)

프로젝트 소개

주제 : 연차•당직 관리 프로그램
개발 기간 : 2023. 07. 24 ~ 2023. 08. 11
배포 주소 : DEMO

👩‍🚀 프론트엔드 개발팀

_조은상	_김필진	_이시우	_정승원
_{- 관리자 페이지} _{- 프론트엔드 팀장} _{- README 및 프로젝트 관련 서류 담당}	_{- Auth페이지 / 관리자페이지} _{- 프로젝트 리더} _{- Git Management} _{- 와이어프레임 담당}	_{- 사원 페이지} _{- 템플릿 디자인 담당}	_{- 캘린더 컴포넌트}

사용기술 및 개발환경

Development

화면 구성

로그인 페이지

사용자별 로그인 회원가입 사원용 로그인 관리자용 로그인

사원 페이지

메인페이지 연차/당직 등록 결재 내역 페이지 결재 상세 내역

관리자 페이지

요청 관리 페이지 결재 처리 창 일별 사용대장 월별 사용대장 사원 조회 페이지

API 사용법

모든 API 요청(Request) headers에 아래 정보가 꼭 포함돼야 합니다! username은 KDT5_TeamX와 같이 본명 혹은 팀 이름을 포함해야 합니다! 확인할 수 없는 사용자나 팀의 DB 정보는 임의로 삭제될 수 있습니다!

{
  "content-type": "application/json"
}

인증

'인증' 관련 API는 모두 일반 사용자 전용입니다.

회원가입

사용자가 username에 종속되어 회원가입합니다.

사용자 비밀번호는 암호화해 저장합니다.(관리자는 확인할 수 없습니다!)

curl http://3.34.110.127/api/register
  \ -X 'POST'

요청 데이터 타입 및 예시:

interface RequestBody {
  email: string; // 사용자 아이디 (필수!)
  password: string; // 사용자 비밀번호, 8자 이상 (필수!)
  empName: string; // 사용자 이름, 20자 이하 (필수!)
  position?: string; // 직급 (선택 사항!)
}

{
  "email": "aaa@gmail.com",
  "password": "********",
  "empName": "team1",
  "position": "팀장"
}

응답 데이터 타입 및 예시:

interface ResponseValue {
  success: boolean;
  code: number;
  message: string;
}

{
  "success": false,
  "code": -1,
  "message": "이메일이 중복되었습니다."
}

요청관리 - 결재처리

관리자 전용 API 입니다.

curl http://3.34.110.127/api/admin/order/update
  \ -X 'POST'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

interface RequestBody {
  id: number;
  status: string;
}

{
     "id" : 1
     "status" : "승인"
}

응답 데이터 타입 및 예시:

없음

요청관리 리스트 조회 - 결재대기

관리자 전용 API 입니다.

curl http://3.34.110.127/api/admin/order/list/status/wait?page=${page}&size=${size}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

interface ResponseValue {
  content: ContentData[];
  pageable: {
    sort: {
      empty: boolean;
      sorted: boolean;
      unsorted: boolean;
    };
    offset: number;
    pageNumber: number;
    pageSize: number;
    paged: boolean;
    unpaged: boolean;
  };
  totalElements: number;
  totalPages: number;
  last: boolean;
  number: number;
  sort: {
    empty: boolean;
    sorted: boolean;
    unsorted: boolean;
  };
  size: number;
  numberOfElements: number;
  first: boolean;
  empty: boolean;
}

interface ContentData {
  id: number;
  empName: string;
  createdAt: string;
  orderType: string;
  status: string;
  startDate: string;
  endDate: string;
  reason: string;
  category: string;
  etc: string;
}

{
  "content": [
    {
      "id": 1,
      "empName": "박지훈",
      "createdAt": "2023-07-15",
      "orderType": "연차",
      "status": "대기",
      "startDate": "2023-07-15",
      "endDate": "2023-07-20",
      "reason": "이유",
      "category": "경조사",
      "etc": "기타"
    }
  ],
  "pageable": {
    "sort": {
      "empty": true,
      "sorted": false,
      "unsorted": true
    },
    "offset": 0,
    "pageNumber": 0,
    "pageSize": 4,
    "paged": true,
    "unpaged": false
  },
  "totalElements": 22,
  "totalPages": 6,
  "last": false,
  "number": 0,
  "sort": {
    "empty": true,
    "sorted": false,
    "unsorted": true
  },
  "size": 4,
  "numberOfElements": 4,
  "first": true,
  "empty": false
}

요청관리 리스트 조회 - 결재완료

관리자 전용 API 입니다.

curl http://3.34.110.127/api/admin/order/list/status/complete?page=${page}&size=${size}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

interface ResponseValue {
  content: {
    id: number;
    empName: string;
    createdAt: string;
    orderType: string;
    status: string;
    startDate: string;
    endDate: string;
    reason: string;
    category: string;
    etc: string;
  }[];
  pageable: {
    sort: {
      empty: boolean;
      sorted: boolean;
      unsorted: boolean;
    };
    offset: number;
    pageNumber: number;
    pageSize: number;
    paged: boolean;
    unpaged: boolean;
  };
  totalElements: number;
  totalPages: number;
  last: boolean;
  number: number;
  sort: {
    empty: boolean;
    sorted: boolean;
    unsorted: boolean;
  };
  size: number;
  numberOfElements: number;
  first: boolean;
  empty: boolean;
}

{
  "content": [
    {
      "id": 1,
      "empName": "박지훈",
      "createdAt": "2023-07-15",
      "orderType": "연차",
      "status": "승인",
      "startDate": "2023-07-15",
      "endDate": "2023-07-20",
      "reason": "이유",
      "category": "경조사",
      "etc": "기타"
    }
  ],
  "pageable": {
    "sort": {
      "empty": true,
      "sorted": false,
      "unsorted": true
    },
    "offset": 0,
    "pageNumber": 0,
    "pageSize": 4,
    "paged": true,
    "unpaged": false
  },
  "totalElements": 22,
  "totalPages": 6,
  "last": false,
  "number": 0,
  "sort": {
    "empty": true,
    "sorted": false,
    "unsorted": true
  },
  "size": 4,
  "numberOfElements": 4,
  "first": true,
  "empty": false
}

월별 사용대장 - 당직 조회

관리자 전용 API 입니다.

curl http://3.34.110.127/api/admin/order/list/monthly/duty?year=${year}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

type TDutyData = IDutyItem[];

interface IDutyItem {
  id: number;
  empName: string;
  empNo: number;
  month: {
    jan: number;
    feb: number;
    mar: number;
    apr: number;
    may: number;
    jun: number;
    jul: number;
    aug: number;
    sept: number;
    oct: number;
    nov: number;
    dec: number;
    totalCount: number;
  };
  total: number;
}

[
  {
    "id": 1,
    "empName": "박지훈",
    "empNo": 20200001,
    "month": {
      "jan": 0,
      "feb": 0,
      "mar": 0,
      "apr": 0,
      "may": 0,
      "jun": 0,
      "jul": 6,
      "aug": 0,
      "sept": 0,
      "oct": 0,
      "nov": 0,
      "dec": 0,
      "totalCount": 6
    },
    "total": 6
  }
]

월별 사용대장 - 연차 조회

관리자 전용 API 입니다.

curl http://3.34.110.127/api/admin/order/list/monthly/annual?year=${year}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

type TAnnualData = IDutyItem[];

interface IAnnualItem {
  id: number;
  empName: string;
  empNo: number;
  month: {
    jan: number;
    feb: number;
    mar: number;
    apr: number;
    may: number;
    jun: number;
    jul: number;
    aug: number;
    sept: number;
    oct: number;
    nov: number;
    dec: number;
    totalCount: number;
  };
  total: number;
}

[
  {
    "id": 1,
    "empName": "박지훈",
    "empNo": 20200001,
    "month": {
      "jan": 0,
      "feb": 0,
      "mar": 0,
      "apr": 0,
      "may": 0,
      "jun": 0,
      "jul": 6,
      "aug": 0,
      "sept": 0,
      "oct": 0,
      "nov": 0,
      "dec": 0,
      "totalCount": 6
    },
    "total": 6
  }
]

일별 사용대장 - 연차 조회

관리자 전용 API 입니다.

curl http://3.34.110.127/api/admin/order/list/daily/annual?year=${year}&month=${month}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

interface IResponseBody {
  empName: string;
  empNo: number;
  orderType: string;
  date: string;
}

[
  {
    "empName": "홍길동",
    "empNo": 20230001,
    "orderType": "당직",
    "date": "2023-08--20"
  }
]

일별 사용대장 - 당직 조회

관리자 전용 API 입니다.

curl http://3.34.110.127/api/admin/order/list/daily/duty?year=${year}&month=${month}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

interface IResponseBody {
  empName: string;
  empNo: number;
  orderType: string;
  date: string;
}

[
  {
    "empName": "홍길동",
    "empNo": 20230001,
    "orderType": "당직",
    "date": "2023-08--20"
  }
]

사원조회 - 사원명

관리자 전용 API 입니다.

curl http://3.34.110.127/api/admin/user/search?name=${name}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

interface ISearch {
  id: number;
  empNo: number;
  empName: string;
  createdAt: string;
}

{
  "id": 4,
  "empNo": 20210004,
  "empName": "홍길동",
  "createdAt": "2023-08-03"
}

사원조회 - 사원번호

관리자 전용 API 입니다.

curl http://3.34.110.127/api/admin/user/search?empno=${empno}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

interface ISearch {
  id: number;
  empNo: number;
  empName: string;
  createdAt: string;
}

{
  "id": 4,
  "empNo": 20210004,
  "empName": "홍길동",
  "createdAt": "2023-08-03"
}

사원조회 - 연차/당직 내역

관리자 전용 API 입니다.

curl http://3.34.110.127/api/admin/order/list?user=${user}&page=${page}&size=${size}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

interface ResponseValue {
  content: {
    id: number;
    empName: string;
    createdAt: string;
    orderType: string;
    status: string;
    startDate: string;
    endDate: string;
    reason: string;
    category: string;
    etc: string;
  }[];
  pageable: {
    sort: {
      empty: boolean;
      sorted: boolean;
      unsorted: boolean;
    };
    offset: number;
    pageNumber: number;
    pageSize: number;
    paged: boolean;
    unpaged: boolean;
  };
  totalElements: number;
  totalPages: number;
  last: boolean;
  number: number;
  sort: {
    empty: boolean;
    sorted: boolean;
    unsorted: boolean;
  };
  size: number;
  numberOfElements: number;
  first: boolean;
  empty: boolean;
}

{
  "content": [
    {
      "id": 1,
      "empName": "박지훈",
      "createdAt": "2023-07-15",
      "orderType": "연차",
      "status": "승인",
      "startDate": "2023-07-15",
      "endDate": "2023-07-20",
      "reason": "이유",
      "category": "경조사",
      "etc": "기타"
    }
  ],
  "pageable": {
    "sort": {
      "empty": true,
      "sorted": false,
      "unsorted": true
    },
    "offset": 0,
    "pageNumber": 0,
    "pageSize": 4,
    "paged": true,
    "unpaged": false
  },
  "totalElements": 22,
  "totalPages": 6,
  "last": false,
  "number": 0,
  "sort": {
    "empty": true,
    "sorted": false,
    "unsorted": true
  },
  "size": 4,
  "numberOfElements": 4,
  "first": true,
  "empty": false
}

연차/당직 등록

시원 전용 API 입니다.

curl http://3.34.110.127/api/admin/order/add
  \ -X 'POST'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

interface RequestBody {
  orderType: string;
  startAt: string;
  endAt: string;
  reason: string | null;
  category: string | null;
  etc: string | null;
}

{
    "orderType": "당직 or 연차",
    "startAt": "2023-07-31",
    "endAt": "2023-07-31",
    "reason" : "이유"
    "category"? : "경조사"
    "etc"?: "특이사항입니다."
}

응답 데이터 타입 및 예시:

interface ResponseValue {
  success: boolean;
  response: string;
  error: null;
}

{
  "success": true,
  "response": "등록 완료",
  "error": null
}

전자결제내역

시원 전용 API 입니다.

curl http://3.34.110.127/api/user/myorder?page={page}&size={size}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

interface ResponseValue {
  success: boolean;
  response: {
    content: [
      {
        id: number;
        empName: string;
        createdAt: string;
        orderType: string;
        status: string;
        startDate: string;
        endDate: string;
        reason: string | null;
      },
    ];
    pageable: {
      sort: {
        empty: boolean;
        sorted: boolean;
        unsorted: boolean;
      };
      offset: number;
      pageNumber: number;
      pageSize: number;
      paged: boolean;
      unpaged: boolean;
    };
    totalPages: number;
    totalElements: number;
    last: boolean;
    number: number;
    sort: {
      empty: boolean;
      sorted: boolean;
      unsorted: boolean;
    };
    size: number;
    numberOfElements: number;
    first: boolean;
    empty: boolean;
  };
  error: string | null;
}

{
  "success": true,
  "response": {
    "content": [
      {
        "id": 87,
        "empName": "마두기",
        "createdAt": "2023-08-09",
        "orderType": "당직",
        "status": "승인",
        "startDate": "2023-08-10",
        "endDate": "2023-08-10",
        "reason": null
      }
    ],
    "pageable": {
      "sort": {
        "empty": true,
        "sorted": false,
        "unsorted": true
      },
      "offset": 0,
      "pageNumber": 0,
      "pageSize": 10,
      "paged": true,
      "unpaged": false
    },
    "totalPages": 2,
    "totalElements": 12,
    "last": false,
    "number": 0,
    "sort": {
      "empty": true,
      "sorted": false,
      "unsorted": true
    },
    "size": 10,
    "numberOfElements": 10,
    "first": true,
    "empty": false
  },
  "error": null
}

연차/당직 내역 삭제

시원 전용 API 입니다.

curl http://3.34.110.127/api/user/order/delete?id={id}
  \ -X 'POST'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

interface ResponseValue {
  success: boolean;
  response: string;
  error: string | null;
}

{
  "success": "true",
  "response": "등록 완료",
  "error": null
}

개인 신청내역 월별조회

시원 전용 API 입니다.

curl http://3.34.110.127/api/user/main?year={year}&month={month}
  \ -X 'GET'
  \ -H 'Authorization: accessToken'

요청 데이터 타입 및 예시:

없음

응답 데이터 타입 및 예시:

interface ResponseValue {
  id: number;
  orderType: string;
  startDate: string;
  endDate: string;
  status: string;
  reason: string;
  category: string;
  etc: string;
}

[
  {
    "id" : 21,
    "orderType"  : “당직”,
    "startDate"  :  “2023-11-20”,
    "endDate"  :  “2023-11-20”,
    "status"  : “승인”,
    "reason" : “이유”,
    "category"  : “경조사”,
    "etc" : “특이사항입니다.”
  }
]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

WORK FAIRY(근태 요정)

프로젝트 소개

👩‍🚀 프론트엔드 개발팀

사용기술 및 개발환경

Development

화면 구성

로그인 페이지

사원 페이지

관리자 페이지

API 사용법

인증

회원가입

로그인

요청관리 - 결재처리

요청관리 리스트 조회 - 결재대기

요청관리 리스트 조회 - 결재완료

월별 사용대장 - 당직 조회

월별 사용대장 - 연차 조회

일별 사용대장 - 연차 조회

일별 사용대장 - 당직 조회

사원조회 - 사원명

사원조회 - 사원번호

사원조회 - 연차/당직 내역

연차/당직 등록

전자결제내역

연차/당직 내역 삭제

개인 신청내역 월별조회

Files

README.md

Latest commit

History

README.md

File metadata and controls

WORK FAIRY(근태 요정)

프로젝트 소개

👩‍🚀 프론트엔드 개발팀

사용기술 및 개발환경

Development

화면 구성

로그인 페이지

사원 페이지

관리자 페이지

API 사용법

인증

회원가입

로그인

요청관리 - 결재처리

요청관리 리스트 조회 - 결재대기

요청관리 리스트 조회 - 결재완료

월별 사용대장 - 당직 조회

월별 사용대장 - 연차 조회

일별 사용대장 - 연차 조회

일별 사용대장 - 당직 조회

사원조회 - 사원명

사원조회 - 사원번호

사원조회 - 연차/당직 내역

연차/당직 등록

전자결제내역

연차/당직 내역 삭제

개인 신청내역 월별조회