diff --git a/src/assets/fonts/PretendardVariable.woff2 b/src/assets/fonts/PretendardVariable.woff2 deleted file mode 100644 index a8d0637..0000000 Binary files a/src/assets/fonts/PretendardVariable.woff2 and /dev/null differ diff --git a/src/assets/icons/community.svg b/src/assets/icons/Community.svg similarity index 100% rename from src/assets/icons/community.svg rename to src/assets/icons/Community.svg diff --git a/src/assets/icons/company.svg b/src/assets/icons/Company.svg similarity index 100% rename from src/assets/icons/company.svg rename to src/assets/icons/Company.svg diff --git a/src/assets/icons/complaints.svg b/src/assets/icons/Complaints.svg similarity index 100% rename from src/assets/icons/complaints.svg rename to src/assets/icons/Complaints.svg diff --git a/src/assets/icons/dashboard.svg b/src/assets/icons/Dashboard.svg similarity index 100% rename from src/assets/icons/dashboard.svg rename to src/assets/icons/Dashboard.svg diff --git a/src/assets/icons/down.svg b/src/assets/icons/Down.svg similarity index 100% rename from src/assets/icons/down.svg rename to src/assets/icons/Down.svg diff --git a/src/assets/icons/LeftDisabled.svg b/src/assets/icons/LeftDisabled.svg new file mode 100644 index 0000000..7966e91 --- /dev/null +++ b/src/assets/icons/LeftDisabled.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/maintenanceCost.svg b/src/assets/icons/MaintenanceCost.svg similarity index 100% rename from src/assets/icons/maintenanceCost.svg rename to src/assets/icons/MaintenanceCost.svg diff --git a/src/assets/icons/notice.svg b/src/assets/icons/Notice.svg similarity index 100% rename from src/assets/icons/notice.svg rename to src/assets/icons/Notice.svg diff --git a/src/assets/icons/publicFacilities.svg b/src/assets/icons/PublicFacilities.svg similarity index 100% rename from src/assets/icons/publicFacilities.svg rename to src/assets/icons/PublicFacilities.svg diff --git a/src/assets/icons/RightDisabled.svg b/src/assets/icons/RightDisabled.svg new file mode 100644 index 0000000..20cf419 --- /dev/null +++ b/src/assets/icons/RightDisabled.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/setting.svg b/src/assets/icons/Setting.svg similarity index 100% rename from src/assets/icons/setting.svg rename to src/assets/icons/Setting.svg diff --git a/src/assets/icons/survey.svg b/src/assets/icons/Survey.svg similarity index 100% rename from src/assets/icons/survey.svg rename to src/assets/icons/Survey.svg diff --git a/src/assets/icons/visitor.svg b/src/assets/icons/Visitor.svg similarity index 100% rename from src/assets/icons/visitor.svg rename to src/assets/icons/Visitor.svg diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 071ce4d..9b41725 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -4,17 +4,19 @@ import ChevronRight from '@/assets/icons/ChevronRight.svg'; import Excel from '@/assets/icons/Excel.svg'; import Left from '@/assets/icons/Left.svg'; import Right from '@/assets/icons/Right.svg'; -import Dashboard from '@/assets/icons/dashboard.svg'; -import Company from '@/assets/icons/company.svg'; -import Visitor from '@/assets/icons/visitor.svg'; -import Community from '@/assets/icons/community.svg'; -import Notice from '@/assets/icons/notice.svg'; -import Complaints from '@/assets/icons/complaints.svg'; -import PublicFacilities from '@/assets/icons/publicFacilities.svg'; -import MaintenanceCost from '@/assets/icons/maintenanceCost.svg'; -import Survey from '@/assets/icons/survey.svg'; -import Setting from '@/assets/icons/setting.svg'; -import Down from '@/assets/icons/down.svg'; +import Dashboard from '@/assets/icons/Dashboard.svg'; +import Company from '@/assets/icons/Company.svg'; +import Visitor from '@/assets/icons/Visitor.svg'; +import Community from '@/assets/icons/Community.svg'; +import Notice from '@/assets/icons/Notice.svg'; +import Complaints from '@/assets/icons/Complaints.svg'; +import PublicFacilities from '@/assets/icons/PublicFacilities.svg'; +import MaintenanceCost from '@/assets/icons/MaintenanceCost.svg'; +import Survey from '@/assets/icons/Survey.svg'; +import Setting from '@/assets/icons/Setting.svg'; +import Down from '@/assets/icons/Down.svg'; +import LeftDisabled from '@/assets/icons/LeftDisabled.svg'; +import RightDisabled from '@/assets/icons/RightDisabled.svg'; export { Notification, @@ -34,4 +36,6 @@ export { Survey, Setting, Down, + LeftDisabled, + RightDisabled, }; diff --git a/src/assets/testImg/index.ts b/src/assets/testImg/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/admin/visitor/VisitorExcelDownBtn.tsx b/src/components/admin/visitor/VisitorExcelDownBtn.tsx index db55f27..cd17b4a 100644 --- a/src/components/admin/visitor/VisitorExcelDownBtn.tsx +++ b/src/components/admin/visitor/VisitorExcelDownBtn.tsx @@ -1,13 +1,16 @@ import { Excel } from '@/assets/icons'; +import VISITOR_TEXT from '@/constants/visitor'; + import theme from '@/styles/theme'; import { css } from '@emotion/react'; function Button() { const onClick = () => {}; + const { excelDown } = VISITOR_TEXT; return ( ); } diff --git a/src/components/admin/visitor/VisitorList.tsx b/src/components/admin/visitor/VisitorList.tsx index e841766..1fc8cab 100644 --- a/src/components/admin/visitor/VisitorList.tsx +++ b/src/components/admin/visitor/VisitorList.tsx @@ -1,21 +1,27 @@ +import VISITOR_TEXT from '@/constants/visitor'; import { GetVisitorsData } from '@/types/visitor/api'; import { css } from '@emotion/react'; import dayjs from 'dayjs'; function VisitorList({ content }: GetVisitorsData) { + const { listForm, nullData } = VISITOR_TEXT; return (
@@ -64,7 +70,6 @@ const container = css` align-items: center; gap: 10px; border-bottom: 1px solid #6b7280; - min-height: 83px; } diff --git a/src/components/admin/visitor/VisitorListPagenation.tsx b/src/components/admin/visitor/VisitorListPagenation.tsx index d52c78e..f9e8311 100644 --- a/src/components/admin/visitor/VisitorListPagenation.tsx +++ b/src/components/admin/visitor/VisitorListPagenation.tsx @@ -1,4 +1,4 @@ -import { Left, Right } from '@/assets/icons'; +import { Left, LeftDisabled, Right, RightDisabled } from '@/assets/icons'; import theme from '@/styles/theme'; import { VisitorListPagenationProps } from '@/types/visitor/visitor'; import { css } from '@emotion/react'; @@ -8,36 +8,66 @@ function VisitorListPagenation({ page, totalVisitors, setPage, + dataPage, + setDataPage, + size, + dataLength, }: VisitorListPagenationProps) { const numPages = Math.ceil(totalVisitors / limit); const arr = Array.from(Array(numPages).keys()); - const onClickHandler = (num: number) => { + const onClickPageHandler = (num: number) => { if (num > 0 && num <= numPages) { setPage(num); } }; + const onClickDataPageHandler = (num: number) => { + if (num >= 0) { + setDataPage(num); + setPage(1); + } + }; + return (
- + {dataPage === 0 ? ( + + ) : ( + + )} + {arr.map((itme) => { return ( ); })} - + {dataLength === size ? ( + + ) : ( + + )}
); } diff --git a/src/components/admin/visitor/VisitorSearch.tsx b/src/components/admin/visitor/VisitorSearch.tsx index 13de266..c5465c9 100644 --- a/src/components/admin/visitor/VisitorSearch.tsx +++ b/src/components/admin/visitor/VisitorSearch.tsx @@ -1,16 +1,25 @@ import { Down } from '@/assets/icons'; +import VISITOR_TEXT from '@/constants/visitor'; import { getSearchVisitors } from '@/pages/api/visitor/visitorRequests'; import theme from '@/styles/theme'; import { VisitorSearchProps } from '@/types/visitor/visitor'; import { css } from '@emotion/react'; import { ChangeEvent, useState } from 'react'; -function VisitorSearch({ setVisitorList, setPage }: VisitorSearchProps) { +function VisitorSearch({ + setVisitorList, + setPage, + size, + dataPage, + setDataPage, +}: VisitorSearchProps) { const [select, setSelect] = useState('COMPANY'); const [searchText, setSearchText] = useState(''); const [startDate, setStartDate] = useState(''); const [endDate, setEndDate] = useState(''); + const { search } = VISITOR_TEXT; + const onChangeSelectHandler = (event: ChangeEvent) => { setSelect(event.target.value); }; @@ -29,7 +38,7 @@ function VisitorSearch({ setVisitorList, setPage }: VisitorSearchProps) { const onClickHandler = async () => { try { - let queryString = 'size=100'; + let queryString = `size=${size}&page=${dataPage}`; if (select) { queryString += `&queryCondition=${select}`; } @@ -47,6 +56,7 @@ function VisitorSearch({ setVisitorList, setPage }: VisitorSearchProps) { if (response?.data) { setVisitorList(response.data); setPage(1); + setDataPage(0); } } catch (err) { // 검색 오류 예외 처리 @@ -59,8 +69,8 @@ function VisitorSearch({ setVisitorList, setPage }: VisitorSearchProps) {
@@ -68,8 +78,8 @@ function VisitorSearch({ setVisitorList, setPage }: VisitorSearchProps) { type="text" placeholder={ select === 'COMPANY' - ? '검색하실 입주사명을 입력해주세요' - : '검색하실 방문자명을 입력해주세요' + ? search.searchPlaceholder.company + : search.searchPlaceholder.visitor } onChange={(e) => onChangeSearchTextHandler(e)} /> @@ -82,7 +92,7 @@ function VisitorSearch({ setVisitorList, setPage }: VisitorSearchProps) { onClickHandler(); }} > - 검색 + {search.searchBtn}
@@ -121,15 +131,10 @@ const searchForm = css` } select { border: 0; //기본 스타일 제거 - -webkit-appearance: none; /* for chrome */ - -moz-appearance: none; /*for firefox*/ - appearance: none; - box-sizing: border-box; //select 박스의 크기 방식 지정. - background: transparent; //배경색 투명 처리 } @@ -144,6 +149,7 @@ const searchForm = css` input { width: 290px; padding: 12px 11px; + min-width: 100px; } button { diff --git a/src/components/admin/visitor/index.tsx b/src/components/admin/visitor/index.tsx index 5cbc691..19e537a 100644 --- a/src/components/admin/visitor/index.tsx +++ b/src/components/admin/visitor/index.tsx @@ -10,25 +10,28 @@ import VisitorListPagenation from './VisitorListPagenation'; function Index() { const [visitorList, setVisitorList] = useState(); + + const [dataPage, setDataPage] = useState(0); const nowYear = dayjs().format('YYYY'); + const [page, setPage] = useState(1); + const limit = 5; // posts가 보일 최대한의 갯수 + const offset = (page - 1) * limit; // 시작점과 끝점을 구하는 offset + const size = 25; useEffect(() => { const visitorsData = async () => { try { - const response = await getVisitors(nowYear); + const response = await getVisitors(size, dataPage, nowYear); if (response?.data) { setVisitorList(response.data); + // setVisitorListLength(response.) } } catch (err) { // 검색 오류 예외 처리 } }; visitorsData(); - }, [nowYear]); - - const [page, setPage] = useState(1); - const limit = 5; // posts가 보일 최대한의 갯수 - const offset = (page - 1) * limit; // 시작점과 끝점을 구하는 offset + }, [nowYear, dataPage]); const ListData = (list: GetVisitorsData) => { const result = list.content.slice(offset, offset + limit); @@ -37,17 +40,27 @@ function Index() { return (
- + {visitorList && ( <> - + )} diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index c1e26bb..1124df9 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -1,4 +1,5 @@ import { ChevronRight, Notification, User } from '@/assets/icons'; +import { PROJECT_NAME } from '@/constants/common'; import theme from '@/styles/theme'; import { css } from '@emotion/react'; import { useRouter } from 'next/router'; @@ -11,7 +12,7 @@ function Header() { return (
-

000님

+

관리자님

diff --git a/src/constants/common/index.ts b/src/constants/common/index.ts index bc937b4..1414ca6 100644 --- a/src/constants/common/index.ts +++ b/src/constants/common/index.ts @@ -2,6 +2,8 @@ import theme from '@/styles/theme'; import { ButtonColorsProps } from '@/types/common/button'; import { SideMenuItemsTexts } from '@/types/common/sideMenuItem'; +export const PROJECT_NAME = '오피스너'; + // 공통 버튼 색상 export const COMMON_BUTTON_COLORS: ButtonColorsProps = { blue: { diff --git a/src/constants/visitor/index.ts b/src/constants/visitor/index.ts new file mode 100644 index 0000000..b56b372 --- /dev/null +++ b/src/constants/visitor/index.ts @@ -0,0 +1,27 @@ +const VISITOR_TEXT = { + listForm: { + invitationTime: '초대일시', + visitTime: '방문일시', + occupantCompany: '입주사', + inviter: '초대자', + visitor: '방문자', + place: '방문장소', + inTime: '입차시각', + outTime: '출차시각', + carNumber: '차량번호', + parkingTime: '주차시간', + }, + nullData: '데이터 없음', + excelDown: '다운로드', + search: { + occupantCompany: '입주사명', + visitor: '방문자명', + searchPlaceholder: { + company: '검색하실 입주사명을 입력해주세요', + visitor: '검색하실 방문자명을 입력해주세요', + }, + searchBtn: '검색', + }, +}; + +export default VISITOR_TEXT; diff --git a/src/pages/api/visitor/visitorRequests.ts b/src/pages/api/visitor/visitorRequests.ts index 6b7170d..c999d3f 100644 --- a/src/pages/api/visitor/visitorRequests.ts +++ b/src/pages/api/visitor/visitorRequests.ts @@ -1,9 +1,13 @@ import apiInstance from '@/pages/api/axios'; -export const getVisitors = async (nowYear: string) => { +export const getVisitors = async ( + size: number, + page: number, + nowYear: string, +) => { const response = await apiInstance.get( // 올해 전체 데이터 - `admin/visitation?size=100&startDate=${nowYear}-01-01`, + `admin/visitation?size=${size}&page=${page}&startDate=${nowYear}-01-01`, ); return response.data; }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4bacb1b..d0a49fd 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,7 +10,7 @@ function Home() { router.push('/login'); } }, [router]); - return
admin home
; + return
관리자 페이지 HOME
; } export default Home; diff --git a/src/pages/visitor/index.tsx b/src/pages/visitor/index.tsx index bd95760..5010597 100644 --- a/src/pages/visitor/index.tsx +++ b/src/pages/visitor/index.tsx @@ -2,6 +2,7 @@ import Visitor from '@/components/admin/visitor'; import Button from '@/components/common/Button'; import PageTitle from '@/components/common/PageTitle'; import { COMMON_PAGES_TITLE } from '@/constants/common'; +import mq from '@/utils/mediaquery'; import { css } from '@emotion/react'; function Index() { @@ -20,13 +21,19 @@ function Index() { } const containerStyles = css` - min-width: 1024px; hr { margin-top: 28px; height: 1px; background-color: #d1d5db; border: 0; } + + ${mq.lg} { + max-width: 768px; + } + ${mq.pc} { + max-width: 100%; + } `; export default Index; diff --git a/src/types/visitor/api.ts b/src/types/visitor/api.ts index e91076f..59479ea 100644 --- a/src/types/visitor/api.ts +++ b/src/types/visitor/api.ts @@ -1,16 +1,19 @@ export interface GetVisitorsData { - content: { - invitationId: number; - company: string; - host: string; - visitorId: number; - startDateTime: string; - visitTime: string; - visitorName: string; - officeName: string; - carNumber: string; - inTime: string; - outTime: string; - stayTime: number; - }[]; + content: GetVisitorsDataContent[]; + totalElements?: number; +} + +export interface GetVisitorsDataContent { + invitationId: number; + company: string; + host: string; + visitorId: number; + startDateTime: string; + visitTime: string; + visitorName: string; + officeName: string; + carNumber: string; + inTime: string; + outTime: string; + stayTime: number; } diff --git a/src/types/visitor/visitor.ts b/src/types/visitor/visitor.ts index 53c065d..74da963 100644 --- a/src/types/visitor/visitor.ts +++ b/src/types/visitor/visitor.ts @@ -2,7 +2,7 @@ import { Dispatch, SetStateAction } from 'react'; import { GetVisitorsData } from './api'; export interface VisitorExcelDownProps { - checkVisitors: number; + checkVisitors?: number; } export interface VisitorListPagenationProps { @@ -10,9 +10,16 @@ export interface VisitorListPagenationProps { page: number; totalVisitors: number; setPage: (page: number) => void; + dataPage: number; + setDataPage: (page: number) => void; + size: number; + dataLength: number; } export interface VisitorSearchProps { setVisitorList: Dispatch>; setPage: Dispatch>; + size: number; + dataPage: number; + setDataPage: (page: number) => void; }