diff --git a/components/equipment/equipment.table.jsx b/components/equipment/equipment.table.jsx index 2b1abec..a6c981e 100644 --- a/components/equipment/equipment.table.jsx +++ b/components/equipment/equipment.table.jsx @@ -1,6 +1,7 @@ import React from 'react' import Link from "next/link"; import { Table } from 'semantic-ui-react' +import _ from 'lodash' const ownerNames = { 'chonghak': '총학생회', @@ -10,23 +11,77 @@ const ownerNames = { 'others': '그 외', } const EquipmentTable = ({ equipmentList }) => { + const [state, dispatch] = React.useReducer(exampleReducer, { + column: null, + data: equipmentList, + direction: null, + }) + const { column, data, direction } = state + + function exampleReducer(state, action) { + switch (action.type) { + case 'CHANGE_SORT': + if (state.column === action.column) { + return { + ...state, + data: state.data.slice().reverse(), + direction: + state.direction === 'ascending' ? 'descending' : 'ascending', + } + } + + return { + column: action.column, + data: _.sortBy(state.data, [action.column]), + direction: 'ascending', + } + default: + throw new Error() + } + } + return ( idx. - 장비명 - 장비 소속 - 대여비 - 일일 한도 (분) - 총 예약 갯수 + dispatch({ type: 'CHANGE_SORT', column: 'name' })} + > + 장비명 + + dispatch({ type: 'CHANGE_SORT', column: 'equip_owner' })} + > + 장비 소속 + + dispatch({ type: 'CHANGE_SORT', column: 'fee' })} + > + 대여비 + + dispatch({ type: 'CHANGE_SORT', column: 'max_minutes' })} + > + 일일 한도 (분) + + dispatch({ type: 'CHANGE_SORT', column: 'total_reservation_count' })} + > + 총 예약 갯수 + { - equipmentList.map((equipment, idx) => ( + data.map((equipment, idx) => ( {idx + 1} diff --git a/components/place/place.table.jsx b/components/place/place.table.jsx index ee2ef09..b7b18c8 100644 --- a/components/place/place.table.jsx +++ b/components/place/place.table.jsx @@ -1,6 +1,7 @@ import React from 'react' import Link from "next/link"; import { Table } from 'semantic-ui-react' +import _ from 'lodash' const regionNames = { 'STUDENT_HALL': '학생 회관', @@ -11,24 +12,77 @@ const regionNames = { } const PlaceTable = ({ placeList }) => { + const [state, dispatch] = React.useReducer(exampleReducer, { + column: null, + data: placeList, + direction: null, + }) + const { column, data, direction } = state + + function exampleReducer(state, action) { + switch (action.type) { + case 'CHANGE_SORT': + if (state.column === action.column) { + return { + ...state, + data: state.data.slice().reverse(), + direction: + state.direction === 'ascending' ? 'descending' : 'ascending', + } + } + + return { + column: action.column, + data: _.sortBy(state.data, [action.column]), + direction: 'ascending', + } + default: + throw new Error() + } + } return (
idx. - 장소명 - 위치 - 지역 - 일일 한도 (분) - 총 예약 갯수 + dispatch({ type: 'CHANGE_SORT', column: 'name' })} + > + 장소명 + + dispatch({ type: 'CHANGE_SORT', column: 'location' })} + > + 위치 + + dispatch({ type: 'CHANGE_SORT', column: 'region' })} + > + 지역 + + dispatch({ type: 'CHANGE_SORT', column: 'max_minutes' })} + > + 일일 한도 (분) + + dispatch({ type: 'CHANGE_SORT', column: 'total_reservation_count' })} + > + 총 예약 갯수 + { - placeList.map((place, idx) => ( + data.map((place, idx) => ( {idx + 1} diff --git a/pages/equipment/index.jsx b/pages/equipment/index.jsx index 8ac2ba8..69c4884 100644 --- a/pages/equipment/index.jsx +++ b/pages/equipment/index.jsx @@ -38,7 +38,8 @@ const EquipmentPage = ({ equipmentList }) => {

- 장비는 마지막 수정일 순서로 정렬되어 표시됩니다! + 예약은 생성일 순서로 정렬되어 표시됩니다!
+ 예약 내용을 수정하는 건 불가능합니다. 예약 승인/거절/삭제만 가능합니다.

diff --git a/pages/place/index.jsx b/pages/place/index.jsx index 83c44d7..566501b 100644 --- a/pages/place/index.jsx +++ b/pages/place/index.jsx @@ -38,7 +38,8 @@ const PlacePage = ({ placeList }) => {

- 장소는 마지막 수정일 순서로 정렬되어 표시됩니다! + 퍼블릭 페이지에는 마지막 수정일 순서로 정렬되어 표시됩니다.
+ 테이블 헤더를 클릭하여 정렬된 결과를 확인할 수 있습니다.