feat: add onClick handler to FeedbackImage for opening images in a new tab

Author: chiol

apps/web/src/shared/ui/feedback-image.tsx

@@ -21,9 +21,10 @@ import { useOAIQuery } from '../lib';
 
 interface Props {
   url: string;
+  onClick?: (url: string) => void;
 }
 
-const FeedbackImage = ({ url }: Props) => {
+const FeedbackImage = ({ url, onClick }: Props) => {
   const router = useRouter();
   const projectId = Number(router.query.projectId);
   const channelId = Number(router.query.channelId);
@@ -76,6 +77,7 @@ const FeedbackImage = ({ url }: Props) => {
       alt={presignedUrl ?? url}
       className="cursor-pointer object-cover"
       fill
+      onClick={() => onClick?.(presignedUrl ?? url)}
     />
   );
 };

apps/web/src/shared/ui/image-preview-button.tsx

@@ -74,7 +74,12 @@ const ImagePreviewButton: React.FC<IProps> = (props) => {
           >
             {urls.map((url) => (
               <SwiperSlide key={url} className="relative">
-                <FeedbackImage url={url} />
+                <FeedbackImage
+                  url={url}
+                  onClick={(url) =>
+                    window.open(url, '_blank', 'noopener,noreferrer')
+                  }
+                />
               </SwiperSlide>
             ))}
           </Swiper>