Merge pull request #34 from SystemConsultantGroup/feat/7-filterChip

[FEAT] 필터칩 추가

src/components/common/FilterChips/FilterChip.module.css

@@ -0,0 +1,55 @@
+.filterChip {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 2px 6px 2px 10px;
+  border-radius: 100px;
+  margin: 5px;
+}
+
+.label {
+  font-family: "Pretendard";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--color-shadow);
+  margin-right: 6px;
+}
+
+.close {
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-outline);
+  border-radius: 50%;
+}
+
+.resetChip {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-surfaceVariant);
+  background-color: var(--color-surfaceBright);
+}
+
+.resetLabel {
+  font-family: "Pretendard";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #ba1a1a;
+  margin-right: 6px;
+  margin-left: 3px;
+  cursor: pointer;
+}
+
+.resetIcon {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/components/common/FilterChips/FilterChip.story.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FilterChip } from "./FilterChip";
+
+const meta = {
+  title: "Components/FilterChip",
+  component: FilterChip,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {
+    label: "",
+    onRemove: () => {},
+  },
+} satisfies Meta<typeof FilterChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "2024",
+    onRemove: () => {},
+  },
+  render: (args) => (
+    <>
+      <FilterChip {...args} label="2024" />
+      <FilterChip {...args} label="연구실" />
+      <FilterChip {...args} label="웹/어플리케이션" />
+    </>
+  ),
+};
+
+export const Reset: Story = {
+  args: {
+    label: "전체해제",
+    onRemove: () => {},
+    isReset: true,
+  },
+  render: (args) => <FilterChip {...args} />,
+};

src/components/common/FilterChips/FilterChip.test.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { render, screen, fireEvent } from "@/utils/test-utils";
+import { FilterChip } from "./FilterChip";
+import "@testing-library/jest-dom";
+
+describe("FilterChip component", () => {
+  it("renders correctly with the given label", () => {
+    render(<FilterChip label="2024" onRemove={() => {}} />);
+    expect(screen.getByText("2024")).toBeInTheDocument();
+  });
+
+  it("calls onRemove when close button is clicked", () => {
+    const onRemove = jest.fn();
+    render(<FilterChip label="2024" onRemove={onRemove} />);
+    fireEvent.click(screen.getByText("X"));
+    expect(onRemove).toHaveBeenCalled();
+  });
+});
+
+describe("FilterChipReset component", () => {
+  it("renders correctly", () => {
+    render(<FilterChip label="전체해제" onRemove={() => {}} isReset />);
+    expect(screen.getByText("전체해제")).toBeInTheDocument();
+  });
+
+  it("does not show the close button", () => {
+    render(<FilterChip label="전체해제" onRemove={() => {}} isReset />);
+    expect(screen.queryByText("X")).toBeNull();
+  });
+});

src/components/common/FilterChips/FilterChip.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react";
+import classes from "./FilterChip.module.css";
+import { IconRotateClockwise } from "@tabler/icons-react";
+
+type FilterChipProps = {
+  label: string;
+  onRemove: () => void;
+  isReset?: boolean;
+};
+
+const randomBackgroundColor = () => {
+  const colors = ["#DFE2EB", "#D1E4FF", "#F3DAFF"];
+  return colors[Math.floor(Math.random() * colors.length)];
+};
+
+export function FilterChip({ label, onRemove, isReset = false }: FilterChipProps) {
+  const [bgColor, setBgColor] = useState<string>("");
+
+  useEffect(() => {
+    if (!isReset) {
+      setBgColor(randomBackgroundColor());
+    }
+  }, [isReset]);
+
+  if (isReset) {
+    return (
+      <div className={`${classes.filterChip} ${classes.resetChip}`}>
+        <>
+          <IconRotateClockwise stroke={1.8} color={"#BA1A1A"} size={16} />
+          <span className={classes.resetLabel}>{label}</span>
+        </>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes.filterChip} style={{ backgroundColor: bgColor }}>
+      <span className={classes.label}>{label}</span>
+      <span className={classes.close} onClick={onRemove}>
+        X
+      </span>
+    </div>
+  );
+}