feat(fe): add search function in code editor

[seoeun9]

Description

코드에디터 내의 검색 기능을 추가합니다.

AS IS : 콘텐츠 전체 영역 검색만 가능, 코드 입력란 focus 시 검색 바 뜨지 않음.

TO BE : 코드 입력란 focus 시 코드 내 검색 기능 추가. 이를 위해 @codemirror/search 패키지를 사용했습니다.

• 디자인의 경우 임의로 만든 거라 의견 주시면 반영하겠습니다.
• Dom에 직접 access한 이유 : <ReactCodeMirror> 에디터가 붙을 빈
  하나만 렌더링하고 그 안 쪽은 CodeMirror가 직접 EditorView를 만들어 DOM을 채운다고 합니다. (React가 소유하거나 관리하지 않는 Dom 영역입니다.)

Additional context

---

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines
• Read the Contributing Guidelines and follow the Commit Convention
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

closes TAS-3088

Summary by CodeRabbit

• New Features
  • Added search controls to the code editor, with literal matching, previous and next match navigation, and a close button. The search field focuses and selects its contents when opened, and keyboard shortcuts can navigate between matches.
• Style
  • Styled the border of the editor’s search panel.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 730b72b5-0d0a-4bde-b2bd-937270f25a5b

---

📥 Commits

Reviewing files that changed from the base of the PR and between 15affde and ec9fe17.

---

📒 Files selected for processing (2)

• apps/frontend/components/CodeEditor.tsx
• apps/frontend/libs/editorSearch.ts

---

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/frontend/components/CodeEditor.tsx

---

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

---

📝 Walkthrough

Walkthrough

CodeEditor now provides a top-positioned search panel with literal matching, query synchronization, and controls for navigating between matches and closing the panel.

Changes

Editor search

Layer / File(s)	Summary
Search panel and dependencies apps/frontend/libs/editorSearch.ts, apps/frontend/package.json, pnpm-workspace.yaml	Adds a CodeMirror search panel with a literal query input, previous and next controls, a close button, and keyboard handling. The extension configures literal matching and places the panel at the top. The frontend adds @codemirror/search and pins @codemirror/view to 6.38.1.
Editor integration apps/frontend/components/CodeEditor.tsx	Registers editorSearch in the editor extensions and adds a bottom border to the top panels.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant CodeEditor
  participant SearchPanel
  participant CodeMirrorSearchState
  CodeEditor->>SearchPanel: create top search panel
  User->>SearchPanel: enter query
  SearchPanel->>CodeMirrorSearchState: update literal query
  CodeMirrorSearchState-->>SearchPanel: synchronize query
  User->>SearchPanel: navigate to next or previous match
  SearchPanel->>CodeMirrorSearchState: navigate between matches

Loading

---

Merge Risk: ⚪ Minimal · up to ec9fe

The editor gains literal in-code search with query synchronization and match navigation. The dependency and panel integrations are consistent, with no concrete user-facing failure identified.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 15aff

The inspected search implementation stays within the existing browser editor and adds no direct document-writing, network, or persistence path. No introduced security issue was established. Clipboard restrictions and default shortcuts in the underlying editor library remain unverified.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The direct capability added by the inspected helper is browser-local search interaction bound to an existing editor view. Its source contains no network, storage, credential, or privileged-service call, so no cross-service exposure is established by this change.

Trust Boundaries and Controls

• observed — The existing readOnly forwarding and conditional copy/paste/cut handlers remain registered. The custom panel nevertheless creates a separate editable query input. Coverage of that input by the underlying clipboard controls was not established, nor was an introduced bypass demonstrated against base behavior.

---

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: adding search functionality to the frontend code editor.
Linked Issues check		Issue #123 is closed and supplies historical context only. No active directly linked issue supplies coding requirements for this pull request. The current objective adds code-editor search, and `CodeE…
Out of Scope Changes check		The changes stay within the stated code-editor search scope. editorSearch.ts implements the search panel and navigation controls. CodeEditor.tsx enables the extension and styles the panel. The dep…

---

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

---

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

apps/frontend/components/CodeEditor.tsx

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

---

apps/frontend/libs/editorSearch.ts

ESLint skipped: the matched ESLint configuration already failed (missing-dependency).

---

---

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.}

[skkuding-bot]

✅ Syncing Preview App Succeeded

Application: frontend
Revision: 15affde4b0e49cb80c276ed1ea57b88fe4ab9655
Health Status: Healthy

Open Preview | View in Argo CD

[howso245-dot]

자잘한 수정사항과 LGTM
수고하셨습니다~

[skkuding-bot]

✅ Syncing Preview App Succeeded

Application: frontend
Revision: ec9fe1704fcd8961e57529a6fd683a02f1c6b5c5
Health Status: Healthy

Open Preview | View in Argo CD

[egg-zz]

LGTM~