From 191f2e04de2e819b6af748f39931f4a9149d6b22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= <hckhong@naver.com>
Date: Mon, 30 Sep 2024 18:23:33 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EB=B2=84=ED=8A=BC=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=ED=86=B5=EC=9D=BC,=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=EC=A0=9D=ED=8A=B8=20=EC=83=9D=EC=84=B1=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AdminProjectSidebar/index.tsx  |  2 +-
 .../src/components/Header/UserProfileForm.tsx |  2 +-
 .../src/components/ImageSelection/index.tsx   |  4 +-
 .../ImageUploadFileForm.tsx                   |  9 +---
 .../ImageUploadFolderFileForm.tsx             |  9 +---
 .../ImageUploadFolderForm.tsx                 |  9 +---
 .../ImageUploadZipForm.tsx                    |  9 +---
 .../MemberAddModal/MemberAddForm.tsx          |  2 +-
 .../src/components/MemberAddModal/index.tsx   |  2 +-
 .../MemberManageModal/MemberManageForm.tsx    |  2 +-
 .../ModelManage/TrainingSettings.tsx          |  4 +-
 .../ProjectCreateModal/ProjectCreateForm.tsx  | 50 ++++++++++---------
 .../components/ProjectCreateModal/index.tsx   |  4 +-
 frontend/src/components/ReviewForm/index.tsx  |  4 +-
 .../WorkSpaceCreateForm.tsx                   |  2 +-
 .../WorkspaceMemberAddModal/MemberAddForm.tsx |  2 +-
 .../WorkspaceMemberAddModal/index.tsx         |  2 +-
 .../WorkspaceSidebar/ProjectStructure.tsx     |  2 +-
 frontend/src/components/ui/button.tsx         | 30 ++++++-----
 frontend/src/pages/Home.tsx                   |  2 +-
 frontend/src/pages/ProjectReviewList.tsx      |  2 +-
 frontend/src/pages/ReviewDetail.tsx           |  6 +--
 frontend/src/pages/WorkspaceReviewList.tsx    |  2 +-
 23 files changed, 74 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/AdminProjectSidebar/index.tsx b/frontend/src/components/AdminProjectSidebar/index.tsx
