From f61cf0afa712aee42824f59afb485c390b796d15 Mon Sep 17 00:00:00 2001
From: CHOI GIHOAWN <rlghks3004@gmail.com>
Date: Tue, 8 Oct 2024 14:07:46 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20cta=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=9D=B8=ED=84=B0=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=B6=94?=
 =?UTF-8?q?=EC=83=81=ED=99=94=20=EC=88=98=EC=A4=80=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addPlant/NotificationToggle.tsx           |  1 -
 .../addPlant/NotificationToggleList.tsx       |  8 +-------
 .../addPlant/PlantLocationBadgeList.tsx       |  9 ++-------
 ...4\353\254\274\354\244\200\353\202\240.tsx" |  4 +---
 ...4\353\243\214\354\244\200\353\202\240.tsx" |  8 +-------
 ...4\354\236\221\355\225\234\353\202\240.tsx" | 20 ++++++++-----------
 src/components/common/CTAButton/index.tsx     | 18 ++++++++---------
 .../common/SegmentControl/index.tsx           |  3 ---
 src/components/myPlant/DeleteConfirmation.tsx |  4 ++--
 src/components/myPlant/LocationInput.tsx      |  9 +--------
 src/components/profile/ModifyNickname.tsx     |  8 +-------
 src/components/profile/UseInformation.tsx     | 13 ++++--------
 .../searchPlant/SearchedPlantList.tsx         |  1 -
 src/funnel/register/CompleteFunnel.tsx        |  6 +-----
 src/funnel/register/LocationFunnel.tsx        |  8 +-------
 src/funnel/register/NicknameFunnel.tsx        |  7 +------
 .../register/NotificationTimeFunnel.tsx       | 11 ++--------
 src/hooks/useNotification.tsx                 |  3 +--
 src/pages/AddPlantPage.tsx                    |  3 +--
 src/pages/ErrorPage.tsx                       |  2 +-
 src/pages/MyPlantEdit.tsx                     |  2 +-
 src/pages/MyPlantFeedPage.tsx                 |  4 ++--
 22 files changed, 41 insertions(+), 111 deletions(-)

diff --git a/src/components/addPlant/NotificationToggle.tsx b/src/components/addPlant/NotificationToggle.tsx
index 8e6d6a3..fdb7511 100644
--- a/src/components/addPlant/NotificationToggle.tsx
+++ b/src/components/addPlant/NotificationToggle.tsx
@@ -97,7 +97,6 @@ const NotificationToggle = ({
               setIsOpen(false);
             }}
             text={'선택하기'}
-            className={'bg-BloomingGreen500 text-white'}
           />,
         ]}
         isOpen={isOpen}
