Fix/#99 검색어 하이라이팅 시 정규식 특수문자 입력 에러(SyntaxError) 해결

[leeleeleeleejun]

#️⃣연관된 이슈

• [BUG] 검색어 하이라이팅 시 정규식 특수문자 입력 에러(SyntaxError) 해결 #99

📝작업 내용

장소 검색 기능 사용 시, 정규표현식 예약어(특수문자) 입력으로 인해 발생하는 버그를 수정했습니다.

1. 검색어 하이라이팅 로직 수정 (highlightWord)

문제 상황
검색창에 [, ( 등 정규식에서 특수한 기능을 담당하는 문자를 입력할 경우, new RegExp() 생성 과정에서 문법 오류(SyntaxError: Invalid regular expression)가 발생되었습니다.

해결 방안
사용자 입력값을 정규식 패턴으로 변환하기 전에, 특수문자를 일반 문자열로 인식하도록 이스케이프(Escape) 처리하는 유틸리티 함수(escapeRegExp)를 적용했습니다.

예시: 사용자가 [ 입력 시 -> 내부적으로 \[로 변환하여 정규식 문법이 아닌 문자 [ 자체로 매칭되도록 수정

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

Summary by CodeRabbit

• 새로운 기능

  • 검색 페이지에 한국어 플레이스홀더("식당을 검색해주세요") 추가

• 개선 사항

  • 검색어 하이라이팅 로직 개선으로 특수문자 포함 검색어의 안정성 향상
  • 컴포넌트 사용 시 호환성 및 타입 관련 정렬로 검색 결과 렌더링 신뢰성 향상

[coderabbitai]

Walkthrough

SearchPlaceListItem의 prop 타입을 BasePlace로 변경하고, 텍스트 하이라이팅에 사용할 정규식 이스케이프 유틸(escapeRegExp)과 highlightWord 시그니처를 (keyword, text)로 리팩터링했습니다. 검색 페이지 사용 컴포넌트에 한국어 placeholder가 추가되었습니다.

Changes

Cohort / File(s)	Summary
타입 및 하이라이팅 리팩터링 apps/web/app/_components/SearchPage/SearchPlaceListItem.tsx	Props 대신 BasePlace 타입을 직접 import하고, escapeRegExp 유틸을 추가하여 highlightWord 시그니처를 (keyword, text)로 변경 및 정규식 이스케이프 적용(텍스트 분할/하이라이팅 로직 변경).
검색 입력 placeholder 추가 apps/web/app/places/search/page.tsx	SearchPage 호출에 한국어 placeholder prop '식당을 검색해주세요'을 추가함(로직 변경 없음).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Refactor/#94 SearchPage 데이터 흐름 개선 #95: SearchPage 데이터 타입 리팩터링(및 BasePlace 도입)과 직접 연관되어 SearchPlaceListItem의 타입 변경과 연결됩니다.

Poem

🐰 정규식 모험길에 깃발 꽂고,
특수문자 살금살금 숨바꼭질 잡고,
BasePlace로 옷 갈아입은 채,
"식당을 검색해주세요" 속삭이며,
토끼는 깡충—코드에 축배를! 🥕✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경사항의 핵심 내용을 명확하게 설명하고 있습니다. 검색어 하이라이팅 시 정규식 특수문자 입력으로 인한 SyntaxError 해결이라는 주요 변화를 정확하게 반영합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#99

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/web/app/_components/SearchPage/SearchPlaceListItem.tsx (1)

1-16: ⚠️ Potential issue | 🟡 Minor

SearchPage와의 순환 의존성을 import type으로 해결해야 합니다.
SearchPage가 SearchPlaceListItem을 import하고(line 5), SearchPlaceListItem이 SearchPage에서 BasePlace를 import하는 순환 구조입니다. BasePlace는 type-only export이고 타입 어노테이션으로만 사용되므로, import type으로 명시하여 순환 의존성을 명확히 제거하는 것이 TypeScript 모범 사례입니다.

💡 수정 방법

-import { BasePlace } from './SearchPage'
+import type { BasePlace } from './SearchPage'