Merge branch 'dev' into style/tailwind-font-기본-스타일-설정-작업

Author: junjeeong

package-lock.json

@@ -10,10 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.0.2",
+    "@tailwindcss/vite": "^4.0.3",
+    "autoprefixer": "^10.4.20",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwindcss": "^4.0.2"
+    "tailwindcss": "^4.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

package.json

@@ -0,0 +1,34 @@
+import { MouseEvent } from "react";
+
+interface PrimaryButtonProps {
+  size: "sm" | "md";
+  children: string;
+  backgroundColor?: "#5C4AE8" | "#F9E622" | "#E6E8ED";
+  disabled?: boolean;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+const PrimaryButton = ({
+  size = "sm",
+  backgroundColor = "#5C4AE8",
+  disabled = false,
+  children,
+  onClick
+}: PrimaryButtonProps) => {
+  return (
+    <button
+      className={
+        "flex justify-center items-center rounded-lg font-bold text-lg " +
+        `${size === "sm" ? "w-[159px] h-[60px]" : "w-[335px] h-[56px]"}` +
+        `${backgroundColor === "#5C4AE8" ? " text-white" : " text-[#171503]"}`
+      }
+      style={{ backgroundColor: disabled ? "#848C96" : backgroundColor }}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default PrimaryButton;

public/icon/plus_button.svg

@@ -0,0 +1,22 @@
+const StrokeBanner = () => {
+  return (
+    <div className="flex flex-col justify-center border-gray-200 px-[38px] py-6 border border-dashed rounded-lg w-[335px] h-[178px] text-center">
+      <img
+        src="/public/icon/plus_button.svg"
+        alt="친구 등록 버튼"
+        className="mx-auto"
+        width={40}
+        height={40}
+      />
+      <strong className="mt-4 font-bold text-4 text-gray-900">
+        친구 정보를 저장하고 대화할 수 있어요
+      </strong>
+      <p className="mt-2 font-light text-gray-900 text-sm">
+        로그인 시 기억하고 싶은 친구의 MBTI와 특징을 입력해서 빠르게 대화할 수
+        있어요
+      </p>
+    </div>
+  );
+};
+
+export default StrokeBanner;

src/components/PrimaryButton.tsx

@@ -0,0 +1,6 @@
+// 여러 문자열의 className을 인자로 받아 하나의 className으로 반환해주는 함수
+const cls = (...classses: (string | undefined | false)[]) => {
+  return classses.filter(Boolean).join(" ");
+};
+
+export default cls;