api 공통 모듈생성

search, api 공통 모듈 생성
공통모듈 화면 별 반영

src/styles/Components.js

@@ -145,6 +145,15 @@ export const InputLabel = styled.span`
 	display: inline-block;
 	min-width: fit-content;
 	font-weight: 600;
+    ${props =>
+            props.$require &&
+            css`
+			&:after {
+				content: '*';
+				color: #fe565e;
+				margin-left: 5px;
+			}
+		`}
 `;
 
 export const InputItem = styled.div`
@@ -216,6 +225,14 @@ export const ListCount = styled.div`
 	}
 `;
 
+export const HeaderPaginationContainer = styled.div`
+	position: absolute;
+	display: flex;
+	left: 0;
+	top: 50%;
+	transform: translate(0, -50%);
+`;
+
 export const ListOption = styled.div`
 	display: flex;
 	gap: 10px;
@@ -620,3 +637,42 @@ export const TableActionButton = styled.button`
 	}
 `;
 
+export const SearchbarStyle = styled.div`
+    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')};
+`;
+
+export const SearchItem = styled.div`
+	display: flex;
+	align-items: center;
+	gap: 20px;
+	margin-right: 50px;
+
+	${TextInput}, ${SelectInput} {
+		height: 35px;
+	}
+	${TextInput} {
+		padding: 0 10px;
+		max-width: 400px;
+	}
+`;
+
+export 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;
+    }
+`;