[Kream 클론 프로젝트] 상품 검색 & 정렬 기능
목표
상품의 검색과 옵션별 정렬이 가능한 상품 목록 페이지 구현
과정
1. 상품 목록(메인) 페이지 UI
1) Kream이 상품 거래 사이트이다보니 각 상품마다 동일하게 반복되는 양식들이 많았는데, 이 부분들을 전부 컴포넌트로 만들고 재사용함으로써 코드의 길이를 많이 줄일 수 있었다. 특히 2차 프로젝트에서는 styled components를 사용하면서 각 페이지마다 js파일의 코드 양이 두배로 많아지는 바람에 한번 작성하고나면 알아보기가 힘들었는데, React덕분에 UI를 매번 만들 필요 없이 재사용할 수 있어 편리했다.
컴포넌트화 한 부분들🔻
2) 원래는 Kream의 사이트처럼 상품 사진의 배경 색을 다양하게 만들고 싶었는데, 리스트의 각 상품 정보들을 컴포넌트로 만들고 map 함수를 사용해 반복해서 보여주다보니 각각의 상품마다 다른 색을 적용하기 힘들어서 대신 배경색을 랜덤으로 지정해서 보여줄 수 있도록 했다. 원하는 색의 색상명을 배열 안에 넣고, 랜덤으로 생성한 숫자를 index로 색 배열에 접근해서 가져오는 함수를 background color에 설정하면 아래처럼 같은 컴포넌트를 반복 사용했더라도 다양한 배경색을 보여줄 수 있다.
결과🔻
코드🔻
// (...)
const backgroundColors = [
'lavender',
'lavenderblush',
'linen',
'powderblue',
'thistle',
];
const getRandomColor = () => {
return backgroundColors[Math.floor(Math.random() * backgroundColors.length)];
};
const ItemImg = styled.img`
// (...)
background-color: ${getRandomColor};
`;
2. 상품 검색 기능
처음 검색 기능을 담당하게 되고 나는 예전 인스타그램 클론 프로젝트때 했던 키워드 검색과 유사한 기능이라고 생각했다. 그래서 우선 전체 상품 목록을 받아온 후 프론트 단에서 검색어에 해당하는 내용만 걸러 보여주면 되는 줄 알고 filter와 includes 메서드를 사용해서 구현해놓았는데, 백엔드 팀원 분께서 내가 검색바 기능을 테스트할 때 요청이 오지 않는 걸 알아채시고 어떤 방식으로 구현해야하는지 다시 알려주셨다. 검색 기능 구현에서 백엔드와 협업할 때 프론트가 할 일은 사용자가 검색할 단어를 입력하면 그 값을 query string으로 전달해서 검색어를 포함하는 데이터만 다시 받아와 보여줄 수 있도록 하는 것이었다.
코드🔻
search bar👇
// (...)
const SearchBar = ({ handleInput }) => {
return (
<SearchWrapper onSubmit={handleInput}>
<Input
name="search"
type="search"
onFocus={e => {
e.target.placeholder = '';
}}
onBlur={e => {
e.target.placeholder = 'Search and Enter';
}}
autoComplete="off"
/>
</SearchWrapper>
);
};
export default SearchBar;
item list👇
// (...)
const ItemList = () => {
// (...)
const [userInput, setUserInput] = useState('');
const handleInput = e => {
e.preventDefault();
setUserInput(e.target.search.value);
};
useEffect(() => {
fetch(
`${BASE_URL}products?${categoryString}${priceString}${shoeSizeString}${clothString}&search=${userInput}`,
{
method: 'GET',
}
)
.then(res => res.json())
.then(data => {
setProductsList(data.product_list);
});
}, [
// (...)
userInput
]);
// (...)
export default ItemList;
결과🔻
3. 상품 정렬 기능
Kream 사이트는 사용자가 원하는 상품을 쉽게 찾을 수 있도록 인기순, 발매일순, 즉시 구매가 낮은/높은 순, 프리미엄순 등으로 상품을 정렬해 보여주는 기능을 제공하고 있는데, 검색 기능과 마찬가지로 옵션에 따라 상품 데이터를 정렬하는 것은 백엔드가 처리하기로 하셔서 프론트에서는 사용자에게 옵션을 보여줄 수 있도록 drop down형식의 input UI를 만들어 두고, 선택된 값을 백엔드에 query string으로 전달한 후 그에 맞게 정렬된 상품 리스트를 받아와 보여주는 식으로 구현했다.
코드🔻
SORT_LIST(data)👇
const SORT_LIST = [
{
id: 1,
value: 'sales',
title: '인기순',
},
// (...)
];
export default SORT_LIST;
item list👇
const ItemList = () => {
// (...)
const [optionValue, setOptionValue] = useState('sales');
useEffect(() => {
fetch(
`${BASE_URL}products?${categoryString}${priceString}${shoeSizeString}${clothString}&search=${userInput}&sort=${optionValue}`,
{
method: 'GET',
}
)
.then(res => res.json())
.then(data => {
setProductsList(data.product_list);
});
}, [
// (...)
optionValue
]);
return (
// (...)
<SortingWrapper>
<Title
onChange={e => {
setOptionValue(e.target.value);
}}
>
{SORT_LIST.map(title => {
return (
<option key={title.id} value={title.value}>
{title.title}
</option>
);
})}
</Title>
</SortingWrapper>
// (...)
);
};
export default ItemList;
결과🔻
회고
이번이 백엔드와 함께하는 두 번째 프로젝트였는데, 하면 할수록 개발에서 소통이 얼마나 큰 비중을 차지하는지 깨닫게 되는 것 같다. 특히 이번 프로젝트는 이력서를 작성해야하는 기간과 겹쳐서 급한 마음에 나 혼자 빨리 처리하려다 오히려 두번 작업해야하는 일이 생겨버려서 더 그랬다. 사실 이제까지는 내성적인 성격을 핑계로 회의나 일정 공유보다는 개인 작업에 더 열중하기도 했었는데 이번 프로젝트가 앞으로 개발자로서 내가 해야하는 일들의 우선 순위에 대해 다시 생각해보게 된 계기가 되어주었다😌