🚗 전적검색서비스
주로 이용하는 전적검색 서비스를 보면 다음과 같이 검색을 할 수 있는 창이 뜬다.
이를 참고해서 Figma를 이용하여 화면 구성을 했다.
우선적으로 검색 기능을 구현하기 위해서 뒷 배경, 검색창을 구현해보겠다.
이를 구현하기 위해 필요하는 기능을 먼저 생각해보겠다.
우선 가장 첫 화면에 보이는 것과 마찬가지로 검색어를 입력할 수 있는 기본 검색 바 컴포넌트가 필요하다.
다음으로는 검색창을 클릭했을 때 최근 검색한 소환사가 뜨도록 해야한다.
이후 Hide on bush를 검색한다고 했을 때 Hide라고 검색하면 해당 아이디가 자동완성 되도록 한다.
이후 해당 소환사 또는 챔피언을 클릭했을 때 챔피언 분석 페이지로 이동할 수 있도록 해야한다.
크게 위의 4가지 기능을 중심적으로 검색창을 개발하도록 해보겠다.
🚓 MainPage
가장 처음 들어갔을 떄 볼 수 있는 페이지를 MainPage라고 한다.
검색창, 최근 검색된 소환사 등의 내용들은 가장 처음 페이지에 들어가야 하므로 MainPage에 들어가야한다.
리액트의 특성상 대부분의 내용들이 컴포넌트화되어 들어가기 때문에 MainPage컴포넌트를 생성하여 App.js에서 동작하도록 한다.
pages라는 폴더를 src디렉토리 하위 디렉토리로 생성하고 해당 디렉토리에 MainPage파일을 우선적으로 생성한다.
MainPage를 컴포넌트로 사용하기 위해 index.js에서 export 해줘야 하므로 index.js파일도 생성해준다.
이후 MainSearch를 컴포넌트로 포함해야하므로 다음으로 넘어가도록 하겠다.
🚕 MainSearch
위의 기능을 포함하는 검색창을 구현하기 위해 모든 컴포넌트를 포함할 파일을 생성해야한다.
이를 MainSearch라고 명명하고 해당 부분에서 기능들을 구현해보겠다.
해당 컴포넌트는 MainPage의 가장 위에 나오기 떄문에 MainSearch및 MainPage의 구성을 아래와 같이 하면 된다.
[ MainPage.jsx ]
import { MainSearch } from 'components/search';
const Mainpage = () => {
return (
<div>
<MainSearch />
</div>
);
};
export default Mainpage;
가장 먼저 백 이미지를 담당해줄 이미지를 검색했다.
아래의 그림은 리그오브레전드 공식 홈페이지에서 다운로드 받을 수 있다.
해당 이미지를 백 이미지로 설정하여 추가한다.
마찬가지로 svg파일로 생성하였다.
jpg또는 png파일을 svg파일로 만들기 위해서는 아래를 참고하면 된다.
https://2t-hong.tistory.com/171
BACK_IMAGE를 추가했을 때 화면은 아래와 같다.
좀 잘리긴 했지만 이미지가 잘 들어간 것을 알 수 있다.
이제 이미지를 배경으로 하면서 검색을 할 수 있도록 구현을 해보자.
그러기 위해 components/img에 생성해두었던 image.jsx를 사용한다.
const Image = ({ src, width = 'auto', height = 'auto', alt = 'image', ...props }) => {
return (
<img
src={src}
width={width}
height={height}
alt={alt}
style={{ objectFit: 'contain' }}
{...props}
/>
);
};
export default Image;
각각의 prop들을 이용하여 이미지의 URL, 너비 높이, 대체 텍스트를 설정할 수 있다.
검색창의 역할을 하는 내용이므로 SearchDiv안에 해당 컴포넌트들을 포함하도록 만들겠다.
각각의 화면을 보기 쉽도록 Padding 등을 조정했다.
다음에는 SearchBar을 구현해보겠다.
'LOLPAGO > 프론트엔드' 카테고리의 다른 글
[LOLPAGO] 검색 창 구성(3) (0) | 2024.03.06 |
---|---|
[LOLPAGO] 검색 창 구성(2) (0) | 2024.03.06 |
[LOLPAGO] React 설치 및 Header 구성 완료(6) (0) | 2024.02.27 |
[LOLPAGO] React 설치 및 Header 구성(5) (0) | 2024.02.27 |
[LOLPAGO] React 설치 및 Header 구성(4) (0) | 2024.02.26 |