From 8c423a0a3ea3ff62b3828a2bd41799dcf64dcc9e Mon Sep 17 00:00:00 2001 From: jsj1510 Date: Tue, 5 Mar 2024 21:23:16 +0900 Subject: [PATCH 01/10] =?UTF-8?q?refactor(QYOG-94):=20pxToRem=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UI/Pagination/Pagination.tsx | 9 ++++----- src/components/UI/Pagination/emotion.ts | 8 +++++--- src/components/UI/Table/emotion.ts | 20 ++++++++++++-------- src/components/UI/Table/index.ts | 1 + src/containers/Board/SearchWriter/emotion.ts | 11 +++++++---- 5 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/components/UI/Pagination/Pagination.tsx b/src/components/UI/Pagination/Pagination.tsx index dde9ec7..5e39a30 100644 --- a/src/components/UI/Pagination/Pagination.tsx +++ b/src/components/UI/Pagination/Pagination.tsx @@ -6,7 +6,7 @@ import React, { useMemo, useState } from "react"; -import { Icon, Row, WhatIF } from "@/components"; +import { Icon, Row, Typography, WhatIF } from "@/components"; import * as S from "./emotion"; import { lightThemeColor } from "@/styles/theme"; @@ -64,7 +64,7 @@ export default function Pagination({ props.onChange?.(ev, Number(prevPage)); }} > - + {totalList.map((page) => { return ( @@ -83,7 +83,6 @@ export default function Pagination({ `${page}` === `${currentPage}` ? "white" : `${lightThemeColor.neutral_90}`, - fontSize: 34, }} disabled={`${currentPage}` === `${page}`} onClick={(ev) => { @@ -91,7 +90,7 @@ export default function Pagination({ props.onChange?.(ev, Number(page)); }} > - {page} + {page} @@ -105,7 +104,7 @@ export default function Pagination({ props.onChange?.(ev, Number(nextPage)); }} > - + ); diff --git a/src/components/UI/Pagination/emotion.ts b/src/components/UI/Pagination/emotion.ts index 14d091b..6c9588a 100644 --- a/src/components/UI/Pagination/emotion.ts +++ b/src/components/UI/Pagination/emotion.ts @@ -7,11 +7,12 @@ import styled from "@emotion/styled"; import { Button, Row } from "@/components"; import { lightThemeColor } from "@/styles/theme"; +import { Converter } from "@/utils"; export const PaginationButton = styled.button` border-radius: 10px; - width: 58px; - height: 58px; + width: ${Converter.pxToRem(58)}; + height: ${Converter.pxToRem(58)}; align-items: center; justify-content: center; border: 1px solid ${lightThemeColor.neutral_40}; @@ -19,8 +20,9 @@ export const PaginationButton = styled.button` export const ArrowButton = styled.button` border-radius: 10px; - padding: 6px; border: 0px; + width: ${Converter.pxToRem(58)}; + height: ${Converter.pxToRem(58)}; align-items: center; justify-content: center; `; diff --git a/src/components/UI/Table/emotion.ts b/src/components/UI/Table/emotion.ts index 7e53671..3ea8de8 100644 --- a/src/components/UI/Table/emotion.ts +++ b/src/components/UI/Table/emotion.ts @@ -1,14 +1,16 @@ import styled from "@emotion/styled"; import { lightThemeColor } from "@/styles/theme"; +import { Converter } from "@/utils"; + +interface Props { + type?: string; +} -export const TableContainer = styled.table` - width: calc(100% - 512px); - min-width: 1408px; -`; export const Table = styled.table` - width: 100%; - height: 100%; + width: calc(100% - ${Converter.pxToRem(1408)}); + min-width: ${Converter.pxToRem(1408)}; + border-collapse: collapse; `; @@ -22,8 +24,11 @@ export const Tbody = styled.tbody` vertical-align: top; `; -export const Tr = styled.tr` +export const Tr = styled.tr` border-bottom: 1px solid ${lightThemeColor.neutral_40}; + + background-color: ${(props) => + props.type === "free" ? "#fff" : `${lightThemeColor.primary_10}`}; `; export const ThTitle = styled.th` @@ -36,5 +41,4 @@ export const Th = styled.th` border: none; padding: 20px 0px; width: 12.5%; - text-align: center; `; diff --git a/src/components/UI/Table/index.ts b/src/components/UI/Table/index.ts index 1e80554..73c4850 100644 --- a/src/components/UI/Table/index.ts +++ b/src/components/UI/Table/index.ts @@ -5,3 +5,4 @@ */ export { default as Table } from "./Table"; +export { default as TableHeader } from "./TableHeader"; diff --git a/src/containers/Board/SearchWriter/emotion.ts b/src/containers/Board/SearchWriter/emotion.ts index 7e544c1..487e7b9 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(512)}); + min-width: ${Converter.pxToRem(1408)}; + 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(844)}; &::placeholder { font-size: 28px; /* Remove the quotes */ line-height: normal; /* Remove the quotes */ From f219ddf81fecd48457ec412a6cd36d3f00c24580 Mon Sep 17 00:00:00 2001 From: jsj1510 Date: Tue, 5 Mar 2024 21:30:55 +0900 Subject: [PATCH 02/10] =?UTF-8?q?chore(QYOG-94):=20Head7=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme/typography.ts | 5 +++++ 1 file changed, 5 insertions(+) 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", From b731cd543f37fcedc773879c36b1ac04616dc2ef Mon Sep 17 00:00:00 2001 From: jsj1510 Date: Tue, 5 Mar 2024 21:31:17 +0900 Subject: [PATCH 03/10] =?UTF-8?q?chore(QYOG-94):=20Head7=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/emotion.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/@types/emotion.d.ts b/src/@types/emotion.d.ts index 0b76d37..5f01784 100644 --- a/src/@types/emotion.d.ts +++ b/src/@types/emotion.d.ts @@ -69,6 +69,7 @@ declare module "@emotion/react" { Head4: ThemeTypography; Head5: ThemeTypography; Head6: ThemeTypography; + Head7: ThemeTypography; SubTitle1: ThemeTypography; SubTitle2: ThemeTypography; SubTitle3: ThemeTypography; From 828f230c02cec812ba4fbc2c0a245c141df47f71 Mon Sep 17 00:00:00 2001 From: jsj1510 Date: Tue, 5 Mar 2024 21:31:48 +0900 Subject: [PATCH 04/10] =?UTF-8?q?refactor(QYOG-94):=20=EC=9E=90=EC=9C=A0,?= =?UTF-8?q?=20=EA=B3=B5=EC=A7=80=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20=ED=86=B5?= =?UTF-8?q?=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UI/Header/Header.tsx | 22 +---- src/components/UI/Table/Table.tsx | 113 +++++++++++------------- src/components/UI/Table/TableHeader.tsx | 48 ++++++++++ src/pages/board/free/index.tsx | 68 +++++++++++--- 4 files changed, 155 insertions(+), 96 deletions(-) create mode 100644 src/components/UI/Table/TableHeader.tsx diff --git a/src/components/UI/Header/Header.tsx b/src/components/UI/Header/Header.tsx index d84555b..ead4f9c 100644 --- a/src/components/UI/Header/Header.tsx +++ b/src/components/UI/Header/Header.tsx @@ -38,15 +38,6 @@ export default function Header({}: {}) { }); break; } - case "notice-board": { - router.push({ - pathname: "/board/notice", - query: { - page: 1, - }, - }); - break; - } case "club": { router.push("/club/1?tab=home"); @@ -99,18 +90,7 @@ export default function Header({}: {}) { } hoverTypoColor="neutral_90" > - 수다 게시판 - - - 공지 게시판 + 동아리 게시판 diff --git a/src/components/UI/Table/Table.tsx b/src/components/UI/Table/Table.tsx index d44b975..ab3e485 100644 --- a/src/components/UI/Table/Table.tsx +++ b/src/components/UI/Table/Table.tsx @@ -7,7 +7,8 @@ import React from "react"; import * as S from "./emotion"; -import { Typography } from "@/components"; +import { Button, Typography } from "@/components"; +import { lightThemeColor } from "@/styles/theme"; interface PostData { id: number; @@ -26,6 +27,9 @@ export default function Table({ type, handleClickPostDetail, }: TableData) { + const slicedData = + type === "free" ? data.contents : data.contents.slice(0, 5); + const getAuthorType = ( post: Swagger.FreePostsItemDto | Swagger.NoticePostsItemDto ) => { @@ -49,7 +53,7 @@ export default function Table({ return ( - 운영자 ? + 운영자 ); @@ -57,68 +61,55 @@ export default function Table({ }; return ( - - - - - - - 순서 - - - - - 제목 - - - - - 작성자 - - - - - 작성일 - - - - - 조회 - - - - - - {data.contents.map((post) => { - return ( - handleClickPostDetail(post)}> - + + + {slicedData.map((post) => { + return ( + handleClickPostDetail(post)} + type={type} + > + + {type === "free" ? ( {post.id} - - - - {post.title} - - + ) : ( + + )} + + + + {post.title} + + - {getAuthorType(post)} - - - {new Date(post.createdAt).toLocaleDateString()} - - - - - {post.hit} - - - - ); - })} - - - + {getAuthorType(post)} + + + {new Date(post.createdAt).toLocaleDateString()} + + + + + {post.hit} + + + + ); + })} + + ); } diff --git a/src/components/UI/Table/TableHeader.tsx b/src/components/UI/Table/TableHeader.tsx new file mode 100644 index 0000000..e51b965 --- /dev/null +++ b/src/components/UI/Table/TableHeader.tsx @@ -0,0 +1,48 @@ +/* + * 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; +} + +export default function TableHeader() { + return ( + + + + + 순서 + + + + + 제목 + + + + + 작성자 + + + + + 작성일 + + + + + 조회 + + + + + ); +} diff --git a/src/pages/board/free/index.tsx b/src/pages/board/free/index.tsx index 615efb6..fc95499 100644 --- a/src/pages/board/free/index.tsx +++ b/src/pages/board/free/index.tsx @@ -10,9 +10,10 @@ 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 { freePostsAPI, noticePostsAPI } from "@/apis"; +import { Table, TableHeader } from "@/components/UI/Table"; import { SearchWriter } from "@/containers/Board/SearchWriter"; +import { Converter } from "@/utils"; interface PostData { id: number; @@ -21,7 +22,11 @@ interface PostData { export default function FreeBoard(props: { boardName: string }) { const router = useRouter(); - const { data, isLoading, isError } = useQuery({ + const { + data: freeData, + isLoading: isLoadingFree, + isError: isErrorFree, + } = useQuery({ queryKey: ["board", "free", router.query.page], queryFn: async () => { const page = router.query.page as string; @@ -34,35 +39,70 @@ export default function FreeBoard(props: { boardName: string }) { }, }); + 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(el: PostData) { router.push({ pathname: `free/detail/${el.id}`, }); } - if (isError) throw new Error("게시판을 불러올 수 없습니다."); + if (isErrorFree || isErrorNotice) + throw new Error("게시판을 불러올 수 없습니다."); return ( <> - 동그라미 - 수다 게시판 + 동그라미 - 게시판 {props.boardName} - }> - {data && ( + + + + }> + {freeData?.currentPage === 1 ? ( + <> + {noticeData && ( + + )} + + ) : ( + <> + )} + + {freeData && (
@@ -71,8 +111,8 @@ export default function FreeBoard(props: { boardName: string }) { { router.push({ pathname: "/board/free", @@ -91,7 +131,7 @@ export default function FreeBoard(props: { boardName: string }) { export const getStaticProps: GetStaticProps = async (ctx) => { return { props: { - boardName: "수다 게시판", + boardName: "게시판", }, }; }; From 32f22cb07bbca3fc800b836d6b69fe912ca4d6b3 Mon Sep 17 00:00:00 2001 From: jsj1510 Date: Tue, 5 Mar 2024 22:12:28 +0900 Subject: [PATCH 05/10] =?UTF-8?q?refactor(QYOG-94):=20pan=20svg=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Svg/Icons/pan-35.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Svg/Icons/pan-35.tsx b/src/components/Svg/Icons/pan-35.tsx index 4e99f6f..1b7cee4 100644 --- a/src/components/Svg/Icons/pan-35.tsx +++ b/src/components/Svg/Icons/pan-35.tsx @@ -1,7 +1,7 @@ import React, { forwardRef, Ref } from "react"; import { IconProps } from "../Icon"; import Svg from "../Svg"; -const SvgSearch30 = forwardRef( +const SvgPan35 = forwardRef( ( { size, title, desc, titleId, descId, ...props }: IconProps, ref: Ref @@ -43,11 +43,11 @@ const SvgSearch30 = forwardRef( ); } ); -SvgSearch30.defaultProps = { +SvgPan35.defaultProps = { size: 30, focusable: false, "aria-hidden": true, role: "img", fill: "currentcolor", }; -export default SvgSearch30; +export default SvgPan35; From 06a09fa9f31d89ee64e2410192186f6404d07a5a Mon Sep 17 00:00:00 2001 From: jsj1510 Date: Tue, 5 Mar 2024 22:13:15 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat(QYOG-94):=20=EC=B2=B4=ED=81=AC=20svg?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Svg/Icons/check-square-35.tsx | 48 ++++++++++++++++++++ src/components/Svg/Icons/index.ts | 1 + 2 files changed, 49 insertions(+) create mode 100644 src/components/Svg/Icons/check-square-35.tsx diff --git a/src/components/Svg/Icons/check-square-35.tsx b/src/components/Svg/Icons/check-square-35.tsx new file mode 100644 index 0000000..9a22f7d --- /dev/null +++ b/src/components/Svg/Icons/check-square-35.tsx @@ -0,0 +1,48 @@ +import React, { forwardRef, Ref } from "react"; +import { IconProps } from "../Icon"; +import Svg from "../Svg"; +const SvgCheckSquare35 = forwardRef( + ( + { size, title, desc, titleId, descId, ...props }: IconProps, + ref: Ref + ) => { + let ariaLabelledBy: string | undefined = titleId ? titleId : ""; + ariaLabelledBy += desc && descId ? ` ${descId}` : ""; + ariaLabelledBy = ariaLabelledBy ? ariaLabelledBy : undefined; + props["aria-labelledby"] = ariaLabelledBy; + return ( + + {!!title && {title}} + {!!desc && {desc}} + + + ); + } +); +SvgCheckSquare35.defaultProps = { + size: 24, + focusable: false, + "aria-hidden": true, + role: "img", + fill: "currentcolor", +}; +export default SvgCheckSquare35; diff --git a/src/components/Svg/Icons/index.ts b/src/components/Svg/Icons/index.ts index 6868eb5..aa8ed8b 100644 --- a/src/components/Svg/Icons/index.ts +++ b/src/components/Svg/Icons/index.ts @@ -6,3 +6,4 @@ export { default as LeftArrow24 } from "./left-arrow-24"; export { default as RightArrow24 } from "./right-arrow-24"; export { default as Search30 } from "./search-30"; export { default as Pan35 } from "./pan-35"; +export { default as CheckSquare35 } from "./check-square-35"; From 220f43f4a90ed31fc91b7aa7db75bbabf25f1729 Mon Sep 17 00:00:00 2001 From: jsj1510 Date: Tue, 5 Mar 2024 22:13:37 +0900 Subject: [PATCH 07/10] =?UTF-8?q?feat(QYOG-94):=20=EA=B3=B5=EC=A7=80=20?= =?UTF-8?q?=EC=88=A8=EA=B8=B0=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UI/Table/TableHeader.tsx | 3 +- src/pages/board/free/index.tsx | 67 ++++++++++++++++++++++++- 2 files changed, 67 insertions(+), 3 deletions(-) diff --git a/src/components/UI/Table/TableHeader.tsx b/src/components/UI/Table/TableHeader.tsx index e51b965..5ea15d1 100644 --- a/src/components/UI/Table/TableHeader.tsx +++ b/src/components/UI/Table/TableHeader.tsx @@ -8,6 +8,7 @@ import React from "react"; import * as S from "./emotion"; import { Typography } from "@/components"; +import { Converter } from "@/utils"; interface PostData { id: number; @@ -17,7 +18,7 @@ export default function TableHeader() { return ( - + 순서 diff --git a/src/pages/board/free/index.tsx b/src/pages/board/free/index.tsx index fc95499..ff83814 100644 --- a/src/pages/board/free/index.tsx +++ b/src/pages/board/free/index.tsx @@ -9,11 +9,21 @@ 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 { + Button, + Column, + Icon, + Loader, + Pagination, + Typography, + WhatIF, +} from "@/components"; import { freePostsAPI, noticePostsAPI } from "@/apis"; import { Table, TableHeader } from "@/components/UI/Table"; import { SearchWriter } from "@/containers/Board/SearchWriter"; import { Converter } from "@/utils"; +import { lightThemeColor } from "@/styles/theme"; +import { useState } from "react"; interface PostData { id: number; @@ -21,6 +31,7 @@ interface PostData { export default function FreeBoard(props: { boardName: string }) { const router = useRouter(); + const [isNoticeVisible, setIsNoticeVisible] = useState(true); const { data: freeData, @@ -62,6 +73,10 @@ export default function FreeBoard(props: { boardName: string }) { }); } + function toggleNoticeVisibility() { + setIsNoticeVisible(!isNoticeVisible); + } + if (isErrorFree || isErrorNotice) throw new Error("게시판을 불러올 수 없습니다."); return ( @@ -83,10 +98,58 @@ export default function FreeBoard(props: { boardName: string }) { + + {isNoticeVisible ? ( + + )} + + + 공지 숨기기 + + + }> - {freeData?.currentPage === 1 ? ( + {isNoticeVisible ? ( <> {noticeData && (
Date: Sun, 17 Mar 2024 15:54:07 +0900 Subject: [PATCH 08/10] =?UTF-8?q?refactor(QYOG-94):=20=EA=B2=8C=EC=8B=9C?= =?UTF-8?q?=ED=8C=90=20=EC=A0=84=EC=B2=B4=20=EC=A1=B0=ED=9A=8C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UI/Pagination/Pagination.tsx | 4 + src/components/UI/Table/Table.tsx | 121 +++++++++++-------- src/components/UI/Table/TableHeader.tsx | 68 ++++++----- src/components/UI/Table/emotion.ts | 13 +- src/containers/Board/SearchWriter/emotion.ts | 6 +- src/pages/board/free/index.tsx | 77 ++++++------ 6 files changed, 159 insertions(+), 130 deletions(-) diff --git a/src/components/UI/Pagination/Pagination.tsx b/src/components/UI/Pagination/Pagination.tsx index 5e39a30..185c1c2 100644 --- a/src/components/UI/Pagination/Pagination.tsx +++ b/src/components/UI/Pagination/Pagination.tsx @@ -9,6 +9,7 @@ import React, { useMemo, useState } from "react"; import { Icon, Row, Typography, WhatIF } from "@/components"; import * as S from "./emotion"; import { lightThemeColor } from "@/styles/theme"; +import { Converter } from "@/utils"; interface IPaginationProps { count: number; @@ -52,8 +53,11 @@ export default function Pagination({ return ( diff --git a/src/components/UI/Table/Table.tsx b/src/components/UI/Table/Table.tsx index ab3e485..22bfb93 100644 --- a/src/components/UI/Table/Table.tsx +++ b/src/components/UI/Table/Table.tsx @@ -9,6 +9,7 @@ import React from "react"; import * as S from "./emotion"; import { Button, Typography } from "@/components"; import { lightThemeColor } from "@/styles/theme"; +import { Converter } from "@/utils"; interface PostData { id: number; @@ -35,7 +36,11 @@ export default function Table({ ) => { if (type === "free" && "isAnonymous" in post && post.isAnonymous) { return ( - + 익명 @@ -43,7 +48,11 @@ export default function Table({ ); } else if (type === "free" && "isAnonymous" in post && !post.isAnonymous) { return ( - + {post.userId} @@ -51,7 +60,11 @@ export default function Table({ ); } else if (type === "notice") { return ( - + 운영자 @@ -61,55 +74,65 @@ export default function Table({ }; return ( - - - {slicedData.map((post) => { - return ( - handleClickPostDetail(post)} - type={type} + + {slicedData.map((post) => { + return ( + handleClickPostDetail(post)} + type={type} + > + - - {type === "free" ? ( - - {post.id} - - ) : ( - - )} - - + {type === "free" ? ( - {post.title} + {post.id} - + ) : ( + + )} + + + + {post.title} + + - {getAuthorType(post)} - - - {new Date(post.createdAt).toLocaleDateString()} - - - - - {post.hit} - - - - ); - })} - - + {getAuthorType(post)} + + + {new Date(post.createdAt).toLocaleDateString()} + + + + + {post.hit} + + + + ); + })} + ); } diff --git a/src/components/UI/Table/TableHeader.tsx b/src/components/UI/Table/TableHeader.tsx index 5ea15d1..fed3f9e 100644 --- a/src/components/UI/Table/TableHeader.tsx +++ b/src/components/UI/Table/TableHeader.tsx @@ -16,34 +16,44 @@ interface PostData { export default function TableHeader() { return ( - - - - - 순서 - - - - - 제목 - - - - - 작성자 - - - - - 작성일 - - - - - 조회 - - - - + + + + 순서 + + + + + 제목 + + + + + 작성자 + + + + + 작성일 + + + + + 조회 + + + ); } diff --git a/src/components/UI/Table/emotion.ts b/src/components/UI/Table/emotion.ts index 3ea8de8..302df76 100644 --- a/src/components/UI/Table/emotion.ts +++ b/src/components/UI/Table/emotion.ts @@ -7,13 +7,6 @@ interface Props { type?: string; } -export const Table = styled.table` - width: calc(100% - ${Converter.pxToRem(1408)}); - min-width: ${Converter.pxToRem(1408)}; - - border-collapse: collapse; -`; - export const Thead = styled.thead` background-color: ${lightThemeColor.secondary_10}; border-top: 1px solid ${lightThemeColor.neutral_90}; @@ -26,7 +19,6 @@ export const Tbody = styled.tbody` export const Tr = styled.tr` border-bottom: 1px solid ${lightThemeColor.neutral_40}; - background-color: ${(props) => props.type === "free" ? "#fff" : `${lightThemeColor.primary_10}`}; `; @@ -34,11 +26,12 @@ export const Tr = styled.tr` 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%; + vertical-align: middle; `; diff --git a/src/containers/Board/SearchWriter/emotion.ts b/src/containers/Board/SearchWriter/emotion.ts index 487e7b9..34cf72c 100644 --- a/src/containers/Board/SearchWriter/emotion.ts +++ b/src/containers/Board/SearchWriter/emotion.ts @@ -6,8 +6,8 @@ import { Converter } from "@/utils"; export const Container = styled(Row.div)` margin-top: ${Converter.pxToRem(80)}; - width: calc(100% - ${Converter.pxToRem(512)}); - min-width: ${Converter.pxToRem(1408)}; + width: calc(100% - ${Converter.pxToRem(527)}); + min-width: ${Converter.pxToRem(753)}; justify-content: space-between; `; @@ -45,7 +45,7 @@ export const Input = styled.input` border-top-right-radius: 10px; border-bottom-right-radius: 10px; width: 60%; - min-width: ${Converter.pxToRem(844)}; + min-width: ${Converter.pxToRem(231)}; &::placeholder { font-size: 28px; /* Remove the quotes */ line-height: normal; /* Remove the quotes */ diff --git a/src/pages/board/free/index.tsx b/src/pages/board/free/index.tsx index ff83814..1002a7f 100644 --- a/src/pages/board/free/index.tsx +++ b/src/pages/board/free/index.tsx @@ -84,12 +84,12 @@ export default function FreeBoard(props: { boardName: string }) { 동그라미 - 게시판 - + @@ -101,8 +101,8 @@ export default function FreeBoard(props: { boardName: string }) { @@ -146,21 +143,23 @@ export default function FreeBoard(props: { boardName: string }) { - - - }> - {isNoticeVisible ? ( - <> - {noticeData && ( -
- )} - - ) : ( - <> +
+ + {isNoticeVisible && noticeData && ( +
)} {freeData && ( @@ -170,22 +169,22 @@ export default function FreeBoard(props: { boardName: string }) { handleClickPostDetail={handleClickPostDetail} /> )} - - - - { - router.push({ - pathname: "/board/free", - query: { - page, - }, - }); - }} - /> - +
+ + + + { + router.push({ + pathname: "/board/free", + query: { + page, + }, + }); + }} + /> ); From 5c4f1e0e377be057788f3bc98127c7f48afb6c79 Mon Sep 17 00:00:00 2001 From: jsj1510 Date: Sun, 17 Mar 2024 15:59:24 +0900 Subject: [PATCH 09/10] =?UTF-8?q?refactor(QYOG-94):=20=EA=B3=B5=EC=A7=80?= =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20=ED=8F=B4=EB=8D=94=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Provider/DonguramiProvider.tsx | 2 +- src/components/UI/Header/Header.tsx | 2 +- .../board/{free => }/detail/[postId].tsx | 0 src/pages/board/{free => }/index.tsx | 4 +- src/pages/board/notice/detail/[postId].tsx | 20 ---- src/pages/board/notice/index.tsx | 96 ------------------- src/pages/board/notice/write/index.tsx | 14 --- src/pages/board/{free => }/write/index.tsx | 0 8 files changed, 4 insertions(+), 134 deletions(-) rename src/pages/board/{free => }/detail/[postId].tsx (100%) rename src/pages/board/{free => }/index.tsx (98%) delete mode 100644 src/pages/board/notice/detail/[postId].tsx delete mode 100644 src/pages/board/notice/index.tsx delete mode 100644 src/pages/board/notice/write/index.tsx rename src/pages/board/{free => }/write/index.tsx (100%) diff --git a/src/components/Provider/DonguramiProvider.tsx b/src/components/Provider/DonguramiProvider.tsx index 65a7b92..33e7352 100644 --- a/src/components/Provider/DonguramiProvider.tsx +++ b/src/components/Provider/DonguramiProvider.tsx @@ -59,7 +59,7 @@ const DonguramiThemeProvider = (props: HTMLAttributes) => { break; } case "light": { - document.body.style.backgroundColor = "#f7f7f7"; + document.body.style.backgroundColor = lightThemeColor.white; break; } } diff --git a/src/components/UI/Header/Header.tsx b/src/components/UI/Header/Header.tsx index ead4f9c..1bbc610 100644 --- a/src/components/UI/Header/Header.tsx +++ b/src/components/UI/Header/Header.tsx @@ -31,7 +31,7 @@ export default function Header({}: {}) { case "free-board": { router.push({ - pathname: "/board/free", + pathname: "/board", query: { page: 1, }, diff --git a/src/pages/board/free/detail/[postId].tsx b/src/pages/board/detail/[postId].tsx similarity index 100% rename from src/pages/board/free/detail/[postId].tsx rename to src/pages/board/detail/[postId].tsx diff --git a/src/pages/board/free/index.tsx b/src/pages/board/index.tsx similarity index 98% rename from src/pages/board/free/index.tsx rename to src/pages/board/index.tsx index c07c2ec..2c0684d 100644 --- a/src/pages/board/free/index.tsx +++ b/src/pages/board/index.tsx @@ -59,7 +59,7 @@ export default function FreeBoard(props: { boardName: string }) { queryFn: async () => { const page = router.query.page as string; return ( - await noticePostsAPI.noticepostFindAllAndCount({ + await noticePostsAPI.noticePostFindAllAndCount({ page: Number(page), pageSize: 5, }) @@ -69,7 +69,7 @@ export default function FreeBoard(props: { boardName: string }) { function handleClickPostDetail(el: PostData) { router.push({ - pathname: `free/detail/${el.id}`, + pathname: `/detail/${el.id}`, }); } 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 100% rename from src/pages/board/free/write/index.tsx rename to src/pages/board/write/index.tsx From 6802b32301cb74807bb9e75d02be3e5b1c8bcd65 Mon Sep 17 00:00:00 2001 From: jsj1510 Date: Sun, 17 Mar 2024 17:24:53 +0900 Subject: [PATCH 10/10] =?UTF-8?q?refactor(QYOG-94):=20=EC=83=81=EC=84=B8,?= =?UTF-8?q?=20=EA=B8=80=EC=83=9D=EC=84=B1=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20?= =?UTF-8?q?=ED=86=B5=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UI/{ => Board}/Table/Table.tsx | 5 +- .../UI/{ => Board}/Table/TableHeader.tsx | 0 .../UI/{ => Board}/Table/emotion.ts | 0 src/components/UI/{ => Board}/Table/index.ts | 0 src/components/UI/Quill/Quill.tsx | 15 ++- .../Board/DetailBoard/DetailBoard.tsx | 101 +++++++++++++++++ .../emotion.ts | 0 src/containers/Board/DetailBoard/index.ts | 1 + .../Board/DetailFreeBoard/DetailFreeBoard.tsx | 64 ----------- src/containers/Board/DetailFreeBoard/index.ts | 1 - .../DetailNoticeBoard/DetailNoticeBoard.tsx | 63 ----------- .../Board/DetailNoticeBoard/emotion.ts | 31 ----- .../Board/DetailNoticeBoard/index.ts | 1 - .../Board/SearchWriter/SearchWriter.tsx | 3 +- .../Board/WriteBoard/WriteBoard.tsx | 107 ++++++++++++++++++ .../{WriteFreeBoard => WriteBoard}/emotion.ts | 0 src/containers/Board/WriteBoard/index.ts | 1 + .../Board/WriteFreeBoard/WriteFreeBoard.tsx | 67 ----------- src/containers/Board/WriteFreeBoard/index.ts | 1 - .../WriteNoticeBoard/WriteNoticeBoard.tsx | 69 ----------- .../Board/WriteNoticeBoard/emotion.ts | 31 ----- .../Board/WriteNoticeBoard/index.ts | 1 - src/containers/Board/index.tsx | 6 +- src/pages/board/detail/[postId].tsx | 4 +- src/pages/board/index.tsx | 8 +- src/pages/board/write/index.tsx | 6 +- 26 files changed, 239 insertions(+), 347 deletions(-) rename src/components/UI/{ => Board}/Table/Table.tsx (95%) rename src/components/UI/{ => Board}/Table/TableHeader.tsx (100%) rename src/components/UI/{ => Board}/Table/emotion.ts (100%) rename src/components/UI/{ => Board}/Table/index.ts (100%) create mode 100644 src/containers/Board/DetailBoard/DetailBoard.tsx rename src/containers/Board/{DetailFreeBoard => DetailBoard}/emotion.ts (100%) create mode 100644 src/containers/Board/DetailBoard/index.ts delete mode 100644 src/containers/Board/DetailFreeBoard/DetailFreeBoard.tsx delete mode 100644 src/containers/Board/DetailFreeBoard/index.ts delete mode 100644 src/containers/Board/DetailNoticeBoard/DetailNoticeBoard.tsx delete mode 100644 src/containers/Board/DetailNoticeBoard/emotion.ts delete mode 100644 src/containers/Board/DetailNoticeBoard/index.ts create mode 100644 src/containers/Board/WriteBoard/WriteBoard.tsx rename src/containers/Board/{WriteFreeBoard => WriteBoard}/emotion.ts (100%) create mode 100644 src/containers/Board/WriteBoard/index.ts delete mode 100644 src/containers/Board/WriteFreeBoard/WriteFreeBoard.tsx delete mode 100644 src/containers/Board/WriteFreeBoard/index.ts delete mode 100644 src/containers/Board/WriteNoticeBoard/WriteNoticeBoard.tsx delete mode 100644 src/containers/Board/WriteNoticeBoard/emotion.ts delete mode 100644 src/containers/Board/WriteNoticeBoard/index.ts diff --git a/src/components/UI/Table/Table.tsx b/src/components/UI/Board/Table/Table.tsx similarity index 95% rename from src/components/UI/Table/Table.tsx rename to src/components/UI/Board/Table/Table.tsx index 75cc029..8fa9865 100644 --- a/src/components/UI/Table/Table.tsx +++ b/src/components/UI/Board/Table/Table.tsx @@ -13,6 +13,7 @@ import { Converter } from "@/utils"; interface PostData { id: number; + type: string; } interface TableData { @@ -20,7 +21,7 @@ interface TableData { | Swagger.Api.FreePostFindAllAndCount.ResponseBody | Swagger.Api.NoticePostFindAllAndCount.ResponseBody; type: string; - handleClickPostDetail: (el: PostData) => void; + handleClickPostDetail: ({ id, type }: PostData) => void; } export default function Table({ @@ -79,7 +80,7 @@ export default function Table({ return ( handleClickPostDetail(post)} + onClick={() => handleClickPostDetail({ id: post.id, type })} type={type} > + + + -
); 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/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/detail/[postId].tsx b/src/pages/board/detail/[postId].tsx index c69acad..a4e2bb7 100644 --- a/src/pages/board/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/index.tsx b/src/pages/board/index.tsx index 2c0684d..6811e0a 100644 --- a/src/pages/board/index.tsx +++ b/src/pages/board/index.tsx @@ -19,7 +19,7 @@ import { WhatIF, } from "@/components"; import { freePostsAPI, noticePostsAPI } from "@/apis"; -import { Table, TableHeader } from "@/components/UI/Table"; +import { Table, TableHeader } from "@/components/UI/Board/Table"; import { SearchWriter } from "@/containers/Board/SearchWriter"; import { Converter } from "@/utils"; import { lightThemeColor } from "@/styles/theme"; @@ -27,6 +27,7 @@ import { useState } from "react"; interface PostData { id: number; + type: string; } export default function FreeBoard(props: { boardName: string }) { @@ -67,9 +68,10 @@ export default function FreeBoard(props: { boardName: string }) { }, }); - function handleClickPostDetail(el: PostData) { + function handleClickPostDetail({ id, type }: PostData) { router.push({ - pathname: `/detail/${el.id}`, + pathname: `board/detail/${id}/`, + query: { type }, }); } diff --git a/src/pages/board/write/index.tsx b/src/pages/board/write/index.tsx index f36148c..2379ebf 100644 --- a/src/pages/board/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 ( <> 동그라미 - 자유 게시글 작성 - + ); }