[KW-657] fix: 건물 선택 페이지에 출입 방향 추가

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<Record<string, any> | null>(null);
+  const [selectedDirection, setSelectedDirection] = useState<string>('입장');
   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}
         />
         <br />
-        <CheckTable 
+        <CheckIOTable 
           tableTitles={tableTitles} 
           data={buildingList}
           onRowSelect={(row) => setSelectedBuilding(row)} 
+          onDirectionChange={(idx, direction) => {
+            if (buildingList[idx] === selectedBuilding) {
+              setSelectedDirection(direction);
+            }
+          }}
         />
         <Pagination 
           currentPage={currentPage}

src/components/table/CheckIOTable.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from "react";
+import "./css/CheckIOTable.css";
+
+type Column = {
+  key: string,
+  label: string;              
+};
+
+interface CheckEditIOTableProps {
+  tableTitles: Column[];
+  data: Record<string, any>[];
+  onRowSelect?: (row: Record<string, any>) => void;
+  onDirectionChange?: (idx: number, direction: string) => void;
+}
+
+const CheckIOTable: React.FC<CheckEditIOTableProps> = ({ tableTitles, data, onRowSelect, onDirectionChange }) => {
+    const [selectedRow, setSelectedRow] = useState<number>(0);
+    const [rowDirections, setRowDirections] = useState<string[]>([]);
+
+  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 (
+    <div className="check-io-table-wrapper">
+      <table className="check-io-table">
+        <thead>
+          <tr>
+            <th />
+            {tableTitles.map((col) => (
+              <th key={col.key}>{col.label}</th>
+            ))}
+            <th>출입 방향</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.length === 0 ? (
+            <tr>
+              <td colSpan={tableTitles.length + 2} style={{ textAlign: 'center', padding: '12px', color: '#888' }}>
+                조회된 결과가 존재하지 않습니다.
+              </td>
+            </tr>
+          ) : (
+            data.map((row, idx) => (
+              <tr
+                key={idx}
+                className={selectedRow === idx ? "check-io-table-selected-row" : ""}
+                onClick={() => handleRowSelect(idx)}
+                style={{ cursor: 'pointer' }}
+              >
+                <td>
+                  <input
+                    type="radio"
+                    name="row-selection" 
+                    checked={selectedRow === idx}
+                    onChange={() => handleRowSelect(idx)}
+                  />
+                </td>
+                {tableTitles.map((col) => (
+                  <td
+                    key={col.key}
+                    className={col.key === "name" ? "check-io-table-name" : ""}
+                  >
+                    {row[col.key]}
+                  </td>
+                ))}
+                <td style={{ textAlign: 'center', verticalAlign: 'middle' }}>
+                  <select
+                    value={rowDirections[idx]}
+                    onChange={(e) => handleDirectionChange(idx, e.target.value)}
+                    style={{ padding: "4px 8px", display: 'inline-block' }}
+                  >
+                    <option value="입장">입장</option>
+                    <option value="퇴장">퇴장</option>
+                  </select>
+                </td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default CheckIOTable;

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

src/components/zone/ZoneSelectMainZoneCard.tsx

@@ -73,6 +73,7 @@ const ZoneSelectMainZoneCard: React.FC<Props> = ({ buildingId, buildingName, onB
 
     const { areaCode, areaName } = selectedBuilding;
 
+    localStorage.setItem("deviceLocationType", "AREA");
     localStorage.setItem("deviceAreaCode", areaCode);
     localStorage.setItem("zoneName", areaName);
     localStorage.setItem("buildingName", buildingName);