`
border-bottom: 1px solid ${lightThemeColor.neutral_40};
+ background-color: ${(props) =>
+ props.type === "free" ? "#fff" : `${lightThemeColor.primary_10}`};
`;
export const ThTitle = styled.th`
border: none;
padding: 20px 0px;
- width: 50%;
+ width: 62.5%;
+ vertical-align: middle;
`;
export const Th = styled.th`
border: none;
padding: 20px 0px;
- width: 12.5%;
- text-align: center;
+ vertical-align: middle;
`;
diff --git a/src/components/UI/Table/index.ts b/src/components/UI/Board/Table/index.ts
similarity index 68%
rename from src/components/UI/Table/index.ts
rename to src/components/UI/Board/Table/index.ts
index 1e80554..73c4850 100644
--- a/src/components/UI/Table/index.ts
+++ b/src/components/UI/Board/Table/index.ts
@@ -5,3 +5,4 @@
*/
export { default as Table } from "./Table";
+export { default as TableHeader } from "./TableHeader";
diff --git a/src/components/UI/Header/Header.tsx b/src/components/UI/Header/Header.tsx
index d84555b..1bbc610 100644
--- a/src/components/UI/Header/Header.tsx
+++ b/src/components/UI/Header/Header.tsx
@@ -31,16 +31,7 @@ export default function Header({}: {}) {
case "free-board": {
router.push({
- pathname: "/board/free",
- query: {
- page: 1,
- },
- });
- break;
- }
- case "notice-board": {
- router.push({
- pathname: "/board/notice",
+ pathname: "/board",
query: {
page: 1,
},
@@ -99,18 +90,7 @@ export default function Header({}: {}) {
}
hoverTypoColor="neutral_90"
>
- 수다 게시판
-
-
- 공지 게시판
+ 동아리 게시판
diff --git a/src/components/UI/Quill/Quill.tsx b/src/components/UI/Quill/Quill.tsx
index 0a3ac1f..5aad661 100644
--- a/src/components/UI/Quill/Quill.tsx
+++ b/src/components/UI/Quill/Quill.tsx
@@ -22,13 +22,19 @@ const modules = {
const formats = [
"header",
- "font",
- "size",
"bold",
"italic",
"underline",
"strike",
"blockquote",
+ "list",
+ "bullet",
+ "indent",
+ "link",
+ "image",
+ "align",
+ "color",
+ "background",
];
interface QuillProps {
@@ -79,6 +85,7 @@ export default function Quill({
}}
>
+
+
+
-
);
diff --git a/src/components/UI/Table/Table.tsx b/src/components/UI/Table/Table.tsx
deleted file mode 100644
index 27b2bbd..0000000
--- a/src/components/UI/Table/Table.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/*
- * Created on Fri Jan 19 2024
- *
- * Copyright (c) 2024 Your Company
- */
-
-import React from "react";
-
-import * as S from "./emotion";
-import { Typography } from "@/components";
-
-interface PostData {
- id: number;
-}
-
-interface TableData {
- data:
- | Swagger.Api.FreePostFindAllAndCount.ResponseBody
- | Swagger.Api.NoticePostFindAllAndCount.ResponseBody;
- type: string;
- handleClickPostDetail: (el: PostData) => void;
-}
-
-export default function Table({
- data,
- type,
- handleClickPostDetail,
-}: TableData) {
- const getAuthorType = (
- post: Swagger.FreePostsItemDto | Swagger.NoticePostsItemDto
- ) => {
- if (type === "free" && "isAnonymous" in post && post.isAnonymous) {
- return (
-
-
- 익명
-
-
- );
- } else if (type === "free" && "isAnonymous" in post && !post.isAnonymous) {
- return (
-
-
- {post.userId}
-
-
- );
- } else if (type === "notice") {
- return (
-
-
- 운영자 ?
-
-
- );
- }
- };
-
- return (
-
-
-
-
-
-
- 순서
-
-
-
-
- 제목
-
-
-
-
- 작성자
-
-
-
-
- 작성일
-
-
-
-
- 조회
-
-
-
-
-
- {data.contents.map((post) => {
- return (
- handleClickPostDetail(post)}>
-
-
- {post.id}
-
-
-
-
- {post.title}
-
-
-
- {getAuthorType(post)}
-
-
- {new Date(post.createdAt).toLocaleDateString()}
-
-
-
-
- {post.hit}
-
-
-
- );
- })}
-
-
-
- );
-}
diff --git a/src/containers/Board/DetailBoard/DetailBoard.tsx b/src/containers/Board/DetailBoard/DetailBoard.tsx
new file mode 100644
index 0000000..459806f
--- /dev/null
+++ b/src/containers/Board/DetailBoard/DetailBoard.tsx
@@ -0,0 +1,101 @@
+import { useRouter } from "next/router";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+import * as S from "./emotion";
+import { freePostsAPI, noticePostsAPI } from "@/apis";
+import {
+ FreePostDetailResponseDto,
+ NoticePostDetailResponseDto,
+} from "@/apis/data-contracts";
+
+export default function DetailBoard() {
+ const router = useRouter();
+ const { postId, type } = router.query;
+
+ const { data } = useQuery({
+ queryFn: async () => {
+ let response;
+ if (type === "free") {
+ response = await freePostsAPI.freePostFindOneOrNotFound(Number(postId));
+ } else {
+ response = await noticePostsAPI.noticePostFindOneOrNotFound(
+ Number(postId)
+ );
+ }
+
+ return response.data;
+ },
+
+ queryKey: ["post", postId, type],
+ enabled: postId !== undefined,
+ });
+
+ const { mutate } = useMutation({
+ mutationKey: ["post", postId, type],
+ mutationFn: async () => {
+ let response;
+ if (type === "free") {
+ response = await freePostsAPI.freePostIncrementHit(Number(postId));
+ } else {
+ response = await noticePostsAPI.noticePostIncreaseHit(Number(postId));
+ }
+ },
+ onSuccess() {
+ console.log(data);
+ },
+ onError(error) {
+ console.log(error);
+ },
+ });
+
+ useEffect(() => {
+ if (data) {
+ mutate();
+ }
+ }, [data, mutate]);
+
+ const handleClickDelete = () => {
+ freePostsAPI.freePostRemove(Number(postId)).then(() => {
+ router.back();
+ });
+ };
+
+ const handleClickUpdate = async () => {
+ router.push({
+ pathname: `/board/free/write/`,
+ query: {
+ Id: postId,
+ },
+ });
+ };
+
+ return (
+
+
+ {
+ (type === "free"
+ ? (data as FreePostDetailResponseDto)?.freePost
+ : (data as NoticePostDetailResponseDto)?.noticePost
+ )?.title
+ }
+
+
+ 수정
+ 삭제
+
+
+
+
+ {
+ (type === "free"
+ ? (data as FreePostDetailResponseDto)?.freePost
+ : (data as NoticePostDetailResponseDto)?.noticePost
+ )?.description
+ }
+
+
+
+
+ );
+}
diff --git a/src/containers/Board/DetailFreeBoard/emotion.ts b/src/containers/Board/DetailBoard/emotion.ts
similarity index 100%
rename from src/containers/Board/DetailFreeBoard/emotion.ts
rename to src/containers/Board/DetailBoard/emotion.ts
diff --git a/src/containers/Board/DetailBoard/index.ts b/src/containers/Board/DetailBoard/index.ts
new file mode 100644
index 0000000..ba954e2
--- /dev/null
+++ b/src/containers/Board/DetailBoard/index.ts
@@ -0,0 +1 @@
+export { default as DetailBoard } from "./DetailBoard";
diff --git a/src/containers/Board/DetailFreeBoard/DetailFreeBoard.tsx b/src/containers/Board/DetailFreeBoard/DetailFreeBoard.tsx
deleted file mode 100644
index 615960b..0000000
--- a/src/containers/Board/DetailFreeBoard/DetailFreeBoard.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useRouter } from "next/router";
-import { useQuery } from "@tanstack/react-query";
-import { useEffect } from "react";
-
-import * as S from "./emotion";
-import { freePostsAPI } from "@/apis";
-
-export default function DetailFreeBoard() {
- const router = useRouter();
- const { postId } = router.query;
-
- const { data, isFetched } = useQuery({
- queryFn: async () => {
- const response = await freePostsAPI.freePostFindOneOrNotFound(
- Number(postId)
- );
-
- return response.data;
- },
-
- queryKey: ["post", postId],
- enabled: postId !== undefined,
- });
-
- useEffect(() => {
- if (isFetched) {
- incrementPostViews();
- }
- }, [isFetched]);
-
- const incrementPostViews = async () => {
- await freePostsAPI.freePostIncrementHit(Number(postId));
- };
-
- const handleClickDelete = () => {
- freePostsAPI.freePostRemove(Number(postId)).then(() => {
- router.back();
- });
- };
-
- const handleClickUpdate = async () => {
- router.push({
- pathname: `/board/free/write/`,
- query: {
- Id: postId,
- },
- });
- };
-
- return (
-
- {data?.freePost.title}
-
- 수정
- 삭제
-
-
-
- {data?.freePost.description}
-
-
-
- );
-}
diff --git a/src/containers/Board/DetailFreeBoard/index.ts b/src/containers/Board/DetailFreeBoard/index.ts
deleted file mode 100644
index f1006b1..0000000
--- a/src/containers/Board/DetailFreeBoard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DetailFreeBoard } from "./DetailFreeBoard";
diff --git a/src/containers/Board/DetailNoticeBoard/DetailNoticeBoard.tsx b/src/containers/Board/DetailNoticeBoard/DetailNoticeBoard.tsx
deleted file mode 100644
index eb6257f..0000000
--- a/src/containers/Board/DetailNoticeBoard/DetailNoticeBoard.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useRouter } from "next/router";
-import { useQuery } from "@tanstack/react-query";
-import { useEffect } from "react";
-
-import * as S from "./emotion";
-import { noticePostsAPI } from "@/apis";
-
-export default function DetailNoticeBoard() {
- const router = useRouter();
- const { postId } = router.query;
-
- const { data, isFetched } = useQuery({
- queryFn: async () => {
- const response = await noticePostsAPI.noticePostFindOneOrNotFound(
- Number(postId)
- );
-
- return response.data;
- },
- queryKey: ["post", postId],
- enabled: postId !== undefined,
- });
-
- useEffect(() => {
- if (isFetched) {
- incrementPostViews();
- }
- }, [isFetched]);
-
- const incrementPostViews = async () => {
- await noticePostsAPI.noticePostIncreaseHit(Number(postId));
- };
-
- const handleClickDelete = () => {
- noticePostsAPI.noticePostRemove(Number(postId)).then(() => {
- router.back();
- });
- };
-
- const handleClickUpdate = async () => {
- router.push({
- pathname: `/board/notice/write/`,
- query: {
- Id: postId,
- },
- });
- };
-
- return (
-
- {data?.noticePost.title}
-
- 수정
- 삭제
-
-
-
- {data?.noticePost.description}
-
-
-
- );
-}
diff --git a/src/containers/Board/DetailNoticeBoard/emotion.ts b/src/containers/Board/DetailNoticeBoard/emotion.ts
deleted file mode 100644
index 8ac8633..0000000
--- a/src/containers/Board/DetailNoticeBoard/emotion.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Button, Row } from "@/components";
-import styled from "@emotion/styled";
-
-export const Container = styled.div`
- width: 100vw;
- height: 100vh;
- flex-direction: column;
- background-color: #fff;
-`;
-
-export const Title = styled.h2`
- padding: 12px 20px;
-`;
-
-export const WrapBar = styled(Row)`
- padding: 12px 20px;
- justify-content: flex-end;
-`;
-
-export const Btn = styled(Button)`
- padding: 6px;
- margin-right: 12px;
-`;
-
-export const WrapDesc = styled.div`
- padding: 12px 20px;
- margin: 12px 20px;
- border: 1px solid #222;
-`;
-
-export const Desc = styled.span``;
diff --git a/src/containers/Board/DetailNoticeBoard/index.ts b/src/containers/Board/DetailNoticeBoard/index.ts
deleted file mode 100644
index 886cbb8..0000000
--- a/src/containers/Board/DetailNoticeBoard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DetailNoticeBoard } from "./DetailNoticeBoard";
diff --git a/src/containers/Board/SearchWriter/SearchWriter.tsx b/src/containers/Board/SearchWriter/SearchWriter.tsx
index 0131a32..b5968ab 100644
--- a/src/containers/Board/SearchWriter/SearchWriter.tsx
+++ b/src/containers/Board/SearchWriter/SearchWriter.tsx
@@ -21,7 +21,8 @@ export default function SearchWriter({ type }: BoardType) {
function handleClickPostWrite() {
router.push({
- pathname: `free/write/`,
+ pathname: `board/write/`,
+ query: type,
});
}
diff --git a/src/containers/Board/SearchWriter/emotion.ts b/src/containers/Board/SearchWriter/emotion.ts
index 7e544c1..34cf72c 100644
--- a/src/containers/Board/SearchWriter/emotion.ts
+++ b/src/containers/Board/SearchWriter/emotion.ts
@@ -1,11 +1,14 @@
import { Button, Row } from "@/components";
import { lightThemeColor } from "@/styles/theme";
import styled from "@emotion/styled";
+import { Converter } from "@/utils";
export const Container = styled(Row.div)`
- margin-top: 80px;
- width: calc(100% - 512px);
- min-width: 1408px;
+ margin-top: ${Converter.pxToRem(80)};
+
+ width: calc(100% - ${Converter.pxToRem(527)});
+ min-width: ${Converter.pxToRem(753)};
+ justify-content: space-between;
`;
export const WrapSearch = styled(Row.li)`
@@ -42,7 +45,7 @@ export const Input = styled.input`
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
width: 60%;
- min-width: 844px;
+ min-width: ${Converter.pxToRem(231)};
&::placeholder {
font-size: 28px; /* Remove the quotes */
line-height: normal; /* Remove the quotes */
diff --git a/src/containers/Board/WriteBoard/WriteBoard.tsx b/src/containers/Board/WriteBoard/WriteBoard.tsx
new file mode 100644
index 0000000..7c43790
--- /dev/null
+++ b/src/containers/Board/WriteBoard/WriteBoard.tsx
@@ -0,0 +1,107 @@
+import { useRouter } from "next/router";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+
+import * as S from "./emotion";
+import { Quill } from "@/components";
+import { freePostsAPI, noticePostsAPI } from "@/apis";
+
+export default function WriteBoard() {
+ const router = useRouter();
+ const { id, type } = router.query;
+ const queryClient = useQueryClient();
+
+ const { data } = useQuery({
+ queryFn: async () => {
+ let response;
+ if (type === "free") {
+ response = await freePostsAPI.freePostFindOneOrNotFound(Number(id));
+ } else {
+ response = await noticePostsAPI.noticePostFindOneOrNotFound(Number(id));
+ }
+
+ return response.data;
+ },
+
+ queryKey: ["post", id, type],
+ enabled: id !== undefined,
+ });
+
+ const [value, setValue] = useState<{
+ title: string;
+ description: string;
+ isAnonymous: boolean;
+ isAllowComment: boolean;
+ }>({
+ title: "",
+ description: "",
+ isAnonymous: false,
+ isAllowComment: false,
+ });
+
+ const handleClickUpdate = async () => {
+ if (!value) return;
+ const contentWithoutPTag = value.description.replace(/^|<\/p>$/g, "");
+ const params = {
+ title: value.title,
+ description: contentWithoutPTag,
+ };
+
+ let postData;
+ let postApi;
+ let isCreate;
+
+ if (type === "free") {
+ postData = "freePost";
+ postApi = freePostsAPI;
+ isCreate = !id;
+ } else {
+ postData = "noticePost";
+ postApi = noticePostsAPI;
+ isCreate = !id;
+ }
+
+ if (type === "free") {
+ if (id) {
+ await freePostsAPI.freePostPatchUpdate(Number(id), params);
+ router.back();
+ } else {
+ const { data } = await freePostsAPI.freePostCreate({
+ ...params,
+ isAnonymous: value.isAnonymous,
+ });
+ router.replace({
+ pathname: `/board/free/detail/${data.freePost.id}`,
+ });
+ }
+ } else {
+ if (id) {
+ await noticePostsAPI.noticePostPatchUpdate(Number(id), params);
+ router.back();
+ } else {
+ const { data } = await noticePostsAPI.noticePostCreate({
+ ...params,
+ isAllowComment: value.isAllowComment,
+ });
+ router.replace({
+ pathname: `/board/notice/detail/${data.noticePost.id}`,
+ });
+ }
+ }
+
+ queryClient.removeQueries();
+ };
+
+ return (
+
+
+ {value && (
+
+ )}
+
+ );
+}
diff --git a/src/containers/Board/WriteFreeBoard/emotion.ts b/src/containers/Board/WriteBoard/emotion.ts
similarity index 100%
rename from src/containers/Board/WriteFreeBoard/emotion.ts
rename to src/containers/Board/WriteBoard/emotion.ts
diff --git a/src/containers/Board/WriteBoard/index.ts b/src/containers/Board/WriteBoard/index.ts
new file mode 100644
index 0000000..a04854f
--- /dev/null
+++ b/src/containers/Board/WriteBoard/index.ts
@@ -0,0 +1 @@
+export { default as WriteBoard } from "./WriteBoard";
diff --git a/src/containers/Board/WriteFreeBoard/WriteFreeBoard.tsx b/src/containers/Board/WriteFreeBoard/WriteFreeBoard.tsx
deleted file mode 100644
index 4d8499e..0000000
--- a/src/containers/Board/WriteFreeBoard/WriteFreeBoard.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useRouter } from "next/router";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-
-import * as S from "./emotion";
-import { Quill } from "@/components";
-import { freePostsAPI } from "@/apis";
-
-export default function WriteFreeBoard() {
- const router = useRouter();
- const { id } = router.query;
- const queryClient = useQueryClient();
-
- const { data } = useQuery({
- queryFn: async () => {
- const response = await freePostsAPI.freePostFindOneOrNotFound(Number(id));
- return response.data;
- },
- queryKey: ["post", id],
- enabled: id !== undefined,
- });
-
- const [value, setValue] = useState<{
- title: string;
- description: string;
- isAnonymous: boolean;
- isAllowComment: boolean;
- }>({
- title: data?.freePost.title || "",
- description: data?.freePost.description || "",
- isAnonymous: data?.freePost.isAnonymous || false,
- isAllowComment: false,
- });
-
- const handleClickUpdate = async () => {
- const contentWithoutPTag = value.description.replace(/^
|<\/p>$/g, "");
- const params = {
- title: value.title,
- description: contentWithoutPTag,
- isAnonymous: value.isAnonymous,
- };
-
- if (id) {
- await freePostsAPI.freePostPatchUpdate(Number(id), params);
- router.back();
- } else {
- const { data } = await freePostsAPI.freePostCreate({
- ...params,
- });
- router.replace({
- pathname: `/board/free/detail/${data.freePost.id}`,
- });
- }
- queryClient.removeQueries();
- };
-
- return (
-
-
-
-
- );
-}
diff --git a/src/containers/Board/WriteFreeBoard/index.ts b/src/containers/Board/WriteFreeBoard/index.ts
deleted file mode 100644
index 0098f33..0000000
--- a/src/containers/Board/WriteFreeBoard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as WriteFreeBoard } from "./WriteFreeBoard";
diff --git a/src/containers/Board/WriteNoticeBoard/WriteNoticeBoard.tsx b/src/containers/Board/WriteNoticeBoard/WriteNoticeBoard.tsx
deleted file mode 100644
index b9d7387..0000000
--- a/src/containers/Board/WriteNoticeBoard/WriteNoticeBoard.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useRouter } from "next/router";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-
-import * as S from "./emotion";
-import { Quill } from "@/components";
-import { noticePostsAPI } from "@/apis";
-
-export default function WriteNoticeBoard() {
- const router = useRouter();
- const { id } = router.query;
- const queryClient = useQueryClient();
-
- const { data } = useQuery({
- queryFn: async () => {
- const response = await noticePostsAPI.noticePostFindOneOrNotFound(
- Number(id)
- );
-
- return response.data;
- },
- queryKey: ["post", id],
-
- enabled: id !== undefined,
- });
-
- const [value, setValue] = useState<{
- title: string;
- description: string;
- isAnonymous: boolean;
- isAllowComment: boolean;
- }>({
- title: data?.noticePost.title || "",
- description: data?.noticePost.description || "",
- isAnonymous: false,
- isAllowComment: data?.noticePost.isAllowComment || false,
- });
-
- const handleClickUpdate = async () => {
- const contentWithoutPTag = value.description.replace(/^
|<\/p>$/g, "");
- const params = {
- title: value.title,
- description: contentWithoutPTag,
- isAllowComment: value.isAllowComment,
- };
-
- if (id) {
- await noticePostsAPI.noticePostPutUpdate(Number(id), params);
- router.back();
- } else {
- const { data } = await noticePostsAPI.noticePostCreate(params);
- router.replace({
- pathname: `/board/notice/detail/${data.noticePost.id}`,
- });
- }
-
- queryClient.removeQueries();
- };
-
- return (
-
-
-
- );
-}
diff --git a/src/containers/Board/WriteNoticeBoard/emotion.ts b/src/containers/Board/WriteNoticeBoard/emotion.ts
deleted file mode 100644
index abcb70b..0000000
--- a/src/containers/Board/WriteNoticeBoard/emotion.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Button, Row } from "@/components";
-import styled from "@emotion/styled";
-
-export const Container = styled.div`
- width: 100vw;
- height: 100vh;
- flex-direction: column;
- background-color: #fff;
-`;
-
-export const Title = styled.h2`
- padding: 12px 20px;
-`;
-
-export const WrapBar = styled(Row)`
- padding: 12px 20px;
- flex-direction: row;
- justify-content: flex-end;
-`;
-
-export const Btn = styled(Button)`
- padding: 6px;
-`;
-
-export const WrapDesc = styled.div`
- padding: 12px 20px;
- margin: 12px 20px;
- border: 1px solid #222;
-`;
-
-export const Desc = styled.span``;
diff --git a/src/containers/Board/WriteNoticeBoard/index.ts b/src/containers/Board/WriteNoticeBoard/index.ts
deleted file mode 100644
index a07d80d..0000000
--- a/src/containers/Board/WriteNoticeBoard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as WriteNoticeBoard } from "./WriteNoticeBoard";
diff --git a/src/containers/Board/index.tsx b/src/containers/Board/index.tsx
index 9443848..67260c2 100644
--- a/src/containers/Board/index.tsx
+++ b/src/containers/Board/index.tsx
@@ -6,7 +6,5 @@
export * from "./InfinityScrollBoard";
export * from "./PaginationBoard";
-export * from "./DetailFreeBoard";
-export * from "./DetailNoticeBoard";
-export * from "./WriteFreeBoard";
-export * from "./WriteNoticeBoard";
+export * from "./DetailBoard";
+export * from "./WriteBoard";
diff --git a/src/pages/board/free/detail/[postId].tsx b/src/pages/board/detail/[postId].tsx
similarity index 76%
rename from src/pages/board/free/detail/[postId].tsx
rename to src/pages/board/detail/[postId].tsx
index c69acad..a4e2bb7 100644
--- a/src/pages/board/free/detail/[postId].tsx
+++ b/src/pages/board/detail/[postId].tsx
@@ -6,7 +6,7 @@
import Head from "next/head";
-import { DetailFreeBoard } from "@/containers/Board";
+import { DetailBoard } from "@/containers/Board";
export default function PostDetailPage() {
return (
@@ -14,7 +14,7 @@ export default function PostDetailPage() {
동그라미 - 자유 게시글
-
+
>
);
}
diff --git a/src/pages/board/free/index.tsx b/src/pages/board/free/index.tsx
deleted file mode 100644
index 8881914..0000000
--- a/src/pages/board/free/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * Created on Fri Dec 15 2023
- *
- * Copyright (c) 2023 Your Company
- */
-
-import { GetStaticProps } from "next";
-import { useRouter } from "next/router";
-import { useQuery } from "@tanstack/react-query";
-import Head from "next/head";
-
-import { Column, Loader, Pagination, Typography, WhatIF } from "@/components";
-import { freePostsAPI } from "@/apis";
-import { Table } from "@/components/UI/Table";
-import { SearchWriter } from "@/containers/Board/SearchWriter";
-
-interface PostData {
- id: number;
-}
-
-export default function FreeBoard(props: { boardName: string }) {
- const router = useRouter();
-
- const { data, isLoading, isError } = useQuery({
- queryKey: ["board", "free", router.query.page],
- queryFn: async () => {
- const page = router.query.page as string;
- return (
- await freePostsAPI.freePostFindAllAndCount({
- page: Number(page),
- pageSize: 20,
- })
- ).data;
- },
- });
-
- function handleClickPostDetail(el: PostData) {
- router.push({
- pathname: `free/detail/${el.id}`,
- });
- }
-
- if (isError) throw new Error("게시판을 불러올 수 없습니다.");
- return (
- <>
-
- 동그라미 - 수다 게시판
-
-
-
-
- {props.boardName}
-
-
- }>
- {data && (
-
- )}
-
-
-
- {
- router.push({
- pathname: "/board/free",
- query: {
- page,
- },
- });
- }}
- />
-
-
- >
- );
-}
-
-export const getStaticProps: GetStaticProps = async (ctx) => {
- return {
- props: {
- boardName: "수다 게시판",
- },
- };
-};
diff --git a/src/pages/board/index.tsx b/src/pages/board/index.tsx
new file mode 100644
index 0000000..6811e0a
--- /dev/null
+++ b/src/pages/board/index.tsx
@@ -0,0 +1,201 @@
+/*
+ * Created on Fri Dec 15 2023
+ *
+ * Copyright (c) 2023 Your Company
+ */
+
+import { GetStaticProps } from "next";
+import { useRouter } from "next/router";
+import { useQuery } from "@tanstack/react-query";
+import Head from "next/head";
+
+import {
+ Button,
+ Column,
+ Icon,
+ Loader,
+ Pagination,
+ Typography,
+ WhatIF,
+} from "@/components";
+import { freePostsAPI, noticePostsAPI } from "@/apis";
+import { Table, TableHeader } from "@/components/UI/Board/Table";
+import { SearchWriter } from "@/containers/Board/SearchWriter";
+import { Converter } from "@/utils";
+import { lightThemeColor } from "@/styles/theme";
+import { useState } from "react";
+
+interface PostData {
+ id: number;
+ type: string;
+}
+
+export default function FreeBoard(props: { boardName: string }) {
+ const router = useRouter();
+ const [isNoticeVisible, setIsNoticeVisible] = useState(true);
+
+ const {
+ data: freeData,
+ isLoading: isLoadingFree,
+ isError: isErrorFree,
+ } = useQuery({
+ queryKey: ["board", "free", router.query.page],
+ queryFn: async () => {
+ const page = router.query.page as string;
+ return (
+ await freePostsAPI.freePostFindAllAndCount({
+ page: Number(page),
+ pageSize: 20,
+ })
+ ).data;
+ },
+ });
+
+ const {
+ data: noticeData,
+ isLoading: isLoadingNotice,
+ isError: isErrorNotice,
+ } = useQuery({
+ queryKey: ["board", "notice", router.query.page],
+ queryFn: async () => {
+ const page = router.query.page as string;
+ return (
+ await noticePostsAPI.noticePostFindAllAndCount({
+ page: Number(page),
+ pageSize: 5,
+ })
+ ).data;
+ },
+ });
+
+ function handleClickPostDetail({ id, type }: PostData) {
+ router.push({
+ pathname: `board/detail/${id}/`,
+ query: { type },
+ });
+ }
+
+ function toggleNoticeVisibility() {
+ setIsNoticeVisible(!isNoticeVisible);
+ }
+
+ if (isErrorFree || isErrorNotice)
+ throw new Error("게시판을 불러올 수 없습니다.");
+ return (
+ <>
+
+ 동그라미 - 게시판
+
+
+
+
+ {props.boardName}
+
+
+
+
+ {isNoticeVisible ? (
+
+ ) : (
+
+ )}
+
+
+ 공지 숨기기
+
+
+
+
+
+ {isNoticeVisible && noticeData && (
+
+ )}
+
+ {freeData && (
+
+ )}
+
+
+
+
+ {
+ router.push({
+ pathname: "/board/free",
+ query: {
+ page,
+ },
+ });
+ }}
+ />
+
+ >
+ );
+}
+
+export const getStaticProps: GetStaticProps = async (ctx) => {
+ return {
+ props: {
+ boardName: "게시판",
+ },
+ };
+};
diff --git a/src/pages/board/notice/detail/[postId].tsx b/src/pages/board/notice/detail/[postId].tsx
deleted file mode 100644
index 8297409..0000000
--- a/src/pages/board/notice/detail/[postId].tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * Created on Wed Nov 15 2023
- *
- * Copyright (c) 2023 Your Company
- */
-
-import Head from "next/head";
-
-import { DetailNoticeBoard } from "@/containers/Board";
-
-export default function PostDetailPage() {
- return (
- <>
-
- 동그라미 - 공지 게시글
-
-
- >
- );
-}
diff --git a/src/pages/board/notice/index.tsx b/src/pages/board/notice/index.tsx
deleted file mode 100644
index 9d3e3fc..0000000
--- a/src/pages/board/notice/index.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- * Created on Fri Dec 15 2023
- *
- * Copyright (c) 2023 Your Company
- */
-
-import { GetStaticProps } from "next";
-import { useRouter } from "next/router";
-import { useQuery } from "@tanstack/react-query";
-import Head from "next/head";
-
-import { Column, Loader, Pagination, Typography, WhatIF } from "@/components";
-import { noticePostsAPI } from "@/apis";
-import { Table } from "@/components/UI/Table";
-import { SearchWriter } from "@/containers/Board/SearchWriter";
-
-interface PostData {
- id: number;
-}
-
-export default function NoticeBoard(props: { boardName: string }) {
- const router = useRouter();
-
- const { data, isLoading, isError } = useQuery({
- queryKey: ["board", "notice", router.query.page],
- queryFn: async () => {
- const page = router.query.page as string;
- return (
- await noticePostsAPI.noticePostFindAllAndCount({
- page: Number(page),
- pageSize: 20,
- })
- ).data;
- },
- });
-
- function handleClickPostDetail(el: PostData) {
- router.push({
- pathname: `notice/detail/${el.id}`,
- });
- }
-
- if (isError) throw new Error("게시판을 불러올 수 없습니다.");
- return (
- <>
-
- 동그라미 - 공지 게시판
-
-
-
-
- {props.boardName}
-
-
- }>
- {data && (
-
- )}
-
-
-
- {
- router.push({
- pathname: "/board/notice",
- query: {
- page,
- },
- });
- }}
- />
-
-
- >
- );
-}
-
-export const getStaticProps: GetStaticProps = async (ctx) => {
- return {
- props: {
- boardName: "공지 게시판",
- },
- };
-};
diff --git a/src/pages/board/notice/write/index.tsx b/src/pages/board/notice/write/index.tsx
deleted file mode 100644
index e6b4927..0000000
--- a/src/pages/board/notice/write/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import Head from "next/head";
-
-import { WriteNoticeBoard } from "@/containers/Board";
-
-export default function NoticeWritePage() {
- return (
- <>
-
- 동그라미 - 공지 게시글 작성
-
-
- >
- );
-}
diff --git a/src/pages/board/free/write/index.tsx b/src/pages/board/write/index.tsx
similarity index 56%
rename from src/pages/board/free/write/index.tsx
rename to src/pages/board/write/index.tsx
index f36148c..2379ebf 100644
--- a/src/pages/board/free/write/index.tsx
+++ b/src/pages/board/write/index.tsx
@@ -1,14 +1,14 @@
import Head from "next/head";
-import { WriteFreeBoard } from "@/containers/Board";
+import { WriteBoard } from "@/containers/Board";
-export default function FreeWritePage() {
+export default function WritePage() {
return (
<>
동그라미 - 자유 게시글 작성
-
+
>
);
}
diff --git a/src/styles/theme/typography.ts b/src/styles/theme/typography.ts
index 37c454f..638d594 100644
--- a/src/styles/theme/typography.ts
+++ b/src/styles/theme/typography.ts
@@ -37,6 +37,11 @@ const typography: Theme["typography"] = {
lineHeight: "normal",
fontWeight: 500,
},
+ Head7: {
+ fontSize: "1.3125rem",
+ lineHeight: "normal",
+ fontWeight: 700,
+ },
SubTitle1: {
fontSize: "1.75rem",
lineHeight: "normal",