Commit @c7e20d18ab1b2dfc4c5d964c97785dbd8737008f

임동욱 08-20

feat: 1:1문의 진행상태를 상태 인디케이터 대신 색 배지로 표기

`FoxStatusIndicator`는 색이 성공/경고 둘뿐이라 「답변대기·처리중·답변완료·보류」를
`answeredAt`의 유무로만 갈라 두 색에 욱여넣고 있었다. 상태 수만큼 색을 줄 수 있는
`FoxBadge`(pastel/md — 같은 표의 「구분」 배지와 같은 계열)로 바꾼다.

색은 코드값이 아니라 **코드명**으로 고른다. `BBS_ANS_CD`의 실제 코드값을 아직 확인하지
못했고(백엔드 소스에 없고 DB 코드테이블에만 있다), 코드값을 맞게 적어도 코드관리 화면에서
언제든 바뀔 수 있다. 반면 코드명은 화면에 그대로 보이는 값이라 「완료」·「대기」 같은 낱말로
읽는 편이 실제로 맞을 확률이 높다. 「미처리」가 「처리」보다 먼저 걸리도록 순서를 두었고,
걸리는 낱말이 없으면 `neutral`로 떨어진다 — 뜻을 지어내지 않는다.

코드값이 비어 있으면 배지 없이 `-`만 둔다(빈 배지를 그리지 않기 위해서다).

확인: 임시 페이지로 답변대기=warning, 처리중=information, 답변완료=success, 보류=danger,
모르는 값=neutral, 빈 값=`-`를 렌더링해 확인 후 페이지를 지웠다.

Co-Authored-By: Claude Opus 5

@c7e20d18ab1b2dfc4c5d964c97785dbd8737008f

c115e10

c7e20d1

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

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

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


 'use client';
 
-import { FoxBadge } from '@fox/core/components/fox-badge';
+import { FoxBadge, type FoxBadgeColor } from '@fox/core/components/fox-badge';
 import { FoxIconButton } from '@fox/core/components/fox-icon-button';
 import { FoxStatusIndicator } from '@fox/core/components/fox-status-indicator';
 import type { FoxListColumn } from '@fox/core/components/fox-list-container';

 import { FoxPaperclipIcon } from '@fox/core/icons';
 import { formatPhoneNumber } from '@/lib/domain/phone-number';
 import {
+  EMPTY_FIELD_PLACEHOLDER,
   formatAnswerStatusLabel,
   formatBoardCategoryLabel,
   formatFaqTypeLabel,

   ];
 }
 
