MINE - 메인 페이지 1. MainBar

Byeonghyeon·2024년 5월 9일

MINE next.js

MINE

목록 보기

3/10

MINE 홈페이지에 접속하면 제일 먼저 보게되는 화면이다.

페이지의 구성은 크게 카테고리 정렬, 검색 기능을 담당하는 MainBar, 상품 목록을 나열해 표시해주는 AuctionList이다.

MainBar

카테고리 정렬

const [selectedCategory, setSelectedCategory] = useRecoilState(CategoryAtom);

먼저 Recoil을 이용해 사용자가 선택한 카테고리를 저장하였다.

<select className="border rounded-md py-1 px-2" value={selectedCategory} onChange={categoryChange}>
              <option value="all" selected>전체</option>
              <option value="의류">의류</option>
              <option value="전자기기">전자기기</option>
              <option value="유아">유아</option>
              <option value="취미/게임/음반">취미/게임/음반</option>
              <option value="스포츠/레저">스포츠/레저</option>
              <option value="식품">식품</option>
              <option value="주방용품">주방용품</option>
              <option value="반려동물">반려동물</option>
              <option value="티켓">티켓</option>
              <option value="미용">미용</option>
</select>

select 태그를 이용해 카테고리를 지정한다.

const categoryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
      const selectedCategoryValue = event.target.value;
      setSelectedCategory(selectedCategoryValue);
      if(selectedCategoryValue === "all" ){
        router.push("/");
      }
      else {
        const encodedCategory = encodeURIComponent(selectedCategoryValue);
        if(searchKeyword != "") {
          router.push(`/${encodedCategory}/${selectedSearchCategory}/${searchKeyword}`);
        }
        else {
          router.push(`/${encodedCategory}`);
        }
        
        
      }
    }

사용자가 카테고리를 선택하면 ChangeEvent를 통해 option 태그의 value를 저장한다.

이후 선택한 카테고리에 맞는 페이지로 이동시키는데, 사용자가 '전체'를 선택하면 기본 페이지 '/'로 이동시키고 그 외 다른 카테고리를 선택하면 '/[선택한 카테고리]' 페이지로 이동한다.

이 때 카테고리의 value가 한글로 되어 있기 때문에 Next.JS의 동적 라우팅을 이용해 페이지 주소를 형성하게 되면 값이 깨지는 문제가 발생하였다.

const encodedCategory = encodeURIComponent(selectedCategoryValue);

이를 방지하기 위해 인코딩 과정을 거쳤다.

검색

검색의 경우 '제목', '본문', '제목+본문' 3가지의 검색 범위를 설정할 수 있다.

검색 범위를 설정하는 방법은 위의 카테고리 선택과 같다.

<input
              type="text"
              className="border rounded-md py-1 px-2 mr-2"
              placeholder="검색어를 입력하세요"
              id="searchKeyword" name="searchKeyword"
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
              onKeyDown={handleKeyPress}
            />
<button className="bg-gray-500 text-white py-1 px-4 rounded-md hover:bg-gray-600" onClick={searchBtnClick}>
              검색
</button>