Merge branch 'develop' into feat/#25/navCommonComponent

README.md

@@ -135,7 +135,7 @@ to be continue...
  ┣ 📂api
  ┃ ┣ 📂domain
  ┃ ┣ 📂kakaologin
- ┃ ┗ 📜index.ts
+ ┃ ┗ 📜index.tsx
  ┣ 📂common
  ┃ ┣ 📂component
  ┃ ┣ 📂util

package.json

@@ -20,6 +20,7 @@
     "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/recipes": "^0.5.5",
     "axios": "^1.7.9",
+    "clsx": "^2.1.1",
     "openapi-typescript": "^7.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

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/IcTest.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcTest = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <mask
+      id="ic_test_svg__a"
+      width={21}
+      height={20}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path
+        fill="#171719"
+        d="M7.787 2.709a.75.75 0 0 1 .75-.75h2.915a.75.75 0 0 1 0 1.5H8.537a.75.75 0 0 1-.75-.75M6.373 2.697a.75.75 0 0 1-.727.772c-.714.022-1.012.078-1.224.187l-.007.004c-.322.16-.59.43-.77.775-.11.212-.165.51-.187 1.222a.75.75 0 0 1-1.5-.046c.022-.71.074-1.32.353-1.864l.003-.004c.314-.602.8-1.109 1.426-1.423.543-.278 1.151-.329 1.86-.35a.75.75 0 0 1 .773.727M13.617 2.697a.75.75 0 0 1 .772-.727c.71.021 1.317.072 1.86.35a3.27 3.27 0 0 1 1.427 1.423l.002.004c.28.544.331 1.153.353 1.864a.75.75 0 0 1-1.5.046c-.021-.712-.078-1.01-.186-1.222a1.77 1.77 0 0 0-.77-.775l-.008-.004c-.212-.109-.51-.165-1.223-.187a.75.75 0 0 1-.727-.772M2.708 7.788a.75.75 0 0 1 .75.75v2.914a.75.75 0 0 1-1.5 0V8.538a.75.75 0 0 1 .75-.75M17.28 7.788a.75.75 0 0 1 .75.75v2.914a.75.75 0 0 1-1.5 0V8.538a.75.75 0 0 1 .75-.75M17.314 13.617a.75.75 0 0 1 .727.772c-.021.711-.073 1.32-.352 1.864l-.003.005a3.27 3.27 0 0 1-1.426 1.422c-.543.278-1.151.33-1.86.35a.75.75 0 0 1-.046-1.499c.715-.021 1.012-.078 1.224-.187l.007-.004c.322-.16.59-.429.771-.775.108-.212.164-.51.186-1.221a.75.75 0 0 1 .772-.727M2.686 13.628a.75.75 0 0 1 .772.727c.022.714.078 1.011.187 1.223l.004.008c.16.321.43.589.775.77.212.108.51.165 1.222.186a.75.75 0 1 1-.046 1.5c-.71-.022-1.32-.073-1.864-.353l-.004-.002a3.27 3.27 0 0 1-1.423-1.427c-.278-.543-.329-1.15-.35-1.86a.75.75 0 0 1 .727-.772M7.787 17.281a.75.75 0 0 1 .75-.75h2.915a.75.75 0 0 1 0 1.5H8.537a.75.75 0 0 1-.75-.75"
+      />
+    </mask>
+    <g mask="url(#ic_test_svg__a)">
+      <path fill="#222" d="M0 0h20v20H0z" />
+    </g>
+  </svg>
+);
+export default SvgIcTest;

src/asset/svg/index.ts

@@ -1,3 +1,5 @@
 export { default as IcShape } from "./IcShape";
