240801 TIL_최종 프로젝트_UI

UI 작업, 쓰로틀링, 디바운싱, 검색 결과 없을 때 처리하기

이... 이게 머야?

Link 가 이따위로 나와서 이거 뭐지 했는데 임포트가 무슨 아이콘으로 되어있다 하^^ next/link인지 잘 확인하기...

type Market = Tables<'markets'>;
type LocalFood = Tables<'local_food'>;

const SearchBar = ({ isOpen, setIsOpen }: SearchBarProps) => {
  const pathName = usePathname();
  const [searchTerm, setSearchTerm] = useState<string>('');
  const [response, setResponse] = useState<
    (Tables<'local_food'> | Tables<'markets'>)[] | null
  >(null);

타입 관련 두 개 이상의 정보를 받을 경우

    <div className="mx-2 flex flex-col gap-1">
        {marketSide &&
          response &&
          (response.length > 0 ? (
            response.map((item) => (
              <Link
                href={`/market/${(item as Market).id}`}
                key={(item as Market).id}
              >
                <div className="cursor-pointer hover:bg-gray-100 p-2">
                  {(item as Market).시장명}
                </div>
              </Link>
            ))

맵 돌린 아이템에게 as 타입 지정 하기

전체적으로 디자이너님과 UI 검사 사아아악 받았다. ~~! 안 됐던 부분이 쓱싹쓱싹 되고 있음. ... UT가 다가온다 8-8~ 화이팅...