feat(QYOG-94): 자유, 공지 게시판 통합

src/@types/emotion.d.ts

@@ -76,6 +76,7 @@ declare module "@emotion/react" {
       Head4: ThemeTypography;
       Head5: ThemeTypography;
       Head6: ThemeTypography;
+      Head7: ThemeTypography;
       SubTitle1: ThemeTypography;
       SubTitle2: ThemeTypography;
       SubTitle3: ThemeTypography;

src/components/Design/Pagination/Pagination.tsx

@@ -6,9 +6,10 @@
 
 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";
+import { Converter } from "@/utils";
 
 interface IPaginationProps {
   count: number;
@@ -52,8 +53,11 @@ export default function Pagination({
 
   return (
     <Row.li
+      horizonAlign="center"
       style={{
         margin: `80px 0px`,
+        width: `calc(100% - ${Converter.pxToRem(527)})`,
+        minWidth: `${Converter.pxToRem(753)}`,
       }}
       gap={20}
     >
@@ -64,7 +68,7 @@ export default function Pagination({
           props.onChange?.(ev, Number(prevPage));
         }}
       >
-        <Icon id="left" size={54} name="LeftArrow24" />
+        <Icon id="left" size={36} name="LeftArrow24" fill="neutral_90" />
       </S.ArrowButton>
       {totalList.map((page) => {
         return (
@@ -83,15 +87,14 @@ export default function Pagination({
                     `${page}` === `${currentPage}`
                       ? "white"
                       : `${lightThemeColor.neutral_90}`,
-                  fontSize: 34,
                 }}
                 disabled={`${currentPage}` === `${page}`}
                 onClick={(ev) => {
                   setCurrentPage(Number(page));
                   props.onChange?.(ev, Number(page));
                 }}
               >
-                {page}
+                <Typography typoSize="Head5">{page}</Typography>
               </S.PaginationButton>
             </WhatIF>
           </Row.li>
@@ -105,7 +108,7 @@ export default function Pagination({
           props.onChange?.(ev, Number(nextPage));
         }}
       >
-        <Icon id="right" size={54} name="RightArrow24" />
+        <Icon id="right" size={36} name="RightArrow24" fill="neutral_90" />
       </S.ArrowButton>
     </Row.li>
   );

src/components/Design/Pagination/emotion.ts

@@ -7,20 +7,22 @@
 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};
 `;
 
 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;
 `;

src/components/Provider/DonguramiProvider.tsx

@@ -59,7 +59,7 @@ const DonguramiThemeProvider = (props: HTMLAttributes<HTMLElement>) => {
         break;
       }
       case "light": {
-        document.body.style.backgroundColor = "#f7f7f7";
+        document.body.style.backgroundColor = lightThemeColor.white;
         break;
       }
     }

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<SVGSVGElement>
+  ) => {
+    let ariaLabelledBy: string | undefined = titleId ? titleId : "";
+    ariaLabelledBy += desc && descId ? ` ${descId}` : "";
+    ariaLabelledBy = ariaLabelledBy ? ariaLabelledBy : undefined;
+    props["aria-labelledby"] = ariaLabelledBy;
+    return (
+      <Svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        title={title}
+        titleId={titleId}
+        desc={desc}
+        descId={descId}
+        aria-labelledby={ariaLabelledBy}
+        aria-hidden={!ariaLabelledBy}
+        ref={ref}
+        {...props}
+      >
+        {!!title && <title id={titleId}>{title}</title>}
+        {!!desc && <desc id={descId}>{desc}</desc>}
+        <path
+          d="M12.3955 18.2292L15.3122 21.1458L22.6038 13.8542"
+          stroke="#898989"
+          stroke-width="2.1875"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </Svg>
+    );
+  }
+);
+SvgCheckSquare35.defaultProps = {
+  size: 24,
+  focusable: false,
+  "aria-hidden": true,
+  role: "img",
+  fill: "currentcolor",
+};
+export default SvgCheckSquare35;

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";

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<SVGSVGElement>
@@ -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;

src/components/UI/Board/Table/Table.tsx

@@ -0,0 +1,139 @@
+/*
+ * Created on Fri Jan 19 2024
+ *
+ * Copyright (c) 2024 Your Company
+ */
+
+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;
+  type: string;
+}
+
+interface TableData {
+  data:
+    | Swagger.Api.FreePostFindAllAndCount.ResponseBody
+    | Swagger.Api.NoticePostFindAllAndCount.ResponseBody;
+  type: string;
+  handleClickPostDetail: ({ id, type }: PostData) => void;
+}
+
+export default function Table({
+  data,
+  type,
+  handleClickPostDetail,
+}: TableData) {
+  const slicedData =
+    type === "free" ? data.contents : data.contents.slice(0, 5);
+
+  const getAuthorType = (
+    post: Swagger.FreePostsItemDto | Swagger.NoticePostsItemDto
+  ) => {
+    if (type === "free" && "isAnonymous" in post && post.isAnonymous) {
+      return (
+        <S.Th
+          style={{
+            width: 100,
+          }}
+        >
+          <Typography typoColor="neutral_90" typoSize="Head6">
+            익명
+          </Typography>
+        </S.Th>
+      );
+    } else if (type === "free" && "isAnonymous" in post && !post.isAnonymous) {
+      return (
+        <S.Th
+          style={{
+            width: 100,
+          }}
+        >
+          <Typography typoColor="neutral_90" typoSize="Head6">
+            {post.userId}
+          </Typography>
+        </S.Th>
+      );
+    } else if (type === "notice") {
+      return (
+        <S.Th
+          style={{
+            width: 100,
+          }}
+        >
+          <Typography typoColor="neutral_90" typoSize="Head6">
+            운영자
+          </Typography>
+        </S.Th>
+      );
+    }
+  };
+
+  return (
+    <S.Tbody>
+      {slicedData.map((post) => {
+        return (
+          <S.Tr
+            key={post.id}
+            onClick={() => handleClickPostDetail({ id: post.id, type })}
+            type={type}
+          >
+            <S.Th
+              style={{
+                width: 100,
+              }}
+            >
+              {type === "free" ? (
+                <Typography typoColor="neutral_90" typoSize="Head6">
+                  {post.id}
+                </Typography>
+              ) : (
+                <Button
+                  shape="square"
+                  backgroundColor="primary_20"
+                  style={{
+                    border: `1px solid ${lightThemeColor.primary_50}`,
+                  }}
+                >
+                  <Typography typoColor="primary_80" typoSize="Head7">
+                    공지
+                  </Typography>
+                </Button>
+              )}
+            </S.Th>
+            <S.ThTitle>
+              <Typography typoColor="neutral_90" typoSize="Head6">
+                {post.title}
+              </Typography>
+            </S.ThTitle>
+
+            {getAuthorType(post)}
+            <S.Th
+              style={{
+                width: 150,
+              }}
+            >
+              <Typography typoColor="neutral_90" typoSize="Head6">
+                {new Date(post.createdAt).toLocaleDateString()}
+              </Typography>
+            </S.Th>
+            <S.Th
+              style={{
+                width: 100,
+              }}
+            >
+              <Typography typoColor="neutral_90" typoSize="Head6">
+                {post.hit}
+              </Typography>
+            </S.Th>
+          </S.Tr>
+        );
+      })}
+    </S.Tbody>
+  );
+}

src/components/UI/Board/Table/TableHeader.tsx

@@ -0,0 +1,59 @@
+/*
+ * Created on Fri Jan 19 2024
+ *
+ * Copyright (c) 2024 Your Company
+ */
+
+import React from "react";
+
+import * as S from "./emotion";
+import { Typography } from "@/components";
+import { Converter } from "@/utils";
+
+interface PostData {
+  id: number;
+}
+
+export default function TableHeader() {
+  return (
+    <S.Thead>
+      <S.Th style={{ padding: `${Converter.pxToRem(40)} 0px`, width: 100 }}>
+        <Typography typoColor="neutral_90" typoSize="Head5">
+          순서
+        </Typography>
+      </S.Th>
+      <S.ThTitle>
+        <Typography typoColor="neutral_90" typoSize="Head5">
+          제목
+        </Typography>
+      </S.ThTitle>
+      <S.Th
+        style={{
+          width: 100,
+        }}
+      >
+        <Typography typoColor="neutral_90" typoSize="Head5">
+          작성자
+        </Typography>
+      </S.Th>
+      <S.Th
+        style={{
+          width: 150,
+        }}
+      >
+        <Typography typoColor="neutral_90" typoSize="Head5">
+          작성일
+        </Typography>
+      </S.Th>
+      <S.Th
+        style={{
+          width: 100,
+        }}
+      >
+        <Typography typoColor="neutral_90" typoSize="Head5">
+          조회
+        </Typography>
+      </S.Th>
+    </S.Thead>
+  );
+}