From 72d465c3cfa86ce801a7555b0c954e8e3dd756e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Mon, 30 Sep 2024 12:58:48 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Fix:=20=EB=A6=AC=EB=B7=B0=EC=9A=94=EC=B2=AD?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=90=EB=9F=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B3=A0?=
 =?UTF-8?q?=EC=B9=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ImageSelection/index.tsx   | 45 +++++++----
 frontend/src/components/ReviewForm/index.tsx  | 79 ++++++++++++++-----
 frontend/src/pages/ReviewRequest.tsx          | 51 ++----------
 3 files changed, 100 insertions(+), 75 deletions(-)

diff --git a/frontend/src/components/ImageSelection/index.tsx b/frontend/src/components/ImageSelection/index.tsx
index 4653cab..062e38c 100644
--- a/frontend/src/components/ImageSelection/index.tsx
+++ b/frontend/src/components/ImageSelection/index.tsx
@@ -1,4 +1,3 @@
-// ImageSelection.tsx
 import { Label } from '@/components/ui/label';
 import useRecursiveSavedImages from '@/hooks/useRecursiveSavedImages';
 import { Button } from '@/components/ui/button';
@@ -7,27 +6,44 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 interface ImageSelectionProps {
   projectId: string;
   selectedImages: number[];
-  setSelectedImages: React.Dispatch<React.SetStateAction<number[]>>;
+  setSelectedImages: (images: number[]) => void;
 }
 
 export default function ImageSelection({ projectId, selectedImages, setSelectedImages }: ImageSelectionProps) {
   const { allSavedImages } = useRecursiveSavedImages(projectId, 0);
 
   const handleImageSelect = (imageId: number) => {
-    // 상태 업데이트 안전하게 관리
-    setSelectedImages((prevSelectedImages) => {
-      // 이미 선택된 이미지가 있는 경우 필터링하여 제거
-      if (prevSelectedImages.includes(imageId)) {
-        return prevSelectedImages.filter((id) => id !== imageId);
+    const updatedImages = selectedImages.includes(imageId)
+      ? selectedImages.filter((id) => id !== imageId)
+      : [...selectedImages, imageId];
+
+    setSelectedImages(updatedImages);
+  };
+
+  const handleSelectAll = () => {
+    if (allSavedImages) {
+      if (selectedImages.length === allSavedImages.length) {
+        setSelectedImages([]);
+      } else {
+        setSelectedImages(allSavedImages.map((image) => image.id));
       }
-      // 선택되지 않은 이미지를 배열에 추가
-      return [...prevSelectedImages, imageId];
-    });
+    }
   };
 
   return (
     <div className="mb-4">
-      <Label>이미지 선택 (파일 목록)</Label>
+      <div className="mb-2 flex items-center justify-between">
+        <Label>이미지 선택 (파일 목록)</Label>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleSelectAll}
+          type="button"
+          className="px-4 py-2"
+        >
+          {allSavedImages && selectedImages.length === allSavedImages.length ? '전체 선택 해제' : '전체 선택'}
+        </Button>
+      </div>
       <ScrollArea className="max-h-64 overflow-auto border p-2">
         <ul className="space-y-2">
           {allSavedImages && allSavedImages.length > 0 ? (
@@ -42,11 +58,12 @@ export default function ImageSelection({ projectId, selectedImages, setSelectedI
                 <div className="flex items-center space-x-2">
                   <Button
                     variant={selectedImages.includes(image.id) ? 'destructive' : 'outline'}
-                    size="xs"
+                    size="sm"
                     onClick={() => handleImageSelect(image.id)}
-                    className="p-0"
+                    className="px-3 py-1"
+                    type="button"
                   >
-                    {selectedImages.includes(image.id) ? '선택 해제' : '선택'}
+                    {selectedImages.includes(image.id) ? '해제' : '선택'}
                   </Button>
                 </div>
               </li>
diff --git a/frontend/src/components/ReviewForm/index.tsx b/frontend/src/components/ReviewForm/index.tsx
index f8a8a74..ee733ef 100644
--- a/frontend/src/components/ReviewForm/index.tsx
+++ b/frontend/src/components/ReviewForm/index.tsx
@@ -1,38 +1,63 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import ImageSelection from '@/components/ImageSelection';
-import { useForm } from 'react-hook-form';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router-dom';
 
 interface ReviewFormProps {
   projects: { id: string; title: string }[];
-  selectedProjectId: string | null;
-  setSelectedProjectId: (id: string) => void;
-  selectedImages: number[];
-  setSelectedImages: React.Dispatch<React.SetStateAction<number[]>>;
-  onSubmit: (data: { title: string; content: string }) => void;
+  onSubmit: (data: ReviewFormData) => void;
 }
 
-export default function ReviewForm({
-  projects,
-  selectedProjectId,
-  setSelectedProjectId,
-  selectedImages,
-  setSelectedImages,
-  onSubmit,
-}: ReviewFormProps): JSX.Element {
+const reviewFormSchema = z.object({
+  projectId: z.string().min(1, '프로젝트를 선택해주세요.'),
+  title: z.string().min(1, '제목을 입력해주세요.'),
+  content: z.string().min(1, '내용을 입력해주세요.'),
+  imageIds: z.array(z.number()),
+});
+
+type ReviewFormData = z.infer<typeof reviewFormSchema>;
+
+export default function ReviewForm({ projects, onSubmit }: ReviewFormProps): JSX.Element {
+  const navigate = useNavigate();
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<{ title: string; content: string }>();
+    setValue,
+    watch,
+  } = useForm<ReviewFormData>({
+    resolver: zodResolver(reviewFormSchema),
+    defaultValues: {
+      projectId: '',
+      title: '',
+      content: '',
+      imageIds: [],
+    },
+  });
+
+  const selectedProjectId = watch('projectId');
+  const selectedImages = watch('imageIds');
+
+  const setSelectedProjectId = (value: string) => {
+    setValue('projectId', value);
+    setValue('imageIds', []); // 프로젝트 변경 시 이미지 초기화
+  };
+
+  const setSelectedImages = (images: number[]) => {
+    setValue('imageIds', images);
+  };
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="mb-4">
         <Label htmlFor="project">프로젝트 선택</Label>
-        <Select onValueChange={(value) => setSelectedProjectId(value)}>
+        <Select onValueChange={setSelectedProjectId}>
           <SelectTrigger id="project">
             <SelectValue placeholder="프로젝트를 선택하세요" />
           </SelectTrigger>
@@ -56,6 +81,7 @@ export default function ReviewForm({
             )}
           </SelectContent>
         </Select>
+        {errors.projectId && <p className="text-red-500">{errors.projectId.message}</p>}
       </div>
 
       <div className="mb-4">
@@ -63,7 +89,7 @@ export default function ReviewForm({
         <Input
           id="title"
           placeholder="리뷰 제목을 입력하세요"
-          {...register('title', { required: '제목을 입력해주세요.' })}
+          {...register('title')}
         />
         {errors.title && <p className="text-red-500">{errors.title.message}</p>}
       </div>
@@ -73,7 +99,7 @@ export default function ReviewForm({
         <Textarea
           id="content"
           placeholder="리뷰 내용을 입력하세요"
-          {...register('content', { required: '내용을 입력해주세요.' })}
+          {...register('content')}
         />
         {errors.content && <p className="text-red-500">{errors.content.message}</p>}
       </div>
@@ -85,6 +111,23 @@ export default function ReviewForm({
           setSelectedImages={setSelectedImages}
         />
       )}
+      {errors.imageIds && errors.imageIds.message && <p className="text-red-500">{errors.imageIds.message}</p>}
+
+      <div className="actions mt-6 flex justify-end space-x-2">
+        <Button
+          variant="destructive"
+          type="button"
+          onClick={() => navigate(-1)}
+        >
+          취소
+        </Button>
+        <Button
+          variant="default"
+          type="submit"
+        >
+          리뷰 요청
+        </Button>
+      </div>
     </form>
   );
 }
diff --git a/frontend/src/pages/ReviewRequest.tsx b/frontend/src/pages/ReviewRequest.tsx
index 3b06871..97a15d9 100644
--- a/frontend/src/pages/ReviewRequest.tsx
+++ b/frontend/src/pages/ReviewRequest.tsx
@@ -1,48 +1,34 @@
-import { Button } from '@/components/ui/button';
 import { useNavigate } from 'react-router-dom';
 import useCreateReviewQuery from '@/queries/reviews/useCreateReviewQuery';
 import useAuthStore from '@/stores/useAuthStore';
 import { useParams } from 'react-router-dom';
 import ReviewForm from '@/components/ReviewForm';
 import useReviewRequest from '@/hooks/useReviewRequest';
-import { useState } from 'react';
+
 export default function ReviewRequest(): JSX.Element {
   const { profile } = useAuthStore((state) => state);
   const memberId = profile?.id ?? 0;
   const navigate = useNavigate();
   const { workspaceId } = useParams<{ workspaceId?: string }>();
 
-  const { projects, selectedProjectId, setSelectedProjectId, selectedImages, setSelectedImages } = useReviewRequest();
-
-  const handleSuccess = () => {
-    navigate(`/admin/${workspaceId}/reviews`);
-  };
-
+  const { projects } = useReviewRequest();
   const createReview = useCreateReviewQuery();
 
-  const [formData, setFormData] = useState<{ title: string; content: string } | null>(null);
-
-  const handleReviewSubmit = (data: { title: string; content: string }) => {
-    setFormData(data);
-  };
-
-  const handleButtonClick = () => {
-    if (!formData) return;
-
+  const handleReviewSubmit = (data: { projectId: string; title: string; content: string; imageIds: number[] }) => {
     const reviewData = {
-      title: formData.title,
-      content: formData.content,
-      imageIds: selectedImages,
+      title: data.title,
+      content: data.content,
+      imageIds: data.imageIds,
     };
 
     createReview.mutate(
       {
-        projectId: Number(selectedProjectId),
+        projectId: Number(data.projectId),
         memberId,
         reviewData,
       },
       {
-        onSuccess: handleSuccess,
+        onSuccess: () => navigate(`/admin/${workspaceId}/reviews`),
       }
     );
   };
@@ -53,29 +39,8 @@ export default function ReviewRequest(): JSX.Element {
 
       <ReviewForm
         projects={projects.map((project) => ({ id: project.id.toString(), title: project.title }))}
-        selectedProjectId={selectedProjectId}
-        setSelectedProjectId={setSelectedProjectId}
-        selectedImages={selectedImages}
-        setSelectedImages={setSelectedImages}
         onSubmit={handleReviewSubmit}
       />
-
-      <div className="actions mt-6 flex justify-end space-x-2">
-        <Button
-          variant="destructive"
-          type="button"
-          onClick={() => navigate(-1)}
-        >
-          취소
-        </Button>
-        <Button
-          variant="default"
-          onClick={handleButtonClick} // 버튼 클릭 시에만 mutate 실행
-          disabled={!selectedProjectId || !formData}
-        >
-          리뷰 요청
-        </Button>
-      </div>
     </div>
   );
 }

From 4dee5fc1d25668ee320aa7e986a574a11f6fa3ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Mon, 30 Sep 2024 13:18:03 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Refactor:=20=EB=A6=AC=EB=9E=9C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=EC=9D=84=20=EC=9C=84=ED=95=9C=20key=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ModelManage/TrainingTab.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/ModelManage/TrainingTab.tsx b/frontend/src/components/ModelManage/TrainingTab.tsx
index 7688135..f9e7072 100644
--- a/frontend/src/components/ModelManage/TrainingTab.tsx
+++ b/frontend/src/components/ModelManage/TrainingTab.tsx
@@ -56,6 +56,7 @@ export default function TrainingTab({ projectId }: TrainingTabProps) {
   return (
     <div className="grid grid-rows-[auto_1fr] gap-8 md:grid-cols-2">
       <TrainingSettings
+        key={selectedModel?.isTrain ? 'training' : 'settings'}
         projectId={numericProjectId}
         selectedModel={selectedModel}
         setSelectedModel={setSelectedModel}
@@ -65,6 +66,7 @@ export default function TrainingTab({ projectId }: TrainingTabProps) {
         className="h-full"
       />
       <TrainingGraph
+        key={selectedModel?.isTrain ? 'training' : 'graph'}
         projectId={numericProjectId}
         selectedModel={selectedModel}
         className="h-full"