Commit @9c411383f98ada40e01753229d04a93fa9a83797

임동욱 08-19

fix: 공지사항 툴바를 시안(5227:5066)에 맞춤

두 가지가 어긋나 있었다.

**분류 필터가 탭이었다.** 시안은 `chip-area`에 `chip` 세 개(전체·노출·미노출)다.
`FoxTab`을 `FoxChipArea` + `FoxChip type="action"`으로 바꿨다 — `check` 계열은 켜졌을 때
체크 아이콘이 붙는데, 시안의 "전체"와 "노출"이 둘 다 42px로 같아 아이콘이 없는 계열이다.
초기화 버튼도 시안이 28×28이라 `size="md"`(40)에서 `sm`으로 내렸다.

**검색 대상에 구분이 없었다.** 시안은 닫힌 상태가 "구분"인데 공지사항의 검색 대상이 제목
하나뿐이었다. 구분을 첫 항목으로 넣어 기본값이 되게 하고, 검색값은 코드가 아니라 표기 라벨로
견준다(사용자가 "공통"을 치면 걸리게).

확인: 초기화 버튼 28×28, chip-area x=36, 칩 43/43/56×28, 체크 아이콘 없음, 검색 대상 "구분" —
시안 치수와 1px 안에서 일치한다.

Co-Authored-By: Claude Opus 5

@9c411383f98ada40e01753229d04a93fa9a83797

298786b

9c41138

app/(protected)/(basic)/boards/_components/board-post-list.tsx

--- app/(protected)/(basic)/boards/_components/board-post-list.tsx

+++ app/(protected)/(basic)/boards/_components/board-post-list.tsx


 import { FoxIconButton } from '@fox/core/components/fox-icon-button';
 import { FoxListContainer } from '@fox/core/components/fox-list-container';
 import { FoxSelectText } from '@fox/core/components/fox-select-text';
