🔎 키워드 기반 검색과 추천 검색어

해당 포스트는 Next.js와 Prisma 기반으로 작성했습니다.

🔗 상품 게시글과 키워드 관계

기본적으로는 게시글과 키워드는 각각이 여러 개를 소유할 수 있어서 N:M 관계입니다.

처음에는 N:M을 생각하고 구현하기가 어려워서 각 게시글에 키워드들을 공백 기준으로 분리한 문자열로 넣어서 구현했습니다.
정상적으로 동작은 하지만 상품이 늘어날수록 DB에 부담이 생기게 될거라고 생각해서 이후에 N:M 관계로 수정했습니다.

📃 모델 정의

N:M 관계이기 때문에 필연적으로 중간 테이블이 생기게 됩니다.
중간 테이블은 명시적으로 이름을 지정하고 컬럼을 추가해 줄 수 있지만 굳이 필요하지않기 때문에 암시적으로 생성하도록 놔뒀습니다.

아마도 productId, keywordId 두 개의 컬럼을 갖고 있는 테이블이 생길겁니다.

model Product {
  id          Int      @id @default(autoincrement())
  name        String   @db.VarChar(30)
  price       Int
  description String   @db.MediumText
  image       String?
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt

  keywords Keyword[]
  # ... 생략
}

model Keyword {
  id        Int      @id @default(autoincrement())
  keyword   String   @unique @db.VarChar(20)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  products Product[]
}

🛫 백엔드

• 백엔드 전체 코드
  1. 상품 생성과 키워드 등록/게시글 검색
  2. 추천 키워드들 검색

1. 상품 생성 시 키워드 등록

키워드들은 공백을 기준으로 분리해서 입력받습니다.

// async 함수 내부에 있다고 가정
// 키워드 생성 or 찾고 상품과 연결
const keywordsPromise = (keywords as string).split(" ").map((keyword) =>
  prisma.keyword.upsert({
    create: {
      keyword,
      products: {
        connect: {
          id: createdProduct.id,
        },
      },
    },
    update: {
      products: {
        connect: {
          id: createdProduct.id,
        },
      },
    },
    where: {
      keyword,
    },
  })
);

await Promise.allSettled(keywordsPromise);

2. 키워드 기준 게시글 검색

// async 함수 내부에 있다고 가정
// "records"는 상품의 상태 관련한 것이라 무시해도 됨
const keyword = req.query.keyword + "";
const findKeywordProducts = await prisma.product.findMany({
  take: offset,
  skip: page * offset,
  where: {
    keywords: {
      some: {
        keyword,
      },
    },
    records: {
      some: {
        OR: condition,
      },
    },
  },
  include: {
    _count: {
      select: {
        answers: true,
        records: true,
      },
    },
    records: {
      select: {
        kinds: true,
      },
    },
  },
  orderBy: [
    {
      createdAt: "desc",
    },
  ],
});

3. 추천 검색어 가져오기

하나 이상의 글자를 포함하는 키워드가 있는 경우에 모두 가져오는 로직입니다.

// async 함수 내부에 있다고 가정
const keywords = await prisma.keyword.findMany({
  where: {
    keyword: {
      contains: keyword,
    },
  },
  select: {
    keyword: true,
  },
});

🛬 프론트

• 프론트 코드

1. 디바운스 적용

디바운스란 연속해서 같은 요청이 들어올 경우 제일 마지막 요청만 유효하게 처리하는 방법

사용자가 연속적으로 키워드를 입력할 때는 요청을 보내지 않고 0.3초 정도 입력이 멈추면 현재까지 입력한 문자열을 백엔드로 전송해서 입력한 문자열을 포함하는 모든 키워드들을 반환해줍니다.

// debounce가 true일 경우에 키워드 검색 요청을 보내도록 처리함

// 2022/04/16 - 키워드 검색 시 디바운스 적용할 때 사용하는 변수 - by 1-blue
const [debounce, setDebounce] = useState(false);
// 2022/04/16 - 키워드 검색 시 디바운스 적용할 때 사용하는 함수 - by 1-blue
const debounceKeyword = useCallback(() => setDebounce(true), [setDebounce]);
// 2022/04/16 - 키워드 검색 시 디바운스 적용 - by 1-blue
useEffect(() => {
  const timerId = setTimeout(debounceKeyword, 300);

  return () => {
    clearTimeout(timerId);
    setDebounce(false);
  };
}, [debounceKeyword, keyword, setDebounce]);

2. 포커싱 문제 해결

<input />에 포커스를 주면 추천 검색어가 랜더링되고, 포커스를 떠나면 onFocus와 onBlur를 이용해서 추천 검색어들이 사라지도록 만들었습니다.
하지만 추천 검색어를 클릭하는 순간에 추천 검색어의 <input />에서 포커스가 없어져서 추천 검색어가 사라져서 검색이 안되는 문제가 발생했습니다.

문제를 해결하기 위해서 이전에 사용해봤던 모달 영역외 클릭 시 닫는 기능을 가져와서 적용했습니다.
<input />과 추천 키워드를 감싸는 wrapper에 넣어두고 wrapper를 제외한 영역을 클릭하면 추천 검색어가 사라지도록 구현해서 문제를 해결했습니다.

// 2022/04/16 - 키워드 값 - by 1-blue ( react-hook-form의 useForm() )
const keyword = watch("keyword");
// 2022/04/16 - 키워드 포커스 여부 및 관련 키워드 보여줄지 결정할 변수 - by 1-blue
const [isFocus, setIsFocus] = useState(false);
// 검색창과 추천 검색어를 자식으로 가지는 element
const wrapperRef = useRef<HTMLDivElement>(null);
// 2022/04/16 - 영역외 클릭 시 추천 키워드 창 닫기 - by 1-blue
const handleCloseModal = useCallback(
  (e: any) => {
    if (
      isFocus &&
      (!wrapperRef.current || !wrapperRef.current.contains(e.target))
    )
      setIsFocus(false);
  },
  [isFocus, setIsFocus, wrapperRef]
);
// 2022/04/16 - 추천 키워드 창 닫기 이벤트 등록 - by 1-blue
useEffect(() => {
  setTimeout(() => window.addEventListener("click", handleCloseModal), 0);
  return () => window.removeEventListener("click", handleCloseModal);
}, [handleCloseModal]);

// ... 나머지 생략

• 영역외 클릭 시 모달 닫기 참고한 사이트