Help members find and audit community activity (#246)

choijunhuk · web-flow · commit 3eab3590e7ad · 2026-06-18T06:53:03.000+09:00
Members needed upgrades beyond admin-only moderation, so the community list now searches body content, supports useful sort modes, and shows a clearer deleted-post timeline without changing backend contracts.

Constraint: Keep the existing Spring API and manual Community page structure.

Rejected: Add backend search endpoints | current post volume can use local filtering with lower deploy risk.

Confidence: high

Scope-risk: narrow

Directive: Keep member-visible deletion evidence readable before adding more admin workflow.

Tested: npm test; npm run lint; npm run build; npm run smoke
diff --git a/docs/superpowers/plans/2026-06-18-member-experience-upgrades.md b/docs/superpowers/plans/2026-06-18-member-experience-upgrades.md
@@ -0,0 +1,81 @@
+# Member Experience Upgrades Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make the COMS community easier for members to search, sort, and audit after a deletion.
+
+**Architecture:** Keep backend contracts unchanged and move member-facing list logic into a small pure utility. The Community page consumes the utility for body-aware search, deterministic sorting, and deleted-post timelines.
+
+**Tech Stack:** React, Vite, Node contract tests, Playwright smoke tests.
+
+---
+
+### Task 1: Community List Search And Sorting
+
+**Files:**
+- Create: `src/utils/communityExperience.js`
+- Create: `tests/communityExperience.test.mjs`
+- Modify: `src/pages/Community.jsx`
+- Modify: `package.json`
+
+- [x] **Step 1: Write the failing test**
+
+```js
+assert.deepEqual(
+  filterAndSortCommunityPosts(posts, {
+    category: 'ALL',
+    query: '투표 개선',
+    sort: 'comments',
+    canSeeAnonymous: true,
+  }).map((post) => post.id),
+  [2],
+)
+```
+
+- [x] **Step 2: Run test to verify it fails**
+
+Run: `node tests/communityExperience.test.mjs`
+Expected: FAIL with `ERR_MODULE_NOT_FOUND` for `src/utils/communityExperience.js`.
+
+- [x] **Step 3: Write minimal implementation**
+
+Implement `filterAndSortCommunityPosts()` with anonymous filtering, category filtering, multi-term body-aware search, and `latest/comments/score/views` sorting.
+
+- [x] **Step 4: Wire UI**
+
+Add sort chips to `src/pages/Community.jsx` and route existing pagination through the utility.
+
+- [x] **Step 5: Verify**
+
+Run: `npm test`, `npm run lint`, `npm run build`, targeted Playwright smoke.
+
+### Task 2: Deleted Post Timeline
+
+**Files:**
+- Modify: `src/utils/communityExperience.js`
+- Modify: `src/pages/Community.jsx`
+- Modify: `tests/communityExperience.test.mjs`
+
+- [x] **Step 1: Write the failing test**
+
+```js
+const timeline = buildDeletedPostTimeline(record)
+assert.deepEqual(timeline.map((item) => item.label), ['작성됨', '삭제됨', '복원 요청', '검토 완료', '복원됨'])
+```
+
+- [x] **Step 2: Run test to verify it fails**
+
+Run: `node tests/communityExperience.test.mjs`
+Expected: FAIL before utility implementation.
+
+- [x] **Step 3: Implement timeline builder**
+
+Build timeline rows from `createdAt`, `deletedAt`, appeal fields, resolution fields, and `restoredAt`.
+
+- [x] **Step 4: Render timeline**
+
+Render a compact timeline in the member deleted-post card.
+
+- [x] **Step 5: Verify**
+
+Run: `npm test`.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "test": "node tests/communityExperience.test.mjs",
     "lint": "eslint .",
     "preview": "vite preview",
     "e2e": "npm run build && playwright test",
diff --git a/src/pages/Community.jsx b/src/pages/Community.jsx
@@ -47,6 +47,10 @@ import {
 } from '../services/communityApi.js'
 import { apiUrl } from '../services/apiClient.js'
 import { useAuth } from '../contexts/useAuth.js'
+import {
+  buildDeletedPostTimeline,
+  filterAndSortCommunityPosts,
+} from '../utils/communityExperience.js'
 
 const PAGE_SIZE = 30
 const CONCEPT_POST_SCORE_THRESHOLD = 5
@@ -366,6 +370,13 @@ const CATEGORY_OPTIONS = [
   { value: 'ANONYMOUS', label: '익명' },
 ]
 
+const SORT_OPTIONS = [
+  { value: 'latest', label: '최신순' },
+  { value: 'comments', label: '댓글 많은 순' },
+  { value: 'score', label: '추천순' },
+  { value: 'views', label: '조회순' },
+]
+
 function categoryLabel(value) {
   return CATEGORY_OPTIONS.find((item) => item.value === value)?.label || '일반'
 }
@@ -1849,6 +1860,7 @@ export default function Community({ onBack }) {
   const [deletedError, setDeletedError] = useState('')
   const [page, setPage] = useState(1)
   const [activeCategory, setActiveCategory] = useState('ALL')
+  const [sortMode, setSortMode] = useState('latest')
   const [searchQuery, setSearchQuery] = useState('')
   const [comments, setComments] = useState([])
   const [commentInput, setCommentInput] = useState('')
@@ -1880,24 +1892,15 @@ export default function Community({ onBack }) {
     return () => { mounted = false }
   }, [])
 
-  const indexedPosts = useMemo(
-    () => posts.map((post) => ({
-      ...post,
-      _searchKey: `${post.title} ${post.authorDisplayName || post.authorName || ''}`.toLowerCase(),
-    })).filter((post) => canSeeAnonymous || post.category !== 'ANONYMOUS'),
-    [posts, canSeeAnonymous]
+  const filteredPosts = useMemo(
+    () => filterAndSortCommunityPosts(posts, {
+      category: effectiveActiveCategory,
+      query: searchQuery,
+      sort: sortMode,
+      canSeeAnonymous,
+    }),
+    [canSeeAnonymous, effectiveActiveCategory, posts, searchQuery, sortMode],
   )
-
-  const filteredPosts = useMemo(() => {
-    const byCategory = effectiveActiveCategory === 'ALL'
-      ? indexedPosts
-      : effectiveActiveCategory === 'CONCEPT'
-        ? indexedPosts.filter(isConceptPost)
-        : indexedPosts.filter((post) => (post.category || 'GENERAL') === effectiveActiveCategory)
-    if (!searchQuery.trim()) return byCategory
-    const q = searchQuery.toLowerCase()
-    return byCategory.filter((post) => post._searchKey.includes(q))
-  }, [effectiveActiveCategory, indexedPosts, searchQuery])
   const totalPages = Math.max(1, Math.ceil(filteredPosts.length / PAGE_SIZE))
   const pageStartIndex = (page - 1) * PAGE_SIZE
   const visiblePosts = useMemo(
@@ -2609,7 +2612,7 @@ export default function Community({ onBack }) {
                         type="text"
                         value={searchQuery}
                         onChange={(e) => { setSearchQuery(e.target.value); setPage(1) }}
-                        placeholder="제목, 작성자 검색"
+                        placeholder="제목, 본문, 작성자 검색"
                         className="h-11 w-full rounded-full border border-black/10 bg-white py-2 pl-9 pr-3 text-base text-[#1d1d1f] placeholder:text-[#86868b] outline-none transition focus:ring-2 focus:ring-[#0071e3]/24 sm:h-10 sm:w-64 sm:text-sm"
                       />
                     </div>
@@ -2618,6 +2621,29 @@ export default function Community({ onBack }) {
                     </span>
                   </div>
                 </div>
+                <div className="-mx-1 overflow-x-auto pb-1">
+                  <div className="flex min-w-max items-center gap-2 px-1 text-xs font-black text-[#6e6e73]">
+                    <span className="shrink-0">정렬</span>
+                    {SORT_OPTIONS.map((item) => (
+                      <button
+                        key={item.value}
+                        type="button"
+                        onClick={() => {
+                          setSortMode(item.value)
+                          setPage(1)
+                        }}
+                        className={`apple-chip min-h-9 px-3 py-1.5 ${sortMode === item.value ? 'apple-chip-active' : ''}`}
+                      >
+                        {item.label}
+                      </button>
+                    ))}
+                    {searchQuery.trim() && (
+                      <span className="rounded-full border border-[#3b4890]/15 bg-[#f7f9ff] px-3 py-2 text-[#3b4890]">
+                        본문까지 검색 중
+                      </span>
+                    )}
+                  </div>
+                </div>
                 <div className="border-t border-black/10 pt-4">
                   {renderPagination('top')}
                 </div>
@@ -2724,6 +2750,7 @@ export default function Community({ onBack }) {
               {!deletedLoading && deletedPosts.map((record) => {
                 const restored = Boolean(record.restoredPostId)
                 const appealed = Boolean(record.latestAppealStatus)
+                const timeline = buildDeletedPostTimeline(record)
                 return (
                   <article key={record.id} className="overflow-hidden rounded-lg border border-black/10 bg-white">
                     <div className="border-b border-black/10 px-4 py-4">
@@ -2758,6 +2785,27 @@ export default function Community({ onBack }) {
                           </p>
                         </div>
                       )}
+                      {timeline.length > 0 && (
+                        <div>
+                          <strong className="mb-2 block text-xs text-[#3b4890]">처리 타임라인</strong>
+                          <ol className="space-y-2">
+                            {timeline.map((item, index) => (
+                              <li key={`${record.id}-${item.label}-${index}`} className="grid grid-cols-[auto_1fr] gap-2 text-xs">
+                                <span className="mt-1 size-2 rounded-full bg-[#3b4890]" aria-hidden="true" />
+                                <span className="min-w-0">
+                                  <span className="font-black text-[#1d1d1f]">{item.label}</span>
+                                  {item.time && <span className="ml-2 text-[var(--theme-body-muted)]">{item.time}</span>}
+                                  {item.detail && (
+                                    <span className="block break-words text-[var(--theme-body-muted)]">
+                                      {item.label === '삭제됨' ? '처리자는 상단 기록에 표시됩니다.' : item.detail}
+                                    </span>
+                                  )}
+                                </span>
+                              </li>
+                            ))}
+                          </ol>
+                        </div>
+                      )}
                       {restored ? (
                         <a href={`/community/${record.restoredPostId}`} className="inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-xs font-black text-emerald-700">
                           <RotateCcw size={14} />
diff --git a/src/utils/communityExperience.js b/src/utils/communityExperience.js
@@ -0,0 +1,124 @@
+function plainText(value) {
+  return String(value || '')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function contentText(value, depth = 0) {
+  if (value == null || depth > 3) return ''
+  if (Array.isArray(value)) return value.map((item) => contentText(item, depth + 1)).filter(Boolean).join(' ')
+  if (typeof value === 'object') {
+    if (value.type === 'poll') return value.question || value.title || value.prompt || ''
+    if (value.type === 'externalEmbed') return value.title || value.url || ''
+    if (value.type === 'file' || value.type === 'image' || value.type === 'video') return value.name || ''
+    return contentText(value.content ?? value.text ?? '', depth + 1)
+  }
+  const text = String(value || '').trim()
+  if (!text) return ''
+  if ((text.startsWith('[') || text.startsWith('{') || text.startsWith('"')) && /"type"\s*:/.test(text)) {
+    try {
+      return contentText(JSON.parse(text), depth + 1)
+    } catch {
+      return plainText(text)
+    }
+  }
+  return plainText(text)
+}
+
+function score(post) {
+  return Number(post?.upvotes || 0) - Number(post?.downvotes || 0)
+}
+
+function timestamp(value) {
+  const time = new Date(value || 0).getTime()
+  return Number.isFinite(time) ? time : 0
+}
+
+function matchesCategory(post, category) {
+  if (category === 'ALL') return true
+  if (category === 'CONCEPT') return Boolean(post?.conceptPost) || score(post) >= 5
+  return (post?.category || 'GENERAL') === category
+}
+
+function searchKey(post) {
+  return [
+    post?.title,
+    post?.authorDisplayName,
+    post?.authorName,
+    contentText(post?.content),
+  ].filter(Boolean).join(' ').toLowerCase()
+}
+
+export function filterAndSortCommunityPosts(posts, {
+  category = 'ALL',
+  query = '',
+  sort = 'latest',
+  canSeeAnonymous = true,
+} = {}) {
+  const q = String(query || '').trim().toLowerCase()
+  const terms = q ? q.split(/\s+/).filter(Boolean) : []
+  const filtered = (Array.isArray(posts) ? posts : [])
+    .filter((post) => canSeeAnonymous || post?.category !== 'ANONYMOUS')
+    .filter((post) => matchesCategory(post, category))
+    .filter((post) => {
+      if (terms.length === 0) return true
+      const key = searchKey(post)
+      return terms.every((term) => key.includes(term))
+    })
+
+  return [...filtered].sort((a, b) => {
+    if (sort === 'comments') return Number(b.commentCount || 0) - Number(a.commentCount || 0) || timestamp(b.createdAt) - timestamp(a.createdAt)
+    if (sort === 'score') return score(b) - score(a) || timestamp(b.createdAt) - timestamp(a.createdAt)
+    if (sort === 'views') return Number(b.viewCount || 0) - Number(a.viewCount || 0) || timestamp(b.createdAt) - timestamp(a.createdAt)
+    return timestamp(b.createdAt) - timestamp(a.createdAt)
+  })
+}
+
+function formatTime(value) {
+  if (!value) return ''
+  return new Date(value).toLocaleString('ko-KR')
+}
+
+function identity(name, studentId) {
+  const safeName = name || '알 수 없음'
+  return studentId ? `${safeName}(${studentId})` : safeName
+}
+
+function appealStatusLabel(status) {
+  if (status === 'APPROVED') return '검토 완료'
+  if (status === 'REJECTED') return '검토 완료'
+  return '복원 요청'
+}
+
+export function buildDeletedPostTimeline(record) {
+  const events = []
+  if (record?.createdAt) {
+    events.push({ label: '작성됨', time: formatTime(record.createdAt), detail: '커뮤니티에 게시' })
+  }
+  if (record?.deletedAt) {
+    events.push({
+      label: '삭제됨',
+      time: formatTime(record.deletedAt),
+      detail: identity(record.deletedByName, record.deletedByStudentId),
+    })
+  }
+  if (record?.latestAppealCreatedAt) {
+    events.push({
+      label: '복원 요청',
+      time: formatTime(record.latestAppealCreatedAt),
+      detail: record.latestAppealMessage || '검토 대기 중',
+    })
+  }
+  if (record?.latestAppealResolvedAt) {
+    events.push({
+      label: appealStatusLabel(record.latestAppealStatus),
+      time: formatTime(record.latestAppealResolvedAt),
+      detail: record.latestAppealResolutionNote || (record.latestAppealStatus === 'REJECTED' ? '요청 반려' : '요청 승인'),
+    })
+  }
+  if (record?.restoredAt) {
+    events.push({ label: '복원됨', time: formatTime(record.restoredAt), detail: '커뮤니티에 다시 표시됨' })
+  }
+  return events
+}
diff --git a/tests/communityExperience.test.mjs b/tests/communityExperience.test.mjs
