Merge branch 'develop' into feat/6-data-table-component

package.json

@@ -18,8 +18,9 @@
     "chromatic": "npx chromatic --project-token=chpt_4df1876da1b9766"
   },
   "dependencies": {
-    "@mantine/core": "^7.11.1",
-    "@mantine/hooks": "^7.11.1",
+    "@mantine/core": "^7.11.2",
+    "@mantine/hooks": "^7.11.2",
+    "@mantine/styles": "^6.0.22",
     "@tabler/icons-react": "^3.11.0",
     "next": "14.2.4",
     "react": "^18",
@@ -59,7 +60,7 @@
     "postcss": "^8.4.39",
     "postcss-preset-mantine": "^1.15.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "storybook": "^8.2.2",
     "storybook-dark-mode": "^4.0.2",
     "ts-jest": "^29.2.2",

src/components/common/Banner/Banner.module.css

@@ -0,0 +1,50 @@
+.container {
+  width: auto;
+  height: auto;
+}
+
+.img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+}
+
+.group {
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.stack {
+  width: 50%;
+}
+
+.title {
+  display: flex;
+  width: 100%;
+  font-size: 5.5vw;
+  font-weight: 700;
+  color: white;
+}
+
+.subtitle {
+  display: flex;
+  width: 100%;
+  font-size: 2.3vw;
+  font-weight: 400;
+  color: white;
+}
+
+.text {
+  position: flex;
+  font-size: 1.8vw;
+  font-weight: 500;
+  width: 50%;
+  color: white;
+  padding: 40px;
+  line-height: 140%;
+  word-break: keep-all;
+}

src/components/common/Banner/Banner.story.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Banner } from "./Banner";
+
+const meta = {
+  title: "Banner",
+  component: Banner,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Usage: Story = {
+  args: {
+    type: "AI_HUB",
+    title: "AI HUB",
+    subtitle: "AI HUB (Datasets and AI Models)",
+    text: "AI HUB는 우리학교 학생들이 수집한 데이터셋 및 개발한 모델을 전시하고, 공유하는 공간입니다.",
+    width: "1440px",
+    height: "270px",
+  },
+};

src/components/common/Banner/Banner.tsx

@@ -0,0 +1,43 @@
+import Image from "next/image";
+import classes from "./Banner.module.css";
+import { Container, Group, Stack } from "@mantine/core";
+
+export type ImageType = "AI_HUB" | "IND_UNIV_PROJECT" | "INTERVIEW" | "PROJECT" | "S_TOP";
+export type ImageLocationLookupTable = Record<ImageType, string>;
+export const IMAGE_LOCATION_LOOKUP_TABLE: ImageLocationLookupTable = {
+  AI_HUB: "/images/aihub.png",
+  IND_UNIV_PROJECT: "/images/ind-univ-project.png",
+  INTERVIEW: "/images/interview.png",
+  PROJECT: "/images/project.png",
+  S_TOP: "/images/s-top.png",
+};
+
+export interface BannerProps {
+  type: ImageType;
+  title: string;
+  subtitle?: string;
+  text: string;
+  width?: string;
+  height?: string;
+}
+export function Banner({ type, title, subtitle, text, width, height }: BannerProps) {
+  return (
+    <Container className={classes.container} w={width} h={height}>
+      <Image
+        src={IMAGE_LOCATION_LOOKUP_TABLE[type]}
+        alt={"Banner Image"}
+        className={classes.img}
+        layout="fill"
+        objectFit="contain"
+        priority
+      />
+      <Group className={classes.group} gap={0}>
+        <Stack className={classes.stack} align="flex-start" p={40} gap={0}>
+          <div className={classes.title}>{title}</div>
+          <div className={classes.subtitle}>{subtitle}</div>
+        </Stack>
+        <div className={classes.text}>{text}</div>
+      </Group>
+    </Container>
+  );
+}

src/components/common/Buttons/DangerButton/DangerButton.module.css

@@ -0,0 +1,8 @@
+.element {
+  background-color: var(--color-error);
+  color: var(--color-onError);
+  &:hover {
+    background-color: var(--color-error);
+    color: var(--color-onError);
+  }
+}

src/components/common/Buttons/DangerButton/DangerButton.story.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DangerButton } from "./DangerButton";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "DangerButton",
+  component: DangerButton,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // More on Action Args : https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof DangerButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Usage: Story = {
+  args: {
+    label: "Button",
+  },
+};

