From 7dd2b9fc1856306652f311d19697d9880955bfab Mon Sep 17 00:00:00 2001 From: dujinkim Date: Fri, 22 Aug 2025 02:12:15 +0000 Subject: (최겸) 공지사항, 인포메이션 기능 수정 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/notice/notice-client.tsx | 116 +++++++++++++---------------- components/notice/notice-create-dialog.tsx | 2 +- components/notice/notice-edit-sheet.tsx | 2 +- 3 files changed, 55 insertions(+), 65 deletions(-) (limited to 'components/notice') diff --git a/components/notice/notice-client.tsx b/components/notice/notice-client.tsx index e5c05d84..1eb6d75f 100644 --- a/components/notice/notice-client.tsx +++ b/components/notice/notice-client.tsx @@ -1,6 +1,6 @@ "use client" -import { useState, useEffect, useTransition } from "react" +import React, { useState, useEffect, useTransition } from "react" import { useParams } from "next/navigation" import { useTranslation } from "@/i18n/client" import { Button } from "@/components/ui/button" @@ -91,28 +91,12 @@ export function NoticeClient({ initialData = [], currentUserId }: NoticeClientPr const fetchNotices = async () => { try { setLoading(true) - const search = searchQuery || undefined startTransition(async () => { - const result = await getNoticeLists({ - page: 1, - perPage: 50, - search: search, - sort: [{ id: sortField, desc: sortDirection === "desc" }], - flags: [], - filters: [], - joinOperator: "and", - pagePath: "", - title: "", - content: "", - authorId: null, - isActive: null, - from: "", - to: "", - }) + const result = await getNoticeLists() if (result?.data) { - setNotices(result.data) + setNotices(result.data as NoticeWithAuthor[]) } else { toast.error("공지사항 목록을 가져오는데 실패했습니다.") } @@ -125,37 +109,12 @@ export function NoticeClient({ initialData = [], currentUserId }: NoticeClientPr } } - // 검색 핸들러 + // 검색 핸들러 (클라이언트 사이드에서 필터링하므로 별도 동작 불필요) const handleSearch = () => { - fetchNotices() + // 클라이언트 사이드 필터링이므로 별도 서버 요청 불필요 } - // 정렬 함수 - const sortNotices = (notices: NoticeWithAuthor[]) => { - return [...notices].sort((a, b) => { - let aValue: string | Date - let bValue: string | Date - if (sortField === "title") { - aValue = a.title - bValue = b.title - } else if (sortField === "pagePath") { - aValue = a.pagePath - bValue = b.pagePath - } else { - aValue = new Date(a.createdAt) - bValue = new Date(b.createdAt) - } - - if (aValue < bValue) { - return sortDirection === "asc" ? -1 : 1 - } - if (aValue > bValue) { - return sortDirection === "asc" ? 1 : -1 - } - return 0 - }) - } // 정렬 핸들러 const handleSort = (field: SortField) => { @@ -184,8 +143,49 @@ export function NoticeClient({ initialData = [], currentUserId }: NoticeClientPr } } - // 정렬된 공지사항 목록 - const sortedNotices = sortNotices(notices) + // 클라이언트 사이드 필터링 및 정렬 + const filteredAndSortedNotices = React.useMemo(() => { + let filtered = notices + + // 검색 필터 + if (searchQuery.trim()) { + const query = searchQuery.toLowerCase() + filtered = filtered.filter(notice => + notice.title.toLowerCase().includes(query) || + notice.pagePath.toLowerCase().includes(query) || + notice.content.toLowerCase().includes(query) + ) + } + + // 정렬 + filtered = filtered.sort((a, b) => { + let aValue: string | Date + let bValue: string | Date + + switch (sortField) { + case "title": + aValue = a.title + bValue = b.title + break + case "pagePath": + aValue = a.pagePath + bValue = b.pagePath + break + case "createdAt": + aValue = new Date(a.createdAt) + bValue = new Date(b.createdAt) + break + default: + return 0 + } + + if (aValue < bValue) return sortDirection === "asc" ? -1 : 1 + if (aValue > bValue) return sortDirection === "asc" ? 1 : -1 + return 0 + }) + + return filtered + }, [notices, searchQuery, sortField, sortDirection]) // 페이지 경로 옵션 로딩 const loadPagePathOptions = async () => { @@ -227,13 +227,7 @@ export function NoticeClient({ initialData = [], currentUserId }: NoticeClientPr loadPagePathOptions() }, []) - useEffect(() => { - if (searchQuery !== "") { - fetchNotices() - } else if (initialData.length > 0) { - setNotices(initialData) - } - }, [searchQuery]) + // 검색은 클라이언트 사이드에서 실시간으로 처리됨 return (
@@ -243,16 +237,12 @@ export function NoticeClient({ initialData = [], currentUserId }: NoticeClientPr
setSearchQuery(e.target.value)} className="pl-10" - onKeyPress={(e) => e.key === "Enter" && handleSearch()} />
-