[FEAT] 페이지네이션/AI hub 카드/게시글 상세보기/통계 보기 추가

.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 }}"

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

src/components/common/Cards/Aihub/Aihub.module.css

@@ -0,0 +1,118 @@
+.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-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-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-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 {
+  display: flex;
+  width: auto;
+  height: 24px;
+  flex-direction: column;
+  justify-content: left;
+  position: absolute;
+  left: 28px;
+  text-align: center;
+  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: 40px;
+  height: 40px;
+  right: -12px;
+  bottom: 0px;
+  position: absolute;
+}

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<typeof AihubCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "마케팅 데이터 소비자 리뷰",
+    people: "김동주, 김동주, 김동주",
+    company: "메카솔루션",
+    model: "Model, Model",
+  },
+};

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(<AihubCard title="" people="" company="" model="" />);
+    // 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();
+  });
+});

src/components/common/Cards/Aihub/Aihub.tsx

@@ -0,0 +1,54 @@
+import { Button } from "@mantine/core";
+import classes from "./Aihub.module.css";
+
+function Bookmark({ className }: { className: string }): JSX.Element {
+  return (
+    <>
+      <Button
+        className={className}
+        variant="transparent"
+        leftSection={
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="20"
+            viewBox="0 0 18 20"
+            fill="none"
+          >
+            <path
+              d="M1 7.2666C1 4.43817 1 3.02396 1.87868 2.14528C2.75736 1.2666 4.17157 1.2666 7 1.2666H11C13.8284 1.2666 15.2426 1.2666 16.1213 2.14528C17 3.02396 17 4.43817 17 7.2666V14.0942C17 16.7775 17 18.1191 16.1557 18.5295C15.3114 18.9399 14.2565 18.111 12.1465 16.4532L11.4713 15.9226C10.2849 14.9905 9.69173 14.5244 9 14.5244C8.30827 14.5244 7.71509 14.9905 6.52871 15.9226L5.85346 16.4532C3.74355 18.111 2.68859 18.9399 1.84429 18.5295C1 18.1191 1 16.7775 1 14.0942V7.2666Z"
+              fill="#37618E"
+              stroke="#37618E"
+              stroke-width="2"
+            />
+          </svg>
+        }
+      ></Button>
+    </>
+  );
+}
+
+export function AihubCard({
+  title,
+  people,
+  company,
+  model,
+}: {
+  title: string;
+  people: string;
+  company: string;
+  model: string;
+}) {
+  return (
+    <>
+      <div className={classes.root}>
+        <div className={classes.title}>{title}</div>
+        <div className={classes.people}>{people}</div>
+        <div className={classes.company}>{company}</div>
+        <div className={classes.modeltext}>{model}</div>
+        <div className={classes.side}></div>
+        <Bookmark className={classes.Bookmark} />
+      </div>
+    </>
+  );
+}

src/components/common/Cards/ViewPostDetail/ViewPostDetail.module.css

@@ -0,0 +1,73 @@
+.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-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-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-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.footer {
+  width: auto;
+  height: auto;
+  text-align: right;
+  padding-bottom: 10px;
+}

src/components/common/Cards/ViewPostDetail/ViewPostDetail.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ViewPostDetail } from "./ViewPostDetail";
+
+const meta = {
+  component: ViewPostDetail,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof ViewPostDetail>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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시 소프트웨어융합대학 인스타그램에서 라이브를 통해 추첨 후 제공할 예정입니다. 많은 관심과 참여 부탁드립니다~ 😊",
+    ],
+  },
+};