From 7b2cfc6eb39922aa41ba541656466454726e1885 Mon Sep 17 00:00:00 2001 From: obinox Date: Tue, 16 Jul 2024 16:07:26 +0900 Subject: [PATCH 01/11] make pagination --- .../pages/Pagination/Pagination.module.css | 13 ++++++ .../pages/Pagination/Pagination.stories.tsx | 20 +++++++++ .../pages/Pagination/Pagination.test.tsx | 12 ++++++ .../pages/Pagination/Pagination.tsx | 43 +++++++++++++++++++ 4 files changed, 88 insertions(+) create mode 100644 src/components/pages/Pagination/Pagination.module.css create mode 100644 src/components/pages/Pagination/Pagination.stories.tsx create mode 100644 src/components/pages/Pagination/Pagination.test.tsx create mode 100644 src/components/pages/Pagination/Pagination.tsx diff --git a/src/components/pages/Pagination/Pagination.module.css b/src/components/pages/Pagination/Pagination.module.css new file mode 100644 index 00000000..961c83d3 --- /dev/null +++ b/src/components/pages/Pagination/Pagination.module.css @@ -0,0 +1,13 @@ +.root { + color: var(--color-primary); + + --pagination-active-bg: var(--color-primary); +} + +.element_selected { + background-color: var(--color-primary); + + &:hover { + background-color: var(--color-onPrimaryFixedVariant); + } +} diff --git a/src/components/pages/Pagination/Pagination.stories.tsx b/src/components/pages/Pagination/Pagination.stories.tsx new file mode 100644 index 00000000..0256d065 --- /dev/null +++ b/src/components/pages/Pagination/Pagination.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Paginations } from "./Pagination"; + +const meta = { + component: Paginations, + parameters: { + layout: "centered", + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + show: 3, + }, +}; diff --git a/src/components/pages/Pagination/Pagination.test.tsx b/src/components/pages/Pagination/Pagination.test.tsx new file mode 100644 index 00000000..523c5e6b --- /dev/null +++ b/src/components/pages/Pagination/Pagination.test.tsx @@ -0,0 +1,12 @@ +import { render, screen } from "@/utils/test-utils"; +import { Paginations } from "./Pagination"; +import "@testing-library/jest-dom"; + +describe("Pagenation component", () => { + it("renders correctly with the given label", () => { + render(); + // More on screen queries: https://testing-library.com/docs/queries/about + // More on jest expect Api: https://jestjs.io/docs/expect + expect(screen.getByRole("button", { name: "Button" })).toBeInTheDocument(); + }); +}); diff --git a/src/components/pages/Pagination/Pagination.tsx b/src/components/pages/Pagination/Pagination.tsx new file mode 100644 index 00000000..ce9bc2e0 --- /dev/null +++ b/src/components/pages/Pagination/Pagination.tsx @@ -0,0 +1,43 @@ +import { Group, Pagination, Text } from "@mantine/core"; +import classes from "./Pagination.module.css"; +import { useState } from "react"; + +const data = Array(0); +for (let i = 0; i < 127; i++) { + data.push(i); +} + +export function Paginations({ show, ...props }: { show: number }) { + const [page, setPage] = useState(1); + const pages = data.slice((page - 1) * show, page * show).map((e) => { + return ( + <> + {e}: test article + + ); + }); + return ( + <> + {pages} + + + + + + + + + + ); +} From 9bd5e771117470dfac566e0bc08c3b966dfc98d9 Mon Sep 17 00:00:00 2001 From: obinox Date: Tue, 16 Jul 2024 16:18:18 +0900 Subject: [PATCH 02/11] =?UTF-8?q?feat:=20=ED=8C=8C=EC=9D=BC=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/{pages => common}/Pagination/Pagination.module.css | 0 .../{pages => common}/Pagination/Pagination.stories.tsx | 0 src/components/{pages => common}/Pagination/Pagination.test.tsx | 0 src/components/{pages => common}/Pagination/Pagination.tsx | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename src/components/{pages => common}/Pagination/Pagination.module.css (100%) rename src/components/{pages => common}/Pagination/Pagination.stories.tsx (100%) rename src/components/{pages => common}/Pagination/Pagination.test.tsx (100%) rename src/components/{pages => common}/Pagination/Pagination.tsx (100%) diff --git a/src/components/pages/Pagination/Pagination.module.css b/src/components/common/Pagination/Pagination.module.css similarity index 100% rename from src/components/pages/Pagination/Pagination.module.css rename to src/components/common/Pagination/Pagination.module.css diff --git a/src/components/pages/Pagination/Pagination.stories.tsx b/src/components/common/Pagination/Pagination.stories.tsx similarity index 100% rename from src/components/pages/Pagination/Pagination.stories.tsx rename to src/components/common/Pagination/Pagination.stories.tsx diff --git a/src/components/pages/Pagination/Pagination.test.tsx b/src/components/common/Pagination/Pagination.test.tsx similarity index 100% rename from src/components/pages/Pagination/Pagination.test.tsx rename to src/components/common/Pagination/Pagination.test.tsx diff --git a/src/components/pages/Pagination/Pagination.tsx b/src/components/common/Pagination/Pagination.tsx similarity index 100% rename from src/components/pages/Pagination/Pagination.tsx rename to src/components/common/Pagination/Pagination.tsx From 145112e6541338209d7cfcf6362d68a56b1c0b31 Mon Sep 17 00:00:00 2001 From: obinox Date: Tue, 16 Jul 2024 16:35:22 +0900 Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=EA=B0=84=EA=B2=A9=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/common/Pagination/Pagination.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/Pagination/Pagination.tsx b/src/components/common/Pagination/Pagination.tsx index ce9bc2e0..b51e7342 100644 --- a/src/components/common/Pagination/Pagination.tsx +++ b/src/components/common/Pagination/Pagination.tsx @@ -32,7 +32,7 @@ export function Paginations({ show, ...props }: { show: number }) { onChange={setPage} {...props} > - + From b0ad1a39b636555a8d85f79629d37807cbac0e0e Mon Sep 17 00:00:00 2001 From: obinox Date: Tue, 16 Jul 2024 17:24:32 +0900 Subject: [PATCH 04/11] =?UTF-8?q?feat:=20aihub=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20TOD?= =?UTF-8?q?O:=20=EA=B8=80=EC=94=A8=EC=B2=B4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Cards/Aihub/Aihub.module.css | 104 ++++++++++++++++++ .../common/Cards/Aihub/Aihub.stories.tsx | 23 ++++ .../common/Cards/Aihub/Aihub.test.tsx | 12 ++ src/components/common/Cards/Aihub/Aihub.tsx | 57 ++++++++++ 4 files changed, 196 insertions(+) create mode 100644 src/components/common/Cards/Aihub/Aihub.module.css create mode 100644 src/components/common/Cards/Aihub/Aihub.stories.tsx create mode 100644 src/components/common/Cards/Aihub/Aihub.test.tsx create mode 100644 src/components/common/Cards/Aihub/Aihub.tsx diff --git a/src/components/common/Cards/Aihub/Aihub.module.css b/src/components/common/Cards/Aihub/Aihub.module.css new file mode 100644 index 00000000..47a1efd1 --- /dev/null +++ b/src/components/common/Cards/Aihub/Aihub.module.css @@ -0,0 +1,104 @@ +.root { + display: flex; + width: 471px; + height: 139px; + padding: 8px 8px 19px 23px; + align-items: flex-end; + gap: 8px; + border-radius: 12px; + border: 2px solid var(--background, #efeff0); + background: var(--white, #fff); + position: relative; +} + +.title { + display: flex; + width: auto; + height: 24px; + flex-direction: column; + justify-content: left; + + position: absolute; + left: 28px; + top: 17px; + color: var(--normal, #19191b); + /* material-theme/title/medium */ + + font-family: "Pretendard"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + /* 150% */ +} + +.people { + display: flex; + width: auto; + height: 24px; + flex-direction: column; + justify-content: left; + position: absolute; + left: 28px; + + top: 41px; + color: var(--Schemes-Outline, #73777f); + + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 24px; + /* 171.429% */ +} + +.company { + display: flex; + width: auto; + height: 24px; + flex-direction: column; + justify-content: left; + position: absolute; + left: 28px; + + bottom: 50px; + color: #000; + + font-family: "Pretendard"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 24px; + /* 171.429% */ +} + +.model { + display: flex; + width: 48px; + height: 20px; + justify-content: center; + align-items: center; + gap: 10px; + flex-shrink: 0; + border-radius: 5px; + background: var(--material-theme-sys-light-primary-container, #d2e4ff); + color: #000; +} + +.modeltext { + text-align: center; + font-family: "Gmarket Sans TTF"; + font-size: 10px; + font-style: normal; + font-weight: 700; + line-height: 24px; + /* 240% */ +} + +.Bookmark { + width: 16px; + height: 17.367px; + right: 17px; + bottom: 18px; + position: absolute; +} diff --git a/src/components/common/Cards/Aihub/Aihub.stories.tsx b/src/components/common/Cards/Aihub/Aihub.stories.tsx new file mode 100644 index 00000000..21a3532e --- /dev/null +++ b/src/components/common/Cards/Aihub/Aihub.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { AihubCard } from "./Aihub"; + +const meta = { + component: AihubCard, + parameters: { + layout: "centered", + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + title: "마케팅 데이터 소비자 리뷰", + people: "김동주, 김동주, 김동주", + company: "메카솔루션", + model: "Model, Model", + }, +}; diff --git a/src/components/common/Cards/Aihub/Aihub.test.tsx b/src/components/common/Cards/Aihub/Aihub.test.tsx new file mode 100644 index 00000000..663f4cfe --- /dev/null +++ b/src/components/common/Cards/Aihub/Aihub.test.tsx @@ -0,0 +1,12 @@ +import { render, screen } from "@/utils/test-utils"; +import { AihubCard } from "./Aihub"; +import "@testing-library/jest-dom"; + +describe("Pagenation component", () => { + it("renders correctly with the given label", () => { + render(); + // More on screen queries: https://testing-library.com/docs/queries/about + // More on jest expect Api: https://jestjs.io/docs/expect + expect(screen.getByRole("button", { name: "Button" })).toBeInTheDocument(); + }); +}); diff --git a/src/components/common/Cards/Aihub/Aihub.tsx b/src/components/common/Cards/Aihub/Aihub.tsx new file mode 100644 index 00000000..f4acdf4b --- /dev/null +++ b/src/components/common/Cards/Aihub/Aihub.tsx @@ -0,0 +1,57 @@ +import classes from "./Aihub.module.css"; + +function Bookmark({ className }: { className: string }): JSX.Element { + return ( + <> + + + + + ); +} + +export function AihubCard({ + title, + people, + company, + model, +}: { + title: string; + people: string; + company: string; + model: string; +}) { + const models = model.replaceAll(" ", "").split(","); + + return ( + <> +
+
{title}
+
{people}
+
{company}
+ {models.map((e) => { + return ( + <> +
+
{e}
+
+ + ); + })} + +
+ + ); +} From 1d99c1bbde2410c875a68e61395737fcba0c05cb Mon Sep 17 00:00:00 2001 From: obinox Date: Tue, 16 Jul 2024 18:11:05 +0900 Subject: [PATCH 05/11] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=EB=B3=B4=EA=B8=B0=20=EC=B6=94=EA=B0=80=20TOD?= =?UTF-8?q?O:=20=EC=9D=B4=EB=AF=B8=EC=A7=80,=20=EA=B8=80=EC=94=A8=EC=B2=B4?= =?UTF-8?q?,=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ViewPostDetail/ViewPostDetail.module.css | 76 +++++++++++++++++++ .../ViewPostDetail/ViewPostDetail.stories.tsx | 39 ++++++++++ .../ViewPostDetail/ViewPostDetail.test.tsx | 12 +++ .../Cards/ViewPostDetail/ViewPostDetail.tsx | 43 +++++++++++ 4 files changed, 170 insertions(+) create mode 100644 src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css create mode 100644 src/components/common/Cards/ViewPostDetail/ViewPostDetail.stories.tsx create mode 100644 src/components/common/Cards/ViewPostDetail/ViewPostDetail.test.tsx create mode 100644 src/components/common/Cards/ViewPostDetail/ViewPostDetail.tsx diff --git a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css new file mode 100644 index 00000000..93e09b5f --- /dev/null +++ b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css @@ -0,0 +1,76 @@ +.root { + width: 1123px; + height: 437px; + justify-content: stretch left; + align-items: center; + gap: 68px; + position: relative; + flex-direction: column; +} + +.title { + width: auto; + height: 69px; + flex-direction: column; + justify-content: center; + color: #000; + + font-family: "Red Hat Text"; + font-size: 32px; + font-style: normal; + font-weight: 600; + line-height: 24px; + /* 75% */ +} + +.hr { + width: 1123px; + size: 2px; +} + +.subtitle { + width: auto; + height: 52px; + flex-direction: column; + justify-content: center; + color: var(--normal, #19191b); + + font-family: "Red Hat Text"; + font-size: 27px; + font-style: normal; + font-weight: 500; + line-height: 24px; + /* 88.889% */ +} + +.images { + width: 1123px; + height: 437px; + justify-content: center; + align-items: center; + gap: 68px; +} + +.article { + width: auto; + height: auto; + flex-direction: column; + justify-content: center; + /* 133.333% */ +} + +.articletext { + color: var(--normal, #19191b); + font-family: "Red Hat Text"; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 24px; +} + +.footer { + width: auto; + height: auto; + text-align: right; + padding-bottom: 10px; +} diff --git a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.stories.tsx b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.stories.tsx new file mode 100644 index 00000000..0e7b1e93 --- /dev/null +++ b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.stories.tsx @@ -0,0 +1,39 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Paginations } from "./ViewPostDetail"; + +const meta = { + component: Paginations, + parameters: { + layout: "centered", + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + title: "[S-TOP 2024 이벤트 참여 안내]", + subtitle: "🎊 S-TOP 2024 기술교류회에서 이벤트를 진행합니다! (2/15 ~ 2/17)", + articles: [ + "<1> S-TOP 인스타그램 스토리 이벤트", + "1. 인스타 계정의 ‘2024 S-TOP’ 필터로 S-TOP사이트의 원하는 페이지 촬영", + "2. 해당 스토리에 S-TOP 사이트 링크 태그", + "3. 친구 1명과 학생회 인스타그램(@skku_s.wing) 태그 🏷", + "4. 스토리 게시 후 DM으로 이름과 전화번호 전송 (*비공개 계정일 경우, 해당 스토리 캡처 첨부)", + "", + "<2> 홈페이지 작품 투표 이벤트", + "1. S-TOP 페이지에 로그인", + "2. 2023년도 작품 목록에서 마음에 드는 작품에 투표 🗳", + "3. 자동 응모 완료!*S-TOP에서 진행되는 학생투표 100%로 인기상이 선정되니 신중히 투표해주시길 바랍니다.", + "", + "<3> S-TOP 대담 영상 퀴즈 이벤트 (성균관대학교 소프트웨어학과/컴퓨터공학과만 참여 가능)", + "1. <2>의 작품 투표를 선행", + "2. 대담 영상 시청 후 퀴즈 풀기 (*총 5개의 퀴즈가 있으며, 한 영상의 퀴즈만 풀어도 이벤트에 응모됩니다.)", + "", + "경품은 카드뉴스를 참고바라며 2/18일 20시 소프트웨어융합대학 인스타그램에서 라이브를 통해 추첨 후 제공할 예정입니다. 많은 관심과 참여 부탁드립니다~ 😊", + ], + }, +}; diff --git a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.test.tsx b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.test.tsx new file mode 100644 index 00000000..d535decf --- /dev/null +++ b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.test.tsx @@ -0,0 +1,12 @@ +import { render, screen } from "@/utils/test-utils"; +import { Paginations } from "./ViewPostDetail"; +import "@testing-library/jest-dom"; + +describe("Pagenation component", () => { + it("renders correctly with the given label", () => { + render(); + // More on screen queries: https://testing-library.com/docs/queries/about + // More on jest expect Api: https://jestjs.io/docs/expect + expect(screen.getByRole("button", { name: "Button" })).toBeInTheDocument(); + }); +}); diff --git a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.tsx b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.tsx new file mode 100644 index 00000000..373e17bd --- /dev/null +++ b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.tsx @@ -0,0 +1,43 @@ +import { Button } from "@mantine/core"; +import classes from "./ViewPostDetail.module.css"; + +const data = Array(0); +for (let i = 0; i < 127; i++) { + data.push(i); +} + +export function Paginations({ + title, + subtitle, + articles, +}: { + title: string; + subtitle: string; + articles: string[]; +}) { + return ( + <> +
+
{title}
+
+
{subtitle}
+
+
+ {articles.map((e) => { + return ( + <> +

{e}

+ + ); + })} +
+
+
+
+ +
+
+
+ + ); +} From adc46812a5adc93085562db86f02b05ecea4c630 Mon Sep 17 00:00:00 2001 From: obinox Date: Wed, 17 Jul 2024 14:48:44 +0900 Subject: [PATCH 06/11] =?UTF-8?q?feat:=20=ED=86=B5=EA=B3=84=20svg=20?= =?UTF-8?q?=ED=8B=80=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Statics/Statics.module.css | 13 ++++++ .../common/Statics/Statics.stories.tsx | 18 ++++++++ .../common/Statics/Statics.test.tsx | 12 ++++++ src/components/common/Statics/Statics.tsx | 42 +++++++++++++++++++ 4 files changed, 85 insertions(+) create mode 100644 src/components/common/Statics/Statics.module.css create mode 100644 src/components/common/Statics/Statics.stories.tsx create mode 100644 src/components/common/Statics/Statics.test.tsx create mode 100644 src/components/common/Statics/Statics.tsx diff --git a/src/components/common/Statics/Statics.module.css b/src/components/common/Statics/Statics.module.css new file mode 100644 index 00000000..961c83d3 --- /dev/null +++ b/src/components/common/Statics/Statics.module.css @@ -0,0 +1,13 @@ +.root { + color: var(--color-primary); + + --pagination-active-bg: var(--color-primary); +} + +.element_selected { + background-color: var(--color-primary); + + &:hover { + background-color: var(--color-onPrimaryFixedVariant); + } +} diff --git a/src/components/common/Statics/Statics.stories.tsx b/src/components/common/Statics/Statics.stories.tsx new file mode 100644 index 00000000..4ad40548 --- /dev/null +++ b/src/components/common/Statics/Statics.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Statics } from "./Statics"; + +const meta = { + component: Statics, + parameters: { + layout: "centered", + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/src/components/common/Statics/Statics.test.tsx b/src/components/common/Statics/Statics.test.tsx new file mode 100644 index 00000000..ff8ea508 --- /dev/null +++ b/src/components/common/Statics/Statics.test.tsx @@ -0,0 +1,12 @@ +import { render, screen } from "@/utils/test-utils"; +import { Statics } from "./Statics"; +import "@testing-library/jest-dom"; + +describe("Pagenation component", () => { + it("renders correctly with the given label", () => { + render(); + // More on screen queries: https://testing-library.com/docs/queries/about + // More on jest expect Api: https://jestjs.io/docs/expect + expect(screen.getByRole("button", { name: "Button" })).toBeInTheDocument(); + }); +}); diff --git a/src/components/common/Statics/Statics.tsx b/src/components/common/Statics/Statics.tsx new file mode 100644 index 00000000..b222cbda --- /dev/null +++ b/src/components/common/Statics/Statics.tsx @@ -0,0 +1,42 @@ +const data = Array(0); +for (let i = 0; i < 127; i++) { + data.push(i); +} + +export function Statics({}) { + const ar: number[] = Array(0); + const MAXH = 1000; + const MAXW = 1200; + const VIEW = 0.4; + for (let i = 0; i < 9; i++) { + ar.push(Math.random() * 100 + 100); + } + const Max = Math.max(...ar); + const count = ar.length; + return ( + <> + + {ar.map((e, i) => { + return ( + <> + + + ); + })} + + + ); +} From a79beefac289bb1256dda6281c905a6438708c89 Mon Sep 17 00:00:00 2001 From: obinox Date: Wed, 17 Jul 2024 16:01:28 +0900 Subject: [PATCH 07/11] =?UTF-8?q?feat:=20=EC=8A=A4=ED=8A=B8=EB=A1=9C?= =?UTF-8?q?=ED=81=AC=20=EC=B6=94=EA=B0=80,=20=EA=BA=BE=EC=9D=80=EC=84=A0?= =?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 --- .../common/Statics/Statics.stories.tsx | 22 +++- .../common/Statics/Statics.test.tsx | 24 +++- src/components/common/Statics/Statics.tsx | 103 ++++++++++++++---- 3 files changed, 126 insertions(+), 23 deletions(-) diff --git a/src/components/common/Statics/Statics.stories.tsx b/src/components/common/Statics/Statics.stories.tsx index 4ad40548..21a106ea 100644 --- a/src/components/common/Statics/Statics.stories.tsx +++ b/src/components/common/Statics/Statics.stories.tsx @@ -12,7 +12,25 @@ const meta = { export default meta; type Story = StoryObj; - +const array: number[] = Array(0); +for (let i = 0; i < 9; i++) { + array.push(Math.random() * 100 + 100); +} export const Default: Story = { - args: {}, + args: { + values: array, + maxWidth: 800, + maxHeight: 1200, + viewSize: 0.4, + maxMaxHeight: 0.8, + rectFill: "#ADADAD", + rectStrokeFill: "#858585", + rectStrokeWidth: 0.2, + circleRadius: 0.4, + circleFill: "#9A9A9A", + circleStrokeFill: "#454545", + circleStrokeWidth: 0.3, + pathStroke: "#BCBCBC", + pathWidth: 10, + }, }; diff --git a/src/components/common/Statics/Statics.test.tsx b/src/components/common/Statics/Statics.test.tsx index ff8ea508..9c427658 100644 --- a/src/components/common/Statics/Statics.test.tsx +++ b/src/components/common/Statics/Statics.test.tsx @@ -1,10 +1,30 @@ import { render, screen } from "@/utils/test-utils"; import { Statics } from "./Statics"; import "@testing-library/jest-dom"; - +const array: number[] = Array(0); +for (let i = 0; i < 9; i++) { + array.push(Math.random() * 100 + 100); +} describe("Pagenation component", () => { it("renders correctly with the given label", () => { - render(); + render( + + ); // More on screen queries: https://testing-library.com/docs/queries/about // More on jest expect Api: https://jestjs.io/docs/expect expect(screen.getByRole("button", { name: "Button" })).toBeInTheDocument(); diff --git a/src/components/common/Statics/Statics.tsx b/src/components/common/Statics/Statics.tsx index b222cbda..ed48079f 100644 --- a/src/components/common/Statics/Statics.tsx +++ b/src/components/common/Statics/Statics.tsx @@ -3,39 +3,104 @@ for (let i = 0; i < 127; i++) { data.push(i); } -export function Statics({}) { - const ar: number[] = Array(0); - const MAXH = 1000; - const MAXW = 1200; - const VIEW = 0.4; - for (let i = 0; i < 9; i++) { - ar.push(Math.random() * 100 + 100); - } - const Max = Math.max(...ar); - const count = ar.length; +export function Statics({ + values, + maxWidth, + maxHeight, + viewSize, + maxMaxHeight, + rectFill, + rectStrokeFill, + rectStrokeWidth, + circleRadius, + circleFill, + circleStrokeFill, + circleStrokeWidth, + pathStroke, + pathWidth, +}: { + values: number[]; + maxWidth: number; + maxHeight: number; + viewSize: number; + maxMaxHeight: number; + rectFill: string; + rectStrokeFill: string; + rectStrokeWidth: number; + circleRadius: number; + circleFill: string; + circleStrokeFill: string; + circleStrokeWidth: number; + pathStroke: string; + pathWidth: number; +}) { + const Max = Math.max(...values); + const count = values.length; return ( <> - {ar.map((e, i) => { + {values.map((e, i) => { return ( <> ); })} + { + return `${i == 0 ? "M" : "L"} ${(((i + 1 / 3) * maxHeight) / (count * 2 + count - 1)) * 3} ${maxWidth - (e / Max) * maxWidth * maxMaxHeight} `; + }) + .join("")} + > + {values.map((e, i) => { + return ( + <> + + + ); + })} ); From 8c0cf65332ac60b7578844e7203856b5f5a84445 Mon Sep 17 00:00:00 2001 From: obinox Date: Fri, 19 Jul 2024 17:03:49 +0900 Subject: [PATCH 08/11] feat: chromatic setup (#11) --- .github/workflows/storybook.yml | 41 +++++++++++++++++++++++++++++++++ package-lock.json | 1 + package.json | 4 +++- 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/storybook.yml diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml new file mode 100644 index 00000000..9afd2212 --- /dev/null +++ b/.github/workflows/storybook.yml @@ -0,0 +1,41 @@ +name: Storybook Deployment +run-name: ${{ github.actor }}'s Storybook Deployment +on: + pull_request: + branches: + - develop +jobs: + storybook: + runs-on: ubuntu-20.04 + outputs: + status: ${{ job.status }} + steps: + - name: checkout repository + uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - name: cache dependencies + id: cache + uses: actions/cache@v3 + with: + path: "**/node_modules" + key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}-storybook + + - name: depedency install + if: steps.cache.outputs.cache-hit != 'true' + run: npm ci + + - name: publish to chromatic + id: chromatic + uses: chromaui/action@v1 + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + token: ${{ secrets.ACTION_TOKEN }} + + - name: comment PR + uses: thollander/actions-comment-pull-request@v1 + env: + GITHUB_TOKEN: ${{ secrets.ACTION_TOKEN }} + with: + message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}" diff --git a/package-lock.json b/package-lock.json index 700c4683..d856d149 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "@types/react-dom": "^18", "@typescript-eslint/eslint-plugin": "^7.16.0", "@typescript-eslint/parser": "^7.16.0", + "chromatic": "^11.5.5", "eslint": "^8.57.0", "eslint-config-next": "^14.2.4", "eslint-config-prettier": "^9.1.0", diff --git a/package.json b/package.json index de97016a..9bce4cf9 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "prepare": "husky", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "test": "jest" + "test": "jest", + "chromatic": "npx chromatic --project-token=chpt_4df1876da1b9766" }, "dependencies": { "@mantine/core": "^7.11.1", @@ -44,6 +45,7 @@ "@types/react-dom": "^18", "@typescript-eslint/eslint-plugin": "^7.16.0", "@typescript-eslint/parser": "^7.16.0", + "chromatic": "^11.5.5", "eslint": "^8.57.0", "eslint-config-next": "^14.2.4", "eslint-config-prettier": "^9.1.0", From 8b4390fb039d3d05b922dae62b215aa4eb049499 Mon Sep 17 00:00:00 2001 From: obinox Date: Wed, 24 Jul 2024 17:47:42 +0900 Subject: [PATCH 09/11] =?UTF-8?q?fix(theme):=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/theme/AppTheme.ts | 136 +++++++++++++++++++++--------------------- 1 file changed, 68 insertions(+), 68 deletions(-) diff --git a/src/theme/AppTheme.ts b/src/theme/AppTheme.ts index d40b31ac..a8f47981 100644 --- a/src/theme/AppTheme.ts +++ b/src/theme/AppTheme.ts @@ -23,23 +23,23 @@ export const AppTheme = createTheme({ }, // 피그마 기준 색상 설정 light: { - primary: "#37618E", - surfaceTint: "#37618E", + primary: "#36618E", + surfaceTint: "#36618E", onPrimary: "#FFFFFF", - primaryContainer: "#D2E4FF", - onPrimaryContainer: "#001C37", + primaryContainer: "#D1E4FF", + onPrimaryContainer: "#001D36", secondary: "#4A672D", onSecondary: "#FFFFFF", secondaryContainer: "#CBEEA5", onSecondaryContainer: "#0E2000", - tertiary: "#37618E", + tertiary: "#6B5778", onTertiary: "#FFFFFF", - tertiaryContainer: "#D2E4FF", - onTertiaryContainer: "#001C37", - error: "#904A43", + tertiaryContainer: "#F3DAFF", + onTertiaryContainer: "#251431", + error: "#BA1A1A", onError: "#FFFFFF", - errorContainer: "#FFDAD5", - onErrorContainer: "#3B0907", + errorContainer: "#FFDAD6", + onErrorContainer: "#410002", background: "#F8F9FF", onBackground: "#191C20", surface: "#F8F9FF", @@ -52,77 +52,77 @@ export const AppTheme = createTheme({ scrim: "#000000", inverseSurface: "#2E3135", inverseOnSurface: "#EFF0F7", - inversePrimary: "#A1C9FD", - primaryFixed: "#D2E4FF", - onPrimaryFixed: "#001C37", - primaryFixedDim: "#A1C9FD", - onPrimaryFixedVariant: "#1C4975", + inversePrimary: "#A1CAFD", + primaryFixed: "#D1E4FF", + onPrimaryFixed: "#001D36", + primaryFixedDim: "#A1CAFD", + onPrimaryFixedVariant: "#1A4975", secondaryFixed: "#CBEEA5", onSecondaryFixed: "#0E2000", - secondaryFixedDim: "#B0D18B", + secondaryFixedDim: "#AFD18C", onSecondaryFixedVariant: "#334E17", - tertiaryFixed: "#D2E4FF", - onTertiaryFixed: "#001C37", - tertiaryFixedDim: "#A1C9FD", - onTertiaryFixedVariant: "#1B4975", + tertiaryFixed: "#F3DAFF", + onTertiaryFixed: "#251431", + tertiaryFixedDim: "#D7BEE4", + onTertiaryFixedVariant: "#523F5F", surfaceDim: "#D8DAE0", surfaceBright: "#F8F9FF", surfaceContainerLowest: "#FFFFFF", surfaceContainerLow: "#F2F3FA", surfaceContainer: "#ECEEF4", - surfaceContainerHigh: "#E7E8EE", + surfaceContainerHigh: "#E6E8EE", surfaceContainerHighest: "#E1E2E8", }, dark: { - primary: "#002342", - surfaceTint: "#37618E", - onPrimary: "#FFFFFF", - primaryContainer: "#164571", - onPrimaryContainer: "#FFFFFF", - secondary: "#132700", - onSecondary: "#FFFFFF", - secondaryContainer: "#2F4A13", - onSecondaryContainer: "#FFFFFF", - tertiary: "#002342", - onTertiary: "#FFFFFF", - tertiaryContainer: "#164571", - onTertiaryContainer: "#FFFFFF", - error: "#44100C", - onError: "#FFFFFF", - errorContainer: "#6E302A", - onErrorContainer: "#FFFFFF", - background: "#F8F9FF", - onBackground: "#191C20", - surface: "#F8F9FF", - onSurface: "#000000", - surfaceVariant: "#DFE2EB", - onSurfaceVariant: "#20242B", - outline: "#3F434A", - outlineVariant: "#3F434A", + primary: "#A1CAFD", + surfaceTint: "#A1CAFD", + onPrimary: "#003259", + primaryContainer: "#1A4975", + onPrimaryContainer: "#D1E4FF", + secondary: "#AFD18C", + onSecondary: "#1D3702", + secondaryContainer: "#334E17", + onSecondaryContainer: "#CBEEA5", + tertiary: "#D7BEE4", + onTertiary: "#3B2948", + tertiaryContainer: "#523F5F", + onTertiaryContainer: "#F3DAFF", + error: "#FFB4AB", + onError: "#690005", + errorContainer: "#93000A", + onErrorContainer: "#FFDAD6", + background: "#111418", + onBackground: "#E1E2E8", + surface: "#111418", + onSurface: "#E1E2E8", + surfaceVariant: "#43474E", + onSurfaceVariant: "#C3C6CF", + outline: "#8D9199", + outlineVariant: "#43474E", shadow: "#000000", scrim: "#000000", - inverseSurface: "#2E3135", - inverseOnSurface: "#FFFFFF", - inversePrimary: "#E2EDFF", - primaryFixed: "#164571", - onPrimaryFixed: "#FFFFFF", - primaryFixedDim: "#002E53", - onPrimaryFixedVariant: "#FFFFFF", - secondaryFixed: "#2F4A13", - onSecondaryFixed: "#FFFFFF", - secondaryFixedDim: "#1A3300", - onSecondaryFixedVariant: "#FFFFFF", - tertiaryFixed: "#164571", - onTertiaryFixed: "#FFFFFF", - tertiaryFixedDim: "#002E53", - onTertiaryFixedVariant: "#FFFFFF", - surfaceDim: "#D8DAE0", - surfaceBright: "#F8F9FF", - surfaceContainerLowest: "#FFFFFF", - surfaceContainerLow: "#F2F3FA", - surfaceContainer: "#ECEEF4", - surfaceContainerHigh: "#E7E8EE", - surfaceContainerHighest: "#E1E2E8", + inverseSurface: "#E1E2E8", + inverseOnSurface: "#2E3135", + inversePrimary: "#36618E", + primaryFixed: "#D1E4FF", + onPrimaryFixed: "#001D36", + primaryFixedDim: "#A1CAFD", + onPrimaryFixedVariant: "#1A4975", + secondaryFixed: "#CBEEA5", + onSecondaryFixed: "#0E2000", + secondaryFixedDim: "#AFD18C", + onSecondaryFixedVariant: "#334E17", + tertiaryFixed: "#F3DAFF", + onTertiaryFixed: "#251431", + tertiaryFixedDim: "#D7BEE4", + onTertiaryFixedVariant: "#523F5F", + surfaceDim: "#111418", + surfaceBright: "#36393E", + surfaceContainerLowest: "#0B0E13", + surfaceContainerLow: "#191C20", + surfaceContainer: "#1D2024", + surfaceContainerHigh: "#272A2F", + surfaceContainerHighest: "#32353A", }, }, }); From 3b4c63e214c4c9a3cc5a41efbb53d71d78df93f7 Mon Sep 17 00:00:00 2001 From: obinox Date: Wed, 24 Jul 2024 18:11:25 +0900 Subject: [PATCH 10/11] =?UTF-8?q?feat:=20aihub=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Cards/Aihub/Aihub.module.css | 28 ++++++++++++++----- src/components/common/Cards/Aihub/Aihub.tsx | 13 ++------- .../ViewPostDetail/ViewPostDetail.module.css | 11 +++----- 3 files changed, 27 insertions(+), 25 deletions(-) diff --git a/src/components/common/Cards/Aihub/Aihub.module.css b/src/components/common/Cards/Aihub/Aihub.module.css index 47a1efd1..8798d2b4 100644 --- a/src/components/common/Cards/Aihub/Aihub.module.css +++ b/src/components/common/Cards/Aihub/Aihub.module.css @@ -24,7 +24,6 @@ color: var(--normal, #19191b); /* material-theme/title/medium */ - font-family: "Pretendard"; font-size: 16px; font-style: normal; font-weight: 500; @@ -44,7 +43,6 @@ top: 41px; color: var(--Schemes-Outline, #73777f); - font-family: Pretendard; font-size: 14px; font-style: normal; font-weight: 500; @@ -64,7 +62,6 @@ bottom: 50px; color: #000; - font-family: "Pretendard"; font-size: 14px; font-style: normal; font-weight: 500; @@ -86,19 +83,36 @@ } .modeltext { + display: flex; + width: auto; + height: 24px; + flex-direction: column; + justify-content: left; + position: absolute; + left: 28px; text-align: center; - font-family: "Gmarket Sans TTF"; - font-size: 10px; + font-size: 12px; font-style: normal; font-weight: 700; line-height: 24px; /* 240% */ } +.side { + width: 33px; + height: 137px; + flex-shrink: 0; + border-radius: 0px 12px 12px 0px; + background: var(--color-surfaceVariant, #dfe2eb); + position: absolute; + top: -1px; + right: 0; +} + .Bookmark { width: 16px; height: 17.367px; - right: 17px; - bottom: 18px; + right: 8px; + bottom: 9px; position: absolute; } diff --git a/src/components/common/Cards/Aihub/Aihub.tsx b/src/components/common/Cards/Aihub/Aihub.tsx index f4acdf4b..dab4a7e8 100644 --- a/src/components/common/Cards/Aihub/Aihub.tsx +++ b/src/components/common/Cards/Aihub/Aihub.tsx @@ -33,23 +33,14 @@ export function AihubCard({ company: string; model: string; }) { - const models = model.replaceAll(" ", "").split(","); - return ( <>
{title}
{people}
{company}
- {models.map((e) => { - return ( - <> -
-
{e}
-
- - ); - })} +
{model}
+
diff --git a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css index 93e09b5f..59e8cc2c 100644 --- a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css +++ b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css @@ -15,8 +15,7 @@ justify-content: center; color: #000; - font-family: "Red Hat Text"; - font-size: 32px; + font-size: 1.6vw; font-style: normal; font-weight: 600; line-height: 24px; @@ -35,11 +34,10 @@ justify-content: center; color: var(--normal, #19191b); - font-family: "Red Hat Text"; - font-size: 27px; + font-size: 1.6vw; font-style: normal; font-weight: 500; - line-height: 24px; + line-height: 1.2vw; /* 88.889% */ } @@ -61,8 +59,7 @@ .articletext { color: var(--normal, #19191b); - font-family: "Red Hat Text"; - font-size: 18px; + font-size: 1.2vw; font-style: normal; font-weight: 400; line-height: 24px; From 4e4721d3850870fb884bca308ee583e34ef3a393 Mon Sep 17 00:00:00 2001 From: obinox Date: Sun, 4 Aug 2024 14:34:03 +0900 Subject: [PATCH 11/11] =?UTF-8?q?feat(comp):=20=EC=88=98=EC=A0=95=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Cards/Aihub/Aihub.module.css | 8 +- src/components/common/Cards/Aihub/Aihub.tsx | 34 ++-- .../ViewPostDetail/ViewPostDetail.module.css | 8 +- .../ViewPostDetail/ViewPostDetail.stories.tsx | 6 +- .../ViewPostDetail/ViewPostDetail.test.tsx | 4 +- .../Cards/ViewPostDetail/ViewPostDetail.tsx | 7 +- .../common/Pagination/Pagination.stories.tsx | 12 +- .../common/Pagination/Pagination.test.tsx | 2 +- .../common/Pagination/Pagination.tsx | 34 ++-- .../common/Statics/Statics.module.css | 13 -- .../common/Statics/Statics.stories.tsx | 8 +- .../common/Statics/Statics.test.tsx | 2 + src/components/common/Statics/Statics.tsx | 155 +++++++++++------- 13 files changed, 160 insertions(+), 133 deletions(-) diff --git a/src/components/common/Cards/Aihub/Aihub.module.css b/src/components/common/Cards/Aihub/Aihub.module.css index 8798d2b4..d2d3fe38 100644 --- a/src/components/common/Cards/Aihub/Aihub.module.css +++ b/src/components/common/Cards/Aihub/Aihub.module.css @@ -110,9 +110,9 @@ } .Bookmark { - width: 16px; - height: 17.367px; - right: 8px; - bottom: 9px; + width: 40px; + height: 40px; + right: -12px; + bottom: 0px; position: absolute; } diff --git a/src/components/common/Cards/Aihub/Aihub.tsx b/src/components/common/Cards/Aihub/Aihub.tsx index dab4a7e8..b426ec9d 100644 --- a/src/components/common/Cards/Aihub/Aihub.tsx +++ b/src/components/common/Cards/Aihub/Aihub.tsx @@ -1,23 +1,29 @@ +import { Button } from "@mantine/core"; import classes from "./Aihub.module.css"; function Bookmark({ className }: { className: string }): JSX.Element { return ( <> - - - + variant="transparent" + leftSection={ + + + + } + > ); } diff --git a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css index 59e8cc2c..53417e7a 100644 --- a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css +++ b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css @@ -15,7 +15,7 @@ justify-content: center; color: #000; - font-size: 1.6vw; + font-size: 32px; font-style: normal; font-weight: 600; line-height: 24px; @@ -34,10 +34,10 @@ justify-content: center; color: var(--normal, #19191b); - font-size: 1.6vw; + font-size: 27px; font-style: normal; font-weight: 500; - line-height: 1.2vw; + line-height: 24px; /* 88.889% */ } @@ -59,7 +59,7 @@ .articletext { color: var(--normal, #19191b); - font-size: 1.2vw; + font-size: 18px; font-style: normal; font-weight: 400; line-height: 24px; diff --git a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.stories.tsx b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.stories.tsx index 0e7b1e93..16e54858 100644 --- a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.stories.tsx +++ b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.stories.tsx @@ -1,13 +1,13 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { Paginations } from "./ViewPostDetail"; +import { ViewPostDetail } from "./ViewPostDetail"; const meta = { - component: Paginations, + component: ViewPostDetail, parameters: { layout: "centered", }, -} satisfies Meta; +} satisfies Meta; export default meta; diff --git a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.test.tsx b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.test.tsx index d535decf..3cff0db5 100644 --- a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.test.tsx +++ b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.test.tsx @@ -1,10 +1,10 @@ import { render, screen } from "@/utils/test-utils"; -import { Paginations } from "./ViewPostDetail"; +import { ViewPostDetail } from "./ViewPostDetail"; import "@testing-library/jest-dom"; describe("Pagenation component", () => { it("renders correctly with the given label", () => { - render(); + render(); // More on screen queries: https://testing-library.com/docs/queries/about // More on jest expect Api: https://jestjs.io/docs/expect expect(screen.getByRole("button", { name: "Button" })).toBeInTheDocument(); diff --git a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.tsx b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.tsx index 373e17bd..48810885 100644 --- a/src/components/common/Cards/ViewPostDetail/ViewPostDetail.tsx +++ b/src/components/common/Cards/ViewPostDetail/ViewPostDetail.tsx @@ -1,12 +1,7 @@ import { Button } from "@mantine/core"; import classes from "./ViewPostDetail.module.css"; -const data = Array(0); -for (let i = 0; i < 127; i++) { - data.push(i); -} - -export function Paginations({ +export function ViewPostDetail({ title, subtitle, articles, diff --git a/src/components/common/Pagination/Pagination.stories.tsx b/src/components/common/Pagination/Pagination.stories.tsx index 0256d065..ad4538e3 100644 --- a/src/components/common/Pagination/Pagination.stories.tsx +++ b/src/components/common/Pagination/Pagination.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; - +import { Text } from "@mantine/core"; import { Paginations } from "./Pagination"; const meta = { @@ -12,9 +12,17 @@ const meta = { export default meta; type Story = StoryObj; - +const data = Array(0); +for (let i = 0; i < 127; i++) { + data.push( + <> + {i}: test article + + ); +} export const Default: Story = { args: { show: 3, + data: data, }, }; diff --git a/src/components/common/Pagination/Pagination.test.tsx b/src/components/common/Pagination/Pagination.test.tsx index 523c5e6b..9b286a0a 100644 --- a/src/components/common/Pagination/Pagination.test.tsx +++ b/src/components/common/Pagination/Pagination.test.tsx @@ -4,7 +4,7 @@ import "@testing-library/jest-dom"; describe("Pagenation component", () => { it("renders correctly with the given label", () => { - render(); + render(); // More on screen queries: https://testing-library.com/docs/queries/about // More on jest expect Api: https://jestjs.io/docs/expect expect(screen.getByRole("button", { name: "Button" })).toBeInTheDocument(); diff --git a/src/components/common/Pagination/Pagination.tsx b/src/components/common/Pagination/Pagination.tsx index b51e7342..f7d9d182 100644 --- a/src/components/common/Pagination/Pagination.tsx +++ b/src/components/common/Pagination/Pagination.tsx @@ -1,26 +1,22 @@ -import { Group, Pagination, Text } from "@mantine/core"; +"use client"; +import { + Group, + PaginationItems, + PaginationNext, + PaginationPrevious, + PaginationRoot, +} from "@mantine/core"; import classes from "./Pagination.module.css"; import { useState } from "react"; -const data = Array(0); -for (let i = 0; i < 127; i++) { - data.push(i); -} - -export function Paginations({ show, ...props }: { show: number }) { +export function Paginations({ show, data, ...props }: { show: number; data: Array }) { const [page, setPage] = useState(1); - const pages = data.slice((page - 1) * show, page * show).map((e) => { - return ( - <> - {e}: test article - - ); - }); + const pages = data.slice((page - 1) * show, page * show); return ( <> {pages} - - - - + + + - + ); } diff --git a/src/components/common/Statics/Statics.module.css b/src/components/common/Statics/Statics.module.css index 961c83d3..e69de29b 100644 --- a/src/components/common/Statics/Statics.module.css +++ b/src/components/common/Statics/Statics.module.css @@ -1,13 +0,0 @@ -.root { - color: var(--color-primary); - - --pagination-active-bg: var(--color-primary); -} - -.element_selected { - background-color: var(--color-primary); - - &:hover { - background-color: var(--color-onPrimaryFixedVariant); - } -} diff --git a/src/components/common/Statics/Statics.stories.tsx b/src/components/common/Statics/Statics.stories.tsx index 21a106ea..feef0fc8 100644 --- a/src/components/common/Statics/Statics.stories.tsx +++ b/src/components/common/Statics/Statics.stories.tsx @@ -13,14 +13,18 @@ export default meta; type Story = StoryObj; const array: number[] = Array(0); +const array2: string[] = Array(0); for (let i = 0; i < 9; i++) { array.push(Math.random() * 100 + 100); + array2.push(Math.round(Math.random() * 100 + 100).toString()); } export const Default: Story = { args: { values: array, - maxWidth: 800, - maxHeight: 1200, + labels: array2, + labelAlign: "center", + maxWidth: 1200, + maxHeight: 800, viewSize: 0.4, maxMaxHeight: 0.8, rectFill: "#ADADAD", diff --git a/src/components/common/Statics/Statics.test.tsx b/src/components/common/Statics/Statics.test.tsx index 9c427658..dfee874a 100644 --- a/src/components/common/Statics/Statics.test.tsx +++ b/src/components/common/Statics/Statics.test.tsx @@ -23,6 +23,8 @@ describe("Pagenation component", () => { circleStrokeWidth={0.3} pathStroke={"#BCBCBC"} pathWidth={10} + labels={[]} + labelAlign={"center"} /> ); // More on screen queries: https://testing-library.com/docs/queries/about diff --git a/src/components/common/Statics/Statics.tsx b/src/components/common/Statics/Statics.tsx index ed48079f..93050b7d 100644 --- a/src/components/common/Statics/Statics.tsx +++ b/src/components/common/Statics/Statics.tsx @@ -1,10 +1,8 @@ -const data = Array(0); -for (let i = 0; i < 127; i++) { - data.push(i); -} - +type align = "start" | "end" | "left" | "right" | "center" | "justify" | "match-parent"; export function Statics({ values, + labels, + labelAlign, maxWidth, maxHeight, viewSize, @@ -20,6 +18,8 @@ export function Statics({ pathWidth, }: { values: number[]; + labels: string[]; + labelAlign: align; maxWidth: number; maxHeight: number; viewSize: number; @@ -38,70 +38,99 @@ export function Statics({ const count = values.length; return ( <> - - {values.map((e, i) => { - return ( - <> - - - ); - })} - { - return `${i == 0 ? "M" : "L"} ${(((i + 1 / 3) * maxHeight) / (count * 2 + count - 1)) * 3} ${maxWidth - (e / Max) * maxWidth * maxMaxHeight} `; - }) - .join("")} - > - {values.map((e, i) => { + + {values.map((e, i) => { + return ( + <> + + + ); + })} + { + return `${i == 0 ? "M" : "L"} ${(((i + 1 / 3) * maxWidth) / (count * 2 + count - 1)) * 3} ${maxHeight - (e / Max) * maxHeight * maxMaxHeight} `; + }) + .join("")} + > + {values.map((e, i) => { + return ( + <> + + + ); + })} + + {labels.map((e, i) => { + const a = ((i * maxWidth) / (count * 2 + count - 1)) * 3 * viewSize; + const b = (maxWidth / (count * 2 + count - 1)) * 2 * viewSize; return ( <> - +

+ {e} +

); })} - + ); }