@toss hangul을 이용한 검색 컴포넌트 구현하기

2022.10.14

dev

blog

react

nextjs

yarn add @toss/hangul

AS-IS: 현재 포스트 검색창

TO-BE: hangul이 적용된 검색창

import React, { useState, useEffect } from "react";
// ...
import { chosungIncludes, hangulIncludes } from "@toss/hangul"; // @toss/hangul import

import Layout from "@/components/layout";
import PostCard from "@/components/pages/blog/PostCard";
import SearchBar from "@/components/pages/blog/SearchBar";
import TagSelector from "@/components/pages/blog/TagSelector";

export interface Post {
  id: string;
  properties: any;
  [key: string]: any;
}

const Blog: React.FC = ({ posts }: any) => {
  const tags = ["dev", "design", "life", "blog"];
  const [selectedTag, setSelectedTag] = useState<string>("All");
  const [filteredPosts, setFilteredPosts] = useState<Post[]>(posts);
  const [searchValue, setSearchValue] = useState("");

  const filteredBlogPosts = filteredPosts.filter((frontMatter) => {
    const postTitle = frontMatter.properties.Name.title[0].plain_text;
    const searchContent = postTitle;

    // AS-IS
    // return searchContent.toLowerCase().includes(searchValue.toLowerCase());

    // TO-BE
    return ( 
      chosungIncludes(searchContent.toLowerCase(), searchValue.toLowerCase()) || // 초성 검색용
      hangulIncludes(searchContent.toLowerCase(), searchValue.toLowerCase()) // 한글 검색용
    );
  });

  const displayPosts =
    filteredPosts.length > 0 && !searchValue
      ? filteredPosts
      : filteredBlogPosts;

// ...

  return (
    <Layout>
...
          <div
            id="top-bar"
            className="flex justify-between items-center flex-wrap gap-4"
          >
            <TagSelector
              selectedTag={selectedTag}
              handleTagClick={handleTagClick}
              tags={tags}
            />
            <SearchBar
              onChangeHandler={(e) => setSearchValue(e.target.value)}
            />
          </div>

          {displayPosts.length > 0 ? (
            displayPosts.map((post: Post, idx: number) => (
              <PostCard key={idx} post={post} />
            ))
          ) : (
            <div className="h-80 flex justify-center items-center text-xl">
              Noting Found
            </div>
          )}
        </div>
...
    </Layout>
  );
};

// ...

export default Blog

├── src
│   ├── chosungIncludes.spec.ts
│   ├── chosungIncludes.ts // -> chosungIncludes
│   ├── constants.ts
│   ├── disassemble.spec.ts
│   ├── disassemble.ts // -> disassembleHangulToGroups, disassembleHangul
│   ├── disassembleCompleteHangulCharacter.spec.ts
│   ├── disassembleCompleteHangulCharacter.ts
│   ├── hangulIncludes.spec.ts
│   ├── hangulIncludes.ts
│   ├── index.ts
│   ├── josa.spec.ts
│   ├── josa.ts
│   ├── utils.spec.ts
│   └── utils.ts // 
├── tsconfig.esm.json
└── tsconfig.json