-import { FoxTab } from '@fox/core/components/fox-tab';
-import { FoxTabItem } from '@fox/core/components/fox-tab-item';
+import { FoxChip } from '@fox/core/components/fox-chip';
+import { FoxChipArea } from '@fox/core/components/fox-chip-area';
 import { FoxArrowsClockwiseIcon, FoxPlusIcon } from '@fox/core/icons';
 import type { BoardPost, BoardType } from '@/lib/domain/board-post';
 import {

           <div className={styles.filter}>
             <FoxIconButton
               type="default"
-              size="md"
+              size="sm"
               icon={<FoxArrowsClockwiseIcon />}
               label="목록 새로고침"
               onAction={() => startRefresh(() => router.refresh())}
             />
-            <FoxTab
-              type="fill"
-              size="md"
-              label="노출 여부"
-              value={query.visibility}
-              onValueChange={(value) => go({ visibility: value })}
-            >
-              <FoxTabItem value={FILTER_ALL}>전체</FoxTabItem>
-              {VISIBILITY_FILTER_OPTIONS.map((option) => (
-                <FoxTabItem key={option.value} value={option.value}>
-                  {option.label}
-                </FoxTabItem>
+            <FoxChipArea size="md" label="노출 여부">
+              {[
+                { value: FILTER_ALL, label: '전체' },
+                ...VISIBILITY_FILTER_OPTIONS,
+              ].map((option) => (
+                <FoxChip
+                  key={option.value || 'all'}
+                  type="action"
+                  label={option.label}
+                  checked={query.visibility === option.value}
+                  onCheckedChange={() => go({ visibility: option.value })}
+                />
               ))}
-            </FoxTab>
+            </FoxChipArea>
           </div>
         }
         page={currentPage}

298786b

9c41138

lib/data/repositories/board-post-repository.ts

--- lib/data/repositories/board-post-repository.ts

+++ lib/data/repositories/board-post-repository.ts


 import {
   BOARD_SETTING_IDS,
   BOARD_TYPE_CODE_PARAM,
+  formatBoardCategoryLabel,
   type BoardPost,
   type BoardType,
 } from '@/lib/domain/board-post';

 
 /** 검색 대상 → 비교할 값. 목록·상세에 실제로 보이는 값으로만 거른다. */
 const SEARCH_VALUE_BY_FIELD: Record<string, (post: BoardPost) => string> = {
+  category: (post) => formatBoardCategoryLabel(post.categoryCode),
   title: (post) => post.title,
   content: (post) => post.content,
   authorName: (post) => post.authorName ?? '',

298786b

9c41138

lib/domain/board-post-query.ts

--- lib/domain/board-post-query.ts

+++ lib/domain/board-post-query.ts


  * 프론트에서 필터링**하기로 해서 시안의 검색 대상을 모두 제공할 수 있다(Repository 주석 참조).
  */
 export const BOARD_SEARCH_FIELDS: Record<BoardType, readonly BoardSearchFieldOption[]> = {
-  notice: [{ value: 'title', label: '제목' }],
+  notice: [
+    { value: 'category', label: '구분' },
+    { value: 'title', label: '제목' },
+  ],
   inquiry: [
     { value: 'title', label: '제목' },
     { value: 'authorName', label: '질문자명' },

Add a comment

Open 0
Closed 0

List

...	...	@@ -6,8 +6,8 @@
6	6	import { FoxIconButton } from '@fox/core/components/fox-icon-button';
7	7	import { FoxListContainer } from '@fox/core/components/fox-list-container';
8	8	import { FoxSelectText } from '@fox/core/components/fox-select-text';
9		-import { FoxTab } from '@fox/core/components/fox-tab';
10		-import { FoxTabItem } from '@fox/core/components/fox-tab-item';
	9	+import { FoxChip } from '@fox/core/components/fox-chip';
	10	+import { FoxChipArea } from '@fox/core/components/fox-chip-area';
11	11	import { FoxArrowsClockwiseIcon, FoxPlusIcon } from '@fox/core/icons';
12	12	import type { BoardPost, BoardType } from '@/lib/domain/board-post';
13	13	import {
...	...	@@ -116,25 +116,25 @@
116	116	<div className={styles.filter}>
117	117	<FoxIconButton
118	118	type="default"
119		- size="md"
	119	+ size="sm"
120	120	icon={<FoxArrowsClockwiseIcon />}
121	121	label="목록 새로고침"
122	122	onAction={() => startRefresh(() => router.refresh())}
123	123	/>
124		- <FoxTab
125		- type="fill"
126		- size="md"
127		- label="노출 여부"
128		- value={query.visibility}
129		- onValueChange={(value) => go({ visibility: value })}
130		- >
131		- <FoxTabItem value={FILTER_ALL}>전체</FoxTabItem>
132		- {VISIBILITY_FILTER_OPTIONS.map((option) => (
133		- <FoxTabItem key={option.value} value={option.value}>
134		- {option.label}
135		- </FoxTabItem>
	124	+ <FoxChipArea size="md" label="노출 여부">
	125	+ {[
	126	+ { value: FILTER_ALL, label: '전체' },
	127	+ ...VISIBILITY_FILTER_OPTIONS,
	128	+ ].map((option) => (
	129	+ <FoxChip
	130	+ key={option.value \|\| 'all'}
	131	+ type="action"
	132	+ label={option.label}
	133	+ checked={query.visibility === option.value}
	134	+ onCheckedChange={() => go({ visibility: option.value })}
	135	+ />
136	136	))}
137		- </FoxTab>
	137	+ </FoxChipArea>
138	138	</div>
139	139	}
140	140	page={currentPage}

...	...	@@ -4,6 +4,7 @@
4	4	import {
5	5	BOARD_SETTING_IDS,
6	6	BOARD_TYPE_CODE_PARAM,
	7	+ formatBoardCategoryLabel,
7	8	type BoardPost,
8	9	type BoardType,
9	10	} from '@/lib/domain/board-post';
...	...	@@ -148,6 +149,7 @@
148	149
149	150	/** 검색 대상 → 비교할 값. 목록·상세에 실제로 보이는 값으로만 거른다. */
150	151	const SEARCH_VALUE_BY_FIELD: Record<string, (post: BoardPost) => string> = {
	152	+ category: (post) => formatBoardCategoryLabel(post.categoryCode),
151	153	title: (post) => post.title,
152	154	content: (post) => post.content,
153	155	authorName: (post) => post.authorName ?? '',

...	...	@@ -36,7 +36,10 @@
36	36	* 프론트에서 필터링**하기로 해서 시안의 검색 대상을 모두 제공할 수 있다(Repository 주석 참조).
37	37	*/
38	38	export const BOARD_SEARCH_FIELDS: Record<BoardType, readonly BoardSearchFieldOption[]> = {
39		- notice: [{ value: 'title', label: '제목' }],
	39	+ notice: [
	40	+ { value: 'category', label: '구분' },
	41	+ { value: 'title', label: '제목' },
	42	+ ],
40	43	inquiry: [
41	44	{ value: 'title', label: '제목' },
42	45	{ value: 'authorName', label: '질문자명' },

Delete comment