bcjang/operationSystem-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

조회조건 레이아웃 수정

Browse Source
This commit is contained in:
bcjang
2025-04-08 17:30:07 +09:00
parent f290f0dbf0
commit 80a3c0ab8a
20 changed files with 54 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/common/SearchBar/SearchBarLayout.js
View File

@@ -1,7 +1,8 @@
import { styled } from 'styled-components';
import { TextInput, SelectInput, SearchBarAlert } from '../../../styles/Components';
import { TextInput, SelectInput, SearchBarAlert, BtnWrapper } from '../../../styles/Components';
import Button from '../button/Button';
const SearchBarLayout = ({ firstColumnData, secondColumnData, direction }) => {
const SearchBarLayout = ({ firstColumnData, secondColumnData, direction, onReset, handleSubmit }) => {
return (
<SearchbarStyle direction={direction}>
<SearchRow>
@@ -16,6 +17,12 @@ const SearchBarLayout = ({ firstColumnData, secondColumnData, direction }) => {
))}
</SearchRow>
)}
<SearchRow>
<BtnWrapper $gap="8px">
<Button theme="search" text="검색" handleClick={handleSubmit} type="button" />
<Button theme="reset" handleClick={onReset} type="button" />
</BtnWrapper>
</SearchRow>
</SearchbarStyle>
);
};
@@ -23,16 +30,16 @@ const SearchBarLayout = ({ firstColumnData, secondColumnData, direction }) => {
export default SearchBarLayout;
const SearchbarStyle = styled.div`
width: 100%;
display: flex;
flex-wrap: wrap;
font-size: 14px;
padding: 20px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin: 0 0 40px;
flex-flow: ${props => props.direction};
gap: ${props => (props.direction === 'column' ? '20px' : '20px 0')};
width: 100%;
display: flex;
flex-wrap: wrap;
font-size: 14px;
padding: 20px;
border-radius: 8px;
border: 1px solid #ddd;
margin: 0 0 40px;
flex-flow: ${props => props.direction};
gap: ${props => (props.direction === 'column' ? '20px' : '20px 0')};
`;
const SearchItem = styled.div`
@@ -54,4 +61,10 @@ const SearchRow = styled.div`
display: flex;
flex-wrap: wrap;
gap: 20px 0;
&:last-child {
border-top: 1px solid #e0e0e0;
padding-top: 15px;
margin-top: 15px;
}
`;