Merge branch 'develop' into feat/#16/floatingbtn

.github/ISSUE_TEMPLATE/feature-issue.yml

@@ -1,5 +1,6 @@
 name: "✨ Feat"
 description: "새로운 기능 추가"
+title: "[ Feat ] "
 labels: ["feature"]
 body:
   - type: textarea
@@ -19,4 +20,4 @@ body:
   - type: textarea
     attributes:
       label: 🙋🏻 참고 자료
-      description: 참고 자료가 있다면 작성해 주세요.
+      description: 참고 자료가 있다면 작성해 주세요.

README.md

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

biome.json

@@ -18,7 +18,7 @@
     "lineWidth": 120,
     "attributePosition": "auto"
   },
-  "organizeImports": { "enabled": true },
+  "organizeImports": { "enabled": false },
   "linter": {
     "enabled": true,
     "rules": {
@@ -35,6 +35,11 @@
           "level": "warn",
           "fix": "safe"
         }
+      },
+      "style": {
+        "useImportType": {
+          "level": "off"
+        }
       }
     }
   }

package.json

@@ -17,7 +17,10 @@
   "dependencies": {
     "@tanstack/react-query": "^5.62.11",
     "@vanilla-extract/css": "^1.17.0",
+    "@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/IcoMessage.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcoMessage = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#717171"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M6.25 10h.009M10 10h.009m3.741 0h.009M10 17.5a7.5 7.5 0 1 0-6.951-4.68c.067.167.101.25.116.318.015.066.02.114.02.182 0 .069-.012.144-.037.294l-.494 2.965c-.052.31-.078.466-.03.578.042.099.12.177.219.219.112.048.267.022.578-.03l2.965-.494c.15-.025.225-.037.294-.037s.117.005.183.02c.067.015.15.049.317.117.87.353 1.823.548 2.82.548M6.667 10a.417.417 0 1 1-.834 0 .417.417 0 0 1 .834 0m3.75 0a.417.417 0 1 1-.833 0 .417.417 0 0 1 .833 0m3.75 0a.417.417 0 1 1-.833 0 .417.417 0 0 1 .833 0"
+    />
+  </svg>
+);
+export default SvgIcoMessage;

src/asset/svg/IcoSkeleton.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcoSkeleton = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={76}
+    height={77}
+    fill="none"
+    {...props}
+  >
+    <rect width={76} height={76} y={0.5} fill="#F0F0F0" rx={8} />
+  </svg>
+);
+export default SvgIcoSkeleton;

src/asset/svg/index.ts

@@ -1,3 +1,7 @@
+export { default as IcDelete } from "./IcDelete";
+export { default as IcTest } from "./IcTest";
+export { default as IcoMessage } from "./IcoMessage";
+export { default as IcoSkeleton } from "./IcoSkeleton";
 export { default as Plus } from "./Plus";
 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>
+  );
+};