Commit @8ec471facd49d51d7a3251e26134a95b02831638

임동욱 08-18

fix: 목록 검색상자에 글자도 검색 대상도 입력되지 않던 문제

FoxListContainer가 FoxListSearch에 검색어·검색 대상을 제어 값으로만 넘기고 변경 핸들러를
넘기지 않아, 입력창은 값이 고정되고(FoxListSearch가 controlled로 판정) 검색 대상 셀렉트도
스스로 값을 바꾸지 않았다(FoxSelectText의 같은 규칙). 즉 검색 자체가 불가능했다.

넘어오는 keyword·searchField는 이미 **적용된** 조건이라 입력 중인 값과 역할이 다르다.
컨테이너가 입력 초안을 따로 들고, 적용된 조건이 바뀌면 초안을 그 값으로 되돌린다 —
뒤로가기처럼 주소가 검색어를 바꾸는 경로에서도 입력창이 따라온다.

학생 회원 목록이 같은 증상이었고 이 수정으로 함께 낫는다.

Co-Authored-By: Claude Opus 5

@8ec471facd49d51d7a3251e26134a95b02831638

45c3983

8ec471f

@fox/core/components/fox-list-container/fox-list-container.tsx

--- @fox/core/components/fox-list-container/fox-list-container.tsx

+++ @fox/core/components/fox-list-container/fox-list-container.tsx


 "use client";
 
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import { cx } from "../../utils";
 import { FoxPageHeader } from "../fox-page-header";
 import type { FoxBreadcrumbItem } from "../fox-breadcrumb";

 
   /** 검색 대상 목록. 주면 검색 상자가 나온다. 대상이 하나뿐이면 빈 배열로 두면 된다. */
   searchFields?: FoxSelectItem[];
+  /** 지금 **적용된** 검색 조건이다(입력 중인 값이 아니다). 초안은 컨테이너가 따로 든다. */
   searchField?: string;
   keyword?: string;
   searchPlaceholder?: string;

   hidden = false,
   className,
 }: FoxListContainerProps<T>) {
+  // 검색 상자는 **누르기 전까지의 입력 초안**을 여기서 든다. `keyword`·`searchField`는 이미
+  // 검색이 반영된 결과(주소·서버 응답)라, 그대로 FoxListSearch에 제어 값으로 내려보내면
+  // 변경 핸들러가 없어 글자도 검색 대상도 바뀌지 않는다.
+  const applied = { keyword: keyword ?? "", field: searchField };
+  const [draft, setDraft] = useState(applied);
+  const [lastApplied, setLastApplied] = useState(applied);
+
+  // 검색이 끝나 밖의 값이 바뀌면 초안을 그 값으로 되돌린다 — 뒤로가기·초기화처럼 화면이 아니라
+  // 주소가 검색어를 바꾸는 경로에서도 입력창이 따라간다. effect가 아니라 렌더 중에 맞추는 것은
+  // React가 권하는 방식이다(한 번 더 그리지 않고 이 렌더에 반영된다).
+  if (
+    lastApplied.keyword !== applied.keyword ||
+    lastApplied.field !== applied.field
+  ) {
+    setLastApplied(applied);
+    setDraft(applied);
+  }
+
   if (hidden) {
     return null;
   }

               searchHidden ? undefined : (
                 <FoxListSearch
                   fields={searchFields}
-                  field={searchField}
-                  keyword={keyword}
+                  field={draft.field}
+                  onFieldChange={(next) =>
+                    setDraft((current) => ({ ...current, field: next }))
+                  }
+                  keyword={draft.keyword}
+                  onKeywordChange={(next) =>
+                    setDraft((current) => ({ ...current, keyword: next }))
+                  }
                   placeholder={searchPlaceholder}
                   onSearch={(nextKeyword, nextField) =>
                     onQueryChange?.({

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,6 +1,6 @@
1	1	"use client";
2	2
3		-import type { ReactNode } from "react";
	3	+import { useState, type ReactNode } from "react";
4	4	import { cx } from "../../utils";
5	5	import { FoxPageHeader } from "../fox-page-header";
6	6	import type { FoxBreadcrumbItem } from "../fox-breadcrumb";
...	...	@@ -64,6 +64,7 @@
64	64
65	65	/** 검색 대상 목록. 주면 검색 상자가 나온다. 대상이 하나뿐이면 빈 배열로 두면 된다. */
66	66	searchFields?: FoxSelectItem[];
	67	+ / 지금 적용된** 검색 조건이다(입력 중인 값이 아니다). 초안은 컨테이너가 따로 든다. */
67	68	searchField?: string;
68	69	keyword?: string;
69	70	searchPlaceholder?: string;
...	...	@@ -129,6 +130,24 @@
129	130	hidden = false,
130	131	className,
131	132	}: FoxListContainerProps<T>) {
	133	+ // 검색 상자는 누르기 전까지의 입력 초안을 여기서 든다. `keyword`·`searchField`는 이미
	134	+ // 검색이 반영된 결과(주소·서버 응답)라, 그대로 FoxListSearch에 제어 값으로 내려보내면
	135	+ // 변경 핸들러가 없어 글자도 검색 대상도 바뀌지 않는다.
	136	+ const applied = { keyword: keyword ?? "", field: searchField };
	137	+ const [draft, setDraft] = useState(applied);
	138	+ const [lastApplied, setLastApplied] = useState(applied);
	139	+
	140	+ // 검색이 끝나 밖의 값이 바뀌면 초안을 그 값으로 되돌린다 — 뒤로가기·초기화처럼 화면이 아니라
	141	+ // 주소가 검색어를 바꾸는 경로에서도 입력창이 따라간다. effect가 아니라 렌더 중에 맞추는 것은
	142	+ // React가 권하는 방식이다(한 번 더 그리지 않고 이 렌더에 반영된다).
	143	+ if (
	144	+ lastApplied.keyword !== applied.keyword \|\|
	145	+ lastApplied.field !== applied.field
	146	+ ) {
	147	+ setLastApplied(applied);
	148	+ setDraft(applied);
	149	+ }
	150	+
132	151	if (hidden) {
133	152	return null;
134	153	}
...	...	@@ -165,8 +184,14 @@
165	184	searchHidden ? undefined : (
166	185	<FoxListSearch
167	186	fields={searchFields}
168		- field={searchField}
169		- keyword={keyword}
	187	+ field={draft.field}
	188	+ onFieldChange={(next) =>
	189	+ setDraft((current) => ({ ...current, field: next }))
	190	+ }
	191	+ keyword={draft.keyword}
	192	+ onKeywordChange={(next) =>
	193	+ setDraft((current) => ({ ...current, keyword: next }))
	194	+ }
170	195	placeholder={searchPlaceholder}
171	196	onSearch={(nextKeyword, nextField) =>
172	197	onQueryChange?.({

Delete comment