Skip to content

[KW-683] fix: 환자 목록, 출입 내역, 출입증 발급 내역 조회 페이지에 SearchBar 추가 #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
judymoody59 merged 3 commits into from
Jun 16, 2025
Merged

[KW-683] fix: 환자 목록, 출입 내역, 출입증 발급 내역 조회 페이지에 SearchBar 추가 #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
93796f8
KW-683/fix: 환자 전체 목록 조회 페이지에 SearchBar 추가
judymoody59 Jun 16, 2025
f007552
KW-683/fix: 출입 내역 조회 페이지에 SearchBar 추가
judymoody59 Jun 16, 2025
b2b10e6
KW-683/fix: 출입증 발급 내역 조회 페이지에 SearchBar 추가
judymoody59 Jun 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions src/apis/passApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import axiosWithAuthorization from "../contexts/axiosWithAuthorization";

// 출입 내역 조회
export const fetchEntryPassLog = async (page: number) => {
export const fetchEntryPassLog = async (page: number, keyword: string = "") => {
try {
const res = await axiosWithAuthorization.get(`/pass-logs/enter?page=${page}`);
const res = await axiosWithAuthorization.get(`/pass-logs/enter?page=${page}`, {
params: {
page,
...(keyword ? { keyword } : {}),
},
});
console.log("출입 내역 조회:", res.data);
return res.data.data;
} catch (error) {
Expand All @@ -13,9 +18,14 @@ export const fetchEntryPassLog = async (page: number) => {
};

// 출입증 발급 내역 조회
export const fetchIssuedPassLog = async (page: number) => {
export const fetchIssuedPassLog = async (page: number, keyword: string = "") => {
try {
const res = await axiosWithAuthorization.get(`/pass-logs/issued?page=${page}`);
const res = await axiosWithAuthorization.get(`/pass-logs/issued?page=${page}`, {
params: {
page,
...(keyword ? { keyword } : {}),
},
});
console.log("출입증 발급 내역 조회:", res.data);
return res.data.data;
} catch (error) {
Expand Down
9 changes: 7 additions & 2 deletions src/apis/patientApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import axiosWithAuthorization from "../contexts/axiosWithAuthorization";

// 환자 목록 전체 조회
export const fetchPatientList = async (page: number) => {
export const fetchPatientList = async (page: number, keyword: string = "") => {
try {
const res = await axiosWithAuthorization.get(`/patients/paged?page=${page}`);
const res = await axiosWithAuthorization.get(`/patients/paged?page=${page}`, {
params: {
page,
...(keyword ? { keyword } : {}),
},
});
console.log("환자 목록 전체 조회:", res.data);
return res.data.data;
} catch (error) {
Expand Down
49 changes: 14 additions & 35 deletions src/components/searchbar/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,35 @@
import { useState } from 'react';
import './css/SearchBar.css';

interface SearchBarProps {
type: '구역관리' | '사원정보' | '보안그룹';
interface SearchBarProps {
placeholder?: string;
onSearch?: (input: string) => void;
}

const SearchBar = ({ type }: SearchBarProps) => {
const dropdownOptions = {
'구역관리': ['전체', 'A동', 'B동'],
'사원정보': ['사원이름', '이메일', '직책', '부서명'],
'보안그룹': ['보안그룹명', '구역 ID', '사원 ID'],
};

const placeholder = {
'구역관리': '검색어를 입력하세요',
'사원정보': '검색어를 입력하세요',
'보안그룹': '검색어를 입력하세요',
};

const options = dropdownOptions[type];
const [selected, setSelected] = useState(options[0]);
const SearchBar = ({ placeholder, onSearch }: SearchBarProps) => {
const [inputValue, setInputValue] = useState('');
const [dropdownOpen, setDropdownOpen] = useState(false);

const handleSearch = () => {
console.log(`검색: [${selected}] ${inputValue}`);
console.log(`검색: ${inputValue}`);
if (onSearch) onSearch(inputValue);
};

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};

return (
<div className="search-bar">
<div className="search-bar-dropdown">
<button className="search-bar-dropdown-toggle" onClick={() => setDropdownOpen(!dropdownOpen)}>
{selected} <span className="search-bar-arrow">▼</span>
</button>
{dropdownOpen && (
<ul className="search-bar-dropdown-menu">
{options.map((opt) => (
<li key={opt} onClick={() => { setSelected(opt); setDropdownOpen(false); }}>
{opt}
</li>
))}
</ul>
)}
</div>
<input
type="text"
className="search-bar-input"
placeholder={placeholder[type]}
placeholder={placeholder}
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={handleKeyDown}
/>

<button className="search-bar-button" onClick={handleSearch}>
검색
</button>
Expand Down
222 changes: 91 additions & 131 deletions src/components/searchbar/css/SearchBar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,131 +1,91 @@
.search-bar {
display: flex;
align-items: center;
gap: 8px;
width: 600px;
background-color: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
padding: 0px;
border-radius: 4px;

}

.search-bar-dropdown {
position: relative;
width: 110px;
max-width: 160px;
}

.search-bar-dropdown-toggle {
width: 100%;
padding: 8px;
border: none;
background-color: white;
border-right: 1px solid #ccc;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
border-radius: 4px 0 0 4px;
}

.search-bar-arrow {
font-size: 10px;
margin-left: 4px;
border-radius: 0;
color: #1f441f;
}

.search-bar-dropdown-menu {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 36px;
left: 0;
width: 100%;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 10;
overflow: hidden;
}

.search-bar-dropdown-menu li {
padding: 8px;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
text-align: left;
}

.search-bar-dropdown-menu li:hover {
background-color: #e5eee7;
}

.search-bar-input {
flex-grow: 1;
border: none;
outline: none;
padding: 8px;
font-size: 14px;
background-color: white;
}

.search-bar-button {
background-color: #1f441f;
color: white;
padding: 8px 16px;
border: none;
cursor: pointer;
font-size: 14px;
border-radius: 4px;
}

.search-bar-button:hover {
background-color: #24562B;
}

body.dark-mode .search-bar {
background-color: #1f1f1f;
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.08);
}

body.dark-mode .search-bar-dropdown-toggle {
background-color: #2b2b2b;
border-right: 1px solid #555;
color: #f0f0f0;
}

body.dark-mode .search-bar-dropdown-menu {
background-color: #2b2b2b;
border: 1px solid #555;
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

body.dark-mode .search-bar-dropdown-menu li {
color: #f0f0f0;
}

body.dark-mode .search-bar-dropdown-menu li:hover {
background-color: #3a4a3a;
}

body.dark-mode .search-bar-input {
background-color: #2b2b2b;
color: #f0f0f0;
}

body.dark-mode .search-bar-button {
background-color: #3a7541;
color: #fff;
}

body.dark-mode .search-bar-button:hover {
background-color: #2e5d35;
}

body.dark-mode .search-bar-arrow {
color: #b5d6b5;
}
.search-bar {
display: flex;
align-items: center;
gap: 8px;
width: 600px;
background-color: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
padding: 0px;
border-radius: 4px;
}

.search-bar-dropdown {
position: relative;
width: 110px;
max-width: 160px;
}

.search-bar-dropdown-toggle {
width: 100%;
padding: 8px;
border: none;
background-color: white;
border-right: 1px solid #ccc;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
border-radius: 4px 0 0 4px;
}

.search-bar-arrow {
font-size: 10px;
margin-left: 4px;
border-radius: 0;
color: #1f441f;
}

.search-bar-dropdown-menu {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 36px;
left: 0;
width: 100%;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 10;
overflow: hidden;
}

.search-bar-dropdown-menu li {
padding: 8px;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
text-align: left;
}

.search-bar-dropdown-menu li:hover {
background-color: #e5eee7;
}

.search-bar-input {
flex-grow: 1;
border: none;
outline: none;
padding: 8px;
font-size: 14px;
background-color: white;

border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}

.search-bar-button {
background-color: #1f441f;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
color: white;
padding: 8px 16px;
border: none;
cursor: pointer;
font-size: 14px;
border-radius: 4px;
}

.search-bar-button:hover {
background-color: #24562B;
}
Loading