+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/Button/index.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  button,
+  ButtonVariants,
+  icon,
+} from "@common/component/Button/styles.css.ts";
+
+interface ButtonProps {
+  label?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+type CombinedButtonProps = ButtonProps & Exclude<ButtonVariants, undefined>;
+
+/**
+ * Button 공통 컴포넌트
+ * @param label
+ * @param leftIcon 왼쪽 아이콘
+ * @param rightIcon 오른쪽 아이콘
+ * @param size 버튼 사이즈 small | medium | large
+ * @param variant 버튼 종류 solidPrimary | solidNeutral | outlinePrimary
+ * @param disabled 비활성화 여부
+ * @param onClick
+ * @constructor minjeoong
+ */
+
+export const Button = ({
+  label = "Button",
+  leftIcon,
+  rightIcon,
+  size = "medium",
+  variant = "solidPrimary",
+  disabled,
+  onClick,
+}: CombinedButtonProps) => {
+  return (
+    <button
+      className={button({ size, variant, disabled })}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {leftIcon && <div className={icon}>{leftIcon}</div>}
+      {label}
+      {rightIcon && <div className={icon}>{rightIcon}</div>}
+    </button>
+  );
+};

src/common/component/Button/styles.css.ts

@@ -0,0 +1,123 @@
+import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
+import { color, font } from "@style/styles.css.ts";
+import { style } from "@vanilla-extract/css";
+
+export const button = recipe({
+  base: [
+    font.body01,
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "0.6rem",
+      borderRadius: "8px",
+      border: "none",
+      cursor: "pointer",
+      transition: "background-color 0.3s",
+      ":focus": {
+        outline: "none",
+      },
+    },
+  ],
+  variants: {
+    size: {
+      small: {
+        height: "3.2rem",
+        padding: "0.6rem 1.4rem",
+      },
+      medium: {
+        height: "3.6rem",
+        padding: "0.8rem 2rem",
+      },
+      large: {
+        height: "4.4rem",
+        padding: "1.2rem 2.8rem",
+      },
+    },
+    variant: {
+      solidPrimary: {
+        backgroundColor: "rgb(61, 196, 245)",
+        color: "rgb(255, 255, 255)",
+        ":hover": {
+          backgroundColor: "rgb(60, 188, 234)",
+          color: "rgb(244, 244, 244)",
+        },
+        ":focus": {
+          backgroundColor: "rgb(59, 183, 228)",
+          color: "rgb(237, 237, 237)",
+        },
+        ":active": {
+          backgroundColor: "rgb(58, 177, 220)",
+          color: "rgb(58, 177, 220)",
+        },
+      },
+      solidNeutral: {
+        backgroundColor: "rgb(248, 248, 248)",
+        color: "rgb(113, 113, 113)",
+        ":hover": {
+          backgroundColor: "rgb(237, 237, 237)",
+          color: "rgb(109, 109, 109)",
+        },
+        ":focus": {
+          backgroundColor: "rgb(231, 231, 231)",
+          color: "rgb(107, 107, 107)",
+        },
+        ":active": {
+          backgroundColor: "rgb(222, 222, 222)",
+          color: "rgb(104, 104, 104)",
+        },
+      },
+      outlinePrimary: {
+        border: `0.1rem solid ${color.primary.blue500}`,
+        backgroundColor: "transparent",
+        color: color.gray.gray900,
+        ":hover": {
+          color: "rgba(33, 41, 44, 1)",
+          backgroundColor: "rgba(67, 214, 255, 0.05)",
+          border: `0.1rem solid ${color.primary.blue500}`,
+        },
+        ":active": {
+          backgroundColor: "rgba(67, 214, 255, 0.16)",
+          color: "rgba(39, 63, 69, 1)",
+          border: `0.1rem solid ${color.primary.blue500}`,
+        },
+        ":focus": {
+          backgroundColor: "rgba(67, 214, 255, 0.08)",
+          color: "rgba(33, 46, 50, 1)",
+          border: `0.1rem solid ${color.primary.blue500}`,
+        },
+      },
+    },
+    disabled: {
+      true: {
+        backgroundColor: color.gray.gray300,
+        color: color.gray.gray500,
+        pointerEvents: "none",
+      },
+      false: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variants: { disabled: true, variant: "outlinePrimary" },
+      style: {
+        backgroundColor: "transparent",
+        border: `1px solid ${color.gray.gray300}`,
+        color: color.gray.gray400,
+      },
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    variant: "solidPrimary",
+    disabled: false,
+  },
+});
+
+export type ButtonVariants = RecipeVariants<typeof button>;
+
+export const icon = style({
+  height: "2rem",
+  display: "flex",
+  alignItems: "center",
+});

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>;