Feat: 리뷰에 쓸 이미지 선택을 위한 컴포넌트 추가

frontend/src/components/ImageSelection/index.tsx

@@ -0,0 +1,57 @@
+import { Label } from '@/components/ui/label';
+import useFolderQuery from '@/queries/folders/useFolderQuery';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+interface ImageSelectionProps {
+  projectId: string;
+  selectedImages: number[];
+  setSelectedImages: React.Dispatch<React.SetStateAction<number[]>>;
+}
+
+export default function ImageSelection({ projectId, selectedImages, setSelectedImages }: ImageSelectionProps) {
+  const { data: folderData } = useFolderQuery(projectId, 0);
+  const savedImages = folderData?.images.filter((image) => image.status === 'SAVE') || [];
+
+  const handleImageSelect = (imageId: number) => {
+    setSelectedImages((prev: number[]) =>
+      prev.includes(imageId) ? prev.filter((id) => id !== imageId) : [...prev, imageId]
+    );
+  };
+
+  return (
+    <div className="mb-4">
+      <Label>이미지 선택 (파일 목록)</Label>
+      <ScrollArea className="max-h-64 overflow-auto border p-2">
+        <ul className="space-y-2">
+          {savedImages.length > 0 ? (
+            savedImages.map((image) => (
+              <li
+                key={image.id}
+                className={`relative flex items-center justify-between border p-2 ${
+                  selectedImages.includes(image.id) ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
+                }`}
+              >
+                <span className="truncate">{image.imageTitle}</span>
+                <div className="flex items-center space-x-2">
+                  {selectedImages.includes(image.id) && (
+                    <Button
+                      variant="destructive"
+                      size="xs"
+                      onClick={() => handleImageSelect(image.id)}
+                      className="p-0"
+                    >
+                      X
+                    </Button>
+                  )}
+                </div>
+              </li>
+            ))
+          ) : (
+            <p className="text-gray-500">저장된 이미지가 없습니다.</p>
+          )}
+        </ul>
+      </ScrollArea>
+    </div>
+  );
+}

frontend/src/components/ui/scroll-area.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };