✨ 피드 검색 모킹 API Handler 추가

[BangDori]

CheckList

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

작업 이유

• 피드 검색 Mock API 구현

작업 사항

1️⃣ Feed Mock Data

Mock Data에는 현재 Feed, Image 타입과 Feed Mock 데이터를 생성하는 메서드가 함께 위치하고 있습니다.

Mock Data와 API의 경우 프로덕션 환경에서는 적용되지 않지만 Feed와 Image 타입의 경우에는 프로덕션 환경의 코드에도 적용되는 부분이라 다음주 토요일 회의를 통해 어떤 식으로 관리할지에 대한 이야기가 필요할 것 같습니다.

2️⃣ Feed API

현재 도메인 주소는 http://api.example.com 으로 해두었습니다.

검색 API의 경우 client side에서 사용하는 것이 적절하다고 생각되어 browser단에서 가져올 수 있는 worker에 추가하였습니다.

또한 더 정확한 검색을 위해 fuse.js 라이브러리를 devDependencies에 추가하였으며, 검색 키워드에는 content와 user.username을 적용하였습니다. 검색 결과는 아래와 같습니다.

"lorem ipsum" 검색 결과

"안녕하세요" 검색 결과

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

• Mock Data에 적용된 타입의 위치를 다음주 토요일 회의에서 정해야 함을 인지하셨나요?
• 혹시 테스트를 원하신다면 아래의 SearchBar 컴포넌트를 추가하신 후에 page.tsx에 적용하시면 됩니다!

'use client';

import { useEffect, useState } from 'react';

export function SearchBar() {
  const [query, setQuery] = useState('');

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

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

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

발견한 이슈

• 없음

[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-12.d1rrzjx2upcmxq.amplifyapp.com

[suhwan2004]

고생많으셨습니다! 먼저 MSW틀을 잡아주셔서 압도적으로 감사할 따름입니다... 짧게 질문 몇개 달아두었어요!

mockdata의 타입(Feed, Image...)의 파일 위치의 경우, mocks에 types라는 폴더를 만들어서 거기서 처리를 해도 괜찮을 것 같긴 한데... 일단 제 사견을 그렇습니다

[Legitgoons]

수고 많으셨습니다. 검색을 돕는 fuse.js는 처음 봤는데 상당히 흥미롭네요. 저희 서비스 특성 상 한글 검색이 많아질 수 있겠다는 생각이 드는데 toss의 es-hangul을 도입하는것도 고려해볼만 한 것 같습니다.

리뷰는 수환님이 세세하게 해주셔서 크게 첨언할 부분이 없네요. 병합하셔도 좋습니다!