diff --git a/src/components/addPlant/NotificationToggleList.tsx b/src/components/addPlant/NotificationToggleList.tsx
index 3b098eb..f382b80 100644
--- a/src/components/addPlant/NotificationToggleList.tsx
+++ b/src/components/addPlant/NotificationToggleList.tsx
@@ -125,13 +125,7 @@ const NotificationToggleList = ({
       <CenterBottomSheet
         title={'주기를 입력하지 않으면 추천값이 사용되어요.'}
         content={<></>}
-        actions={[
-          <CTAButton
-            className={'bg-BloomingGreen500'}
-            text={'확인'}
-            onClick={() => setBottomSheetOpen(false)}
-          />,
-        ]}
+        actions={[<CTAButton text={'확인'} onClick={() => setBottomSheetOpen(false)} />]}
         isOpen={bottomSheetOpen}
         onOpenChange={setBottomSheetOpen}
       />
diff --git a/src/components/addPlant/PlantLocationBadgeList.tsx b/src/components/addPlant/PlantLocationBadgeList.tsx
index ce8ae9a..4dfcc88 100644
--- a/src/components/addPlant/PlantLocationBadgeList.tsx
+++ b/src/components/addPlant/PlantLocationBadgeList.tsx
@@ -22,8 +22,6 @@ import IconPlusMono from '@/assets/icon/plus-dark-gray.svg?react';
 
 import LocationBadge from '@/components/addPlant/LocationBadge.tsx';
 import { PlantLocation } from '@/types/plantLocation';
-
-import { cn } from '@/utils.ts';
 import { isFalsy } from '@/utils/validation/isFalsy.ts';
 
 interface PlantLocationBadgeListProps {
@@ -189,9 +187,6 @@ const PlantLocationBadgeList = ({
               text={'등록하기'}
               type={'button'}
               onClick={addNewLocationHandler}
-              className={cn(
-                isFalsy(newLocationName) || isError ? 'bg-Gray300' : 'bg-BloomingGreen500',
-              )}
               disabled={isFalsy(newLocationName) || isError}
             />,
           ]}
@@ -209,13 +204,13 @@ const PlantLocationBadgeList = ({
               text={'취소'}
               type={'button'}
               onClick={closeDeleteModalHandler}
-              className={'bg-Gray100 text-Gray800'}
+              variant={'ghost'}
             />,
             <CTAButton
               text={'삭제'}
               type={'button'}
               onClick={() => deleteLocationHandler()}
-              className={'bg-Red500'}
+              variant={'warning'}
             />,
           ]}
           isOpen={isOpenDeleteModal}
diff --git "a/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\254\274\354\244\200\353\202\240.tsx" "b/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\254\274\354\244\200\353\202\240.tsx"
index e8f72c6..404ac6a 100644
--- "a/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\254\274\354\244\200\353\202\240.tsx"
+++ "b/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\254\274\354\244\200\353\202\240.tsx"
@@ -71,9 +71,7 @@ const 마지막으로물준날 = ({ onClick, value, type = 'simple' }: 마지막
             />
           )
         }
-        actions={[
-          <CTAButton text={'선택하기'} onClick={onComplete} className={'bg-BloomingGreen500'} />,
-        ]}
+        actions={[<CTAButton text={'선택하기'} onClick={onComplete} />]}
         isOpen={open}
         onClose={onClose}
       />
diff --git "a/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\271\204\353\243\214\354\244\200\353\202\240.tsx" "b/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\271\204\353\243\214\354\244\200\353\202\240.tsx"
index dd9e82d..ff9ba58 100644
--- "a/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\271\204\353\243\214\354\244\200\353\202\240.tsx"
+++ "b/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\271\204\353\243\214\354\244\200\353\202\240.tsx"
@@ -67,13 +67,7 @@ const 마지막으로비료준날 = ({ onClick, value, type = 'simple' }: 마지
             />
           )
         }
-        actions={[
-          <CTAButton
-            text={'선택하기'}
-            className={'bg-BloomingGreen500'}
-            onClick={() => onComplete()}
-          />,
-        ]}
+        actions={[<CTAButton text={'선택하기'} onClick={() => onComplete()} />]}
         isOpen={openBottomSheet}
         onClose={() => setOpenBottomSheet(false)}
       />
diff --git "a/src/components/addPlant/\355\225\250\352\273\230\355\225\230\352\270\260\354\213\234\354\236\221\355\225\234\353\202\240.tsx" "b/src/components/addPlant/\355\225\250\352\273\230\355\225\230\352\270\260\354\213\234\354\236\221\355\225\234\353\202\240.tsx"
index 5cfcaa4..c60129a 100644
--- "a/src/components/addPlant/\355\225\250\352\273\230\355\225\230\352\270\260\354\213\234\354\236\221\355\225\234\353\202\240.tsx"
+++ "b/src/components/addPlant/\355\225\250\352\273\230\355\225\230\352\270\260\354\213\234\354\236\221\355\225\234\353\202\240.tsx"
@@ -28,6 +28,13 @@ const 함께하기시작한날 = ({ onClick, value }: 함께하기시작한날Pr
     setOpen(false);
   };
 
+  const handleButtonClick = () => {
+    onClick(
+      `${year}-${prefixWithZero(month)}-${prefixWithZero(day)}` as `${number}-${number}-${number}`,
+    );
+    onClose();
+  };
+
   return (
     <>
       <TextField
@@ -51,18 +58,7 @@ const 함께하기시작한날 = ({ onClick, value }: 함께하기시작한날Pr
             endDate={new Date()}
           />
         }
-        actions={[
-          <CTAButton
-            onClick={() => {
-              onClick(
-                `${year}-${prefixWithZero(month)}-${prefixWithZero(day)}` as `${number}-${number}-${number}`,
-              );
-              onClose();
-            }}
-            text={'선택하기'}
-            className={'bg-BloomingGreen500'}
-          />,
-        ]}
+        actions={[<CTAButton onClick={handleButtonClick} text={'선택하기'} />]}
         isOpen={open}
         onClose={onClose}
       />
diff --git a/src/components/common/CTAButton/index.tsx b/src/components/common/CTAButton/index.tsx
index 8475b57..82e8d5a 100644
--- a/src/components/common/CTAButton/index.tsx
+++ b/src/components/common/CTAButton/index.tsx
@@ -2,24 +2,24 @@ import { Button, ButtonProps } from '@/components/ui/button.tsx';
 import { cn } from '@/utils.ts';
 import { ReactNode } from 'react';
 
-interface CTAButtonProps extends ButtonProps {
-  color?: keyof typeof CTAButtonColor;
+interface CTAButtonProps extends Omit<ButtonProps, 'variant'> {
   text: string | ReactNode;
   icon?: string | ReactNode;
+  variant?: 'primary' | 'warning' | 'ghost';
 }
 
-const CTAButtonColor = {
-  disabled: 'bg-gray-400',
-  normal: 'bg-gray-700',
-  active: 'bg-gray-800',
+const CTAButtonColorVariants = {
+  primary: 'bg-BloomingGreen500 text-white disabled:bg-Gray300',
+  warning: 'bg-Red500 text-white disabled:bg-Gray300',
+  ghost: 'bg-Gray300 text-Gray800 disabled:bg-Gray100',
 };
 
-const CTAButton = ({ text, color = 'normal', className, icon, ...rest }: CTAButtonProps) => {
+const CTAButton = ({ text, className, icon, variant = 'primary', ...rest }: CTAButtonProps) => {
   return (
     <Button
       className={cn(
-        'text-regular-body py-[18px] px-[28px] text-white font-semibold rounded-[16px] w-full h-[54px]',
-        CTAButtonColor[color],
+        'text-regular-body py-[18px] px-[28px] font-semibold rounded-[16px] w-full h-[54px]',
+        CTAButtonColorVariants[variant],
         className,
       )}
       {...rest}
diff --git a/src/components/common/SegmentControl/index.tsx b/src/components/common/SegmentControl/index.tsx
index dbcba4c..3e2820b 100644
--- a/src/components/common/SegmentControl/index.tsx
+++ b/src/components/common/SegmentControl/index.tsx
@@ -3,8 +3,6 @@ import CTAButton from '@/components/common/CTAButton';
 import TextFieldV2 from '@/components/common/TextFieldV2';
 
 import CenterBottomSheet from '@/components/common/CenterBottomSheet';
-
-import { cn } from '@/utils.ts';
 import { useAddNewLocation } from '@/queries/useAddNewLocation.ts';
 
 interface Segment {
@@ -122,7 +120,6 @@ const SegmentControl: React.FC<SegmentControlProps> = ({ segments, onSegmentChan
             text={'등록하기'}
             type={'button'}
             onClick={handleAddNewLocation}
-            className={cn(!newLocationName || isError ? 'bg-Gray300' : 'bg-BloomingGreen500')}
             disabled={!newLocationName || isError}
           />,
         ]}
diff --git a/src/components/myPlant/DeleteConfirmation.tsx b/src/components/myPlant/DeleteConfirmation.tsx
index e9ed23d..5f2482d 100644
--- a/src/components/myPlant/DeleteConfirmation.tsx
+++ b/src/components/myPlant/DeleteConfirmation.tsx
@@ -45,8 +45,8 @@ const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
       content={<></>}
       actionDirection={'row'}
       actions={[
-        <CTAButton text={'취소'} onClick={onClose} className={'bg-Gray100 text-Gray800'} />,
-        <CTAButton text={'삭제'} onClick={handleDelete} className={'bg-Red500'} />,
+        <CTAButton text={'취소'} onClick={onClose} variant={'ghost'} />,
+        <CTAButton text={'삭제'} onClick={handleDelete} variant={'warning'} />,
       ]}
       isOpen={isOpen}
       onOpenChange={onOpenChange}
diff --git a/src/components/myPlant/LocationInput.tsx b/src/components/myPlant/LocationInput.tsx
index d9ff009..99e47e7 100644
--- a/src/components/myPlant/LocationInput.tsx
+++ b/src/components/myPlant/LocationInput.tsx
@@ -46,14 +46,7 @@ const LocationInput: React.FC<LocationInputProps> = ({
           errorMessage={'이름은 최대 네글자까지 입력이 가능해요.'}
         />
       }
-      actions={[
-        <CTAButton
-          text={'변경'}
-          className={'bg-BloomingGreen500 disabled:bg-Gray300'}
-          onClick={handleLocationChange}
-          disabled={isError}
-        />,
-      ]}
+      actions={[<CTAButton text={'변경'} onClick={handleLocationChange} disabled={isError} />]}
       isOpen={isOpen}
       onOpenChange={onOpenChange}
     />
diff --git a/src/components/profile/ModifyNickname.tsx b/src/components/profile/ModifyNickname.tsx
index 222381b..5eaf221 100644
--- a/src/components/profile/ModifyNickname.tsx
+++ b/src/components/profile/ModifyNickname.tsx
@@ -84,13 +84,7 @@ const Nickname: React.FC<NicknameProps> = ({ initialNickname }) => {
       </div>
 
       <div className="px-[24px] pb-[10px]">
-        <CTAButton
-          type="button"
-          onClick={handleSubmit}
-          text="확인"
-          className={'w-full bg-BloomingGreen500 disabled:bg-Gray300'}
-          disabled={isError}
-        />
+        <CTAButton type="button" onClick={handleSubmit} text="확인" disabled={isError} />
       </div>
     </div>
   );
diff --git a/src/components/profile/UseInformation.tsx b/src/components/profile/UseInformation.tsx
index e3ab4c9..0c4646e 100644
--- a/src/components/profile/UseInformation.tsx
+++ b/src/components/profile/UseInformation.tsx
@@ -118,13 +118,13 @@ const UseInformation: React.FC = () => {
             text={'취소'}
             type={'button'}
             onClick={() => setIsOpenDeleteModal(false)}
-            className={'bg-Gray100 text-Gray800'}
+            variant={'ghost'}
           />,
           <CTAButton
             text={'탈퇴하기'}
             type={'button'}
             onClick={deleteUserHandler}
-            className={'bg-Red500'}
+            variant={'warning'}
           />,
         ]}
         isOpen={isOpenDeleteModal}
@@ -141,14 +141,9 @@ const UseInformation: React.FC = () => {
             text={'취소'}
             type={'button'}
             onClick={() => setIsOpenLogoutModal(false)}
-            className={'bg-Gray100 text-Gray800'}
-          />,
-          <CTAButton
-            text={'로그아웃'}
-            type={'button'}
-            onClick={logoutHandler}
-            className={'bg-BloomingGreen500'}
+            variant={'ghost'}
           />,
+          <CTAButton text={'로그아웃'} type={'button'} onClick={logoutHandler} />,
         ]}
         isOpen={isOpenLogoutModal}
         onOpenChange={setIsOpenLogoutModal}
diff --git a/src/components/searchPlant/SearchedPlantList.tsx b/src/components/searchPlant/SearchedPlantList.tsx
index 973d1d0..f031c8d 100644
--- a/src/components/searchPlant/SearchedPlantList.tsx
+++ b/src/components/searchPlant/SearchedPlantList.tsx
@@ -83,7 +83,6 @@ const SearchedPlantList = ({ query, onClose }: SearchedPlantListProps) => {
             <CTAButton
               text={'등록'}
               type={'button'}
-              className={'bg-BloomingGreen500 disabled:bg-Gray500'}
               disabled={customPlant === ''}
               onClick={() => onClick(customPlant)}
             />,
diff --git a/src/funnel/register/CompleteFunnel.tsx b/src/funnel/register/CompleteFunnel.tsx
index 19b9f27..92c1256 100644
--- a/src/funnel/register/CompleteFunnel.tsx
+++ b/src/funnel/register/CompleteFunnel.tsx
@@ -21,11 +21,7 @@ const CompleteFunnel = ({ onSubmit }: CompleteFunnelProps) => {
         <HeightBox height={'30px'} />
       </main>
 
-      <CTAButton
-        text={'블루밍 시작하기'}
-        className={'bg-BloomingGreen500'}
-        onClick={() => onSubmit()}
-      />
+      <CTAButton text={'블루밍 시작하기'} onClick={() => onSubmit()} />
       <HeightBox height={'30px'} />
     </Screen>
   );
diff --git a/src/funnel/register/LocationFunnel.tsx b/src/funnel/register/LocationFunnel.tsx
index 18c37af..e436c7f 100644
--- a/src/funnel/register/LocationFunnel.tsx
+++ b/src/funnel/register/LocationFunnel.tsx
@@ -5,7 +5,6 @@ import HeightBox from '@/components/common/HeightBox';
 import RegisterFunnelTitle from '@/components/register/RegisterFunnelTitle.tsx';
 import TextField from '@/components/common/TextField';
 import CTAButton from '@/components/common/CTAButton';
-import { cn } from '@/utils.ts';
 import { ChangeEvent, Suspense, useState } from 'react';
 import { regions } from '@/mocks/mockDatas/regions.ts';
 import { RegionList } from '@/components/register/RegionList.tsx';
@@ -72,12 +71,7 @@ const LocationFunnel = ({ toNotificationTimeFunnel, goBack }: LocationFunnelProp
           onSelectLocation={onSelectLocation}
         />
       </Suspense>
-      <CTAButton
-        text={'다음'}
-        className={cn(selectedLocation === null ? 'bg-Gray300' : 'bg-BloomingGreen500')}
-        onClick={onClick}
-        disabled={!selectedLocation}
-      />
+      <CTAButton text={'다음'} onClick={onClick} disabled={!selectedLocation} />
       <HeightBox height={'30px'} />
     </Screen>
   );
diff --git a/src/funnel/register/NicknameFunnel.tsx b/src/funnel/register/NicknameFunnel.tsx
index 1db6573..3234750 100644
--- a/src/funnel/register/NicknameFunnel.tsx
+++ b/src/funnel/register/NicknameFunnel.tsx
@@ -43,12 +43,7 @@ const NicknameFunnel = ({ toLocationFunnel }: NicknameFunnelProps) => {
         isError={isError}
       />
       <HeightBox height={'100%'} />
-      <CTAButton
-        text={'다음'}
-        className={'bg-BloomingGreen500 disabled:bg-Gray300'}
-        onClick={onClick}
-        disabled={nickname === '' || isError}
-      />
+      <CTAButton text={'다음'} onClick={onClick} disabled={nickname === '' || isError} />
       <HeightBox height={'30px'} />
     </Screen>
   );
diff --git a/src/funnel/register/NotificationTimeFunnel.tsx b/src/funnel/register/NotificationTimeFunnel.tsx
index fdc8035..87d32a0 100644
--- a/src/funnel/register/NotificationTimeFunnel.tsx
+++ b/src/funnel/register/NotificationTimeFunnel.tsx
@@ -4,7 +4,6 @@ import 왼쪽꺽쇠 from '@/assets/icon/left-arrow.svg?react';
 import HeightBox from '@/components/common/HeightBox';
 import RegisterFunnelTitle from '@/components/register/RegisterFunnelTitle.tsx';
 import CTAButton from '@/components/common/CTAButton';
-import { cn } from '@/utils.ts';
 import { useState } from 'react';
 import { NumericRange } from '@/types/NewmericRange.ts';
 import BottomSheet from '@/components/common/BottomSheet';
@@ -50,11 +49,7 @@ const NotificationTimeFunnel = ({ toCompleteFunnel, goBack }: NotificationTimeFu
       <HeightBox height={53.5} />
       <RegisterFunnelTitle title={'거의 다 왔어요!\n알림 시간대를 설정해주세요'} />
       <HeightBox height={'100%'} />
-      <CTAButton
-        text={'선택하기'}
-        className={cn('bg-BloomingGreen500')}
-        onClick={() => setOpenBottomSheet(true)}
-      />
+      <CTAButton text={'선택하기'} onClick={() => setOpenBottomSheet(true)} />
 
       <HeightBox height={'30px'} />
       <BottomSheet
@@ -71,9 +66,7 @@ const NotificationTimeFunnel = ({ toCompleteFunnel, goBack }: NotificationTimeFu
             />
           </div>
         }
-        actions={[
-          <CTAButton text={'선택하기'} onClick={onConfirm} className={'bg-BloomingGreen500'} />,
-        ]}
+        actions={[<CTAButton text={'선택하기'} onClick={onConfirm} />]}
         isOpen={openBottomSheet}
         onClose={() => setOpenBottomSheet(false)}
       />
diff --git a/src/hooks/useNotification.tsx b/src/hooks/useNotification.tsx
index b9c45b7..87314e1 100644
--- a/src/hooks/useNotification.tsx
+++ b/src/hooks/useNotification.tsx
@@ -28,14 +28,13 @@ export const useNotification = () => {
         content={''}
         actionDirection={'row'}
         actions={[
-          <CTAButton text={'취소'} onClick={() => {}} className="bg-Gray300" />,
+          <CTAButton text={'취소'} onClick={() => {}} variant={'ghost'} />,
           <CTAButton
             text={'허용'}
             onClick={async () => {
               setIsModalOpen(false);
               await requestPermission();
             }}
-            className="bg-BloomingGreen500"
           />,
         ]}
         isOpen={isModalOpen}
diff --git a/src/pages/AddPlantPage.tsx b/src/pages/AddPlantPage.tsx
index a1a8169..5b9a996 100644
--- a/src/pages/AddPlantPage.tsx
+++ b/src/pages/AddPlantPage.tsx
@@ -1,7 +1,6 @@
 import Screen from '@/layouts/Screen.tsx';
 import IconXMono from '@/assets/icon/x-gray.svg?react';
 import TextField from '@/components/common/TextField';
-import { cn } from '@/utils.ts';
 import CTAButton from '@/components/common/CTAButton';
 import Header from '@/components/common/Header';
 import useInternalRouter from '@/hooks/useInternalRouter.ts';
@@ -239,7 +238,7 @@ const AddPlantPage = () => {
       </form>
       <CTAButton
         text={'등록하기'}
-        className={cn('mt-[19px]', isFormValid ? 'bg-BloomingGreen500' : 'bg-Gray300')}
+        className={'mt-[19px]'}
         disabled={!isFormValid}
         onClick={handleSubmit}
       />
diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
index 2c23af0..0ce4e84 100644
--- a/src/pages/ErrorPage.tsx
+++ b/src/pages/ErrorPage.tsx
@@ -40,7 +40,7 @@ const ErrorPage = ({ reset, error }: ErrorPageProps) => {
             <div className="text-Gray500 text-[15px] pb-[10px]">{error.message}</div>
           )}
           <div>
-            <CTAButton onClick={reset} text="다시 시도" className="bg-BloomingGreen500 w-[120px]" />
+            <CTAButton onClick={reset} text="다시 시도" className="w-[120px]" />
           </div>
         </div>
       </div>
diff --git a/src/pages/MyPlantEdit.tsx b/src/pages/MyPlantEdit.tsx
index e67c7c6..1cc8082 100644
--- a/src/pages/MyPlantEdit.tsx
+++ b/src/pages/MyPlantEdit.tsx
@@ -135,7 +135,7 @@ const MyPlantEdit = () => {
         <Trash2 />
       </button>
       <HeightBox height={17.25} />
-      <CTAButton text={'저장'} onClick={onComplete} className={'bg-BloomingGreen500'} />
+      <CTAButton text={'저장'} onClick={onComplete} />
       <HeightBox height={13.75} />
     </Screen>
   );
diff --git a/src/pages/MyPlantFeedPage.tsx b/src/pages/MyPlantFeedPage.tsx
index 8961312..3c85dfd 100644
--- a/src/pages/MyPlantFeedPage.tsx
+++ b/src/pages/MyPlantFeedPage.tsx
@@ -121,18 +121,18 @@ const MyPlantFeedPage = () => {
       {isDeleteMode ? (
         <div className={'mt-4 flex flex-row gap-4'}>
           <CTAButton
-            className="bg-BloomingGreen500"
             text="취소"
             onClick={() => {
               setIsDeleteMode(false);
               setSelectedImages([]);
             }}
+            variant={'ghost'}
           />
           <CTAButton
             disabled={selectedImages.length === 0}
-            className={'bg-Red500 disabled:bg-Gray300'}
             onClick={handleDeletePlantFeed}
             text={`삭제(${selectedImages.length})`}
+            variant={'warning'}
           />
         </div>
       ) : (