Merge branch 'fe/fix/button-and-design' into 'fe/develop'

Fix: 빌드 오류 해결, 버튼 디자인 통일, 리뷰 디자인 개선

See merge request s11-s-project/S11P21S002!253

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="blue"
+          variant={allSavedImages && selectedImages.length === allSavedImages.length ? 'blue' : 'black'}
           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) ? 'red' : 'blue'}
+                    variant={selectedImages.includes(image.id) ? 'blue' : 'black'}
                     size="sm"
                     onClick={() => handleImageSelect(image.id)}
                     className="px-3 py-1"

frontend/src/components/ModelManage/TrainingSettings.tsx

@@ -153,7 +153,7 @@ export default function TrainingSettings({
 
       {isTraining && (
         <Button
-          variant="secondary"
+          variant="red"
           size="lg"
           onClick={handleTrainingStop}
         >

frontend/src/components/ReviewForm/index.tsx

@@ -99,6 +99,7 @@ export default function ReviewForm({ projects, onSubmit }: ReviewFormProps): JSX
         <Textarea
           id="content"
           placeholder="리뷰 내용을 입력하세요"
+          className="ring-black"
           {...register('content')}
         />
         {errors.content && <p className="text-red-500">{errors.content.message}</p>}

frontend/src/components/ui/button.tsx

@@ -13,8 +13,8 @@ const buttonVariants = cva(
         //   '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',
+        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:

frontend/src/pages/ReviewDetail.tsx

@@ -130,28 +130,26 @@ export default function ReviewDetail(): JSX.Element {
           </div>
         </div>
       )}
-
-      {reviewDetail.reviewStatus !== 'APPROVED' && reviewDetail.reviewStatus !== 'REJECTED' && (
-        <div className="actions mt-6 flex justify-end space-x-2">
-          <Button
-            variant="red"
-            onClick={handleReject}
-          >
-            {'거부'}
-          </Button>
-          <Button
-            variant="black"
-            onClick={handleApprove}
-          >
-            {'승인'}
-          </Button>
-        </div>
-      )}
-
-      <div className="mt-6">
+      <div className="mt-6 flex justify-end gap-2">
         <Link to={`/admin/${workspaceId}/reviews`}>
-          <Button variant="blue">목록으로 돌아가기</Button>
+          <Button variant="black">목록으로 돌아가기</Button>
         </Link>
+        {reviewDetail.reviewStatus !== 'APPROVED' && reviewDetail.reviewStatus !== 'REJECTED' && (
+          <>
+            <Button
+              variant="red"
+              onClick={handleReject}
+            >
+              {'거부'}
+            </Button>
+            <Button
+              variant="blue"
+              onClick={handleApprove}
+            >
+              {'승인'}
+            </Button>
+          </>
+        )}
       </div>
     </div>
   );