release 1.0.8 ver

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,
 };

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 (
     <button type="button" css={buttonStyles} onClick={onClick}>
       <Excel />
-      <span>다운로드</span>
+      <span>{excelDown}</span>
     </button>
   );
 }

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 (
     <div css={container}>
       <ul>
         <li>
           <input type="checkbox" />
-          <p>초대일시</p>
-          <p>방문일시</p>
-          <p>입주사/초대사</p>
-          <p>방문자</p>
-          <p>방문장소</p>
-          <p>입차시각 / 출차시각</p>
-          <p>차량번호</p>
-          <p>주차시간</p>
+          <p>{listForm.invitationTime}</p>
+          <p>{listForm.visitTime}</p>
+          <p>
+            {listForm.occupantCompany}/{listForm.inviter}
+          </p>
+          <p>{listForm.visitor}</p>
+          <p>{listForm.place}</p>
+          <p>
+            {listForm.inTime} / {listForm.outTime}
+          </p>
+          <p>{listForm.carNumber}</p>
+          <p>{listForm.parkingTime}</p>
         </li>
         {content.length ? (
           content.map((item) => {
@@ -50,7 +56,7 @@ function VisitorList({ content }: GetVisitorsData) {
           })
         ) : (
           <li>
-            <p>데이터 없음</p>
+            <p>{nullData}</p>
           </li>
         )}
       </ul>
@@ -64,7 +70,6 @@ const container = css`
     align-items: center;
     gap: 10px;
     border-bottom: 1px solid #6b7280;
-
     min-height: 83px;
   }
 

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 (
     <div css={containerStyles}>
-      <button type="button" onClick={() => onClickHandler(page - 1)}>
-        <Left />
-      </button>
+      {dataPage === 0 ? (
+        <button disabled type="button">
+          <LeftDisabled />
+        </button>
+      ) : (
+        <button
+          type="button"
+          onClick={() => onClickDataPageHandler(dataPage - 1)}
+        >
+          <Left />
+        </button>
+      )}
+
       {arr.map((itme) => {
         return (
           <button
             type="button"
             key={itme}
-            onClick={() => onClickHandler(itme + 1)}
+            onClick={() => onClickPageHandler(itme + 1)}
           >
             {page === itme + 1 ? <p>{itme + 1}</p> : itme + 1}
           </button>
         );
       })}
-      <button type="button" onClick={() => onClickHandler(page + 1)}>
-        <Right />
-      </button>
+      {dataLength === size ? (
+        <button
+          type="button"
+          onClick={() => onClickDataPageHandler(dataPage + 1)}
+        >
+          <Right />
+        </button>
+      ) : (
+        <button disabled type="button">
+          <RightDisabled />
+        </button>
+      )}
     </div>
   );
 }

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<HTMLSelectElement>) => {
     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,17 +69,17 @@ function VisitorSearch({ setVisitorList, setPage }: VisitorSearchProps) {
       <div css={searchForm}>
         <div css={selectDivStyles}>
           <select id="data" onChange={(e) => onChangeSelectHandler(e)}>
-            <option value="COMPANY">입주사명</option>
-            <option value="VISITOR">방문자명</option>
+            <option value="COMPANY">{search.occupantCompany}</option>
+            <option value="VISITOR">{search.visitor}</option>
           </select>
           <Down />
         </div>
         <input
           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}
         </button>
       </div>
     </div>
@@ -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 {

src/components/admin/visitor/index.tsx

@@ -10,25 +10,28 @@ import VisitorListPagenation from './VisitorListPagenation';
 
 function Index() {
   const [visitorList, setVisitorList] = useState<GetVisitorsData>();
+
+  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 (
     <div css={contentStyles}>
-      <VisitorSearch setVisitorList={setVisitorList} setPage={setPage} />
+      <VisitorSearch
+        setVisitorList={setVisitorList}
+        setPage={setPage}
+        size={size}
+        dataPage={dataPage}
+        setDataPage={setDataPage}
+      />
 
       {visitorList && (
         <>
-          <VisitorExcelDown checkVisitors={visitorList.content.length} />
+          <VisitorExcelDown checkVisitors={visitorList.totalElements} />
           <VisitorList content={ListData(visitorList)} />
           <VisitorListPagenation
             limit={limit}
             page={page}
             totalVisitors={visitorList.content.length}
             setPage={setPage}
+            dataPage={dataPage}
+            setDataPage={setDataPage}
+            size={size}
+            dataLength={visitorList?.content.length}
           />
         </>
       )}

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 (
     <div css={headerStyles}>
       <button type="button" css={titleStyles} onClick={onClickHandler}>
-        오피스너
+        {PROJECT_NAME}
       </button>
       <div css={headerRightStyles}>
         <button type="button">
@@ -20,7 +21,7 @@ function Header() {
         <button type="button">
           <User />
         </button>
-        <p>000님</p>
+        <p>관리자님</p>
         <button type="button" css={arrowStyles}>
           <ChevronRight />
         </button>

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: {