[LOLPAGO] 검색 창 구성(2)

🚗 파일생성

SearchBar를 구성하기위해 파일을 생성해준다.

 

또한 컴포넌트로 사용해야하므로 index.js에도 마찬가지로 export해준다.

 

SearchBar에서 담당해야 할 역할은 검색 바의 UI를 구현한다.

 

마찬가지로 styled-components를 이용하여 UI를 구성하고 검색 아이콘을 통해 클릭했을 때 검색이 되도록 설정한다.

 

 

 

🚓 Icon

검색 이미지는 돋보기 모양을 사용한다.

 

images폴더 아래에 Search라는 svg파일을 생성해두었다.

 

 

 

우선은 Search1를 사용하겠다.

 

이런 Icon들을 사용하기 위해 component/icon 폴더를 생성하고 스타일을 지정해준다.

 

Icon 컴포넌트를 사용한 아이콘들은 커서를 가까이 가져갔을때 커서의 모양이 선택 모양으로 바뀌도록 설정한다.

 

크기 또한 검색 버튼에 맞도록 넣어준다.

 

검색창의 Div를 아래와 같이 설정해주었으므로 아이콘의 크기를 20px 정도로 맞춰준다.

 

const SearchDiv = styled.div`
	width: 30%;
	height: 28px;
	box-sizing: border-box;
	border-radius: 5px;
	background: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 8px;
`;

 

또한 숫자로 픽셀값을 입력하게 되면 자동적으로 px로 바뀔 수 있도록 설정한다.

 

최종적으로 다양한 기능을 포함한 Icon 설정은 다음과 같다.

 

import styled from 'styled-components';

const IconImg = styled.img`
	width: ${({ width }) => (typeof width === 'string' ? width : width + 'px')};
	height: ${({ height }) => (typeof height === 'string' ? height : height + 'px')};
	display: inline-block;
	margin: 0;
	${({ $flipped }) => $flipped && 'transform: rotate(180deg);'}
	cursor: pointer;
`;

const Icon = ({ src, width = 24, height = 24, alt = 'icon', flipped = false, ...props }) => {
	return (
		<IconImg
			src={src}
			width={width}
			height={height}
			alt={alt}
			$flipped={flipped}
			{...props}
		></IconImg>
	);
};

export default Icon;

 

 

 

 

🚕 SearchBar

이를 사용하여 SearchBar를 마저 구현하면 아래와 같다.

 

import { styled } from 'styled-components';
import { SEARCH1 } from 'assets/images';
import { Icon } from 'components/icon';


const SearchDiv = styled.div`
	width: 30%;
	height: 28px;
	box-sizing: border-box;
	border-radius: 5px;
	background: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 8px;
`;

const StyledInput = styled.input`
	width: calc(100% - 24px);
	font-family: 'MediumFont';
	font-size: '14px';
	line-height: '20px';
	border: none;
	outline: none;
`;

const SearchBar = ({
	searchInput,
	setSearchInput,
	placeholder = '챔피언 검색(가렌..)',
	...props
}) => {
	return (
		<SearchDiv {...props}>
			<StyledInput
				value={searchInput}
				placeholder={placeholder}
				onChange={(e) => setSearchInput(e.target.value)}
			/>
			<Icon src={SEARCH1} width={20} height={20} alt="search" />
		</SearchDiv>
	);
};

export default SearchBar;

 

 

구현된 화면은 다음과 같다.