{heading}
@@ -21,8 +21,8 @@ export function NoticeHeading({
setValue(event.currentTarget.value)}
+ // onChange={(event) => setValue(event.currentTarget.value)}
+ onChange={handleInput}
+ onKeyDown={handleKeyDown}
rightSectionPointerEvents="all"
mt="md"
rightSection={
setValue("")}
- style={{ display: value ? undefined : "none" }}
+ onClick={(e) => handleInput(e, "CLEAR")}
+ style={{ display: inputValue ? undefined : "none" }}
/>
}
/>
-
diff --git a/src/components/common/Noticeboard/elements/NoticeItem.tsx b/src/components/common/Noticeboard/elements/NoticeItem.tsx
index 1e77dc2c..9d73ef7a 100644
--- a/src/components/common/Noticeboard/elements/NoticeItem.tsx
+++ b/src/components/common/Noticeboard/elements/NoticeItem.tsx
@@ -1,14 +1,10 @@
-import Link from "next/link";
-import styles from "../Noticeboard.module.css";
+import { INoticeAllItem } from "@/types/PageBoardTypes";
import { Group } from "@mantine/core";
import { IconPinFilled } from "@tabler/icons-react";
-import { IBoardItem } from "../Noticeboard";
-
-type INoticeItem = IBoardItem & {
- key: number;
-};
+import Link from "next/link";
+import styles from "../Noticeboard.module.css";
-export function NoticeItem({ key, title, number, author, date, view, pinned, href }: INoticeItem) {
+export function NoticeItem({ title, number, author, date, view, pinned, href }: INoticeAllItem) {
const formattedDate = new Intl.DateTimeFormat("ko-KR", {
year: "numeric",
month: "2-digit",
@@ -16,7 +12,7 @@ export function NoticeItem({ key, title, number, author, date, view, pinned, hre
}).format(date);
return (
-
+
{pinned ? : null}
From 96f67732ac193db4f9959ae80c542214e51be655 Mon Sep 17 00:00:00 2001
From: chunzhi23 <05.huanx10ng@gmail.com>
Date: Wed, 14 Aug 2024 16:33:29 +0900
Subject: [PATCH 06/14] =?UTF-8?q?[FEAT]=20#44=20=EA=B3=B5=EC=A7=80?=
=?UTF-8?q?=EC=82=AC=ED=95=AD=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../infodesk/notices/getUserNoticeItems.tsx | 93 ++++++++++++++++
src/app/(user)/infodesk/notices/page.tsx | 102 +++++++++++++++++-
.../(user)/infodesk/notices/styles.module.css | 22 ++++
3 files changed, 216 insertions(+), 1 deletion(-)
create mode 100644 src/app/(user)/infodesk/notices/getUserNoticeItems.tsx
create mode 100644 src/app/(user)/infodesk/notices/styles.module.css
diff --git a/src/app/(user)/infodesk/notices/getUserNoticeItems.tsx b/src/app/(user)/infodesk/notices/getUserNoticeItems.tsx
new file mode 100644
index 00000000..73f4f37a
--- /dev/null
+++ b/src/app/(user)/infodesk/notices/getUserNoticeItems.tsx
@@ -0,0 +1,93 @@
+import { INoticeAllItem } from "@/types/PageBoardTypes";
+import { ReadonlyURLSearchParams } from "next/navigation";
+
+export function getUserNoticeItems(params: ReadonlyURLSearchParams) {
+ const queryParams = params.get("query");
+ const categoryIdParams = params.get("categoryId");
+
+ const items = [
+ {
+ title: "Important Notice",
+ number: 1,
+ author: "admin",
+ date: new Date(),
+ view: 123,
+ pinned: true,
+ href: "#",
+ contentTxt: "안녕하세요 이건 아주 중요한 공지입니다. 꼭 확인해주세요.",
+ },
+ {
+ title: "Content Update",
+ number: 2,
+ author: "admin",
+ date: new Date(),
+ view: 456,
+ pinned: false,
+ href: "#",
+ contentTxt: "우리 동아리는 SCG. 중요한 업데이트가 있습니다.",
+ },
+ {
+ title: "Reminder",
+ number: 3,
+ author: "admin",
+ date: new Date(),
+ view: 789,
+ pinned: false,
+ href: "#",
+ contentTxt: "이 공지사항을 꼭 확인해 주세요.",
+ },
+ {
+ title: "Important Announcement",
+ number: 4,
+ author: "admin",
+ date: new Date(),
+ view: 321,
+ pinned: true,
+ href: "#",
+ contentTxt: "중요한 발표가 있습니다. 확인해 주세요.",
+ },
+ ];
+
+ const filteredItems = filterItems({ items, queryParams, categoryIdParams });
+ const sortedItems = arrangeItems(filteredItems);
+ return sortedItems;
+}
+
+interface IFilterItems {
+ items: INoticeAllItem[];
+ queryParams: string | null;
+ categoryIdParams: string | null;
+}
+
+function filterItems({ items, queryParams, categoryIdParams }: IFilterItems) {
+ if (!queryParams || !categoryIdParams) {
+ return items;
+ }
+ const categoryId = Number(categoryIdParams);
+
+ return items.filter((item) => {
+ const titleLower = item.title.toLowerCase();
+ const contentLower = item.contentTxt.toLowerCase();
+ const queryLower = queryParams.toLowerCase();
+ switch (categoryId) {
+ case 0:
+ return titleLower.includes(queryLower) || contentLower.includes(queryLower);
+ case 1:
+ return titleLower.includes(queryLower);
+ case 2:
+ return contentLower.includes(queryLower);
+ default:
+ return false;
+ }
+ });
+}
+
+function arrangeItems(items: INoticeAllItem[]) {
+ const pinnedItems = items.filter((item) => item.pinned);
+ const unpinnedItems = items.filter((item) => !item.pinned);
+
+ pinnedItems.sort((a, b) => +b.date - +a.date);
+ unpinnedItems.sort((a, b) => +b.date - +a.date);
+
+ return [...pinnedItems, ...unpinnedItems];
+}
diff --git a/src/app/(user)/infodesk/notices/page.tsx b/src/app/(user)/infodesk/notices/page.tsx
index 240ff5f6..472a25d6 100644
--- a/src/app/(user)/infodesk/notices/page.tsx
+++ b/src/app/(user)/infodesk/notices/page.tsx
@@ -1,3 +1,103 @@
+"use client";
+
+import { Noticeboard } from "@/components/common/Noticeboard";
+import { SubHeadNavbar } from "@/components/common/SubHeadNavbar";
+import { MantineSelectData } from "@/types/MantineTypes";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { ChangeEvent, FormEvent, KeyboardEvent, MouseEvent, useState } from "react";
+import { getUserNoticeItems } from "./getUserNoticeItems";
+import styles from "./styles.module.css";
+import { INoticeClassifier } from "@/types/PageBoardTypes";
+
export default function NoticesPage() {
- return Hello, world!;
+ const pathname = usePathname();
+ const params = useSearchParams();
+
+ const [inputValue, setInputValue] = useState("");
+ const [selectValue, setSelectValue] = useState("0");
+ const router = useRouter();
+
+ // Event Handlers
+ // Handles input changes and clear actions
+ const handleInput = (e: MouseEvent | ChangeEvent, payload?: unknown) => {
+ if (e.type === "change") {
+ const target = e.target as HTMLInputElement;
+ setInputValue(() => target.value);
+ } else if (payload) {
+ if (payload === "CLEAR") {
+ setInputValue(() => "");
+ }
+ }
+ };
+
+ // Handles select value changes
+ const handleSelect = (value: string | null) => {
+ setSelectValue(() => value!);
+ };
+
+ // Handles "Enter" key press for search
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.code === "Enter") onSearch();
+ };
+
+ // Handles form submission
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ onSearch();
+ };
+
+ // Utility Functions
+ // Performs the search operation
+ const onSearch = () => {
+ if (inputValue) {
+ const queryParams = new URLSearchParams({
+ query: inputValue,
+ categoryId: selectValue,
+ });
+ const url = `${pathname}?${queryParams}`;
+ router.push(url);
+ }
+ };
+
+ const userNoticeData: MantineSelectData = [
+ {
+ value: "0",
+ label: "전체",
+ },
+ {
+ value: "1",
+ label: "제목",
+ },
+ {
+ value: "2",
+ label: "내용",
+ },
+ ];
+
+ const userNoticeClassifier: INoticeClassifier = {
+ data: userNoticeData,
+ defaultLabel: 0,
+ searchPlaceholder: "검색어를 입력하세요.",
+ };
+
+ return (
+ <>
+
+
+
+
+
+ );
}
diff --git a/src/app/(user)/infodesk/notices/styles.module.css b/src/app/(user)/infodesk/notices/styles.module.css
new file mode 100644
index 00000000..ebd27cb1
--- /dev/null
+++ b/src/app/(user)/infodesk/notices/styles.module.css
@@ -0,0 +1,22 @@
+.container {
+ margin: 0 auto;
+ padding-top: 100px;
+ padding-bottom: 40px;
+ width: 1024px;
+}
+
+@media screen and (max-width: 480px) {
+ /** 모바일 세로 */
+}
+
+@media screen and (max-width: 768px) {
+ /** 모바일 가로, 태블릿 세로 */
+}
+
+@media screen and (max-width: 1024px) {
+ /** 태블릿 가로 */
+}
+
+@media screen and (max-width: 1280px) {
+ /** 태블릿 가로, 노트북 */
+}
From 2525b4cef187091a11643ada5e97c8c80c71fefb Mon Sep 17 00:00:00 2001
From: chunzhi23 <05.huanx10ng@gmail.com>
Date: Wed, 14 Aug 2024 16:45:27 +0900
Subject: [PATCH 07/14] [FEAT] #44 wrap NoticesPage Suspense
---
.../(user)/infodesk/notices/NoticesPage.tsx | 103 +++++++++++++++++
src/app/(user)/infodesk/notices/page.tsx | 105 +-----------------
2 files changed, 109 insertions(+), 99 deletions(-)
create mode 100644 src/app/(user)/infodesk/notices/NoticesPage.tsx
diff --git a/src/app/(user)/infodesk/notices/NoticesPage.tsx b/src/app/(user)/infodesk/notices/NoticesPage.tsx
new file mode 100644
index 00000000..472a25d6
--- /dev/null
+++ b/src/app/(user)/infodesk/notices/NoticesPage.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { Noticeboard } from "@/components/common/Noticeboard";
+import { SubHeadNavbar } from "@/components/common/SubHeadNavbar";
+import { MantineSelectData } from "@/types/MantineTypes";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { ChangeEvent, FormEvent, KeyboardEvent, MouseEvent, useState } from "react";
+import { getUserNoticeItems } from "./getUserNoticeItems";
+import styles from "./styles.module.css";
+import { INoticeClassifier } from "@/types/PageBoardTypes";
+
+export default function NoticesPage() {
+ const pathname = usePathname();
+ const params = useSearchParams();
+
+ const [inputValue, setInputValue] = useState("");
+ const [selectValue, setSelectValue] = useState("0");
+ const router = useRouter();
+
+ // Event Handlers
+ // Handles input changes and clear actions
+ const handleInput = (e: MouseEvent | ChangeEvent, payload?: unknown) => {
+ if (e.type === "change") {
+ const target = e.target as HTMLInputElement;
+ setInputValue(() => target.value);
+ } else if (payload) {
+ if (payload === "CLEAR") {
+ setInputValue(() => "");
+ }
+ }
+ };
+
+ // Handles select value changes
+ const handleSelect = (value: string | null) => {
+ setSelectValue(() => value!);
+ };
+
+ // Handles "Enter" key press for search
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.code === "Enter") onSearch();
+ };
+
+ // Handles form submission
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ onSearch();
+ };
+
+ // Utility Functions
+ // Performs the search operation
+ const onSearch = () => {
+ if (inputValue) {
+ const queryParams = new URLSearchParams({
+ query: inputValue,
+ categoryId: selectValue,
+ });
+ const url = `${pathname}?${queryParams}`;
+ router.push(url);
+ }
+ };
+
+ const userNoticeData: MantineSelectData = [
+ {
+ value: "0",
+ label: "전체",
+ },
+ {
+ value: "1",
+ label: "제목",
+ },
+ {
+ value: "2",
+ label: "내용",
+ },
+ ];
+
+ const userNoticeClassifier: INoticeClassifier = {
+ data: userNoticeData,
+ defaultLabel: 0,
+ searchPlaceholder: "검색어를 입력하세요.",
+ };
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
diff --git a/src/app/(user)/infodesk/notices/page.tsx b/src/app/(user)/infodesk/notices/page.tsx
index 472a25d6..9672fc03 100644
--- a/src/app/(user)/infodesk/notices/page.tsx
+++ b/src/app/(user)/infodesk/notices/page.tsx
@@ -1,103 +1,10 @@
-"use client";
-
-import { Noticeboard } from "@/components/common/Noticeboard";
-import { SubHeadNavbar } from "@/components/common/SubHeadNavbar";
-import { MantineSelectData } from "@/types/MantineTypes";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { ChangeEvent, FormEvent, KeyboardEvent, MouseEvent, useState } from "react";
-import { getUserNoticeItems } from "./getUserNoticeItems";
-import styles from "./styles.module.css";
-import { INoticeClassifier } from "@/types/PageBoardTypes";
-
-export default function NoticesPage() {
- const pathname = usePathname();
- const params = useSearchParams();
-
- const [inputValue, setInputValue] = useState("");
- const [selectValue, setSelectValue] = useState("0");
- const router = useRouter();
-
- // Event Handlers
- // Handles input changes and clear actions
- const handleInput = (e: MouseEvent | ChangeEvent, payload?: unknown) => {
- if (e.type === "change") {
- const target = e.target as HTMLInputElement;
- setInputValue(() => target.value);
- } else if (payload) {
- if (payload === "CLEAR") {
- setInputValue(() => "");
- }
- }
- };
-
- // Handles select value changes
- const handleSelect = (value: string | null) => {
- setSelectValue(() => value!);
- };
-
- // Handles "Enter" key press for search
- const handleKeyDown = (e: KeyboardEvent) => {
- if (e.code === "Enter") onSearch();
- };
-
- // Handles form submission
- const handleSubmit = (e: FormEvent) => {
- e.preventDefault();
- onSearch();
- };
-
- // Utility Functions
- // Performs the search operation
- const onSearch = () => {
- if (inputValue) {
- const queryParams = new URLSearchParams({
- query: inputValue,
- categoryId: selectValue,
- });
- const url = `${pathname}?${queryParams}`;
- router.push(url);
- }
- };
-
- const userNoticeData: MantineSelectData = [
- {
- value: "0",
- label: "전체",
- },
- {
- value: "1",
- label: "제목",
- },
- {
- value: "2",
- label: "내용",
- },
- ];
-
- const userNoticeClassifier: INoticeClassifier = {
- data: userNoticeData,
- defaultLabel: 0,
- searchPlaceholder: "검색어를 입력하세요.",
- };
+import { Suspense } from "react";
+import NoticesPage from "./NoticesPage";
+export default function Page() {
return (
- <>
-
-
-
-
-
+ Wait...}>
+
+
);
}
From 358f031c30d6457ad00bacfaf15d4f0f4b04f4bd Mon Sep 17 00:00:00 2001
From: chunzhi23 <05.huanx10ng@gmail.com>
Date: Thu, 15 Aug 2024 10:10:38 +0900
Subject: [PATCH 08/14] =?UTF-8?q?[FEAT]=20#44=20=EA=B3=B5=EC=A7=80?=
=?UTF-8?q?=EC=82=AC=ED=95=AD=20=EC=84=B8=EB=B6=80=20=ED=8E=98=EC=9D=B4?=
=?UTF-8?q?=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../notices/[id]/GetUserNoticeDetail.tsx | 29 +++++++++++++++++++
src/app/(user)/infodesk/notices/[id]/page.tsx | 23 ++++++++++++++-
.../infodesk/notices/[id]/styles.module.css | 22 ++++++++++++++
3 files changed, 73 insertions(+), 1 deletion(-)
create mode 100644 src/app/(user)/infodesk/notices/[id]/GetUserNoticeDetail.tsx
create mode 100644 src/app/(user)/infodesk/notices/[id]/styles.module.css
diff --git a/src/app/(user)/infodesk/notices/[id]/GetUserNoticeDetail.tsx b/src/app/(user)/infodesk/notices/[id]/GetUserNoticeDetail.tsx
new file mode 100644
index 00000000..9b6f52aa
--- /dev/null
+++ b/src/app/(user)/infodesk/notices/[id]/GetUserNoticeDetail.tsx
@@ -0,0 +1,29 @@
+type DynamicSegmentType = string | null;
+
+export function getUserNoticeDetail(id: DynamicSegmentType) {
+ console.log(id);
+ const item = {
+ title: "Title",
+ author: "admin",
+ created_date: new Date(),
+ edited_date: new Date(),
+ attachment: [
+ {
+ name: "File 1",
+ url: "/#",
+ },
+ {
+ name: "File 2",
+ url: "/#",
+ },
+ ],
+ pinned: true,
+ prev_page: undefined,
+ next_page: {
+ title: "Next",
+ url: "/2",
+ },
+ children: Content
,
+ };
+ return item;
+}
diff --git a/src/app/(user)/infodesk/notices/[id]/page.tsx b/src/app/(user)/infodesk/notices/[id]/page.tsx
index 63a33459..8dd4d299 100644
--- a/src/app/(user)/infodesk/notices/[id]/page.tsx
+++ b/src/app/(user)/infodesk/notices/[id]/page.tsx
@@ -1,3 +1,24 @@
+"use client";
+
+import { SubHeadNavbar } from "@/components/common/SubHeadNavbar";
+import styles from "./styles.module.css";
+import { NoticeDetail } from "@/components/common/NoticeDetail";
+import { getUserNoticeDetail } from "./GetUserNoticeDetail";
+import { useSelectedLayoutSegment } from "next/navigation";
+
export default function NoticeDetailPage() {
- return Hello, world!;
+ const segment = useSelectedLayoutSegment();
+
+ const { children, ...othersDetailProps } = getUserNoticeDetail(segment);
+
+ return (
+ <>
+
+
+
+ {children}
+
+
+
+ );
}
diff --git a/src/app/(user)/infodesk/notices/[id]/styles.module.css b/src/app/(user)/infodesk/notices/[id]/styles.module.css
new file mode 100644
index 00000000..ebd27cb1
--- /dev/null
+++ b/src/app/(user)/infodesk/notices/[id]/styles.module.css
@@ -0,0 +1,22 @@
+.container {
+ margin: 0 auto;
+ padding-top: 100px;
+ padding-bottom: 40px;
+ width: 1024px;
+}
+
+@media screen and (max-width: 480px) {
+ /** 모바일 세로 */
+}
+
+@media screen and (max-width: 768px) {
+ /** 모바일 가로, 태블릿 세로 */
+}
+
+@media screen and (max-width: 1024px) {
+ /** 태블릿 가로 */
+}
+
+@media screen and (max-width: 1280px) {
+ /** 태블릿 가로, 노트북 */
+}
From 4482b4676b997a17f86ebe79bf44580a14bf546d Mon Sep 17 00:00:00 2001
From: chunzhi23 <05.huanx10ng@gmail.com>
Date: Fri, 16 Aug 2024 12:45:31 +0900
Subject: [PATCH 09/14] NoticeDetail types modularization
---
.../common/NoticeDetail/NoticeDetail.tsx | 20 +++++------
.../elements/FileDropdownMenu.tsx | 6 ++--
.../elements/NoticeDetailHead.tsx | 13 ++-----
.../elements/NoticeDetailSprint.tsx | 15 ++------
.../elements/NoticeDetailStage.tsx | 16 ++-------
.../elements/NoticeDetailToolbar.tsx | 2 +-
src/types/PageBoardTypes.ts | 35 ++++++++++++++++++-
7 files changed, 55 insertions(+), 52 deletions(-)
diff --git a/src/components/common/NoticeDetail/NoticeDetail.tsx b/src/components/common/NoticeDetail/NoticeDetail.tsx
index 3d4bdeec..7264a143 100644
--- a/src/components/common/NoticeDetail/NoticeDetail.tsx
+++ b/src/components/common/NoticeDetail/NoticeDetail.tsx
@@ -1,17 +1,13 @@
-import styles from "./NoticeDetail.module.css";
-import { IDetailHeadProps, NoticeDetailHead } from "./elements/NoticeDetailHead";
-import { IDetailStageProps, NoticeDetailStage } from "./elements/NoticeDetailStage";
-import { IDetailSprintProps, NoticeDetailSprint } from "./elements/NoticeDetailSprint";
+import { INoticeDetailItem } from "@/types/PageBoardTypes";
+import { NoticeDetailHead } from "./elements/NoticeDetailHead";
+import { NoticeDetailSprint } from "./elements/NoticeDetailSprint";
+import { NoticeDetailStage } from "./elements/NoticeDetailStage";
import { NoticeDetailToolbar } from "./elements/NoticeDetailToolbar";
+import styles from "./NoticeDetail.module.css";
-interface IDetailHeadingProps {
+type NoticeDetailProps = INoticeDetailItem & {
heading: string;
-}
-
-type NoticeDetailPropsType = IDetailHeadingProps &
- IDetailHeadProps &
- IDetailStageProps &
- IDetailSprintProps;
+};
export function NoticeDetail({
heading,
@@ -24,7 +20,7 @@ export function NoticeDetail({
prev_page,
next_page,
children,
-}: NoticeDetailPropsType) {
+}: NoticeDetailProps) {
return (
<>
diff --git a/src/components/common/NoticeDetail/elements/FileDropdownMenu.tsx b/src/components/common/NoticeDetail/elements/FileDropdownMenu.tsx
index fa36cbc3..4fd831d1 100644
--- a/src/components/common/NoticeDetail/elements/FileDropdownMenu.tsx
+++ b/src/components/common/NoticeDetail/elements/FileDropdownMenu.tsx
@@ -1,9 +1,9 @@
-import styles from "../NoticeDetail.module.css";
+import { IBoardAttachment } from "@/types/PageBoardTypes";
import { Menu, Button, Group } from "@mantine/core";
import { IconPaperclip, IconDownload } from "@tabler/icons-react";
-import { IFileInfo } from "./NoticeDetailStage";
+import styles from "../NoticeDetail.module.css";
-export function FileDropdownMenu({ attachment }: { attachment?: IFileInfo[] }) {
+export function FileDropdownMenu({ attachment }: { attachment?: IBoardAttachment[] }) {
return (