Merge branch 'fe/design/button' into 'fe/develop'

Design: 버튼 디자인 통일, 프로젝트 생성 컴포넌트 디자인 리팩토링

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

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>

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}
       >

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"

frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx

@@ -182,12 +182,7 @@ export default function ImageUploadFileForm({
       {isUploading ? (
         <Button
           onClick={handleClose}
-          variant="outlinePrimary"
+          variant={isFailed ? 'red' : 'blue'}
-          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'
-              : ''
-          }
           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}
         >
           업로드

frontend/src/components/ImageUploadFolderFileModal/ImageUploadFolderFileForm.tsx

@@ -166,12 +166,7 @@ export default function ImageUploadFolderFileForm({
       {isUploading ? (
         <Button
           onClick={handleClose}
-          variant="outlinePrimary"
+          variant={isFailed ? 'red' : 'blue'}
-          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'
-              : ''
-          }
           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}
         >
           업로드

frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx

@@ -166,12 +166,7 @@ export default function ImageUploadFolderForm({
       {isUploading ? (
         <Button
           onClick={handleClose}
-          variant="outlinePrimary"
+          variant={isFailed ? 'red' : 'blue'}
-          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'
-              : ''
-          }
           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}
         >
           업로드

frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx

@@ -166,12 +166,7 @@ export default function ImageUploadZipForm({
       {isUploading ? (
         <Button
           onClick={handleClose}
-          variant="outlinePrimary"
+          variant={isFailed ? 'red' : 'blue'}
-          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'
-              : ''
-          }
           disabled={!isUploaded && !isFailed}
         >
           {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
@@ -179,7 +174,7 @@ export default function ImageUploadZipForm({
       ) : (
         <Button
           onClick={handleUpload}
-          variant="outlinePrimary"
+          variant="blue"
           disabled={!file}
         >
           업로드

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')}
         >
           멤버 초대하기

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}
         >

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}
         >
           역할 설정

frontend/src/components/ModelManage/TrainingSettings.tsx

@@ -131,7 +131,7 @@ export default function TrainingSettings({
             />
           </div>
           <Button
-            variant="outlinePrimary"
+            variant="blue"
             size="lg"
             onClick={handleSubmit}
             disabled={!selectedModel}
@@ -143,7 +143,7 @@ export default function TrainingSettings({
 
       {isWaiting && (
         <Button
-          variant="secondary"
+          variant="red"
           size="lg"
           onClick={handleTrainingStop}
         >

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,18 +114,19 @@ 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">
+                <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 border-gray-700 px-2 py-1 text-gray-900"
+                        className="flex items-center gap-1 rounded-full border-2 border-gray-700 px-2 py-1 text-gray-700"
                       >
                         <span>{category}</span>
                         <X
@@ -139,15 +140,16 @@ export default function ProjectCreateForm({ onSubmit }: { onSubmit: (data: Proje
                         />
                       </div>
                     ))}
-                </ul>
+                  </div>
+                </div>
               )}
               <FormMessage />
-            </>
+            </div>
           )}
         />
         <Button
           type="submit"
-          variant="outlinePrimary"
+          variant="blue"
           disabled={!form.formState.isValid}
         >
           프로젝트 만들기

frontend/src/components/ProjectCreateModal/index.tsx

@@ -22,8 +22,8 @@ export default function ProjectCreateModal({ onSubmit, buttonClass = '' }: Proje
     >
       <DialogTrigger asChild>
         <Button
-          variant="outlinePrimary"
+          variant="blue"
-          className={`${buttonClass}`}
+          className={buttonClass}
           size={'xs'}
           onClick={handleOpen}
         >

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"
         >
           리뷰 요청

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}
         >
           워크스페이스 만들기

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}
         >
           멤버 초대하기

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}
         >

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={() => {

frontend/src/components/ui/button.tsx

@@ -9,18 +9,22 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
+        // 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',
+        //   '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:
+        // 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',
+        //   '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:
+        // 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',
+        //   '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:
+        // 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',
+        //   '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:
+        // 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',
+        //   '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',
+        // 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',
+        // 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',
     },
   }

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>

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

frontend/src/pages/ReviewDetail.tsx

@@ -134,13 +134,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}
           >
             {'승인'}
@@ -150,7 +150,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>

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>