[TIL] 230915

Nextjs

리팩토링 및 컴포넌트 재사용

다른 팀원분이 적용하신 디자인을 통일성있게 하기 위해 컴포넌트를 분리하여 다음과 같이 정렬 및 검색 기능을 수정했다.

• 검색

<div className="pt-2 sm:pt-0">
      <form onSubmit={handleSubmit} className="flex select-search-form">
        <Select
          defaultValue="movie"
          onChange={handleSelectChange}
          options={[
            { value: 'movie', label: '영화' },
            { value: 'person', label: '인물' }
          ]}
        />
        <input
          className="custom_input"
          id="search"
          name="search"
          type="text"
          placeholder="검색어를 입력하세요"
          value={searchInput}
          onChange={handleChange}
        />

        <button type="submit" className=" font-bold pl-4 rounded ml-2">
          <SearchLined />
        </button>
      </form>
      <ul
        className={`overflow-auto h-44 absolute w-full ${
          searchInput ? 'bg-white' : 'bg-transparent hidden'
        }  rounded z-10 transition-colors duration-300 ${offsearchState ? 'bg-transparent hidden' : ''}`}
      >
        {!!searchResults &&
          searchResults.map((result, i: number) => (
            <li key={`searchResultKey_${i}`}>
              <button type="button" onClick={() => handleClick(result)}>
                {searchType === 'movie' ? result.title : result.name}
              </button>
            </li>
          ))}
      </ul>
    </div>

• 정렬

const Sort = ({
  sortingOption,
  setSortingOption
}: {
  sortingOption: string;
  setSortingOption: React.Dispatch<React.SetStateAction<string>>;
}) => {
  const handleSortingChange = (value: string) => {
    setSortingOption(value);
  };

  const sortingOptions = [
    { value: 'popularity', label: '인기순' },
    { value: 'primary_release_date', label: '최신순' },
    { value: 'vote_average', label: '별점순' }
  ];

  return (
    <div className="w-28 mr-auto">
      <Select
        defaultValue="popularity"
        className="w-28 mr-auto"
        onChange={handleSortingChange}
        options={sortingOptions}
      />
    </div>
  );
};

Vercel

region 확인하기

Project setting -> Functions에서 확인 가능하다.