@axboot-mcp/mcp-server 1.0.0

package/src/prompts/search-params.md

@@ -0,0 +1,793 @@
+# SearchParams 생성 가이드
+
+이 프롬프트는 NH-FE-B 패턴의 SearchParams 컴포넌트를 자동 생성하는 방법을 안내합니다.
+
+## 사용자 요청 인식
+
+사용자가 다음과 같은 요청을 하면 이 가이드를 따르세요:
+- "search params를 만들어줘"
+- "검색 조건 추가해줘"
+- "SearchParams 생성"
+- "dateRange code:XXX search 추가"
+
+## 처리 단계
+
+### 1. 파라미터 파싱
+
+사용자 입력에서 다음 패턴을 추출:
+- `dateRange` 또는 `dateRange:withPeriod` - 날짜 범위
+- `code:CODE_NAME` 또는 `code:CODE_NAME:multi` - 코드 선택
+- `search` 또는 `search:withType` - 검색어
+- `finder:라벨:필드명:모달함수:너비` - VALUES_FINDER
+- `cascade:라벨:필드명:옵션변수:너비` - CASCADE
+- `numberRange:라벨:필드명` - 숫자 범위
+- `radio:라벨:필드명[:옵션들]` - 라디오 버튼
+- `checkbox:라벨:필드명:CODE_VAR` - 체크박스
+
+**예시:**
+```
+사용자: "search params 만들어줘: dateRange code:STATUS_CODE search"
+
+파싱 결과:
+- dateRange: { withPeriodType: false }
+- code:STATUS_CODE: { name: "statusCd", codeVar: "STATUS_CODE", multi: false }
+- search: { withSearchType: false }
+```
+
+### 2. 파일 경로 확인
+
+**현재 열린 App.tsx 찾기:**
+```typescript
+// mcp__jetbrains__get_all_open_file_paths 호출
+// 또는 사용자가 지정한 경로 사용
+```
+
+파일이 없으면 사용자에게 경로 요청.
+
+### 3. Store 자동 감지 (중요!)
+
+App.tsx와 동일한 경로(`src/pages/resources/xxx/`)에서 Store 파일을 찾습니다.
+
+**Store 파일 찾기:**
+1. `use*.ts` 패턴으로 파일 검색 (예: `useSystemSeoStore.ts`, `useMemberStore.ts`)
+2. 또는 `*.Store.ts` 패턴으로 검색
+3. 찾은 Store 파일명으로 import 문 생성
+
+**Store import 예시:**
+```typescript
+// App.tsx 경로: /src/pages/resources/test/App.tsx
+// Store 파일: /src/pages/resources/test/useSystemSeoStore.ts
+
+import { useSystemSeoStore } from "./useSystemSeoStore";
+```
+
+**필요한 Store 상태 선언:**
+```typescript
+const callListApi = useSystemSeoStore((s) => s.callListApi);
+const listRequestValue = useSystemSeoStore((s) => s.listRequestValue);
+const setListRequestValue = useSystemSeoStore((s) => s.setListRequestValue);
+const listSpinning = useSystemSeoStore((s) => s.listSpinning);
+```
+
+**Store 파일을 찾지 못한 경우:**
+- 사용자에게 Store 파일 경로를 요청
+- 또는 `useXxxStore` 형태로 가정하고 진행 후 나중에 수정 요청
+
+### 4. 코드 자동 추가 (중요!)
+
+**모든 코드 사용 패턴에서 자동으로 CodeModel에 추가**
+
+다음 경우에 `CodeModel` 인터페이스에 코드를 자동으로 추가합니다:
+1. `code:XXX` 파라미터 발견 시
+2. `const XXX = useCodeStore((s) => s.XXX);` 패턴 사용 시
+3. `options: XXX?.options ?? []` 사용 시
+
+**자동 추가 절차 (실제 파일 수정):**
+
+1. `/Users/kyle/Desktop/nh-fe-bo/src/stores/useCodeStore.ts` 파일 읽기
+2. `CodeModel` 인터페이스에서 해당 코드 존재 확인
+3. **없으면 실제로 파일을 수정하여 추가** (알파벳순 정렬)
+
+**⚠️ 반드시 실제 파일을 수정해야 합니다!**
+- 단순히 설명만 하지 말고 **실제로 파일을 편집하세요**
+- `Read` 도구로 파일을 읽고 `Edit` 도구로 수정하세요
+- 알파벳순으로 올바른 위치에 삽입하세요
+
+**코드 추출 규칙:**
+```typescript
+// code:STATUS_CODE → 추출: STATUS_CODE
+// const STATUS_CODE = useCodeStore((s) => s.STATUS_CODE); → 추출: STATUS_CODE
+// options: STATUS_CODE?.options → 추출: STATUS_CODE
+// const CHANNEL_TYPE = useCodeStore((s) => s.CHANNEL_TYPE); → 추출: CHANNEL_TYPE
+```
+
+**실제 파일 수정 예시:**
+```typescript
+// 1. 파일 읽기
+// /Users/kyle/Desktop/nh-fe-bo/src/stores/useCodeStore.ts
+
+// 2. CodeModel 인터페이스 확인
+export interface CodeModel {
+  // ... 기존 코드들 ...
+  // CHANNEL_TYPE이 있는지 확인
+}
+
+// 3. 없으면 실제로 수정 (Edit 도구 사용)
+// 알파벳순으로 C... 영역에 추가:
+export interface CodeModel {
+  // ... 기존 코드들 ...
+  CHANNEL_TYPE?: Code;  // ← 실제로 파일에 추가 (알파벳순 C 위치)
+  // ... 이후 코드들 ...
+}
+```
+
+**⚠️ 중요: 모든 코드 사용 전에 CodeModel 확인 및 자동 추가**
+```typescript
+// 1단계: 코드명 추출 (예: CHANNEL_TYPE)
+// 2단계: CodeModel 확인 (Read 도구로 파일 읽기)
+// 3단계: 없으면 실제로 파일 수정 (Edit 도구로 추가)
+// 4단계: 그 후에야 코드 사용 가능
+const CHANNEL_TYPE = useCodeStore((s) => s.CHANNEL_TYPE);
+```
+
+**파일 수정 시 주의사항:**
+- 파일 경로: `/Users/kyle/Desktop/nh-fe-bo/src/stores/useCodeStore.ts`
+- 반드시 `Edit` 도구를 사용하여 실제 파일을 수정
+- 알파벳순 정렬 준수 (A→Z 순서)
+- 주석 포함: `// 코드 설명`
+
+### 5. Import 문 추가
+
+App.tsx 상단에 필요한 import 추가:
+
+```typescript
+import { IParam, SearchParams, SearchParamType } from "@core/components/search";
+import { DT_FORMAT } from "@types";
+import { DtPickerPresetRender } from "components/presetRender/DtPickerPresetRender";
+import { useCodeStore } from "stores";  // ⚠️ "hooks"가 아닌 "stores"에서 import
+```
+
+**⚠️ 중요: useCodeStore는 반드시 "stores"에서 import하세요**
+```typescript
+// ❌ 잘못된 예
+import { useCodeStore } from "hooks";
+
+// ✅ 올바른 예
+import { useCodeStore } from "stores";
+```
+
+**⚠️ 중요: SearchBarFormInstance는 import하지 말고, Form.useForm()에 제네릭 타입을 지정하지 마세요**
+```typescript
+// ❌ 잘못된 예
+import { SearchBarFormInstance } from "@core/components/search";
+const [searchForm] = Form.useForm<SearchBarFormInstance>();
+
+// ✅ 올바른 예
+const [searchForm] = Form.useForm();
+```
+
+**finder 사용 시 추가:**
+```typescript
+import { open모달함수 } from "modals/...";
+```
+
+**cascade 사용 시 추가:**
+```typescript
+import { useOrganizationCascadeData } from "hooks/useOrganizationCascadeData";
+```
+
+### 6. Code Store 선언
+
+컴포넌트 내부에 필요한 코드 선언:
+
+```typescript
+const STATUS_CODE = useCodeStore((s) => s.STATUS_CODE);
+const CUPON_KN_TPCD = useCodeStore((s) => s.CUPON_KN_TPCD);
+```
+
+**⚠️ 중요: 4단계 "코드 자동 추가"를 먼저 수행하세요**
+- `const XXX = useCodeStore((s) => s.XXX);`를 선언하기 전에
+- `XXX`가 `CodeModel` 인터페이스에 있는지 확인
+- 없으면 4단계 절차에 따라 자동으로 추가
+
+**cascade 사용 시:**
+```typescript
+const { list: organizationOption } = useOrganizationCascadeData();
+```
+
+### 7. params 배열 생성
+
+파싱된 파라미터를 TypeScript 코드로 변환:
+
+```typescript
+const params: IParam[] = [
+  // dateRange 파라미터
+  {
+    label: t("기간"),
+    placeholder: [t("년월일"), t("년월일")],
+    name: "dateRange",
+    type: SearchParamType.DTPICKER_DATE_RANGE,
+    format: DT_FORMAT.DATE,
+    isTimeSelector: false,
+    presetRender: DtPickerPresetRender({ type: "all" }),
+  },
+
+  // code:STATUS_CODE 파라미터
+  {
+    label: t("상태"),
+    name: "statusCd",
+    type: SearchParamType.SELECT,
+    width: 150,
+    options: STATUS_CODE?.options ?? [],
+    showSearch: false,
+    allowClear: true,
+  },
+
+  // search 파라미터
+  {
+    label: t("검색어"),
+    placeholder: t("검색어"),
+    name: "searchText",
+    type: SearchParamType.INPUT,
+  },
+];
+```
+
+### 8. PageSearchBar 추가
+
+return 문 내부에 SearchParams 컴포넌트 추가:
+
+```tsx
+<PageSearchBar>
+  <SearchParams
+    form={searchForm}
+    params={params}
+    paramsValue={listRequestValue}
+    onChangeParamsValue={(value, changedValues) => setListRequestValue(value, changedValues)}
+    onSearch={handleSearch}
+    spinning={listSpinning}
+  />
+</PageSearchBar>
+```
+
+### 9. PageSearchBar 스타일 확인/추가
+
+App.tsx 하단의 styled 컴포넌트 영역에 `PageSearchBar` 스타일이 있는지 확인합니다.
+
+**있으면 패스:**
+```typescript
+const PageSearchBar = styled(PageLayout.PageSearchBar)``;
+```
+
+**없으면 추가:**
+```typescript
+const PageSearchBar = styled(PageLayout.PageSearchBar)``;
+```
+
+위치는 `const Header = styled(PageLayout.Header)``;` 다음, `const Body = styled(PageLayout.FrameRow)``;` 전에 추가합니다.
+
+```typescript
+const Container = styled(PageLayout)``;
+const Header = styled(PageLayout.Header)``;
+const PageSearchBar = styled(PageLayout.PageSearchBar)``;  // ← 추가
+const Body = styled(PageLayout.FrameRow)``;
+```
+
+### 10. Form.useForm() 선언 확인
+
+App.tsx 컴포넌트 내부에 `searchForm` 선언이 있는지 확인합니다.
+
+```typescript
+const [searchForm] = Form.useForm();
+```
+
+**⚠️ 중요: 제네릭 타입을 지정하지 마세요**
+```typescript
+// ❌ 잘못된 예
+import { SearchBarFormInstance } from "@core/components/search";
+const [searchForm] = Form.useForm<SearchBarFormInstance>();
+
+// ✅ 올바른 예
+const [searchForm] = Form.useForm();
+```
+
+없으면 `const resizerContainerRef = React.useRef<HTMLDivElement>(null);` 근처에 추가합니다.
+
+## 파라미터 타입별 변환 규칙
+
+### dateRange
+```typescript
+{
+  label: t("기간"),
+  placeholder: [t("년월일"), t("년월일")],
+  name: "dateRange",
+  type: SearchParamType.DTPICKER_DATE_RANGE,
+  format: DT_FORMAT.DATE,
+  isTimeSelector: false,
+  presetRender: DtPickerPresetRender({ type: "all" }),
+}
+```
+
+**dateRange:withPeriod 인 경우:**
+```typescript
+{
+  type: SearchParamType.GROUP,
+  children: [
+    {
+      label: t("기간구분"),
+      name: "periodType",
+      type: SearchParamType.SELECT,
+      width: 140,
+      options: [
+        { label: t("전체"), value: "" },
+        { label: t("등록일"), value: "01" },
+        { label: t("수정일"), value: "02" },
+      ],
+      showSearch: false,
+      allowClear: false,
+    },
+    {
+      label: t("기간"),
+      placeholder: [t("년월일"), t("년월일")],
+      name: "dateRange",
+      type: SearchParamType.DTPICKER_DATE_RANGE,
+      format: DT_FORMAT.DATE,
+      isTimeSelector: false,
+      presetRender: DtPickerPresetRender({ type: "all" }),
+    },
+  ],
+}
+```
+
+### code:CODE_NAME
+
+**단일 선택 (기본):**
+```typescript
+{
+  label: t("상태"),
+  name: "statusCd",
+  type: SearchParamType.SELECT,
+  width: 150,
+  options: STATUS_CODE?.options ?? [],
+  showSearch: false,
+  allowClear: true,
+}
+```
+
+**다중 선택 (code:CODE_NAME:multi):**
+```typescript
+{
+  label: t("쿠폰종류"),
+  name: "cuponKnTpcds",
+  type: SearchParamType.SELECT_MULTI,
+  width: 200,
+  options: CUPON_KN_TPCD?.options ?? [],
+  checkAllItem: true,
+}
+```
+
+### search
+
+**기본:**
+```typescript
+{
+  label: t("검색어"),
+  placeholder: t("검색어"),
+  name: "searchText",
+  type: SearchParamType.INPUT,
+}
+```
+
+**search:withType:**
+```typescript
+{
+  type: SearchParamType.GROUP,
+  children: [
+    {
+      label: t("검색어구분"),
+      name: "searchType",
+      type: SearchParamType.SELECT,
+      width: 120,
+      options: [
+        { label: t("전체"), value: "" },
+        { label: t("제목"), value: "01" },
+        { label: t("내용"), value: "02" },
+      ],
+      showSearch: false,
+      allowClear: false,
+    },
+    {
+      label: t("검색어"),
+      placeholder: t("검색어"),
+      name: "searchText",
+      type: SearchParamType.INPUT,
+    },
+  ],
+}
+```
+
+### finder:라벨:필드명:모달함수:너비
+
+```typescript
+{
+  label: t("고객사"),
+  name: "custId",
+  type: SearchParamType.VALUES_FINDER,
+  width: 200,
+  onSearch: async () => {
+    const data = await openCustomerModal();
+    return [{
+      label: data.customer?.custNm,
+      value: JSON.stringify({
+        custId: data.customer?.id,
+        custNm: data.customer?.custNm,
+      }),
+    }];
+  },
+  config: { single: true },
+}
+```
+
+### cascade:라벨:필드명:옵션변수:너비
+
+```typescript
+{
+  label: t("조직"),
+  name: "_orgCd",
+  type: SearchParamType.CASCADE,
+  width: 200,
+  options: organizationOption,
+  displayRender: (labels: string[]) => labels[labels.length - 1],
+}
+```
+
+### numberRange:라벨:필드명
+
+```typescript
+{
+  label: t("방문회수"),
+  placeholder: [t("MIN"), t("MAX")],
+  name: "visitCount",
+  type: SearchParamType.NUMBER_RANGE,
+}
+```
+
+### radio:라벨:필드명
+
+**필드명이 *Yn으로 끝나는 경우 (자동):**
+```typescript
+{
+  label: t("이메일수신동의"),
+  name: "emailRecptnYn",
+  type: SearchParamType.RADIO,
+  options: [
+    { label: t("전체"), value: "" },
+    { label: t("사용"), value: "Y" },
+    { label: t("미사용"), value: "N" },
+  ],
+}
+```
+
+**직접 옵션 지정 (radio:라벨:필드명:옵션1,옵션2):**
+```typescript
+{
+  label: t("성별"),
+  name: "gender",
+  type: SearchParamType.RADIO,
+  options: [
+    { label: t("전체"), value: "" },
+    { label: t("남성"), value: "M" },
+    { label: t("여성"), value: "F" },
+  ],
+}
+```
+
+### checkbox:라벨:필드명:CODE_VAR
+
+```typescript
+{
+  label: t("회원가입채널"),
+  name: "sbscrbPathClcdArr",
+  type: SearchParamType.CHECKBOX,
+  options: SBSCRB_PATH_CLCD?.options ?? [],
+  checkAllItem: true,
+}
+```
+
+## 필수 확인 사항
+
+1. **Form 선언 확인:**
+   ```typescript
+   const [searchForm] = Form.useForm();
+   ```
+
+2. **Store 상태 확인:**
+   - `listRequestValue`
+   - `setListRequestValue`
+   - `listSpinning`
+   - `handleSearch` 또는 `callListApi`
+
+3. **PageSearchBar 스타일 확인:**
+   ```typescript
+   const PageSearchBar = styled(PageLayout.PageSearchBar)``;
+   ```
+
+## 에러 처리
+
+- Code가 useCodeStore에 없으면 자동 추가
+- 모달 함수가 없으면 사용자에게 알림
+- App.tsx가 열려있지 않으면 경로 요청
+
+## 예시 응답
+
+### 케이스 1: 기본 검색 (dateRange + code + search)
+
+**사용자:** "search params 만들어줘: dateRange code:STATUS_CODE search"
+
+```
+SearchParams 컴포넌트를 생성하겠습니다.
+
+1. Store 감지 중...
+   - Store 파일: useSystemSeoStore.ts
+
+2. useCodeStore.ts 확인 중...
+   - STATUS_CODE가 CodeModel 인터페이스에 없어서 자동 추가했습니다.
+   - 추가된 코드: `STATUS_CODE?: Code;`
+
+3. App.tsx에 다음을 추가했습니다:
+   - import 문 (IParam, SearchParams, SearchParamType, DT_FORMAT, DtPickerPresetRender)
+   - Store import: useSystemSeoStore
+   - Store 상태 선언: callListApi, listRequestValue, setListRequestValue, listSpinning
+   - Code 선언: const STATUS_CODE = useCodeStore((s) => s.STATUS_CODE);
+   - params 배열 (dateRange + statusCd + searchText)
+   - PageSearchBar 스타일 추가
+   - Form.useForm() 선언
+   - PageSearchBar 컴포넌트
+
+완료되었습니다!
+```
+
+### 케이스 2: 검색구분 포함 (search:withType)
+
+**사용자:** "search params 만들어줘: dateRange search:withType"
+
+```
+SearchParams 컴포넌트를 생성하겠습니다.
+
+1. Store 감지 중...
+   - Store 파일: useMemberStore.ts
+
+2. App.tsx에 다음을 추가했습니다:
+   - import 문
+   - Store import: useMemberStore
+   - Store 상태 선언
+   - params 배열 (dateRange + 검색구분 GROUP)
+   - PageSearchBar 스타일
+   - Form.useForm() 선언
+   - PageSearchBar 컴포넌트
+
+검색구분 옵션:
+- 전체: ""
+- 제목: "TITLE"
+- 내용: "CONTENT"
+- 작성자: "WRITER"
+
+완료되었습니다!
+```
+
+### 케이스 3: 기간구분 포함 (dateRange:withPeriod)
+
+**사용자:** "search params 만들어줘: dateRange:withPeriod code:USER_TYPE"
+
+```
+SearchParams 컴포넌트를 생성하겠습니다.
+
+1. Store 감지 중...
+   - Store 파일: useOrderStore.ts
+
+2. useCodeStore.ts 확인 중...
+   - USER_TYPE가 CodeModel 인터페이스에 없어서 자동 추가했습니다.
+   - 추가된 코드: `USER_TYPE?: Code;`
+
+3. App.tsx에 다음을 추가했습니다:
+   - import 문
+   - Store import: useOrderStore
+   - Store 상태 선언
+   - Code 선언: const USER_TYPE = useCodeStore((s) => s.USER_TYPE);
+   - params 배열 (기간구분 GROUP + dateRange + userCd)
+   - PageSearchBar 스타일
+   - Form.useForm() 선언
+   - PageSearchBar 컴포넌트
+
+기간구분 옵션:
+- 전체: ""
+- 등록일: "REG_DATE"
+- 수정일: "MOD_DATE"
+
+완료되었습니다!
+```
+
+### 케이스 4: 간단한 검색어만
+
+**사용자:** "search params 만들어줘: search"
+
+```
+SearchParams 컴포넌트를 생성하겠습니다.
+
+1. Store 감지 중...
+   - Store 파일: useNoticeStore.ts
+
+2. App.tsx에 다음을 추가했습니다:
+   - import 문
+   - Store import: useNoticeStore
+   - Store 상태 선언
+   - params 배열 (searchText만)
+   - PageSearchBar 스타일
+   - Form.useForm() 선언
+   - PageSearchBar 컴포넌트
+
+완료되었습니다!
+```
+
+### 케이스 5: 코드 다중 선택 포함
+
+**사용자:** "search params 만들어줘: code:CATEGORY:multi code:STATUS_CODE search"
+
+```
+SearchParams 컴포넌트를 생성하겠습니다.
+
+1. Store 감지 중...
+   - Store 파일: useProductStore.ts
+
+2. useCodeStore.ts 확인 중...
+   - CATEGORY가 CodeModel 인터페이스에 없어서 자동 추가했습니다.
+   - STATUS_CODE가 CodeModel 인터페이스에 없어서 자동 추가했습니다.
+   - 추가된 코드: `CATEGORY?: Code;`, `STATUS_CODE?: Code;`
+
+3. App.tsx에 다음을 추가했습니다:
+   - import 문
+   - Store import: useProductStore
+   - Store 상태 선언
+   - Code 선언: const CATEGORY = useCodeStore((s) => s.CATEGORY); const STATUS_CODE = useCodeStore((s) => s.STATUS_CODE);
+   - params 배열 (CATEGORY 다중 + statusCd 단일 + searchText)
+   - PageSearchBar 스타일
+   - Form.useForm() 선언
+   - PageSearchBar 컴포넌트
+
+완료되었습니다!
+```
+
+### 케이스 6: 복합 케이스 (dateRange:withPeriod + code + search:withType)
+
+**사용자:** "search params 만들어줘: dateRange:withPeriod code:ORDER_STATUS search:withType"
+
+```
+SearchParams 컴포넌트를 생성하겠습니다.
+
+1. Store 감지 중...
+   - Store 파일: useOrderListStore.ts
+
+2. useCodeStore.ts 확인 중...
+   - ORDER_STATUS가 CodeModel 인터페이스에 없어서 자동 추가했습니다.
+   - 추가된 코드: `ORDER_STATUS?: Code;`
+
+3. App.tsx에 다음을 추가했습니다:
+   - import 문
+   - Store import: useOrderListStore
+   - Store 상태 선언
+   - Code 선언: const ORDER_STATUS = useCodeStore((s) => s.ORDER_STATUS);
+   - params 배열 (기간구분 GROUP + dateRange + orderStatusCd + 검색구분 GROUP)
+   - PageSearchBar 스타일
+   - Form.useForm() 선언
+   - PageSearchBar 컴포넌트
+
+완료되었습니다!
+```
+
+### 케이스 7: 날짜 범위 없음 (code + search)
+
+**사용자:** "search params 만들어줘: code:BOARD_TYPE search"
+
+```
+SearchParams 컴포넌트를 생성하겠습니다.
+
+1. Store 감지 중...
+   - Store 파일: useBoardStore.ts
+
+2. useCodeStore.ts 확인 중...
+   - BOARD_TYPE가 CodeModel 인터페이스에 없어서 자동 추가했습니다.
+   - 추가된 코드: `BOARD_TYPE?: Code;`
+
+3. App.tsx에 다음을 추가했습니다:
+   - import 문 (DT_FORMAT, DtPickerPresetRender 제외)
+   - Store import: useBoardStore
+   - Store 상태 선언
+   - Code 선언: const BOARD_TYPE = useCodeStore((s) => s.BOARD_TYPE);
+   - params 배열 (boardTypeCd + searchText)
+   - PageSearchBar 스타일
+   - Form.useForm() 선언
+   - PageSearchBar 컴포넌트
+
+완료되었습니다!
+```
+
+### 케이스 8: 숫자 범위 포함
+
+**사용자:** "search params 만들어줘: numberRange:방문회수:visitCount code:MEMBER_LEVEL"
+
+```
+SearchParams 컴포넌트를 생성하겠습니다.
+
+1. Store 감지 중...
+   - Store 파일: useMemberStore.ts
+
+2. useCodeStore.ts 확인 중...
+   - MEMBER_LEVEL가 CodeModel 인터페이스에 없어서 자동 추가했습니다.
+   - 추가된 코드: `MEMBER_LEVEL?: Code;`
+
+3. App.tsx에 다음을 추가했습니다:
+   - import 문
+   - Store import: useMemberStore
+   - Store 상태 선언
+   - Code 선언: const MEMBER_LEVEL = useCodeStore((s) => s.MEMBER_LEVEL);
+   - params 배열 (visitCount NUMBER_RANGE + memberLevelCd)
+   - PageSearchBar 스타일
+   - Form.useForm() 선언
+   - PageSearchBar 컴포넌트
+
+완료되었습니다!
+```
+
+### 케이스 9: Y/N 필드 포함
+
+**사용자:** "search params 만들어줘: radio:이메일수신동의:emailRecptnYn code:STATUS_CODE"
+
+```
+SearchParams 컴포넌트를 생성하겠습니다.
+
+1. Store 감지 중...
+   - Store 파일: useMemberStore.ts
+
+2. useCodeStore.ts 확인 중...
+   - STATUS_CODE가 CodeModel 인터페이스에 없어서 자동 추가했습니다.
+   - 추가된 코드: `STATUS_CODE?: Code;`
+
+3. App.tsx에 다음을 추가했습니다:
+   - import 문
+   - Store import: useMemberStore
+   - Store 상태 선언
+   - Code 선언: const STATUS_CODE = useCodeStore((s) => s.STATUS_CODE);
+   - params 배열 (emailRecptnYn RADIO + statusCd)
+   - PageSearchBar 스타일
+   - Form.useForm() 선언
+   - PageSearchBar 컴포넌트
+
+완료되었습니다!
+```
+
+### 케이스 10: 체크박스 포함
+
+**사용자:** "search params 만들어줘: checkbox:가입채널:joinChannelArr:CHANNEL_TYPE dateRange"
+
+```
+SearchParams 컴포넌트를 생성하겠습니다.
+
+1. Store 감지 중...
+   - Store 파일: useMemberStore.ts
+
+2. useCodeStore.ts 확인 중...
+   - CHANNEL_TYPE가 CodeModel 인터페이스에 없어서 자동 추가했습니다.
+   - 추가된 코드: `CHANNEL_TYPE?: Code;`
+
+3. App.tsx에 다음을 추가했습니다:
+   - import 문
+   - Store import: useMemberStore
+   - Store 상태 선언
+   - Code 선언: const CHANNEL_TYPE = useCodeStore((s) => s.CHANNEL_TYPE);
+   - params 배열 (joinChannelArr CHECKBOX + dateRange)
+   - PageSearchBar 스타일
+   - Form.useForm() 선언
+   - PageSearchBar 컴포넌트
+
+완료되었습니다!
+```