From 30fa61fb672a50f6b1328713d66ad4f3f964bc21 Mon Sep 17 00:00:00 2001 From: judymoody59 Date: Wed, 11 Jun 2025 19:26:51 +0900 Subject: [PATCH 1/2] =?UTF-8?q?KW-657/feat:=20CheckIOTable=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/table/CheckIOTable.tsx | 101 ++++++++++++++++++++++ src/components/table/css/CheckIOTable.css | 42 +++++++++ 2 files changed, 143 insertions(+) create mode 100644 src/components/table/CheckIOTable.tsx create mode 100644 src/components/table/css/CheckIOTable.css diff --git a/src/components/table/CheckIOTable.tsx b/src/components/table/CheckIOTable.tsx new file mode 100644 index 0000000..74c6951 --- /dev/null +++ b/src/components/table/CheckIOTable.tsx @@ -0,0 +1,101 @@ +import React, { useEffect, useState } from "react"; +import "./css/CheckIOTable.css"; + +type Column = { + key: string, + label: string; +}; + +interface CheckEditIOTableProps { + tableTitles: Column[]; + data: Record[]; + onRowSelect?: (row: Record) => void; +} + +const CheckIOTable: React.FC = ({ tableTitles, data, onRowSelect }) => { + 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); + }; + + 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 From 44bd8585e6182347706355adee199793de1071f2 Mon Sep 17 00:00:00 2001 From: judymoody59 Date: Wed, 11 Jun 2025 19:35:33 +0900 Subject: [PATCH 2/2] =?UTF-8?q?KW-657/feat:=20=EA=B1=B4=EB=AC=BC=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20?= =?UTF-8?q?=EC=B6=9C=EC=9E=85=20=EB=B0=A9=ED=96=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../building/BuildingSelectMainCard.tsx | 15 +++++++++++++-- src/components/table/CheckIOTable.tsx | 7 ++++++- src/components/zone/ZoneSelectMainZoneCard.tsx | 1 + 3 files changed, 20 insertions(+), 3 deletions(-) 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 }) => { +const CheckIOTable: React.FC = ({ tableTitles, data, onRowSelect, onDirectionChange }) => { const [selectedRow, setSelectedRow] = useState(0); const [rowDirections, setRowDirections] = useState([]); @@ -34,6 +35,10 @@ const CheckIOTable: React.FC = ({ tableTitles, data, onRo const newDirections = [...rowDirections]; newDirections[idx] = direction; setRowDirections(newDirections); + + if (onDirectionChange) { + onDirectionChange(idx, direction); + } }; return ( 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);