+// TODO: BBS_ANS_CD의 실제 코드값이 확인되면 코드값 기준 표로 바꾼다(관리자 권한 배지와 같은 방식).
+// 이슈: 코드값을 모르고 코드명도 코드관리 화면에서 바뀔 수 있어 코드명으로 색을 고른다.
+// 앞에서부터 먼저 걸리는 것을 쓴다 — 「미처리」가 「처리」보다 앞에 있어야 한다.
+const ANSWER_STATUS_BADGE_COLORS: readonly (readonly [string, FoxBadgeColor])[] = [
+  ['미답변', 'warning'],
+  ['미처리', 'warning'],
+  ['완료', 'success'],
+  ['반려', 'danger'],
+  ['보류', 'danger'],
+  ['취소', 'danger'],
+  ['처리', 'information'],
+  ['진행', 'information'],
+  ['접수', 'information'],
+  ['대기', 'warning'],
+];
+
+function answerStatusBadgeColor(label: string): FoxBadgeColor {
+  const matched = ANSWER_STATUS_BADGE_COLORS.find(([keyword]) =>
+    label.includes(keyword)
+  );
+  return matched?.[1] ?? 'neutral';
+}
+
 function inquiryColumns(
   page: number,
   pageSize: number,

       key: 'answerStatus',
       header: '상태',
       width: 120,
-      render: (row) => (
-        <FoxStatusIndicator
-          type={row.answeredAt ? 'success' : 'warning'}
-          label={formatAnswerStatusLabel(row.answerStatusCode, statusOptions)}
-        />
-      ),
+      render: (row) => {
+        if (!row.answerStatusCode) {
+          return EMPTY_FIELD_PLACEHOLDER;
+        }
+        const label = formatAnswerStatusLabel(row.answerStatusCode, statusOptions);
+        return (
+          <FoxBadge type="pastel" color={answerStatusBadgeColor(label)} size="md">
+            {label}
+          </FoxBadge>
+        );
+      },
     },
     {
       key: 'answeredAt',

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,6 +1,6 @@
1	1	'use client';
2	2
3		-import { FoxBadge } from '@fox/core/components/fox-badge';
	3	+import { FoxBadge, type FoxBadgeColor } from '@fox/core/components/fox-badge';
4	4	import { FoxIconButton } from '@fox/core/components/fox-icon-button';
5	5	import { FoxStatusIndicator } from '@fox/core/components/fox-status-indicator';
6	6	import type { FoxListColumn } from '@fox/core/components/fox-list-container';
...	...	@@ -8,6 +8,7 @@
8	8	import { FoxPaperclipIcon } from '@fox/core/icons';
9	9	import { formatPhoneNumber } from '@/lib/domain/phone-number';
10	10	import {
	11	+ EMPTY_FIELD_PLACEHOLDER,
11	12	formatAnswerStatusLabel,
12	13	formatBoardCategoryLabel,
13	14	formatFaqTypeLabel,
...	...	@@ -138,6 +139,29 @@
138	139	];
139	140	}
140	141
	142	+// TODO: BBS_ANS_CD의 실제 코드값이 확인되면 코드값 기준 표로 바꾼다(관리자 권한 배지와 같은 방식).
	143	+// 이슈: 코드값을 모르고 코드명도 코드관리 화면에서 바뀔 수 있어 코드명으로 색을 고른다.
	144	+// 앞에서부터 먼저 걸리는 것을 쓴다 — 「미처리」가 「처리」보다 앞에 있어야 한다.
	145	+const ANSWER_STATUS_BADGE_COLORS: readonly (readonly [string, FoxBadgeColor])[] = [
	146	+ ['미답변', 'warning'],
	147	+ ['미처리', 'warning'],
	148	+ ['완료', 'success'],
	149	+ ['반려', 'danger'],
	150	+ ['보류', 'danger'],
	151	+ ['취소', 'danger'],
	152	+ ['처리', 'information'],
	153	+ ['진행', 'information'],
	154	+ ['접수', 'information'],
	155	+ ['대기', 'warning'],
	156	+];
	157	+
	158	+function answerStatusBadgeColor(label: string): FoxBadgeColor {
	159	+ const matched = ANSWER_STATUS_BADGE_COLORS.find(([keyword]) =>
	160	+ label.includes(keyword)
	161	+ );
	162	+ return matched?.[1] ?? 'neutral';
	163	+}
	164	+
141	165	function inquiryColumns(
142	166	page: number,
143	167	pageSize: number,
...	...	@@ -179,12 +203,17 @@
179	203	key: 'answerStatus',
180	204	header: '상태',
181	205	width: 120,
182		- render: (row) => (
183		- <FoxStatusIndicator
184		- type={row.answeredAt ? 'success' : 'warning'}
185		- label={formatAnswerStatusLabel(row.answerStatusCode, statusOptions)}
186		- />
187		- ),
	206	+ render: (row) => {
	207	+ if (!row.answerStatusCode) {
	208	+ return EMPTY_FIELD_PLACEHOLDER;
	209	+ }
	210	+ const label = formatAnswerStatusLabel(row.answerStatusCode, statusOptions);
	211	+ return (
	212	+ <FoxBadge type="pastel" color={answerStatusBadgeColor(label)} size="md">
	213	+ {label}
	214	+ </FoxBadge>
	215	+ );
	216	+ },
188	217	},
189	218	{
190	219	key: 'answeredAt',

Delete comment