feat: 프롬프트 필터링 기능 구현

[ccconac]

✅ 체크리스트

• 카테고리 필터링 구현
• 플랫폼 필터링 구현

📝 작업 상세 내용

카테고리/플랫폼 필터링 구현이 완료되었습니다. 필터링 시, URL 파라미터에 id를 노출할지 slug를 노출할지 고민했을 때 URL 가독성 및 SEO 측면에서 slug로 표시하는 게 좋다 생각되어 category=write&platform=chatgpt와 같이 노출되도록 구현했습니다.

✅ 셀프 체크리스트

• 브랜치 확인하기
• 불필요한 코드가 들어가지 않았는지 재확인하기
• issue 닫기
• reiewers, assignees, Lables 등록 확인하기

이슈 번호: #51

Summary by CodeRabbit

릴리스 노트

• New Features

  • 카테고리 및 플랫폼으로 프롬프트를 필터링할 수 있습니다.
  • 좋아하는 프롬프트에 표시 기능이 추가되었습니다.
  • 필터 및 정렬 선택 사항이 URL에 저장되어 공유 및 북마크가 용이합니다.

• Improvements

  • 필터 UI가 상단으로 이동하여 접근성이 향상되었습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

프롬프트 목록 조회에 카테고리와 플랫폼 필터링 기능을 추가합니다. API 요청에 선택적 categoryIds와 platformIds 매개변수를 지원하도록 업데이트하고, UI에서 필터 선택을 통해 URL 매개변수로 관리합니다.

Changes

Cohort / File(s)	Summary
API 타입 및 함수 src/apis/prompts/prompts.ts, src/apis/prompts/prompts.types.ts	GetPromptListParams 인터페이스에 선택적 categoryIds?: number[]와 platformIds?: number[] 필드 추가. getPromptList 함수 서명 업데이트하여 제공된 경우 이들 매개변수를 API 요청에 포함.
선택 옵션 타입 src/components/Input/Input.types.ts, src/hooks/common/useMetaOptions.ts	SelectOption.value 타입을 string에서 string | number로 확장. SelectFieldProps에서 defaultValue 속성 제거. SelectOption에 새로운 slug: string 필드 추가하여 카테고리/플랫폼 메타 옵션 매핑 확장.
프롬프트 목록 페이지 src/pages/PromptList/PromptListPage.tsx	메타 옵션 훅 통합하여 카테고리/플랫폼 필터링 기능 추가. URL 매개변수 처리를 재구조화하여 정렬, 페이지, 카테고리, 플랫폼 필터를 일관되게 관리. 좋아요 표시 처리 로직 추가. UI 레이아웃을 상단 바에 필터 배치 및 라우팅 경로 업데이트로 리팩토링.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

• feat: 필터링 기능 구현 #51: 이 PR은 GetPromptListParams에 categoryIds/platformIds를 추가하고 getPromptList 및 PromptListPage를 통해 카테고리/플랫폼 필터링 기능을 직접 구현합니다.

Possibly related PRs

• feat: 프롬프트 목록 API 연결 #27: 두 PR 모두 프롬프트 목록 API를 수정하며, 해당 PR은 getPromptList 및 관련 타입/훅을 추가한 반면 이번 PR은 동일한 getPromptList/타입 표면을 확장하여 선택적 categoryIds와 platformIds를 수용합니다.

• feat: 프롬프트 정렬 기능 구현 #50: 두 PR 모두 프롬프트 목록 API 타입 및 PromptListPage를 수정하여 목록 요청/쿼리 처리를 확장합니다 (이번 PR은 categoryIds/platformIds 추가, 해당 PR은 정렬 UI 추가).

• feat: 프롬프트 등록 기능 추가 #43: 두 PR 모두 프롬프트 API/타입 및 메타데이터 훅을 수정하여 겹치는 코드 레벨의 변경을 나타냅니다 (예: src/apis/prompts/prompts.ts 및 src/hooks/common/useMetaOptions.ts 수정).

🚥 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 제목은 풀 리퀘스트의 주요 변경사항인 프롬프트 필터링 기능 구현을 명확하게 요약하고 있습니다.
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 feat/51-prompt-filter

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/apis/prompts/prompts.ts (1)

20-25: 빈 배열 전달 시 필터가 의도치 않게 적용될 수 있습니다.

if (categoryIds) / if (platformIds) 체크는 빈 배열([])도 truthy로 평가합니다. 현재 호출부에서는 undefined 또는 요소가 있는 배열만 전달하지만, 향후 빈 배열이 전달되면 불필요한 파라미터가 API에 포함됩니다.

🛡️ 방어적 체크 제안

-  if (categoryIds) params.categoryIds = categoryIds;
-  if (platformIds) params.platformIds = platformIds;
+  if (categoryIds?.length) params.categoryIds = categoryIds;
+  if (platformIds?.length) params.platformIds = platformIds;

src/pages/PromptList/PromptListPage.tsx (3)

25-45: 메타 데이터 로딩 전 필터 파라미터가 무시될 수 있습니다.

categoryOptions/platformOptions가 아직 로딩 중(빈 배열)일 때, URL에 category/platform 파라미터가 있어도 selectedCategory/selectedPlatform이 undefined가 되어 첫 요청이 필터 없이 실행됩니다. 메타 로딩 완료 후 필터가 적용된 재요청이 발생하므로 잠깐 동안 필터되지 않은 결과가 보일 수 있습니다.

useMetaOptions의 isLoading 상태를 활용하여 메타 로딩 중에도 로딩 UI를 표시하면 이 문제를 방지할 수 있습니다.

💡 제안

  const { categoryOptions, platformOptions } = useMetaOptions();
+ const { categoryOptions, platformOptions, isLoading: isMetaLoading } = useMetaOptions();

  // ...

- if (loading) {
+ if (loading || isMetaLoading) {

---

47-55: 필터 옵션 리스트를 useMemo로 메모이제이션하는 것을 권장합니다.

formattedCategoryOptions와 formattedPlatformOptions가 매 렌더마다 새 배열을 생성합니다. categoryOptions/platformOptions는 staleTime: Infinity로 캐시되어 참조가 안정적이므로 useMemo로 불필요한 재생성을 방지할 수 있습니다.

---

87-95: handleFilterChange의 key 파라미터를 타입 안전하게 제한할 수 있습니다.

key가 string으로 선언되어 있어 임의의 문자열이 전달될 수 있습니다.

💡 타입 제한 제안

- const handleFilterChange = (key: string, value: string) => {
+ const handleFilterChange = (key: 'category' | 'platform', value: string) => {

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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