Skip to content

Commit

Permalink
Merge pull request #66 from modern-agile-team/feat/jsj/QYOG-94
Browse files Browse the repository at this point in the history
�feat(QYOG-94): 자유, 공지 게시판 통합
  • Loading branch information
jsj1510 authored Mar 17, 2024
2 parents 1748540 + 6802b32 commit 061c63b
Show file tree
Hide file tree
Showing 41 changed files with 722 additions and 744 deletions.
1 change: 1 addition & 0 deletions src/@types/emotion.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ declare module "@emotion/react" {
Head4: ThemeTypography;
Head5: ThemeTypography;
Head6: ThemeTypography;
Head7: ThemeTypography;
SubTitle1: ThemeTypography;
SubTitle2: ThemeTypography;
SubTitle3: ThemeTypography;
Expand Down
13 changes: 8 additions & 5 deletions src/components/Design/Pagination/Pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}
>
Expand All @@ -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 (
Expand All @@ -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>
Expand All @@ -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>
);
Expand Down
8 changes: 5 additions & 3 deletions src/components/Design/Pagination/emotion.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
2 changes: 1 addition & 1 deletion src/components/Provider/DonguramiProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const DonguramiThemeProvider = (props: HTMLAttributes<HTMLElement>) => {
break;
}
case "light": {
document.body.style.backgroundColor = "#f7f7f7";
document.body.style.backgroundColor = lightThemeColor.white;
break;
}
}
Expand Down
48 changes: 48 additions & 0 deletions src/components/Svg/Icons/check-square-35.tsx
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions src/components/Svg/Icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
6 changes: 3 additions & 3 deletions src/components/Svg/Icons/pan-35.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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;
139 changes: 139 additions & 0 deletions src/components/UI/Board/Table/Table.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
59 changes: 59 additions & 0 deletions src/components/UI/Board/Table/TableHeader.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading

0 comments on commit 061c63b

Please sign in to comment.