Merge pull request #29 from SOPT-all/feat/#20/chipCommonComponent

[Feat]칩 공통컴포넌트 구현

src/asset/svg/IcDelete.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from "react";
+
+type SvgIcDeleteProps = SVGProps<SVGSVGElement> & {
+  color?: string;
+};
+
+const SvgIcDelete = ({ color = "#14B5F0", ...props }: SvgIcDeleteProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <title>SvgIcDelete</title>
+    <path stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 7 7 17M7 7l10 10" />
+  </svg>
+);
+export default SvgIcDelete;

src/asset/svg/index.ts

@@ -1,3 +1,4 @@
+export { default as IcDelete } from "./IcDelete";
 export { default as IcTest } from "./IcTest";
 export { default as React } from "./React";
 export { default as Vite } from "./Vite";

src/common/component/Chip/Chip.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { ChipType, chipItem } from "./ChipStyle.css.ts";
+import { IcDelete } from "@asset/svg/index";
+
+interface ChipProps {
+  label: string;
+  icon?: boolean;
+  color: "blue" | "gray";
+  onClick: () => void;
+}
+
+type CombinedChipProps = ChipProps & Exclude<ChipType, undefined>;
+
+const Chip = ({ label, icon = false, color = "blue", onClick }: CombinedChipProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  const handleClick = () => {
+    if (color === "gray" || size === "large") return;
+    setIsActive(!isActive);
+    onClick();
+  };
+
+  const size = icon ? "large" : "small";
+
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+    <div
+      className={chipItem({ size, color, active: isActive })} // 스타일 적용
+      onClick={handleClick}
+    >
+      {label}
+      {icon && (
+        <IcDelete
+          color={color === "gray" ? "#717171" : "#14B5F0"}
+          style={{
+            position: "relative",
+            bottom: "1.3px",
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Chip;

src/common/component/Chip/ChipStyle.css.ts

@@ -0,0 +1,59 @@
+import { color, font } from "@style/styles.css.ts";
+import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
+
+export const chipItem = recipe({
+  base: [
+    font.body01,
+    {
+      display: "flex",
+      padding: "0.8rem 1.2rem",
+      justifyContent: "space-between",
+      alignItems: "center",
+
+      borderRadius: "9.9rem",
+      // background: color.gray.gray000,
+      color: color.primary.blue700,
+      border: `0.1rem solid ${color.primary.blue500}`,
+    },
+  ],
+
+  variants: {
+    size: {
+      small: {
+        width: "5.8rem",
+        height: "3.6rem",
+      },
+      large: {
+        width: "8.2rem",
+        height: "4rem",
+      },
+    },
+
+    color: {
+      blue: {
+        color: color.primary.blue700,
+        border: `0.1rem solid ${color.primary.blue500}`,
+      },
+      gray: {
+        color: color.gray.gray700,
+        border: `0.1rem solid ${color.gray.gray700}`,
+      },
+    },
+
+    active: {
+      false: {
+        background: color.gray.gray000,
+      },
+      true: {
+        backgroundColor: "rgba(67, 214, 255, 0.16)",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "small",
+    color: "blue",
+    active: false,
+  },
+});
+
+export type ChipType = RecipeVariants<typeof chipItem>;

src/page/main/index/Main.tsx

@@ -1,127 +1,5 @@
-import Divider from "@common/component/Divider/Divider";
-import Spacing from "@common/component/Spacing/Spacing";
-
-/*
-localhost:5173/main
-*/
-import React, { ChangeEvent, useState } from "react";
-import { Button } from "@common/component/Button";
-import { IcTest } from "@asset/svg";
-
 const Main = () => {
-
-  return (
-    <>
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button
-          label="Button"
-          size="small"
-          variant="solidPrimary"
-          disabled={true}
-        />
-        <Button
-          label="Button"
-          size="small"
-          variant="solidPrimary"
-          disabled={false}
-        />
-        <Button
-          label="Button"
-          size="medium"
-          variant="solidPrimary"
-          disabled={false}
-        />
-        <Button
-          label="Button"
-          size="large"
-          variant="solidPrimary"
-          disabled={false}
-        />
-      </div>
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button
-          label="Button"
-          size="small"
-          variant="solidNeutral"
-          disabled={true}
-        />
-        <Button
-          label="Button"
-          size="small"
-          variant="solidNeutral"
-          disabled={false}
-        />
-        <Button
-          label="Button"
-          size="medium"
-          variant="solidNeutral"
-          disabled={false}
-        />
-        <Button
-          label="Button"
-          size="large"
-          variant="solidNeutral"
-          disabled={false}
-        />
-      </div>
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button
-          label="Button"
-          size="small"
-          variant="outlinePrimary"
-          disabled={true}
-        />
-        <Button
-          label="Button"
-          size="small"
-          variant="outlinePrimary"
-          disabled={false}
-        />
-        <Button
-          label="Button"
-          size="medium"
-          variant="outlinePrimary"
-          disabled={false}
-        />
-        <Button
-          label="Button"
-          size="large"
-          variant="outlinePrimary"
-          disabled={false}
-        />
-      </div>
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button
-          label="Button"
-          leftIcon={<IcTest />}
-          size="medium"
-          variant="solidPrimary"
-          disabled={false}
-        />
-        <Button
-          label="Button"
-          rightIcon={<IcTest />}
-          size="medium"
-          variant="solidPrimary"
-          disabled={false}
-        />
-        <Button
-          label="Button"
-          leftIcon={<IcTest />}
-          rightIcon={<IcTest />}
-          size="medium"
-          variant="solidPrimary"
-          disabled={false}
-        />
-      </div>
-      <span>main</span>
-      <Spacing marginBottom="10" />
-      <Divider size="small" />
-      <Spacing marginBottom="10" />
-      <Divider />
-    </>
-
-  );
+  return <div>메인</div>;
 };
 
 export default Main;