jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
홍창기 2024-09-30 18:23:33 +09:00
parent 8cd7d545fb
commit 191f2e04de
23 changed files with 74 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/AdminProjectSidebar/index.tsx
View File

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

2
frontend/src/components/Header/UserProfileForm.tsx
View File

@ -35,7 +35,7 @@ export default function UserProfileForm({ onClose }: { onClose: () => void }) {
<Button
onClick={handleLogout}
variant="outlinePrimary"
variant="blue"
className="mt-4"
disabled={isLoggingOut}
>

4
frontend/src/components/ImageSelection/index.tsx
View File

@ -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"

9
frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx
View File

@ -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}
>
업로드

9
frontend/src/components/ImageUploadFolderFileModal/ImageUploadFolderFileForm.tsx
View File

@ -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}
>
업로드

9
frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
View File

@ -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}
>
업로드

9
frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
View File

@ -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}
>
업로드

2
frontend/src/components/MemberAddModal/MemberAddForm.tsx
View File

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

2
frontend/src/components/MemberAddModal/index.tsx
View File

@ -38,7 +38,7 @@ export default function MemberAddModal({ projectId, buttonClass = '' }: MemberAd
>
<DialogTrigger asChild>
<Button
variant="outlinePrimary"
variant="blue"
className={`${buttonClass}`}
onClick={handleOpen}
>

2
frontend/src/components/MemberManageModal/MemberManageForm.tsx
View File

@ -128,7 +128,7 @@ export default function MemberManageForm({ members, onSubmit }: MemberManageForm
</div>
<Button
type="submit"
variant="outlinePrimary"
variant="blue"
disabled={!form.formState.isValid}
>
역할 설정

4
frontend/src/components/ModelManage/TrainingSettings.tsx
View File

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

50
frontend/src/components/ProjectCreateModal/ProjectCreateForm.tsx
View File

@ -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}
>
프로젝트 만들기

4
frontend/src/components/ProjectCreateModal/index.tsx
View File

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

4
frontend/src/components/ReviewForm/index.tsx
View File

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

2
frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx
View File

@ -75,7 +75,7 @@ export default function WorkSpaceCreateForm({ onSubmit }: WorkSpaceCreateFormPro
/>
<Button
type="submit"
variant="outlinePrimary"
variant="blue"
disabled={!form.formState.isValid}
>
워크스페이스 만들기

2
frontend/src/components/WorkspaceMemberAddModal/MemberAddForm.tsx
View File

@ -86,7 +86,7 @@ export default function MemberAddForm({ onSubmit }: { onSubmit: (data: MemberAdd
<Button
type="submit"
variant="outlinePrimary"
variant="blue"
disabled={form.watch('memberId') === 0}
>
멤버 초대하기

2
frontend/src/components/WorkspaceMemberAddModal/index.tsx
View File

@ -38,7 +38,7 @@ export default function WorkspaceMemberAddModal({
>
<DialogTrigger asChild>
<Button
variant="outlinePrimary"
variant="blue"
className={`${buttonClass}`}
onClick={handleOpen}
>

2
frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
View File

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

30
frontend/src/components/ui/button.tsx
View File

@ -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',
},
}

2
frontend/src/pages/Home.tsx
View File

@ -44,7 +44,7 @@ export default function Home() {
<>
<Button
asChild
variant="outlinePrimary"
variant="blue"
size="lg"
>
<Link to="/browse">시작하기</Link>

2
frontend/src/pages/ProjectReviewList.tsx
View File

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

6
frontend/src/pages/ReviewDetail.tsx
View File

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

2
frontend/src/pages/WorkspaceReviewList.tsx
View File

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