style: 색상 템플릿 추가 및 commonButton 일부 적용

Author: NacreousCloud

pages/test/modals-test.tsx

@@ -1,13 +1,15 @@
 import { ThumbnailSelectorProps } from "modalContent/ThumbnailSelector";
 import Image from "next/image";
 import { useState } from "react";
+import { Button } from "signup";
+import CommonButton from "@shared/components/CommonButton";
 import useModal from "../../src/shared/hook/useModal";
 
 const AlertTest = () => {
   const { openAlert, openConfirm, openModal } = useModal();
   const [selectedId, setSelectedId] = useState<string>();
   const handleAlert = () => {
-    openAlert({ text: "test\nasdf", isHeaderCloseBtn: true });
+    openAlert({ text: "testasdf", isHeaderCloseBtn: true });
   };
   const handleConfirm = () => {
     openConfirm({
@@ -34,37 +36,25 @@ const AlertTest = () => {
   return (
     <div>
       Enter
-      <button
-        // 테스트용 버튼 스타일 클래스
-        className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50"
-        onClick={handleAlert}
-      >
+      <CommonButton variant={"accept"} onClick={handleAlert}>
         Alert!
-      </button>
-      <button
-        className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50"
-        onClick={handleConfirm}
-      >
+      </CommonButton>
+      <CommonButton variant={"purple"} onClick={handleConfirm}>
         Confirm!
-      </button>
-      <div>
-        <button
-          className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50"
-          onClick={handleModal}
-        >
-          Modal!
-        </button>
-        <p>and selected image : </p>
-        {selectedId && (
-          <Image
-            src={`https://images.pexels.com/photos/${selectedId}/pexels-photo-${selectedId}.jpeg`}
-            width={350}
-            height={350}
-            objectFit="cover"
-            alt="selected image"
-          />
-        )}
-      </div>
+      </CommonButton>
+      <CommonButton variant={"accept"} onClick={handleModal}>
+        Modal!
+      </CommonButton>
+      <p>and selected image : </p>
+      {selectedId && (
+        <Image
+          src={`https://images.pexels.com/photos/${selectedId}/pexels-photo-${selectedId}.jpeg`}
+          width={350}
+          height={350}
+          objectFit="cover"
+          alt="selected image"
+        />
+      )}
     </div>
   );
 };

src/shared/components/CommonButton.tsx

@@ -1,13 +1,29 @@
 interface CommonButtonProps
   extends Partial<React.ButtonHTMLAttributes<HTMLButtonElement>> {
-  variant: "primary" | "secondary" | "danger";
+  variant:
+    | "accept"
+    | "warn"
+    | "danger"
+    | "pink"
+    | "orange"
+    | "yellow"
+    | "purple"
+    | "gray"
+    | "black";
+
   children: React.ReactNode;
 }
 export type ButtonVariants = keyof typeof BUTTON_VARIANTS;
 const BUTTON_VARIANTS = {
-  primary: "bg-b-primary text-white disabled:bg-b-primary-disabled",
-  secondary: "bg-b-secondary text-white disabled:bg-b-secondary-disabled",
-  danger: "bg-b-danger text-white disabled:bg-b-danger-disabled",
+  accept: "bg-c-accept text-white disabled:bg-c-accept-disabled",
+  warn: "bg-c-warn text-white disabled:bg-c-warn-disabled",
+  danger: "bg-c-danger text-white disabled:bg-c-danger-disabled",
+  pink: "bg-c-pink text-white disabled:bg-c-pink-disabled",
+  orange: "bg-c-orange text-white disabled:bg-c-orange-disabled",
+  yellow: "bg-c-yellow text-white disabled:bg-c-yellow-disabled",
+  purple: "bg-c-purple text-white disabled:bg-c-purple-disabled",
+  gray: "bg-c-gray text-white disabled:bg-c-gray-disabled",
+  black: "bg-c-black text-white",
 };
 
 const CommonButton = (props: CommonButtonProps) => {

src/shared/modal/Alert.tsx

@@ -51,7 +51,7 @@ const Alert = () => {
               )}
             </div>
 
-            <CommonButton variant={okVariant ?? "primary"} onClick={handleOk}>
+            <CommonButton variant={okVariant ?? "accept"} onClick={handleOk}>
               {okText ?? "확인"}
             </CommonButton>
           </div>

src/shared/modal/Confirm.tsx

@@ -58,13 +58,10 @@ const Confirm = () => {
               )}
             </div>
             <div className="flex gap-2">
-              <CommonButton
-                variant={noVariant ?? "secondary"}
-                onClick={handleNo}
-              >
+              <CommonButton variant={noVariant ?? "warn"} onClick={handleNo}>
                 {noText ?? "취소"}
               </CommonButton>
-              <CommonButton variant={okVariant ?? "primary"} onClick={handleOk}>
+              <CommonButton variant={okVariant ?? "accept"} onClick={handleOk}>
                 {okText ?? "확인"}
               </CommonButton>
             </div>

tailwind.config.js

@@ -7,12 +7,18 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        "b-primary": "#00D179",
-        "b-primary-disabled": "#00D17975",
-        "b-secondary": "#FACD49",
-        "b-secondary-disabled": "#FACD4975",
-        "b-danger": "#FF2330",
-        "b-danger-disabled": "#FFA4A475",
+        "c-accept": "#00D179",
+        "c-accept-disabled": "#00D17975",
+        "c-warn": "#FACD49",
+        "c-warn-disabled": "#FACD4975",
+        "c-danger": "#FF2330",
+        "c-danger-disabled": "#FFA4A475",
+        "c-pink": "#F864A1",
+        "c-orange": "#F5A200",
+        "c-yellow": "#FACD49",
+        "c-purple": "#A564F8",
+        "c-gray": "#BABABA",
+        "c-black": "#222222",
       },
       backgroundImage: {
         stayLoggedIn: "url(/images/samples/StayLoggedIn.svg)",