From 107d79c1fff54e71f201d96a65dfe17d24c94546 Mon Sep 17 00:00:00 2001 From: taeho Date: Wed, 8 Nov 2023 11:42:25 +0900 Subject: [PATCH] Update notices page --- src/pages/api/notices.ts | 25 +++++++++++- src/pages/notices.tsx | 84 ++++++++++++++++++++++++++++++---------- src/styles/globals.css | 20 +++++++++- 3 files changed, 107 insertions(+), 22 deletions(-) diff --git a/src/pages/api/notices.ts b/src/pages/api/notices.ts index 03e84801..8e7e81bd 100644 --- a/src/pages/api/notices.ts +++ b/src/pages/api/notices.ts @@ -37,7 +37,8 @@ export async function FetchNotice(noticeId: number) { // 공지 전체 불러오기 export async function FetchAllNotices() { const notices = await prisma.fontsNotice.findMany({ - where: { notice_show_type: true } + where: { notice_show_type: true }, + orderBy: { notice_id: "desc" } }); return notices; @@ -130,6 +131,28 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) err: err }); } + } else if (req.query.action === "search") { + try { + const notices = await prisma.fontsNotice.findMany({ + where: { + OR: [ + { notice_title: {contains: req.query.text as string} }, + { notice_content: {contains: req.query.text as string} }, + ] + }, + orderBy: { notice_id: "desc" } + }); + + return res.status(200).json({ + msg: "공지 찾기 성공", + notices: notices, + }) + } catch (err) { + return res.status(500).json({ + msg: '공지 찾기 실패', + err: err, + }) + } } } } \ No newline at end of file diff --git a/src/pages/notices.tsx b/src/pages/notices.tsx index 62cf9566..ea4cf3f0 100644 --- a/src/pages/notices.tsx +++ b/src/pages/notices.tsx @@ -8,6 +8,7 @@ import { NextSeo } from 'next-seo'; import { CheckIfSessionExists } from './api/user/checkifsessionexists'; import { FetchUserInfo } from './api/user/fetchuserinfo'; import { FetchAllNotices } from './api/notices'; +import axios from 'axios'; // components import Header from "@/components/header"; @@ -31,14 +32,20 @@ const Notices = ({params}: any) => { // 빈 함수 const emptyFn = () => { return; } - // 공지 - 전체 + // 공지 - 목록 const [notices, setNotices] = useState(params.notices); + // 공지 - 전체 + const [all, setAll] = useState(params.notices); + // 공지 - 서비스 - const services = params.notices.filter((notice: Notice) => notice.notice_type === "service"); + const [services, setServices] = useState(params.notices.filter((notice: Notice) => notice.notice_type === "service")); // 공지 - 폰트 - const fonts = params.notices.filter((notice: Notice) => notice.notice_type === "font"); + const [fonts, setFonts] = useState(params.notices.filter((notice: Notice) => notice.notice_type === "font")); + + // 공지 타입 저장 + const [type, setType] = useState("all"); /** 날짜 포맷 */ const dateFormat = (date: string) => { @@ -48,9 +55,40 @@ const Notices = ({params}: any) => { /** 서비스 유형 선택 시 */ const handleTypeOnChange = (e: React.ChangeEvent) => { - if (e.target.id === "all") { setNotices(params.notices); } - else if (e.target.id === "service") { setNotices(services); } - else { setNotices(fonts); } + if (e.target.id === "all") { + setNotices(all); + setType("all"); + } + else if (e.target.id === "service") { + setNotices(services); + setType("service"); + } + else { + setNotices(fonts); + setType("font"); + } + } + + /** 엔터키 입력 */ + const handleKeyUp = async (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + await axios.get("/api/notices", { + params: { + action: "search", + text: e.currentTarget.value, + } + }) + .then(res => { + setAll(res.data.notices); + setServices(res.data.notices.filter((notice: Notice) => notice.notice_type === "service")); + setFonts(res.data.notices.filter((notice: Notice) => notice.notice_type === "font")); + + if (type === "all") { setNotices(res.data.notices); } + else if (type === "service") { setNotices(res.data.notices.filter((notice: Notice) => notice.notice_type === "service")); } + else { setNotices(res.data.notices.filter((notice: Notice) => notice.notice_type === "font")); } + }) + .catch(err => console.log(err)); + } } return ( @@ -85,19 +123,19 @@ const Notices = ({params}: any) => { {/* 메인 */}
-
+

공지사항

폰트 업데이트 & 소식

- +
- +
@@ -109,20 +147,26 @@ const Notices = ({params}: any) => {
{ - notices && notices.map((notice: Notice , idx: number) => { - return
-
-
-
{notice.notice_type === "service" ? "서비스" : "폰트"}
-
{notice.notice_title}
-
-
-
{dateFormat(notice.notice_created_at)}
- + notices && notices.length > 0 + ? notices.map((notice: Notice) => { + return
+ +
+ + 
{notice.notice_content}
}) + :
공지사항을 찾을 수 없습니다.
}
diff --git a/src/styles/globals.css b/src/styles/globals.css index 457b778b..ad5d15b7 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -615,4 +615,22 @@ html.dark #__next .MuiPagination-ul .Mui-selected { #__next .MuiSwitch-thumb { color: #FFFFFF; } #__next .Mui-checked .MuiSwitch-thumb { color: #40E0D0; } #__next .MuiSwitch-track { background-color: #FFFFFF80; } -#__next .Mui-checked + .MuiSwitch-track { background-color: #40E0D080; } \ No newline at end of file +#__next .Mui-checked + .MuiSwitch-track { background-color: #40E0D080; } + +/* 공지사항 */ +.notices .notice:last-of-type label > div { + border-bottom: 1px solid #B1B2B6; +} +html.dark .notices .notice:last-of-type label > div { + border-bottom: 1px solid #646568; +} +.notices .notice:last-of-type input:checked ~ pre { + border-top: none; + border-bottom: 1px solid #B1B2B6; +} +html.dark .notices .notice:last-of-type input:checked ~ pre { + border-bottom: 1px solid #646568; +} +.notice input:checked + label svg { + transform: rotate(90deg); +} \ No newline at end of file