✨ 사용자 검색 모킹 API Handler 추가

[BangDori]

CheckList

• gap을 이용하여 자식 요소간의 간격을 제어하였나요? (iOS 14 미지원으로 gap -> space between 적용)

작업 이유

• 유저 검색 Mock API 구현

작업 사항

Feed API와 동일한 방식으로 mock api를 작성하였습니다.

기존에 Feed API 검색어에 대한 쿼리 변수명을 Search API Spec에 나온대로 수정(query -> target)하였습니다.

• 의찬님이 저번에 알려주신 es-hangul 라이브러리를 적용하려고 문서를 찾아보았는데, 현재 모킹 데이터가 한글 기반이 아닌 영어로만 이루어져있다보니 es-hangul의 장점을 극대화하기 어렵다고 판단하여 기존에 사용하고 있었던 fuse 라이브러리를 적용하였습니다.

• Feed 모킹 데이터에 포함된 User 정보가 User 모킹 데이터의 인터페이스가 동일하여 Feed 모킹 데이터의 User가 User 모킹 데이터를 가르키도록 수정하였습니다.

리뷰어가 중점적으로 확인해야 하는 부분

• 사용자 검색 모킹 API에 대한 테스트는 아래 코드로 확인하실 수 있습니다!

'use client';

import { useEffect, useState } from 'react';

export function SearchBar() {
  const [target, setTarget] = useState('');

  useEffect(() => {
    (async () => {
      if (target.length < 2) return;

      const response = await fetch(`http://api.example.com/v2/users?target=${target}`);
      const result = await response.json();
      console.info(result);
    })();
  }, [target]);

  return <input value={target} onChange={(e) => setTarget(e.target.value)} />;
}

발견한 이슈

• 수환님 PR 병합하시면 병합된 커밋에 대해 cherry-pick 이용해서 가져와서 병합하겠습니당

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-14.d1rrzjx2upcmxq.amplifyapp.com

[suhwan2004]

고생하셨습니다! 깔끔하게 짜주셔서 뭔가 크게 여쭤볼게 없네요ㅎ.ㅎ

[Legitgoons]

수고많으셨습니다. 병합하셔도 좋습니다!