index d6bf1b1..6d36739 100644
--- a/frontend/src/components/AdminProjectSidebar/index.tsx
+++ b/frontend/src/components/AdminProjectSidebar/index.tsx
@@ -65,7 +65,7 @@ export default function AdminProjectSidebar(): JSX.Element {
             <SquarePen size={16} />
           </button>
           <ProjectCreateModal
-            buttonClass="caption bg-gray-100"
+            buttonClass="caption"
             onSubmit={handleCreateProject}
           />
         </header>
diff --git a/frontend/src/components/Header/UserProfileForm.tsx b/frontend/src/components/Header/UserProfileForm.tsx
index 584290b..b4e7214 100644
--- a/frontend/src/components/Header/UserProfileForm.tsx
+++ b/frontend/src/components/Header/UserProfileForm.tsx
@@ -35,7 +35,7 @@ export default function UserProfileForm({ onClose }: { onClose: () => void }) {
 
       <Button
         onClick={handleLogout}
-        variant="outlinePrimary"
+        variant="blue"
         className="mt-4"
         disabled={isLoggingOut}
       >
diff --git a/frontend/src/components/ImageSelection/index.tsx b/frontend/src/components/ImageSelection/index.tsx
index 062e38c..13331ce 100644
--- a/frontend/src/components/ImageSelection/index.tsx
+++ b/frontend/src/components/ImageSelection/index.tsx
@@ -35,7 +35,7 @@ export default function ImageSelection({ projectId, selectedImages, setSelectedI
       <div className="mb-2 flex items-center justify-between">
         <Label>이미지 선택 (파일 목록)</Label>
         <Button
-          variant="outline"
+          variant="blue"
           size="sm"
           onClick={handleSelectAll}
           type="button"
@@ -57,7 +57,7 @@ export default function ImageSelection({ projectId, selectedImages, setSelectedI
                 <span className="truncate">{image.imageTitle}</span>
                 <div className="flex items-center space-x-2">
                   <Button
-                    variant={selectedImages.includes(image.id) ? 'destructive' : 'outline'}
+                    variant={selectedImages.includes(image.id) ? 'red' : 'blue'}
                     size="sm"
                     onClick={() => handleImageSelect(image.id)}
                     className="px-3 py-1"
diff --git a/frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx b/frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx
index 916d223..e93b577 100644
--- a/frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx
+++ b/frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx
@@ -182,12 +182,7 @@ export default function ImageUploadFileForm({
       {isUploading ? (
         <Button
           onClick={handleClose}
-          variant="outlinePrimary"
-          className={
-            isFailed
-              ? 'border-red-500 text-red-500 hover:bg-red-500 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-500'
-              : ''
-          }
+          variant={isFailed ? 'red' : 'blue'}
           disabled={!isUploaded && !isFailed}
         >
           {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
@@ -195,7 +190,7 @@ export default function ImageUploadFileForm({
       ) : (
         <Button
           onClick={handleUpload}
-          variant="outlinePrimary"
+          variant="blue"
           disabled={files.length === 0}
         >
           업로드
diff --git a/frontend/src/components/ImageUploadFolderFileModal/ImageUploadFolderFileForm.tsx b/frontend/src/components/ImageUploadFolderFileModal/ImageUploadFolderFileForm.tsx
index 04bd592..84e62dc 100644
--- a/frontend/src/components/ImageUploadFolderFileModal/ImageUploadFolderFileForm.tsx
+++ b/frontend/src/components/ImageUploadFolderFileModal/ImageUploadFolderFileForm.tsx
@@ -166,12 +166,7 @@ export default function ImageUploadFolderFileForm({
       {isUploading ? (
         <Button
           onClick={handleClose}
-          variant="outlinePrimary"
-          className={
-            isFailed
-              ? 'border-red-500 text-red-500 hover:bg-red-500 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-500'
-              : ''
-          }
+          variant={isFailed ? 'red' : 'blue'}
           disabled={!isUploaded && !isFailed}
         >
           {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
@@ -179,7 +174,7 @@ export default function ImageUploadFolderFileForm({
       ) : (
         <Button
           onClick={handleUpload}
-          variant="outlinePrimary"
+          variant="blue"
           disabled={files.length === 0}
         >
           업로드
diff --git a/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx b/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
index be704f9..4b749e4 100644
--- a/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
+++ b/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
@@ -166,12 +166,7 @@ export default function ImageUploadFolderForm({
       {isUploading ? (
         <Button
           onClick={handleClose}
-          variant="outlinePrimary"
-          className={
-            isFailed
-              ? 'border-red-500 text-red-500 hover:bg-red-500 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-500'
-              : ''
-          }
+          variant={isFailed ? 'red' : 'blue'}
           disabled={!isUploaded && !isFailed}
         >
           {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
@@ -179,7 +174,7 @@ export default function ImageUploadFolderForm({
       ) : (
         <Button
           onClick={handleUpload}
-          variant="outlinePrimary"
+          variant="blue"
           disabled={files.length === 0}
         >
           업로드
diff --git a/frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx b/frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
index de2ae79..2ad8fe5 100644
--- a/frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
+++ b/frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
@@ -166,12 +166,7 @@ export default function ImageUploadZipForm({
       {isUploading ? (
         <Button
           onClick={handleClose}
-          variant="outlinePrimary"
-          className={
-            isFailed
-              ? 'border-red-500 text-red-500 hover:bg-red-500 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-500'
-              : ''
-          }
+          variant={isFailed ? 'red' : 'blue'}
           disabled={!isUploaded && !isFailed}
         >
           {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
@@ -179,7 +174,7 @@ export default function ImageUploadZipForm({
       ) : (
         <Button
           onClick={handleUpload}
-          variant="outlinePrimary"
+          variant="blue"
           disabled={!file}
         >
           업로드
diff --git a/frontend/src/components/MemberAddModal/MemberAddForm.tsx b/frontend/src/components/MemberAddModal/MemberAddForm.tsx
index 544fa57..acccf29 100644
--- a/frontend/src/components/MemberAddModal/MemberAddForm.tsx
+++ b/frontend/src/components/MemberAddModal/MemberAddForm.tsx
@@ -132,7 +132,7 @@ export default function MemberAddForm({ onSubmit }: { onSubmit: (data: MemberAdd
 
         <Button
           type="submit"
-          variant="outlinePrimary"
+          variant="blue"
           disabled={!form.formState.isValid || !form.getValues('memberId')}
         >
           멤버 초대하기
diff --git a/frontend/src/components/MemberAddModal/index.tsx b/frontend/src/components/MemberAddModal/index.tsx
index f3d2796..169c1cf 100644
--- a/frontend/src/components/MemberAddModal/index.tsx
+++ b/frontend/src/components/MemberAddModal/index.tsx
@@ -38,7 +38,7 @@ export default function MemberAddModal({ projectId, buttonClass = '' }: MemberAd
     >
       <DialogTrigger asChild>
         <Button
-          variant="outlinePrimary"
+          variant="blue"
           className={`${buttonClass}`}
           onClick={handleOpen}
         >
diff --git a/frontend/src/components/MemberManageModal/MemberManageForm.tsx b/frontend/src/components/MemberManageModal/MemberManageForm.tsx
index 6732701..7cce455 100644
--- a/frontend/src/components/MemberManageModal/MemberManageForm.tsx
+++ b/frontend/src/components/MemberManageModal/MemberManageForm.tsx
@@ -128,7 +128,7 @@ export default function MemberManageForm({ members, onSubmit }: MemberManageForm
         </div>
         <Button
           type="submit"
-          variant="outlinePrimary"
+          variant="blue"
           disabled={!form.formState.isValid}
         >
           역할 설정
diff --git a/frontend/src/components/ModelManage/TrainingSettings.tsx b/frontend/src/components/ModelManage/TrainingSettings.tsx
index 016c4f6..b6c5c6e 100644
--- a/frontend/src/components/ModelManage/TrainingSettings.tsx
+++ b/frontend/src/components/ModelManage/TrainingSettings.tsx
@@ -127,7 +127,7 @@ export default function TrainingSettings({
             />
           </div>
           <Button
-            variant="outlinePrimary"
+            variant="blue"
             size="lg"
             onClick={handleSubmit}
             disabled={!selectedModel || isPolling}
@@ -138,7 +138,7 @@ export default function TrainingSettings({
       )}
       {selectedModel?.isTrain && (
         <Button
-          variant="secondary"
+          variant="red"
           size="lg"
           onClick={handleTrainingStop}
         >
diff --git a/frontend/src/components/ProjectCreateModal/ProjectCreateForm.tsx b/frontend/src/components/ProjectCreateModal/ProjectCreateForm.tsx
index 81c0efa..de8d0c6 100644
--- a/frontend/src/components/ProjectCreateModal/ProjectCreateForm.tsx
+++ b/frontend/src/components/ProjectCreateModal/ProjectCreateForm.tsx
@@ -51,7 +51,7 @@ export default function ProjectCreateForm({ onSubmit }: { onSubmit: (data: Proje
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="flex flex-col gap-5 overflow-x-auto"
+        className="flex w-full flex-col gap-5 overflow-x-auto p-1"
       >
         <FormField
           name="projectName"
@@ -104,7 +104,7 @@ export default function ProjectCreateForm({ onSubmit }: { onSubmit: (data: Proje
         <FormField
           name="categories"
           render={({ field }) => (
-            <>
+            <div className="mb-1 flex w-full flex-col gap-2">
               <div className="body-strong">카테고리</div>
               <div className="flex gap-2">
                 <FormControl>
@@ -114,40 +114,42 @@ export default function ProjectCreateForm({ onSubmit }: { onSubmit: (data: Proje
                   />
                 </FormControl>
                 <Button
-                  variant="outline"
+                  variant="blue"
                   onClick={(event) => handleAddCategory(event, field.onChange)}
                 >
                   추가
                 </Button>
               </div>
               {categories.length > 0 && (
-                <ul className="body-small box-border flex grow-0 gap-2 overflow-x-auto">
-                  {categories.map((category: string, index: number) => (
-                    <div
-                      key={index}
-                      className="flex items-center gap-1 rounded-full border border-gray-700 px-2 py-1 text-gray-900"
-                    >
-                      <span>{category}</span>
-                      <X
-                        size={16}
-                        className="cursor-pointer"
-                        onClick={() => {
-                          const newCategories = categories.filter((_, i) => i !== index);
-                          field.onChange(newCategories);
-                          setCategories(newCategories);
-                        }}
-                      />
-                    </div>
-                  ))}
-                </ul>
+                <div className="flex w-full flex-col overflow-x-auto">
+                  <div className="flex gap-2 py-1">
+                    {categories.map((category: string, index: number) => (
+                      <div
+                        key={index}
+                        className="flex items-center gap-1 rounded-full border-2 border-gray-700 px-2 py-1 text-gray-700"
+                      >
+                        <span>{category}</span>
+                        <X
+                          size={16}
+                          className="cursor-pointer"
+                          onClick={() => {
+                            const newCategories = categories.filter((_, i) => i !== index);
+                            field.onChange(newCategories);
+                            setCategories(newCategories);
+                          }}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
               )}
               <FormMessage />
-            </>
+            </div>
           )}
         />
         <Button
           type="submit"
-          variant="outlinePrimary"
+          variant="blue"
           disabled={!form.formState.isValid}
         >
           프로젝트 만들기
diff --git a/frontend/src/components/ProjectCreateModal/index.tsx b/frontend/src/components/ProjectCreateModal/index.tsx
index 3c3f077..58f912a 100644
--- a/frontend/src/components/ProjectCreateModal/index.tsx
+++ b/frontend/src/components/ProjectCreateModal/index.tsx
@@ -22,8 +22,8 @@ export default function ProjectCreateModal({ onSubmit, buttonClass = '' }: Proje
     >
       <DialogTrigger asChild>
         <Button
-          variant="outlinePrimary"
-          className={`${buttonClass}`}
+          variant="blue"
+          className={buttonClass}
           size={'xs'}
           onClick={handleOpen}
         >
diff --git a/frontend/src/components/ReviewForm/index.tsx b/frontend/src/components/ReviewForm/index.tsx
index ee733ef..cc581af 100644
--- a/frontend/src/components/ReviewForm/index.tsx
+++ b/frontend/src/components/ReviewForm/index.tsx
@@ -115,14 +115,14 @@ export default function ReviewForm({ projects, onSubmit }: ReviewFormProps): JSX
 
       <div className="actions mt-6 flex justify-end space-x-2">
         <Button
-          variant="destructive"
+          variant="red"
           type="button"
           onClick={() => navigate(-1)}
         >
           취소
         </Button>
         <Button
-          variant="default"
+          variant="black"
           type="submit"
         >
           리뷰 요청
diff --git a/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx b/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx
index f9aec7e..2fc6448 100644
--- a/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx
+++ b/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx
@@ -75,7 +75,7 @@ export default function WorkSpaceCreateForm({ onSubmit }: WorkSpaceCreateFormPro
         />
         <Button
           type="submit"
-          variant="outlinePrimary"
+          variant="blue"
           disabled={!form.formState.isValid}
         >
           워크스페이스 만들기
diff --git a/frontend/src/components/WorkspaceMemberAddModal/MemberAddForm.tsx b/frontend/src/components/WorkspaceMemberAddModal/MemberAddForm.tsx
index 4374389..2ce8549 100644
--- a/frontend/src/components/WorkspaceMemberAddModal/MemberAddForm.tsx
+++ b/frontend/src/components/WorkspaceMemberAddModal/MemberAddForm.tsx
@@ -86,7 +86,7 @@ export default function MemberAddForm({ onSubmit }: { onSubmit: (data: MemberAdd
 
         <Button
           type="submit"
-          variant="outlinePrimary"
+          variant="blue"
           disabled={form.watch('memberId') === 0}
         >
           멤버 초대하기
diff --git a/frontend/src/components/WorkspaceMemberAddModal/index.tsx b/frontend/src/components/WorkspaceMemberAddModal/index.tsx
index b4bb0f2..528b42d 100644
--- a/frontend/src/components/WorkspaceMemberAddModal/index.tsx
+++ b/frontend/src/components/WorkspaceMemberAddModal/index.tsx
@@ -38,7 +38,7 @@ export default function WorkspaceMemberAddModal({
     >
       <DialogTrigger asChild>
         <Button
-          variant="outlinePrimary"
+          variant="blue"
           className={`${buttonClass}`}
           onClick={handleOpen}
         >
diff --git a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
index f8a06fa..3ca75fd 100644
--- a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
+++ b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
@@ -70,7 +70,7 @@ export default function ProjectStructure({ project }: { project: Project }) {
 
       <div className="flex">
         <Button
-          variant="outlinePrimary"
+          variant="blue"
           className="w-full overflow-hidden"
           disabled={requestAutoLabel.isPending}
           onClick={() => {
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 39889f0..6c501db 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -9,18 +9,22 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'bg-gray-900 text-gray-50 hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90',
-        destructive:
-          'bg-red-500 text-gray-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90',
-        outline:
-          'border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50',
-        outlinePrimary:
-          'border border-primary text-primary hover:bg-primary hover:text-white dark:border-primary dark:text-primary dark:hover:bg-primary dark:hover:text-white disabled:border-gray-200 disabled:bg-white disabled:text-gray-500 disabled:hover:bg-gray-100 disabled:hover:text-gray-300',
-        secondary:
-          'bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80',
-        ghost: 'hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50',
-        link: 'text-gray-900 underline-offset-4 hover:underline dark:text-gray-50',
+        // default:
+        //   'bg-gray-900 text-gray-50 hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90',
+        // destructive:
+        //   'bg-red-500 text-gray-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90',
+        // outline:
+        //   'border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50',
+        // outlinePrimary:
+        //   'border border-primary text-primary hover:bg-primary hover:text-white dark:border-primary dark:text-primary dark:hover:bg-primary dark:hover:text-white disabled:border-gray-200 disabled:bg-white disabled:text-gray-500 disabled:hover:bg-gray-100 disabled:hover:text-gray-300',
+        // secondary:
+        //   'bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80',
+        // ghost: 'hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50',
+        // link: 'text-gray-900 underline-offset-4 hover:underline dark:text-gray-50',
+        black:
+          'bg-gray-900 text-white hover:bg-gray-900/90 disabled:border disabled:border-gray-200 disabled:bg-white disabled:text-gray-500',
+        red: 'bg-red-500 text-white hover:bg-red-500/90 disabled:border disabled:border-gray-200 disabled:bg-white disabled:text-gray-500',
+        blue: 'bg-blue-500 text-white hover:bg-blue-500/90 disabled:border disabled:border-gray-200 disabled:bg-white disabled:text-gray-500',
       },
       size: {
         default: 'h-10 px-4 py-2',
@@ -31,7 +35,7 @@ const buttonVariants = cva(
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: 'blue',
       size: 'default',
     },
   }
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 2e0baaf..0e2131e 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -44,7 +44,7 @@ export default function Home() {
         <>
           <Button
             asChild
-            variant="outlinePrimary"
+            variant="blue"
             size="lg"
           >
             <Link to="/browse">시작하기</Link>
diff --git a/frontend/src/pages/ProjectReviewList.tsx b/frontend/src/pages/ProjectReviewList.tsx
index ea90fe0..b213701 100644
--- a/frontend/src/pages/ProjectReviewList.tsx
+++ b/frontend/src/pages/ProjectReviewList.tsx
@@ -65,7 +65,7 @@ export default function ProjectReviewList() {
             to={`/admin/${workspaceId}/reviews/request`}
             className="ml-auto"
           >
-            <Button variant="outlinePrimary">리뷰 요청</Button>
+            <Button variant="blue">리뷰 요청</Button>
           </Link>
         </header>
         <ReviewList
diff --git a/frontend/src/pages/ReviewDetail.tsx b/frontend/src/pages/ReviewDetail.tsx
index 4aafcd9..97b4a02 100644
--- a/frontend/src/pages/ReviewDetail.tsx
+++ b/frontend/src/pages/ReviewDetail.tsx
@@ -132,13 +132,13 @@ export default function ReviewDetail(): JSX.Element {
       {reviewDetail.reviewStatus !== 'APPROVED' && reviewDetail.reviewStatus !== 'REJECTED' && (
         <div className="actions mt-6 flex justify-end space-x-2">
           <Button
-            variant="destructive"
+            variant="red"
             onClick={handleReject}
           >
             {'거부'}
           </Button>
           <Button
-            variant="default"
+            variant="black"
             onClick={handleApprove}
           >
             {'승인'}
@@ -148,7 +148,7 @@ export default function ReviewDetail(): JSX.Element {
 
       <div className="mt-6">
         <Link to={`/admin/${workspaceId}/reviews`}>
-          <Button variant="outlinePrimary">목록으로 돌아가기</Button>
+          <Button variant="blue">목록으로 돌아가기</Button>
         </Link>
       </div>
     </div>
diff --git a/frontend/src/pages/WorkspaceReviewList.tsx b/frontend/src/pages/WorkspaceReviewList.tsx
index 3f7a073..a1efbe5 100644
--- a/frontend/src/pages/WorkspaceReviewList.tsx
+++ b/frontend/src/pages/WorkspaceReviewList.tsx
@@ -65,7 +65,7 @@ export default function WorkspaceReviewList() {
             to={`/admin/${workspaceId}/reviews/request`}
             className="ml-auto"
           >
-            <Button variant="outlinePrimary">리뷰 요청</Button>
+            <Button variant="blue">리뷰 요청</Button>
           </Link>
         </header>