Commit @7445c61ea8402a9930bc7eac72c1b2dd413c65d7

임동욱 08-20

merge: 1:1문의 상태 배지

@7445c61ea8402a9930bc7eac72c1b2dd413c65d7

284acf9

7445c61

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