diff --git a/src/components/building/BuildingSelectMainCard.tsx b/src/components/building/BuildingSelectMainCard.tsx index 272a7cf..b2b229d 100644 --- a/src/components/building/BuildingSelectMainCard.tsx +++ b/src/components/building/BuildingSelectMainCard.tsx @@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react"; import './css/BuildingSelectMainCard.css'; import '../loading/css/Loading.css'; import SearchBar from '../searchbar/SearchBar'; -import CheckTable from '../table/CheckTable'; +import CheckIOTable from '../table/CheckIOTable'; import Pagination from '../table/Pagination'; import LogoutButton from '../buttons/LogoutButton'; import SelectButton from '../buttons/SelectButton'; @@ -22,6 +22,7 @@ const BuildingSelectMainCard: React.FC = () => { const [totalPages, setTotalPages] = useState(1); const [currentPage, setCurrentPage] = useState(1); const [selectedBuilding, setSelectedBuilding] = useState | null>(null); + const [selectedDirection, setSelectedDirection] = useState('입장'); const [searchKeyword, setSearchKeyword] = useState(''); const [isLoading, setIsLoading] = useState(true); @@ -65,8 +66,13 @@ const BuildingSelectMainCard: React.FC = () => { const { buildingCode, buildingName } = selectedBuilding; + localStorage.setItem("deviceLocationType", "BUILDING"); localStorage.setItem("deviceAreaCode", buildingCode); localStorage.setItem("buildingName", buildingName); + + const directionValue = selectedDirection === '입장' ? 'IN' : 'OUT'; + localStorage.setItem("direction", directionValue); + navigate("/qr"); }; @@ -86,10 +92,15 @@ const BuildingSelectMainCard: React.FC = () => { onSearch={handleSearch} />
- setSelectedBuilding(row)} + onDirectionChange={(idx, direction) => { + if (buildingList[idx] === selectedBuilding) { + setSelectedDirection(direction); + } + }} /> []; + onRowSelect?: (row: Record) => void; + onDirectionChange?: (idx: number, direction: string) => void; +} + +const CheckIOTable: React.FC = ({ tableTitles, data, onRowSelect, onDirectionChange }) => { + const [selectedRow, setSelectedRow] = useState(0); + const [rowDirections, setRowDirections] = useState([]); + + useEffect(() => { + setRowDirections(data.map(() => '입장')); + if (data.length > 0 && onRowSelect) { + onRowSelect(data[0]); + } + }, [data]); + + const handleRowSelect = (idx: number) => { + setSelectedRow(idx); + if (onRowSelect) { + onRowSelect(data[idx]); + } + }; + + const handleDirectionChange = (idx: number, direction: string) => { + const newDirections = [...rowDirections]; + newDirections[idx] = direction; + setRowDirections(newDirections); + + if (onDirectionChange) { + onDirectionChange(idx, direction); + } + }; + + return ( +
+ + + + + ))} + + + + + {data.length === 0 ? ( + + + + ) : ( + data.map((row, idx) => ( + handleRowSelect(idx)} + style={{ cursor: 'pointer' }} + > + + {tableTitles.map((col) => ( + + ))} + + + )) + )} + +
+ {tableTitles.map((col) => ( + {col.label}출입 방향
+ 조회된 결과가 존재하지 않습니다. +
+ handleRowSelect(idx)} + /> + + {row[col.key]} + + +
+
+ ); +}; + +export default CheckIOTable; \ No newline at end of file diff --git a/src/components/table/css/CheckIOTable.css b/src/components/table/css/CheckIOTable.css new file mode 100644 index 0000000..747964b --- /dev/null +++ b/src/components/table/css/CheckIOTable.css @@ -0,0 +1,42 @@ + .check-io-table-wrapper { + overflow-x: auto; + background: white; + border-radius: 8px; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + } + + .check-io-table { + min-width: 600px; + font-family: sans-serif; + table-layout: auto; + border-collapse: collapse; + } + + .check-io-table thead { + background-color: #f5f5f5; + text-align: left; + } + + .check-io-table th, + .check-io-table td { + padding: 8px 16px; + border-bottom: 1px solid #e0e0e0; + word-break: keep-all; + white-space: nowrap; + text-align: center; + } + + .check-io-table th:first-child, + .check-io-table td:first-child { + width: 50px; + text-align: center; + } + + .check-io-table-selected-row { + background-color: #eaf1eb; + color: #1d4f2c; + } + + .check-io-table-name { + font-weight: 500; + } \ No newline at end of file diff --git a/src/components/zone/ZoneSelectMainZoneCard.tsx b/src/components/zone/ZoneSelectMainZoneCard.tsx index 5829abf..1dd2371 100644 --- a/src/components/zone/ZoneSelectMainZoneCard.tsx +++ b/src/components/zone/ZoneSelectMainZoneCard.tsx @@ -73,6 +73,7 @@ const ZoneSelectMainZoneCard: React.FC = ({ buildingId, buildingName, onB const { areaCode, areaName } = selectedBuilding; + localStorage.setItem("deviceLocationType", "AREA"); localStorage.setItem("deviceAreaCode", areaCode); localStorage.setItem("zoneName", areaName); localStorage.setItem("buildingName", buildingName);