From 1ad611d08c35a251f9dd685fee6a9bd319b191e7 Mon Sep 17 00:00:00 2001 From: ssu-it-support Date: Thu, 10 Oct 2024 03:38:03 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=EA=B3=B5=EC=A7=80=EC=82=AC=ED=95=AD?= =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20params=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Header/const/pathData.tsx | 2 +- .../notice/component/NoticeNavSection.tsx | 15 +-- src/pages/notice/const/data.ts | 99 +++---------------- src/pages/notice/const/path.ts | 2 +- src/pages/notice/hooks/useNoticeBoard.ts | 27 +---- src/pages/notice/hooks/useNoticeCategory.ts | 55 ++++------- src/pages/notice/hooks/useNoticeToday.ts | 16 +-- .../container/noticeDetailEditSection.tsx | 2 +- src/pages/notice/page.tsx | 13 ++- src/pages/notice/utils/categoryHandler.ts | 17 ---- src/pages/notice/utils/switchUtils.ts | 15 --- 11 files changed, 55 insertions(+), 208 deletions(-) delete mode 100644 src/pages/notice/utils/categoryHandler.ts delete mode 100644 src/pages/notice/utils/switchUtils.ts diff --git a/src/containers/common/Header/const/pathData.tsx b/src/containers/common/Header/const/pathData.tsx index 3a557117..b4d0fb27 100644 --- a/src/containers/common/Header/const/pathData.tsx +++ b/src/containers/common/Header/const/pathData.tsx @@ -11,7 +11,7 @@ export const menuItems = { }, ], 학교생활: [ - { name: '공지사항', path: '/notice?category=central&sub-category=all' }, + { name: '공지사항', path: '/notice' }, // { name: '일정', path: '/menu7' }, { name: '제휴안내', path: '/partnership' }, { name: '분실물게시판', path: '/lost-article?category=state' }, diff --git a/src/pages/notice/component/NoticeNavSection.tsx b/src/pages/notice/component/NoticeNavSection.tsx index ea6857a1..5428621b 100644 --- a/src/pages/notice/component/NoticeNavSection.tsx +++ b/src/pages/notice/component/NoticeNavSection.tsx @@ -1,5 +1,4 @@ import { BoardNavigator } from '@/components/Board/BoardNavigator'; -import { useNoticeSwitch } from '../utils/switchUtils'; import { cn } from '@/libs/utils'; interface NoticeNavSectionProps { @@ -7,7 +6,6 @@ interface NoticeNavSectionProps { subCategoryParam: string; handleSelection: (selectedCategory: string) => void; mainCategoryName: string; - subCategoryDisplayName: string; className?: string; isHidden?: boolean; } @@ -18,21 +16,18 @@ export function NoticeNavSection({ className = '', isHidden = true, }: NoticeNavSectionProps) { - const handleNoticeSwitchClick = useNoticeSwitch(); - - const noticeCategories = ['중앙', '단과대']; // 사용자에게 보여줄 한글 카테고리 - const selectedCategory = categoryParam; // 선택된 카테고리 (한글) + const noticeCategories = ['중앙', '단과대']; + const selectedCategory = categoryParam; return ( <>
{ - handleNoticeSwitchClick(noticeCategories.indexOf(selectedCategory)); // 스위치 토글 - handleSelection(selectedCategory); // 카테고리 변경 + handleSelection(selectedCategory); }} className={cn(`relative z-10 mx-[200px] bg-white md:mx-[60px]`, className)} /> diff --git a/src/pages/notice/const/data.ts b/src/pages/notice/const/data.ts index 20c837db..184580fa 100644 --- a/src/pages/notice/const/data.ts +++ b/src/pages/notice/const/data.ts @@ -1,96 +1,21 @@ // Breadcrumb export const items = new Map([ ['공지사항', null], - ['공지사항', '/notice?category=central&sub-category=all'], + ['공지사항', '/notice'], ]); export const mainName: string[] = ['중앙', '단과대']; -export const category: string[] = ['central', 'college']; - export const subName: string[] = ['전체', '총학생회', '중앙운영위원회', '중앙선거관리위원회', '동아리연합회']; -export const subCategory: string[] = [ - 'all', - 'president', - 'central_executive_committee', - 'central_operating_committee', - 'club', +export const subName2: string[] = [ + '전체', + '경영대학', + '경제통상대학', + '공과대학', + '법과대학', + '사회과학대학', + '인문대학', + '자연과학대학', + 'IT대학', + '융합특성화자유전공학부', ]; - -export const categoryMap: Record = { - central: '중앙', - college: '단과대', -}; - -export const categoryToCode: Record = { - central: '중앙기구', - college: '단과대학생회', -}; - -export const subCategoryMap: Record = { - all: '전체', - president: '총학생회', - central_operating_committee: '중앙운영위원회', - central_executive_committee: '중앙선거관리위원회', - club: '동아리연합회', -}; - -export const subCategoryToCode: Record = { - all: '', - president: '총학생회', - central_operating_committee: '중앙운영위원회', - central_executive_committee: '중앙선거관리위원회', - club: '동아리연합회', -}; - -export const reverseCategoryMap: Record = { - 중앙: 'central', - 단과대: 'college', -}; - -export const reverseSubCategoryMap: Record = { - 전체: 'all', - 총학생회: 'president', - 중앙운영위원회: 'central_operating_committee', - 중앙선거관리위원회: 'central_executive_committee', - 동아리연합회: 'club', -}; - -export const collegeSubCategoryMap: Record = { - all: '전체', - manage: '경영대학', - economic: '경제통상대학', - engineer: '공과대학', - royal: '법과대학', - social: '사회과학대학', - human: '인문대학', - natural: '자연과학대학', - it: 'IT대학', - free: '융합특성화자유전공학부', -}; - -export const collegeSubCategoryToCode: Record = { - all: '', - manage: '경영대학', - economic: '경제통상대학', - engineer: '공과대학', - royal: '법과대학', - social: '사회과학대학', - human: '인문대학', - natural: '자연과학대학', - it: 'IT대학', - free: '융합특성화자유전공학부', -}; - -export const reverseCollegeSubCategoryMap: Record = { - 전체: 'all', - 경영대학: 'manage', - 경제통상대학: 'economic', - 공과대학: 'engineer', - 법과대학: 'royal', - 사회과학대학: 'social', - 인문대학: 'human', - 자연과학대학: 'natural', - IT대학: 'it', - 융합특성화자유전공학부: 'free', -}; diff --git a/src/pages/notice/const/path.ts b/src/pages/notice/const/path.ts index 04369cfd..803199b1 100644 --- a/src/pages/notice/const/path.ts +++ b/src/pages/notice/const/path.ts @@ -2,7 +2,7 @@ export const items = new Map([ ['학교생활', null], ['공지사항', '/notice'], - ['중앙', '/notice?category=central&sub-category=all'], + ['중앙', '/notice'], ]); export const categoryMap: Record = { diff --git a/src/pages/notice/hooks/useNoticeBoard.ts b/src/pages/notice/hooks/useNoticeBoard.ts index cea75844..ed8cc883 100644 --- a/src/pages/notice/hooks/useNoticeBoard.ts +++ b/src/pages/notice/hooks/useNoticeBoard.ts @@ -1,45 +1,27 @@ import { useEffect } from 'react'; import { useResponseBoard } from '@/hooks/useResponseBoard'; import { useCurrentPage } from '@/hooks/useCurrentPage'; -import { useNoticeCategory } from './useNoticeCategory'; -import { - categoryToCode, - subCategoryMap, - subCategoryToCode, - collegeSubCategoryToCode, - collegeSubCategoryMap, -} from '../const/data'; import { useGetBoardPostSearch } from '@/hooks/useGetBoardPostSearch'; import { NoticeResponse } from '../types'; import { useRecoilValue } from 'recoil'; import { SearchState } from '@/recoil/atoms/atom'; -export function useNoticeBoard(boardCode: string) { +export function useNoticeBoard(boardCode: string, category: string, subCategory: string) { const { itemsPerPage } = useResponseBoard(); const { currentPage, handlePageChange } = useCurrentPage(); - const { urlCategory, urlSubCategory } = useNoticeCategory(); const searchQuery = useRecoilValue(SearchState); - const subcategories = - urlCategory === 'college' - ? Object.values(collegeSubCategoryMap).filter(Boolean) - : Object.values(subCategoryMap).filter(Boolean); - - const selectedCategory = categoryToCode[urlCategory]; - const selectedSubCategory = - urlCategory === 'college' ? collegeSubCategoryToCode[urlSubCategory] : subCategoryToCode[urlSubCategory]; - useEffect(() => { handlePageChange(1); - }, [urlCategory, urlSubCategory, handlePageChange]); + }, [category, subCategory, handlePageChange]); const { data, isLoading, isError } = useGetBoardPostSearch({ boardCode, take: itemsPerPage, page: currentPage - 1, - groupCode: selectedCategory, - memberCode: selectedSubCategory, + groupCode: category === '중앙' ? '중앙기구' : '단과대학생회', + memberCode: subCategory === '전체' ? '' : subCategory, q: searchQuery, }); @@ -50,7 +32,6 @@ export function useNoticeBoard(boardCode: string) { totalPages, currentPage, handlePageChange, - subcategories, isLoading, isError, }; diff --git a/src/pages/notice/hooks/useNoticeCategory.ts b/src/pages/notice/hooks/useNoticeCategory.ts index 3f7be57e..d09bff50 100644 --- a/src/pages/notice/hooks/useNoticeCategory.ts +++ b/src/pages/notice/hooks/useNoticeCategory.ts @@ -1,50 +1,31 @@ -import { useState, useEffect } from 'react'; -import { useNavigate, useSearchParams } from 'react-router-dom'; -import { - categoryMap, - reverseCategoryMap, - subCategoryMap, - reverseSubCategoryMap, - collegeSubCategoryMap, - reverseCollegeSubCategoryMap, -} from '../const/data'; +import { useState } from 'react'; +import { subName, subName2 } from '../const/data'; export function useNoticeCategory() { - const navigate = useNavigate(); - const [searchParams, setSearchParams] = useSearchParams(); - - const urlCategory = searchParams.get('category') || 'central'; - const urlSubCategory = searchParams.get('sub-category') || 'all'; - - const [category, setCategory] = useState(urlCategory); - const [subCategory, setSubCategory] = useState(urlSubCategory); - - useEffect(() => { - setCategory(urlCategory); - setSubCategory(urlSubCategory); - }, [urlCategory, urlSubCategory]); + const [category, setCategory] = useState('중앙'); + const [subCategory, setSubCategory] = useState('전체'); + const [subCategorys, setSubCategorys] = useState(subName); const handleCategoryChange = (newCategory: string) => { - const englishCategory = reverseCategoryMap[newCategory]; - setSearchParams({ category: englishCategory, 'sub-category': subCategory }); + setCategory(newCategory); + setSubCategory('전체'); + handleSubCategorysChange(newCategory === '중앙' ? subName : subName2); + }; + + const handleSubCategoryChange = (newSubCategory: string) => { + setSubCategory(newSubCategory); }; - const handleSubCategoryChange = (selectedSubcategory: string) => { - const englishSubCategory = - category === 'college' - ? reverseCollegeSubCategoryMap[selectedSubcategory] - : reverseSubCategoryMap[selectedSubcategory]; - setSubCategory(englishSubCategory); - setSearchParams({ category, 'sub-category': englishSubCategory }); + const handleSubCategorysChange = (newSubCategorys: string[]) => { + setSubCategorys(newSubCategorys); }; return { - category: categoryMap[category], - subCategory: category === 'college' ? collegeSubCategoryMap[subCategory] : subCategoryMap[subCategory], + category, + subCategory, + subCategorys, handleCategoryChange, handleSubCategoryChange, - navigate, - urlCategory, - urlSubCategory, + handleSubCategorysChange, }; } diff --git a/src/pages/notice/hooks/useNoticeToday.ts b/src/pages/notice/hooks/useNoticeToday.ts index b22199f2..94592a03 100644 --- a/src/pages/notice/hooks/useNoticeToday.ts +++ b/src/pages/notice/hooks/useNoticeToday.ts @@ -1,22 +1,14 @@ import { useEffect, useState } from 'react'; import { useGetBoardPosts } from '@/hooks/useGetBoardPosts'; import { useNoticeCategory } from './useNoticeCategory'; -import { categoryToCode, collegeSubCategoryToCode, subCategoryToCode } from '../const/data'; import { Post } from '@/types/apis/get'; import { useRecoilState } from 'recoil'; import { todayPostCountState } from '@/recoil/atoms/atom'; export function useTodayPosts(boardCode: string) { - const { urlCategory, urlSubCategory } = useNoticeCategory(); - const selectedCategory = categoryToCode[urlCategory]; - let selectedSubCategory; - if (selectedCategory === '중앙기구') { - selectedSubCategory = subCategoryToCode[urlSubCategory]; - } else { - selectedSubCategory = collegeSubCategoryToCode[urlSubCategory]; - } + const { category, subCategory } = useNoticeCategory(); - const [todayPostCount, setTodayPostCount] = useRecoilState(todayPostCountState(selectedCategory)); + const [todayPostCount, setTodayPostCount] = useRecoilState(todayPostCountState(category)); const [page, setPage] = useState(0); const [stopFetching, setStopFetching] = useState(false); @@ -24,8 +16,8 @@ export function useTodayPosts(boardCode: string) { boardCode, take: 10, page, - groupCode: selectedCategory, - memberCode: selectedSubCategory, + groupCode: category, + memberCode: subCategory, }); const posts: Post[] = data?.data?.postListResDto || []; diff --git a/src/pages/notice/noticeDetail/container/noticeDetailEditSection.tsx b/src/pages/notice/noticeDetail/container/noticeDetailEditSection.tsx index 3c4b80a0..83e4f1a6 100644 --- a/src/pages/notice/noticeDetail/container/noticeDetailEditSection.tsx +++ b/src/pages/notice/noticeDetail/container/noticeDetailEditSection.tsx @@ -21,7 +21,7 @@ export function NoticeDetailEditSection({ boardCode, postId, fileUrls, imageUrls const handleDelete = async () => { await delBoardPosts(boardCode, postId, fileurl); - navigate(`/notice?category=central&sub-category=all`); + navigate(`/notice`); }; return ( diff --git a/src/pages/notice/page.tsx b/src/pages/notice/page.tsx index ea52352d..c8b601d4 100644 --- a/src/pages/notice/page.tsx +++ b/src/pages/notice/page.tsx @@ -7,12 +7,18 @@ import { NoticeNavSection } from './component/NoticeNavSection'; import { useTodayPosts } from './hooks/useNoticeToday'; import { BodyLayout } from '@/template/BodyLayout'; import { Skeleton } from '@/components/ui/skeleton'; +import { useNavigate } from 'react-router-dom'; export function NoticePage() { - const { category, navigate, subCategory, handleCategoryChange, handleSubCategoryChange } = useNoticeCategory(); + const { category, subCategory, subCategorys, handleCategoryChange, handleSubCategoryChange } = useNoticeCategory(); const boardCode = '공지사항게시판'; + const navigate = useNavigate(); - const { data, totalPages, currentPage, handlePageChange, isLoading, subcategories } = useNoticeBoard(boardCode); + const { data, totalPages, currentPage, handlePageChange, isLoading } = useNoticeBoard( + boardCode, + category, + subCategory + ); const { todayPostCount, isLoading: isPostsLoading } = useTodayPosts(boardCode); return ( @@ -38,14 +44,13 @@ export function NoticePage() { subCategoryParam={subCategory} handleSelection={handleCategoryChange} mainCategoryName="게시판" - subCategoryDisplayName="소개" isHidden={false} className="mx-[200px] xs:mx-[30px] sm:mx-[30px] md:mx-[30px] lg:mx-[30px]" /> diff --git a/src/pages/notice/utils/categoryHandler.ts b/src/pages/notice/utils/categoryHandler.ts deleted file mode 100644 index 67ee716f..00000000 --- a/src/pages/notice/utils/categoryHandler.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NavigateFunction } from 'react-router-dom'; -import { categoryMap } from '../const/data'; - -export function handleCategory( - categories: string[], - categoryValues: string[], - selectedCategory: string, - navigate: NavigateFunction -) { - const categoryIndex = categories.indexOf(selectedCategory); - const value = categoryValues[categoryIndex]; - navigate(`/notice?category=${value}`); -} - -export function findCategoryKey(selectedCategory: string): string | undefined { - return Object.keys(categoryMap).find((key) => categoryMap[key] === selectedCategory); -} diff --git a/src/pages/notice/utils/switchUtils.ts b/src/pages/notice/utils/switchUtils.ts deleted file mode 100644 index ace70a51..00000000 --- a/src/pages/notice/utils/switchUtils.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { useNavigate } from 'react-router-dom'; - -export function useNoticeSwitch() { - const navigate = useNavigate(); - - const handleNoticeSwitchClick = (index: number) => { - if (index === 0) { - navigate('/notice'); - } else { - navigate('/notice?category=all'); - } - }; - - return handleNoticeSwitchClick; -} From 13639c04f111624e5b5eb2197eae14a45b8ebb58 Mon Sep 17 00:00:00 2001 From: ssu-it-support Date: Thu, 10 Oct 2024 03:41:33 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20campus=EB=A7=B5=20=EB=9D=BC=EC=9A=B0?= =?UTF-8?q?=ED=8C=85=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/common/Header/const/pathData.tsx | 2 +- src/pages/router.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/common/Header/const/pathData.tsx b/src/containers/common/Header/const/pathData.tsx index b4d0fb27..265d2faf 100644 --- a/src/containers/common/Header/const/pathData.tsx +++ b/src/containers/common/Header/const/pathData.tsx @@ -15,7 +15,7 @@ export const menuItems = { // { name: '일정', path: '/menu7' }, { name: '제휴안내', path: '/partnership' }, { name: '분실물게시판', path: '/lost-article?category=state' }, - { name: '캠퍼스맵', path: '/campus' }, + { name: '캠퍼스맵', path: '/campus-map' }, ], 학생자치기구: [ // { name: '산하기구', path: '/affiliated_organization' }, diff --git a/src/pages/router.tsx b/src/pages/router.tsx index fdda33f7..3813b65b 100644 --- a/src/pages/router.tsx +++ b/src/pages/router.tsx @@ -54,7 +54,7 @@ export function MainRouter() { } /> } /> {/*캠퍼스맵*/} - } /> + } /> {/*학생자치기구*/} } /> } /> From c9296948a3e118b2f7e8e56e82535ff207798df9 Mon Sep 17 00:00:00 2001 From: ssu-it-support Date: Thu, 10 Oct 2024 04:16:40 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20BoardContent=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/notice/page.tsx | 4 ++-- src/types/getBoardPosts.ts | 12 ++++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/pages/notice/page.tsx b/src/pages/notice/page.tsx index c8b601d4..15183c8d 100644 --- a/src/pages/notice/page.tsx +++ b/src/pages/notice/page.tsx @@ -1,5 +1,4 @@ import { HeadLayout } from '@/template/HeadLayout'; -import { NoticeContent } from './component/NoticeContent'; import { BoardSelector } from '@/components/Board/BoardSelector'; import { useNoticeBoard } from './hooks/useNoticeBoard'; import { useNoticeCategory } from './hooks/useNoticeCategory'; @@ -8,6 +7,7 @@ import { useTodayPosts } from './hooks/useNoticeToday'; import { BodyLayout } from '@/template/BodyLayout'; import { Skeleton } from '@/components/ui/skeleton'; import { useNavigate } from 'react-router-dom'; +import { BoardContent } from '@/template/board/BoardContent'; export function NoticePage() { const { category, subCategory, subCategorys, handleCategoryChange, handleSubCategoryChange } = useNoticeCategory(); @@ -55,7 +55,7 @@ export function NoticePage() { onSubcategorySelect={handleSubCategoryChange} /> } - children={} + children={} totalPages={totalPages} currentPage={currentPage} onPageChange={handlePageChange} diff --git a/src/types/getBoardPosts.ts b/src/types/getBoardPosts.ts index 3babd98f..61c1dde1 100644 --- a/src/types/getBoardPosts.ts +++ b/src/types/getBoardPosts.ts @@ -17,6 +17,18 @@ export interface GetNoticeBoardPostsResponse { isSuccess: true; } +export interface BoardPost { + postId: number; + title: string; + content: string; + date: string; + category: string | null; + thumbNail: string | null; + status: statusType; + author: string; + isEmergency: boolean; +} + interface NoticePostListResDto { postId: number; title: string; From 939d5c269fc676e763085cb878f11cefe8d4d422 Mon Sep 17 00:00:00 2001 From: ssu-it-support Date: Thu, 10 Oct 2024 04:29:50 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EC=A0=9C=ED=9C=B4=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=ED=8C=90=20=EC=A0=9C=EC=99=B8=20=EC=A0=84=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=ED=8C=90=EC=97=90=20BoardContent=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/audit/component/AuditContent.tsx | 130 ------------------ .../audit/component/AuditContentLoading.tsx | 44 ------ src/pages/audit/page.tsx | 4 +- .../lost-article/component/lostContent.tsx | 109 --------------- src/pages/lost-article/page.tsx | 4 +- src/pages/notice/component/NoticeContent.tsx | 123 ----------------- .../notice/component/NoticeContentLoading.tsx | 44 ------ 7 files changed, 4 insertions(+), 454 deletions(-) delete mode 100644 src/pages/audit/component/AuditContent.tsx delete mode 100644 src/pages/audit/component/AuditContentLoading.tsx delete mode 100644 src/pages/lost-article/component/lostContent.tsx delete mode 100644 src/pages/notice/component/NoticeContent.tsx delete mode 100644 src/pages/notice/component/NoticeContentLoading.tsx diff --git a/src/pages/audit/component/AuditContent.tsx b/src/pages/audit/component/AuditContent.tsx deleted file mode 100644 index 1df60a93..00000000 --- a/src/pages/audit/component/AuditContent.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import { PostCardBasic } from '@/components/PostCard/PostCardBasicMissing'; -import { formatYYYYMMDD } from '@/utils/formatYYYYMMDD'; -import { Size } from '@/components/PostCard/const/state'; -import { useEffect, useState } from 'react'; -import { useResponseBoard } from '@/hooks/useResponseBoard'; -import { handleCardClick } from '../utils/cardHandler'; -import auditLogo from '@/assets/image/logo/audit_logo.png'; -import AuditContentLoading from './AuditContentLoading'; - -interface AuditContentProps { - initPosts?: Array<{ - postId: number; - title: string; - content: string; - category: string; - date: string; - thumbNail: string | null; - status: string | null; - }>; - className?: string; - isLoading: boolean; -} - -export function AuditContent({ initPosts, isLoading }: AuditContentProps) { - const navigate = useNavigate(); - const { size } = useResponseBoard(); - const screenWidth: number = window.innerWidth; - const [posts, setPosts] = useState(initPosts); - - useEffect(() => { - setPosts(initPosts); - }, [initPosts]); - - if (isLoading) { - return ; - } else { - if (!posts || posts.length === 0) { - return ( -
등록된 게시물이 없습니다
- ); - } - if (screenWidth >= 1920) { - return ( -
-
- {posts.slice(0, 3).map((post) => ( - - ))} -
-
- {posts.slice(3, 6).map((post) => ( - - ))} -
-
- {posts.slice(6, 9).map((post) => ( - - ))} -
-
- ); - } else if (screenWidth >= 1440 && screenWidth < 1920) { - return ( -
-
- {posts.slice(0, 2).map((post) => ( - - ))} -
-
- {posts.slice(2, 4).map((post) => ( - - ))} -
-
- {posts.slice(4, 6).map((post) => ( - - ))} -
-
- ); - } else { - return ( -
- {posts.map((post) => ( - - ))} -
- ); - } - } - - function RenderCard({ - post, - size, - }: { - post: { - postId: number; - title: string; - content: string; - date: string; - thumbNail: string | null; - status: string | null; - category: string; - }; - size: Size; - }) { - const formattedDate = post.date ? formatYYYYMMDD(post.date) : ''; - const status = post.status === '새로운' ? 'New' : 'Default'; - const thumbnail = post.thumbNail || undefined; - - return ( -
- handleCardClick(post.postId.toString(), post.postId, navigate)} - /> -
- ); - } -} diff --git a/src/pages/audit/component/AuditContentLoading.tsx b/src/pages/audit/component/AuditContentLoading.tsx deleted file mode 100644 index ff4974a1..00000000 --- a/src/pages/audit/component/AuditContentLoading.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Skeleton } from '@/components/ui/skeleton'; - -interface AuditContentLoadingProps { - screenWidth: number; -} - -export default function AuditContentLoading({ screenWidth }: AuditContentLoadingProps) { - const emptyFive = Array(5).fill(null); - const emptyThree = Array(3).fill(null); - const emptyTwo = Array(2).fill(null); - if (screenWidth >= 1920) { - return ( -
- {emptyThree.map((_, index) => ( -
- {emptyThree.map((_, i) => ( - - ))} -
- ))} -
- ); - } else if (screenWidth >= 1440 && screenWidth < 1920) { - return ( -
- {emptyThree.map((_, index) => ( -
- {emptyTwo.map((_, i) => ( - - ))} -
- ))} -
- ); - } else { - return ( -
- {emptyFive.map((_, index) => ( - - ))} -
- ); - } -} diff --git a/src/pages/audit/page.tsx b/src/pages/audit/page.tsx index 677ee296..81358581 100644 --- a/src/pages/audit/page.tsx +++ b/src/pages/audit/page.tsx @@ -1,11 +1,11 @@ import { HeadLayout } from '@/template/HeadLayout'; import { BodyLayout } from '@/template/BodyLayout'; -import { AuditContent } from './component/AuditContent'; import { IntroNavSection } from '../intro/container/IntroNavSection'; import { BoardSelector } from '@/components/Board/BoardSelector'; import { useAuditBoard } from './hooks/useAuditBoard'; import { categoryMap } from './const/data'; import { useNavigate } from 'react-router-dom'; +import { BoardContent } from '@/template/board/BoardContent'; export function AuditPage() { const boardCode = '감사기구게시판'; @@ -44,7 +44,7 @@ export function AuditPage() { }} /> } - children={} + children={} totalPages={totalPages} currentPage={currentPage} onPageChange={handlePageChange} diff --git a/src/pages/lost-article/component/lostContent.tsx b/src/pages/lost-article/component/lostContent.tsx deleted file mode 100644 index 4b8154c5..00000000 --- a/src/pages/lost-article/component/lostContent.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import { PostCardMissing } from '@/components/PostCard/PostCardBasicMissing'; -import { formatYYYYMMDD } from '@/utils/formatYYYYMMDD'; -import { Size } from '@/components/PostCard/const/state'; -import { useEffect, useState } from 'react'; -import { useResponseBoard } from '@/hooks/useResponseBoard'; -import { handleCardClick } from '../utils/navigation'; -import AuditContentLoading from '@/pages/audit/component/AuditContentLoading'; -import { LostArticleContentResponse } from '../types'; - -interface LostContentProps { - initPosts?: LostArticleContentResponse[]; - className?: string; - isLoading: boolean; -} - -interface RenderCardProps { - post: LostArticleContentResponse; - size: Size; -} - -export function LostContent({ initPosts, isLoading }: LostContentProps) { - const navigate = useNavigate(); - const { size } = useResponseBoard(); - const screenWidth: number = window.innerWidth; - const [posts, setPosts] = useState(initPosts); - - useEffect(() => { - setPosts(initPosts); - }, [initPosts]); - - if (isLoading) { - return ; - } else { - if (!posts || posts.length === 0) { - return ( -
등록된 게시물이 없습니다
- ); - } - if (screenWidth >= 1920) { - return ( -
-
- {posts.slice(0, 3).map((post) => ( - - ))} -
-
- {posts.slice(3, 6).map((post) => ( - - ))} -
-
- {posts.slice(6, 9).map((post) => ( - - ))} -
-
- ); - } else if (screenWidth >= 1440 && screenWidth < 1920) { - return ( -
-
- {posts.slice(0, 2).map((post) => ( - - ))} -
-
- {posts.slice(2, 4).map((post) => ( - - ))} -
-
- {posts.slice(4, 6).map((post) => ( - - ))} -
-
- ); - } else { - return ( -
- {posts.map((post) => ( - - ))} -
- ); - } - } - - function RenderCard({ post, size }: RenderCardProps) { - const formattedDate = post.date ? formatYYYYMMDD(post.date) : ''; - const thumbnail = post.thumbNail || undefined; - - return ( -
- handleCardClick(post.postId.toString(), post.postId, navigate)} - /> -
- ); - } -} diff --git a/src/pages/lost-article/page.tsx b/src/pages/lost-article/page.tsx index 850c6873..e1462792 100644 --- a/src/pages/lost-article/page.tsx +++ b/src/pages/lost-article/page.tsx @@ -4,7 +4,7 @@ import { BoardSelector } from '@/components/Board/BoardSelector'; import { useNavigate } from 'react-router-dom'; import { categoryMap } from './const/data'; import { useLostBoard } from './hook/useLostBoard'; -import { LostContent } from './component/lostContent'; +import { BoardContent } from '@/template/board/BoardContent'; export function LostArticlePage() { const boardCode = '분실물게시판'; @@ -33,7 +33,7 @@ export function LostArticlePage() { }} /> } - children={} + children={} totalPages={totalPages} currentPage={currentPage} onPageChange={handlePageChange} diff --git a/src/pages/notice/component/NoticeContent.tsx b/src/pages/notice/component/NoticeContent.tsx deleted file mode 100644 index 267d3b24..00000000 --- a/src/pages/notice/component/NoticeContent.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import { PostCardBasic } from '@/components/PostCard/PostCardBasicMissing'; -import { formatYYYYMMDD } from '@/utils/formatYYYYMMDD'; -import { Size } from '@/components/PostCard/const/state'; -import { useEffect, useState } from 'react'; -import { useResponseBoard } from '@/hooks/useResponseBoard'; -import { handleCardClick } from '../utils/cardHandler'; -import NoticeContentLoading from './NoticeContentLoading'; -import { NoticeContentResponse } from '../types'; - -interface NoticeContentProps { - initPosts?: NoticeContentResponse[]; - className?: string; - isLoading: boolean; -} - -interface RenderCardProps { - post: NoticeContentResponse; - size: Size; -} - -export function NoticeContent({ initPosts, isLoading }: NoticeContentProps) { - const navigate = useNavigate(); - const { size } = useResponseBoard(); - const screenWidth: number = window.innerWidth; - const [posts, setPosts] = useState(initPosts); - - useEffect(() => { - setPosts(initPosts); - }, [initPosts]); - - if (isLoading) { - return ; - } else { - if (!posts || posts.length === 0) { - return ( -
등록된 게시물이 없습니다
- ); - } - if (screenWidth >= 1920) { - return ( -
-
- {posts.slice(0, 3).map((post) => ( - - ))} -
-
- {posts.slice(3, 6).map((post) => ( - - ))} -
-
- {posts.slice(6, 9).map((post) => ( - - ))} -
-
- ); - } else if (screenWidth >= 1440 && screenWidth < 1920) { - return ( -
-
- {posts.slice(0, 2).map((post) => ( - - ))} -
-
- {posts.slice(2, 4).map((post) => ( - - ))} -
-
- {posts.slice(4, 6).map((post) => ( - - ))} -
-
- ); - } else { - return ( -
- {posts.map((post) => ( - - ))} -
- ); - } - } - - function RenderCard({ post, size }: RenderCardProps) { - const formattedDate = post.date ? formatYYYYMMDD(post.date) : ''; - let status: 'Emergency' | 'New' | 'Default'; - if (post.status === '긴급공지') { - status = 'Emergency'; - } else if (post.status === '새로운') { - status = 'New'; - } else { - status = 'Default'; - } - let thumbnail = post.thumbNail || undefined; - - if (status === 'Emergency' && thumbnail === undefined) { - thumbnail = `image/default/thumbnail/thumbnail_299px.png`; - } - - return ( -
- handleCardClick(post.postId.toString(), post.postId, navigate)} - /> -
- ); - } -} diff --git a/src/pages/notice/component/NoticeContentLoading.tsx b/src/pages/notice/component/NoticeContentLoading.tsx deleted file mode 100644 index ff4974a1..00000000 --- a/src/pages/notice/component/NoticeContentLoading.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Skeleton } from '@/components/ui/skeleton'; - -interface AuditContentLoadingProps { - screenWidth: number; -} - -export default function AuditContentLoading({ screenWidth }: AuditContentLoadingProps) { - const emptyFive = Array(5).fill(null); - const emptyThree = Array(3).fill(null); - const emptyTwo = Array(2).fill(null); - if (screenWidth >= 1920) { - return ( -
- {emptyThree.map((_, index) => ( -
- {emptyThree.map((_, i) => ( - - ))} -
- ))} -
- ); - } else if (screenWidth >= 1440 && screenWidth < 1920) { - return ( -
- {emptyThree.map((_, index) => ( -
- {emptyTwo.map((_, i) => ( - - ))} -
- ))} -
- ); - } else { - return ( -
- {emptyFive.map((_, index) => ( - - ))} -
- ); - } -} From 79f9c722802e3dd95b19c822280ee0acb354b34d Mon Sep 17 00:00:00 2001 From: ssu-it-support Date: Thu, 10 Oct 2024 04:31:24 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=EC=A0=9C=ED=9C=B4=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=ED=8C=90=20=EC=A0=9C=EC=99=B8=20=EC=A0=84=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=ED=8C=90=EC=97=90=20BoardContent=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/template/board/BoardContent.tsx | 125 +++++++++++++++++++++ src/template/board/BoardContentLoading.tsx | 44 ++++++++ 2 files changed, 169 insertions(+) create mode 100644 src/template/board/BoardContent.tsx create mode 100644 src/template/board/BoardContentLoading.tsx diff --git a/src/template/board/BoardContent.tsx b/src/template/board/BoardContent.tsx new file mode 100644 index 00000000..5dbd5d91 --- /dev/null +++ b/src/template/board/BoardContent.tsx @@ -0,0 +1,125 @@ +import { Size } from '@/components/PostCard/const/state'; +import { PostCardBasic } from '@/components/PostCard/PostCardBasicMissing'; +import { useResponseBoard } from '@/hooks/useResponseBoard'; +import { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import BoardContentLoading from './BoardContentLoading'; +import { formatYYYYMMDD } from '@/utils/formatYYYYMMDD'; + +interface BoardContentProps { + boardName: string; + data?: any[]; + className?: string; + isLoading: boolean; +} + +export function BoardContent({ boardName, data, isLoading }: BoardContentProps) { + const navigate = useNavigate(); + const { size } = useResponseBoard(); + const screenWidth: number = window.innerWidth; + const [posts, setPosts] = useState(data); + + useEffect(() => { + setPosts(data); + }, [data]); + + if (isLoading) { + return ; + } else { + if (!posts || posts.length === 0) { + return ( +
등록된 게시물이 없습니다
+ ); + } + if (screenWidth >= 1920) { + return ( +
+
+ {posts.slice(0, 3).map((post) => ( + + ))} +
+
+ {posts.slice(3, 6).map((post) => ( + + ))} +
+
+ {posts.slice(6, 9).map((post) => ( + + ))} +
+
+ ); + } else if (screenWidth >= 1440 && screenWidth < 1920) { + return ( +
+
+ {posts.slice(0, 2).map((post) => ( + + ))} +
+
+ {posts.slice(2, 4).map((post) => ( + + ))} +
+
+ {posts.slice(4, 6).map((post) => ( + + ))} +
+
+ ); + } else { + return ( +
+ {posts.map((post) => ( + + ))} +
+ ); + } + } + + interface RenderCardProps { + post: any; + size: Size; + boardName: string; + } + + function RenderCard({ post, size, boardName }: RenderCardProps) { + const formattedDate = post.date ? formatYYYYMMDD(post.date) : ''; + let thumbnail = post.thumbNail || undefined; + + let status: 'Emergency' | 'New' | 'Default'; + if (post.status === '긴급공지') { + status = 'Emergency'; + } else if (post.status === '새로운') { + status = 'New'; + } else { + status = 'Default'; + } + if (status === 'Emergency' && thumbnail === undefined) { + thumbnail = `image/default/thumbnail/thumbnail_299px.png`; + } + return ( +
+ navigate(`/${boardName}/${post.postId}`, { state: { postId: post.postId } })} + /> +
+ ); + } +} diff --git a/src/template/board/BoardContentLoading.tsx b/src/template/board/BoardContentLoading.tsx new file mode 100644 index 00000000..af96749d --- /dev/null +++ b/src/template/board/BoardContentLoading.tsx @@ -0,0 +1,44 @@ +import { Skeleton } from '@/components/ui/skeleton'; + +interface BoardContentLoadingProps { + screenWidth: number; +} + +export default function BoardContentLoading({ screenWidth }: BoardContentLoadingProps) { + const emptyFive = Array(5).fill(null); + const emptyThree = Array(3).fill(null); + const emptyTwo = Array(2).fill(null); + if (screenWidth >= 1920) { + return ( +
+ {emptyThree.map((_, index) => ( +
+ {emptyThree.map((_, i) => ( + + ))} +
+ ))} +
+ ); + } else if (screenWidth >= 1440 && screenWidth < 1920) { + return ( +
+ {emptyThree.map((_, index) => ( +
+ {emptyTwo.map((_, i) => ( + + ))} +
+ ))} +
+ ); + } else { + return ( +
+ {emptyFive.map((_, index) => ( + + ))} +
+ ); + } +}