[REFACTOR] 공용 버튼 컴포넌트 재사용성 향상

package.json

@@ -25,6 +25,7 @@
     "react-router-dom": "^7.11.0",
     "react-spinners": "^0.17.0",
     "swiper": "^12.0.3",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.1.18",
     "zod": "^4.2.1",
     "zustand": "^5.0.10"

src/components/common/Button.tsx

@@ -1,30 +1,47 @@
-import Pencil from "../../assets/icons/pencil-primary-500.svg";
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
 
-interface ButtonProps {
-  onClick?: () => void;
-  text: string;
-  type: "button" | "submit" | "reset";
-  disabled?: boolean;
-  bgColor?: "primary" | "white";
+interface ButtonType extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  size?: "Btn_L" | "Btn_M" | "Btn_S";
+  variant?: "primary" | "gray" | "transparent";
 }
 
-export default function Button({
-  onClick,
-  text,
-  type,
-  disabled,
-  bgColor = "primary",
-}: ButtonProps) {
-  return (
-    <button
-      className={`w-[343px] px-[10px] py-[16px] flex items-center justify-center gap-[10px] rounded-xl font-semibold text-[20px] leading-[22px] text-center cursor-pointer
-        ${bgColor == "primary" ? "bg-primary-700 text-white" : "bg-white text-primary-500 border border-primary-500"}`}
-      onClick={onClick}
-      type={type}
-      disabled={disabled}
-    >
-      {bgColor === "white" && <img src={Pencil} />}
-      {text}
-    </button>
-  );
-}
+const SIZES = {
+  Btn_L: "px-[10px] py-[16px]",
+  Btn_S: "px-[24px] py-[6px]",
+  Btn_M: "px-[10px] py-[16px]", // padding을 className에 직접 지정 가능
+};
+const VARIANTS = {
+  primary: "bg-primary-700 text-white",
+  gray: "bg-gray-100",
+  transparent: "bg-transparent border-1 border-primary-700",
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonType>(
+  (
+    { children, size = "Btn_L", variant = "primary", className, ...props },
+    ref,
+  ) => {
+    const sizeClass = SIZES[size];
+    const variantClass = VARIANTS[variant];
+    const disabledClass = props.disabled ? "opacity-50 cursor-not-allowed" : "";
+    return (
+      <button
+        ref={ref}
+        className={twMerge(
+          "rounded-xl flex justify-center items-center transition-colors",
+          sizeClass,
+          variantClass,
+          disabledClass,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+Button.displayName = "Button";
+export default Button;

src/components/mypage/GetDateRangeModal.tsx

@@ -143,7 +143,15 @@ export default function GetDateRangeModal({
             <DateBlock date={to} />
           </div>
           <div className="pt-[25px]">
-            <Button text={"적용"} type="button" onClick={handleFinalApply} />
+            <Button
+              size="Btn_L"
+              variant="primary"
+              type="button"
+              className="w-[343px]"
+              onClick={handleFinalApply}
+            >
+              <span className="text-xl font-semibold leading-[22px]">적용</span>
+            </Button>
           </div>
         </div>
       </div>
@@ -163,7 +171,17 @@ export default function GetDateRangeModal({
               onSelect={handleSelect}
             />
             <div className="pt-4">
-              <Button text="선택" type="button" onClick={handleApplyDate} />
+              <Button
+                size="Btn_L"
+                variant="primary"
+                type="button"
+                className="w-[343px]"
+                onClick={handleApplyDate}
+              >
+                <span className="text-xl font-semibold leading-[22px]">
+                  선택
+                </span>
+              </Button>
             </div>
           </div>
         </div>

src/components/onboarding/ThirdStep.tsx

@@ -24,12 +24,14 @@ export default function ThirdStep() {
         </div>
         <div className="pt-[50px] pb-8 flex justify-center">
           <Button
-            text={"시작"}
+            size="Btn_L"
+            variant="primary"
+            onClick={() => navigate("/agreement")}
             type="button"
-            onClick={() => {
-              navigate("../agreement");
-            }}
-          />
+            className="w-full"
+          >
+            <span className="text-xl font-semibold leading-[22px]">시작</span>
+          </Button>
         </div>
       </div>
     </>

src/components/profile/ProfileDataForm.tsx

@@ -256,10 +256,16 @@ export default function ProfileDataForm({
 
       <div className="pt-[5px] pb-10">
         <Button
-          text={profileMutation.isPending ? "처리 중..." : "완료"}
+          size="Btn_L"
+          variant="primary"
           type="submit"
+          className="w-[343px]"
           disabled={profileMutation.isPending}
-        />
+        >
+          <span className="text-xl font-semibold leading-[22px]">
+            {profileMutation.isPending ? "처리 중..." : "완료"}
+          </span>
+        </Button>
       </div>
     </form>
   );

src/pages/auth/terms-agreement-page.tsx

@@ -122,13 +122,17 @@ export default function TermsAgreementPage() {
           />
         </div>
       </div>
-      <div className="fixed bottom-0 left-1/2 -translate-x-1/2 flex justify-center pb-10">
+      <div className="flex justify-center pt-[159px]">
         <Button
-          text={`다음`}
+          size="Btn_L"
+          variant="primary"
+          onClick={handleSubmit}
           type="button"
+          className="w-[343px]"
           disabled={!isValid || isAgreeing}
-          onClick={handleSubmit}
-        />
+        >
+          <span className="text-xl font-semibold leading-[22px]">다음</span>
+        </Button>
       </div>
     </div>
   );

src/pages/family/allergies-search-page.tsx

@@ -60,7 +60,15 @@ export default function AllergiesSearchPage() {
             </div>
           </div>
           <div className="pt-[420px]">
-            <Button text={"완료"} type="submit" onClick={handleComplete} />
+            <Button
+              size="Btn_L"
+              variant="primary"
+              onClick={handleComplete}
+              type="button"
+              className="w-[343px]"
+            >
+              <span className="text-xl font-semibold leading-[22px]">완료</span>
+            </Button>
           </div>
         </div>
       </div>

src/pages/family/family-create-page.tsx

@@ -120,11 +120,15 @@ export default function FamilyCreatePage() {
           </div>
           <div className="fixed bottom-0 left-1/2 -translate-x-1/2 pb-10">
             <Button
-              text="다음"
-              type="submit"
+              size="Btn_L"
+              variant="primary"
               onClick={handleSubmit}
+              type="submit"
+              className="w-[343px]"
               disabled={isCreating}
-            />
+            >
+              <span className="text-xl font-semibold leading-[22px]">다음</span>
+            </Button>
           </div>
         </div>
       </div>

src/pages/family/family-invite-page.tsx

@@ -103,13 +103,17 @@ export default function FamilyInvitePage() {
           </div>
           <div className="pt-[156px]">
             <Button
-              text="다음"
-              type="submit"
+              size="Btn_L"
+              variant="primary"
               onClick={() => {
                 navigate("/");
               }}
+              type="button"
+              className="w-[343px]"
               disabled={isInviting}
-            />
+            >
+              <span className="text-xl font-semibold leading-[22px]">다음</span>
+            </Button>
           </div>
         </div>
       </div>

src/pages/meal-plan/meal-plan-create-page.tsx

@@ -112,10 +112,16 @@ const MealPlanCreatePage = () => {
                 </div>
                 <div className="fixed bottom-0 left-1/2 -translate-x-1/2 flex justify-center pb-10">
                   <Button
-                    text="식단 생성"
+                    size="Btn_L"
+                    variant="primary"
                     type="button"
-                    onClick={() => handleCreate()}
-                  />
+                    className="w-[343px]"
+                    onClick={handleCreate}
+                  >
+                    <span className="text-xl font-semibold leading-[22px]">
+                      식단 생성
+                    </span>
+                  </Button>
                 </div>
               </div>
             </>

src/pages/meal-plan/meal-plan-edit-page.tsx

@@ -424,16 +424,16 @@ function BottomSheet({
 
       <div className="fixed bottom-0 left-1/2 -translate-x-1/2 flex justify-center pb-10">
         <Button
-          text={isOpen ? "바꾸기" : "수정완료"}
+          size="Btn_L"
+          variant="primary"
           type="button"
-          onClick={() => {
-            if (isOpen) {
-              handleChange();
-            } else {
-              setIsModalOpen(true);
-            }
-          }}
-        />
+          className="w-[343px]"
+          onClick={handleChange}
+        >
+          <span className="text-xl font-semibold leading-[22px]">
+            {isOpen ? "바꾸기" : "수정완료"}
+          </span>
+        </Button>
       </div>
     </div>
   );

src/pages/meal-plan/meal-plan-page.tsx

@@ -171,20 +171,15 @@ function TodayMealTab({ data }: { data: TodayMeal }) {
       </div>
       {!data.isReviewed && (
         <div className="pt-6">
-          {!isDone ? (
-            <Button
-              type="button"
-              text="식사 완료"
-              onClick={() => setIsDone(true)}
-            />
-          ) : (
-            <Button
-              type="button"
-              text="리뷰 작성"
-              bgColor="white"
-              onClick={() => setIsOpen(true)}
-            />
-          )}
+          <Button
+            onClick={isDone ? () => setIsOpen(true) : () => setIsDone(true)}
+            size="Btn_L"
+            variant="primary"
+            type="button"
+            className="w-[343px]"
+          >
+            {isDone ? "리뷰 작성" : "식사 완료"}
+          </Button>
         </div>
       )}
       <div className="pt-11 pb-29">
@@ -409,8 +404,10 @@ function ReviewModal({ recipeId, onClick, type }: ReviewModalProps) {
         </div>
         <div className="w-full p-[10px] flex justify-center">
           <Button
+            size="Btn_L"
+            variant="primary"
             type="button"
-            text="등록"
+            className="w-[343px]"
             onClick={() => {
               const reviewData: createReview = {
                 recipeId,
@@ -421,7 +418,9 @@ function ReviewModal({ recipeId, onClick, type }: ReviewModalProps) {
               }
               handleSubmitReview(reviewData);
             }}
-          />
+          >
+            <span className="text-xl font-semibold leading-[22px]">등록</span>
+          </Button>
         </div>
       </div>
     </div>