써치 페이지#613
Open
andless2004 wants to merge 17 commits into
Open
Conversation
전체 요약이 PR은 백엔드와 프론트엔드에 전역 검색 기능을 도입합니다. Django 검색 앱을 생성하여 프로젝트, 서랍, 작업을 대상으로 검색 API를 제공하고, 프론트엔드에 검색 입력, 필터링, 결과 표시 컴포넌트를 추가합니다. 변경 사항
순서도sequenceDiagram
actor User
participant SearchComp as Search Component
participant FilterComp as Filter Component
participant FrontendAPI as Frontend API Client
participant BackendView as Backend GlobalSearchView
participant SearchService as Search Service
participant Database as Database
participant Serializer as Serializer
User->>SearchComp: Enter search query
SearchComp->>SearchComp: Debounce (1s)
SearchComp->>FrontendAPI: GET /search/?keyword=query&scope=7
FrontendAPI->>BackendView: HTTP GET request
BackendView->>SearchService: global_search(query, scope)
SearchService->>Database: Query Project (icontains)
Database-->>SearchService: Project results
SearchService->>Database: Query Drawer (icontains)
Database-->>SearchService: Drawer results
SearchService->>Database: Query Task (icontains)
Database-->>SearchService: Task results
SearchService->>Serializer: Serialize results
Serializer-->>SearchService: Serialized data
SearchService-->>BackendView: {project, drawer, task}
BackendView-->>FrontendAPI: JSON response
FrontendAPI-->>SearchComp: SearchResponse
SearchComp->>User: Display results
User->>FilterComp: Apply filters
FilterComp->>SearchComp: Update filter state
SearchComp->>User: Update display
예상 코드 리뷰 난이도🎯 4 (복잡함) | ⏱️ ~45분 관련된 가능성 있는 PR들
제안된 레이블
제안된 리뷰어
축하 시
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
frontend/src/components/sidebar/Middle.tsx (1)
1-1:⚠️ Potential issue | 🟡 MinorPrettier 포매팅 수정 필요
pnpm format:write를 실행하세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/sidebar/Middle.tsx` at line 1, This file fails Prettier formatting; run the project's formatter (pnpm format:write) to reformat frontend/src/components/sidebar/Middle.tsx (the file that currently imports useMemo) and then review the changed import/spacing/JSX formatting, save, stage, and commit the resulting edits so the PR passes format checks.frontend/src/routers/mainRouter.tsx (1)
1-1:⚠️ Potential issue | 🟡 MinorPrettier 포매팅 수정 필요
파이프라인 CI가 실패 중입니다.
pnpm format:write또는prettier --write를 실행하세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/routers/mainRouter.tsx` at line 1, CI is failing due to Prettier formatting; run the formatter (e.g., execute `pnpm format:write` or `prettier --write frontend/src/routers/mainRouter.tsx`) to apply Prettier rules to frontend/src/routers/mainRouter.tsx (affecting the import line "import { Suspense, lazy } from \"react\""), then stage and commit the formatted file so the pipeline passes.frontend/src/assets/locales/ko/translation.json (1)
1-1:⚠️ Potential issue | 🟡 MinorPrettier 포매팅 수정 필요
pnpm format:write를 실행하세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/assets/locales/ko/translation.json` at line 1, The JSON file (starts with "{") in translation.json is not Prettier-formatted; run the formatter by executing pnpm format:write to apply Prettier to this file, then stage and commit the updated translation.json so the opening "{" and the rest of the JSON are properly formatted.
🟡 Minor comments (14)
backend/search/admin.py-1-3 (1)
1-3:⚠️ Potential issue | 🟡 Minor미사용 임포트 제거로 CI 린트 오류 해결
from django.contrib import admin이 임포트되었으나 실제로 사용되지 않아 ruff F401 규칙을 위반하고 있습니다. 현재 models.py에 정의된 모델이 없고 admin에 등록된 모델이 없으므로, 이 임포트를 제거하면 CI 린트 검사를 통과할 수 있습니다.제안된 수정
-from django.contrib import admin - -# Register your models here. +# Register your models here.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@backend/search/admin.py` around lines 1 - 3, Remove the unused import causing ruff F401 by deleting the line "from django.contrib import admin" from backend/search/admin.py; if you later need to register models use the admin symbol in that file (e.g., call admin.site.register(...)), otherwise keep the file empty or add a comment to avoid unused-import reintroduction.frontend/src/components/search/GlobalSearchResults.tsx-14-14 (1)
14-14:⚠️ Potential issue | 🟡 Minor조건부 early return에서
null반환 권장.
return만 사용하면undefined를 반환합니다. React 컴포넌트는 렌더링하지 않을 때 명시적으로null을 반환하는 것이 관례입니다.수정 제안
- if(!searchResults?.project) return + if(!searchResults?.project) return null🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/GlobalSearchResults.tsx` at line 14, The early-return in the GlobalSearchResults component uses "if (!searchResults?.project) return" which yields undefined; change it to explicitly return null so the React component returns null when there are no project results (replace the conditional return in GlobalSearchResults where it checks searchResults?.project).backend/projects/views.py-5-12 (1)
5-12:⚠️ Potential issue | 🟡 Minor미사용 import 제거 필요 (ruff F401).
정적 분석(ruff)에 의해 확인된 미사용 import 목록:
- Line 5:
APIView- Line 7:
Q,F,Value- Line 10:
Drawer- Line 11:
Task- Line 12:
ProjectSearchSerializer,DrawerSearchSerializer,TaskSearchSerializer이 중 어떤 것도 현재 뷰 클래스에서 사용되지 않습니다. 검색 관련 로직은
backend/search/앱에서 처리하고 있으므로 이 파일에는 불필요합니다.수정 제안
from rest_framework import mixins, generics, status from rest_framework.response import Response from rest_framework.exceptions import ValidationError from rest_framework.pagination import PageNumberPagination -from rest_framework.views import APIView - -from django.db.models import Q, F, Value from .models import Project -from drawers.models import Drawer -from tasks.models import Task -from .serializers import ProjectSerializer, ProjectSerializerForUserProjectList, ProjectSearchSerializer, DrawerSearchSerializer, TaskSearchSerializer +from .serializers import ProjectSerializer, ProjectSerializerForUserProjectList from .exceptions import ProjectNameDuplicate🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@backend/projects/views.py` around lines 5 - 12, Remove the unused imports flagged by ruff F401: drop APIView, Q, F, Value, Drawer, Task, ProjectSearchSerializer, DrawerSearchSerializer, and TaskSearchSerializer from the top of the file and keep only the imports actually used by the view (e.g., Project, ProjectSerializer, ProjectSerializerForUserProjectList). Ensure no remaining references to those symbols exist in the module; run the linter/ruff to confirm F401 is resolved.frontend/src/components/search/GlobalSearchResults.tsx-1-3 (1)
1-3:⚠️ Potential issue | 🟡 Minor사용하지 않는 import 제거 필요.
정적 분석(lint)에서
useCallback,useMemo,useState(Line 1),useInfiniteQuery,useMutation,useQuery(Line 3)가 모두 미사용으로 감지되었습니다. 이 컴포넌트에서 실제로 사용하는 import만 남겨주세요.수정 제안
-import { useCallback, useMemo, useState } from "react" - -import { useInfiniteQuery, useMutation, useQuery } from "@tanstack/react-query" import styled from "styled-components"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/GlobalSearchResults.tsx` around lines 1 - 3, Remove the unused imports listed at the top: delete useCallback, useMemo, useState from the React import and remove useInfiniteQuery, useMutation, useQuery from the `@tanstack/react-query` import; keep only the hooks actually used in GlobalSearchResults (reference the import statements containing useCallback/useMemo/useState and useInfiniteQuery/useMutation/useQuery) so the file only imports symbols it uses and satisfies the linter.frontend/src/assets/locales/ko/translation.json-430-437 (1)
430-437:⚠️ Potential issue | 🟡 Minor
sidebar.search번역 키 누락
frontend/src/components/sidebar/Middle.tsx의 검색 링크 레이블 수정 시 필요한sidebar.search키가 이 파일(및 영문 번역 파일)의"sidebar"블록에 추가되어야 합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/assets/locales/ko/translation.json` around lines 430 - 437, Add the missing "sidebar.search" translation key under the "sidebar" block in the Korean translation file to match the label change made in frontend/src/components/sidebar/Middle.tsx; update the same key in the English translation file as well so both locales contain "sidebar.search" with the appropriate placeholder/label text.backend/search/views.py-1-1 (1)
1-1:⚠️ Potential issue | 🟡 MinorRuff 포매팅 수정 필요
파이프라인에서 이 파일이 재포매팅 대상으로 탐지되었습니다.
ruff format backend/search/views.py를 실행하세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@backend/search/views.py` at line 1, Run ruff formatter on the file to fix style issues detected by the pipeline: execute `ruff format backend/search/views.py` (or run your project's formatter command) and save the changes so the import line "from rest_framework import mixins, generics, status" and the rest of backend/search/views.py conform to ruff rules; commit the reformatted file.backend/search/service.py-1-1 (1)
1-1:⚠️ Potential issue | 🟡 MinorRuff 포매팅 수정 필요
파이프라인에서 이 파일이
ruff format에 의해 재포매팅 대상으로 탐지되었습니다.ruff format backend/search/service.py를 실행하여 CI 실패를 해소하세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@backend/search/service.py` at line 1, This file was flagged by ruff for formatting; apply ruff formatting to the module that imports Q, F, Value from django.db.models (the import line "from django.db.models import Q, F, Value")—run your project's ruff formatter on that file or reformat the import/whitespace to match ruff rules so CI passes.frontend/src/components/search/FilterBox.tsx-26-41 (1)
26-41:⚠️ Potential issue | 🟡 Minor
boxRef가 DOM 요소에 연결되지 않아getBoundingClientRect()가 호출되지 않습니다.Line 26에서
boxRef를 생성하고, Line 34에서boxRef.current를 참조하지만, Line 49의<Box>컴포넌트에ref={boxRef}가 설정되지 않았습니다. 따라서boxRef.current는 항상null이며,inputPosition계산 로직이 실행되지 않습니다.현재
inputPosition은 사용되지 않는 상태(린터 경고 대상)이지만, TODO 주석(Line 28)에 따르면 Calendar 연동 시 필요한 것으로 보입니다. 지금 사용하지 않는다면boxRef,inputPosition, 관련 로직을 함께 제거하고, 실제 필요 시 재도입하는 것이 깔끔합니다.수정 제안: 현재 사용되지 않는 코드 제거
const FilterBox = <K extends FilterLabel>({ filterDisplay, filterValue, setFilterValue }: FilterBoxProps<K>) => { const [isEditing, setIsEditing] = useState<boolean>(false) - const boxRef = useRef<HTMLDivElement>(null) - - // TODO: Calendar 사용 위함 - const [inputPosition, setInputPosition] = useState<Position>({ top: 0, left: 0 }) - const handleInputState = () => { setIsEditing(true) - - if (boxRef.current) { - const rect = boxRef.current.getBoundingClientRect() - setInputPosition({ - top: window.scrollY + rect.top + rect.height, - left: rect.left, - }) - } }사용하지 않는
Position타입(Line 17-20)도 함께 제거 가능합니다.Also applies to: 49-49
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/FilterBox.tsx` around lines 26 - 41, The boxRef and related positioning state are never attached to the DOM so getBoundingClientRect is never called; remove the unused declaration and logic: delete boxRef (useRef<HTMLDivElement>), the Position type, inputPosition and setInputPosition state, and the handleInputState function (and any calls to it) so there are no unused vars or linter warnings; if you prefer to keep calendar positioning instead, alternatively attach boxRef to the rendered <Box> component via ref={boxRef} and keep handleInputState/setInputPosition as-is so getBoundingClientRect() can run.frontend/src/components/search/FilterInput.tsx-14-14 (1)
14-14:⚠️ Potential issue | 🟡 Minor
ghostSpanRef의 제네릭 타입이 실제 요소와 일치하지 않습니다.
useRef<HTMLDivElement>로 선언되어 있으나, Line 46에서<GhostSpan>은styled.span으로 정의되어HTMLSpanElement입니다.수정 제안
- const ghostSpanRef = useRef<HTMLDivElement>(null) + const ghostSpanRef = useRef<HTMLSpanElement>(null)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/FilterInput.tsx` at line 14, ghostSpanRef의 제네릭 타입이 실제 요소와 불일치합니다: 현재 useRef<HTMLDivElement>(null)로 선언되어 있지만 컴포넌트에서 사용하는 <GhostSpan>은 styled.span으로 HTMLSpanElement입니다. fix: useRef 제네릭을 HTMLSpanElement로 변경(예: useRef<HTMLSpanElement | null>(null))하고 GhostSpan에 전달되는 ref 타입이 맞는지 확인하여 필요하면 ref 연결 부분(ghostSpanRef.current)도 null 체크하도록 조정하세요. 이때 참조되는 심볼은 ghostSpanRef, GhostSpan입니다.frontend/src/components/search/FilterBox.tsx-1-1 (1)
1-1:⚠️ Potential issue | 🟡 Minor린터 오류: 사용되지 않는 import
useEffect를 제거하십시오.정적 분석 도구에서
useEffect가 정의되었지만 사용되지 않는다고 보고하고 있습니다. 파이프라인 실패의 원인이 됩니다.수정 제안
-import { useState, useRef, useEffect } from "react" +import { useState, useRef } from "react"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/FilterBox.tsx` at line 1, Remove the unused `useEffect` import from the top-level import statement in the FilterBox component: update the import that currently includes `useState, useRef, useEffect` to only import the actually used symbols (`useState` and `useRef`) and ensure there are no remaining references to `useEffect` in the FilterBox code; run the linter to confirm the unused-import error is resolved.frontend/src/components/search/Filters.tsx-33-40 (1)
33-40:⚠️ Potential issue | 🟡 Minor린터 오류:
console.log를 제거하십시오.Line 37의
console.log(label + ": " + value)가 린트 규칙 위반으로 파이프라인 실패를 유발합니다. 디버깅 목적이라면 제거하거나 적절한 로깅 유틸리티로 교체하십시오.수정 제안
const setFilterValue = <K extends FilterLabel>(label: K) => (value: FilterValues[K]) => { setFilterValues((prev) => { if (prev[label] === value) return prev - console.log(label + ": " + value) return { ...prev, [label]: value,} }) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/Filters.tsx` around lines 33 - 40, Remove the debug console.log call inside setFilterValue in Filters.tsx (the line `console.log(label + ": " + value)`) which violates linter rules; either delete it or replace it with the project's logging utility (e.g., call to your logger function) if persistent logging is needed, ensuring the function setFilterValue and state update logic (setFilterValues) remain unchanged and behavior is preserved.frontend/src/assets/locales/en/translation.json-430-437 (1)
430-437:⚠️ Potential issue | 🟡 Minor"Search your task" -- 단수형 표현이 부자연스럽습니다.
영어에서 검색 placeholder는 일반적으로 복수형이 자연스럽습니다. "Search your task"보다 "Search your tasks"가 적절합니다.
수정 제안
"search": { - "placeholder": "Search your task", + "placeholder": "Search your tasks", "filter": {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/assets/locales/en/translation.json` around lines 430 - 437, The placeholder string under the translation key "search.placeholder" uses singular wording ("Search your task"); update that value to the plural form ("Search your tasks") so the UI shows a natural English search placeholder; locate the "search" object and change the "placeholder" property accordingly in translation.json.frontend/src/pages/SearchPage.tsx-253-258 (1)
253-258:⚠️ Potential issue | 🟡 Minor디버그용 스타일
border: solid black이 남아 있습니다.
SearchResultContainer에 하드코딩된 검은색 border가 설정되어 있습니다.border-width도 지정되지 않았고, 테마 색상을 사용하지 않으므로 다크 모드 등에서 시각적으로 문제가 될 수 있습니다. 의도된 디자인이 아니라면 제거하십시오.수정 제안
const SearchResultContainer = styled.div` - border: solid black; - display: flex; flex-direction: column; `🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/SearchPage.tsx` around lines 253 - 258, The styled component SearchResultContainer currently has a hardcoded debug style `border: solid black`; remove this debug border (or replace it with a theme-aware style using theme.colors.* and an explicit border-width if a border is actually required) so it doesn't force a black outline in light/dark modes—update the SearchResultContainer definition to eliminate the `border: solid black` entry and, if needed, use theme-provided color and width instead.frontend/src/api/search.api.ts-1-8 (1)
1-8:⚠️ Potential issue | 🟡 Minor린터 오류: 사용되지 않는 import를 제거하십시오.
정적 분석에서
Base,PaginationData,Privacy(Line 2)와User(Line 3)가 사용되지 않는다고 보고하고 있습니다. 파이프라인 빌드 실패의 원인이 됩니다.수정 제안
import client from "@api/client" -import type { Base, PaginationData, Privacy } from "@api/common" -import type { User } from "@api/users.api" import type { PaletteColorName } from "@assets/palettes" import { Project } from "@api/projects.api"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/api/search.api.ts` around lines 1 - 8, The imports Base, PaginationData, Privacy from the "@api/common" import and User from "@api/users.api" are unused and causing linter/build failures; remove these symbols from the import statements (leave other imports like client, PaletteColorName, Project, Drawer, Task intact) so the top-of-file imports only include actually used identifiers (e.g., import client from "@api/client" and import type { PaletteColorName } from "@assets/palettes" plus the used project/drawer/task imports).
🧹 Nitpick comments (14)
frontend/src/components/search/ResultBox.tsx (2)
25-27: 빈 기본 export 컴포넌트.
ResultBox컴포넌트가 아무 것도 반환하지 않습니다. 실제로 사용되는 것은 named export인ProjectResultBox,DrawerResultBox,TaskResultBox입니다. 빈 기본 export를 유지할 이유가 없다면 제거하고,GlobalSearchResults.tsx에서 named import만 사용하는 현재 패턴을 유지하세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/ResultBox.tsx` around lines 25 - 27, 현재 파일의 빈 기본 export인 ResultBox는 아무것도 반환하지 않으므로 제거하고, 이 파일에서 제공하는 실제 컴포넌트인 ProjectResultBox, DrawerResultBox, TaskResultBox만 named export로 유지하세요; 또한 GlobalSearchResults.tsx에서 default import가 있으면 모두 named import로 바꿔 불필요한 기본 export 참조를 제거하고 빌드/린트 에러가 없는지 확인하세요.
78-85: TODO 주석에 명시된 코드 중복 해결 계획 확인.Line 78-79의 주석에서
DrawerBlock.tsx와의 중복을, Line 121-122에서TaskFrame관련 styled component 중복을 인지하고 있습니다. 현재 WIP PR임을 감안하면 이해되지만, 최종 병합 전에 공통 컴포넌트를 추출하거나 기존 컴포넌트를 re-export하는 방향으로 정리가 필요합니다. 이 작업을 추적할 이슈를 생성하시겠습니까?Also applies to: 121-173
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/ResultBox.tsx` around lines 78 - 85, The TODO notes indicate duplication between DrawerTitleBox (in this file) and components in DrawerBlock.tsx as well as duplicated TaskFrame styled components (lines ~121-173); create a tracking issue and refactor plan to either extract shared styled components into a new common module or re-export the existing DrawerBlock exports so both files import the same symbols (e.g., DrawerTitleBox, TaskFrame) from a single source; update imports in ResultBox.tsx to consume the unified component(s) and remove the local duplicates, and reference DrawerBlock.tsx, DrawerTitleBox, and TaskFrame in the issue for clarity.frontend/src/components/search/GlobalSearchResults.tsx (1)
57-65: 미사용 styled component 제거 필요.
ResultBlockBox와ResultBox가 정의되어 있지만 컴포넌트 내에서 사용되지 않습니다. 불필요한 코드는 제거하는 것이 좋습니다.수정 제안
-const ResultBlockBox = styled.div` - display: flex; - flex-direction: column; -` - -const ResultBox = styled.div` - display: flex; - flex-direction: column; -` - export default GlobalSearchResults🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/GlobalSearchResults.tsx` around lines 57 - 65, Remove the unused styled components ResultBlockBox and ResultBox from GlobalSearchResults.tsx (they're defined but never referenced); either delete their declarations or replace their usage with the intended existing container components inside the component, ensuring no unused imports remain and update any related styling usage to the appropriate styled component names.backend/search/tests.py (1)
1-3: 테스트 미작성 — 핵심 검색 로직에 대한 커버리지 없음플레이스홀더만 존재합니다. 최소한 다음 시나리오에 대한 테스트가 필요합니다:
- 인증되지 않은 요청 거부
- 사용자 격리 (User A의 데이터가 User B의 검색 결과에 포함되지 않음)
scope비트마스크 동작 검증- 빈 쿼리에 대한 빈 결과 반환
SEARCH_PREVIEW_LIMIT초과 시 슬라이싱 및count반환 값 검증위 시나리오들에 대한 테스트 코드를 생성할 수 있습니다. 이슈를 새로 열어 추적할까요?
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@backend/search/tests.py` around lines 1 - 3, Replace the placeholder tests with a TestCase class in tests.py that implements unit tests for the search endpoint: create two users and sample searchable objects (owned by each user), use self.client (force_login for authenticated calls and without login for unauthenticated) to assert unauthorized requests return 401, assert user isolation by ensuring User A’s objects do not appear in User B’s search results, test scope bitmask behavior by creating objects with different scope flags and asserting results include/exclude items per-bitmask queries, assert an empty query returns an empty list, and create more items than SEARCH_PREVIEW_LIMIT (use the SEARCH_PREVIEW_LIMIT constant) to verify response slicing and that the returned count reflects total matches while the items list is limited to the preview limit; structure tests as separate methods and assert on HTTP status codes and JSON payload fields (e.g., "results" and "count").frontend/src/components/search/Search.tsx (3)
26-38: 주석 처리된 코드 블록을 제거하십시오.
queryString관련 로직이 주석으로 남아 있습니다. 버전 관리 시스템에서 이력을 추적할 수 있으므로, 사용하지 않는 코드는 커밋에 포함하지 않는 것이 바람직합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/Search.tsx` around lines 26 - 38, Remove the commented-out queryString computation block: delete the unused useMemo that builds URLSearchParams for queryString (the lines referencing queryString, useMemo, filters, filters.keyword, filters.tags, and URLSearchParams) so no commented logic remains in Search.tsx; keep any needed imports and ensure no references to queryString remain elsewhere before committing.
80-85:==대신===(strict equality)를 사용하십시오.Line 81의
e.key == "Enter"는 느슨한 비교입니다. TypeScript/JavaScript에서는 타입 안전성을 위해===를 사용하는 것이 관례입니다. 이 패턴은 FilterInput.tsx의 Line 29에도 동일하게 적용됩니다.수정 제안
- if (e.key == "Enter") { + if (e.key === "Enter") {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/Search.tsx` around lines 80 - 85, The keyboard event comparison uses loose equality; update the comparison in the handleKeyDown handler (function handleKeyDown in Search.tsx) from e.key == "Enter" to strict equality e.key === "Enter" and do the same analogous change in the FilterInput handler mentioned (the Enter key check in FilterInput.tsx) so both use === for type-safe comparisons before calling handleExecuteSearch(searchInput.trim()).
14-14:searchQueryprop이 전달되지만 컴포넌트 내에서 사용되지 않습니다.
SearchProps에searchQuery가 정의되어 있고 props로 전달되지만, 컴포넌트 내부에서searchInput이라는 별도의 state로 입력을 관리하며searchQuery는 읽히지 않습니다. 초기값 동기화나 표시 목적으로 사용되지 않는다면, props 인터페이스에서 제거하거나searchInput의 초기값으로 활용하는 것을 검토하십시오.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/Search.tsx` at line 14, The Search component receives a searchQuery prop that is never used; either remove searchQuery from SearchProps and all callers, or wire it into the component by initializing and syncing the internal searchInput state from searchQuery and using setSearchQuery when the input changes. Concretely, update the Search function to use searchQuery as the initial value for searchInput (and add a useEffect to keep searchInput in sync when searchQuery changes) and ensure onChange handlers call setSearchQuery(searchInput) so external state and the displayed input stay consistent; otherwise remove searchQuery from SearchProps and callers to avoid an unused prop.frontend/src/pages/SearchPage.tsx (3)
102-124: 주석 처리된useInfiniteQuery코드 블록을 제거하십시오.이전 구현의 주석 처리된 코드가 약 20줄에 걸쳐 남아 있습니다. 버전 관리에서 이력을 추적할 수 있으므로 최종 커밋에서는 제거하는 것이 좋습니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/SearchPage.tsx` around lines 102 - 124, Remove the commented-out legacy search implementation block that contains the useInfiniteQuery setup and related variables (including useInfiniteQuery, getSearchResults, getPageFromURL, searchData, and searchResults) from SearchPage.tsx; delete the entire multiline comment (the ~20-line block) so only the active search logic remains, ensuring no leftover commented imports or references to those symbols persist in the file.
260-261: 사용되지 않는 styled componentSearchResultBox.
SearchResultBox가 정의되어 있으나 JSX에서 사용되지 않습니다. 제거하십시오.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/SearchPage.tsx` around lines 260 - 261, Remove the unused styled component declaration SearchResultBox from the file (the const SearchResultBox = styled.div`` block) and, if that makes the styled import unused, also remove the now-unused import of styled to avoid dead code and lint warnings; alternatively, if the intended behavior was to wrap results, replace its unused declaration by using SearchResultBox in the JSX where result items are rendered (e.g., around the result list) so the declaration is actually referenced.
33-197: SearchPage가 ProjectListPage의 기능을 거의 그대로 복제하고 있습니다.현재
SearchPage는 프로젝트 목록 조회, 무한 스크롤, 드래그 앤 드롭 정렬, 프로젝트 생성 모달 등ProjectListPage와 동일한 기능을 포함하고 있으며, 여기에 검색 기능만 추가된 형태입니다. 이는 상당한 코드 중복을 야기합니다.검색 전용 페이지라면 프로젝트 목록/DnD 로직을 공유 컴포넌트로 분리하거나, 검색 결과만 표시하는 것을 검토하십시오. 페이지 제목도 현재 "Projects"(
project_list.title)로 되어 있어 SearchPage의 목적과 맞지 않습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/SearchPage.tsx` around lines 33 - 197, SearchPage duplicates most of ProjectListPage (infinite query, DnD, modal, create UI) — extract the shared project-list logic into a reusable component or hook and adjust SearchPage to only handle search; create a SharedProjectList (or use ProjectListPage) that encapsulates useInfiniteQuery, tempProjectOrder state, moveProject, dropProject, the DndProvider mapping over displayProjects -> ProjectName, StyledImpressionArea, ProjectCreateButton and Portal/ProjectEdit props (accepts projects, isPending, isError, refetch, fetchNextPage, hasNextPage, isFetchingNextPage, moveProject, dropProject, onCreateClick), then replace the duplicated blocks in SearchPage with either a call to SharedProjectList (passing searchResults when you want to show projects) or, if SearchPage should be search-only, remove the infinite/DnD/modal logic entirely and only render GlobalSearchResults plus update the title (replace PageTitle usage of t("project_list.title") with a search-appropriate key like t("search.title")). Ensure unique symbols referenced: SearchPage, ProjectListPage, SharedProjectList (new), moveProject, dropProject, displayProjects, GlobalSearchResults, ProjectName, ProjectEdit, Portal, PageTitle.frontend/src/components/search/Filters.tsx (1)
58-74:as Filter[]타입 단언 대신 타입 안전한 방식을 고려하십시오.현재
getFilterItems가 반환하는 배열에as Filter[]를 사용하여 타입을 강제하고 있습니다.label속성에 오타가 있어도 컴파일 타임에 감지되지 않습니다.satisfies Filter[]를 사용하면 타입 검증과 리터럴 타입 추론을 모두 얻을 수 있습니다.수정 제안
const getFilterItems = (t: TFunction<"translation", "search.filter">) => [ { label: "project", display: t("project"), type: "text", }, { label: "drawer", display: t("drawer"), type: "text" }, { label: "date", display: t("date"), type: "date" }, - ] as Filter[] + ] satisfies Filter[]🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/Filters.tsx` around lines 58 - 74, The code forces the returned array to Filter[] with "as Filter[]", which hides mismatches; update the return to use TypeScript's "satisfies Filter[]" on the array literal in getFilterItems so the compiler verifies each object's shape while preserving literal types (remove the "as Filter[]" assertion and append "satisfies Filter[]"), keeping the function signature getFilterItems(t: TFunction<...>) unchanged and ensuring label/display/type properties conform to the Filter type.frontend/src/api/search.api.ts (2)
29-39: 미사용 타입ProjectType과 주석 처리된 코드, 불필요한 중간 변수.
ProjectType(Line 29)은 이 파일 및 PR 내 다른 파일에서 사용되지 않습니다.- Line 31의 주석 처리된 이전 시그니처를 제거하십시오.
- Line 33의
const keyword = query는 불필요한 중간 변수입니다.수정 제안
-export type ProjectType = "inbox" | "regular" | "goal" - -//export const getGlobalSearchResults = async (query: string, page: string) => { export const getGlobalSearchResults = async (query: string) => { - const keyword = query const res = await client.get<SearchResponse>(`search/`, { - params: { keyword }, + params: { keyword: query }, }) return res.data }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/api/search.api.ts` around lines 29 - 39, Remove the unused ProjectType declaration and the commented-out old signature, and simplify getGlobalSearchResults by deleting the unnecessary intermediate variable keyword: in the getGlobalSearchResults function replace params: { keyword } with params: { keyword: query } (or directly params: { query } if backend expects that) and keep the return of res.data (SearchResponse) via client.get; ensure references to ProjectType, the commented line, and the const keyword = query are removed.
10-16:DrawerSearchResult와TaskSearchResult의 정의 방식을 통일하세요.
DrawerSearchResult는interface extends를 사용하고TaskSearchResult는type &(intersection)를 사용합니다. 기능적으로 동일하지만 같은 파일 내에서 유사한 타입을 정의할 때는 일관된 방식을 사용하는 것이 코드 가독성에 좋습니다. 한 가지 패턴으로 통일하면 더 명확합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/api/search.api.ts` around lines 10 - 16, The two result types use different declaration styles; make them consistent by changing DrawerSearchResult to the same pattern as TaskSearchResult: replace the interface DrawerSearchResult extends Drawer with a type alias using an intersection (Drawer & { color: PaletteColorName }) so both DrawerSearchResult and TaskSearchResult use the same "type" pattern and reference the existing Drawer, Task and PaletteColorName symbols.frontend/src/components/search/FilterInput.tsx (1)
28-42: FilterBox의 TODO "버튼 누르면 깜빡거리는 이유" -- blur/click 이벤트 순서가 원인입니다.
handleBlur가setIsEditing(false)를 호출한 직후 FilterBox의onClick이setIsEditing(true)를 호출하는 순서로 인해 깜빡임이 발생합니다. 이는 브라우저의 이벤트 순서(blur -> click)에 의한 것입니다.해결 방법으로
handleBlur에서relatedTarget을 확인하여, 포커스가 같은 FilterBox 내부로 이동하는 경우에는setIsEditing(false)를 호출하지 않도록 하거나,setTimeout으로 blur 처리를 지연시키는 패턴을 적용할 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/search/FilterInput.tsx` around lines 28 - 42, The blur handler handleBlur causes a flicker because blur fires before the FilterBox onClick sets editing true; modify handleBlur in FilterInput.tsx to ignore blurs that move focus to an element inside the same FilterBox (use event.relatedTarget / (e.nativeEvent as FocusEvent).relatedTarget) and only call setIsEditing(false)/trim/reset when the relatedTarget is null or outside the FilterBox; alternatively, if relatedTarget is unavailable in your event type, wrap the existing blur logic in a short setTimeout (e.g. 0ms) and check document.activeElement or whether the clicked element is inside the FilterBox before calling setIsEditing(false); reference handleBlur, setIsEditing, setInputValue, setFilterValue and the FilterBox root element to implement the containment check.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@backend/projects/serializers.py`:
- Around line 54-67: Remove the duplicate serializers by deleting the
ProjectSearchSerializer, DrawerSearchSerializer, and TaskSearchSerializer class
definitions from this module and also remove the now-unused Drawer and Task
imports at the top (the duplicate definitions conflict with the canonical
serializers already defined elsewhere); ensure any code that referenced these
local serializers instead imports the canonical versions (use the existing
serializers that include project.color and drawer.project.color).
In `@backend/projects/urls.py`:
- Line 11: Restore the magic trailing comma after the path entry so Ruff's
multiline-collection rule is satisfied: add a trailing comma after the call to
path("<str:id>/", views.ProjectDetail.as_view()) in the urls list (the path(...)
call referencing views.ProjectDetail.as_view()) so the file remains formatted
and the CI ruff format check passes.
In `@backend/search/serializers.py`:
- Around line 7-24: Replace the unsafe "exclude = ()" in
ProjectSearchSerializer, DrawerSearchSerializer, and TaskSearchSerializer by
explicitly listing only the fields the frontend needs (use the types in
frontend/src/api/search.api.ts to determine the exact fields) in each
serializer's Meta.fields; for DrawerSearchSerializer and TaskSearchSerializer
keep the computed "color = serializers.CharField(source='project.color',
read_only=True)" field and include its name in their Meta.fields as well;
finally, add the same "# pyright: ignore [reportIncompatibleVariableOverride]"
comment inside each Meta class (following the pattern used in
backend/projects/serializers.py) to silence the pyright override warning.
In `@backend/search/service.py`:
- Around line 11-36: global_search currently lacks user isolation; change the
function signature of global_search to accept a user parameter and apply
user-scoped filtering to each target queryset before applying the name Q filter
and pagination. Concretely, update the construction/usage of targets/values
(Task.objects.select_related(...), Drawer.objects.select_related(...),
Project.objects) so you derive a base_qs = value["objects"].filter(user=user)
(or the correct owner field if the model uses a different name) and then do
base_qs.filter(Q(name__icontains=query)); keep the existing SCOPE_BITMASK check,
SEARCH_PREVIEW_LIMIT slice logic, and serializers (TaskSearchSerializer,
DrawerSearchSerializer, ProjectSearchSerializer) unchanged. Ensure results still
return {"data": ..., "count": ...} but only from the user-scoped querysets.
In `@backend/search/views.py`:
- Around line 29-62: ProjectSearchView is not routed and its queries lack
per-user filtering: register ProjectSearchView in your URL config (the same
module where GlobalSearchView is registered) so the endpoint is reachable, and
restrict project_qs, drawer_qs, and task_qs to the current user by filtering on
ownership/relations (e.g., Project.objects.filter(owner=request.user, ...) or
using related lookups like drawer__project__owner=request.user) before
serializing; also ensure the view enforces authentication/permissions (e.g.,
IsAuthenticated) so request.user is available.
- Around line 79-88: The empty-query branch in backend/search/views.py returns a
dict with plural keys ("projects","drawers","tasks") that doesn't match
global_search()'s return shape which uses singular keys
("project","drawer","task" in the targets dict in service.py); update the
early-return payload in the if not query block to use the same singular keys and
value structure (data list and count) as global_search() so the frontend always
receives a consistent response shape from global_search().
- Line 86: global_search 호출 시 user 인자가 빠져 있어 사용자 필터가 적용되지 않습니다; views 코드에서
global_search(query, scope) 대신 request.user를 전달하도록 호출부를 수정하여
global_search(query, scope, request.user) 형태로 넘기고, 필요 시 호출자(예: 함수 or view
handler)에서 request 변수가 유효한지 확인한 뒤 전달하세요; 관련 식별자는 global_search와 request.user입니다.
In `@frontend/src/components/search/FilterInput.tsx`:
- Around line 69-72: The TextForm input's width becomes 0px when inputValue is
empty because GhostSpan returns 0, so update TextForm (styled.input) to enforce
a minimum width so the field remains visible and focusable; either add a CSS
min-width (e.g. min-width: 1.5em or a pixel value) or compute width using a
fallback when using props.$length (e.g. use Math.max(props.$length, MIN_PX)),
referencing the TextForm component (and the GhostSpan width logic) to locate
where to apply the change.
In `@frontend/src/components/search/GlobalSearchResults.tsx`:
- Around line 20-23: In GlobalSearchResults
(frontend/src/components/search/GlobalSearchResults.tsx) replace the hardcoded
Korean string "검색 결과가 없습니다." with a translated key using react-i18next: import
and call useTranslation() in the component (if not already present) and change
the JSX to render t('search.noResults') (or another chosen key) when totalCount
=== 0; then add that key/value to your ko/translation.json and
en/translation.json. Ensure you reference the component-level t function (from
useTranslation) rather than a global or prop to keep scoping correct.
In `@frontend/src/components/search/ResultBox.tsx`:
- Around line 43-50: Replace the non-semantic <div onClick={...} role="link">
used in the JSX inside ProjectNameBox/NameBox with a proper React Router <Link>
so keyboard and screen-reader users can focus and activate the project
navigation; update the import to bring in Link from react-router-dom, change the
element that currently uses navigate(projectLink) to <Link to={projectLink}>
(wrapping NameText and the icon as needed), and remove the manual onClick/role
attributes so accessibility is handled by the Link component (refer to
ProjectNameBox, NameBox, FeatherIcon, NameText, navigate, projectLink to locate
the change).
- Around line 60-76: DrawerResultBox and TaskResultBox lack navigation handling
present in ProjectResultBox; update DrawerResultBox (function DrawerResultBox)
and TaskResultBox (function TaskResultBox) to use react-router's useNavigate()
and attach an onClick handler that navigates to the appropriate route (the same
pattern used in ProjectResultBox) using drawer.id / task.id (or the same
route-building helper used by ProjectResultBox), or if navigation is
intentionally omitted add a clear TODO comment inside each component explaining
why navigation is not implemented; ensure the clickable container (e.g.,
DrawerBox) receives the onClick and accessible role/tabIndex if making it
interactive.
In `@frontend/src/components/search/Search.tsx`:
- Around line 64-90: Cancel the pending debounce timer in handleKeyDown and
handleBlur before calling handleExecuteSearch to avoid duplicate searches: check
debounceTimerRef.current, call window.clearTimeout(debounceTimerRef.current) and
set debounceTimerRef.current = null, then call handleExecuteSearch with the
trimmed input; also fix the typo variable name trimed to trimmed in both
handlers and ensure you use searchInput.trim() in handleKeyDown and
e.target.value.trim() in handleBlur to match handleExecuteSearch usage.
In `@frontend/src/components/sidebar/Middle.tsx`:
- Around line 75-80: The search SidebarLink currently reuses the project
icon/label; update the SidebarLink for "search" by changing the FeatherIcon prop
from "archive" to "search" and the translation call from t("sidebar.projects")
to t("sidebar.search") (look for Navbar component symbols SidebarLink, ItemBox,
FeatherIcon, t, and isCollapsed in Middle.tsx), and add the corresponding
"search" entry under the "sidebar" block in both ko/translation.json and
en/translation.json.
In `@frontend/src/pages/SearchPage.tsx`:
- Around line 125-136: The code assigns useQuery's data (searchData) directly to
SearchResponse which hides that data may be undefined; change searchResults to
be typed as SearchResponse | undefined (or provide a safe default) and update
callers (e.g., GlobalSearchResults) to guard for undefined before accessing
properties like searchResults.project — i.e., modify the useQuery block
(queryKey/queryFn) to keep searchData possibly undefined and add null checks or
early returns/loading/empty-state handling wherever searchResults is consumed.
---
Outside diff comments:
In `@frontend/src/assets/locales/ko/translation.json`:
- Line 1: The JSON file (starts with "{") in translation.json is not
Prettier-formatted; run the formatter by executing pnpm format:write to apply
Prettier to this file, then stage and commit the updated translation.json so the
opening "{" and the rest of the JSON are properly formatted.
In `@frontend/src/components/sidebar/Middle.tsx`:
- Line 1: This file fails Prettier formatting; run the project's formatter (pnpm
format:write) to reformat frontend/src/components/sidebar/Middle.tsx (the file
that currently imports useMemo) and then review the changed import/spacing/JSX
formatting, save, stage, and commit the resulting edits so the PR passes format
checks.
In `@frontend/src/routers/mainRouter.tsx`:
- Line 1: CI is failing due to Prettier formatting; run the formatter (e.g.,
execute `pnpm format:write` or `prettier --write
frontend/src/routers/mainRouter.tsx`) to apply Prettier rules to
frontend/src/routers/mainRouter.tsx (affecting the import line "import {
Suspense, lazy } from \"react\""), then stage and commit the formatted file so
the pipeline passes.
---
Nitpick comments:
In `@backend/search/tests.py`:
- Around line 1-3: Replace the placeholder tests with a TestCase class in
tests.py that implements unit tests for the search endpoint: create two users
and sample searchable objects (owned by each user), use self.client (force_login
for authenticated calls and without login for unauthenticated) to assert
unauthorized requests return 401, assert user isolation by ensuring User A’s
objects do not appear in User B’s search results, test scope bitmask behavior by
creating objects with different scope flags and asserting results
include/exclude items per-bitmask queries, assert an empty query returns an
empty list, and create more items than SEARCH_PREVIEW_LIMIT (use the
SEARCH_PREVIEW_LIMIT constant) to verify response slicing and that the returned
count reflects total matches while the items list is limited to the preview
limit; structure tests as separate methods and assert on HTTP status codes and
JSON payload fields (e.g., "results" and "count").
In `@frontend/src/api/search.api.ts`:
- Around line 29-39: Remove the unused ProjectType declaration and the
commented-out old signature, and simplify getGlobalSearchResults by deleting the
unnecessary intermediate variable keyword: in the getGlobalSearchResults
function replace params: { keyword } with params: { keyword: query } (or
directly params: { query } if backend expects that) and keep the return of
res.data (SearchResponse) via client.get; ensure references to ProjectType, the
commented line, and the const keyword = query are removed.
- Around line 10-16: The two result types use different declaration styles; make
them consistent by changing DrawerSearchResult to the same pattern as
TaskSearchResult: replace the interface DrawerSearchResult extends Drawer with a
type alias using an intersection (Drawer & { color: PaletteColorName }) so both
DrawerSearchResult and TaskSearchResult use the same "type" pattern and
reference the existing Drawer, Task and PaletteColorName symbols.
In `@frontend/src/components/search/FilterInput.tsx`:
- Around line 28-42: The blur handler handleBlur causes a flicker because blur
fires before the FilterBox onClick sets editing true; modify handleBlur in
FilterInput.tsx to ignore blurs that move focus to an element inside the same
FilterBox (use event.relatedTarget / (e.nativeEvent as
FocusEvent).relatedTarget) and only call setIsEditing(false)/trim/reset when the
relatedTarget is null or outside the FilterBox; alternatively, if relatedTarget
is unavailable in your event type, wrap the existing blur logic in a short
setTimeout (e.g. 0ms) and check document.activeElement or whether the clicked
element is inside the FilterBox before calling setIsEditing(false); reference
handleBlur, setIsEditing, setInputValue, setFilterValue and the FilterBox root
element to implement the containment check.
In `@frontend/src/components/search/Filters.tsx`:
- Around line 58-74: The code forces the returned array to Filter[] with "as
Filter[]", which hides mismatches; update the return to use TypeScript's
"satisfies Filter[]" on the array literal in getFilterItems so the compiler
verifies each object's shape while preserving literal types (remove the "as
Filter[]" assertion and append "satisfies Filter[]"), keeping the function
signature getFilterItems(t: TFunction<...>) unchanged and ensuring
label/display/type properties conform to the Filter type.
In `@frontend/src/components/search/GlobalSearchResults.tsx`:
- Around line 57-65: Remove the unused styled components ResultBlockBox and
ResultBox from GlobalSearchResults.tsx (they're defined but never referenced);
either delete their declarations or replace their usage with the intended
existing container components inside the component, ensuring no unused imports
remain and update any related styling usage to the appropriate styled component
names.
In `@frontend/src/components/search/ResultBox.tsx`:
- Around line 25-27: 현재 파일의 빈 기본 export인 ResultBox는 아무것도 반환하지 않으므로 제거하고, 이 파일에서
제공하는 실제 컴포넌트인 ProjectResultBox, DrawerResultBox, TaskResultBox만 named export로
유지하세요; 또한 GlobalSearchResults.tsx에서 default import가 있으면 모두 named import로 바꿔 불필요한
기본 export 참조를 제거하고 빌드/린트 에러가 없는지 확인하세요.
- Around line 78-85: The TODO notes indicate duplication between DrawerTitleBox
(in this file) and components in DrawerBlock.tsx as well as duplicated TaskFrame
styled components (lines ~121-173); create a tracking issue and refactor plan to
either extract shared styled components into a new common module or re-export
the existing DrawerBlock exports so both files import the same symbols (e.g.,
DrawerTitleBox, TaskFrame) from a single source; update imports in ResultBox.tsx
to consume the unified component(s) and remove the local duplicates, and
reference DrawerBlock.tsx, DrawerTitleBox, and TaskFrame in the issue for
clarity.
In `@frontend/src/components/search/Search.tsx`:
- Around line 26-38: Remove the commented-out queryString computation block:
delete the unused useMemo that builds URLSearchParams for queryString (the lines
referencing queryString, useMemo, filters, filters.keyword, filters.tags, and
URLSearchParams) so no commented logic remains in Search.tsx; keep any needed
imports and ensure no references to queryString remain elsewhere before
committing.
- Around line 80-85: The keyboard event comparison uses loose equality; update
the comparison in the handleKeyDown handler (function handleKeyDown in
Search.tsx) from e.key == "Enter" to strict equality e.key === "Enter" and do
the same analogous change in the FilterInput handler mentioned (the Enter key
check in FilterInput.tsx) so both use === for type-safe comparisons before
calling handleExecuteSearch(searchInput.trim()).
- Line 14: The Search component receives a searchQuery prop that is never used;
either remove searchQuery from SearchProps and all callers, or wire it into the
component by initializing and syncing the internal searchInput state from
searchQuery and using setSearchQuery when the input changes. Concretely, update
the Search function to use searchQuery as the initial value for searchInput (and
add a useEffect to keep searchInput in sync when searchQuery changes) and ensure
onChange handlers call setSearchQuery(searchInput) so external state and the
displayed input stay consistent; otherwise remove searchQuery from SearchProps
and callers to avoid an unused prop.
In `@frontend/src/pages/SearchPage.tsx`:
- Around line 102-124: Remove the commented-out legacy search implementation
block that contains the useInfiniteQuery setup and related variables (including
useInfiniteQuery, getSearchResults, getPageFromURL, searchData, and
searchResults) from SearchPage.tsx; delete the entire multiline comment (the
~20-line block) so only the active search logic remains, ensuring no leftover
commented imports or references to those symbols persist in the file.
- Around line 260-261: Remove the unused styled component declaration
SearchResultBox from the file (the const SearchResultBox = styled.div`` block)
and, if that makes the styled import unused, also remove the now-unused import
of styled to avoid dead code and lint warnings; alternatively, if the intended
behavior was to wrap results, replace its unused declaration by using
SearchResultBox in the JSX where result items are rendered (e.g., around the
result list) so the declaration is actually referenced.
- Around line 33-197: SearchPage duplicates most of ProjectListPage (infinite
query, DnD, modal, create UI) — extract the shared project-list logic into a
reusable component or hook and adjust SearchPage to only handle search; create a
SharedProjectList (or use ProjectListPage) that encapsulates useInfiniteQuery,
tempProjectOrder state, moveProject, dropProject, the DndProvider mapping over
displayProjects -> ProjectName, StyledImpressionArea, ProjectCreateButton and
Portal/ProjectEdit props (accepts projects, isPending, isError, refetch,
fetchNextPage, hasNextPage, isFetchingNextPage, moveProject, dropProject,
onCreateClick), then replace the duplicated blocks in SearchPage with either a
call to SharedProjectList (passing searchResults when you want to show projects)
or, if SearchPage should be search-only, remove the infinite/DnD/modal logic
entirely and only render GlobalSearchResults plus update the title (replace
PageTitle usage of t("project_list.title") with a search-appropriate key like
t("search.title")). Ensure unique symbols referenced: SearchPage,
ProjectListPage, SharedProjectList (new), moveProject, dropProject,
displayProjects, GlobalSearchResults, ProjectName, ProjectEdit, Portal,
PageTitle.
Comment on lines
+54
to
+67
| class ProjectSearchSerializer(serializers.ModelSerializer): | ||
| class Meta: | ||
| model = Project | ||
| exclude = () | ||
|
|
||
| class DrawerSearchSerializer(serializers.ModelSerializer): | ||
| class Meta: | ||
| model = Drawer | ||
| exclude = () | ||
|
|
||
| class TaskSearchSerializer(serializers.ModelSerializer): | ||
| class Meta: | ||
| model = Task | ||
| exclude = () |
There was a problem hiding this comment.
검색 직렬화기(Serializer) 중복: backend/search/serializers.py에 이미 존재합니다.
ProjectSearchSerializer, DrawerSearchSerializer, TaskSearchSerializer가 이 파일과 backend/search/serializers.py에 모두 정의되어 있습니다. backend/search/serializers.py의 버전은 DrawerSearchSerializer에 project.color, TaskSearchSerializer에 drawer.project.color를 포함하는 등 프론트엔드 요구사항에 맞는 구현이 되어 있습니다. 이 파일의 중복 정의는 제거하고, Line 4-5의 Drawer, Task import도 함께 제거해야 합니다.
수정 제안
from .models import Project
-from drawers.models import Drawer
-from tasks.models import Task
from users.serializers import UserSerializer그리고 Line 54-67의 세 직렬화기 클래스를 삭제합니다.
🧰 Tools
🪛 GitHub Actions: Backend
[error] 55-55: "Meta" overrides symbol of same name in class "ModelSerializer". "backend.projects.serializers.ProjectSearchSerializer.Meta" is not assignable to "rest_framework.serializers.ModelSerializer.Meta". Type "type[backend.projects.serializers.ProjectSearchSerializer.Meta]" is not assignable to type "type[rest_framework.serializers.ModelSerializer.Meta]" (reportIncompatibleVariableOverride)
🪛 GitHub Check: type
[failure] 65-65:
"Meta" overrides symbol of same name in class "ModelSerializer"
"backend.projects.serializers.TaskSearchSerializer.Meta" is not assignable to "rest_framework.serializers.ModelSerializer.Meta"
Type "type[backend.projects.serializers.TaskSearchSerializer.Meta]" is not assignable to type "type[rest_framework.serializers.ModelSerializer.Meta]" (reportIncompatibleVariableOverride)
[failure] 60-60:
"Meta" overrides symbol of same name in class "ModelSerializer"
"backend.projects.serializers.DrawerSearchSerializer.Meta" is not assignable to "rest_framework.serializers.ModelSerializer.Meta"
Type "type[backend.projects.serializers.DrawerSearchSerializer.Meta]" is not assignable to type "type[rest_framework.serializers.ModelSerializer.Meta]" (reportIncompatibleVariableOverride)
[failure] 55-55:
"Meta" overrides symbol of same name in class "ModelSerializer"
"backend.projects.serializers.ProjectSearchSerializer.Meta" is not assignable to "rest_framework.serializers.ModelSerializer.Meta"
Type "type[backend.projects.serializers.ProjectSearchSerializer.Meta]" is not assignable to type "type[rest_framework.serializers.ModelSerializer.Meta]" (reportIncompatibleVariableOverride)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/projects/serializers.py` around lines 54 - 67, Remove the duplicate
serializers by deleting the ProjectSearchSerializer, DrawerSearchSerializer, and
TaskSearchSerializer class definitions from this module and also remove the
now-unused Drawer and Task imports at the top (the duplicate definitions
conflict with the canonical serializers already defined elsewhere); ensure any
code that referenced these local serializers instead imports the canonical
versions (use the existing serializers that include project.color and
drawer.project.color).
| path("", views.ProjectList.as_view()), | ||
| path("inbox/", views.InboxProjectDetail.as_view()), | ||
| path("<str:id>/", views.ProjectDetail.as_view()), | ||
| path("<str:id>/", views.ProjectDetail.as_view()) |
There was a problem hiding this comment.
CI 파이프라인 실패 원인: 마지막 항목의 후행 쉼표(trailing comma) 제거
path("<str:id>/", ...) 뒤의 후행 쉼표를 제거한 것이 Ruff 포매팅 검사 실패의 직접적인 원인입니다. Ruff는 멀티라인 컬렉션에서 magic trailing comma를 강제하며, 이를 제거하면 ruff format이 파일을 재포매팅 대상으로 간주합니다. 후행 쉼표를 복원하여 CI를 통과시켜야 합니다.
Proposed fix
- path("<str:id>/", views.ProjectDetail.as_view())
+ path("<str:id>/", views.ProjectDetail.as_view()),🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/projects/urls.py` at line 11, Restore the magic trailing comma after
the path entry so Ruff's multiline-collection rule is satisfied: add a trailing
comma after the call to path("<str:id>/", views.ProjectDetail.as_view()) in the
urls list (the path(...) call referencing views.ProjectDetail.as_view()) so the
file remains formatted and the CI ruff format check passes.
Comment on lines
+7
to
+24
| class ProjectSearchSerializer(serializers.ModelSerializer): | ||
| class Meta: | ||
| model = Project | ||
| exclude = () | ||
|
|
||
| class DrawerSearchSerializer(serializers.ModelSerializer): | ||
| color = serializers.CharField(source="project.color", read_only=True) | ||
|
|
||
| class Meta: | ||
| model = Drawer | ||
| exclude = () | ||
|
|
||
| class TaskSearchSerializer(serializers.ModelSerializer): | ||
| color = serializers.CharField(source="drawer.project.color", read_only=True) | ||
|
|
||
| class Meta: | ||
| model = Task | ||
| exclude = () |
There was a problem hiding this comment.
exclude = ()는 모든 모델 필드를 노출합니다 -- 명시적 fields 사용을 권장합니다.
세 직렬화기 모두 exclude = ()를 사용하여 모델의 모든 필드를 직렬화합니다. 이는 user FK, deleted_at, 내부 관리용 필드 등 프론트엔드에서 불필요하거나 민감한 데이터가 검색 API 응답에 포함될 수 있음을 의미합니다.
최소 권한 원칙에 따라 exclude = () 대신 프론트엔드에서 실제로 사용하는 필드만 명시적으로 fields 리스트로 지정하는 것을 권장합니다. frontend/src/api/search.api.ts의 타입 정의를 참고하여 필요한 필드를 결정할 수 있습니다.
또한, 파이프라인의 pyright 오류를 해결하려면 기존 코드베이스 패턴(backend/projects/serializers.py Line 31 참고)에 맞춰 Meta 클래스에 # pyright: ignore [reportIncompatibleVariableOverride] 주석을 추가하세요.
ProjectSearchSerializer 수정 예시
class ProjectSearchSerializer(serializers.ModelSerializer):
- class Meta:
+ class Meta: # pyright: ignore [reportIncompatibleVariableOverride]
model = Project
- exclude = ()
+ fields = ["id", "name", "color", "type", "privacy"]🧰 Tools
🪛 GitHub Check: type
[failure] 22-22:
"Meta" overrides symbol of same name in class "ModelSerializer"
"backend.search.serializers.TaskSearchSerializer.Meta" is not assignable to "rest_framework.serializers.ModelSerializer.Meta"
Type "type[backend.search.serializers.TaskSearchSerializer.Meta]" is not assignable to type "type[rest_framework.serializers.ModelSerializer.Meta]" (reportIncompatibleVariableOverride)
[failure] 15-15:
"Meta" overrides symbol of same name in class "ModelSerializer"
"backend.search.serializers.DrawerSearchSerializer.Meta" is not assignable to "rest_framework.serializers.ModelSerializer.Meta"
Type "type[backend.search.serializers.DrawerSearchSerializer.Meta]" is not assignable to type "type[rest_framework.serializers.ModelSerializer.Meta]" (reportIncompatibleVariableOverride)
[failure] 8-8:
"Meta" overrides symbol of same name in class "ModelSerializer"
"backend.search.serializers.ProjectSearchSerializer.Meta" is not assignable to "rest_framework.serializers.ModelSerializer.Meta"
Type "type[backend.search.serializers.ProjectSearchSerializer.Meta]" is not assignable to type "type[rest_framework.serializers.ModelSerializer.Meta]" (reportIncompatibleVariableOverride)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/search/serializers.py` around lines 7 - 24, Replace the unsafe
"exclude = ()" in ProjectSearchSerializer, DrawerSearchSerializer, and
TaskSearchSerializer by explicitly listing only the fields the frontend needs
(use the types in frontend/src/api/search.api.ts to determine the exact fields)
in each serializer's Meta.fields; for DrawerSearchSerializer and
TaskSearchSerializer keep the computed "color =
serializers.CharField(source='project.color', read_only=True)" field and include
its name in their Meta.fields as well; finally, add the same "# pyright: ignore
[reportIncompatibleVariableOverride]" comment inside each Meta class (following
the pattern used in backend/projects/serializers.py) to silence the pyright
override warning.
Comment on lines
+11
to
+36
| def global_search(query, scope): | ||
| results = dict() | ||
|
|
||
| # TODO: global한 결과를 내놓기에 각 결과가 FK object 전체를 들고 오는 것보다 필요한 color만 쓰는 것이 낫다 판단함. | ||
| # 검색 옵션에 따라 project, drawer object를 같이 반환하도록 하는 것을 고려 | ||
| # drawer serializer 참고 | ||
| targets = { | ||
| "task": {"objects": Task.objects.select_related("drawer__project"), "serializer": TaskSearchSerializer}, | ||
| "drawer": {"objects": Drawer.objects.select_related("project"), "serializer": DrawerSearchSerializer}, | ||
| "project": {"objects": Project.objects, "serializer": ProjectSearchSerializer}, | ||
| } | ||
|
|
||
| for key, value in targets.items(): | ||
| if scope & SCOPE_BITMASK[key]: | ||
| query_set = value["objects"].filter( | ||
| Q(name__icontains=query) | ||
| ) | ||
| count = query_set.count() | ||
|
|
||
| if count > SEARCH_PREVIEW_LIMIT: | ||
| query_set = query_set[:SEARCH_PREVIEW_LIMIT] | ||
|
|
||
| data = value["serializer"](query_set, many=True).data | ||
| results[key] = {"data": data, "count": count} | ||
| else: | ||
| results[key] = {"data": [], "count": 0} |
There was a problem hiding this comment.
사용자 격리 없음 — 전체 사용자 데이터 노출 (보안 취약점)
global_search()는 user 매개변수를 전혀 받지 않으며, Task.objects, Drawer.objects, Project.objects 각각에 .filter(user=user) 조건이 없습니다. 결과적으로 인증된 모든 사용자가 다른 사용자의 작업, 서랍, 프로젝트를 검색해서 볼 수 있습니다.
함수 시그니처에 user 매개변수를 추가하고 각 쿼리셋에 사용자 필터를 적용해야 합니다.
Proposed fix
-def global_search(query, scope):
+def global_search(query, scope, user):
results = dict()
targets = {
- "task": {"objects": Task.objects.select_related("drawer__project"), "serializer": TaskSearchSerializer},
- "drawer": {"objects": Drawer.objects.select_related("project"), "serializer": DrawerSearchSerializer},
- "project": {"objects": Project.objects, "serializer": ProjectSearchSerializer},
+ "task": {"objects": Task.objects.filter(user=user).select_related("drawer__project"), "serializer": TaskSearchSerializer},
+ "drawer": {"objects": Drawer.objects.filter(user=user).select_related("project"), "serializer": DrawerSearchSerializer},
+ "project": {"objects": Project.objects.filter(user=user), "serializer": ProjectSearchSerializer},
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| def global_search(query, scope): | |
| results = dict() | |
| # TODO: global한 결과를 내놓기에 각 결과가 FK object 전체를 들고 오는 것보다 필요한 color만 쓰는 것이 낫다 판단함. | |
| # 검색 옵션에 따라 project, drawer object를 같이 반환하도록 하는 것을 고려 | |
| # drawer serializer 참고 | |
| targets = { | |
| "task": {"objects": Task.objects.select_related("drawer__project"), "serializer": TaskSearchSerializer}, | |
| "drawer": {"objects": Drawer.objects.select_related("project"), "serializer": DrawerSearchSerializer}, | |
| "project": {"objects": Project.objects, "serializer": ProjectSearchSerializer}, | |
| } | |
| for key, value in targets.items(): | |
| if scope & SCOPE_BITMASK[key]: | |
| query_set = value["objects"].filter( | |
| Q(name__icontains=query) | |
| ) | |
| count = query_set.count() | |
| if count > SEARCH_PREVIEW_LIMIT: | |
| query_set = query_set[:SEARCH_PREVIEW_LIMIT] | |
| data = value["serializer"](query_set, many=True).data | |
| results[key] = {"data": data, "count": count} | |
| else: | |
| results[key] = {"data": [], "count": 0} | |
| def global_search(query, scope, user): | |
| results = dict() | |
| # TODO: global한 결과를 내놓기에 각 결과가 FK object 전체를 들고 오는 것보다 필요한 color만 쓰는 것이 낫다 판단함. | |
| # 검색 옵션에 따라 project, drawer object를 같이 반환하도록 하는 것을 고려 | |
| # drawer serializer 참고 | |
| targets = { | |
| "task": {"objects": Task.objects.filter(user=user).select_related("drawer__project"), "serializer": TaskSearchSerializer}, | |
| "drawer": {"objects": Drawer.objects.filter(user=user).select_related("project"), "serializer": DrawerSearchSerializer}, | |
| "project": {"objects": Project.objects.filter(user=user), "serializer": ProjectSearchSerializer}, | |
| } | |
| for key, value in targets.items(): | |
| if scope & SCOPE_BITMASK[key]: | |
| query_set = value["objects"].filter( | |
| Q(name__icontains=query) | |
| ) | |
| count = query_set.count() | |
| if count > SEARCH_PREVIEW_LIMIT: | |
| query_set = query_set[:SEARCH_PREVIEW_LIMIT] | |
| data = value["serializer"](query_set, many=True).data | |
| results[key] = {"data": data, "count": count} | |
| else: | |
| results[key] = {"data": [], "count": 0} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/search/service.py` around lines 11 - 36, global_search currently
lacks user isolation; change the function signature of global_search to accept a
user parameter and apply user-scoped filtering to each target queryset before
applying the name Q filter and pagination. Concretely, update the
construction/usage of targets/values (Task.objects.select_related(...),
Drawer.objects.select_related(...), Project.objects) so you derive a base_qs =
value["objects"].filter(user=user) (or the correct owner field if the model uses
a different name) and then do base_qs.filter(Q(name__icontains=query)); keep the
existing SCOPE_BITMASK check, SEARCH_PREVIEW_LIMIT slice logic, and serializers
(TaskSearchSerializer, DrawerSearchSerializer, ProjectSearchSerializer)
unchanged. Ensure results still return {"data": ..., "count": ...} but only from
the user-scoped querysets.
Comment on lines
+29
to
+62
| class ProjectSearchView(APIView): | ||
| def get(self, request, *args, **kwargs): | ||
| q = request.query_params.get("query", "").strip() | ||
|
|
||
| # query가 비어있으면 빈 결과 반환 | ||
| # TODO: 나중에 프로젝트 페이지와 합치게 되면 전부 보이는 걸로 바뀌어야 할 지도? | ||
| if not q: | ||
| return Response({ | ||
| "projects": [], | ||
| "drawers": [], | ||
| "tasks": [], | ||
| }) | ||
|
|
||
| project_qs = Project.objects.filter( | ||
| Q(name__icontains=q) | ||
| ) | ||
|
|
||
| drawer_qs = Drawer.objects.select_related("project").filter( | ||
| Q(name__icontains=q) | ||
| ) | ||
|
|
||
| task_qs = Task.objects.select_related("drawer__project").filter( | ||
| Q(name__icontains=q) | ||
| ) | ||
|
|
||
| project_data = ProjectSearchSerializer(project_qs, many=True).data | ||
| drawer_data = DrawerSearchSerializer(drawer_qs, many=True).data | ||
| task_data = TaskSearchSerializer(task_qs, many=True).data | ||
|
|
||
| return Response({ | ||
| "projects": project_data, | ||
| "drawers": drawer_data, | ||
| "tasks": task_data, | ||
| }) |
There was a problem hiding this comment.
ProjectSearchView가 urls.py에 등록되지 않음 — 사용자 필터도 없음
backend/search/urls.py에는 GlobalSearchView만 등록되어 있고 ProjectSearchView는 어디서도 라우팅되지 않습니다. 또한 project_qs, drawer_qs, task_qs 모두 사용자 필터 없이 전체 테이블을 조회합니다.
이 뷰가 현재 PR에서 의도된 기능이라면 URL 등록 및 사용자 필터를 추가하고, 그렇지 않다면 제거하는 것을 권장합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/search/views.py` around lines 29 - 62, ProjectSearchView is not
routed and its queries lack per-user filtering: register ProjectSearchView in
your URL config (the same module where GlobalSearchView is registered) so the
endpoint is reachable, and restrict project_qs, drawer_qs, and task_qs to the
current user by filtering on ownership/relations (e.g.,
Project.objects.filter(owner=request.user, ...) or using related lookups like
drawer__project__owner=request.user) before serializing; also ensure the view
enforces authentication/permissions (e.g., IsAuthenticated) so request.user is
available.
Comment on lines
+43
to
+50
| return ( | ||
| <ProjectNameBox | ||
| $isInbox={isInbox}> | ||
| <NameBox> | ||
| <FeatherIcon icon="circle" fill={color} /> | ||
| <div onClick={() => navigate(projectLink)} role="link"> | ||
| <NameText>{name}</NameText> | ||
| </div> |
There was a problem hiding this comment.
접근성 개선: div + role="link" 대신 시맨틱 요소 사용 필요.
Line 48에서 <div onClick={...} role="link">를 사용하고 있지만, 키보드 이벤트 핸들러(onKeyDown)가 없어 키보드 사용자가 탐색할 수 없습니다. role="link"를 지정하면 스크린 리더가 링크로 인식하지만, 실제 포커스 및 키보드 활성화가 지원되지 않습니다.
React Router의 <Link> 컴포넌트를 사용하면 접근성과 네비게이션을 모두 해결할 수 있습니다.
수정 제안
+import { Link } from "react-router-dom"
...
- <div onClick={() => navigate(projectLink)} role="link">
- <NameText>{name}</NameText>
- </div>
+ <Link to={projectLink} style={{ textDecoration: "none" }}>
+ <NameText>{name}</NameText>
+ </Link>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| return ( | |
| <ProjectNameBox | |
| $isInbox={isInbox}> | |
| <NameBox> | |
| <FeatherIcon icon="circle" fill={color} /> | |
| <div onClick={() => navigate(projectLink)} role="link"> | |
| <NameText>{name}</NameText> | |
| </div> | |
| return ( | |
| <ProjectNameBox | |
| $isInbox={isInbox}> | |
| <NameBox> | |
| <FeatherIcon icon="circle" fill={color} /> | |
| <Link to={projectLink} style={{ textDecoration: "none" }}> | |
| <NameText>{name}</NameText> | |
| </Link> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/components/search/ResultBox.tsx` around lines 43 - 50, Replace
the non-semantic <div onClick={...} role="link"> used in the JSX inside
ProjectNameBox/NameBox with a proper React Router <Link> so keyboard and
screen-reader users can focus and activate the project navigation; update the
import to bring in Link from react-router-dom, change the element that currently
uses navigate(projectLink) to <Link to={projectLink}> (wrapping NameText and the
icon as needed), and remove the manual onClick/role attributes so accessibility
is handled by the Link component (refer to ProjectNameBox, NameBox, FeatherIcon,
NameText, navigate, projectLink to locate the change).
Comment on lines
+60
to
+76
| export const DrawerResultBox = ({ drawer } : { drawer: DrawerSearchResult }) => { | ||
| const color = usePaletteColor(drawer.color) | ||
|
|
||
| return ( | ||
| <DrawerBox | ||
| $color={color} | ||
| $isDragging={false} | ||
| $isDraggable={true} | ||
| > | ||
| <DrawerTitleBox> | ||
| <DrawerName $color={color}>{drawer.name}</DrawerName> | ||
| <PrivacyIcon privacy={drawer.privacy} color={color} /> | ||
| </DrawerTitleBox> | ||
| {/* DrawerIcons */} | ||
| </DrawerBox> | ||
| ) | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find the ResultBox.tsx file
fd 'ResultBox.tsx' --type fRepository: GooseMoment/Peak
Length of output: 104
🏁 Script executed:
# Check the file structure to understand the project layout
git ls-files frontend/src/components/search/ | head -20Repository: GooseMoment/Peak
Length of output: 336
🏁 Script executed:
# Search for navigation patterns in result box components
rg -n "ResultBox|useNavigate|navigate|Link|router" frontend/src/components/search/ -A 3 -B 1Repository: GooseMoment/Peak
Length of output: 5513
🏁 Script executed:
# Look for ProjectResultBox implementation to see the navigation pattern
ast-grep --pattern 'export const ProjectResultBox'Repository: GooseMoment/Peak
Length of output: 2539
🏁 Script executed:
# Read the full ResultBox.tsx file to see all components
cat -n frontend/src/components/search/ResultBox.tsxRepository: GooseMoment/Peak
Length of output: 6111
🏁 Script executed:
# Search for routing/navigation patterns in drawer and task related files
rg -n "drawer.*navigate|navigate.*drawer" frontend/src/ -iRepository: GooseMoment/Peak
Length of output: 190
🏁 Script executed:
# Check if there are specific drawer and task detail pages/routes
fd -e tsx -e ts | xargs grep -l "drawer.*detail\|task.*detail" | head -10Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Search for routing patterns to understand drawer and task navigation paths
rg -n "drawer.*id|task.*id" frontend/src/router/ -A 2 -B 2Repository: GooseMoment/Peak
Length of output: 120
🏁 Script executed:
# Check the main router file for drawer and task route definitions
fd -e ts -e tsx | xargs grep -l "mainRouter\|createBrowserRouter" | head -5Repository: GooseMoment/Peak
Length of output: 128
🏁 Script executed:
# Search for drawer detail pages or modals
rg -n "DrawerDetail\|DrawerPage\|drawer" frontend/src/pages/ -lRepository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Check how drawers are typically opened/accessed in the app
rg -n "navigate.*drawer\|drawer.*navigate\|useNavigate" frontend/src/components/drawers/ -A 2Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Check the mainRouter structure to see drawer and task routes
cat -n frontend/src/routers/mainRouter.tsx | head -100Repository: GooseMoment/Peak
Length of output: 3637
🏁 Script executed:
# Search for drawer-related routing in the entire codebase
rg -n "drawer" frontend/src/routers/ -iRepository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Look for how drawers are accessed/opened in the drawer components
rg -n "useNavigate\|navigate" frontend/src/components/drawers/ -A 3Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Check the structure of pages directory to understand how drawers and tasks are handled
git ls-files frontend/src/pages/ | head -30Repository: GooseMoment/Peak
Length of output: 1230
🏁 Script executed:
# Check if there are drawer or task detail pages/routes
cat -n frontend/src/routers/mainRouter.tsx | tail -100Repository: GooseMoment/Peak
Length of output: 3552
🏁 Script executed:
# Search for how drawers are accessed in the main UI
rg -n "DrawerBox\|TaskResultBox" frontend/src/ -A 5 | head -50Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Check HomePage to see how drawers are accessed
rg -n "drawer\|Drawer" frontend/src/pages/HomePage.tsx -i -A 2 | head -40Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Look for modal or sidebar patterns for drawers and tasks
rg -n "Modal\|Sidebar\|Panel" frontend/src/components/drawers/ -iRepository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Check how drawers are accessed within a project
rg -n "drawer\|Drawer" frontend/src/pages/ProjectPage.tsx -i -A 2 | head -60Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Check if there are drawer modals or popups
rg -n "DrawerModal\|DrawerPopup\|openDrawer" frontend/src/ -i | head -20Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Look for how the app navigates to tasks or drawers from search results context
rg -n "search.*navigate\|SearchPage" frontend/src/pages/SearchPage.tsx -A 5 -B 5 | head -80Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Check the ProjectPage to understand the structure
cat -n frontend/src/pages/ProjectPage.tsx | head -100Repository: GooseMoment/Peak
Length of output: 4369
🏁 Script executed:
# Check how drawers are accessed in search results or globally
rg -n "drawerModal\|useModal" frontend/src/pages/SearchPage.tsx -A 5Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Examine the GlobalSearchResults to understand the intended behavior
cat -n frontend/src/components/search/GlobalSearchResults.tsxRepository: GooseMoment/Peak
Length of output: 2525
🏁 Script executed:
# Check DrawerBlock to understand how drawers are displayed and accessed
rg -n "export.*DrawerBlock" frontend/src/components/drawers/DrawerBlock.tsx -A 20Repository: GooseMoment/Peak
Length of output: 90
🏁 Script executed:
# Get the full DrawerBlock implementation
cat -n frontend/src/components/drawers/DrawerBlock.tsx | head -200Repository: GooseMoment/Peak
Length of output: 8580
🏁 Script executed:
# Check if DrawerBox or DrawerBlock has click handlers or navigation
rg -n "onClick\|navigate" frontend/src/components/drawers/DrawerBlock.tsx -A 3Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Check if there's a way to access drawers from search - look at the broader search functionality
cat -n frontend/src/pages/SearchPage.tsxRepository: GooseMoment/Peak
Length of output: 9599
🏁 Script executed:
# Check if there are any modals or alternative patterns for drawer/task access in search
rg -n "DrawerDetail\|TaskDetail\|modal\|Modal" frontend/src/pages/SearchPage.tsx -iRepository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Look for any onClick handlers or navigation in DrawerBox or related components
rg -n "onClick\|navigate" frontend/src/components/drawers/DrawerBox.tsx -A 3Repository: GooseMoment/Peak
Length of output: 42
🏁 Script executed:
# Check if there's documentation or TODO comments about search navigation
rg -n "TODO|FIXME|search.*navigate\|navigate.*search" frontend/src/components/search/ -iRepository: GooseMoment/Peak
Length of output: 532
🏁 Script executed:
# Verify the structure: check the drawer and task API response types to confirm they have necessary IDs
rg -n "DrawerSearchResult\|TaskSearchResult" frontend/src/api/search.api.ts -A 10Repository: GooseMoment/Peak
Length of output: 42
DrawerResultBox와 TaskResultBox에 네비게이션 기능이 없습니다.
ProjectResultBox는 클릭 시 해당 프로젝트로 이동하는 네비게이션이 구현되어 있으나(useNavigate(), onClick 핸들러), DrawerResultBox(60-76)와 TaskResultBox(87-118)는 네비게이션 로직이 전혀 없습니다. 검색 결과에서 선택한 Drawer나 Task로 이동할 수 있도록 동일한 패턴을 적용하거나, 의도적으로 미구현 상태라면 명확한 TODO 주석을 남겨야 합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/components/search/ResultBox.tsx` around lines 60 - 76,
DrawerResultBox and TaskResultBox lack navigation handling present in
ProjectResultBox; update DrawerResultBox (function DrawerResultBox) and
TaskResultBox (function TaskResultBox) to use react-router's useNavigate() and
attach an onClick handler that navigates to the appropriate route (the same
pattern used in ProjectResultBox) using drawer.id / task.id (or the same
route-building helper used by ProjectResultBox), or if navigation is
intentionally omitted add a clear TODO comment inside each component explaining
why navigation is not implemented; ensure the clickable container (e.g.,
DrawerBox) receives the onClick and accessible role/tabIndex if making it
interactive.
Comment on lines
+64
to
+90
| // Edit query | ||
| const handleChange = (e: ChangeEvent<HTMLInputElement>) => { | ||
| setSearchInput(e.target.value) | ||
|
|
||
| // Debounce | ||
| if (debounceTimerRef.current !== null) { | ||
| window.clearTimeout(debounceTimerRef.current) | ||
| } | ||
|
|
||
| debounceTimerRef.current = window.setTimeout(() => { | ||
| const trimmed = e.target.value.trim() | ||
| handleExecuteSearch(trimmed) | ||
| }, 1000) | ||
| } | ||
|
|
||
| // End and search | ||
| const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| if (e.key == "Enter") { | ||
| const trimed = searchInput.trim() | ||
| handleExecuteSearch(trimed) | ||
| } | ||
| } | ||
|
|
||
| const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => { | ||
| const trimed = e.target.value.trim() | ||
| handleExecuteSearch(trimed) | ||
| } |
There was a problem hiding this comment.
Enter 키 입력 및 blur 시 debounce 타이머를 취소하지 않아 검색이 중복 실행될 수 있습니다.
handleChange에서 1초 debounce 타이머가 설정된 후, 사용자가 Enter를 누르거나 input에서 blur되면 handleExecuteSearch가 즉시 호출됩니다. 그러나 기존 debounce 타이머는 취소되지 않으므로, 타이머 만료 시 동일한 검색이 한 번 더 실행됩니다. lastSearchRef로 중복을 일부 방지하지만, 사용자가 blur 후 다시 값을 변경하는 경우 등 타이밍에 따라 예상치 못한 동작이 발생할 수 있습니다.
수정 제안: Enter/blur 핸들러에서 debounce 타이머 취소
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key == "Enter") {
+ if (debounceTimerRef.current !== null) {
+ window.clearTimeout(debounceTimerRef.current)
+ debounceTimerRef.current = null
+ }
- const trimed = searchInput.trim()
- handleExecuteSearch(trimed)
+ const trimmed = searchInput.trim()
+ handleExecuteSearch(trimmed)
}
}
const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
- const trimed = e.target.value.trim()
- handleExecuteSearch(trimed)
+ if (debounceTimerRef.current !== null) {
+ window.clearTimeout(debounceTimerRef.current)
+ debounceTimerRef.current = null
+ }
+ const trimmed = e.target.value.trim()
+ handleExecuteSearch(trimmed)
}추가로 변수명 trimed는 trimmed의 오타입니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/components/search/Search.tsx` around lines 64 - 90, Cancel the
pending debounce timer in handleKeyDown and handleBlur before calling
handleExecuteSearch to avoid duplicate searches: check debounceTimerRef.current,
call window.clearTimeout(debounceTimerRef.current) and set
debounceTimerRef.current = null, then call handleExecuteSearch with the trimmed
input; also fix the typo variable name trimed to trimmed in both handlers and
ensure you use searchInput.trim() in handleKeyDown and e.target.value.trim() in
handleBlur to match handleExecuteSearch usage.
Comment on lines
+75
to
+80
| <SidebarLink to="search" key="search" end> | ||
| <ItemBox $collapsed={isCollapsed}> | ||
| <FeatherIcon icon="archive" /> | ||
| {isCollapsed ? null : t("sidebar.projects")} | ||
| </ItemBox> | ||
| </SidebarLink> |
There was a problem hiding this comment.
검색 링크에 잘못된 아이콘(archive)과 번역 키(sidebar.projects) 사용
현재 검색 사이드바 링크는 프로젝트 링크(Lines 83-88)와 완전히 동일한 아이콘과 레이블을 사용합니다. 사용자에게 두 개의 "프로젝트" 항목이 표시되고 검색 링크를 구분할 수 없습니다.
아이콘은 "search"로, 번역 키는 "sidebar.search"로 교체해야 합니다. 해당 번역 키는 ko/translation.json과 en/translation.json의 "sidebar" 블록에도 추가해야 합니다.
Proposed fix (Middle.tsx)
- <SidebarLink to="search" key="search" end>
- <ItemBox $collapsed={isCollapsed}>
- <FeatherIcon icon="archive" />
- {isCollapsed ? null : t("sidebar.projects")}
- </ItemBox>
- </SidebarLink>
+ <SidebarLink to="search" key="search" end>
+ <ItemBox $collapsed={isCollapsed}>
+ <FeatherIcon icon="search" />
+ {isCollapsed ? null : t("sidebar.search")}
+ </ItemBox>
+ </SidebarLink>ko/translation.json의 "sidebar" 블록에 다음을 추가하세요:
"sidebar": {
"home": "홈",
+ "search": "검색",
...
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <SidebarLink to="search" key="search" end> | |
| <ItemBox $collapsed={isCollapsed}> | |
| <FeatherIcon icon="archive" /> | |
| {isCollapsed ? null : t("sidebar.projects")} | |
| </ItemBox> | |
| </SidebarLink> | |
| <SidebarLink to="search" key="search" end> | |
| <ItemBox $collapsed={isCollapsed}> | |
| <FeatherIcon icon="search" /> | |
| {isCollapsed ? null : t("sidebar.search")} | |
| </ItemBox> | |
| </SidebarLink> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/components/sidebar/Middle.tsx` around lines 75 - 80, The search
SidebarLink currently reuses the project icon/label; update the SidebarLink for
"search" by changing the FeatherIcon prop from "archive" to "search" and the
translation call from t("sidebar.projects") to t("sidebar.search") (look for
Navbar component symbols SidebarLink, ItemBox, FeatherIcon, t, and isCollapsed
in Middle.tsx), and add the corresponding "search" entry under the "sidebar"
block in both ko/translation.json and en/translation.json.
Comment on lines
+125
to
+136
| const { | ||
| data: searchData | ||
| } = useQuery({ | ||
| queryKey: ["search", searchQuery], | ||
| // enabled: false, | ||
| enabled: searchQuery.length > 0, | ||
| queryFn: ({queryKey}) => { | ||
| const [, q] = queryKey | ||
| return getGlobalSearchResults(q) | ||
| } | ||
| }) | ||
| const searchResults: SearchResponse = searchData |
There was a problem hiding this comment.
searchData는 undefined일 수 있으나, SearchResponse 타입으로 할당되어 있어 런타임 오류 위험이 있습니다.
useQuery는 쿼리가 비활성화(enabled: false)되었거나 로딩 중일 때 data가 undefined를 반환합니다. Line 136에서 searchData를 SearchResponse 타입으로 직접 할당하면 타입 시스템이 undefined 가능성을 감추게 되어, GlobalSearchResults에서 searchResults.project 등에 접근할 때 런타임 오류가 발생할 수 있습니다.
수정 제안
- const searchResults: SearchResponse = searchData
+ const searchResults: SearchResponse | undefined = searchDataGlobalSearchResults 컴포넌트에서도 searchResults가 undefined인 경우를 처리해야 합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/pages/SearchPage.tsx` around lines 125 - 136, The code assigns
useQuery's data (searchData) directly to SearchResponse which hides that data
may be undefined; change searchResults to be typed as SearchResponse | undefined
(or provide a safe default) and update callers (e.g., GlobalSearchResults) to
guard for undefined before accessing properties like searchResults.project —
i.e., modify the useQuery block (queryKey/queryFn) to keep searchData possibly
undefined and add null checks or early returns/loading/empty-state handling
wherever searchResults is consumed.
Contributor
Author
|
아몰라 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
입니다
나중에 다시 제대로 올릴게요...
Summary by CodeRabbit
릴리스 노트