src/components/common/Buttons/DangerButton/DangerButton.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from "@/utils/test-utils";
+import { DangerButton } from "./DangerButton";
+import "@testing-library/jest-dom";
+
+describe("DangerButton component", () => {
+  it("renders correctly with the given label", () => {
+    render(<DangerButton label="Button" />);
+    // 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/Buttons/DangerButton/DangerButton.tsx

@@ -0,0 +1,12 @@
+import { Button, ButtonProps } from "@mantine/core";
+import classes from "./DangerButton.module.css";
+
+export function DangerButton({ label, ...props }: ButtonProps & { label?: string }) {
+  return (
+    <>
+      <Button className={classes.element} {...props}>
+        {label}
+      </Button>
+    </>
+  );
+}

src/components/common/Buttons/OutlinedButton/OutlinedButton.module.css

@@ -0,0 +1,10 @@
+.element {
+  border: 1px solid var(--color-outline);
+  background-color: var(--color-background);
+  color: var(--color-onBackground);
+  &:hover {
+    background-color: var(--color-background);
+    color: var(--color-onBackground);
+    border: 1px solid var(--color-outlineVariant);
+  }
+}

src/components/common/Buttons/OutlinedButton/OutlinedButton.story.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { OutlinedButton } from "./OutlinedButton";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "OutlinedButton",
+  component: OutlinedButton,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // More on Action Args : https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof OutlinedButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Usage: Story = {
+  args: {
+    label: "Button",
+  },
+};

src/components/common/Buttons/OutlinedButton/OutlinedButton.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from "@/utils/test-utils";
+import { OutlinedButton } from "./OutlinedButton";
+import "@testing-library/jest-dom";
+
+describe("OutlinedButton component", () => {
+  it("renders correctly with the given label", () => {
+    render(<OutlinedButton label="Button" />);
+    // 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/Buttons/OutlinedButton/OutlinedButton.tsx

@@ -0,0 +1,12 @@
+import { Button, ButtonProps } from "@mantine/core";
+import classes from "./OutlinedButton.module.css";
+
+export function OutlinedButton({ label, ...props }: ButtonProps & { label?: string }) {
+  return (
+    <>
+      <Button className={classes.element} {...props}>
+        {label}
+      </Button>
+    </>
+  );
+}

src/components/common/Buttons/PrimaryButton/PrimaryButton.module.css

@@ -1,6 +1,12 @@
 .element {
   background-color: var(--color-primary);
+  color: var(--color-onPrimary);
   &:hover {
-    background-color: var(--color-onPrimaryFixedVariant);
+    background-color: var(--color-primaryFixed);
+    color: var(--color-onPrimaryFixed);
+  }
+  &:disabled {
+    background-color: var(--color-primaryFixedDim);
+    color: var(--color-onPrimaryFixedDim);
   }
 }

src/components/common/Buttons/PrimaryButton/PrimaryButton.story.tsx

@@ -26,3 +26,10 @@ export const Usage: Story = {
     label: "Button",
   },
 };
+
+export const Disabled: Story = {
+  args: {
+    label: "Button",
+    disabled: true,
+  },
+};

src/components/common/Buttons/SecondaryButton/SecondaryButton.module.css

@@ -0,0 +1,12 @@
+.element {
+  background-color: var(--color-secondary);
+  color: var(--color-onSecondary);
+  &:hover {
+    background-color: var(--color-secondaryFixed);
+    color: var(--color-onSecondaryFixed);
+  }
+  &:disabled {
+    background-color: var(--color-secondaryFixedDim);
+    color: var(--color-onSecondaryFixedDim);
+  }
+}

src/components/common/Buttons/SecondaryButton/SecondaryButton.story.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SecondaryButton } from "./SecondaryButton";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "SecondaryButton",
+  component: SecondaryButton,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // More on Action Args : https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof SecondaryButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Usage: Story = {
+  args: {
+    label: "Button",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Button",
+    disabled: true,
+  },
+};

src/components/common/Buttons/SecondaryButton/SecondaryButton.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from "@/utils/test-utils";
+import { SecondaryButton } from "./SecondaryButton";
+import "@testing-library/jest-dom";
+
+describe("SecondaryButton component", () => {
+  it("renders correctly with the given label", () => {
+    render(<SecondaryButton label="Button" />);
+    // 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();
+  });
+});